Использование Flash-технологий для создания Web-сайтов

Первое знакомство с программой Flash

Термин ”Flash” применяется в двух основных толкованиях: Flash как программный продукт компании Macromedia и Flash как особая технология создания гиперактивных документов (такие документы имеют чувствительные интерактивные объекты, которые реагируют на действия пользователя). С английского ”flash” переводится как вспышка, сверкание. Cегодня эта программа стала (по факту ее широкого использования) мультимедийным стандартом. Стандарт Flash на сегодняшний день поддерживается множеством других программ (например, в программе CorelR.A.V.E.). Как заявил глава корпорации Macromedia Роберт Бургес (Robert K. Burgess): “Flash еще не может делать всего, что может TV, но конкурировать мы уже способны”.

Интерфейс

Интерфейс Flash MX имеет вид, ставший классическим для графических программ, работающих под управлением операционной системы Windows. В верхней части главного окна программы находится Строка заголовка и Строка меню с меню: File (File), Edit (Редактировать), View (Вид), Insert (Вставить), Modify (Изменить), Text (Текст), Control (Управление), Window (Окно), Help (Помощь).

В левой части главного окна расположена Панель инструментов (Toolbox). На ней можно выбирать инструменты, а также управлять рабочей областью, модифицировать объекты и выбирать простые цвета.  Для каждого из этих инструментов командой Windows (Окно)4Properties (Свойства) можно вывести окно свойств, характеризующее текущий (активный) инструмент, предоставив пользователю доступ к настройкам всех его свойств.

В правой части главного окна программы находятся дополнительные палитры: Color Mixer (Цветовой микшер), Color Swatches (Цветовые наборы), Components (Компоненты), Answers (Ответы) — рис. 1.

Рис. 1. Дополнительные палитры

Центральная часть главного окна программы состоит из двух областей: Timeline (Временная шкала или Монтажный стол)  и Scene (Сцена или Рабочая область программы) в которой создаются объекты фильма (рис. 2).

Рис. 2. Элементы интерфейса программа: Timeline и Scene

Эти элементы интерфейса мы рассмотрим более подробно позднее.

Палитра Library

Палитра Библиотека (Library) вызывается командой Window (Окно)4Library (Библиотека) или нажатием клавиши F11 и служит для хранения объектов, которые вы создали в процессе работы. Из библиотеки можно мышкой перетаскивать объекты в кадр нужной сцены. Там же их можно переименовывать, дублировать и т.д. Этими объектами вы можете пользоваться и в других своих проектах. Объекты палитры можно добавлять, удалять и складывать в подкаталоги. Подобные библиотеки есть и в других программных продуктах, например, в Adobe PageMaker.

Работа с файлами

Для создания нового файла нужно выполнить команду File (Файл)4New (Новый).  Если теперь выполнить щелчок правой кнопки мышки в любой точке рабочей области  сцены, а затем выбрать из меню строчку Document Properties (Свойства документа), то параметры фильма, заданные по - умолчанию, можно изменить — рис. 3.

Рис. 3. Окно Document Properties

В данном окне можно настроить размеры сцены (Width-ширина, Height-высота), выполнить подгонку (Match), изменить Background Color (Цвет фона), установить Frame Rate (Частоту кадров), выбрать из списка единицы измерения (Ruler Units), получить Справку (Help).

Установка частоты кадров анимации

Важным моментом при создании анимации является выбор частоты кадров (fps). При показе Flash-ролика предназначенного для распространения в Интернет не стоит рассчитывать, что у всех его пользователей имеется Pеntium – IV. Поэтому не следует задавать слишком высокую частоту смены кадров (fps). Для достижения наилучших результатов в сети Интернет как правило, выбирают частоту 12 кадров в секунду (12 fps), что является практически стандартом для QuickTime и AVI роликов, в то время как стандартная частота смены кадров в кино - 24 fps.             

Использование справки

Для получения справки о работе программы выполните команду Help (Помощь)4Using Flash (Использование Flash) или нажмите клавишу F1. Кроме этого, из пункта меню Help вы можете вызвать уроки по Flash MX (Lessons) или учебники (Tutorials).

Приемы работы с графикой во Flash

Инструменты для рисования объектов

Панель инструментов

Все инструменты рисования и их модификации, а также основные цвета расположены в единой панели Toolbox (Панель инструментов) — рис. 4. С подобной организацией можно встретиться и в других графических редакторах, например в Adobe Photoshop.

Рис. 4. Панель инструментов (Повернуто)

Панель инструментов содержит множество знакомых по другим графическим редакторам инструментов (Текст, Ластик, Линия, Карандаш, Пипетка…) и служит для рисования векторных объектов. Инструменты для рисования объектов в программе Flash MX представлены ниже таблицей.

Таблица 1. Инструменты Панели инструментов (Toolbox)

Форма (контур и заливка) объекта

При создании любого объекта, будь то фигура или линия, во Flash следует знать, что вы тем самым создаете форму, которая состоит из заливки (fill) и контура (stroke), которые могут и изменяются независимо друг от друга.

