Совет: iPad-Proof Ваш Flash-сайт

В этом руководстве вы узнаете, как использовать скрипт SWFObject для настройки автоматического перенаправления с веб-сайта Flash на резервный веб-сайт без Flash при просмотре на iPad.

Окончательный результат предварительного просмотра

Вот очень простой макет сайта Flash, который мы будем использовать в этом уроке. Если вы попытаетесь получить доступ к этой странице с помощью iPad, вы не сможете увидеть какой-либо контент.

И вот окончательный результат, к которому мы будем стремиться. если вы получите доступ к нему через iPad, вы сможете увидеть анимированную страницу.

Вступление

Когда дует ветер перемен, одни строят стены, другие строят ветряные мельницы.

— Древняя китайская пословица

Я думаю, что iPad — отличное устройство, хотя я могу понять, почему появление планшета без Flash заставило многих сходить с ума. Я признаю, что поначалу это меня бесило: незадолго до того, как iPad появился в моем местном магазине Apple, я закончил сайт Flash, я подумал о своем личном шедевре, и я был озадачен, когда, пытаясь открыть его с iPad, вместо своего ультра-крутого Flash-анимация Я был перенаправлен на резервный сайт без Flash, который я настроил «на всякий случай». Признаюсь, мне потребовалось некоторое время, чтобы адаптировать свой разум к iPad, но постепенно я научился верить, что, как и все новаторские работы, он должен был вырваться из зоны комфорта, и я полагаю, что мне это нравится.

Конечно, что помогло мне прийти к такому философскому подходу, так это количество людей, которые наняли меня для создания аналогичных перенаправлений для своих существующих Flash-сайтов. Они либо не могли себе позволить, либо не хотели заменить свои модные, хорошо спроектированные Flash-сайты более простыми, но более удобными для iPad, поэтому возможность настройки автоматического перенаправления iPad на более простой, чистый HTML-сайт понравился. их.

(Можно утверждать, что, даже не имея возможности воспроизводить Flash-анимацию, iPad более открыт для JavaScript, но, к сожалению, это не так. Большинство сайтов с анимацией JavaScript не очень хорошо работают на iPad. Протестируйте любой из этих десяти JavaScript анимированные сайты на вашем компьютере, а затем на iPad, чтобы понять, что я имею в виду.

Нам придется подождать до полной реализации HTML5, чтобы увидеть новый Интернет, где сторонние плагины, такие как Flash Player, постепенно теряют свою важность. Между тем, выпуск планшета для iPad создал новую временную нишу в веб-разработке: защита iPad от существующих Flash-сайтов. Существуют тысячи отличных Flash-сайтов, которые могут воспользоваться такой услугой; Это отличная возможность работы для таких парней, как ты и я.

Существует множество способов защитить iPad от Flash-сайтов, некоторые из которых лучше, чем другие. Этот учебник предлагает только одно возможное простое решение. Итак, приступим к делу.

Шаг 1. Подготовьте резервный веб-сайт

Это может быть полноценный не-Flash-сайт, содержащий HTML-версию всего контента, скопированного с Flash-сайта, или просто одну веб-страницу, содержащую только основную информацию и сообщение для посетителя, что-то вроде «вы просматриваете наш веб-сайт на устройстве, которое не позволяет отображать Flash-содержимое. Чтобы получить доступ ко всем функциям, откройте наш веб-сайт на компьютере, на котором установлена ​​последняя версия Flash-плеера. «

Для этого урока я подготовил простую анимированную веб-страницу JavaScript, которая будет служить резервной копией. iPad способен воспроизводить анимацию в меру хорошо. Создание JavaScript-анимации, удобной для iPad, выходит за рамки этого руководства, но вы можете найти некоторую полезную информацию об этом на домашней странице библиотеки анимации JavaScript $ FX () (и вы также можете изучить исходный код JavaScript). — анимированная страница, которую мы будем использовать в качестве нашей резервной копии).

Примечание: чтобы позволить анимированной странице JavaScript воспроизводиться при загрузке на ваш сервер, вам также необходимо загрузить файл fx.js расположенный в папке «Сценарии», среди загружаемых файлов для этого урока.

