Использование Flash технологии для создания интерактивного содержимого web среды. Учитель информатики моу



Скачать 266.04 Kb.
Дата10.11.2016
Размер266.04 Kb.
Использование Flash – технологии для создания интерактивного содержимого web – среды.

Учитель информатики
МОУ «СОШ № 43»
Пашабекова С. А.




2008-2009 г.

ОГЛАВЛЕНИЕ


Введение 3

Интерфейс программы Flash 3

Окно программы 3

Временная шкала 4

Маркер 5

Слои 5

Кадры 5

Символы 6

Анимация 7

Покадровая анимация 7

Анимация с построением промежуточных кадров
(tweening motion) 8

Shape tweening 9

Motion Tweening 10

Ваш первый Flash-баннер 11

Публикация Flash - фильма 14

Параметры публикации 14

Вкладка «Formats» 14

Вкладка «Flash» 15

Вкладка «HTML» 16

Вкладка «GIF» 18

Вкладка «JPEG» 21



Заключение 22


Введение


Internet – среда в которой слишком быстро все стареет. Средняя продолжительность жизни субъекта в этом мире 1,5 года.

Если еще вчера критерием интерактивности были реагирующие на курсор элементы меню, динамически загружаемые страницы, то сегодня, чтобы успешно продавать, рекламировать в сети, а, тем более, развлекать, нужны новые технологии.

И такая технология уже есть! Flash! В переводе с английского flash – вспышка, сверкание, “быстрый” кадр.

На сегодняшний день эта новая технология одна из самых массовых. Оживившая интернет, расшевелившая дизайнерскую мысль, делающая реальным создание принципиально новых интерфейсов.

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

Продукт концерна Macromedia, позволяет разрабатывать:


  • интерактивные мультимедийные приложения,

  • интересные флеш - презентации,

  • web-сайты, игры, и просто мультфильмы.


К преимуществам Flash перед HTML относятся:

  • качественные изображения и текст, так как их основой является векторная графика;

  • простота проектирования фильма;

  • любой объект или любая часть экрана может выполнять функцию кнопки;

  • меньшее время требуемое на воспроизведение Flash –анимации, в сравнении с растровой Gif – анимацией;

  • независимость объема фильма от его размера на экране, уменьшение и увеличение размера без потери качества;

  • масштаб показываемой страницы с графикой и анимацией при желании может автоматически меняться в соответствии с размером пользовательского окна;

  • Flash и HTML используются в любом сочетании.

На сегодняшний день более миллиона человек по всему миру используют Flash для создания красочных и, в тоже время компактных Web – ресурсов.

Интерфейс программы Flash

Окно программы


Интерфейс Flash весьма удобен и легок. После некоторого времени работы с программой понимаешь, как хорошо все продуманно и сколько труда разработчики Macromedia вложили в свое детище. На рисунке 1 показано, как выглядит программа Flash после загрузки.



Рис. 1. Внешний вид Flash.
Слева находятся панели инструментов. С помощью них можно выбирать
инструменты, а также управлять рабочей областью, модифицировать объекты и выбирать простые цвета. Справа находятся диалоги настройки инструментов, цвета, текста, свойства кадров и объектов. Посередине - рабочая область, где мы будем творить, а над ней шкала времени (Timeline).

Странички (файлы, анимации - как хотите) Flash принято называть фильмами (Movie).

Процесс создания состоит в следующем. Вы создаете так называемый
"авторский файл", который имеет расширение .fla, а затем он транслируется
в результирующий .swf файл, который уже может быть просмотрен в браузере, обрамлен с помощью HTML, и т.д. Кстати, Flash может записать ваше творение в отдельный исполняемый .exe файл. И даже сохранить в виде статического GIF- изображения.

Мы досконально разберем все способы создания анимации, но сначала


определимся с некоторыми базовыми понятиями. Этими понятиями являются кадры
(frames), символы (symbols), слои (layers) и временная шкала (timeline).

Временная шкала


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

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

Маркер


Маркер - указывает на текущий кадр, отображаемый в окне. При клике на какой-либо кадр, маркер автоматически перемещается на него.

Слои


Слева находится перечень слоев. Под ним существуют кнопки, позволяющие добавлять и удалять слои. Каждый слой можно сделать невидимым и запретить его для редактирования. В компьютерной графике этот инструмент используется очень часто. Представьте, что вы рисуете на прозрачных листах, а потом накладываете их друг на друга. То, что находится на верхних слоях, закрывает содержимое нижних слоев. Слои можно делать невидимыми и/или недоступными, чтобы облегчить редактирование сцены в целом. Во Flash есть пара особенных типов слоев: слои, содержащие траектории движения и слои - маски. Есть достаточно большое количество приемов, в которых используются слои, но во Flash без них просто нельзя обойтись по одной важной причине: в один момент времени для каждого объекта анимации нужен отдельный слой. Объектом анимации считается фигура (shape) или символ (symbol).