Fill (Заливка) определяет то, чем будет заполнен контур. В палитре с одноименным названием можно выбрать тип заливки и ее цвет (последнее можно сделать и в Toolbox (Палитре инструментов) — рис.5.

Рис. 5. Выбор на Палитре инструментов цвета контура и заливки

Контур (Stroke) окружает созданную фигуру. Для его редактирования, а так же задания параметров используется специальная палитра Stroke (Контур). Здесь можно задать тип линии, который будет определять ее внешний вид, толщину линии, ее цвет (хотя для этого можно воспользоваться Stroke Color (Цветом контура), расположенным в палитре Toolbox (Инструментов). Очень удобным является то, что линию, которую вы выбрали, можно просмотреть здесь же в этой палитре, еще до применения.

ПРИМЕЧАНИЕ

Мы полагаем, что вы знакомы с основами векторной графики, поэтому, не вдаваясь в подробности, напомним, что при векторном рисовании (инструменты Pen, Subselect Tool и др.) необходимо знать, что векторные объекты состоят из контура (Stroke) и заливки (Fill). Контур представляет собой кривую (Curve) Безье (рис. 6).

Рис. 6. Элементы кривой Безье

Точки, образующие кривую Безье с двух сторон, называются Якорными точками (Ankor points). Если в контуре больше двух якорных точек, то, следовательно, он состоит из множества кривых Безье. Поведение кривой между двумя якорными точками определяется Тангенсами (на жаргоне дизайнеров - “усами”) или Направляющими линиями (Control Handle). Они является касательными к кривой Безье, проходящими через якорную точку и маркер.Маркер — конечная точка направляющей линии. Служит маркер для изменения длины и положения направляющих.

Использование растровых заливок

Для заливки объектов в программе Flash MX можно применить любое растровое изображение. Рассмотрим данную операцию на примере.

1.       Командой File (Файл)4Open as Library (Открыть как библиотеку) занесите любое растровое изображение в Библиотеку Flash MX (рис.7).

Рис. 7. Фотография с именем файла Flowers.jpg внесена в библиотеку Flash MX

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

3.       Проделайте команду Modify (Изменить)4Break Apart (Разделить на составляющие). После выполнения этой команды изображение можно использовать в качестве заливки.

4.       Щелкните инструментом Eyedropper (Пипетка) на рабочей области — курсор примет вид ведра с краской.

5.       Далее щелкните на рабочей области правой кнопкой мыши и выберите из контекстного меню команду Cut (Вырезать) — изображение цветка исчезнет с экрана вашего ПК.

6.       Нарисуйте на рабочей области инструментом Oval (Овал) окружность. Вы увидите, что объект будет залит изображением из библиотеки, т.е. растровым изображением цветка — рис.8.

Рис. 8. Овал заполнен битовым изображением цветов

СОВЕТ

При изучении работы с инструментами (заливка, линия, карандаш, кисть и др.) обращайте внимание на особенности программ. Так, во Flash в отличие от многих других графических редакторов (например, от MS Paint) вы можете заливать не полностью замкнутые (имеющие разрывы) области. Попробуйте!

Трассировка изображений

НОВЫЙ ТЕРМИН

Трассировкой изображений называется их перевод из растрового формата в векторный.

1.       Для знакомства с трассировкой изображений отбуксируйте фото изображения из предыдущего примера с именем файла Flowers.jpg (внесенное в библиотеку) из библиотеки Flash MX на рабочую область программы.

2.       Теперь выполните команду Modify (Изменить)4Trace Bitmap (Трассировать изображение) — рис. 9.

Рис. 9. Окно Trace Bitmap

В этом окне Color Threshold (Цветовой порог) указывает величину между близкими цветами в изображении. При различии цвета областей меньше указанного цветового порога обе области будут залиты одним цветом. Опция Minimum Area (Минимальная область) задает минимальную область, которая учитывается при назначении цвета данному пикселю. Список Curve Fit (Кривая) задает степень подлежащих округлению форм (незначительная, нормальная и т.п.). Список Corner Threshold (Угловой порог) задает количество углов у форм преобразованного изображения.

3.       Оставьте параметры окна Trace Bitmap (Трассировать изображение) выставленными по умолчанию и нажмите ОК.

4.       После выполнения трассировки растра снимите выделение картинки, дважды щелкнув на нем левой кнопкой мыши. Исходное и трассированное изображения показаны на рис. 10.

Рис. 10. Исходное (слева) и трассированное (справа) изображения

После трассировки каждый элемент цветка является объектом векторной графики. Вы можете выделить его инструментом Arrow Tool (Указатель) и применить обычные для векторных объектов операции программы — заливка, перетаскивание, изменение размера и так далее.

Размножение неподвижных изображений

При создании фона для анимации, иногда необходимо размножить фоновое изображение на несколько кадров. Это делается так:

q  Создайте изображение в первом ключевом кадре будущего фильма;

q  На Timeline выделите последний кадр, в котором должно быть присутствие размножаемого неподвижного изображения;

q   Выполните команду Insert (Вставка)4Frame (Кадр). При просмотре ролика изображение на протяжении выбранного диапазона кадров будет повторяться.

Палитра Timeline

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

Рис. 11. Timeline

Таблица 2. Назначение инструментов палитры Timeline

Onion Scin Outlines

Принципы Flash-анимации

Имеются несколько условных способов создания анимации во Flash:

q  Автоматическая (Tweened), когда вручную задаются только длительность анимации (заданием числа кадров), а также начальные и конечные формы и взаиморасположение объектов (в ключевых кадрах). Ключевой кадр (Keyframe) - это кадр где вы определяете изменения в форме или взаиморасположении объектов участвующих в процессе анимации. Все промежуточные значения генерируются (интерполируются) самой программой. Flash может создавать два типа tweened анимации:

·         Движение (Motion-tweening) - таким способом лучше всего изменяются координаты объектов на рабочем поле (задать позицию и размер объектов в ключевом кадре начала анимации, а в конечном задать изменения позиции, размера, цвета и прозрачности объектов или заставить их вращаться).

·         Превращение (Shape-tweening) - этот способ применяют обычно для изменения формы объектов (в ключевом кадре начала анимации задается начальная форма объекта, а в ключевом кадре конца анимации - конечная форма).

q  Покадровая (Frame-by-frame), когда все изменения в каждом кадре задаются вручную. При этом размер файла намного больше, чем при tweened анимации. При создании покадровой (Frame-by-frame) анимации каждый кадр является ключевым.

q  Анимация персонажей (ActionScript) – этот способ анимации заключается в создании интерактивных объектов посредством событийно-управляемого языка, встроенный во Flash. Персонаж (Символ) после его программирования выполняет действия (Actions), т.е. инструкции, которые говорят ему, что делать.

Анимация методом создания ключевых кадров

Чтобы создать ключевой кадр щелкните правой кнопкой мыши на кадре в окне Timeline и выполните команду Insert Keyframe (или нажмите клавишу F6). Ключевые кадры, которые содержат какие-либо объекты, отображаются в Timeline черными точками. Пустые ключевые кадры отображаются как незакрашенное (пустое) белое поле на Timeline.

Автоматическая анимация

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

Использование слоев (Layers)

Каждая сцена (Scene) во Flash ролике может состоять из любого числа слоев. Программа Flash не умеет в одном слое задавать различные анимационные эффекты для несколько объектов - слои нужны для того, чтобы разделить различные, но одновременные анимационные задания для каждого из перемещающихся или изменяющихся объектов. Другими словами: если вы хотите произвести различные анимационные действия с несколькими объектами одновременно, то каждый из них должен быть в отдельном слое. Как правило, фоновый (обычно самый нижний) слой содержит один или несколько статических объектов, а дополнительные слои содержат по одному анимированному объекту каждый. 

Персонажи (Символы)

Одним из объектов сцены во Flash MX могут быть символы — объекты из библиотек. Символы бывают: Movie Clip, Button, Graphics.

Graphics - это просто какой-то статический объект, который никак не изменяется при действиях пользователя (например, статическое изображение). 

Button – интерактивная кнопка на 4 кадра (Up , Over , Down, Hit).

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

Превратить в персонаж можно что угодно - достаточно выделить объект и выполнить команду Insert (Вставить)4Convert to Symbol (Преобразовать в символ). Либо выполнить команду Insert (Вставить)4New Symbol (Новый символ) и затем нарисовать персонаж.

Процесс создания анимационного Flash-ролика можно упростить, конструируя его из персонажей, как из кубиков. Например, если у вас в 20 кадрах ножницы режут бумагу, нет смысла рисовать эти ножницы в каждом кадре, в 10 кадрах - открытые, и в 10 кадрах - закрытые. Проще нарисовать персонаж (ножницы) из двух кадров и поместить его самого в один из ключевых кадров основного сюжета. Причем этот ключевой кадр следует растянуть на все 20 кадров вашего ролика. Таким образом, Ножницы сами будут резать бумагу все 20 кадров, не занимая лишнего места и не увеличивая излишними деталями размера итогового файла. Этот персонаж можно затем поместить в библиотеку и использовать потом в другом ролике. 

Персонажи обладают рядом возможностей, например можно управлять их цветом с помощью встроенных типовых функций (Color Effect). Задавая для персонажей свойство Alfa можно делать их полупрозрачными или невидимыми (пример мы покажем ниже). Задавая затенение можно несколько менять оттенок всего персонажа, например, если он должен плавно покраснеть от стеснения или позеленеть от злости, а потом вернуться в первоначальное состояние.

СОВЕТ

Для персонажей иногда полезно знать их точное положение в кадре, то есть координаты и размер. Вызвать такую информацию можно, выделив нужный персонаж инструментом Arrow (Указатель) и нажав комбинацию клавиш Ctrl+Alt+I или командой Window (Окно)4 Info (Инфо) — рис. 12.

Рис. 12. Информация о выделенном персонаже

Пример 1 — Анимация текста методом создания ключевых кадров (Frame-by-frame)

Файлы анимации во Flash принято называть фильмами (Movie). Ключевые кадры создаются командой Insert (Вставить)4Keyframe (Ключевой кадр) или, что равноценно, клавишей F6. На временной шкале выполненное действие отобразится в виде черных жирных точек, расположенных внизу каждого кадра.

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

1.       Воспользуйтесь инструментом Text Tool (Текст) и напишите текст, который вы собираетесь анимировать. В нашем примере будет использоваться слово "FLASH". Параметры текста задайте на панели (инспекторе) свойств этого инструмента.

2.       Нажмите F6 и создайте ключевой кадр, повторяющий кадр 1. В первом кадре будет слово “FLASH”.

3.       Удалите букву “H” и нажмите F6 — вы создадите ключевой кадр № 2, отличный от кадра №1. Во втором кадре будет слово “FLAS”.

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

5.       Чтобы просмотреть предварительный результат работы, т.е. готовую анимацию текста, достаточно нажать клавишу Enter.

ВНИМАНИЕ

Технология Flash использует принцип, который называется “loop”. В переводе с английского слово “loop” означает “петля”. Например, для замыкания кадров нашего примера в непрерывное кольцо (чтобы они просматривались по порядку, а затем с последнего переходили на первый и так все повторялось по кругу), необходимо выполнить команду Control (Управление)4Loop Playback (Петля). Остановить показ после этого можно нажатием клавиши Esc.

Конечно, приведенный здесь пример не является шедевром WEB-дизайна, но мы и не ставили такой цели. Наша задача — ввести вас в практику создания анимаций, закрепив теорию практическими работами.

ПРИМЕЧАНИЕ

Следует отметить одну особенность Flash-анимации. Здесь нельзя устанавливать длину каждого кадра в отдельности, поэтому эффект задержки достигается вставкой промежуточных кадров, которые не будут являться ключевыми. Однако можно уменьшить общую скорость пролистывания кадров, для чего необходимо щелкнуть мышью по полю Frame Rate (Частота кадров), расположенному внизу временной линейки. После этого перед вами появится диалоговое окно, где необходимо изменить всего один параметр — Frame Rate, который по умолчанию равен 12 кадрам в секунду. Поставьте, например, 2 fps — это заметно замедлит ролик.

Задание 1 Баннер

Средствами программы Flash MX выполните динамический баннер. Пример успешного решения подобной задачи — на рис. 13.

Рис. 13. Пример динамического баннера, выполненного в программе Flash MX

Пример 2 Анимация текста (Shape-tweening)

В этом примере мы рассмотрим создание автоматической анимации с изменением формы объекта. Напомним, что в автоматической (Tweened) анимации, вы определяете ключевые кадры в важных пунктах анимации и позволяете программе Flash самой заполнить содержание кадров между ними.

1.       Выберите инструмент Text Tool (Текст) и напишите на рабочем поле программы любой текст (рис. 14). В нашем примере это слово “Новгород”.

Рис. 14 Текст введен

2.       Параметры текста выставите на панели Properties (Свойства), вызываемой командой Window (Окно)4Properties (Свойства) — рис. 15. Мы выбрали гарнитуру Arial Cyr, кегль 96, цвет шрифта – синий.

Рис. 15. Панель свойств инструмента Текст

3.       Для выравнивания текста выполните команду Window (Окно)4Align (Выровнять)4To Stage (По сцене) — рис.16. Кнопками окна (Align — Выровнять, Distribute — Распределить, Match Size — Учесть размер, Space — Масштаб) настройте параметры текста так, чтобы он был бы отцентрован и занимал бы все пространство кадра.

Рис. 16. Название рисунка

СОВЕТ

Для выравнивания объектов вы можете использовать сетку и направляющие. Командой View (Вид)4Rules (Линейки) вы можете вызвать появление на экране измерительных линеек, из которых мышкой ”вытягивают” линейные направляющие так же, как это делается в любой из программ DTP (Publisher, QuarkXPress, Page Maker, InDesign). Для отображения сетки (системы направляющих) необходимо выполнить команду View (Вид)4Grid (Сетка)4Show Grid (Показать сетку).

4.       Выполните команды Modify (Изменить)4Group (Группировать). Отдельные буквы текста будут сгруппированы и текст будет переведен в графический объект, что является необходимым условием для его анимирования в дальнейшем.

5.       На временной шкале (Timeline) щелкните на кадре 50. Щелчком правой кнопки мыши на этом кадре вызовете контекстное меню и выберите в нем команду Convert to Keyframe (Преобразовать в ключевой) — кадр 50 станет ключевым, а кадры от 0 до 50 будут заполнены созданным нами текстом автоматически.

6.       Выполните команду Modify (Изменить)4Transform (Трансформация)4Free Transform (Свободная трансформация) и буксировкой мыши уменьшите текст на экране примерно в 2 раза.

7.       Перейдите на временной линейке на первый кадр, выделите ваш текст (изображение текста) и выполните команду Insert (Вставить)4Create Motion Twin (Создать анимацию движения) — анимация будет создана — рис. 17.

Рис. 17. Вид временной линейки в момент завершения анимации текста

Командой Control (Управление)4Play (Проиграть) просмотрите вашу работу. На протяжении 50 кадров на экране ПК размер текста будет плавно уменьшаться в размерах.

Пример 3 — Автоматическая (tweened) анимация текста во Flash MX

Этот пример будет разновидностью предыдущего, но с некоторыми новыми полезными практическими изменениями.

1.       Запускаем Flash MX — по умолчанию программа создает пустой файл с названием "Untitled-1".

2.       Создадим новый слой Layer 2, на котором будет находиться наш текст, который мы будем анимировать.

3.       Активируем инструмент Text (Текст) и создадим на сцене текст. Пусть это будет ваше имя, написанное шрифтом Arial Cyr, жирным, кеглем 96. После написания текста на Timeline появится первый ключевой кадр, его содержащий.

4.       Заставим текст двигаться. Для этого выберем инструмент Arrow (Указатель) и выделим им наш текст, а затем выполняем команду Insert (Вставка)4 Create Motion Tween (Создать анимацию движения). Командой мы сообщаем программе, что наш текст должен двигаться от исходной позиции к конечной через те трансформации, которые вы проделаете с текстом на этом пути.

5.       Нажмите F6 (Keyframe) — вы создадите второй ключевой кадр (копию текста, которая будет являться конечным кадром ролика). Другими словами, теперь мы имеем начальное и конечное значение текста которые находятся на одной позиции (но в разных кадрах) и накрывают друг друга — рис.18.

Рис. 18. Ключевые кадры (начальный и конечный) созданы

6.       Дважды щелкните мышью на надписи Layer 2 и переименуйте название этого слоя в Text.

7.       Щелкните мышкой по первому кадру текста на Timeline, а затем отбуксируйте его мышкой, переместив на временной шкале его положение до кадра 15 — рис. 19.

Рис. 19. Первый кадр текста отбуксирован в положение 15

8.       Изменим вид текста на экране, для чего наведем на него инструмент Arrow (Указатель) и нажмем на правую кнопку мышки — в появившемся меню выберем пункт Scale (Трансформация), а затем растянем текст на весь экран.

9.       Анимация готова: нажимаем клавишу "Enter" и видим, как текст от кадра 1 до кадра 15 растет, увеличиваясь от кегля в 96 pt до размеров экрана.

10.    Сделать анимацию более красивой можно с помощью эффектов, например, добавим вместе с эффектом роста текста иллюзию его исчезновения (растворения) за счет изменения прозрачности, т.е. когда исходный цвет текста будет до 15 кадра светлеть, пока не станет совершенно белым, как фон. Для создания такого эффекта необходимо добавить прозрачность, или альфа-канал (Alfa). Для этого на Палитре Properties (Свойства) в списке Color (Цвет) вместо значения "None" зададим "Alpha", а также заменим значение прозрачности (альфа) 100% на 0%. 

11.    Нажмите "Enter" и наблюдайте анимацию. Ваш исходный текст будет трансформироваться и одновременно бледнеть до полного своего исчезновения.

12.    Для записи вашей работы на диск выполните команду File (Файл)4Save as (Сохранить как) и сохраните вашу работу в виде файла Text.fla (т.е. как исходник).

13.    Из исходника можно получить настоящий Flash – файл, т.е. SWF. Для этого нужно открыть файл *FLA и выполните команду File (Файл)4Publish setting (Установки публикации), а затем в появившемся меню нажмите кнопку Publish (Публикация). Программа автоматически сохранит файл в формате SWF в ту же папку, куда мы поместили исходник FLA. При публикации, одновременно с SWF будет создан HTML-код (sniffer code) данной анимации.

Пример 4 — Линейная анимация с изменением цвета объекта (Motion-tweening)

1.       Командой File (Файл)4 New (Новый) создайте новый фильм.

2.       Нарисуйте в нижней левой части кадра произвольный объект, например, Oval (Овал). Цвет заливки пусть будет красный.

3.       Инструментом Arrow Tool (Указатель) выделите объект и выполните команду Insert (Вставить)4Create Motion Tween (Создать анимацию движения).

4.       В Слое1 (Layer 1) на Временной шкале (Timeline) выделите мышью кадр номер 40 и выполните команду Insert (Вставить)4Keyframe (Ключевой кадр) – рис. 20. При создании Ключевого кадра № 40 остальные (промежуточные) кадры от 1 до 39 будут получены автоматически.

Рис. 20. Вид автоматической анимации на Timeline

5.       Перетащите инструментом Arrow (Указатель) наш объект (овал)  в любое новое положение на экране (например, в правый верхний угол кадра) - так вы зададите смену положений объекта от исходного (кадр 1) до конечного (кадр 40). Все — линейная автоматическая анимация готова! Вы ее можете просмотреть, выполнив команду Control (Управление)4Play (Проиграть).

СОВЕТ

Для работы с анимацией удобно использовать специальную Панель, которая вызывается командой Window (Окно)4Toolbars (Панели)4Controller (Контроллер). Здесь также можно проиграть анимацию.

6.       При активном инструменте Arrow (Указатель), на палитре Properties (Свойства) задайте цвет объекта  в последнем кадре ролика, например, в списке Color (Цвет) установите ползунок  Brightness (Яркость) в  положение 100% — объект станет черным – рис. 21. Проиграйте фильм. Как вы увидите, цвет объекта при его движении из левого нижнего угла в правый верхний будет меняться.

Рис. 21. Изменение яркости объекта

7.       Щелчком мыши вернитесь в первый кадр и на Панели Properties (Свойства) при активном инструменте Arrow Tool (Указатель) установите в списке Color (Цвет) вариант Tint, а затем измените цвет объекта, например, на зеленый (рис. 22).

Рис. 22. Изменение цвета объекта

8.       Попробуйте также изменить цвет объекта в кадрах 10, 20, 30. Для этого вам командой Insert (Вставить)4Keyframe (Ключевой кадр) потребуется сделать их ключевыми. Попробуйте также проделать инверсию анимации. Для этого мышкой нужно выделить на Timeline все кадры и затем выполните команду Modify (Изменить)4Frames (Кадры)4Reverse (Обратить). Теперь при запуске воспроизведения анимации все будет наоборот: движение начнется из правого верхнего угла в левый нижний и порядок изменения цвета объекта станет противоположным тому, что был в первом варианте данной анимации.

9.       Осталось записать анимацию на диск. При этом экспорт flash-фильмов в другие программы выполняют командой File (Файл)4 Export movie (Экспортировать ролик). Расширение ролика по умолчанию — SWF (ShockWave Format).

ПРИМЕЧАНИЕ

К недостаткам SWF файлов следует отнести тот факт, что напрямую все браузеры их не просматривают — необходим Flash Player. Существует также и проблема нерациональности использования текстов в .SWF-файлах, которые в этом случае (как и при включении в ролики растровой графики) сильно увеличивают свой объем.

10.    В списке типов сохраняемых на диск файлов вы можете выбрать также форматы: анимированный GIF, Windows AVI или Quick Time (MOV). Формат AVI для веб-страниц из-за большого размера файла неприемлем. Помимо этих анимационных вариантов вы можете также получить и набор статичных растровых или векторных картинок, сохранив ролик, например, в формате Последовательность JPEG или Последовательность WMF. Обратите также внимание на формат FLA (Flash Animation). Такие файлы разработчики называют исходниками. Исходники (*.fla) — файлы, представляющие собой нескомпелированые заготовки. Вы может их скачивать, открывать во Flash, смотреть как выполнены те или иные интерактивные формы, видоизменять и использовать для создания собственных работ.

11.    Сохраните пример дважды с вариантами типов файла: swf (Flash-анимация) и gif (gif-анимация). Обратите внимание на тот факт, что размер файла с расширением swf будет существенно меньше, чем размер файла с расширением gif. Это связано с тем, что растровые изображения, к которым относятся наиболее распространенные файлы GIF и JPEG, по природе своей статичны и тяжеловесны. Flash использует векторную графику, оставляя возможность использовать в анимации и растровые изображения.

Пример 5 — Делаем “умную” кнопку (Button-персонаж)

Как мы уже писали выше, кроме кадров и слоев во Flash – анимации используются персонажи (Symbols) трех видов: графика (Graphic), кнопки (Button) и клипы (Movie Clip). Давайте попробуем создать “умную” кнопку, которая будет интерактивной, т.е. реагировать на ваши действия, а также сохраним ее в виде файла с расширением *exe.

1.       Нарисуйте кнопку. Можете не рисовать во Flash, а, как мы — использовать готовую кнопку, например, из коллекции векторных изображений Corel Gallery — рис.23.

Рис. 23. Исходная кнопка изображена в ненажатом состоянии

2.       Выделите кнопку инструментом Arrow (Указатель) и нажмите клавишу F8 (Convert to Symbol). Можно поступить иначе, а именно, войти в меню Insert (Вставка) и выбрать команду Convert to Symbol (Преобразовать в символ). В появившемся диалоге (рис. 24) вы должны задать название вашей кнопки (Name) и установить в поле Behavior флажок – Button (Кнопка). После нажатия на ОК вы заметите, что теперь все нарисованные элементы сгруппированы.

Рис.24. Окно Convert to Symbol

3.       Щелкните на нарисованной кнопке правой кнопкой мышки и выберите пункт Edit (Редактирование). Обратите внимание на панель Timeline — рис. 25. Здесь появятся три варианта поведения нашего символа: Up - кнопка в ненажатом состоянии, Over - кнопка при наведении на нее мыши, Down - нажатая кнопка и Hit. Эти три варианта поведения и сделают кнопку “умной”.

Рис. 25. Варианты поведения кнопки на Timeline (Временная шкала с интерактивными вариантами поведения кнопки)

4.       Для создания анимации нужно добавить ключевые кадры (keyframes). Для этого последовательно выделите пункты Up (Кнопка не нажата), Over (Вид кнопки при наведении на нее мыши) и Down (Кнопка нажата), щелкните правой мышкой и в каждом из этих пунктов меняйте вид кнопки и нажимайте на клавишу F6 (рис.26) для фиксирования этих изменений в виде ключевых кадров фильма. Подчеркнем, что кнопка сама не покраснеет и не посинеет — вы сами должны нарисовать ее внешний вид в ситуациях UP, DOWN, OVER.

Рис. 26. Вид интерактивной кнопки в трех ситуациях

5.       Нажав комбинацию клавиш <CTRL+F12> или, выполнив команду File (Файл)4Publish Preview (Предварительный просмотр публикации), можно будет посмотреть результат вашей работы. При этом происходит сохранение файла  вашей работы в формате HTML (по-умолчанию) и запуск браузера для просмотра этого файла. По-умолчанию, маршрут для сохранения файла C:\Program Files\Macromedia\Flash MX\Untitled-1.html

6.       Выполните команду File (Файл)4Publish Settings (Форматы публикации) и установите в окне Publish Settings (Форматы публикаций) форматы SWF, HTML и EXE (рис. 27). Нажмите ОК. Созданный таким образом EXE-файл будет самодостаточен — ролик с интерактивной кнопкой будет показан на любом компьютере, даже если Flash или Flash Player на этом компьютере не установлен.

Рис. 27. Окно выбора формата сохраняемой анимации

Знакомство с ActiveScript (Скрипты)

ActionScript — событийно-управляемый язык, встроенный во Flash. Действия (Actions) - это инструкции, которые говорят Flash-фильму, что делать. От них произошло название языка - ActionScript (дословно - сценарий действий). ActionScript делает ваши страницы интерактивными. Flash подключает интерактивность через акции набора скриптов (инструкций), которые говорят, что делать ролику в определенном случае. Например, если вы привязали акцию (Action) к кнопке, то после того, как пользователь щелкнет на кнопку или проведет мышью, инструкция исполнится.

Панель действий (Actions Panel)

Скрипты легко создавать и редактировать при помощи Панели действий (Actions), вызываемой командой Window (Окно)4Actions (Действия) — рис.28. Посредством этой панели происходит практически все общение с языком ActionScript. В панели действий отображаются действия объекта либо кадра, выбранного в данный момент, т.е. она служит для отображения и ввода ActionScript-программ.

Рис. 28. Панель действий

На рисунке изображены:

1 — кнопка Add a new item to the script (Добавить действие, инструкцию, команду);

2 — кнопка Delate the selected action (Удалить действие);

3 — область списка действий (команд);

4 — элементы языка.

Для того, чтобы ближе познакомиться с ActionScript и Object Actions panel рассмотрим несложный практический пример.

Пример 6 — Закрепление за кнопкой URL

Кнопку или текст можно сделать во Flash гиперссылкой, вызывающей при ее нажатии определенный адрес из Интернет. Перехватываются эти события с помощью директивы языка ActionScript “on ()”. Синтаксис ее таков:

on (событие) 

{  

... // Наши действия 

} 

Рассмотрим в этом примере как можно запрограммировать за кнопкой некоторые действия, а именно — вызов URL.

1.       Откройте программу и нарисуйте в ней кнопку — рис.29.

Рис. 29. Кнопка вызова URL создана

2.       Инструментом Arrow Tool (Стрелка) выделите эту кнопку и нажмите F8. Появится знакомое окно Symbol Properties (Свойства символа) в котором нужно выбрать вариант Button (Кнопка) и назвать кнопку как ”Кнопка GET URL", а затем нажать кнопку ОК — рис.30.

Рис. 30. Создание персонажа (Кнопки "Get URL")

3.       Нажмите теперь клавишу F9 — появится окно панели Actions (Действия).

4.       Нажмите в этом окне на плюсик “+”, выберите из раскрывающегося списка строчку Actions (Действия), затем — пункт Browset/Network, и, наконец, команду Get URL. После выполнения этой цепочки команд появится окно панели Actions (Действия), в том виде как это показано на рис.31.

Рис. 31. Окно Object Actions с заполненным списком действий

5.       В этом окне в строке URL напишите нужный сайт, например, http://www.novsu.ac.ru. Обратите внимание, что этот URL появится в списке действий. Теперь можно окно закрыть.

6.       Командой File (Файл)4Save as (Сохранить как) вы можете сохранить вашу работу как исходник (например, как файл index.fla), а командой File (Файл)4Publish (Публиковать) вы можете записать работу в виде index.html (чтобы просматривать в браузере) — кнопка станет интерактивной: нажатие на нее теперь запрограммировано на вызов конкретного URL.

ПРИМЕЧАНИЕ

Написать программную анимацию довольно сложно — для этого следует изучить ActionScript в полной мере или иметь опыт программирования (предпочтительно на JavaScript). Мы не претендует дать читателю такой объем информации и для основательного изучения данного вопроса мы отсылаем вас к другим источникам информации.

Пример 7 Создание анимации вдоль пути + ActionScript

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

Шаг 1 — Создание анимации вдоль пути

1.       Создайте в кадре фильма любой графический объект, например, круг, выделите его инструментом Arrow Tool (Указатель) и командой Modify (Модификация)4Group (Группировать) выполните группировку его заливки и обводки.

2.       На временной шкале (Timeline) кнопкой  Add Motion Guide (Добавить направляющую движения) введите слой для траектории движения вашего объекта. В этом слое инструментом Pencil (Карандаш) или Line (Линия) нарисуйте любую траекторию движения объекта.

ВНИМАНИЕ

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

3.       Инструментом Arrow (Указатель) выделите объект и переместите его в начало пути.

СОВЕТ

Перемещать объекты во Flash можно не только мышкой, но и стрелками клавиатуры. Причем, за одно нажатие клавиши выделенный объект переместится на один пиксель, а если при нажатии на клавишу удерживать Shift, то сразу на восемь.

4.       Выполните команду Insert (Вставка)4 Create Motion Twin (Создать анимацию движения)..

5.       Щелчком мышки перейдите на слой Guide Layer (Направляющая движения).

6.       Установите курсор в этом слое на кадре 30 и, не щелкая мышкой, отбуксируйте его ниже, на Layer 1 (Слой 1) — (рис. 32).

Рис. 32. Тридцатый кадр размещен на два слоя

7.       Выполните команду Insert (Вставить)4Keyframe (Ключевой кадр). Ключевой кадр 30 будет вами создан, а промежуточные - получены автоматически — рис. 33).

Рис. 33. Промежуточные кадры добавлены

8.       Щелчком мыши по белому полю сцены рядом с объектом снимите выделение с объекта и переместите его в конец траектории.

9.       Командой Control (Управление)4Play (Проиграть) просмотрите анимацию. Объект будет двигаться по траектории.

            Шаг 2 - Создание скриптов

10.    С помощью скрипта сделаем так, чтобы при прохождении кадра 15 объект остановился. Для этого командой Insert (Вставить)4Keyframe (Ключевой кадр) превратим кадр 15 в ключевой (рис.34).

Рис. 34. Кадр 15 слоя Guide Layer сделан ключевым

ВНИМАНИЕ

Обратите внимание, что ключевой кадр создан не на слое объекта, а на слое движения. Это важно!

11.    Нажатием правой кнопки мыши на кадре 15 вызовите из контекстного меню строчку Actions (Действия). Слева в этом окне список доступных команд, а в правом - назначенные выбранному кадру команды — рис.35.

Рис. 35. Панель Actions

12.    Найдите среди Actions список команд Movie Control (Контроль фильма) и двойным щелчком на команде Stop (Стоп) примените ее для кадра 15 (или перетащите команду Stop в окно скрипта мышкой).

13.    Теперь при просмотре анимации командой Control (Управление)4Test Movie (Проверить ролик) проверьте работу скрипта: в кадре 15 объект будет останавливаться. При нажатии клавиши Enter движение объекта будет продолжено.

14.    Попробуйте по аналогии самостоятельно разобраться со скриптом Go to и установите переход с кадра 15 на кадр 25.

Шаг 3 — Создание интерактивной кнопки. Палитра Library

15.    Оформим операцию остановки объекта на траектории в виде кнопки. Для этого кнопкой Insert Layer (Вставить слой) введите на временной шкале Layer 3 (Слой 3).

16.    Выполните команду  Window (Окно)4Common Libraries (Основные библиотеки)4Buttons (Кнопки) — рис.36.

Рис. 36. Библиотека кнопок

17.    Выберите любую из кнопок и перетащите ее в кадр. Мы выбрали имя кнопки Push button – orange. Закройте окно библиотеки.

18.    Инструментом Text (Текст) создайте рядом с кнопкой надпись Кнопка “Stop”.

19.    Выделите в слое движения 15-й кадр, вызовите панель Actions и нажатием на ней клавиши со знаком минус Delete the selected actions (Удалить выбранные действия) удалите скрипт Stop.

20.    Щелчком мыши выделите кнопку в кадре. На панели Actions снова выберите команду Stop, перенесите ее вправо, в поле скрипта и, сняв флажок события Release (Выпуск), установите вместо него флажок Press (Нажать) — рис.37.

Рис. 37. Скрипт Stop настроен на опцию Press

21.    Работа кнопки настроена. Теперь объект будет останавливаться в любой части траектории по нажатию кнопки Stop. Командой Control (Управление)4Test Movie (Проверить Ролик) убедитесь в этом сами.

22.    Экспортируйте ролик на диск в формате swf.

Задание 2 — Организация движения tween-объекта по траектории

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

Рис. 38,а Первый кадр анимации

Рис. 38,б  Кривая полета бабочки (траектория движения объекта)

Рис. 38,в. Заключительный кадр анимации

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

ПРИМЕЧАНИЕ

Если вы будете не рисовать объекты во Flash, а использовать готовых фотоизображения, отделенных от фона и импортированных во Flash через буфер обмена, то имейте в виду, что использование растровых изображений во Flash нормально для учебного фильма, но совершенно неприемлемо для Интернет. Поэтому, если вы хорошо рисуете, имеете графический планшет и хотите разместить свой ролик в Интернет, то обязательно используйте для подобных анимаций только векторную графику — результат (объем файлов) будет совсем иным.

Пример 8 — Расчетная анимация нескольких объектов одновременно

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

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

2.       Произведите группировку объекта и командой Edit (Редактировать)4Copy (Копировать) скопируйте ваш объект в буфер обмена.

3.       Кнопкой Insert Layer (Вставить слой) добавьте новый слой и командой Edit (Правка)4Paste (Вставить) вставьте на него объект из буфера обмена.

4.       Переместите объекты в желаемое стартовое положение сцены инструментом Arrow.

5.       Выделите оба объекта рамкой выделения и задайте начальное положение объектов в фильме командой Insert (Вставить)4Create Motion Tween (Создать двойное движение).

6.       Встаньте на Timeline на кадр 40 мышкой и отбуксируйте его на оба слоя. Такое размещение кадра 40 на оба слоя нам уже знакомо.

7.       Командой Insert (Вставить)4Keyframe (Ключевой кадр) сделайте сороковой (последний) кадр фильма ключевым. Промежуточные кадры будут получены автоматически. Это мы также проходили.

8.       Сделайте ключевым 10-й кадр второго слоя и произвольно измените положение объекта в нем. Затем сделайте ключевым 20-й кадр первого слоя и также измените положение объекта в этом слое (рис. 39).

Рис. 39. Кадры 10 и 20 сделаны ключевыми

9.       При просмотре анимации вы увидите, что оба объекта движутся одновременно, в соответствии с их траекториями.

Пример 9 Скрипт электронных часов

В заключение нашего беглого знакомства со скриптами во Flash MX рассмотрит пример использования готового скрипта для создания электронных часов. Такие часы можно, например, разместить на странице вашего сайта.

1.       Командой Insert (Вставить)4New Simbol (Новый символ) или комбинацией клавиш <Ctrl+F8> создайте новый символ с именем "Clock" —  рис. 40.

Рис. 40. Создание нового символа Time

2.       Далее потребуется создать три текстовых динамических поля, одно из которых будет отображать часы, другое минуты и третье — секунды.

3.       На панели инструментов Tools выберете Text Tool (Текст) и в области будущих часов напишите текст в виде двух нулей "00".

4.       На панели свойств Properties в списке Text Type (Тип Текста) выберете вариант Dinamic text (Динамический текст), а в поле Variable (Переменная) впишите hour (Часы) — рис.41.

Рис. 41. Панель свойств текста

5.       Аналогичным способом создайте ещё два динамических поля, вписав в них текст "00" и назначив для первого поля переменную — minute (Минуты), а для второго поля — second (Секунды).

6.       Теперь перенесите мувиклип Time из библиотеки на главную cцену (Scene1). Для этого нужно нажать кнопку  Scene 1. Затем выполнить команду Window (Окно)4Library (Библиотека). Эта команда вызовет окно библиотеки с созданным нами символом часов Time —  рис. 42.

Рис. 42. Часы находятся в библиотеке

7.       Буксировкой мышки перетащите часы (Time) из библиотеки на главную сцену Scene 1.

8.       Щелкните правой кнопкой мышки по часам на главной сцене фильма и в выпадающем меню выберите команду Actions (Действия).

9.       В список действий окна  Actions – Movie Clip скопируйте следующий скрипт (рис.43):

onClipEvent (enterFrame)

{
Clock = new Date();

second = Clock.getSeconds();

hour = clock.getHours();

minute = clock.getMinutes();

if (length(second) == 1) {

second = "0"+second; }

if (length(minute) == 1) {

minute = "0"+minute; }

if (length(hour) == 1) {

hour = "0"+hour;

} }

Рис. 43. Окно Actions – Movie Clip

10.    Для просмотра готовой работы нажмите комбинацию клавиш <Ctrl+Enter>.

Задание 3 — Изменение вида курсора      

В Интернет вы можете найти множество готовых скриптов для Flash. В этой книге мы не ставим целью научить вас писать скрипты. Цель автора — показать вам технологию применения скриптов во Flash и научить читателя использовать, применять и видоизменять готовые скрипты под задачи пользователя. Попробуйте, например, используя скрипт

onClipEvent (load) {
Mouse.hide();
startDrag (kursor, true);
}                                            

Изменить вид вашего курсора. В этом скрипте строчка Mouse.hide(); скрывает настоящий курсор, а строчка startDrag (kursor, true);} притягивает созданный вами курсор к курсору мышки, который мы скрыли.              