Шаг 2: Исходный код Flash сайта

Нам нужно выяснить, какой код использовался для встраивания SWF-файла исходного веб-сайта Flash в его HTML-страницу. Мы можем сделать это, открыв страницу в браузере и выбрав опцию View Source. Кроме того, мы можем открыть страницу в любом текстовом редакторе или специализированном редакторе HTML.

Фрагмент кода, который встраивает SWF-файл в HTML-страницу, легко распознать в исходном коде. Активируйте функцию поиска и найдите на странице «swf». Это покажет имя файла SWF, встроенного в HTML-страницу. Код, окружающий имя файла swf, — это код, который встраивает его в html-страницу.

SWF-файлы могут быть встроены в HTML-страницу различными способами. Их описание сделало бы этот урок бесконечным, поэтому, если вам интересно, вы можете просто погуглить его. Я упомяну только некоторые из самых популярных.

Использование тегов HTML

Базовый код на основе тегов HTML для встраивания SWF-файла может выглядеть следующим образом:

Скорее всего, Flash-сайт был создан некоторое время назад: из атрибута codebase тега object мы видим, что SWF-файл должен воспроизводиться 6-й версией Flash-проигрывателя.

Код по большей части не требует пояснений, очень ясно, какой параметр что делает. Следует отметить, что, как видите, по какой-то загадочной причине большинство параметров указано в коде дважды. Это легко объяснить: код нацелен на два разных интернет-браузера по отдельности.

Тег <object> со всеми его атрибутами и параметрами предназначен для Internet Explorer. Тег <embed> предназначен для устаревшего в данный момент Netscape Navigator (этот браузер игнорировал тег объекта). Отсюда и повторение одной и той же информации.

Следует также упомянуть, что атрибут classid <object> сообщает Internet Explorer, что он должен загрузить плагин ActiveX, если он не установлен; Атрибут pluginpage <embed> указывает Netscape Navigator отображать ссылку на страницу плагина.

Использование файла AC_RunActiveContent.js.

AC_RunActiveContent.js — это файл JavaScript, который все еще широко использовался всего несколько лет назад. Некоторые программисты, все еще работающие с Flash CS3 Professional, могут использовать его даже сейчас.

Код, встраивающий SWF-файл с использованием AC_RunActiveContent.js, может выглядеть так:

Есть также строка кода внутри

тег страницы, который может выглядеть так:

Целью включения файла AC_RunActiveContent.js было изменение, внесенное корпорацией Microsoft в браузер Internet Explorer в 2006 году. В результате этого изменения (вызванного некоторыми юридическими вопросами, известными как «проблема патента Eolas» и не имеющим прямого отношения к технические аспекты веб-программирования), посетители, которые открывали Flash-сайты с помощью Internet Explorer, должны были щелкнуть встроенный контент, чтобы увидеть его или взаимодействовать с ним.

Файл AC_RunActiveContent.js был временным решением, позволяющим пользователям сразу же пропустить этот надоедливый щелчок и отобразить активный контент с помощью создания тегов html в файле JavaScript. Этот файл обычно находится в папке «Сценарии» в том же каталоге, что и HTML-страница, куда был встроен SWF-файл. Чтобы не вдаваться в подробности, файл AC_RunActiveContent.js вызывается через функцию AC_FL_RunContent, а атрибуты и значения передаются в файл парами: «ширина», «800», «высота», «500» и т. Д. на. Вам не нужно включать расширения файлов с именами файлов SWF, файл JavaScript делает это автоматически.

Использование ufo.js

UFO (аббревиатура, обозначающая «Ненавязчивые объекты Flash») — это файл JavaScript, используемый с 2006 года для обнаружения версий Flash Player и встраивания SWF-файлов в страницы HTMl. Он был создан Бобби ван дер Слуисом .

Код для встраивания SWF-файла в HTML-страницу с помощью ufo.js может выглядеть следующим образом:

Ссылка на файл JavaScript внутри <head> может выглядеть так:

Аргументы ufo.js говорят сами за себя. Файл был очень популярен, но в настоящее время устарел.

Использование файла FlashReplace.js.

FlashReplace.js — это легкий (2,1 кб) файл JavaScript, созданный Робертом Найманом .

Код для встраивания SWF-файла в HTML-страницу с помощью FlashReplace.js может выглядеть следующим образом:

Очевидно, что, как и в случае с файлами AC_RunActiveContent.js и ufo.js, вы также найдете ссылку на файл JavaScript в <head> . Это может выглядеть так:

Как видите, FlashReplace.js действительно прост. Первый аргумент — это имя тега HTML, содержимое которого должно быть заменено файлом swf; второй аргумент — это имя SWF-файла, третий аргумент — произвольный идентификатор, который можно назначить встраиваемому объекту, а последние два аргумента — это ширина и высота SWF-файла.

Использование файла swfobject.js.

swfbject.js был создан Джеффом Стернсом , Тоби Будро и Бобби ван дер Слуисом . В настоящее время (2010 г.) это самая популярная и широко используемая библиотека JavaScript для определения версий проигрывателя Flash и встраивания SWF-файлов в HTML-страницы.

Код для встраивания SWF-файла в HTML-страницу с использованием SWFObject.js может выглядеть следующим образом:

Фрагмент кода, который вы только что прочитали, является очень простым примером того, как swfobject.js может быть реализован. Код может быть намного сложнее. Для получения дополнительной информации ознакомьтесь с этим учебником swfbject.js и обратитесь к документации для разработчиков .

Ссылка на файл JavaScript внутри <head> может выглядеть так:

Шаг 3: Перенаправление на резервный веб-сайт

Если существующий веб-сайт Flash использует SWFObject.js для встраивания SWF-файла, вам повезло: мы собираемся использовать тип встраивания SWFObject.js для настройки перенаправления на веб-страницы без Flash. Если используется какой-либо другой сценарий встраивания, нам придется стереть старый код со страницы HTML и заменить его встраиванием SWFObject. Мы собираемся использовать SWFObject для перенаправления посетителей iPad на резервный сайт без Flash.

В этом руководстве мы будем использовать учебную страницу, в которую встроен SWF-файл с использованием файла AC_RunActiveContent.js. Если мы откроем страницу FlashWebsite.html в браузере, мы увидим знакомый SWF-файл, встроенный в страницу .

Давайте откроем страницу с именем FlashWebsite.html в любом текстовом редакторе или любом специализированном редакторе HTML.