Кадры


Шкала кадров - поле, где вы можете добавлять и удалять кадры. Кадры бывают обычными или ключевыми. В ключевом кадре автор имеет право изменять содержимое сцены. Обычный кадр всегда повторяет изображение созданное в ближайшем слева ключевом кадре. Ключевые кадры отображаются на линейке значками , если они пустые или , если они содержат изображение. Обычные кадры обозначаются сплошным белым фоном, если они пустые и серым фоном, если они содержат изображение.

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

Перемещаться по кадрам можно, щёлкая по их значкам на линейке, или используя клавиши < или >.



Горячая клавиша

Назначение

F5

Вставка обычного кадра.

F6

Вставка ключевого кадра.

Содержимое кадра повторяет содержимое ближайшего слева ключевого кадра.



F7

Вставка пустого ключевого кадра.

Shift-F5

Удаление кадра.

Shift-F6

Преобразование ключевого кадра в обычный.

Монтажный стол представляет содержимое Flash в двух измерениях: по времени и по глубине.


Время: последовательность кадров располагается горизонтально слева направо, так же как они отображаются по времени.
Глубина: слои позволяют отделять содержимое, находящееся на разных слоях. Верхний слой накроет слои, расположенные ниже, не влияя на них
Кнопки управления тенями - это кнопки, позволяющие отображать соседние кадры как бы через кальку, чтобы видеть разницу между предыдущими и последующими кадрами. Можно задавать глубину такого отображения по обе стороны от маркера.

Символы


Символы - одно из ключевых понятий во Flash. Символом может быть, как простейшая геометрия или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций
во Flash.

Например, можно сделать символы - колесо, корпус, стекла, антенны.


Потом все это объединить в символ - автомобиль. А затем создать сцену, на которой
этот автомобиль будет ехать. Другой пример. Допустим, вам нужно нарисовать падающий снег. Вы создаете символ снежинки, создаете символ, содержащий несколько анимирующихся снежинок, далее создаете символ в виде столбика падающих снежинок, затем размножаете этот столбик - и получаете падающий анимирующийся снег на всю сцену.

Я думаю, вы уловили смысл символов. Символы добавляют гибкости


вашей сцене. В случае с автомобилем вы можете сделать колесо анимированным символом, так, чтобы ощущалось вращение. Можете сделать дверь кнопкой, чтобы при клике мышкой она открывалась. Смысл в том, что в любой момент вы можете изменить содержание и вид символа, что существенно сокращает затраты на модификацию Flash сцен.

Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):



Изображение (graphic), представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).

Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

· Up - обычное состояние кнопки.


· Over - когда курсор мышки находится над кнопкой.
· Down - когда курсор находится над кнопкой и нажата клавиша мыши.
· Hit - обычное состояние, для кнопки, содержащей ссылку, которую пользователь
уже посещал.

Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров.

Символы могут быть вложенными вне зависимости от типа. Это является самым главным их достоинством. Например, можно сделать кнопку, которая начнет двигаться, когда над ней будет "пролетать" курсор мыши, просто поместив в кадр Over символ - анимацию. Или (парадокс!) на изображение поместить бегущую кошку. Все остальное - дело вашей фантазии.

Символы можно создавать как "с нуля" (Insert - New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert - Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изменять под нужный размер.

Для управления символами используется так называемая библиотека


(Library). Окно библиотеки находится по адресу Window - Library (или Ctrl-L).

Анимация


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

Существует два метода анимации.



Покадровая анимация


Это анимация, полностью составленная из ключевых кадров. Т.е. вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).

На временной шкале покадровая анимация выглядит следующим образом:




Рис 3. - Покадровая анимация


Упражнение 1. Предположим, в нашем ролике круг будет вращаться по кругу.

Нарисуйте круг в единственном кадре нового ролика. Вставьте ключевой кадр в 5–й кадр. Так как ключевой кадр скопирует своё содержимое из предыдущего ключевого кадра, в нём также будет нарисован круг. Используя инструмент стрелка, выделите круг и переместите его вправо и вниз. Вставьте ключевой кадр в 10-й кадр. Вновь выделите круг и сместите его вниз и влево. Вставьте ключевой кадр в 15-й кадр и переместите круг влево и вверх.

Заполните кадры до 19-го кадра обычными кадрами.

Протестируйте ролик.(Control – Test Scene).



Упражнение 2. Создайте первый мультфильм «Fase».