Подсказка:

Командой Insert (Вставка)4New Symbol (Новый символ)4Move Clip (Мувиклип) создайте новый символ, назовите его kursor и нарисуйте свой вариант курсора (круг, квадрат, и так далее). Затем переместите этот клип из папки Libriary на главную сцену (Scene 1). Вызовите окно Actions – Movie Clip и в список действий этого окна введите скрипт:           

onClipEvent (load) {
Mouse.hide();
startDrag (kursor, true);
}                                            

Все. Результат работы вы увидите, если нажмете комбинацию клавиш <Ctrl+Enter>.

Добавление звука в мувиклип

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

Форматы звуковых файлов

Во Flash MX вы можете использовать звуковые файлы трех форматов:

q  WAV — формат для хранения звуковых файлов, разработанный совместно корпорациями Microsoft и IBM. Встроенная поддержка этого формата операционной системой Windows сделала его стандартом для работы со звуком на ПК. Звуковые файлы в формате WAV обычно имеют расширение .wav и могут воспроизводиться практически всеми приложениями для Windows, поддерживающими работу со звуком;

q  MIDI (Musical Instruments Digital Interface, т.е. цифровой интерфейс музыкальных инструментов) — форма звука, разработанная для электронных музыкальных инструментов ещё в 1982 году для передачи цифровых сигналов (MIDI-последовательностей или MIDI-посылок) от одних цифровых музыкальных инструментов к другим. С MIDI-файлами во Flash можно работать, только через JavaScript;

