Тема 3. Внедрение flash-роликов в HTML

Программа Flash может создать html-страницу, в которую будут включены все теги, необходи-

мые для размещения flash-ролика. Для публикации html-страницы необходимо в настройках публикации ролика на вкладке Format выбрать пункт HTML и настроить параметры на одноименной вкладке.

Доступны следующие параметры:

•Template – Шаблоны публикации. Определяют, какие дополнительные данные будут включены в HTML-страницу. В большинстве случаев используется шаблон Flash Only.

•Detect Flash Version – Определение версии Flash Player. Если на компьютере пользователя установлена более старая версия плеера, будет автоматически выведено диалоговое окно с предложение обновить Flash Player.

•Dimension – Размер окна воспроизведения ролика

Задает значения атрибутов width и height для тегов <object> и <embed>

-Match Movie – По размеру ролика

-Pixel – Задать размер в пикселях

-Percent – Задать размер в процентах

•Playback – Опции воспроизведения

-Paused at start – Ролик будет оставаться на первом кадре, пока не будет нажата кнопка

«Play» Flash-плеера

-Loop – Зацикленная анимация

-Display menu – Показывать полное контекстное меню

-Device font – Использовать шрифты устройств

•Quality – Качество прорисовки ролика

•Window mode – Режим окна ролика

•HTML Alignment – Выравнивание окна воспроизведения ролика, относительно HTMLстраницы

-Default - По умолчанию – лево верх

-Left – Левый край

-Right – Правый край

-Top – Верх страницы

-Bottom – Низ страниц

•Scale – Масштабирование ролика при изменении размеров окна воспроизведения

•FlashAlignment – Выравнивание ролика относительно окна воспроизведения

•Show warning messages – Показывать предупреждающие сообщения при возникновении конфликта параметров.

Качество прорисовки ролика (Quality)

При публикации ролика можно задать следующие настройки качества:

•Low – Сглаживание отключено, максимальная скорость воспроизведения

•Auto Low – Начинается с отключенным сглаживанием, но если Flash Player определил,

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

•Auto High – Начинается со включенным сглаживанием, но если частота воспроизведения падает ниже заданной, сглаживание отключается.

•Medium – Применяется некоторое сглаживание

•High – Сглаживание применяется всегда, но не для растровых изображений

•Best – Сглаживаются все элементы ролика

Публикация баннеров

Баннер – это ролик фиксированного размера. Поэтому параметр Dimension (размер окна воспроизведения) должен иметь значение Match Movie. Позиция на странице (HTMLAlignment) не важна, т.к. код баннера будет внедрен внутрь готовой HTML-страницы сайта.

В этом случае HTML код, генерируемый программой Flash, можно сократить до содержимого тега <object></object>, находящегося в блоке <noscript></noscript>. Но при этом в настройках публикации необходимо отключить параметр Detect Flash Version (определение версии плеера, установленного на компьютере пользователя).

При размещении на сайте опубликованные SWF-ролик и HTML-страницу необходимо размещать внутри в одной директории.

Создание flash-роликов с прозрачным фоном

За то, в каком окне отображается ролик, отвечает параметр Window mode:

•Window – Оконный режим. Другое содержимое HTML страницы не может располагаться ни над роликом, ни под ним.

•OpaqueWindowless – Непрозрачный безоконной. Задает непрозрачный фон для содержимого ролика. Другое содержимое HTML страницы может располагаться только над роликом

•Transparent Windowless – Прозрачный безоконный. Фон ролика становиться прозрачным. Другое содержимое HTML страницы может располагать как над роликом, так и под ним.

Таким образом, для создания роликов с прозрачным фоном необходимо параметру

Window mode установить значение Transparent Windowless.

Создание «резиновых» flash-роликов

Чтобы ролик закрыл всюплощадьокна браузера необходимо для параметра Dimension(размер окна воспроизведения) установить значение Percent и задать размеры ролика:

Width 100 % x Height 100%

Особенность «резиновых» роликов, заключается в том, что они изменяют свой размер, при изменении размера окна браузера.

Параметр Scale отвечает за то, как будет происходить масштабирование ролика:

•Default (Show all) – Показать все. Отображается все содержимое ролика - даже то, что находиться вне границ рабочей области Stage. При изменении окна браузера ролик пропорционально масштабируется.

•No border – Без границ. Содержимое ролика вне рабочей области НЕ отображается. При изменении окна браузера ролик пропорционально масштабируется так, чтобы вся площадь окна была заполнена. Часть ролика может обрезаться.