Назовите существующий слой «Лицо». Нарисуйте на рабочем поле круг или овал по своему вкусу. В 20-м кадре вставьте обыч­ный кадр.

Добавьте новый слой, назовите его «Глаза». Нарисуйте в этом новом слое на рабочем поле открытые глаза. Далее перейдите в 10-й кадр. Вставьте ключевой кадр и преобразуйте изобра­жение в полузакрытые глаза. (Автоматически у вас все кадры со 10-го по 20-й заполнятся тем ключевым кадром, который был десятым.)

Теперь в 20-м кадре слоя «Глаза» добавьте обычный кадр. Далее попробуйте поводить по вашей временной шкале вос­производящей головкой (прямоугольник красного цвета) и по­смотрите, как будет изменяться ваша картинка.

Вернитесь в слой «Лицо» и нарисуйте рот, нос, темные во­лосы.

Сохраните ваш фильм.

Чтобы посмотреть, что у вас получилось, нажмите ControlTest Scene.

Как вы знаете, при этом в каталоге, куда вы сохранили ваш фильм, появится ис­полняемый файл, который можно просматривать во встроенном проигрывателе Flash.


Анимация с построением промежуточных кадров
(tweening motion)


При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что вы рисуете объект, потом на другом кадре производите изменения, и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и вы получаете плавную анимацию.

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie). Скорость фильма можно изменить здесь: Modify - Document…- там параметр Frame Rate задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.

Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 30 кадров/сек.,
и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки
- в другой за 2.5 секунды, то на это движение вам нужно отвести 75 кадров.

Во Flash существует два варианта построения промежуточных изображений


- motion tweening (построение анимации на основе модификации символов)
и shape tweening (построение анимации на основе изменения формы).

Эти способы отличаются в корне. Первый используется чаще всего, т.к. с помощью него можно построить подавляющее большинство анимаций. Второй применяется в случаях, когда нужно плавное изменение формы. Поговорим, сначала о нем.


Shape tweening


Скажем, вам нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт волка. В этих случаях используется shape tweening.

Как обычно, вы задаете два ключевых кадра на некотором расстоянии


друг от друга. В этом варианте анимации есть жесткое ограничение: ваша анимация
должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов).

После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), открываете диалог свойств первого кадра, используя контекстное меню и на вкладке «Tween» выбираете «Shape».е.

После подтверждения действия значки кадров, участвующих в анимации формы будут залиты зелёным цветом и на зелёном фоне возникнет стрелка, а если возникли проблемы, то пунктирная линия.


Рис 4. - Shape tweening
В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй. Я специально включила отображение теней на протяжении всего фильма, чтобы отобразить эти кадры:



Рис. 5 - Анимация на основе Shape tweening

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


На первам ключевом кадре я нарисовала круг, а на втором ключевом кадре (это 10-й
кадр сцены) превратила его в полумесяц.
Упражнение 3.

Создать ролик, в котором зелёный прямоугольник сначала плавно поменяет цвет на голубой, потом превратится в круг, который плавно потемнеет на периферии, а в конце станет прозрачным.

Нарисуем в 1-м кадре зеленый прямоугольник. Сделаем 20-й кадр ключевым и изменим цвет прямоугольника на голубой. Вернемся в первый кадр и создадим анимацию Tween - Shape. В 40-м ключевом кадре удалим прямоугольник и нарисуем круг. В 60-м ключевом кадре поменяем цвет круга на темно-синий. В 80-м ключевом кадре выделим круг, перейдем на панель Свойства (Properties) и на панели Fill Color установим прозрачность Alpa=15%. В 20, 40, 60 кадрах также создадим анимацию Tween – Shape. Выделим все кадры, скопируем их обычным образом в 81-й кадр. Выделим кадры, начиная с 81-го и выполним команду контекстного меню Reverse Frames (Отмотка обратно). Протестируем фильм.
Упражнение 4.

Превращение круга в текст.

Изобразим в первом кадре круг. Выберем 20-й кадр и вставим туда ключевой кадр. Создадим анимацию Формы. Выделим круг и удалим его из 20-го кадра, а вместо круга, используя инструмент Текст, напишем любое слово. Выделим текст и применим к нему преобразование Разделить раздельно (Modify – Break Apart). После применения данного преобразования рамка вокруг текста должна исчезнуть. Выделяем каждую букву по отдельности и выполняем то же преобразование Разделить раздельно.

Вот и всё. Можете посмотреть мультик. Можно применить эффект Отмотка обратно (Reverse Frames) для возвращения фигуры в обычное состояние.


Motion Tweening


И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ. Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.