q  Можно импортировать файлы MP3 (сокращение от MPEG Layer 3). Это один из потоковых форматов хранения и передачи аудиосигнала в цифровой форме, разработанный Fraunhofer IIS и THOMSON, позднее утвержденный как часть стандартов сжатого видео и аудио MPEG1 и MPEG2. Cхема MP3 является наиболее сложной схемой семейства MPEG Layer 1/2/3. Она требует наибольших затрат машинного времени для кодирования по сравнению с двумя другими (mp1 и mp2), но, зато обеспечивает более высокое качество кодирования. Используется главным образом для передачи аудио в реальном времени по сетевым каналам и для кодирования CD Audio. Полные спецификации формата доступны на сайте www.mp3tech.org.

Пример 9 Используем во Flash-анимации звук

Давайте в любом, описанном выше примере с движением (хотя бы в примере 11.8) наложим на созданную анимацию звук. Для этого создайте новый слой и отбуксируйте его мышкой в верхнюю часть стопки слоев на Timeline.

1.       Проделайте команду Window (Окно)4Common Libraries (Основные библиотеки)4Sounds (Звуки) — рис.44.

Рис. 44. Библиотека звуков

2.       Отбуксируйте звук из библиотеки в кадр сцены — вы увидите, что график амплитуды выбранного звука отобразиться в отведенном ему слое (рис.45).