Мы должны запомнить или записать важную информацию о нашем SWF-файле, такую ​​как его имя (в нашем примере FlashWebsite.swf), ширина (800), высота (580) и цвет фона (#FFFFFF).

Теперь давайте заменим строку, которая ссылается на файл AC_RunActiveContent.js в

тег:

с этой строкой:

Теперь мы создали ссылку на библиотеку SWFObject.

Давайте найдем код, который выглядит следующим образом:

Мы выберем этот бит кода и удалим его. Теперь у нас есть пустой <div> :

Ниже этого тега давайте вставим следующее:

Обратите внимание, что аргумент в скобках для единственного добавленного параметра ( so.write("container") ) соответствует имени пустого <div> : «container». Этот аргумент сообщает браузеру, где разместить Flash-контент. SWF-файл будет встроен в пустой <div> помеченный идентификатором «container».

Примечание. Пятый аргумент в скобках функции SWFObject, «9», относится к основной версии Flash-проигрывателя. Когда это не имеет особого значения, я предпочитаю немного ослабить работу браузеров и не требовать более поздней версии Flash-проигрывателя, поэтому я установил здесь значение 9, хотя текущая версия сегодня (2010) — 10.

Давайте сохраним страницу HTML и откроем ее в браузере. Это должно выглядеть так .

Пока что, похоже, ничего не изменилось. Flash-анимация воспроизводится, когда встроена с использованием файла AC_RunActiveContent.js, и теперь она воспроизводится точно так же, будучи встроенной в файл swfobject.js. Если мы попытаемся открыть эту страницу с помощью iPad, мы все равно не увидим никакого контента.

Давайте добавим еще два аргумента в конце ряда аргументов в скобках вызова основной функции. Первый аргумент должен быть пустым, только кавычки: «», а второй аргумент должен быть путем к резервной веб-странице без Flash, на которую мы хотим перенаправить посетителей iPad: «./JavaScriptWebsite.html»

Полный фрагмент кода с добавлением двух новых аргументов должен выглядеть следующим образом:

Первый пустой аргумент, который мы только что добавили, называется xiRedirectUrl и используется сценарием SWFObject для перенаправления пользователей, которые завершают обновление ExpressInstall. Мы не используем ExpressInstall здесь, поэтому мы оставляем аргумент пустым. Второй аргумент, называемый redirectUrl , используется SWFObject для автоматического перенаправления пользователей, у которых не установлена ​​необходимая версия Flash-плеера — это именно та функция, которая нам была нужна все время. На планшете iPad не установлена ​​ЛЮБАЯ версия Flash-плеера, так что он готов!

Примечание. «./JavaScriptWebsite.html» — это локальный путь к анимированной JavaScript-странице резервного копирования, которую мы используем в этом руководстве. Этот путь позволит нам проверить перенаправление как локально, так и на сервере. Работая со своими собственными проектами, вы можете установить абсолютный путь к вашей резервной HTML-странице вместо локального или локальный путь к любому каталогу или поддомену, где вы можете разместить страницу резервной копии.

Шаг 4: локально протестируйте перенаправление

Перед загрузкой файлов на сервер мы должны проверить перенаправление локально. Чтобы сделать это, мы смоделируем iPad, установив для атрибута version SWFObject несуществующую версию Flash player. Давайте начнем с нуля и установим его на 1000 (эта версия Flash-плеера должна быть доступна где-то около 3000 г. н.э., если дела пойдут хорошо в Adobe).

Код должен выглядеть так:

Не забудьте сохранить файл.

Теперь давайте откроем FlashWebsite.html в браузере и взглянем на строку заголовка веб-страницы. Вместо «Flash Website» следует указать «JavaScript-анимированный веб-сайт», а последняя часть URL должна быть JavaScriptWebsite.html вместо FlashWebsite.html. Поздравляем, наше перенаправление работает: сверхсовременная анимация, которую вы видите в окне просмотра, сделана не с Flash, а с JavaScript. Это должно выглядеть и вести себя так.

Давайте сбросим значение версии обратно на «9». Код в FlashWebsite.html снова должен выглядеть следующим образом:

Обязательно сохраните файл еще раз.

Шаг 5: Загрузить файлы на сервер

Используя любое клиентское программное обеспечение FTP, давайте загрузим следующие файлы в выбранный каталог на вашем сервере:

• FlashWebsite.html
• FlashWebsite.swf
• JavaScriptWebsite.html

Загрузите папку Scripts, содержащую файлы swfobject.js и fx.js, в один и тот же каталог на сервере (напомним, swfobject.js — это файл, который включает в себя вставку и перенаправление swf, а файл fx.js — тот, который позволяет Вы можете создавать и воспроизводить анимацию JavaScript, используемую на резервной веб-странице, которая подходит для воспроизведения на iPad).

Вам не нужно загружать файл AC_RunActiveContent.js, также расположенный в папке «Сценарии», на ваш сервер, даже если вы случайно сделали это, этот файл никоим образом не повлияет на производительность всех других загруженных вами файлов.

Шаг 6: Проверьте перенаправление с iPad

Вот он, момент истины! Запустите планшет iPad и получите доступ к странице FlashWebsite.html, загруженной на ваш сервер. Вуаля! Вы должны увидеть страницу макета с анимацией JavaScript вместо страницы Flash. Мы только что защищали iPad от Flash-сайта.

Вывод

Вы только что узнали один из возможных способов защиты iPad от существующего Flash-сайта. Существует много способов достижения этой цели, и не все из них включают автоматическое перенаправление. Я хотел бы попросить всех вас поделиться своими идеями о теме iPad-флэш-корректуры в комментариях к этому уроку. Спасибо за чтение!