Включить motion tweening можно несколькими способами (а отключить,


к сожалению, только одним). Для того, чтобы включить motion tweening, нужно
сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу
мыши, в контекстном меню выбрать Create motion tween (это же можно сделать,
выбрав Insert - Create motion tween). Универсальный способ включения/выключения
motion tweening - с помощью панели Frame, выбрав Motion в поле Tween. Там же можно контролировать параметры анимации:

Easing - обратное экспоненциальное ускорение.

Rotate - позволяет управлять вращением.

Auto - Flash автоматически пытается определить количество витков.

CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов.
Можно использовать только целые значения. Можно отключить вращение, выбрав None.

Давайте поэкспериментируем.


Упражнение 5. «Кирпичик». Предположим, необходимо создать ролик с пролетающим по экрану кирпичиком. В первом кадре нового ролика нарисуйте кирпичик. Выделите его, и клавишей F8 преобразуйте в экземпляр Graphic. В пятидесятую позицию клавишей F6 вставьте ключевой кадр. Это будет последний кадр нашего ролика. Необходимо установить конечное состояние объекта. Сдвиньте экземпляр, поверните. Вернитесь в первый кадр. Перейдите на вкладку «Свойства» (Properties) и в раскрывающемся списке Tween выберите «Движение» (Motion). Если всё выполнено правильно, то на значках кадров возникнет стрелка на синем фоне, в противном случае возникнет пунктирная линия.

Проиграйте ролик. Вернитесь в диалог свойств первого кадра.

В раскрывающемся списке «Повернуть» (Rotate) выберите по часовой стрелке или против часовой стрелки и введите в поле «Время» (Times) небольшое число, например 2. Теперь объект сделает при движении указанное число полных оборотов в соответствующую сторону.

Параметр «Свободное ускорение» (Ease), как и в анимации формы, управляет ускорением или замедлением движения.


Упражнение 6. «Кораблик».

Откройте файл «Кораблик» и импортируйте его в библиотеку символов (File-Import-Import Library). Активизируйте окно библиотеки (Windows-Library) и переместите символ Кораблик на сцену. Выделите 100-й кадр и сделайте его ключевым. Переместите кораблик в верхний правый угол сцены и уменьшите его размер. Вернитесь в 1-й кадр и задайте анимацию движения. Создадим остановку корабля в 100-м кадре. Активизируем окно Actions (Windows-Actions). В нем перейдем на Action Script 1.0 & 2.0, в котором выберем Global Functions - Timeline Control. Активизируйте Scene 1 и дважды щелкнем мышью по команде Stop. Остановка создана. Закроем окно.

Протестируем наш ролик.

Ваш первый Flash-баннер


Давайте попробуем сделать простой баннер. Прежде всего необходимо четко представить себе, что мы хотим создать, то есть разработать сценарий. Чем лучше вы будете знать, что и как должно быть в вашем проекте – именно так называется работа во Flash-редакторе, – тем быстрее и проще будет осуществить задуманное. В нашем случае баннер будет очень простым: на фоне вращающегося квадрата выезжает надпись.

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

Определившись со сценарием, приступим к творчеству. Для начала решим, какого размера должен быть баннер. Пусть это будет общепринятый в баннерообменных сетях формат 140х80. Именно эти размеры необходимо указать в панели Movie Properties (параметры фильма), в полях Width (ширина) и Height (высота). В этом же окне выберем цвет фона (Background Color) нашего баннера, а также в поле Frame Rate укажем значение fps – количество кадров в секунду.

После того как указаны все параметры фильма и нажата кнопка ОК, проверьте масштаб отображения сцены. При необходимости установите 100%.

Теперь создадим основу будущего баннера – движущуюся надпись:

Выберите инструмент Text.

Откройте панель настройки данного инструмента: Windows- Properties.

В выпадающем меню Font открытой панели Properties выберите кириллический шрифт, например Arial Cyr.

Установите необходимый размер, например 35, и цвет.

Щелкните на месте начала надписи (в нашем случае — в начале баннера) и введите текст. Если вдруг выяснилось, что выбранный размер или цвет не подходят, переключитесь на инструмент Selection Tool (черная стрелка на панели инструментов) и выделите текст, щелкнув по нему. Вокруг текста появится рамка, теперь на панели Properties можно изменить его параметры: размер, цвет шрифта и т. п.

Преобразуйте текст в символ: Insert Convert to Symbol [F8]. Не забудьте дать ему соответствующее имя и указать тип Graphic. При этом созданный символ будет помещен в библиотеку текущего проекта.

Выделите 20-й кадр на линейке Timeline и вставьте ключевой кадр. Слева от нового кадра появится серая полоска, идущая от первого ключевого кадра.