Рис. 45. В анимацию добавлен звук

3.       Проиграйте ваш фильм и убедитесь, что теперь он озвучен. Однако звуковая дорожка может заканчиватья раньше, чем сам фильм. Коснемся вопроса о том, как их синхронизировать. Для этого выделим слой звука и рассмотрим его свойства (рис. 46). Здесь строчка 22 kHz Mono 16 Bit 21s 90,9 kB сообщает, что использованный нами звук, в частности, имеет размер 91 Кбайт и звучит 21 сек.

СОВЕТ

Звуки занимают значительное количество дискового пространства и ОЗУ (RAM). Обычно лучше использовать 22 кГц 16-битный моно звук, т.к. стерео занимает в 2 раза больше места, чем моно. 22 кГц используется обычно для публикации в Интернете, а 44 кГц — стандартное качество звука для CD-дисков.

Рис. 46. Панель Свойства для слоя звука

4.       В списке Sync (Синхро) вариант Event (Событие) соответствует одновременному началу анимации и звука, т.е. начало анимации синхронно со звуковым сопровождением. В строке Loop (Цикл) назначается число повторов звука в кадре. Если вы захотите прекратить звук, например, в кадре 15, то щелкните на нем правой кнопкой мыши и из контекстного меню выполните команду Convert to Keyframes (Преобразовать в ключевые кадры). Затем в Панели свойств (Properties) выберите звук и из списка Sync (Синхро) и назначьте ему команду остановки звука Stop (рис.47).