•Exact fit – Строгое соответствие. Содержимое ролика вне рабочей области НЕ отображается. При изменении окна браузера ролик НЕ пропорционально масштабируется так, чтобы вся площадь окна была заполнена.

•No scale – Без масштабирования. Ролик не масштабируется при изменении окна браузера. Содержимое ролика вне рабочей области отображается.

Примеры режимов масштабирования «резиновых» flash-роликов:

Если для параметра Dimension заданы размеры Width 100 % x Height 100%, то можно управлять позиционированием ролика относительно окна воспроизведения. Параметр FlashAlignment задает выравнивание ролика по горизонтали и вертикали.

Оптимизация ролика

Для роликов, размещаемых в WEB, крайне важно соблюдать баланс между мультимедийной насыщенностью, объемом получаемого файла и скоростью воспроизведения ролика.

Для этого необходимо выполнять правила оптимизации роликов:

•Для каждого элемента, который встречается неоднократно, используйте символы

•Если объекты отличаются только цветом, создавайте их как экземпляры одного символа и настраивайте цвет с помощью параметров Color Effect палитры Properties

•Вместо покадровой анимации используйте Tween-анимацию

•Избегайте анимации растровых изображений. Используйте их только в качестве фона или статических элементов.

•Экономно применяйте фильтры, поскольку это замедляет воспроизведение

•Внедряйте внутрь ролика сжатые растровые изображения (JPEG) и аудио файлы (MP3)

Оптимизация векторных контуров:

•Экономно используйте специальные типы линий (пунктиры, точки и т.д.). Сплошные линии требуют меньше памяти

•Линии, созданные инструментом Карандаш, занимают меньше места, чем мазки Кисти.

•Экономноиспользуйтеградиенты.Градиентнаязаливкаобластитребуетпримернона50байт больше места, чем заливка сплошным цветом.

•Старайтесь реже использовать эффект альфа-прозрачности, поскольку это замедляет воспроизведение.

•Оптимизируйте количество опорных точек сложных контуров с помощью команды

Modify > Shape > Optimize.

Тема 4. Создания роликов для мобильных устройств

Программа Flash может создавать ролики для мобильных устройств. Для этого при создании файла необходимо выбрать пункт Flash File (Mobile). Отроется специализированное приложе-

ние Adobe Device Central CS4.

Adobe Device Central - это программа эмуляции мобильных устройств. Она позволяет выбрать целевое устройство и выяснить параметры и ограничения, которые имеются у этого устройства. Библиотеки устройств постоянно обновляются.

После выбора нужного устройства необходимо нажать кнопку Create, расположенную в правой нижней части окна. При этом будет создан новый flash-ролик, для которого:

•Размеры рабочей области будут заданы в соответствии с размером экрана устройства

•Настройки публикации будут установлены в соответствии с возможностями выбранного устройства (версия Flash-проигрывателя и версия языкаActionScript).

В остальном ролик для мобильных устройств ничем не отличается от других типов роликов.

При тестировании ролика (Control > Test Movie или CTRL+ENTER) будет открываться приложении Adobe Device Central. Вы сможете не только увидеть, как выглядит Ваш ролик на экране выбранного устройства, но и контролировать параметры устройства при воспроизведении ролика (объем занимаемой памяти и т.д.).

С помощью языка ActionScript можно создавать flash-приложения для мобильных устройств. Приэмуляциивпрограмме Adobe DeviceCentralбудетдоступноуправлениеflash-приложением с помощью клавиатуры устройства.

Внешний вид окна приложения Adobe Device Central представлен на рисунке:

Device Profile (Профиль устройства) Emulator (Режим эмуляции)

С помощью приложения Adobe Device Central также можно эмулировать контент мобильных устройств, созданный в программах Adobe Photoshop, Adobe Illustrator и AdobeAfter Effects.

Для создания нового документа необходимо в приложении Adobe Device Central выполнить команду File > New Document In и выбрать нужное приложение.

После выбора целевого устройства нужно нажать кнопку Create. При этом откроется выбранное приложение и в нем будет создан файл, размеры которого будут соответствовать размеру экрана устройства.

Для просмотра эмуляции файла нужно выполнить команду File > Save for Web & Device. В нижнем правом углу диалогового окна данной команды находится кнопка Device Central, позволяющая перейти в режим эмуляции.