Вернитесь в первый кадр и переместите надпись на баннере за его границу, например, за левый край.

Не снимая выделения с первого кадра, откройте панель Properties и выберите тип анимации – Motion, то есть анимацию движения. При этом серая полоска между ключевыми кадрами станет голубой со стрелкой вправо.

Поздравляю! Вы заставили текст двигаться.

Время, которое займет проигрывание фильма или клипа от начала воспроизведения, отображается в строке статистики Timeline. Реальная длительность отдельных эпизодов может незначительно отличаться от отображаемого значения, которое вычисляется на основе установленного fps. Оно зависит в основном от сложности расчетов, требующихся для построения изображения отдельного кадра, и быстродействия компьютера.

Использование слоев дает большие возможности при создании фильма. Кроме того, что объекты, помещенные на разные слои, можно накладывать или скрывать, создавая имитацию объема сцены, правильное применение слоев может заметно уменьшить размер готового файла. Любой объект, который предстоит анимировать, нужно помещать на собственный слой. Так вы значительно быстрее добьетесь нужных эффектов и сократите загрузку процессора.

Для каждого слоя старайтесь придумать подходящее название. Для изменения имени слоя щелкните дважды левой кнопкой мыши на названии слоя и введите новое.

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

Вставьте новый ключевой кадр, на этот раз 60-й. Тем самым мы установили время статического отображения текста после его остановки – примерно на три с половиной секунды.

Основа нашего баннера готова. Текст делает то, что мы от него хотели, убедитесь в этом, включив тестовый просмотр: Control Test Movie [Enter].

Теперь необходимо добавить последний элемент фильма – вращающийся квадрат:

Создайте новый символ: Insert New Symbol [Ctrl+F8], присвоив ему необходимое имя и установив тип Movie Clip.

Выберите инструмент Rectangle и установите нужный цвет заливки и тип границ. Цвет можно выбрать на палитре (панель Mixer), вызываемой через меню (Window Panels Mixer).

Нарисуйте квадрат, постаравшись сделать так, чтобы метка центра объекта действительно приходилась на центр квадрата, или переместите уже нарисованный квадрат.

Преобразуйте квадрат в графический символ, клавишей F8.

Вставьте ключевой кадр, например, на 30-м фрейме.

Выделите первый кадр, откройте панель Frame для данного кадра и укажите уже знакомый тип анимации Motion.

В выпадающем меню Rotation выберите вращение по часовой стрелке – CW, а в поле Times укажите, сколько оборотов должен сделать объект (например, один).

Осталось совсем немного — разместить созданный Movie-клип на сцене, то есть на нашем баннере:

Перейдите в режим сцены, щелкнув на вкладке Scene1 над списком слоев.

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

Перейдите в первый кадр созданного слоя, выделив его мышкой.

Откройте библиотеку проекта: Window - Library.

Найдите в библиотеке Movie-клип вращающегося квадрата и перенесите его на сцену, расположив на нужном месте баннера.

Если, создавая квадрат, вы ошиблись с размерами, – ничего страшного, воспользуйтесь модификатором Transform, изменив размеры квадрата до необходимых.

Просмотрите созданный фильм в тестовом режиме.

Вот мы и создали баннер, а точнее — Flash-ролик с элементами интерактивности. Пришла пора сохранить созданный проект. Сохранение ничем не отличается от аналогичного процесса в других программах. Созданный файл имеет расширение .fla, его нельзя использовать для размещения в Интернете, так как это формат редактора, да и объем этого файла может быть достаточно большим. Для размещения фильма на веб-странице необходимо сохранить его в подходящем формате.


Публикация Flash - фильма


Команда File - Publish (Файл-Публиковать) предоставляет бы­стрый способ внедрения фильмов на Web-страницы без необходимо­сти создавать HTML-код вручную. От вас не требуется знание языка HTML, чтобы с помощью функции публикации программы Flash на­строить параметры отображения своих Flash-фильмов на Web-страни­цах. Кроме того, у вас имеется возможность с помощью этой функции генерировать файлы сразу в нескольких форматах, которые могут по­надобиться. Далее перейдем к непосредственному рассмотрению на­строек, управляющих публикацией файлов из программы Flash.

Параметры публикации


Настойка параметров публикации ваших файлов выполняется в диа­логовом окне Publish Settings (Параметры публикации), которое можно открыть с помощью команды File - Publish Settings (Файл - Параметры публикации). Используя флажки и другие элементы управления, вы можете указать, какие медиафайлы требуется создать (и при этом на­строить их характеристики). Учтите, что установки, заданные в диало­говом окне Publish Settings, влияют не только на файлы, генерируемые при выборе команды File - Publish, но и на файлы, создаваемые с помо­щью команд Export Movie (Экспорт фильма), Test Movie (Тестирование фильма) и Test Scene (Тестирование сцены).