Рис. 47. В кадре 15 событийный звук остановлен

5.       Если же вы захотите отредактировать звук, то на панели Properties нажмите кнопку Edit (Править) — рис. 48.

Рис. 48. Окно редактирования звука

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

7.       С помощью списка Efect (Эффект) вы можете, например, сделать нарастание (Fade In) или затухание (Fade Out) звука, а также переход его из одной колонки в другую (Fade Left To Right). Попробуйте изучить эти и другие эффекты самостоятельно.

Более подробное рассмотрение работы со звуком выходит за рамки данной книги.

Задание 3 — Создание “звуковой” кнопки (Назначение звука кнопкам)

Вы можете ассоциировать звуки с разными состояниями кнопки. Можно, например, создать звук, появляющийся при нажатии на кнопку или наведении курсора мышки на активную зону, которая с точки зрения Flash также является кнопкой. Выполните эту работу самостоятельно. Вопрос: ”Вставленный вами звук для кнопки будет потоковый или событийный?” Правильный ответ — событийный, так как он начнет звучать не сразу с появлением кнопки на экране, а только после ваших манипуляций с ней.

Материалы для повторения и закрепления

q  Flash - это технология анимации, основанная на векторной графике. Web - дизайнеры используют Flash для управления навигацией, создания анимированных открыток, банеров, презентаций, синхронизированных с аудио-сопровождением, а также сложных, интерактивных Web-сайтов. Flash - анимации компактны, так как строятся из векторной графики, поэтому они не требует больших ресурсов памяти, быстро загружаются и масштабируются по размерам окна программы просмотра. Flash — отличное средство для создания презентаций, оболочек и прочих небольших мультимедийных программ (Именно для этого первоначально эта технология и была предназначена). Flash может заменить Microsoft PowerPoint и займет при этом меньше места на винчестере