Вкладка «Formats»


При выборе в меню File (Файл) команды Publish Settings (Пара­метры публикации) будет отображено диалоговое окно, показанное на рис. 6. На вкладке Formats (Форматы) вам необходимо устано­вить флажки для тех форматов, в которых вы хотите создать файлы с помощью функции публикации. При установке флажка для опреде­ленного формата в диалоговом окне Publish Settings появляется соответствующая вкладка с параметрами, которые можно задать для этого формата.


Рис. 6

Обратите внимание на то, что в полях справа от флажков форма­тов приведены названия создаваемых файлов, которые по умолчанию совпадают с названием текущего . f la-файла. Кроме того, по умолча­нию все создаваемые в результате публикации файлы будут размеще­ны именно в той папке, в которой сохранен текущий . f la-файл.

При желании вы можете изменить задаваемые по умолчанию на­звания для создаваемых при публикации файлов. Для этого просто выделите в соответствующем поле старое название и введите вместо него новое. Убедитесь в том, что заданные вами новые имена для создаваемых файлов не совпадают с именами уже имеющихся файлов, что­бы избежать случайной перезаписи этих файлов. Если вы ошибочно перезапишите какой-либо файл, то потеряете его навсегда.

Вкладка «Flash»


Содержимое вкладки Flash, показанной на рис.7, вполне ве­роятно, покажется вам знакомым. Как отмечалось ранее, установки, заданные на этой вкладке диало­гового окна Publish Settings, используются по умолчанию при созда­нии .swf-файлов посредством команд Export Movie, Test Movie. Test Scene и Publish. С помощью элементов управления, представленных на вкладке Flash, задают свойства генерируемого .swf-файла.


Рис. 7

Вкладка «HTML»


На вкладке HTML, показанной на рис.8, представлены уста­новки, которые управляют интегрированием Flash-фильма в HTML-страницу. Раскрывающийся список Template (Шаблон) предлагает несколько стандартных «шаблонных» схем, которые можно приме­нять для быстрого создания наиболее общих элементов сценария.



Рис. 8

Рассмотрим наиболее важные параметры, доступные на вклад­ке HTML.



Dimensions (Размеры). Эта группа параметров использует­ся для задания размеров прямоугольной области в HTML-странице, в которой будет отображаться Flash-фильм. Если в раскрывающемся списке Dimensions выбрано значение Pixels (Пиксели) или Match Movie (Соответствовать размерам фильма), для размещаемого на HTML-странице Flash-филь­ма будут использованы фиксированные размеры. Если такую страницу открыть в окне обозревателя, которое меньше за­данных фиксированных размеров области для отображения Flash-фильма, то для просмотра всего кадра фильма придется использовать прокрутку.

Playback (Воспроизведение). Флажки этой группы позволяют вам управлять некоторыми параметрами воспроизведения.

Quality (Качество). Значения этого раскрывающегося списка позволяют задать визуальное качество фильма при его вос­произведении.



Window Mode (Режим окна). Зачастую пользователи спра­шивают: «Как сделать фон Flash-фильма прозрачным, чтобы сквозь него был виден фон и другие элементы HTML-страни­цы
Именно для решения данного вопроса и предназначен параметр Window Mode. В этом раскрывающемся списке пред­ставлены следующие значения.

Window (Окно). Задает воспроизведение Flash-фильма «как обычно» (в собственном прямоугольном окне).

Opaque Windowless (Непрозрачный без окна). Использует непрозрачный фон для Flash-фильма, но позволяет другим элементам HTML-страницы (созданным с помощью CSS, DHTML или других технологий) перемещаться под ним или поверх него.

Transparent Windowless (Прозрачный без окна). Делает фон Flash-фильма прозрачным и позволяет отображать сквозь пустые области фильма другие HTML-элементы.



HTML alignment (Выравнивание HTML). Данный раскрываю­щийся список управляет тем, как будет выравниваться выде­ленная для отображения Flash-фильма область относительно других элементов в окне обозревателя. В вашем распоряже­нии пять возможных значений: Default (По умолчанию), Left (Слева), Right (Справа), Тор (Сверху) и Bottom (Снизу).

Scale (Масштаб). Определяет, как Flash-фильм масштабиру­ется в прямоугольной области, заданной для его отображения на HTML-странице с помощью параметров группы Dimensions (Размеры).

Flash alignment (Выравнивание Flash). Эти два раскрывающих­ся списка используются в сочетании с параметром Scale для выравнивания Flash-фильма внутри выделенной для его ото­бражения области, когда размеры его рабочего поля не совпада­ют с размерами этой области

Вкладка «GIF»


После того как вы подготовите свои фильмы к распростране­нию через Web, необходимо подумать о тех пользователях, у кото­рых не установлен встраиваемый модуль или элемент управления ActiveX проигрывателя Flash. Такие пользователи увидят вместо вашего . swf -файла раздражающий их значок неисправной ссылки. В тех случаях, когда пользователи не могут просмотреть Flash-эле­менты, средство публикации программы Flash предлагает вам воз­можность создать статические изображения первого кадра ваше­го фильма в форматах GIF, JPEG или PNG либо представить весь фильм в виде анимированного GIF-файла.

Если вы установите на вкладке Formats (Форматы) диалогово­го окна Publish Settings (Параметры публикации) флажок GIF Image (.gif), то в этом диалоговом окне появится показанная на рис.9 вкладка GIF, с помощью которой задаются свойства создаваемого .gif-файла. Группа параметров Dimensions (Размеры) позволяет за­дать размеры GIF-изображения. В группе Playback (Воспроизведение) вы можете выбрать переключатель Static (Статический) для генери­рования статического GIF-изображения или переключатель Animated (Анимированный) — для создания анимированного GIF-файла. При выборе переключателя Animated вам также предоставляется воз­можность задать бесконечное циклическое воспроизведение аними­рованного GIF-файла, щелкнув на переключателе Loop continuously (Бесконечное повторение). Если вы щелкнете на переключателе Repeat (Повтор), то сможете задать в соседнем поле конкретное чис­ло повторов.





Рис. 9
Ниже перечислены наиболее важные параметры вкладки GIF, ко­торые влияют на создаваемый GIF-файл.

Optimize colors (Оптимизировать цвета). Удаляет из цвето­вой таблицы GIF-файла неиспользуемые цвета — в результа­те уменьшается размер файла. При использовании параметра Optimize colors качество изображения не изменяется.

Dither solids (Размывание сплошных цветов). Имитирует сплошные цвета, отсутствующие в используемой цветовой палитре, с помощью узора из пикселей имеющихся цветов. В результате с помощью ограниченной палитры цветов удается более точно передать цвета исходного изображения.

Interlace (Чередование строк). Позволяет вам создать такое GIF-изображение, разрешение которого будет постепенно уве­личиваться при загрузке файла (этот процесс называют про­грессивной загрузкой). Такие изображения сначала появляют­ся в размытом виде и постепенно по мере загрузки становятся все более четкими. В результате пользователь получает общее представление о загружаемом изображении до окончания его полной загрузки. Данный параметр практически не влияет на размер файла.

Remove gradients (Удалить градиентные заливки). Задает пре­образование всех заливок с градиентным заполнением в одно­родные цвета. При этом уменьшается размер файла, но про­грамма Flash использует в качестве заменяющего цвета первый цвет градиентной заливки, что может привести к неожиданным результатам.

Smooth (Сглаживание). Сглаживает векторные элементы при создании GIF-изображения.

Transparent (Прозрачность). Данный параметр определяет, как фон фильма и полупрозрачные цвета преобразуются в форма­те GIF. Учтите, что формат GIF поддерживает только одноби­товую прозрачность (т.е. любой пиксель изображения может быть либо полностью прозрачным, либо полностью непрозрач­ным). Значение Transparent (Прозрачный) делает фон фильма в создаваемом GIF-изображении полностью прозрачным. При выборе значения Alpha для параметра Transparent у вас по­является возможность ввести в поле Threshold (Порог) число (в диапазоне от 0 до 255), определяющее уровень прозрачно­сти, после которого все цвета в экспортируемом изображении становятся полностью прозрачными. Например, если задать в поле Threshold значение 128, то все цвета с исходным коэф­фициентом прозрачности (Alpha), равным 50% и менее, станут полностью прозрачными в экспортированном GIF-изображе­нии. Если же задать в поле Threshold значение 255, то станут полностью прозрачными все цвета, у которых исходное значе­ние Alpha меньше 100%.

Dither (Размывание). Поскольку формат GIF поддерживает не более 256 цветов, программа Flash при экспортировании долж­на уменьшить количество цветов в исходном изображении. Параметр Dither позволяет более точно передать исходные цве­та изображения, благодаря имитации удаленных цветов с по­мощью узора из пикселей имеющихся цветов. По умолчанию в раскрывающемся списке Dither выбрано значение None (Нет), означающее, что размывание не применяется. Выбор значения Ordered (Упорядоченное) обеспечивает средний уровень раз­мывания при относительно небольшом увеличении размера файла. Значение Diffusion (Диффузия) позволяет обеспечить наилучшее качество имитации исходных цветов, но при этом значительно увеличивается размер файла. У Palette Туре (Тип палитры). Данный раскрывающийся список определяет цветовую палитру, которая используется для соз­даваемого GIF-изображения. Как вы уже знаете, формат GIF позволяет использовать не более 256 цветов. Однако в этот на­бор могут быть сгруппированы произвольные цвета. В раскры­вающемся списке Palette Туре доступны четыре стандартных значения.