q  Для просмотра станиц с анимацией необходимо подключить к браузеру дополнительный бесплатный модуль (plug-in) Flash Player, последняя версия которого доступна к загрузке с сайта Macromedia, Inc. Macromedia Flash Player — быстрый, маленький проигрыватель интерактивных анимаций, созданных при помощи Macromedia Flash. Flash Player поддерживает потоковую передачу и воспроизведение MP3-аудиофайлов, имеет интерактивный интерфейс и позволяет просматривать все форматы Flash. Flash Player не единственная программа для просмотра Flash фильмов. Можно использовать, например, программу Macromedia Flash Player ActiveX Control. Программа распространяется производителем бесплатно (Лицензия — Freeware) и служит как проигрыватель интерактивных анимаций, созданных при помощи Macromedia. Можно использовать и Flash Shockwave Player, который является Web-стандратом для воспроизведения мультимедийных материалов. Он позволяет вам просматривать через свой браузер интерактивное содержимое Web-узла: игры, бизнес-презентации, рекламные ролики. Shockwave Player - это бесплатная программа, которую с легкостью может скачать каждый, кто находится в Интернет.

q  Для каждого кадра flash-ролика нет конкретного времени его показа, как например в MS PowerPoint. Вместо этого кадры сменяют друг друга с одной скоростью, измеряемой в кадрах в секунду (fps). Все кадры располагаются на временной шкале. Каждый кадр может иметь несколько независимых слоев (Layers), которые можно временно скрывать, блокировать для рисования. Чтобы одни и те же изображения задерживались на экране дольше других, ключевой кадр можно растянуть на следующие позиции, введя нажатием клавиши F5 дополнительные кадры (не ключевые, а просто Frames). Разница Keyframes и Frames в том, что с введением вторых не увеличивается объем файла, они фактически пустые. Есть еще и нулевые (Blank Keyframes) кадры, создаваемые по F7 и нужные для того, чтобы на каком-то слое прервать отображение, а через какое-то количество кадров снова его восстановить.    

q  Для того, чтобы экспортировать клип во множество из форматов файлов, а также чтобы создать HTML-файл, выполняется команда File (Файл)4Publish (Публиковать). Командой Publish (Публикация) можно создать HTML-контейнеры, которые потребуются для публикаций файлов в формате SWF (ShockWave Format). Эта команда также создает альтернативные версии документов и в других форматах, включая GIF, JPEG и QuickTime. Свойства каждого формата отдельно настраиваются до процедуры публикации командой File (Файл)4Publish Settings (Установки публикации). Кроме того, вы можете использовать команду File (Файл)4Export (Экспорт) для экспорта анимации в swf-формат и самостоятельной вставки такого ролика в HTML.

q  В Flash-клипах можно использовать звуковые файлы. Звуки можно "привязать" к моментам отображения отдельных сцен, либо к действиям с активными элементами дизайна – нажатиям кнопок и пунктов меню, а также к действиям с активными зонами произвольной формы (проход курсора мыши над зоной и его уход из зоны, нажатие или освобождение кнопки мыши, "перетаскивание" и т.п.). Звуковые спецэффекты наряду с обычным воспроизведением, включают возможность проигрывания звука отдельно в левом или правом канале а также различные "перетекания" из одного канала в другой.

Вопросы для самоконтроля

q  Что дают web-дизайнеру Flash - технологии?

q  Каковы сферы применения новых Flash-технологий в Интернет?

q  Как вы понимаете интерактивность сайта?

q  Высоки ли системные требования программы Flash MX?

q  Каковы особенности инструментов рисования во Flash?

q  Какие кадры называют ключевыми и почему?

q  Каков алгоритм создания автоматической анимации?

q  Какие виды персонажей вы знаете?

q  Технология Flash использует принцип, который называется “loop”. В чем он заключается?

q  Какие форматы звука можно использовать в программе?

q  Какие новые возможности появились в версии  Flash MX 2004?

q  Правильно ли такое утверждение: “По F6 мы сохраняем, то, что было в кадре, а по F7 мы создаем чистый (пустой) кадр?”

q  Для чего применяется панель Timeline? 

q  При помощи команд, какого пункта меню воспроизводится фильм? 

q  Какой инструмент Flash предназначен для выравнивания объектов?

q  В каком слое содержится траектория движения объекта?

q  Можно удалять ключевые кадры командой Remove Frames? 

q  Какой параметр определяет прозрачность объекта анимации? 

q  Где при озвучивании фильма располагается звуковое сопровождение? 

q  При каком параметре звук синхронизируется с изображением? 

q  Какие форматы файлов можно применить для конвертирования фильма при  его публикации? 

Скачано с www.znanio.ru