Web 216. Задает использование стандартной инвариантной палитры Web. Она включает только 216 цветов, которые всегда отображаются одинаково во всех Web-обозревате­лях на обеих платформах (Windows и Macintosh). Дело в том, что некоторые пользователи еще могут использовать старые видеокарты, обеспечивающие только 8-битовую глубину цвета (они ограничены только 256 цветами). При этом на разных платформах и в разных обозревателях пред­ставление этих цветов может отличаться. Если вы хотите, чтобы ваше GIF-изображение было представлено одними и теми же цветами для всех пользователей, используйте па­литру Web 216, составленную из инвариантных цветов Web. В результате при экспорте GIF-файла любые цвета, исполь­зуемые в исходном изображении, будут преобразованы в ближайшие к ним цвета из данной палитры. Таким образом, если вы использовали в исходном Flash-фильме цвет, кото­рый не входит в инвариантную палитру Web, то в оконча­тельном GIF-изображении он будет немного отличаться. Палитру Web 216 стоит применять, если вы рассчитываете, что среди ваших пользователей окажутся и те, которые ис­пользуют 8-битовую глубину цвета для своих мониторов.

Adaptive (Адаптивная). Если при разработке своей про­дукции вы не рассчитываете на аудиторию, использующую 8-битовую глубину цвета, то можете выбрать для параметра Palette Туре значение Adaptive. В результате для GIF-файла будет создана уникальная цветовая палитра, которая вклю­чает до 256 адаптивных цветов (конкретное количество используемых цветов вы можете задать в поле Max colors (Максимальное количество цветов)). В палитру включены цвета, которые обеспечивают более точное представление изображения, хотя они могут не входить в инвариантную палитру Web.

Web Snap Adaptive (Адаптивная для Web). Если будет вы­брано это значение, программа Flash преобразует любые цвета, близкие к 216 цветам инвариантной палитры Web, в цвет этой палитры, а для остальных будет использовать адаптивные цвета. Общее количество цветов создаваемой для GIF-файла палитры можно задать в поле Max colors.

Custom (Настроить). Позволяет задать для GIF-изображе­ния палитру с помощью файла цветовой таблицы в формате ACT, который можно создать в программе Photoshop.

Вкладка «JPEG»


С помощью показанной на рис. 10 вкладки JPEG вы можете уста­новить размеры генерируемого JPEG-изображения и уровень его сжа­тия. Большие значения параметра Quality (Качество) соответствуют меньшему уровню сжатия, большему размеру файла и лучшему внеш­нему виду изображения. Ввод низких значений параметра Quality при­водит к использованию большей степени сжатия, уменьшению разме­ра файла и ухудшению визуального качества получаемого в результате публикации JPEG-изображения. Если установить флажок Progressive (Прогрессивное), будет создано JPEG-изображения с прогрессивной загрузкой. Такие JPEG-изображения (как и GIF-файлы, для которых установлен флажок Interlace) при загрузке по низкоскоростному со­единению появляются быстрее, поскольку пользователь может уви­деть их общий вид до окончания полной загрузки файла.



Рис. 10

Заключение


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

Вообще существует несколько путей использования Flash на веб-сайте: сайт полностью построен на Flash, на веб-страницах Flash играет доминирующую роль, но также присутсвует html-код и Flash является вспомогательным элементом при посторении сайта. На просторах рунета чаще всего используется третий вариант.

Давайте теперь попробуем очертить круг сайтов, на которых оправдано полноценное применение Flash-технологии. Это, конечно, домашние странички, не перегруженные информационным наполнением, сайты веб-студий (ведь Flash отлично демонстрирует дизайнерские способности), развлекательно-интерактивные веб-сайты.

Основным моментом при выборе между использованием Flash и его неиспользованием является направленность вашего сайта и цель его создания. Flash хорош тогда, когда меньше текста, больше графики. А дальше уж решайте сами...



С развитием интернета в России и переходом большинства его пользователей на скоростные каналы данный вопрос перестанет быть актуальным, но скоро ли это произойдет?






База данных защищена авторским правом ©bezogr.ru 2016
обратиться к администрации

    Главная страница