Официальный учебный курс

Adobe Flash CS4 Professional

Учебный курс разработан специалистами компании Adobe Systems

Оглавление

Лабораторная работа №1 "Знакомство" .................................................................................. 3

Лабораторная работа № 2 "Работа с графическими объектами" ......................................... 31

Лабораторная работа № 3 "Создание и редактирование символов" ................................... 44

Лабораторная работа № 4 "Добавление анимации"............................................................. 57

Лабораторная работа № 5 "Каркасная анимация и смена форм" ........................................ 75 Лабораторная работа № 6 "Создание интерактивной навигации" ....................................... 89 Лабораторная работа № 7 "Работа со звуком и видео" ...................................................... 108

Лабораторная работа № 8 "Использование компонентов" ................................................ 126

Лабораторная работа № 9 "Загрузка и управление содержимым Flash" ........................... 134

Лабораторная работа № 10 "Публикация документов Flash" ............................................. 140

Лабораторная работа № 1 "Знакомство"

1 час

Обзор урока

В данном уроке вы узнаете, как:

-     Создавать новый файл во Flash.

-     Настраивать рабочую область в инспекторе свойств.

-     Добавлять слои на временной шкале.

-     Управлять ключевыми кадрами на временной шкале.

-     Работать с импортированными изображениями в библиотеке.

-     Перемещать объекты на рабочей области.

-     Открывать панели и работать с ними.

-     Выбирать и использовать инструменты на панели Tools (Инструменты).

-     Предварительно просматривать анимацию Flash.

-     Искать темы в справочных материалах Flash Help.

-     Использовать электронные ресурсы Flash.

Скопируйте папку Lesson01 с сетевого диска в свою личную папку, если вы еще этого не сделали.

Запуск Flash и открытие файла

При первом запуске Flash вы увидите окно приветствия (Welcome) со ссылками на стандартные шаблоны файлов, руководства и другие ресурсы. В данном уроке мы создадим простую анимацию, чтобы показать несколько снимков с курортов. Вы добавите фотографии и заголовок, и при этом научитесь размещать элементы на рабочей области (Stage) и на временной шкале (Timeline).

1.      Запустите Adobe Flash. В Windows выберите Пуск => Все программы => Adobe Flash CS4.

В Mac OS дважды щелкните по Adobe Flash CS4 в папке Applications или Dock.

2.      Выберите File => Open (Файл => Открыть). В диалоговом окне Open выберите файл 01End.swf в папке Lesson01 и щелкните по кнопке Open, чтобы посмотреть, как должен выглядеть готовый проект.

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

3.      Закройте окно предварительного просмотра.

4.      Выберите File => New (Файл => Создать). В диалоговом окне New Document (Новый документ) щелкните по кнопке Flash File (Файл Flash) (ActionScript 3.0).

ActionScript 3.0 – это последняя версия языка сценариев для Flash, который позволяет добавить интерактивность. При использовании ActionScript 3.0 необходимо, чтобы в обозревателе был установлен Flash Player 9 или более поздняя версия. В данном уроке вы не будете работать с ActionScript, но все равно необходимо выбрать, с какой версией языка будет совместим ваш файл.

5.      Выполните File => Save (Файл => Сохранить). Назовите файл 01_workingcopy.fla и сохраните его в папке Lesson01. Сохранять файл сразу же – хорошая привычка, так как тогда вы можете быть уверены, что работа не потеряется при сбое компьютера. Файл Flash всегда следует сохранять с расширением .fla, которое выделяет исходные файлы Flash.

Знакомство с рабочей областью

Рабочая область Adobe Flash содержит командные меню вверху экрана и большое количество инструментов и панелей для редактирования и добавления элементов к анимации.

Объекты анимации можно создавать во Flash или импортировать элементы, созданные в Adobe Illustrator, Adobe Photoshop, Adobe After Effects, и других совместимых приложениях.

По умолчанию во Flash отображается строка меню, временная шкала (Timeline), рабочая область (Stage), панель Tools (Инструменты), инспектор свойств (Property inspector) и еще несколько панелей. При работе во Flash вы можете открывать, закрывать, закреплять, отсоединять панели и перемещать их по экрану. Чтобы вернуться к рабочей области по умолчанию, выберите Window => Workspace => Essentials (Окно => Рабочая область => Основные элементы).

О рабочем пространстве

Большой белый прямоугольник в середине экрана называется рабочей областью (Stage). Как и сцена в театре, рабочая сцена во Flash – это область, на которой зрители могут увидеть анимацию.

Она содержит текст, изображения и видео, которые будут показаны на экране. Если переместить объект в рабочую область, он станет видимым, а объекты вне рабочей области отображаться не будут. Чтобы разместить элементы в рабочей области, можно использовать линейки (View => Rulers – Просмотр => Линейки) или сетки (View => Grid => Show Grid – Просмотр => Сетка => Показать сетку). Кроме того, вы можете использовать панель Align (Выравнивание) и другие инструменты, о которых будет рассказано в уроках данной книги.

По умолчанию за границами рабочей области вы будете видеть серое пространство. В нем можно разместить элементы, которые не будут видны зрителям. Серая область называется монтажным столом (Pasteboard). Чтобы увидеть только рабочую область Stage, выберите View => Pasteboard (Монтажный стол) и снимите флажок возле этого пункта. В данный момент оставьте этот пункт отмеченным.

Чтобы изменить размер рабочей области и развернуть ее на все окно приложения, выполните View => Magnification Fit in Window (Масштаб просмотра => По размерам окна). Вы также можете выбрать различные варианты увеличения во всплывающем меню непосредственно над рабочей областью.

Изменение свойств рабочей области

Сначала следует указать цвет и размеры рабочей области. Это можно сделать на вертикальной панели Properties (Свойства) справа от рабочей области.

1.         Обратите внимание, что внизу панели Properties в данный момент установлены размеры рабочей области 550x400. Щелкните по кнопке Edit (Редактирование).

Откроется диалоговое окно Document Properties (Свойства документа).

2.         В полях Width (Ширина) и Height (Высота) введите новые размеры: 400 и 250 соответственно.

3.         Щелкните по кнопке Background color (Цвет фона) и выберите новый цвет фона рабочей области (темно-серый, #333333).

4.         Щелкните по кнопке ОК. После этого размеры и цвет рабочей области изменятся. Вы также можете изменить цвет рабочей области, щелкнув по кнопке Stage на панели Properties. Свойства рабочей области можно менять в любой момент по своему усмотрению.

Работа с панелью Library

Панель Library (Библиотека) доступна на вкладке слева от инспектора свойств (Property inspector).

Данная панель хранит и позволяет организовать созданные во Flash символы и импортированные файлы, в том числе растровые рисунки, графические объекты, звуковые файлы и видеоклипы. Символы – это объекты, которые часто используются в анимации для создания интерактивности.

О панели Library

Панель Library (Библиотека) позволяет организовать элементы библиотеки, рассортировав их по папкам, просмотреть, как часто символ используется в документе, и отсортировать элементы по типу. При импорте объектов во Flash их можно поместить непосредственно в рабочую область или в библиотеку. Любой объект, импортируемый в рабочую область, также добавляется в библиотеку, равно как и создаваемые вами символы.

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

Чтобы отобразить панель Library, выберите Window => Library (Окно => Библиотека) или нажмите Ctrl+L (Windows) или Command+L (Mac OS).

Импорт объекта на панель Library

Часто вы будете создавать изображения, используя непосредственно инструменты рисования Flash, и сохранять их как символы в библиотеке. Вам также придется импортировать ресурсы, например изображения JPEG или звуковые файлы МРЗ, которые также хранятся в библиотеке.

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

1.         Выполните File => Import => Import to Library (Файл => Импорт => Импортировать в библиотеку). В диалоговом окне выберите файл background.jpg в папке Lesson01, а затем щелкните по кнопке Open.

2.         Flash импортирует выбранное изображение JPEG и поместит его на панель Library.

3.         Импортируйте все остальные изображения JPEG из папки Lesson01.

4.         На панели Library будут отображены все импортированное JPEG: имена файлов и уменьшенные копии рисунков. Теперь эти изображения доступны для использования в документе Flash.

Добавление объекта из панели Library в рабочую область

Для использования импортированного изображения просто перетащите его с панели Library на монтажный стол.

1.         Выберите Window => Library, чтобы открыть панель Library, если она еще не открыта.

2.         На панели Library выберите элемент background.jpg.

3.         Перетащите объект background.jpg в рабочую область и поместите его приблизительно в центр.

Временная шкала (Timeline) находится под монтажным столом. В документах Flash время измеряется в кадрах. Как и при проигрывании ролика, указатель, отмеченный вертикальной красной линией, перемещается по временной шкале. Вы можете изменять содержимое монтажного стола на различных кадрах. Чтобы отобразить содержимое кадра на монтажном столе, на временной шкале переместите указатель на этот кадр.

Внизу временной шкалы Flash отражает номер выбранного кадра, количество кадров в секунду и уже пройденное время.

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

Переименование слоя

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

1.         Выберите существующий слой на панели Timeline (Временная шкала).

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

"background".

3.         Щелкните за пределами поля с названием, чтобы переименование вступило в силу.

4.         Щелкните по точке с изображением замка, чтобы заблокировать слой. Блокировка слоя не позволяет случайно изменить его.

Добавление слоя

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

1.         Выберите слой background на временной шкале.

2.         Выполните Insert => Timeline => Layer (Вставка => Временная шкала => Слой). Также можно щелкнуть по кнопке Add New Layer (Создать слой) под временной шкалой. Новый слой появится над слоем background.

3.         Дважды щелкните по новому слою, чтобы переименовать его, и наберите "photo1". Щелкните за пределами поля с названием, чтобы применить новое имя.

Теперь на временной шкале два слоя. В слое background содержится фоновая фотография, а вновь созданный слой photo1 над ним пока пуст.

4.         Выберите верхний слой под названием photo1.

5.         Выполните Window => Library, чтобы открыть панель Library, если она еще не открыта.

6.         Перетащите элемент photo1 .jpg из библиотеки в рабочую область.

Изображение photo1 появится в рабочей области и перекроет фоновый рисунок.

7.         Выберите Insert => Timeline => Layer или щелкните по кнопке Add New Layer ниже временной шкалы, чтобы добавить третий слой.

8.         Назовите третий слой photo2.

Вставка кадров

На данный момент в рабочей области есть фоновая фотография и еще одна фотография над ней, но в вашей анимации только один кадр. Чтобы на временной шкале было больше времени, следует добавить кадры.

1.         Выберите кадр 48 в фоновом слое. 

2.         Выполните Insert => Timeline => Frame (Вставка => Временная шкала => Кадр) (F5). Вы также можете щелкнуть правой кнопкой мыши (Windows) или нажать клавишу Ctrl (Mac OS) и выбрать Insert Frame (Вставить кадр) из появившегося контекстного меню. Flash добавит кадры на фоновом слое до выбранной точки: до 48 кадра.

3.         Выберите кадр 48 на слое photo1.

4.         Выполните Insert => Timeline => Frame (F5). Вы также можете щелкнуть правой кнопкой мыши и выбрать Insert Frame из контекстного меню.

Flash добавит кадры в слой photo1 до выбранного кадра 48.

5.         Выберите кадр 48 на слое photo2 и вставьте кадры на этот слой.

Теперь на временной шкале есть три слоя, на каждом из которых 48 кадров. Так как частота смены кадров в вашем документе Flash – 12 кадров в секунду, текущая анимация длится 4 с.

Выбор нескольких кадров

Как и при выборе нескольких файлов на рабочем столе, во Flash вы можете выбрать несколько кадров на временной шкале, удерживая клавишу Shift. Если вы хотите вставить кадры во все имеющиеся слои, удерживайте клавишу Shift и щелкните по той точке, куда желаете добавить кадры. Затем выберите Insert => Timeline => Frame (Вставка => Временная шкала => Кадр).

Создание ключевого кадра

Ключевым кадром (keyframe) отмечается изменение содержимого рабочей области. Ключевые кадры обозначаются на временной шкале кружочком. Если кружочек пуст, на выбранном слое в данный момент ничего нет. Заполненный кружочек означает, что на слое в данный момент что-то есть. Например, в первом кадре слоя background отмечен заполненный ключевой кадр (закрашенный кружочек). В первом кадре слоя photo1 также содержится заполненный ключевой кадр. В обоих слоях размещены фотографии. Но в первом кадре слоя photo2 содержится пустой ключевой кадр, то есть в данный момент этот слой пуст.

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

1.         Выберите кадр 18 на слое photo2. Слой Flash отобразит номер кадра под временной шкалой.

2.         Выберите Insert => Timeline => Keyframe (Вставка => Временная шкала => Ключевой кадр) (F6).

В кадре 18 на слое photo2 появится новый ключевой кадр, отмеченный пустым кружочком.

3.         Выделите новый ключевой кадр на кадре 18 слоя photo2.

4.         Перетащите объект photo2.jpg из библиотеки на монтажный кадр.

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

Для работы во Flash важно понимать, что такое кадры и ключевые кадры. На слое photo2 содержится 48 кадров и 2 ключевых кадра: пустой ключевой кадр в кадре 1 и заполненный ключевой кадр в кадре 18.

Перемещение ключевого кадра

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

1.      Выберите ключевой кадр (кадр 18) слоя photo2.

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

3.      Щелкните по ключевому кадру и переместите его на кадр 12 слоя photo2.

После этого фотография photo2.jpg будет появляться в рабочей области гораздо раньше.

Удаление ключевых кадров

Если вы хотите удалить ключевой кадр, не нажимайте клавишу Delete – так можно удалить его содержимое! Чтобы удалить ключевой кадр, выделите его и выберите Modify => Timeline => Clear Keyframe (Модификация => Временная шкала => Удалить ключевой кадр) (Shift+F6). Ключевой кадр будет удален с временной шкалы.

Организация слоев на временной шкале

В данный момент в вашем рабочем файле Flash только три слоя: background, photo1 и photo2. В данном проекте, как и в большинстве проектов, вам надо будет работать с большим числом слоев. Папки слоев (layer folders) позволяют сгруппировать связанные между собой слои, чтобы содержимым временной шкалы было легче управлять. Это похоже на создание папок на рабочем столе при организации документов. Хотя создание папок может занять некоторое время, в конечном итоге они помогают сделать работу быстрее, так как упрощают поиск нужного слоя.

Создание папок слоев

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

1.      Выберите слой photo2 и щелкните по кнопке Add New Layer (Создать слой);

2.      Назовите слой photo3.

3.      Вставьте ключевой кадр в кадре 24.

4.      Перетащите photo3.jpg из библиотеки в рабочую область.

Теперь у вас четыре слоя. В верхних трех содержатся фотографии с пейзажами острова Кони (Coney Island), размещенные в разных ключевых кадрах.

5.      Выберите слой photo3 и щелкните по значку Insert Layer Folder (Создать папку).

Над слоем photo3 появится новая папка слоев.

6.      Назовите папку photos.

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

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

1.      Перетащите слой photo1 в папку photos.

Обратите внимание, что новое местоположение слоя отмечается толстой линией. Когда слой окажется в папке, его имя будет написано после отступа. 

2.      Перетащите слой photo2 в папку photos.

3.      Перетащите слой photo3 в папку photos.

Все три слоя должны быть в папке photos.

Папку можно свернуть щелчком по стрелке. Чтобы развернуть папку, щелкните по стрелке еще раз. Имейте в виду, что при удалении папки будут удалены все слои внутри нее.

Изменение внешнего вида временной шкалы

Внешний вид временной шкалы можно настроить с учетом выполняемой работы. Если вы хотите, чтобы отображалось большее количество слоев, из раскрывающегося меню Frame View (Отображение кадров) в верхнем правом углу временной шкалы выберите Short (Короткие). Данная команда уменьшает высоту ячеек с кадрами.

Вы также можете изменить ширину ячеек с кадрами, выбрав Tiny (Крошечные), Small (Мелкие), Normal (Обычные), Medium (Средние) или Large (Крупные).

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

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

Начнем с перемещения фотографии с помощью инспектора свойств. Мы также будем вращать изображения с помощью панели Transform (Преобразование).

1.      В кадре 1 на временной панели выберите photo1.jpg, который вы ранее перетащили на сцену в слое photo1. Выбранный объект будет выделен голубым контуром.

2.      В инспекторе свойств введите 30 в качестве значения X и 0 в качестве значения Y. Нажмите Enter или Return, чтобы применить значения. Вы можете просто щелкнуть над значениями X и Y и перетащить указатель, чтобы изменить значения. Фотография будет перемещена в левую часть рабочей области.

Значения X и Y отсчитываются от левого верхнего угла рабочей области, начинается с 0 и увеличивается при движении вправо, Y начинается с 0 и увеличивается при движении вниз.

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

3.      Выберите Window => Transform (Окно => Преобразование), чтобы открыть панель Transform (Преобразовать).

4.      На панели Transform выберите Rotate (Поворот) и введите -12 в поле Rotate или щелкните по значению и перетащите указатель мыши, чтобы изменить угол поворота. Нажмите Enter или Return, чтобы применить значение.

5.      Выберите кадр 12 слоя photo2. Затем щелкните по изображению photo2.jpg в рабочей области.

6.      С помощью инспектора свойств и панели Transform измените координаты и угол поворота фотографии. Введите X = 40, Y = 0, и угол поворота 8, чтобы вторая фотография отличалась от первой.

7.      Выберите кадр 24 на слое photo3. Затем щелкните по фотографий photo3.jpg на рабочей области.

8.      С помощью инспектора свойств и панели Transform измените местоположение и поворот третьей фотографии. Введите значения X = 20, Y = 25 и поворот -2, чтобы третья фотография отличалась от двух предыдущих.

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

На панели Tools – длинной узкой панели в дальнем правом углу рабочей области – находятся инструменты выбора, рисования, ввода текста, редактирования, навигации и настройки инструментов. Вы часто будете использовать панель Tools для переключения между инструментами Selection (Стрелка), Text (Текст) и инструментами рисования. После выбора инструмента посмотрите на область с настройками внизу панели, чтобы установить их в соответствии со своими задачами.

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

При выборе инструмента изменяются доступные настройки внизу панели Tools и на инспекторе свойств. Например, при выборе инструмента рисования появляются пункты Object Drawing (Рисование объектов) и Snap То Object (Привязка к объекту), а при выборе инструмента Zoom (Масштаб) – варианты Enlarge (Увеличить) и Reduce (Уменьшить).

На панели Tools так много инструментов, что отобразить их одновременно невозможно. Некоторые инструменты объединены в группы, при этом отображается лишь один из них (который выбирался последним). Небольшой треугольник в правом нижнем углу кнопки инструмента показывает, что в группе доступны и другие инструменты. Щелкните и удерживайте кнопку мыши над значком, чтобы увидеть другие доступные инструменты, а затем выберите один из них из всплывающего меню.

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

1.      Выберите верхний слой на временной шкале, а затем щелкните по кнопке Insert Layer (Создать слой).

2.      Введите название нового текстового слоя.

3.      Заблокируйте нижние слои, чтобы случайно не переместить туда что-нибудь.

4.      На временной шкале переместите указатель на кадр 36 и выберите этот кадр на слое для текста.

5.      Выберите Insert => Timeline => Keyframe (F6) (Вставка Временная шкала => Ключевой кадр), чтобы вставить новый ключевой кадр на кадре 36 в текстовом слое.

Теперь создадим текст, который появится в кадре 36 этого слоя.

6.      На панели Tools выберите инструмент Text, который отмечен большой заглавной буквой "Т".

7.      В инспекторе свойств из раскрывающегося списка выберите Static Text (Статический текст). Static Text – вариант для любого текста, который используется для отображения. Dynamic Text (Динамический текст) и Input Text (Вводимый текст) – особые варианты для создания интерактивного текста, который управляется сценариями

ActionScript.

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

9.      Щелкните по закрашенному квадрату в инспекторе свойств, чтобы выбрать цвет текста. Вы можете щелкнуть по кругу цветов в верхней правой части, чтобы открыть палитру цветов Adobe, либо щелкнуть по проценту значения Alpha, чтобы указать уровень прозрачности.

10.  Убедитесь, что выбран кадр 24 слоя с заголовком, а затем щелкните по тому месту рабочей области, где хотите добавить текст.

11.  Введите заголовок, который соответствует отображаемым в рабочей области фотографиям.

12.  Выйдите из инструмента Text, выбрав инструмент Selection (Стрелка).

13.  С помощью инспектора свойств или панели Transform (Преобразовать) измените размер и положение текста в рабочей области.

Обзор панели Tools

На панели Tools (Инструменты) находятся инструменты выделения, заливки и рисования, а также инструменты навигации. Область настроек на панели Tools позволяет изменить настройки инструмента. 

В расширенном меню справа показаны скрытые инструменты. Черные квадраты  в расширенном меню справа указывают, какой инструмент на панели Tools выбран по умолчанию. Заглавная буква в скобках отображает клавиатурное сокращение для выбора этого инструмента. Обратите внимание, что они сгруппированы по выполняемым действиям.

Отмена действий во Flash

В идеальном мире все бы шло по плану. Но порой нам приходится перейти на шаг или два назад и что-то переделать. Во Flash действия можно отменять с помощью команды Undo (Отменить) или панели History (История).

Чтобы отменить одно действие, выберите Edit => Undo (Правка => Отменить) или нажмите Ctrl/Command+Z. Чтобы снова выполнить шаг, который вы отменили, выполните Edit => Redo (Правка => Повторить).

Чтобы отменить несколько шагов, проще использовать панель History (Журнал), на которой отображается список шагов, выполненных в текущем документе. При закрытии документа его история очищается.

Чтобы открыть панель History (Журнал), выполните Window => Other Panels => History (Окно => Другие панели => Журнал).

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

1.      Выберите Edit => Undo (Правка => Отменить), чтобы отменить последнее выполненное действие. Можно использовать команду Undo несколько раз, чтобы переместиться в прошлое до 100 шагов. Вы можете изменить максимальное количество шагов, которые можно отменять, выбрав Flash => Preferences (Правка => Настройки).

2.      Выполните Window => Other Panels => History (Окно => Другие панели => Журнал), чтобы открыть панель History.

3.      Перетащите указатель на панели History вверх, чтобы вернуться к шагу, на котором вы допустили ошибку. Отмененные шаги будут затемнены. Чтобы вернуть шаг, снова переместите указатель вниз.

Предварительный просмотр ролика

При работе над проектом стоит чаще просматривать результат. Чтобы быстро просмотреть ролик, выберите Control => Test Movie (Отладка => Тестировать ролик). Вы также можете нажать Ctrl+Enter или Command+Return, чтобы выполнить предварительный просмотр клипа.

1.      Выберите Control => Test Movie. Ролик будет открыт и проигран в отдельном окне.

Flash будет автоматически циклически проигрывать ролик в режиме предварительного просмотра. Если вы не хотите, чтобы ролик повторялся, выберите Control => Loop (Отладка => Цикл воспроизведения), чтобы отменить этот вариант.

2.      Закройте окно предварительного просмотра.

Публикация клипа

Когда вы будете готовы поделиться своим клипом с другими, опубликуйте его во Flash. Для большинства проектов Flash создаст файл HTML и файл SWF. Файл SWF – это готовый ролик Flash, а файл HTML сообщает обозревателю сети, как следует отображать файл SWF. Необходимо загрузить оба файла в одну и ту же папку на сервере. Всегда проверяйте клип после загрузки, чтобы убедиться, что все работает.

1.      Выберите File => Publish Settings (Файл => Параметры публикации).

2.      Щелкните по вкладке Formats (Формат).

3.      Выберите форматы Flash (.swf) и HTML (.html).

4.      Щелкните по вкладке HTML. 

5.      Отмените вариант Loop (Цикл).

6.      Щелкните по кнопке Publish (Опубликовать).

7.      Щелкните по кнопке ОК, чтобы закрыть диалоговое окно.

8.      Перейдите в папку Lesson01, чтобы увидеть, какие файлы были созданы во Flash.

Поиск ресурсов по использованию Flash

За полной и своевременной информацией об использовании панелей, инструментов и других возможностей Flash обратитесь на сайт Adobe. Выберите Help => Flash Help (Справка => Справка Flash). Вы перейдете на сайт Adobe Community Help, где можно найти справочные материалы Flash и документы поддержки, а также другие веб-сайты, полезные для пользователей Flash. Можно сузить результаты поиска лишь до справки и документов от Adobe.

Если вы собираетесь работать с Flash без соединения с Интернетом, загрузите самую свежую PDF-версию Справки Flash по адресу: www.adobe.com/go/documentation.

За такими дополнительными ресурсами, как советы и методы, и самой свежей информацией о продукте обращайтесь на страницу Adobe Community Help по адресу: community.adobe.com/help/main.

Проверка обновлений

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

1.      Во Flash выберите Help => Updates (Справка => Обновления). Adobe Updater автоматически проверит, какие обновления доступны для программ от Adobe.

2.      В диалоговом окне Adobe Updater выберите все обновления, которые хотите установить, а затем щелкните по кнопке Download And Install Updates (Загрузить и установить обновления), чтобы установить их.

Лабораторная работа № 2 "Работа с графическими объектами"

2 часа

Обзор урока

В данном уроке вы узнаете, как:

-     Рисовать прямоугольники, овалы и линии.

-     Понимать разницу между режимами рисования.

-     Изменять форму, цвет и размер нарисованных объектов.

-     Настраивать заливку и обводку.

-     Создавать симметричные шаблоны.

-     Создавать и редактировать кривые.

-     Применять градиенты и прозрачность.

-     Группировать элементы.

-     Создавать и редактировать текст.

Скопируйте папку Lesson02 с сетевого диска в свою личную папку, если вы еще этого не сделали.

Начало

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

До анимации мы пока не дойдем. Ведь перед тем как бежать, надо научиться ходить! А перед тем как создавать анимацию во Flash, следует научиться рисовать и редактировать рисунки.

1.      Выполните File => New (Файл => Создать). В диалоговом окне New Document (Новый документ) выберите Flash File (Файл Flash) (ActionScript 3.0).

2.      На панели Properties (Свойства) установите размеры монтажного стола 700x150 и укажите светло-синий цвет фона.

3.      Выберите File => Save (Файл => Сохранить). Назовите файл 02_workingcopy.fla и сохраните его в папке 02 Start. Желательно сохранять все файлы сразу – в таком случае сбой в системе не приведет к потере вашей работы.

Знакомство с контурами и заливками

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

Заливка и контур независимы друг от друга, то есть вы можете удаляв или изменять что-то одно, не трогая другое. Например, создать прямоугольник с синей заливкой и красным контуром, а затем изменить заливку на фиолетовую и удалить контур (останется фиолетовый прямоугольна без контуров).

Создание прямоугольников

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

Начнем мы с рисования газировки.

1.      Выберите инструмент Rectangle (Прямоугольник), на панели Tools (Инструменты). Убедитесь, что значок Object Drawing (Рисование объекта) не выделен.

2.      Выберите цвет контура и цвет заливки внизу панели Tools. Можно создать контур и заливку любого цвета, но помните, что необходимо определить оба параметра.

3.      В рабочей области нарисуйте прямоугольник, высота которого в 2 раза превышает ширину (точный размер указан в п. 6).

4.      Выберите инструмент Selection (Стрелка).

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

6.      В инспекторе свойств введите ширину 95 и высоту 135. Нажмите Enter или Return, чтобы применить значения.

Добавление растровой заливки

Заливка – это внутренняя область графического объекта. Во Flash можно указать заливку одним цветом, градиентом, растровым рисунком (например, из файлов TIFF, JPEG или GIF) или создать объект без заливки. В данном уроке мы нарисуем стакан с жидкостью, поэтому вы импортируете рисунок воды и установите его в качестве заливки. Импортировать файл с растровым рисунком можно на панели Color (Цвет).

1.      Убедитесь, что по-прежнему выделен весь прямоугольник. Если необходимо, обведите его инструментом Selection (Стрелка) еще раз.

2.      Откройте панель Color (Window => Color). На панели Color щелкните по значку Fill Color (Цвет заливки).

3.      Выберите Bitmap (Растровое изображение) в меню Туре (Тип).

4.      В диалоговом окне Import to Library (Импортировать в библиотеку) выберите файл Water.tif в папке Lesson02/02Start.

5.      Выберите файл Water.tif и щелкните по кнопке Open (Открыть).

Прямоугольник будет заполнен рисунком воды.

Определение свойств контура

Контур – это обрамление объекта. Атрибуты, применяемые к контуру, отличаются от атрибутов заливки (например, вы можете полностью убрать контур объекта). Мы укажем для прямоугольника сплошной серый контур.

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

2.      На панели Properties (Свойства) щелкните по полю Stroke Color (Цвет обводки).

3.      В палитре цветов Color Picker, выберите четвертый квадрат сверху слева, серый цвет или введите #999999 в поле.

4.      Введите 4 в поле Stroke Height (Обводка), и нажмите Enter или Return, чтобы применить значение.

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

Изменение объектов

Теперь мы сделаем прямоугольник больше похожим на стакан. С помощью инструмента Free Transform (Свободное преобразование) мы сдвинем внутренние углы ближе друг к другу. Инструмент Free Transform позволяет изменить точки на линиях и формы контуров.

1.      На панели Tools выделите инструмент Free Transform.

2.      Обведите инструментом Free Transform прямоугольник на сцене, чтобы выбрать его.

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

3.      Нажмите Ctrl/Command+Shift и перетащите один из нижних углов внутрь. Указанные клавиши позволяют переместить оба угла на одинаковое расстояние одновременно.

4.      Щелкните по внешней части фигуры, чтобы убрать выделение.

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

Использование градиентной заливки

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

1.      Выберите инструмент Selection (Стрелка).

2.      Протащите инструмент вокруг нижней части стакана, чтобы выбрать область его дна.

3.      На панели Color (Window => Color) щелкните по значку Fill (Заливка), а затем выберите Linear (Линейный) из меню Туре (Тип).

Flash применит черно-белый линейный градиент ко дну стакана.

Настройка градиентных переходов

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

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

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

2.      Перетащите новый указатель цвета в середину градиента.

3.      Выберите новый указатель цвета (прямоугольник над выбранным указателем почернеет), а затем введите #FFFFFF в поле Hex value (Шестнадцатеричное значение), чтобы указать белый цвет для указателя. Нажмите Enter/Return, чтобы применить выбранный цвет.

4.      Щелкните по дальнему правому указателю цвета, и затем – по черной области на серой шкале над ним (или введите #000000).

Градиентная заливка с основании стакана станет черно-белой.

Использование инструмента Gradient Transform

Вы можете не только задавать положение цветовых указателей градиента, но и настраивать размер, направление и указывать центр градиентной заливки. Мы будем использовать инструмент Gradient Transform (Преобразование градиента), чтобы растянуть градиент в нижней части стакана.

1.      Выберите инструмент Gradient Transform. Данный инструмент находится в одной группе с инструментом Free Transform (Свободное преобразование).

2.      Щелкните по нижней части стакана. Появятся метки преобразования.

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

Выбор объектов

Чтобы изменить объект, его вначале следует выбрать. Во Flash для выбора объектов можно использовать инструменты Selection (Стрелка), Subselection (Спецвыделение) или Lasso (Лассо). Обычно инструмент Selection используется для выбора всего объекта или части объекта, инструмент Subselection позволяет выбрать определенную точку или линию объекта, а инструмент Lasso дает возможность выбирать части объята произвольной формы.

Выбор части заливки и группировка объектов

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

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

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

3.      Выберите Modify => Group (Модификация => Группировать).

4.      Дважды щелкните по заново созданной группе, чтобы отредактировать ее.

Обратите внимание, что все остальные элементы в рабочей области будут затемнены, а в верхней горизонтальной полосе над рабочей областью появится надпись "Scene 1 Group". Это означает, что в данный момент вы редактируете содержимое данной рабочей области.

5.      С помощью инструмента Selection выберите центральную часть основания. Начните выделение снаружи группы – выше или ниже, – чтобы не перемещать всю нижнюю часть стакана.

6.      Щелкните по значку Fill Color (Цвет заливки) на панели Tools и выберите белый цвет или введите #FFFFFF в палитре цветов. Выделенная часть станет белой.

7.      Щелкните по значку Scene 1 на горизонтальной полосе вверху рабочей области, чтобы вернуться к основной рабочей области. 

Использование инструмента Lasso

Чтобы придать напитку достоверность, мы сделаем верх стакана неровным. Инструмент Lasso (Лассо) идеально подходит для такой работы, Так как с его помощью можно создавать неровные выделения.

1.      Выберите инструмент Lasso. Убедитесь, что значок Make Polygon Mode (Режим многоугольника) не выбран.

2.      Нарисуйте замкнутую фигуру в верхней части стакана. Соедините края и отпустите кнопку мыши.

3.      Щелкните по значку Color Fill (Цвет заливки) на панели Tools и выберите белый цвет в палитре цветов.

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

Напиток готов! Переименуйте слой, в котором находится стакан с напитком. Осталось лишь добавить пузырьки и искры.

Рисование овала

Инструмент Oval (Овал) похож на инструмент Rectangle (Прямоугольник), за исключением, конечно, того, что он рисует овалы. С помощью этого инструмента вы можете нарисовать пузырек в стакане с напитком.

1.      Выберите инструмент Oval, который сгруппирован с инструментом Rectangle.

2.      На панели Properties (Свойства) установите Stroke color (Цвет обводки) – No Color (Нет цвета) и Fill color (Цвет заливки) – белый (#FFFFFF).

3.      Удерживая клавишу Shift, перетащите указатель мыши в рабочей области при выбранном инструменте Oval (Овал), чтобы нарисовать круг. Нарисуйте круг вне стакана, чтобы он остался нетронутым. Если удерживать клавишу Shift, инструмент Oval будет рисовать идеальные круги.

4.      Вам, возможно, не виден получившийся круг, так как он белый на белой рабочей области. Выберите инструмент Selection и перетащите указатель вокруг кружочка, чтобы выбрать и заливку, и контур. 

5.      Выберите инструмент Free Transform (Свободное преобразование), чтобы изменить размеры пузырька.

6.      Нажмите клавишу Shift, чтобы сохранить пропорции пузырька, и перетащите маркер преобразования с краю, чтобы уменьшить пузырек. Уменьшенный кружочек должен занимать примерно 8 пикселей в длину и в ширину. Воз  можно, будет проще изменить размер пузырька, увеличив масштаб инструментом Zoom (Масштаб). (В инспекторе свойств будут отображаться высота и ширина пузырька.)

7.      При выделенном пузырьке выберите Modify => Group (Модификация => Группировать), чтобы превратить пузырек в группу. Если сгруппировать пузырек, его можно будет перемещать над стаканом, не боясь стереть то, что находится снизу.

8.      Переместите пузырек на стакан.

9.      Затем выберите Edit => Сору (Правка => Копировать). Пузырек будет скопирован.

10.  Выполните Edit => Paste in Center (Правка => Вставить в центр). В рабочей области появится еще один пузырек. Переместите и его на стакан. Повторяйте процесс копирования и вставки, пока вас не устроит количество пузырьков.

Создание шаблонов

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

Создание символа для шаблона

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

1.      В верхнем меню выберите Insert => New Symbol (Вставка => Создать символ).

2.      В диалоговом окне Create New Symbol (Создать символ) введите название "fizzy line" и выберите тип графического объекта Graphic (Графика). Щелкните по кнопке ОК.

3.      Flash немедленно переведет вас в режим редактирования символа. Обратите внимание на горизонтальную полосу над рабочей областью, где указано, что в данный момент вы редактируете символ fizzy line. Теперь вы нарисуете линию для этого символа. 

4.      Выберите инструмент Line (Линия).

5.      Выберите синий цвет линии и ширину линии 2.

6.      Удерживая клавишу Shift, нарисуйте линию от центра экрана, где крестиком отмечен центр символа. Установите ширину линии в 25 пикселей.

7.      Щелкните по значку Scene 1 на горизонтальной полосе над рабочей областью, чтобы вернуться к основной временной шкале. Новый символ fizzy line создан и сохранен в библиотеке для дальнейшего использования.

Использование инструмента Deco

Мы создадим звездообразную фигуру с помощью инструмента Deco.

1.      На временной шкале вставьте новый слой и назовите его "fizz". Вы будете рисовать искры в этом слое.

2.      На панели Tools выберите инструмент Deco.

3.      На панели Properties выберите вариант Symmetry Brush (Кисть симметрии).

4.      Щелкните по кнопке Edit (Правка) рядом с Module (Модуль), чтобы изменить фигуру, которая будет повторяться.

5.      В диалоговом окне Swap Symbol (Заменить символ) выберите символ fizzy line. Щелкните по кнопке ОК.

6.      В группе Advanced Options (Расширенные параметры) выберите Rotate Around Point (Вращать вокруг точки).

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

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

8.      Перетащите вторичную зеленую ось ближе к основной, чтобы увеличить число повторений.

9.      Закончив, выберите инструмент Selection, чтобы завершить работу с инструментом Deco. Готовый шаблон – это группа из нескольких символов fizzy line.

Выравнивание объектов

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

1.      Выберите инструмент Oval (Овал).

2.      Укажите синий цвет контура и никакой заливки. Установите толщину контура 2.

3.      Выберите слой fizz. Удерживая клавишу Shift, нарисуйте небольшой кружок на сцене.

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

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

6.      Откройте панель Align (Window => Align).

7.      Щелкните по кнопке Align horizontal center (Выровнять горизонтально по центру).

Звездообразная группа и овал будут выровнены по горизонтали.

8.      Щелкните по кнопке Align vertical center (Выровнять вертикально по центру).

Звездообразная группа и овал будут выровнены по вертикали.

Разделение и группировка объектов

С помощью инструмента Deco вы создали группу расходящихся линий, с помощью панели Align совместили пузырь и линии. Теперь мы сгруппируем искрящийся объект в одно целое. Для этого разобьем группу расходящихся линий и объединим их в новую группу вместе с овалом.

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

2.      Выберите Modify => Break Apart (Модификация => Разделить).

3.      Группа линий будет разбита на составляющие и станет набором символов fizzy line.

4.      Выберите Modify => Break Apart еще раз.

5.      Набор символов fizzy line будет разбит на составляющие еще раз и станет набором линий.

6.      Выберите Modify => Group (Модификация => Группировать).

7.      Линии и центральный круг станут группой.

8.      Скопируйте и вставьте искры, чтобы на сцене их было несколько.

Создание кривых

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

Использование инструмента Pen

Сейчас мы создадим расслабляющий волнообразный фон.

1.      Выберите Insert => Timeline => Layer (Вставка => Временная шкала Слой) и назовите новый слой "dark blue wave".

2.      Поместите новый слой под двумя другими.

3.      Заблокируйте все остальные слои.

4.      На панели Tools выберите инструмент Реn.

5.      Установите синий цвет обводки (Stroke color).

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

7.      Щелкните по другой части рабочей области, чтобы отметить новую узловую точку. Чтобы создать плавную кривую, перетащите указатель при использовании инструмента Pen.

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

9.      Завершите линию щелчком по первой якорной точке. Не волнуйтесь, если ваши кривые несовершенны. Нужно время на работу с инструментом Pen. У вас также будет возможность улучшить кривые в следующей части урока.

10.  Выберите Paint bucket (Цвет заливки).

11.  Установите темно-синий цвет заливки (Fill color).

12.  Щелкните внутри созданной заливки, чтобы заполнить ее цветом. Редактирование кривых инструментами Selection и Subselection

С первой попытки ваши кривые вряд ли будут идеальны. С помощью инструментов Selection (Стрелка) и Subselection (Спецвыделение) вы можете их улучшить.

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

2.      Наведите указатель над сегментом линии. Рядом с указателем появится изображение кривой, которое указывает, что вы можете редактировать кривую. Если же рядом с указателем появится угол, вы можете редактировать точку.

3.      Перетащите кривую, чтобы изменить ее форму.

4.      На панели Tools выберите инструмент Subselection.

5.      Щелкните по контуру фигуры.

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

Добавление и удаление узловых точек

С помощью скрытых инструментов в группе с инструментом Pen при необходимости можно добавлять и удалять якорные точки.

1.      Щелкните по инструменту Pen и удерживайте кнопку мыши, чтобы выбрать скрытые инструменты.

2.      Выберите инструмент Delete Anchor Point (Удалить узловую точку).

3.      Щелкните по узловой точке на контуре фигуры, чтобы удалить ее.

4.      Выберите инструмент Add Anchor Point (Добавить узловую точку).

5.      Щелкните по кривой, чтобы добавить узловую точку.

Создание прозрачных объектов

Теперь создадим вторую волну, которая будет накладываться на первую. Делаем вторую волну частично прозрачной, чтобы придать рисунку больше глубины. Прозрачность можно применять к линии или к заливке. Прозрачность измеряется в процентах и называется альфа-значением (alpha). Альфа-значение 100% обозначает, что цвет совершенно непрозрачен, а альфа-значение 0% указывает, что цвет полностью прозрачен.

Изменение альфа-значения заливки

1.      Выделите фигуру на слое dark blue wave.

2.      Выберите Edit => Сору (Правка => Копировать).

3.      Выполните Insert => Timeline => Layer (Вставка => Временная шкала => Слой) и назовите новый слой "light blue wave".

4.      Выберите Edit => Paste in Place (Правка => Вставить на месте).

Команда Paste in Place размещает скопированный объект в том же месте, из которого он был скопирован.

5.      Выберите инструмент Selection и переместите вставленную фигуру немного влево или вправо, чтобы между волнами было какое-то расстояние.

6.      Выберите заливку фигуры light blue wave.

7.      На панели Color (Window => Color) установите в качестве цвета заливки другой оттенок синего, а затем измените альфа-значение на 75%.

В поле Образец цвета внизу панели Color отобразится новый цвет. Прозрачность отмечается серым орнаментом за образцом.

Выбор цвета существующего объекта

Если вы хотите, чтобы цвета были совершенно одинаковы, можно использовать инструмент Eyedropper (Пипетка), чтобы скопировать цвет заливки или контура. После щелчка по фигуре инструментом Eyedropper Flash автоматически выбирает инструмент Paint Bucket (Заливка) или Ink Bottle (Обводка) с заданным цветом, который можно применить к другому объекту.

1.      На панели Tools выберите инструмент Eyedropper.

2.      Щелкните по синей заливке фигуры в слое dark blue wave.

Будет автоматически выбран инструмент Paint Bucket с указанным цветом.

3.      Щелкните по фигуре в слое light blue wave.

Заливка фигуры из слоя light blue wave изменится и будет такой же, как и у фигуры из слоя dark blue wave.

Создание и редактирование текста

Теперь давайте добавим текст, чтобы закончить создание иллюстрации. Flash есть множество возможностей. Для отображения текста, который не меняется, используется Static Text (Статический текст). Два других варианта: Dynamic Text (Динамический текст) и Input Text (Вводимый текст) – применяют для текста, который управляется с помощью ActionScript.

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

Использование инструмента Text

1.      Выделите слой light blue wave.

2.      Выберите Insert => Timeline => Layer (Вставка => Временная шкала => Слой), и назовите новый слой "text".

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

4.      В инспекторе свойств выберите Static Text.

5.      В настройках Paragraph (Параграф) вы можете выбрать варианты форматирования: выравнивание, отступы и ориентация.

6.      Щелкните в рабочей области и начните ввод. Введите "Aqua Zero Taste the Difference".

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

7.      Закройте инструмент Text, выбрав инструмент Selection.

Редактирование текста

Текст можно редактировать до тех пор, пока вы его не разобьете (Modify => Break Apart – Модификация => Разделить). Если разбить текст, результатом будет набор отдельных символов. Если разбить эти символы, они станут простыми фигурами.

1.      Выберите инструмент Selection и дважды щелкните по тексту, который хотите отредактировать, или выберите инструмент Text и щелкните по тексту.

2.      Выделите символы, которые будете редактировать.

3.      На панели Properties (Свойства) измените настройки текста. Установите первой строке текста кегль в 48 пунктов и черный цвет, а второй строке – 26 пунктов и красный.

Создание текстовой гиперссылки

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

1.      Выберите инструмент Text и щелкните по тексту.

2.      Выделите символы первой строки текста.

3.      На панели Properties в разделе Options (Параметры) введите URL в поле Link (Ссылка). Обязательно включите http:// перед адресом веб-сайта.

4.      В поле Target (Назначение) выберите _blank, чтобы веб-сайт загружался в новом окне обозревателя. Выберите _self, если вы хотите, чтобы веб-сайт открылся вместо текущего содержимого окна.

Добавление спецэффектов с помощью фильтров

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

1.      Выберите инструмент Selection и щелкните по тексту.

2.      В инспекторе свойств откройте раздел Filters (Фильтры).

3.      Внизу раздела Filters щелкните по кнопке Add Filter (Добавить фильтр) и выберите Drop Shadow (Тень).

В окне появится фильтр Drop Shadow и опции для его настройки.

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

Лабораторная работа № 3 "Создание и редактирование символов"

2 часа

Обзор урока

В данном уроке вы узнаете, как:

-     Импортировать файлы из Illustrator и Photoshop.

-     Создавать новые символы.

-     Редактировать символы.

-     Различать типы символов.

-     Понять различие между символами и экземплярами.

-     Настроить цвет и прозрачность.

-     Применить эффекты смешения цветов.

-     Применить спецэффекты с помощью фильтров.

-     Разместить объекты в трехмерном пространстве.

Скопируйте папку Lesson03 с сетевого диска в свою личную папку, если вы еще этого не сделали.

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

Знакомство

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

1.      Дважды щелкните по файлу 03End.swf в папке Lesson03/03End, чтобы увидеть готовый проект во Flash.

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

2.      Закройте файл 03End.swf.

3.      Выполните File => New (Файл => Создать). В диалоговом окне New Document выберите Flash File (ActionScript 3.0).

4.      На панели Properties (Свойства) щелкните по кнопке Edit (Редактировать) рядом с опцией Size (Размер), чтобы изменить размеры сцены на 600x450 пикселей.

5.      Выберите File => Save (Файл => Сохранить). Назовите файл "03_workingcopy.fla" и сохраните его в папке 03Start.

Импорт файлов Illustrator

Как вы узнали в уроке 2, во Flash можно рисовать объекты с помощью инструментов Rectangle, Oval и др. Но, если вам необходимы сложные изображения, можно импортировать их из другого приложения. Adobe Flash CS4 поддерживает работу с файлами Adobe Illustrator, поэтому вы можете использовать эту программу для создания рисунков, а затем импортировать их во Flash.

При импорте файла Illustrator существует возможность выбрать, какие слои в файле следует импортировать, и как Flash будет работать с этими слоями. Мы импортируем файл Illustrator с персонажами для кадра из мультфильма.

1.      Выполните File => Import => Import to Stage (Файл => Импорт => Импортировать в рабочую область).

2.      Выберите файл characters.ai в папке Lesson03/03Start.

3.      Щелкните по кнопке Open (Windows) или Import (Mac OS).

4.      В диалоговом окне Import to Stage убедитесь, что выделены все слои. Возле каждого слоя должен стоять флажок.

Если вы хотите импортировать лишь определенные слои, не отмечайте Сл°и, которые вам не нужны.

5.      Активируйте функцию Flash Layers (Слои Flash) в меню Convert layers to (Преобразовать слои в), а затем выберите Place objects at original position (Разместить объекты в исходных позициях). Щелкните по кнопке ОК.

Flash импортирует рисунок Illustrator, и все слои из файла Illustrator появятся на временной шкале.

О символах

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

Символы хранятся на панели Library (Библиотека). При перетаскивании символа в рабочую область Flash создает его экземпляр, а оригинал остается в библиотеке. Экземпляр – это копия символа, которая находится в рабочей области. Если представить символы как негативы фотографий – то экземпляры в рабочей области – это снимки, напечатанные с таких негативов.

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

Фрагменты роликов

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

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

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

Кнопки-символы

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

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

Графические символы

Графические символы – самый основной вид символов. Хотя их можно использовать для создания анимации, чаще в этих целях применяются Фрагменты ролика.

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

Создание символов

В Предыдущем уроке вы научились создавать символы, которые можно использовать с инструментом Deco (Декоратор). Во Flash существуют два способа создания символа. Первый: не выделять ничего в рабочей области, а затем выбрать Insert => New Symbol (Вставка => Создать символ). Flash перейдет в режим редактирования символов, где вы сможете нарисовать символ или импортировать его изображение.

Второй: выделить существующий рисунок в рабочей области, а затем выполнить Modify => Convert to Symbol (Модификация => Преобразовать в символ) (F8). То, что вы выберете, будет автоматически размещено в новом символе.

Можно использовать любой метод. Большинство дизайнеров предпочитают команду Convert to Symbol, поскольку в таком случае они могут создать все рисунки в рабочей области и проверить их сочетаемость, перед тем как преобразовывать отдельные части в символы.

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

1.      В рабочей области выделите персонажа из слоя hero.

2.      Выполните Modify => Convert to Symbol (F8).

3.      Назовите символ "hero".

4.      Оставьте значения по умолчанию во всех остальных настройках. Registration (Регистрация) обозначает центральную точку символа. Оставьте регистрацию в верхнем левом углу.

5.      Выберите Movie Clip (Фрагмент ролика) в качестве типа (Туре).

6.      Щелкните по кнопке OK. Символ hero появится в библиотеке.

7.      Выберите еще одного персонажа из слоя robot и также преобразуйте его в символ фрагмента ролика. Назовите его "robot".

Теперь у вас в библиотеке есть два символа фрагмента ролика, а в рабочей области находится по одному экземпляру каждого из них.

Импорт файлов из Photoshop

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

1.      Выберите верхний слой на временной шкале.

2.      В верхнем меню выполните File => Import => Import to Stage (Файл => Импорт => Импортировать в рабочую область).

3.      Выберите файл background.psd в папке Lesson03/03Start.

4.      Щелкните по кнопке Open (Windows) или Import (Mac OS).

5.      В диалоговом окне Import to Stage (Импорт в рабочую область) удостоверьтесь, что выбраны все слои. Каждый слой должен быть отмечен флажком.

6.      Выберите слой flare в левом окне.

7.      В настройках справа активируйте Bitmap image with editable layers styles (Битовое изображение с редактируемыми стилями слоя).

Справа от слоя Photoshop появится значок, который обозначает, что импортируемый слой будет превращен в символ фрагмент ролика. Второй вариант, Flatten bitmap image (Сведенное растровое изображение), не сохранит таких эффектов слоев, как прозрачность или наложение.

8.      Выберите слой Background в левом окне.

9.      В настройках справа активируйте Bitmap image with editable layers styles.

10.  В нижней части диалогового окна выберите вариант Convert layers to Flash Layers (Преобразовать слои в слои Flash) и Place layers at original position (Поместить слои на исходную позицию).

Вы также можете изменить размер рабочей области Flash, чтобы он соответствовал размеру холста Photoshop. Однако в данный момент размер рабочей области уже установлен правильно (600x450 пикселей).

11.  Щелкните по кнопке ОК. Два слоя Photoshop будут импортированы во Flash и размещены на отдельных слоях временной шкалы.

Изображения Photoshop автоматически будут преобразованы в символы фрагмента ролика и сохранены в библиотеке. Вся информация о смешении цветов и прозрачности сохранится. Выбрав изображение на слое flare, вы увидите, что опция Blending (Наложение) на панели Properties (Свойства) в разделе Display (Отображение) установлена в значение Lighten (Осветление).

12.  Перетащите слои robot и hero вверх на временной шкале, чтобы они находились перед фоновым слоем.

О форматах изображений

Flash поддерживает импорт изображений в различных форматах и может работать с файлами JPEG, GIF, PNG и PSD (Photoshop). Файлы JPEG следует использовать для изображений с градиентами и плавными переходами, например для фотографий. Файлы GIF применяются для рисунков с большими одноцветными областями или для черно-белых схем. Файлы PNG следует использовать для изображений с прозрачностью, а файлы PSD – для сохранения всей информации о слоях, прозрачности и наложении цветов из файла Photoshop.

Преобразование растрового изображения в векторную графику

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

Чтобы преобразовать растровое изображение в векторное, импортируйте растровый рисунок во Flash, выделите его и выполните Modify => Bitmap => Trace Bitmap (Модификация => Растровое изображение => Векторизация). Настройки позволяют указать, насколько близка будет векторная версия к первоначальному варианту.

Ниже слева показано исходное растровое изображение, а справа - оно же после преобразования в векторный вид.

Будьте осторожны при использовании команды Trace Bitmap, так как сложные векторные изображения занимают больше места по сравнению с первоначальным растровым рисунком, и на их рисование требуется больше времени.

Редактирование символов и управление ими

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

Добавление папок и организация библиотеки

1.      В библиотеке щелкните правой кнопкой мыши/щелкните по пустому месту, удерживая клавишу Ctrl, и выберите New Folder (Создать папку).

Можно щелкнуть по кнопке New Folder в нижней части панели Library (Библиотека). В библиотеке будет создана новая папка.

2.      Назовите папку characters.

3.      Перетащите символы фрагмента ролика hero и robot в папку characters.

4.      Папки можно сворачивать и разворачивать, чтобы спрятать или показать их содержимое. Это помогает ориентироваться в библиотеке.

Редактирование символа в библиотеке

1.      Дважды щелкните по символу фрагмента ролика robot в библиотеке.

Flash перейдет в режим редактирования символа. В этом режиме можно увидеть содержимое символа в рабочей области. Обратите внимание, что в верхней полосе теперь написано не Scene 1 (Монтажный кадр 1), а отмечено, что редактируется символ robot.

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

3.      Выберите инструмент Paint Bucket (Ведро с краской). Укажите новый цвет заливки и примените его в фигуре на рисунке.

4.      Щелкните по строке Scene 1 над рабочей областью, чтобы вернуться к основной временной шкале.

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

Редактирование символа в рабочей области

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

1.      Дважды щелкните по экземпляру ролика robot в рабочей области.

Flash затенит остальные объекты, и вы перейдете в режим редактирования символа. Обратите внимание, что на горизонтальной полосе сверху отмечено, что вы уже не на монтажном кадре Scene 1, а в символе robot.

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

3.      Выберите инструмент Paint Bucket (Ведро с краской). Укажите новый цвет заливки и примените его в фигуре на рисунке робота.

4.      Щелкните по строке Scene 1 на горизонтальной полосе над рабочей областью, чтобы вернуться к основной временной шкале. Вы можете также дважды щелкнуть по любой части рабочей области вне рисунка, чтобы вернуться к группе более высокого уровня.

Символ фрагмента ролика в библиотеке изменится в соответствии с внесенными изменениями. Все экземпляры символа будут изменяться при его редактировании.

Разбиение экземпляра символа

Если вы не хотите, чтобы объект в рабочей области оставался экземпляром символа, можете с помощью команды Break Apart (Разбить) вернуть его в первоначальное состояние.

1.      Выберите экземпляр робота в рабочей области.

2.      Выполните Modify => Break Apart (Модификация => Разделить).

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

Изменение размера и положения экземпляров

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

1.      Выберите слой robot на временной шкале.

2.      Перетащите еще один символ robot из библиотеки в рабочую область.

Появится новый экземпляр.

3.      Выберите инструмент Free Transform (Свободное преобразование).

Вокруг выделенного экземпляра отобразятся маркеры управления.

4.      Перетащите маркеры управления на сторонах выделения, чтобы зеркально отразить робота. Он должен смотреть в противоположную сторону.

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

6.      Перетащите из библиотеки в рабочую область третьего робота. С помощью инcтрумента Free Transform (Свободное преобразование) отразите его, измените размер и поставьте его перед вторым роботом.

Изменение цветовых эффектов экземпляров

Опция Color Effect (Цветовой эффект) на инспекторе свойств позволяет изменить несколько свойств любого экземпляра, в том числе яркость, оттенок и альфа-значение.

Яркость указывает, насколько светлым или темным будет экземпляр; оттенок управляет общей расцветкой; а альфа-значение позволяет задать прозрачность. Чем меньше альфа-значение, тем больше прозрачность.

Изменение яркости

1.      Выберите инструмент Selection (Стрелка) и щелкните по наименьшему роботу на сцене.

2.      На панели Properties (Свойства) выберите Brightness (Яркость) из меню Color Effect Style (Стиль цветового эффекта).

3.      Перетащите ползунок Bright (Яркость) к значению -40%.

Робот на сцене станет темнее, что создаст эффект удаления.

Изменение прозрачности

1.      Выберите сияющую сферу на слое flare.

2.      На панели Properties выберите Alpha (Альфа-канал) из меню Color Effect Style.

3.      Перетащите ползунок Alpha на значение 75%.

В рабочей области на слое flare шар станет прозрачнее.

Наложение цветов

Наложение цветов определяет способ взаимодействия цвета с цветом под ним. Например, к экземпляру из слоя flare была применена опция Lighten (Осветление), перенесенная из Photoshop, которая объединяла его с экземпляром в слое Background.

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

Применение фильтров для создания спецэффектов

Фильтры – это спецэффекты, которые можно применить к экземплярам фрагмента ролика. В уроке 2 вы с помощью фильтра добавили тень к тексту. В инспекторе свойств в разделе Filters есть много вариантов. У каждого фильтра собственные настройки, которые позволяют добиться нужного результата.

Применение фильтра размытия

Мы применим фильтр размытия (blur) к некоторым из экземпляров, чтобы придать сцене глубину.

1.      Выберите пылающий шар на слое flare.

2.      В инспекторе свойств расширьте раздел Filters (Фильтры).

3.      В Щелкните по кнопке Add Filters (Добавить фильтр) в разделе Filters и выберите Blur (Размытие).

В окне Filters появится фильтр Blur с опциями Blur X (Размытие X) и Blur Y (Размытие Y).

4.      Щелкните по значку со звеном рядом с Blur X и Blur Y, чтобы объединить размытие по обоим направлениям.

5.      Установите значения Blur X и Blur Y в 10 пикселей.

Больше опций при работе с фильтрами

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

Кнопка Presets (Наборы настроек) позволяет сохранить определенные установки фильтра и затем применить их к другому экземпляру. Кнопка Clipboard (Буфер обмена) дает возможность скопировать и вставить любой выбранный фильтр. Кнопка Enable or Disable Filter (Включить или отключить фильтр) позволяет увидеть экземпляр с примененными фильтрами и без них. Кнопка Reset (Перезагрузить фильтр) сбрасывает параметры фильтра на значения по умолчанию.

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

Расположение объектов в трехмерном пространстве

Во Flash CS4 была добавлена возможность размещать объекты в трехмерном пространстве, но объекты не обязательно должны быть фрагментами дика, чтобы их можно было сделать трехмерными. Есть два инструмента для размещения объектов в трехмерном пространстве: 3D Rotation (Поворот ЗD-объекта) и 3D Translation (Перемещение ЗDобъекта). На панели Transform (Преобразовать) также присутствует информация о размещении и повороте.

Для успешной расстановки трехмерных объектов важно понимать принципы организации трехмерного пространства. Во Flash пространство разделено тремя осями: x, y и z.

Ось х горизонтально проходит по рабочей области, и точка х = 0 находится в левом крае. Ось у – вертикальная, и у = 0 находится сверху. Ось z перемещается внутрь и из рабочей области (к зрителю и от него), и z = 0 – это плоскость рабочей области.

Изменение трехмерного вращения объекта

Мы добавим на рисунок текст, немного наклонив его, чтобы подчеркнуть перспективу. Вспомните о тексте в начале фильмов "Звездные войны" и посмотрите, удастся ли вам достичь такого же эффекта.

1.      Добавьте новый слой и назовите его text.

2.      Выберите инструмент Text (Текст) на панели Tools (Инструменты).

3.      В инспекторе свойств выберите шрифт крупного кегля и интересного цвета, который добавит некоторый шик.

4.      Щелкните по рабочей области в слое text и введите заголовок.

5.      Чтобы закончить работу с инструментом Text, выберите инструмент Selection (Стрелка).

Итак, текст создан, но теперь следует преобразовать его в символ фрагмента ролика, чтобы затем повернуть и разместить в трехмерном пространстве.

6.      Не убирая выделения с текста, выполните Modify => Convert to Symbol (Модификация => Преобразовать в символ).

7.      В диалоговом окне Convert to Symbol (Преобразовать в символ) введите понятное название, выберите тип Movie Clip (Фрагмент ролика) и щелкните по кнопке ОК.

Теперь у вас есть символ фрагмента ролика с текстом внутри. В рабочей области появится экземпляр этого символа.

8.      Выберите инструмент 3D Rotation (Поворот ЗD-объекта).

На экземпляре отобразится круглая многоцветная цель. Это направляющие для трехмерного вращения. Удобно рассматривать направляющие как линии на глобусе. Красная линия долготы позволяет вращать экземпляр вокруг оси х. Зеленая линия по экватору вращает экземпляр по оси у, а синяя круглая линия – вокруг оси z.

9.      Щелкните по одной из направляющих (красной для х, зеленой для у или синей для z) и перетащите указатель в любом направлении, чтобы повернуть объект в трехмерном пространстве.

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

Изменение трехмерного положения объекта

Вы можете не только указывать поворот объекта в трехмерном пространстве, но и перемещать его в определенную точку. Для этого используется инструмент 3D Translation (Перемещение ЗD-объекта), скрытый за инструментом 3D Rotation (Поворот ЗD-объекта).

1.      Выберите инструмент 3D Translation.

2.      Щелкните по тексту.

На экземпляре появятся линии. Это направляющие для трехмерного переноса. Красная направляющая представляет ось х, зеленая – ось у, а синяя – ось z.

3.      Щелкните по одной из направляющих, представляющих оси, и перетащите указатель в любом направлении в трехмерном пространстве Обратите внимание, что текст останется в области видимости при перемещении по сцене.

Сброс вращения и положения

Если вы допустили ошибку в трехмерных преобразованиях и хотите сбросить положение и вращение экземпляра, это можно сделать на панели Tranform (Преобразовать).

1.      Выберите инструмент Selection (Стрелка) и выделите нужный экземпляр.

2.      Откройте панель Transform с помощью пункта Window => Transform.

На панели Transform показаны все значения углов и координат по осям х, у и z.

3.      Щелкните по кнопке Remove Transform (Удалить преобразование) в нижнем правом углу панели Transform.

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

Точка исчезновения и угол перспективы

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

1.      Выберите в рабочей области объект, который был перемещен или л вернут в трехмерном пространстве.

2.      На панели Properties (Свойства) откройте раздел 3D Position View (3D-позиция положение и вид).

3.      Щелкните по значениям X и Y для точки исчезновения (Vanishing Point) и перетащите указатель, чтобы изменить точку, которая на сцене отображена пересечением серых линий.

4.      Чтобы вернуть значение Vanishing Point к значению по умолчанию (в центр рабочей области), щелкните по кнопке Reset (Сброс).

5.      Выберите значение Perspective Angle (Угол перспективы) и перетащите указатель, чтобы изменить степень искривления. Чем больше угол, тем больше искривление.

Лабораторная работа № 4 "Добавление анимации"

2 часа

Обзор урока

В данном уроке вы узнаете, как:

-     Создавать анимацию с перемещением, масштабированием и вращением объектов.

-     Настраивать скорость анимации.

-     Делать анимацию прозрачности и спецэффектов.

-     Изменять путь движения.

-     Создавать анимацию внутри символов.

-     Настраивать ускорение движения.

-     Создавать анимацию в трехмерном пространстве.

Скопируйте папку Lesson04 с сетевого диска в свою личную папку, если вы еще этого не сделали.

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

Знакомство

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

1.      Дважды щелкните по файлу 04End.swf в папке Lesson4/04End, чтобы проиграть анимацию.

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

2.      Закройте файл 04End.swf.

3.      3 Дважды щелкните по файлу 04Start.fla в папке Lesson04/04Start чтобы открыть исходный файл проекта во Flash. Этот файл частично готов, и в его библиотеке уже содержатся многие графические элементы, которые вы будете использовать.

4.      Выполните View => Magnification => Fit in Window (Просмотр  => Масштаб просмотра => По размерам окна) или щелкните по кнопке Fit in Window (По размерам окна) в настройках вида над рабочей областью, чтобы на экране была видна вся рабочая область.

5.      Выберите File => Save As (Файл => Сохранить как). Назовите файл 04_workingcopy.fla и сохраните его в папке 04Start. Сохранив рабочую копию, вы в любой момент сможете вернуться к начальному варианту.

Об анимации

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

Обычно анимация создается так: выбирается объект в рабочей области, выполняется щелчок правой кнопкой мыши (удерживается клавиша Ctrl), и в контекстном меню выполняется команда Create Motion Tween (Создать анимацию движения). Затем красный указатель перемещается на другое время на временной шкале, а объект перетаскивается в новое место. Остальные действия Flash выполняет самостоятельно.

Анимация движения (Motion tweens) позволяет создавать анимацию с перемещением объектов по рабочей области, изменением их размера, цвета и других атрибутов. Для создания анимации движения необходимо использовать экземпляры символов. Если выбранный вами объект не является экземпляром символа, Flash автоматически попросит преобразовать выделение в символ, а также автоматически выделит отдельные слои для анимации движения, которые называются слоями Tween (слоями анимации). На одном слое может быть только одна анимация движения, и нет никаких других элементов. Слои анимации позволяют менять атрибуты экземпляра в различные ключевые моменты. Например, космический корабль может располагаться в левой части рабочей области на начальном ключевом кадре и в дальней правой части на конечном. Тогда благодаря перемещению космический корабль будет лететь по рабочей области.

Слово "tween" (анимация) буквально переводится подросток, и оно пришло из мира классической анимации. Взрослые аниматоры обычно рисовали лишь начальную и конечную позу символа, которые являлись Ключевыми кадрами в анимации. Затем аниматоры помоложе вырисовывали промежуточные кадры, то есть "tween" означает "плавный переход между кадрами".

Файл проекта

В файле 04Start.fla содержится несколько анимированных элементов полностью или частично завершенных. В каждом из шести слоев (man, woman, Middle_car, Right_car, footer и ground) располагается анимация. Слои man и woman находятся в папке actors, а слои Middle_car и Right_car – в папке cars.

Мы добавим другие слои (чтобы создать анимацию гаража, улучшить анимацию одного из актеров) а также третью машину и трехмерный заголовок. Все необходимые графические элементы уже были импортированы в библиотеку. Размеры рабочей области – 1280x787 пикселей (они установлены, чтобы рабочая область поместилась на мониторе с высоким разрешением), а цвет области – черный. Вы можете выбрать другой вариант обзора, чтобы увидеть всю рабочую область. Выполните View => Мagnification => Fit in Window (Просмотр => Масштаб просмотра => По размерам окна) или выберите опцию Fit in Window (По размерам окна) в верхнем правом углу рабочей области, чтобы увидеть рабочую область в масштабе, соответствующем окну.

Анимация положения

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

1.      Заблокируйте все существующие слои, чтобы случайно не изменить их. Создайте новый слой над слоем footer и назовите его city.

2.      Перетащите растровый рисунок cityBG.jpg из папки Bitmap библиотеки в рабочую область.

3.      В инспекторе свойств установите значение X = 0 и значение Y = 90.

При таком положении городской пейзаж должен находиться немного ниже верхнего края рабочей области.

4.      Щелкните правой кнопкой мыши по изображению городского пейзажа (удерживайте клавишу Ctrl) и выберите опцию Create Motion Tween (Создать анимацию движения).

Также в верхнем меню можно выбрать Insert => Motion Tween (Вставка => Анимация движения).

5.      Откроется диалоговое окно с предупреждением, что выбранный объект не является символом.

Для создания анимации движения нужно использовать символы. У вас спросят, хотите ли вы преобразовать выделение в символ, чтобы  создать анимацию движения. Щелкните по кнопке ОК.

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

6.      Переместите красный указатель на конец перехода (кадр 190).

7.      Выберите экземпляр городского ландшафта в рабочей области, удерживая клавишу Shift, переместите экземпляр по рабочей области.

Клавиша Shift ограничивает перемещение прямыми углами.

8.      Для большей точности в инспекторе событий установите значение у = 0.

В кадре 190 в конце движения появится черный треугольник. Так отмечаются ключевые кадры в конце движения. Flash плавно интерполирует изменение положения от кадра 1 до кадра 190. Скройте все другие кадры, чтобы увидеть, как благодаря плавной анимации выглядит в результате движение городского пейзажа. 

9.      Перетащите красный указатель на временной шкале направо и налево, чтобы просмотреть движение. Вы также можете выбрать Control => Play (Управление => Воспроизвести) (Enter), чтобы проиграл анимацию.

Анимировать изменение положения просто, так как при перемещении экземпляра в новое место ключевые кадры во Flash создаются автоматически. Если вы хотите, чтобы объект перемещался по разным местам просто переместите красный указатель, а затем перетащите объект новое место. Об остальном позаботится Flash.

Изменение скорости

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

Изменение времени анимации

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

1.      Переместите указатель мыши на конец анимации.

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

2.      Щелкните по концу промежутка анимации и перетащите его в кадр 60.

Анимация сократится до 60 кадров, так что пейзаж будет двигаться гораздо быстрее.

3.      Переместите указатель мыши ближе к началу анимации (в кадре 1).

4.      Щелкните по началу анимации и перетащите его на кадр 10.

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

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

Добавление кадров

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

1.      Переместите указатель мыши на конец анимации.

2.      Удерживая клавишу Shift, перетащите конец анимации на кадр 190.

Последний ключевой кадр в анимации останется на кадре 60, но после кадра 190 будут добавлены дополнительные кадры.

Примечание. Для вставки отдельных кадров выполните Insert => Timeline => Frame

(Вставка => Временная шкала => Кадр) (F5), а удалить кадры можно с помощью команд Edit => Timeline => Remove Frames (Правка => Временная шкала => Удалить кадры)

(Shift+F5).

Перемещение ключевых кадров 

При щелчке по анимации движения на временной шкале выделяется вся анимация. Это позволяет перемещать ее вперед и назад как единое целое. Однако если вы хотите переместить отдельные ключевые кадры или заменить время анимации, нужно выделить отдельные кадры. Удерживая клавишу Ctrl (Windows)/Command (Mac), вы сможете выбрать отдельные кадры или набор кадров в анимации движения. 

1.      Удерживая клавишу Ctrl/Command, щелкните по ключевому в кадре 60.

Будет выделен лишь кадр 60. Рядом с указателем появится небольшой квадратик, который означает, что вы можете переместить ключевой кадр.

2.      Щелкните по ключевому кадру и перетащите его на кадр 40.

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

Анимация прозрачности

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

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

1.      Переместите красный указатель на первый ключевой кадр анимации движения (кадр

10).

2.      Выберите в рабочей области экземпляр городского пейзажа.

3.      На панели Properties (Свойства) выберите вариант Alpha (Альфа-канал) в области Color Effect (Цветовой эффект).

4.      Установите значение альфа-канала равным 0%.

Примечание. Также можно применить цветовой эффект в редакторе движения (Motion Editor), что будет объяснено ниже в этом уроке. Щелкните по вкладке Motion Editor рядом с временной шкалой. Щелкните по знаку плюс рядом с Effect и выберите Alpha.

Экземпляр пейзажа в рабочей области станет полностью прозрачным

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

(кадр 40).

6.      Выберите экземпляр ландшафта в рабочей области.

7.      В инспекторе свойств установите значение альфа-канала равным 100%.

Пейзаж в рабочей области станет полотью непрозрачным. 

8.      Посмотрите на эффект в действии, выполнив Control => Play ( Управление => Воспроизвести) (Enter).

Flash интерполирует изменения в положении и прозрачности между двумя ключевыми кадрами.

Анимация фильтров

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

1.      Сделайте папку слоев actors на временной шкале видимой.

2.      Заблокируйте все слои на временной шкале, за исключением слоя woman.

3.      Переместите красный указатель на начальный ключевой кадр анимации движения на слое woman (кадр 23).

4.      Выберите экземпляр женщины в рабочей области. Вы не сможете увидеть эту женщину, так как ее альфа-значение равно 0% (полностью прозрачна), но, щелкнув по верхней правой стороне рабочей области, вы выберете прозрачный экземпляр.

5.      На панели Properties откройте раздел Filters (Фильтры).

6.      Щелкните по кнопке New Filters (Добавить фильтр) внизу раздела Filters и выберите Blur (Размытие).

К экземпляру будет применен фильтр Blur.

7.      В разделе Filters в инспекторе свойств щелкните по значку звена, чтобы связать значения по х и у. Установите размытие X Blur и Y Blur равным 20 пикселей.

8.      Переместите красный указатель на временной шкале на кадр 160.

К экземпляру woman будет применен 20-пиксельный фильтр Blur на  протяжении всей анимации движения.

9.      Щелкните правой кнопкой мыши по слою woman в кадре 140 (удерживайте клавишу Ctrl) и выберите Insert Keyframe => Filter (Вставить ключевой кадр => Фильтр).

Ключевой кадр для фильтров будет установлен в кадре 140.

10.  Переместите красный указатель на конец временной шкалы в кадр 160.

11.  Выберите экземпляр женщины в рабочей области.

12.  В инспекторе свойств измените значение фильтра Blur на X = 0 и Y = 0.

Фильтр Blur изменится от ключевого кадра в кадре 140 до ключевого кадра в кадре 160. Flash создаст плавный переход от размытого до сфокусированного изображения.

Понимание ключевых кадров для свойств

Изменение свойств, которые не зависят друг от друга, не обязательно должны быть связаны с теми же ключевыми кадрами. Может быть один ключевой кадр для положения, другой – для цветовых эффектов, а третий – для фильтра. Управлять таким количеством ключевых кадров, конечно, непросто, особенно если раньше свойства несколько раз меняются во время анимации движения. К счастью, во Flash CS4 есть несколько полезных инструментов. 

При просмотре перехода вы можете отображать только ключевые кадры по определенным свойствам. Например, показывать лишь ключевые кадры для положения, чтобы увидеть, когда объект перемещается. Или отобразить только ключевые кадры для фильтра. Щелкните правой кнопкой мыши по переходу на временной шкале (удерживая клавишу Ctrl) и активируйте опцию View Keyframes (просмотреть ключевые кадры), а затем выберите нужное свойство. В списке также можно выбрать All (Все) или None (Нет), чтобы показать все свойства или не показывать свойства вообще.

Можно вставить ключевой кадр, относящийся к определенному свойству, которое вы хотите изменить. Щелкните правой кнопкой мыши по анимации движения на временной шкале (удерживая клавишу Ctrl) и активируйте опцию View Keyframes (просмотреть ключевые кадры), а затем выберите нужное свойство.

Motion Editor (Редактор движения) – это особая панель, на которой отображаются все свойства анимации движения, как линии на графике. Редактор движения полезен, когда одновременно меняются несколько свойств. Например, здесь приведен редактор движения для женщины, где показано, что в первых нескольких кадрах меняются значения x и Alpha,  а в последних нескольких кадрах – фильтр Blur.

Вы подробнее узнаете о редакторе анимации ниже в этом уроке.

Анимация преобразований

Теперь научимся анимировать изменения масштаба и поворот. Эти изменения выполняются с помощью инструмента Free Transform (Свободное преобразование) или на панели Transform (Преобразование). Мы добавим в проект третью машину. Вначале она будет маленькой, а затем, при приближении к зрителю, будет увеличиваться.

1.      Заблокируйте все слои на временной шкале.

2.      Вставьте новый слой внутри папки Cars и назовите его Left_car.

3.      Вставьте новый ключевой кадр на кадре 75.

4.      Перетащите символ-ролик carLeft из библиотеки в рабочую область кадра 75.

5.      Выберите инструмент Free Transform.

Вокруг экземпляра в рабочей области появятся маркеры трансформации.

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

7.      На панели Properties (Свойства) убедитесь, что ширина машины примерно равна 400 пикселей.

8.      Вы также можете использовать панель Transform (Window => Transform) и изменить масштаб машины примерно на 29,4%.

9.      Переместите машину в начальную точку (приблизительно X = 710 и Y = 488).

10.  На панели Properties в разделе Color Effect (Цветовой эффект выберите Alpha (Альфаканал).

11.  Установите значение альфа-канала равным 0%.

Машина станет полностью прозрачной.

12.  Щелкните правой кнопкой мыши по машине в рабочей области (удерживайте клавишу Ctrl) и выберите Create Motion Tween (Создать анимацию движения).

Текущий слой станет слоем анимации движения.

13.  Переместите красный указатель временной шкалы на кадр 100.

14.  Выберите прозрачный экземпляр машины и в инспекторе свойств измените значение на 100%.

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

15.  Выберите инструмент Free Transform.

16.  Удерживая клавишу Shift, перетащите боковую метку наружу, чтобы сделать машину больше. Для большей точности откройте инспектор свойств и установите размеры машины равными 1379,5 (высота) и 467,8 (ширина) пикселей.

17.  Поместите машину в точку X = 607 и Y = 545.

18.  Переместите слой Left_car между слоями Middle_car и Right_car, чтобы машина в центре перекрывала машины по краям.

Flash создаст плавный переход размера и положения, а также уровня прочности от кадра 75 до кадра 100.

Сохраненная анимация

Если в проекте нужно несколько раз задавать одинаковые анимации движения, используйте новую панель Flash Motion Presets (Наборы настроек движения). На данной панели(Window => Motion Рresets) хранятся определенные переходы, которые можно применить к различных экземплярам сцены.

Например, если вы хотите создать слайд-шоу, в котором каждый рисунок исчезает одинаковым образом, сохраните этот переход на панели Motion Рresets. Просто выберите первый переход на временной шкале или экземпляр в рабочей области, а затем на панели Motion Рresets щелкните по кнопке Save selection as preset (Сохранить выделение как набор настроек движения).

Назовите заготовку анимации, и она появится на панели Motion Рresets. Выберите новый экземпляр в рабочей области и активируйте сохраненную заготовку. Щелкните по кнопке Apply (Применить), и сохраненная заготовка будет применена к новому экземпляру.

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

Изменение пути движения

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

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

Чтобы лучше продемонстрировать редактирование пути движения, откройте файл с примером 04MotionPath.fla. В этом файле содержится лишь один слой с ракетой, которая движется от верхнего левого к нижнему правому углу экрана.

Перемещение пути движения

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

1.      Выберите инструмент Selection (Стрелка).

2.      Щелкните по пути движения, чтобы выделить его.

Путь движения будет выделен цветом.

3.      Перетащите путь движения на другое место рабочей области.

Относительное перемещение и время анимации останутся такими начальное и конечное положения изменятся.

Изменение размера и поворота пути

Путь движения также можно изменять с помощью инструмента Free Transform (Свободное преобразование).

1.      Выберите путь движения.

2.      Выберите инструмент Free Transform.

Вокруг пути преобразования появятся маркеры трансформации.

3.      Измените масштаб и поворот пути на свое усмотрение. Вы можете сделать путь меньше или больше, а также повернуть его, чтобы ракета летела с нижнего левого угла к верхнему правому.

Редактирование пути движения

Заставить объект двигаться по кривой просто. Вы можете отредактировать путь либо с помощью инструментов для работы с кривыми Безье (что точнее), любо с помощью инструмента Selection (Стрелка), что понятнее.

1.      Выберите инструмент Convert Anchor Point (Преобразовать узловую точку), который скрыт за инструментом Pen (Перо).

2.      Щелкните по начальной точке пути движения в рабочей и перетащите метку из узловой точки.

Маркер узловой точки управляет кривизной пути.

3.      Выберите инструмент Subselection (Спецвыделение).       

4.      Перетащите маркер, чтобы отредактировать кривую пути. Заставьте ракету двигаться по широкой кривой.

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

Направление объектов по пути

Порой важно и направление объектов, которые перемещаются по кривой. В заставке фильма машина не меняет направление при движении вперед. Однако в примере с ракетой нужно, чтобы ракета была направлена в сторону, в которую она двигается. Опция Orient to path (Ориентация по траектории) на панели Properties (Свойства) дает такую возможность.

1.      Выберите анимацию движения на временной шкале.

2.      В инспекторе свойств активируйте опцию Orient to path.

Flash вставит ключевые кадры для вращения, поэтому ракета будет направлена в сторону движения.

Замена цели анимации

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

1.      Выберите ракету в рабочей области, а затем – анимацию движения.

2.      Перетащите символ инопланетянина из библиотеки на ракету.

Flash спросит, хотите ли вы заменить существующий объект новым.

3.      Щелкните по кнопке OK.

4.      Вместо ракеты появится инопланетянин.

Перемещение останется таким же, но цель движения станет другой.

Примечание. Кроме того, можно поменять экземпляры в инспекторе свойств. Выберите объект в рабочей области. В инспекторе свойств активируйте опцию Swap (Замена). В появившемся диалоговом окне выберите новый символ и щелкните по кнопке ОК. Flash заменит цель анимации движения.

Создание вложенной анимации

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

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

Создание анимации внутри символов фрагмента ролика

1.      В библиотеке дважды щелкните по значку символа фрагмента ролика с инопланетянином.

Вы перейдете в режим редактирования. Инопланетянин находится в центре рабочей области. На временной шкале его части тела разделены на слои.

2.      Выберите инструмент Selection (Стрелка).

3.      Щелкните правой кнопкой мыши по правой руке инопланетянина (удерживайте клавишу Ctrl) и выберите Create Motion Tween (Создать анимацию движения).

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

4.      Выберите инструмент Free Transform (Свободное преобразование).

5.      Перетащите угловую точку вращения, чтобы повернуть руку инопланетянина вверх, на ширину плеча.

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

6.      Переместите красный указатель на кадр 1.

7.      Теперь создайте анимацию движения для второй руки инопланетянина. Щелкните правой кнопкой мыши по левой руке (удерживая клавишу Ctrl) и выберите Create Motion Tween (Создать анимацию движения).

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

8.      Выберите инструмент Free Transform.

9.      Перетащите угловую точку поворота, чтобы повернуть руку инопланетянина.

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

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

11.  Выйдите из режима редактирования символа, для чего щелкните по кнопке Scene 1 сверху слева от рабочей области.

Вложенная анимация поднятия инопланетянином рук готова. Она будет проигрываться при использовании символа фрагмента ролика.

12.  Запустите предварительный просмотр, выполнив Control => Test Movie (Управление => Тестировать ролик).

Flash откроет окно с экспортированной анимацией. Инопланетянин перемещается по пути движения, и в это время циклически проигрывается анимация его рук.

Использование редактора анимации

Редактор движения (Motion Editor) – это панель, которая предоставляет информацию обо всех свойствах перехода и средства для его редактирования. Редактор анимации находится под временной шкалой, и что вызвать, можно щелкнуть по верхней вкладке или выбрать Windows => Motion Editor (Окно => Редактор движения).

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

Настройка отображения редактора движения

Настройки отображения в редакторе движения находятся внизу панели.

1.      Выберите инопланетянина в рабочей области.

2.      Откройте панель Motion Editor, если она еще не открыта.

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

Указатель мыши превратится в двунаправленную стрелку, позволяющую увеличить или уменьшить высоту панели Motion Editor.

1.      Перетащите горизонтальную полосу, чтобы увеличить высоту панели Motion Editor.

2.      Щелкните по треугольникам, чтобы свернуть категории свойств слева. Можно расширить или свернуть категории, чтобы увидеть только те категории, которые вас интересуют.

3.      Перетащите значок Viewable Frames (Видимые кадры), чтобы изменить количество кадров, которое видно на временной шкале. Установите значение Set the Viewable Frames (Установить видимые кадры) на максимум, чтобы увидеть всю анимацию движения.

4.      Перетащите значок Graph Size (Размер диаграммы) внизу экрана, чтобы изменить высоту каждого из перечисленных слева свойств.

5.      Перетащите значок Expanded Graph Size (Увеличенный размер диаграммы) внизу панели Motion Editor, чтобы изменить высоту каждого выбранного свойства.

Чтобы увидеть, как опция Expanded Graph Size влияет на отображение, выберите свойство X под Basic. Чем больше значение Expanded Graph Size, тем большая часть выбранного свойства видна.

Изменение значений свойств

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

1.      Рядом со свойством Color Effect (Цветовой эффект) щелкните по значку плюс и выберите Alpha (Альфа-канал).

Свойство Alpha появится в редакторе анимации в категории Color Effect (Цветовой эффект)

2.      Установите значение Alpha.

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

3.      Щелкните по первому ключевому кадру, который отмечен черным квадратом, и перетащите его вниз до 0%. Вы также можете изменить значение Alpha, для чего перетащите значение рядом с надписью Alpha amount (Величина альфа).

Инопланетянин станет прозрачным, начиная с кадра 1.

Вставка ключевых кадров Вставить ключевые кадры просто. 1

1.      Переместите красный указатель на кадр 20.

2.      Щелкните по значку с ромбом, чтобы добавить ключевой кадр в этот момент времени для свойства Alpha. Вы также можете щелкнуть правой кнопкой мыши по графику (удерживая клавишу Ctrl) и выбрать Insert Keyframe (Добавить ключевой кадр).

Новый ключевой кадр для свойства Alpha будет вставлен на кадре 20.

3.      Щелкните по второму ключевому кадру.

Выбранный ключевой кадр будет подсвечен.

4.      Перетащите второй ключевой кадр вверх, чтобы изменить значение Alpha до 100%.

Flash создаст анимацию плавного изменения прозрачности от кадра 1 до кадра 20.

Редактирование ключевых кадров

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

-   Щелкните по стрелке влево или вправо, чтобы быстро перейти к предыдущему или следующему ключевому кадру.

-   Щелкните правой кнопкой мыши по любому ключевому кадру (удерживайте клавишу Ctrl) и выберите Remove Keyframe (Удалить ключевой кадр), чтобы удалить его.

-   Выберите ключевой кадр и щелкните по желтому ромбу, чтобы удалить его.

-   Щелкните по нескольким идущих подряд ключевым кадрам, удерживая клавишу Shift, чтобы переместить их вместе.

Сброс значений и удаление свойств

Щелкните по кнопке Reset Values (Сбросить значения), чтобы вернуть свойству его значение по умолчанию.

- Щелкните по кнопке Minus (Удалить цвет, фильтр или замедление) и выберите Alpha, чтобы удалить свойство из редактора анимации.

Скорость изменения

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

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

Настройка скорости анимации движения

1.      В редакторе анимации щелкните правой кнопкой мыши по второму ключевому кадру для свойства Alpha (удерживая клавишу Ctrl) и выберите Smooth point (Точка плавного изменения).

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

2.      Перетащите маркер, чтобы создать плавную кривую, которая доходит до значения Alpha в 100%.

Переход альфа-значения от 0 до 100% будет замедляться при приближении к 100%.

3.      Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) по первому ключевому кадру для свойства Alpha и выберите Smooth point.

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

4.      Перетащите маркер, чтобы создать плавную кривую в начале возле 0%.

Переход альфа-значения от 0 до 100% будет не только замедляться, но и постепенно начинаться. В итоге должна получиться S-образная кривая скорости изменения.

Примечание. Применять эффекты замедления и ускорения можно и в инспекторе свойств. На временной шкале (не в редакторе анимации) выберите анимацию движения. В инспекторе свойств введите значение от -100 (замедление) до 100 (ускорение). Скорость, указанная в инспекторе свойств, будет применена ко всей анимации движения. Редактор анимации дает больший контроль над отельными свойствами и изменением скорости между ключевыми кадрами. 

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

Изменение скорости позволяет воспроизвести самые разнообразные эффекты. Например, при создании отскакивания можно использовать только для ключевых кадра для изменения положения и указать изменение скорости.

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

1.      Продолжайте работу с начатым проектом Flash, 04_workingcopy.fla

2.      Дважды щелкните по символу carLeft в библиотеке.

Flash перенесет вас в режим редактирования символа. В символе слоя: верхний слой lights и нижний слой smallRumble.

3.      Заблокируйте верхний слой lights.

4.      Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) по машине и выберите Create Motion Tween (Создать анимацию движения).

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

5.      Переместите красный указатель на конец временной шкалы.

6.      Выберите инструмент Selection (Стрелка).

7.      Переместите машину вниз примерно на 5 пикселей.

Flash создаст плавную анимацию перемещения машины немного вниз.

8.      Щелкните по анимации движения на временной шкале и откройте редактор анимации.

9.      Щелкните по кнопке Plus (Плюс) категории Eases (Замедление) и выберите Random (Произвольное).

Появится сохраненное изменение скорости Random.

10.  Выберите изменение скорости Random.

Изменение скорости Random переходит от одного значения к другому через случайные промежутки времени. Это графически показано как набор неровных скачков.

11.  Измените значение Random на 15.

Частота случайных скачков увеличится на основании значения Random.

12.  Выполните Motion category => Basic (Категория анимации => Базовая).

13.  В раскрывающемся списке Eases (Замедление) рядом с категорией анимации Basic motion (Основное движение) выберите Random.

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

Классическая модель движения

Аниматорам, которые работали с предыдущими версиями Flash, новая модель работы с движением может показаться дикой. В старых версиях программы для создания движения вначале создавались ключевые кадры на временной шкале, затем изменялось одно (или более) свойство экземпляра, а затем создавалось движение между ключевыми кадрами. Текущая модель гораздо проще, понятнее и функциональнее. Однако, если вам проще работать по-старому, вы можете использовать вариант Classic Tween (Классическая анимация движения). Выделите первый кадр с экземпляром и выберите Insert => Classic Tween (Классическое движение). Flash применит к временной шкале классическое движение. Однако для классического движения нельзя использовать редактор анимации.

Трехмерная анимация

Теперь, наконец, добавим заголовок и настроим его анимацию в трехмерном пространстве. В трехмерном пространстве анимация сложнее за счет введения третьей оси (z). При выборе инструмента 3D Rotation (Поворот 3D-объекта) или 3D Translation (Перемещение 3D-объекта) следует помнить об опции Global Transform (Глобальное преобразование) внизу панели Tools (Инструменты). Опция Global Transform позволяет выбрать глобальный вариант (кнопка не нажата) и локальный вариант (кнопка нажата). При глобальном варианте преобразования будут вестись относительно глобальной координатной системы, а при локальном – относительно себя.

1.      Вставьте новый слой над остальными слоями и назовите его title.

2.      Заблокируйте остальные слои.

3.      Вставьте новый ключевой кадр в кадре 120.

4.      Переместите символ-ролик movietitle из библиотеки на сцену.

Экземпляр заголовка появится в новом слое на ключевом кадре в кадре 120.

5.      Поместите заголовок в точку х = 180, у = 90.

6.      Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) по заголовку фильма и выберите Create Motion Tween (Создать анимацию движения).

Flash преобразует текущий слой в слой перехода, после чего можно будет приступить к созданию анимации.

7.      Переместите красный указатель на кадр 140.

8.      Выберите инструмент 3D Rotation.

9.      Снимите выделение с опции Global Transform внизу панели Tools.

10.  Перетащите заголовок, повернув его относительно оси у (зеленая), чтобы угол составил примерно -50°. Проверить значения поворота можно на панели Transform (Window => Transform).

11.  Переместите красный указатель на первый ключевой кадр в кадре 120.

12.  Перетащите заголовок, повернув его вокруг оси в противоположном направлении, чтобы угол составил примерно 25°, и экземпляр сжался в узкую полоску.

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

Предварительный просмотр анимации

Чтобы быстро просмотреть анимацию вы можете "протянуть" красный указатель вперед и назад по временной шкале или выполнить Control => Play (Управление => Воспроизвести). Также есть пункт меню Window => Toolbars => Controller (Окно => Панели управления => Пульт управления), который позволяет отобразить управляющую панель с кнопками для перемещения по временной шкале.

Чтобы просмотреть анимацию так же, как ее увидят пользователи, следует протестировать ролик. Выберите Control => Test Movie (Управление => Тестировать ролик).

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

Чтобы выйти из режима тестирования, щелкните по кнопке Close (Закрыть).

Лабораторная работа № 5 "Каркасная анимация и смена форм"

2 часа

Обзор урока

В данном уроке вы узнаете, как:

-     Анимировать каркасы с помощью нескольких связанных фрагментов роликов.

-     Ограничивать сочленения.

-     Анимировать каркасы с использованием фигур.

-     Создавать превращения органических форм с помощью анимации форм.

-     Использовать контрольные точки, чтобы улучшить анимацию форм.

Скопируйте папку Lesson05 с сетевого диска в свою личную папку, если вы еще этого не сделали.

Каркасы - соединения объектов - позволяют создавать сложные объекты при использовании новой возможности Flash CS4, которая называется обратной кинематикой. Вы также можете создавать преобразования – органичные изменения форм - с помощью анимации форм.

Знакомство

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

1.      Дважды щелкните по файлу 05End.swf в папке Lesson05/05End, чтобы проиграть анимацию. Затем дважды щелкните по файлу 05ShapeIK_End.swf, чтобы проиграть и эту анимацию.

Первый проект – анимация крана, работающего в прибрежном порту.

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

2.      Дважды щелкните по файлу 05Start.fla в папке Lesson05/05Start, чтобы открыть начальный файл проекта во Flash.

3.      Выберите File => Save As (Файл => Сохранить как). Назовите файл 05_workingcopy.fla, и сохраните его в папке 05Start. Сохранив первоначальный файл, вы сможете вернуться к нему при необходимости.

Каркасная анимация с обратной кинематикой

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

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

Определение костей

Первый шаг при использовании каркасной анимации – определение костей объекта. Для этого используется инструмент Bone (Кость). Инструмент Bone позволяет указать, как несколько экземпляров символов фрагментов ролика соединяются друг с другом. Соединенные фрагменты ролика называются каркасом, а каждый фрагмент ролика – узлом.

1.      В файле 05working_copy.fla выберите слой с краном.

2.      Перетащите фрагмент ролика cranearm1 из библиотеки в рабочую область. Поместите экземпляр непосредственно над прямоугольным основанием крана.

3.      Перетащите фрагмент ролика cranearm2 из библиотеки в рабочую область. Поместите экземпляр рядом с верхней частью экземпляра cranearm1.

4.      Перетащите еще один символ фрагмента ролика cranearm2 из библиотеки в рабочую область. Поместите этот экземпляр рядом со свободным концом первого экземпляра cranearm1.

5.      Перетащите символ cranerope из библиотеки в рабочую область. Поместите экземпляр таким образом, чтобы он свисал со второго экземпляра cranerope2.

Теперь экземпляры символов на месте, и их можно соединить костями.

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

7.      Щелкните по основанию экземпляра cranearm1 и перетащите указатель мыши к основанию экземпляра cranearm2.

Отпустите кнопку мыши.

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

8.      Щелкните по основанию экземпляра cranearm2 и перетащите указатель мыши к следующему экземпляру cranearm2. Отпустите кнопку мыши.

Вторая кость определена.

9.      Перетащите указатель от снования второго экземпляра cranearm2 к основанию экземпляра cranerope. Отпустите кнопку мыши.

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

10.  Переименуйте слой Pose в "cranearmature" и удалите пустой слой с краном, в котором вначале содержались фрагменты ролика.

Иерархия каркасов

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

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

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

Вставка поз

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

1.      Переместите красный указатель на кадр 25.

2.      Щелкните по крючку в конце троса и перетащите его вниз, в воду.

В кадре будет автоматически вставлена новая поза. При перетаскивании экземпляра cranerope обратите внимание, что весь каркас движется за тросом. Кости поддерживают соединение между различными экземплярами.

3.      Переместите красный указатель на кадр 56 (последний кадр).

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

В кадре 56 автоматически будет вставлена новая поза.

5.      Посмотрите, как будет выглядеть анимация, выбрав Control => Test Movie (Управление => Тестировать ролик).

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

Изоляция поворота отдельных узлов

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

1.      Выберите третью позу в кадре 56.

2.      Удерживая клавишу Shift, перетащите второй узел в каркасе и поверните его, чтобы он был направлен вниз.

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

3.      В Удерживайте клавишу Shift и перетащите третий узел каркаса, чтобы он был направлен вверх.

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

4.      Удерживая клавишу Shift, перетащите последний узел каркаса (экземпляр cranerope, трос), чтобы он был направлен непосредственно вниз.

Удерживая клавишу Shift, вы сможете изолировать поворот отдельных узлов, и таким образом установите нужные позы. Теперь кран будет сворачиваться.

Редактирование каркасов

Можно легко отредактировать каркас, изменяя расположение узлов или добавляя и удаляя новые кости. Например, если одна из костей несколько смещена, ее можно повернуть или переместить с помощью инструмента Free Transform (Свободное преобразование). Однако кости при этом не меняются.

Также можно перемещать узлы в новое место, для чего следует перетащить узел, удерживая клавишу Alt/Option.

Если вы хотите удалить кости, просто щелкните по удаляемой кости и нажмите клавишу Delete на клавиатуре. Выбранная кость и все кости, соединенные с ней по цепочке, будут удалены. Затем, если необходимо, можно добавить новые кости.

Ограничение соединений

Различные соединения крана могут свободно вращаться, что едва ли соответствует действительности. На самом деле угол вращения многих каркасов часто ограничен. Например, предплечье может поворачиваться в сторону предплечья, но его движение в другую сторону ограничено. При работе с каркасами во Flash CS4 можно ограничить вращение различных соединений или их перенос (передвижение).

Далее мы ограничим вращение и перенос различных соединений крана, чтобы он двигался более реалистично.

Ограничение вращения соединений

По умолчанию вращение соединений не ограничено, то есть они описывают круг в 360°. Если вы хотите, чтобы какое-то соединение вращалось лишь на четверть круга, сделает ограничить его вращение 90°.

1.      Щелкните по второй позе в слое cranearmature кадра 25, затем щелкните правой кнопкой мыши (удерживая клавишу Ctrl) и выберите Clear Pose (Удалить позу).

2.      Щелкните по третьей позе в слое cranearmature кадра 56, а затем Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) и выберите Clear Pose.

Теперь в каркасе только одна поза в кадре 1.

3.      Переместите красный указатель на кадр 1.

4.      Выберите инструмент Selection (Стрелка).

5.      Щелкните по второй кости в каркасе крана.

Кость будет выделена цветом.

6.      На панели Properties (Свойства) выберите опцию Constrain (Ограничение) в разделе Joint: Rotation (Сочленение: Поворот).

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

7.      Установите минимальный угол вращения соединения на 0°, а максимальный угол вращения – на 90°.

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

8.      Щелкните по третьей кости в каркасе крана.

Кость будет отмечена цветом.

9.      На панели Properties выберите опцию Constrain в разделе Joint: Rotation.

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

10.  Установите минимальный угол поворота соединения на -90°, а максимальный угол поворота – на 0°.

Индикатор угла на соединении изменится, отображая допустимые углы. В данном примере третий сегмент крана может лишь подниматься из горизонтального положения в вертикальное. У каждого соединения в каркасе может быть свое ограничение вращения.

Ограничение переноса соединений

Обычно мы не задумываемся о координатах соединений. Однако во Flash CS4 можно позволить соединениям перемещаться лишь по оси x или y, указав ограничения этого движения.

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

1.      Щелкните по первому узлу в каркасе крана.

2.      Отключите опцию Enable (Включить) в разделе Joint: Rotation инспектора свойств.

Окружность вокруг соединения исчезнет, отмечая, что оно больше не сможет вращаться.

3.      3 Выберите опцию Enable (Включить) в разделе Joint: X Translation (Сочленение: преобразование по оси X) на панели Properties.

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

4.      Выберите опцию Constrain в разделе Joint: X Translation на панели Properties.

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

5.      Установите минимальный перенос по X на -50 и максимальный перенос по X – 50.

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

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

7.      Переместите красный указатель на последний кадр.

8.      Перетащите кран и крючок дальше от воды, создав новую позу.

Ограничения на поворот и перенос узлов в позах позволяют добиться реалистичности анимации.

9.      Просмотрите, как будет выглядеть анимация, выбрав Control => Test Movie (Управление => Тестировать ролик).

Изменение скорости соединений

Скоростью соединения обозначатся липкость (устойчивость) соединения. Соедине-

ние с малым значением скорости будет инертным. Соединение с большой скоростью будет действовать быстрее. Значение скорости для любого соединения можно установить на панели Properties (Свойства).

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

Чтобы изменить скорость соединения, щелкните по кости и выделите ее. На панели Properties установите значение Joint Speed (Скорость) от 0 до 200%.

Обратная кинематика с фигурами

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

Определение костей внутри фигуры

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

1.      Откройте файл 05ShapeIK_Start.fla.

В файле содержится иллюстрация осьминога. Одна из рук находится на собственном слое arm1.

2.      Заблокируйте все слои, за исключением слоя arm1, и выберите содержимое слоя arm1.

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

4.      Щелкните по основанию щупальца из слоя arm1 и перетащите первую кость немного вниз, в сторону конца щупальца.

Первая кость определена. Содержимое слоя arm1 будет отделено в слой Pose.

5.      Щелкните по концу первой кости и перетащите следующую кость немного ближе к кончику щупальца.

Вторая кость определена.

6.      Продолжайте создание каркаса из четырех костей.

7.      Когда анимация будет готова, выберите инструмент Selection (Стрелка) и перетащите последнюю кость, чтобы увидеть, что щупальце меняется вслед за изменением костей каркаса.

Редактирование фигуры

Для редактирования фигуры, содержащей кости, не нужно никаких особых инструментов. Для редактирования заливки, линий и контура можно использовать инструменты из панели Tools (Инструменты): Paint Bucket (Цвет заливки), Ink Bottle (Цвет обводки) и Subselection tool (Спецвыделение).

1.      Выберите инструмент Paint Bucket.

2.      Выберите темно-персиковый цвет заливки.

3.      Щелкните по фигуре в слое Pose.

Цвет заливки щупальца изменится.

4.      Выберите инструмент Ink Bottle.

5.      Выберите темно-красный цвет линий.

6.      Щелкните по фигуре в слое Pose.

Цвет контура щупальца изменится.

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

8.      Щелкните по контуру фигуры.

Вокруг контура фигуры появятся узловые точки и маркеры управления.

9.      Перетащите узловые точки в новое место или переместите маркеры, чтобы изменить форму щупальца.

Редактирование костей и каркаса

Инструмент Subselection (Спецвыделение) позволяет перемещать соединения внутри фигуры, а с помощью инструмента Free Transform (Свободное преобразование) можно перемещать и вращать весь каркас.

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

2.      Щелкните по соединению.

3.      Перетащите соединение в фигуре на новое место.

4.      Удерживая клавишу Alt/Option, перетащите всю фигуру в новое место.

Кроме того, можно выбрать инструмент Free Transform и повернуть или переместить весь каркас.

Улучшение изменений фигуры с помощью инструмента Bind

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

Можно отредактировать соединения между костями и их контрольными точками с помощью инструмента Bind (Связывание). Данный инструмент скрыт под инструментом Bone. Инструмент Bind показывает, как связаны управляющие точки и кости, и позволяет

Опции каркаса

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

Каркасы времени создания и времени выполнения

Каркасы времени создания (Authortime armatures) размещаются на временной шкале и проигрываются как анимации. Каркасами времени (Runtime armatures) выполнения называются интерактивные каркасы, которые позволяют пользователю переместить их. Вы можете сделать любой из каркасов – из нескольких роликов, как кран, или в виде фигуры, как щупальце осьминога, – как каркасом времени выполнения, так и каркасом проектирования. Каркасы времени выполнения, однако же, ограничены лишь каркасами с одной позой.

1.      Продолжайте работу с файлом 05ShapeIK_Start.fla.

2.      Выберите слой с каркасом щупальца.

3.      На панели Properties (Свойства) выберите значение Runtime (Временя выполнения) для опции Туре (Тип).

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

4.      Проверьте анимацию, выбрав Control => Test Movie (Управление => Тестировать ролик).

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

Настройка скорости

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

1.      Выберите слой с каркасом щупальца.

2.      На панели Properties уберите пункт Runtime в поле Туре. Каркас снова станет каркасом времени проектирования.

3.      Выделите кадр 40 на всех слоях и выберите Insert => Timeline => Frame (Вставка => Временная шкала => Кадр).

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

4.      Переместите красный указатель на кадр 40.

5.      С помощью инструмента Selection (Стрелка) перетащите конец щупальца вверх и в сторону.

На кадре 40 каркаса щупальца будет вставлена новая поза.

6.      Выберите первую позу на кадре 1.

7.      На панели Properties установите опцию Туре (Тип) на значение Simple (Medium) (Простое (средняя скорость)) в разделе Ease (Замедление). Вариации изменений скорости Simple (Простые) (от Slow – Медленно, до Fastest – Очень быстро) позволяют выбрать степень изменения скорости. Это то же самое, что и кривизна линии в редакторе анимации.

8.      Установите параметр Strength (Сила) на -100.

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

9.      9 Выполните Control => Test Movie (Управление => Тестировать ролик), чтобы просмотреть анимацию.

Щупальце закручивается, и движение плавно замедляется.

10.  Закройте окно Test Movie.

11.  Выберите первую позу на кадре 1.

12.  Измените значение Strength на 100 и еще раз протестируйте значение.

Щупальце заворачивается, но на этот раз движение ускоряется, а затем останавливается.

13.  Закройте окно Test Movie.

14.  Выберите первую позу на кадре 1.

15.  На панели Properties выберите Start and Stop (Medium) (Остановка и запуск (средняя скорость)).

Вариации изменений скорости Stop and Start от Slow (Медленно) до Fastest (Очень быстро) управляют степенью ускорения. У ускорений Stop and Start кривые находятся с двух сторон, поэтому скорость будет меняться и в начале, и в конце движения.

16.  Установите параметр Strength на -100.

17.  Выполните Control => Test Movie (Управление => Тестировать ролик), чтобы просмотреть анимацию в действии.

Щупальце закручивается, и движение сначала плавно начинается, а затем постепенно заканчивается.

Опции просмотра каркаса

Есть различные варианты показа костей и каркаса, в зависимости от того, сколько костей вы хотите одновременно показать поверх рисунка. Выберите каркас на временной шкале. В инспекторе событий присутствуют три варианта поля Style (Стиль):

1.      Wire (Каркас) - показывает лишь контуры костей.

2.      Solid (Сплошная) - закрашивает кости одним цветом.

3.      Line (Линия) – отображает кости как прямые линии.

Изменение форм с помощью анимации форм

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

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

Задание фигур в ключевых кадрах

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

1.      Продолжайте работу над файлом с краном под именем 05_workingcopy.fla.

2.      Заблокируйте все слои, кроме слоя water.

3.      Переместите красный указатель в кадр 27 в слое water.

4.      Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) по кадру 27 в слое water и активируйте опцию Insert Keyframe (Вставить ключевой кадр) или выполните Insert => Timeline => Keyframe (Вставка => Временная шкала => Ключевой кадр) (F6).

В кадр 27 будет вставлен новый ключевой кадр. Содержимое предыдущего ключевого кадра будет скопировано во второй ключевой кадр.

5.      Переместите красный указатель в кадр 56.

6.      Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) по кадру 56 в слое water и выберите Insert Keyframe или выполните Insert => Timeline => Keyframe (F6).

В кадр 56 будет добавлен новый ключевой кадр. В него будет скопировано содержание предыдущего ключевого кадра. Теперь на временной шкале в слое water есть три ключевых кадра: первый – в кадре 1, второй – в кадре 27, а третий – в кадре 56. 7. Переместите красный указатель назад в кадр 27 и скройте верхние

Мы изменим форму воды во втором ключевом кадре.

8.      Выберите инструмент Selection (Выделение).

9.      Перетащите контуры воды, чтобы на месте гребней были уменьшения, и наоборот.

В каждом ключевом кадре на слое water будет содержаться другая фигура.

Применение анимации формы

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

1.      Щелкните по любому кадру между первым и вторым ключевыми кадрами слоя water.

2.      Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) и выберите Create Shape Tween (Создать анимацию формы). Или в верхнем меню выполните Insert => Shape Tween (Вставка => Анимация формы).

Flash применит анимацию формы между двумя ключевыми кадрами, отметив действие черной стрелкой, направленной вперед.

3.      Щелкните по любому кадру между вторым ключевым кадром и последним ключевым кадром в слое water.

4.      Щелкните правой кнопкой мыши (удерживая клавишу Ctrl) и выберите Create Shape Tween. Или выполните Insert => Shape Tween.

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

5.      Просмотрите анимацию, выбрав Control Test Movie (Управление => Тестировать ролик).

Flash создаст плавный переход между ключевыми кадрами в слое water и таким образом получится фигура океанской поверхности.

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

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

Добавление контрольных точек

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

1.      Еще раз скройте верхние слои и выберите первый ключевой кадр анимации формы в слое water.

2.      Выполните Modify => Shape => Add Shape Hint (Модификация => Фигура => Добавить хинт кривой) (Ctrl+Shift+H/Command+Shift+H).

В рабочей области появится буква "а" в красном кружочке. Буква в кружочке обозначает контрольную точку.

3.      Перетащите букву в кружочке на верхний левый угол волны,

Контрольные точки необходимо размещать на контурах фигур.

4.      Еще раз выполните Modify => Shape => Add Shape Hint, чтобы создать вторую контрольную точку.

В рабочей области появится "b" в красном кружочке.

5.      Перетащите контрольную точку "b" из верхней части фигуры океанской волны в точку ее спада.

6.      Добавьте третью контрольную точку.

В рабочей области появится "с" в красном кружочке.

7.      Перетащите контрольную точку "с" в верхний правый угол океанской волны.

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

8.      Выберите следующий ключевой кадр.

На сцене появится соответствующая буква "с" в кружочке, хотя контрольные точки "а" и "b" находятся непосредственно под ней.

9.      Перетащите буквы в кружочках в соответствующие точки фигуры на втором ключевом кадре. Буква "а" окажется в верхнем левом углу, "b" – в месте спада волны, а "с" – в верхнем правом углу.

Контрольные точки станут зелеными. Это значит, что вы их правильно расставили.

10.  Выберите первый ключевой кадр.

Обратите внимание, что начальные точки стали желтыми. Это также подзывает, что вы правильно их расставили.

11.  Выполните Control => Test Movie (Управление => Тестировать ролик), чтобы увидеть, как контрольные точки повлияли на анимацию формы.

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

Удаление контрольных точек

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

-     Перетащите отдельную контрольную точку с рабочей области в компоновочный буфер.

-     Выполните Modify => Shape => Remove All Hints (Изменение => Форма => Удалить все хинты), чтобы удалить все подсказки.

Лабораторная работа № 6 "Создание интерактивной навигации"

2,5 часа

Обзор урока

В данном уроке вы узнаете, как:

-     Создавать кнопки-символы.

-     Добавлять звуковые :эффекты к кнопкам.

-     Дублировать символы.

-     Заменять символы и растровые рисунки.

-     Указывать имя экземпляров кнопок.

-     Создавать нелинейную навигацию с помощью ActionScript.

-     Создавать и использовать метки кадров.

-     Создавать анимированные кнопки.

Скопируйте папку Lesson06 с сетевого диска в свою личную папку, если вы еще этого не сделали.

Пусть посетители вашего сайта смогут действовать самостоятельно. Сочетание кнопок-символов и ActionScript позволяет создать интересные интерактивные моменты.

Знакомство

Вначале посмотрите на страницу с портфолио фотографий, которое , мы создадим при изучении интерактивных возможностей Flash.

1.      Дважды щелкните по файлу 06End.swf в папке Lesson06/06End, чтобы проиграть анимацию.

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

2.      Закройте файл 06End.swf.

3.      Дважды щелкните по файлу 06Start.fla в папке Lesson06/06Start, чтобы открыть исходный проект во Flash. В данном проекте уже есть некоторые материалы в библиотеке и в рабочей области.

4.      Выберите File => Save As (Файл => Сохранить как). Назовите файл 06_workingcopy.fla и сохраните его в папке 06Start. Сохранив работу сразу же, вы сможете в любой момент вернуться к первоначальному варианту.

Об интерактивных роликах

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

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

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

Расположение объектов

Первая задача при создании интерактивного проекта наподобие этого – продумать расположение объектов, размещение кнопок и элементов. Кнопки обычно располагаются в одну полосу, которая называется навигационной полосой или навигационной панелью. Навигационная панель остается неизменной, в то время как область с содержанием меняется. Следует отвести место для заголовка и другой глобальной информации. Данном уроке сцена уже настроена, и в фоновом слое Background уже задан приятный градиент.

Добавление простого элемента дизайна

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

1.      Выберите существующий слой.

2.      Щелкните по кнопке Insert New Layer (Создать слой) и назовите новый слой "navbar".

3.      На панели Tools (Инструменты) выберите инструмент Rectangle (Прямоугольник).

4.      Выберите черную заливку и черный цвет контура.

5.      Нарисуйте прямоугольник, начинающийся в верхнем углу рабочей области.

6.      На панели Properties (Свойства) установите ширину равной 800, высоту – 130, значение X – 0, и значение Y – 0.

7.      Заблокируйте слой navbar, чтобы случайно не переместить его. Над градиентом сверху будет расположена черная полоса.

Добавление заголовка и вводного текста

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

1.      Выберите верхний слой.

2.      Щелкните по кнопке Insert New Layer и назовите новый слой "title".

3.      Выберите инструмент Text (Текст) и вставьте точку ввода текста в верхнем левом углу рабочей области.

4.      Введите "Leon Kritch Photography".

5.      Выделите весь текст. На панели Properties из контекстного меню выберите Static Text (Статический текст), укажите гарнитуру  Arial и кегль в 42 пункта. Щелкните по кнопке Left Align (По левом краю).

6.      Выберите только "Leon Kritch" и измените цвет текста на #FFCC00.

7.      Выделите только "Photography" и измените цвет текста на #333333.

8.      Выберите текст с помощью инструмента Selection (Стрелка). На панели Properties установите X = 30 и Y = 10.

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

9.      Еще раз щелкните по кнопке Insert New Layer и назовите новый слой

10.  "text".

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

12.  Введите текст, как в файле 06End.swf или как показано на рисунке иже. Выделите заголовок выставки курсивом и любым цветом.

13.  Выделите текст инструментом Selection и с помощью панели Align (Выравнивание) (Window => Align) поместите данный текст в середину рабочей области. Перед выравниванием убедитесь, что выбран вариант То Stage (Выровнять или распределить в пределах рабочей области).

14.  Заблокируйте слой с заголовком, чтобы случайно не переместить его.

Создание кнопок

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

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

Создание кнопки-символа

В данном уроке мы создадим кнопки в виде уменьшенных вариантов фотографий. Четыре особых ключевых кадра кнопки включают:

-   ключевой кадр Up (Отпущен) – показывает, как кнопка будет выглядеть, если мышь с ней никак не взаимодействует;

-   ключевой кадр Over (Наведенный) – демонстрирует, как кнопка будет выглядеть при наведении на нее указателям мыши;

-   ключевой кадр Down (Нажатый) – отображает вид кнопки при ее нажатии;

-   ключевой кадр Hit (Щелчок) – определяет, по какой части кнопки можно щелкать.

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

1.      Выполните Insert => New Symbol (Вставка => Создать символ).

2.      В диалоговом окне Create New Symbol (Создать символ) выберите Button (Кнопка) и назовите символ "button1". Щелкните по кнопке ОК.

3.      Вы перейдете в режим редактирования символа с новой кнопкой.

4.      На ключевом кадре Up временной шкалы перетащите маленькое изображение Photo1.bmp из библиотеки в середину рабочей области.

5.      На панели Properties установите X = 0 и Y = 0.

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

6.      Выделите ключевой кадр Hit на временной шкале и выберите Insert => Timeline => Frame (Вставка => Временная шкала => Кадр), чтобы расширить временную шкалу.

Теперь рисунок павлина находится в ключевых кадрах Up, Over, Down и Hit.

7.      Вставьте новый слой.

8.      Выберите ключевой кадр Over и выполните Insert => Timeline => Keyframe (Вставка => Временная шкала => Ключевой кадр).

В кадр Over в верхнем слое будет вставлен новый ключевой кадр.

9.      Перетащите символ фрагмента ролика с желтой линией из библиотеки в рабочую область.

10.  На панели Properties установите X = 0 и Y = -7.

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

11.  Выделите ключевой кадр Down и выберите Insert => Timeline => Keyframe.

12.  Выделите желтую горизонтальную линию и в Property Inspector (Инспектор свойств) расширьте раздел Color Effect (Цветовой эффект).

13.  Выберите Brightness (Яркость) из меню Style (Стиль) и измените значение яркости на 100%.

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

14.  Вставьте третий слой.

15.  Выделите ключевой кадр Down на новым слое и выберите Insert => Timeline => Keyframe.

16.  Перетащите звуковой файл Camera_shutter.wav из библиотеки в рабочую область.

17.  Выберите ключевой кадр Down в месте появления звука. На панели Properties убедитесь, что значением Sync (Синхронизация) является Event (Событие).

18.  Выберите ключевой кадр Hit и выполните Insert => Timeline => Blank Keyframe (Вставка => Временная шкала => Пустой ключевой кадр).

При щелчке по кнопке пользователь услышит звук затвора фотоаппарата.

19.  Щелкните по строке Scene 1 над рабочей областью, чтобы выйти из режима редактирования символов и вернуться к основной временной шкале. Ваша первая кнопкасимвол готова! Посмотрите на нее в библиотеке, где она должен появиться.

Невидимые кнопки и ключевой кадр Hit

Ключевой кадр Hit (Щелчок) символа означает, что по области можно щелкнуть. Обычно в ключевом кадре Hit содержится всего один кадр, который по размерам и положению совпадает с размерами ключевого кадра Up (Отпущен). В большинстве случаев желательно, чтобы пользователи видели одну и ту же область, по которой они могут щелкнуть. Однако в некоторых более сложных приложениях ключевые кадры Hit и Up могут отличаться. Если ключевой кадр Up пуст, кнопка будет невидимой.

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

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

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

1.      На панели Library (Библиотека) щелкните правой кнопкой мыши (удерживая клавишу Ctrl) по символу button1.

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

2.      В диалоговом окне Duplicate Symbol (Дублировать символ) выберите Button и назовите кнопку "button2". Щелкните по кнопке ОК.

Замена рисунков

Рисунки и символы в рабочей области очень просто заменить, и это значительно ускоряет работу.

1.      На панели Library дважды щелкните по значку кнопки button2, чтобы отредактировать ее.

2.      Выберите уменьшенный рисунок павлина.

3.      На панели Properties активируйте опцию Swap (Замена).

4.      В диалоговом окне Swap Bitmap (Заменить растровое изображение) выберите следующую уменьшенную фотографию, которая называется Photo2.bmp, и щелкните по кнопке ОК.

5.      Первоначальный уменьшенный вариант фотографии будет заменен выбранным. Так как обе фотографии имеют один размер, замена пройдет без проблем.

6.      Щелкните по строке Scene 1, чтобы вернуться к основной временной

7.      шкале.

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

Расстановка экземпляров кнопок

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

1.      Вставьте новый слой и назовите его "buttons".

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

3.      Выберите первую кнопку и на панели Properties установите X = 35.

4.      Выберите последнюю кнопку и на панели Properties установит X = 664.

5.      Выделите все шесть кнопок. На панели Align (Выравнивание) (Window => Align), отмените вариант То Stage (В рабочую область), щелкните по кнопке Space Evenly Horizontally (Расположить с равными промежутками по горизонтали), а затем – по кнопке Align Тор Edge (Выровнять верхнюю границу).

Все шесть кнопок ровно расставлены.

6.      Не снимая выделения со всех кнопок, установите в Property Inspector (Инспектор свойств) 72 в качестве значения Y.

Теперь все шесть кнопок выровнены горизонтально.

7.      Протестируйте ролик, чтобы посмотреть, что происходит с созданными кнопками. Выберите Control => Test Movie (Управление => Тестировать ролик). Наведите указатель мыши на каждую кнопку и попробуйте щелкнуть по ней, чтобы понять, когда появляются ключевые кадры Over (Наведенный) и Down (Нажатый) для каждой кнопки. В данный момент мы еще не ввели никаких команд о том, что следует делать при щелчке по кнопке. Для этого следует вначале назвать кнопки и узнать немного об ActionScript.

Именование экземпляров кнопок

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

1.      Выберите первую кнопку в рабочей области.

2.      Введите "btn1_btn" в поле Instance Name (Имя экземпляра) на панели Properties.

3.      Назовите остальные кнопки btn2_btn, btn3_btn, btn4_btn, btn5_btn и btn6_btn соответственно.

4.      Заблокируйте все слои.

ActionScript 3.0

В Adobe Flash CS4 используется ActionScript 3.0, удобный язык сценариев, который расширяет функциональность Flash. Хотя новичков в написании сценариев ActionScript 3.0 может напугать, но для достижения отличных результатов часто достаточно очень простых сценариев. Как и в случае с любым языком, лучше всего учить синтаксис и терминологию утром.

Об ActionScript

ActionScript, похожий на JavaScript, позволяет добавить интерактивность в анимации Flash. В данном уроке с помощью ActionScript мы определим поведение кнопок, а также научимся с помощью ActionScript выполнять такие простые задачи, как остановка анимации.

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

Этот урок не сделает вас экспертом по ActionScript. В нем будут представлены основные понятия и синтаксис, рассмотрен простой сценарий и будет дано общее введение в язык ActionScript.

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

Терминология сценариев

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

Переменная

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

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

Ключевое слово

В ActionScript ключевое слово – это зарезервированное слово, которое используется для выполнения определенной задачи. Например, ключевое слово var применяется для создания переменной.

Полный список ключевых слов можно найти в Справке Flash. Так как это резервированные слова, их нельзя использовать как имена переменных для еще каким-либо способом. В ActionScript они всегда применяются выполнения определенных задач.

Параметры

Параметры сообщают подробности определенной команды. Это значения в скобках () в коде. Например, в коде gotoAndPlay(3); параметр сообщает перейти к кадру 3.

Функции

Функции – это наборы команд, к которым можно обращаться по имени. С помощью функции можно вызывать одни и те же команды несколько раз, не набирая их повторно.

Объекты

В ActionScript 3.0 вы работаете с объектами – абстрактными типами данных, которые помогают выполнять определенные задачи. Например, объект Sound помогает управлять звуком, а объект Date – манипулировать данными, связанными с датой и временем. Кнопки-символы, которые вы сделали в этой главе, – тоже объекты. Это объекты Button.

У каждого объекта должно быть свое имя. К объекту, у которого есть имя можно обращаться через ActionScript и управлять им. Кнопки в рабочей области называются экземплярами.

Методы

Методы – это ключевые слова, которые производят действия. Методы в ActionScript выполняют действия, и у каждого типа объектов есть свой набор методов. При изучении ActionScript много времени тратится как раз на изучение методов каждого вида объектов. Например, с объектом MovieClip ассоциированы методы stop() и gotoAndPlay().

Свойства

Свойства описывают объект. Например, свойствами ролика являются ширина, высота, координаты x и у и масштаб. Многие свойства можно изменить, но некоторые доступны только "для чтения", то есть они лишь описывают объект.

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

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

-     Точка с запятой в конце строки сообщает ActionScript, что строка закончилась, и начинается новая строка кода.

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

-     Оператор точка (.) позволяет обращаться к свойствам и методам объекта. Сначала вводится имя экземпляра, затем точка, а затем название свойства или метода. Точку можно считать способом разделения объектов, методов и свойств.

-     При вводе строки или имени файла используйте кавычки.

-     Вы можете добавить комментарии (которые ActionScript будет игнорировать), чтобы напомнить себе и другим, что делает та или иная часть кода. Чтобы добавить однострочный комментарий, начинайте его с двух косых черт (//). Многострочные комментарии начинаются с /* и заканчиваются */.

Flash помогает писать сценарии на панели Actions (Действия) следующим образом.

-     Слова, у которых есть определенное значение в ActionScript, то есть ключевые слова и выражения, выделяются при вводе на панели Actions синим цветом. Слова, которые не зарезервированы в ActionScript, например имена переменных, выделяются черным. Строки выделяются зеленым. Комментарии, которые ActionScript игнорирует, выводятся серым.

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

-     Чтобы проверить синтаксис сценария во время написания, щелкните по кнопке AutoFormat (Автоформат) (которая также отформатирует сценарий по соглашениям, облегчающим его чтение) или по кнопке Check Syntax (Проверить синтаксис). Синтаксические ошибки будут перечислены на панели Compiler Errors (Ошибки компилятора).

Перемещение по панели Actions

Панель Actions (Действия) – место, где пишется весь код. Чтобы открыть панель Actions, выберите Window => Actions (Окно => Действия) или выделите ключевой кадр на временной шкале и щелкните по кнопке Actons в верхней правой части панели Properties (Свойства). Также можно щелкнуть правой кнопкой мыши (удерживая клавишу Ctrl) по любому ключевом кадру и выбрать Actions из контекстного меню.

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

Панель Actions разделена на несколько частей. В верхнем левом углу находится панель инструментов Actions toolbox (Набор действий). На данной панели перечислены категории, по которым организуется весь код ActionScript. Вверху панели инструментов располагается раскрывающееся меню, которое отображает только код для выбранной версии ActionScript. Вам следует выбрать ActionScript 3.0, самую новую версию. В самом низу панели инструментов находится категория Index (Указатель), в которой в алфавитном порядке перечислены все элементы языка. Вам не обязательно использовать набор действий для добавления кода в свой сценарий, но он может помочь в написании правильного кода.

В верхней правой части панели Actions находится панель Script (Сценарий) – пустое поле, в котором вы будете набирать текст. ActionScript вводится на панели Script так же, как в любом текстовом редакторе.

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

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

Добавление действия по остановке

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

1.      Вставьте новый слой и назовите его "actions".

2.      Выделите первый ключевой кадр слоя actions и откройте панель Actions (Window => Actions).

3.      На панели Script введите stop();

Код появится на панели Script, а в первом ключевом кадре слоя actions отобразится маленькая буква "а", означающая, что данный кадр содержит определенный код на ActionScript. Теперь ролик будет останавливаться на кадре 1.

Помощник по сценариям Script Assist

Некоторые действия просты, например действие по остановке. Но для других нужны параметры, и если вы не знакомы с ActionScript, вам, возможно будет трудно выучить настройки, необходимые для того или иного действия. Режим Script Assist (Помощник) спрашивает у вас, какие методы параметры или переменные связаны с действием, а затем собирает информацию, используя нужный синтаксис.

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

Чтобы использовать Script Assist, щелкните по одноименной кнопке на панели Actions.

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

Создание обработчиков событий для кнопок

События – это происшествия в среде Flash, которые приложение может определить и на которые может ответить. Например, событием является щелчок мыши, перемещение мыши и нажатие клавиши на клавиатуре. Эти события производит пользователь, но некоторые события происходят независимо от пользователей, например успешная загрузка данных или конец воспроизведения звука. ActionScript позволяет писать код, который определяет события и в ответ вызывает обработчик.

Первый шаг в обработчике событий – создать слушателя, который будет определять событие. Слушатель может выглядеть примерно так:

wheretolisten.addEventListener(whatevent, responsetoevent);

Командой здесь является addEventListener(). Остальные слова – места для подстановки объектов и параметров, соответствующих конкретной ситуации. Wheretolisten – это объект, в котором происходит событие (обычно кнопка), whatevent – определенный вид события пример, щелчок мыши), a responsetoevent – функция, которая вызывается в случае этого события. Итак, если вы хотите при щелчке мыши по кнопке btnl_btn вызвать событие showimage1, код будет выглядеть примерно так:

btn1_btn.addEventListener(MouseEvent.CLICK, showimage1);

Следующий шаг – создание функции с ответом на событие ( showimage1). Функция – это просто набор действий, к которому можно обращаться по имени. Функция выглядит примерно так:

function showimage1(myEvent:MouseEvent){ };

Имена функций, как и имена кнопок, могут быть любыми. Главное, чтобы имя функции несло какой-то смысл. В данном случае функция называется showimage1. Она получает один параметр (внутри скобок) под названием myEvent, то есть событие, связанное с мышью. После двоеточия описывается тип объекта. Если функция будет выполнена, выполнятся все действия между фигурными скобками.

Добавление обработчика событий Event Listener и функции

Мы добавим код ActionScript для просмотра щелчков по каждой кнопке. В ответ Flash будет переходить к определенному кадру на временной шкале, чтобы показать другое содержание.

1.      Выберите первый кадр на слое actions.

2.      Откройте панель Actions.

3.      В разделе Script на панели Actions, начиная со второй строки, введите btn1_btn.addEventListener(MouseEvent.CLICK, showimage1);

Слушатель будет прослушивать щелчки по объекту btn1_btn в сцене, вызывая функцию showimage1.

4.      На следующей строке в панели Script введите:

function showimage1(event:MouseEvent):void {  gotoAndStop(10);

}

В функции showimage1 содержится команда перехода на кадр 10 и остановки на нем. Код для кнопки btn1_btn готов.

5.      На следующей строке панели Script введите код для остальных пяти кнопок. Можно скопировать строки 2 и 3 и просто изменить название кнопок, функций (в двух местах) и конечный кадр. Полный сценарий будет выглядеть так: stop (); btn1_btn.addEventListener(MouseEvent.CLICK, showimage1); function showimage1(event:MouseEvent):void {  gotoAndStop(10);

} btn2_btn.addEventListener(MouseEvent.CLICK, showimage2); function showimage2(event:MouseEvent):void {  gotoAndStop(20);

} btn3_btn.addEventListener(MouseEvent.CLICK, showimage3); function showimage3(event:MouseEvent):void {  gotoAndStop(30);

} btn4_btn.addEventListener(MouseEvent.CLICK, showimage4); function showimage4(event:MouseEvent):void {  gotoAndStop(40);

} btn5_btn.addEventListener(MouseEvent.CLICK, showimage5); function showimage5(event:MouseEvent):void {  gotoAndStop(50);

} btn6_btn.addEventListener(MouseEvent.CLICK, showimage6); function showimage6(event:MouseEvent):void { gotoAndStop(60);

}

События мыши

В следующем списке перечислены коды ActionScript для часто используемых событий мыши. С помощью этих кодов можно создать слушателя; обращайте внимание на строчные и прописные буквы. Для большинства пользователей во всех проектах хватит первого события (MouseEvent. CLICK). Это событие происходит при щелчке по кнопке.

-   MouseEvent.CLICK

-   MouseEvent. DOUBLE_CLICK

-   MouseEvent. MOUSE_MOVE

-   MouseEvent. MOUSE_DOWN

-   MouseEvent. MOUSE_UP

-   MouseEvent. MOUSE_OVER

-   MouseEvent. MOUSE_OUT

Команды ActionScript для навигации

Ниже приведен список часто используемых команд ActionScript для навигации. С помощью этих команд можно создавать кнопки, останавливающие проигрывание ролика, запускающие его и переводящие на определенный кадр. Для команд gotoAndStop и gotoAndPlay необходимо задавать дополнительную информацию, что указано в скобках после них.

-   stop();

-   play();

-   gotoAndStop(framenumber or framelabel);

-   gotoAndPlay(framenumber or framelabel);

-   nextFrame();

-   prevFrame();

Проверка синтаксиса и форматирование кода

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

1.      Выберите первый кадр на слое actions и откройте панель Actions если она еще не открыта.

2.      Щелкните по кнопке Check Syntax (Проверка синтаксиса) вверху панели Actions.

Flash проверит синтаксис кода на ActionScript и сообщит вам, если ли в коде ошибки.

3.      Щелкните по значку Auto Format (Автоформат) вверху панели Actions.

Flash отформатирует код в соответствии со стандартами расстановки отступов и переводов строк.

Создание целевых кадров

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

Вставка ключевых кадров с различным содержанием

Мы создадим шесть ключевых кадров в новом слое и разместим различные фотографии в каждом из ключевых кадров.

1.      Вставьте новый слой непосредственно под слоем actions и назовите его "images".

2.      Выберите кадр 10 на слое images.

3.      Вставьте новый ключевой кадр в кадр 10 (Insert => Timeline => Keyframe, F6).

4.      Вставьте новые ключевые кадры в кадры 20, 30, 40, 50 и 60. Теперь в слое images на временной шкале семь пустых ключевых кадров.

5.      Выберите ключевой кадр в кадре 10.

6.      Перетащите изображение Photo1.jpg из библиотеки в рабочую область. Photo1.jpg – это большая фотография павлина.

7.      В инспекторе свойств установите X = 35, a Y = 138.

Теперь в ключевом кадре на кадре 10 содержится большая фотография павлина.

8.      Выберите ключевой кадр на кадре 20.

9.      Перетащите растровый рисунок Photo2.jpg из библиотеки в рабочую область.

10.  На панели Properties (Свойства) установите X = 35 и Y = 138.

Теперь в кадре 20 находится крупная фотография головы павлина.

11.  Разместите все крупные изображения из библиотеки в соответствующих ключевых кадрах слоя images.

На каждом ключевом кадре должен содержаться снимок из портфолио фотографа.

12.  Выберите Control => Test Movie (Управление => Тестировать ролик) и щелкните по любой кнопке.

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

Использование меток для ключевых кадров

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

Простой способ избежать такой проблемы – использовать метки кадров вместо фиксированных номеров. Метки кадров – это имена, которые вы присваиваете ключевым кадрам. Вместо того чтобы обращаться к кадр по номеру, вы будете обращаться к ним по метке. Итак, если вы переместите конечные ключевые кадры, их метки останутся такими же. Чтобы обращаться к меткам кадров в ActionScript, их необходимо заключить в кавычки. Команда gotoAndStop("label1") заставит перейти к ключевому кадру с меткой label1.

1.      Выберите кадр 10 на слое images.

2.      На панели Properties введите "label1" в поле Name (Имя) раздела Label (Надпись).

Рядом с ключевыми кадрами, у которых есть метка, появится крохотный флаг.

3.      Выберите кадр 20 на слое images.

4.      На панели Properties введите "Label2" в поле Name раздела Label.

5.      Выберите кадры 30, 40, 50 и 60 и на панели Properties введите соответствующие названия в поле Name раздела Label: label3, label4, label5 и label6.

Рядом с ключевыми кадрами, у которых есть метка, появятся крохотные флажки.

6.      Выберите первый кадр на слое actions и откройте панель Actions.

7.      В коде ActionScript измените все фиксированные номера кадров в каждой команде gotoAndStop() на соответствующие метки кадров:

-   gotoAndStop(10); – на gotoAndStop("label1")

-   gotoAndStop(20); – на gotoAndStop("label2")

-   gotoAndStop(30); – на gotoAndStop("label3")

-   gotoAndStop(40); – на gotoAndStop("label4")

-   gotoAndStop(50); – на gotoAndStop("label5")

-   gotoAndStop(60); – на gotoAndStop("label6")

Теперь код ActionScript будет определять конечный кадр перехода по метке кадра, а не по номеру.

8.      Протестируйте ролик, выполнив Control => Test Movie (Управление => Тестировать ролик).

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

Проигрывание анимации

В данный момент в интерактивном портфолио для отображения рисунков в других ключевых кадрах на временной шкале используется команда gotoAndStop(). Но как проиграть анимацию при щелчке по кнопке? Конечно, использовать команду gotoAndPlay(), которая перейдет на указанный кадр и начнет проигрывание с этой точки.

Создание анимации перехода

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

1.      Переместите указатель на кадр с меткой label1.

2.      Щелкните правой кнопкой мыши, удерживая при этом клавишу Ctrl, по фотографии в рабочей области и выберите Create Motion Tween (Создать анимацию движения).

Flash предложит преобразовать фотографию в символ, чтобы создать переход. Щелкните по кнопке ОК.

3.      На панели Properties выберите Brightness (Яркость) из контекстного меню Style (Стиль) в разделе Color Effect (Цветовой эффект).

4.      Установите ползунок Bright (Яркость) на 100%.

Экземпляр в рабочей области станет белым.

5.      Переместите указатель на конец анимации в кадре 19.

6.      Выберите ярко-белый экземпляр в рабочей области.

7.      В инспекторе свойств установите ползунок Bright на значение 0%.

Экземпляр будет отображаться на нормальном уровне яркости. Плавное движение от кадра 10 до кадра 19 начнется ярко-белым снимком, а затем придет к нормальному.

8.      Создайте такие же переходы для оставшихся фотографий в ключевых кадрах с метками label2, label3, label4, label5 и label6.

Примечание. Помните, что на панели Motion Presets (Наборы настроек движения) можно сохранить анимацию движения и применить ее к другим объектам, чтобы уменьшить работу и время. Выберите первую анимацию на временной шкале и щелкните по кнопке Save selection as preset (Сохранить заданные настройки выделенной области).

Использование команды gotoAndPlay

Команда gotoAndPlay заставляет Flash перейти на определенный кадр временной шкалы и начать проигрывание с этой точки.

1.      Выберите первый кадр на слое actions и откройте панель Actions.

2.      Измените в коде ActionScript все команды gotoAndStop() на gotoAndPlay(). Оставьте параметры такими же:

-   gotoAndStop("label1"); – на gotoAndPlay("label1");

-   gotoAndStop("label2"); – на gotoAndPlay("label2");

-   gotoAndStop("label3"); – на gotoAndPlay("label3");

-   gotoAndStop("label4"); – на gotoAndPlay("label4");

-   gotoAndStop("label5"); – на gotoAndPlay("label5");

-   gotoAndStop("label6"); – на gotoAndPlay("label6");

Код ActionScript будет вызывать переход на определенный кадр и начинать проигрывать анимацию с этой точки.

Примечание. Простой и быстрый способ заменить сразу несколько вещей – использовать команду Find and Replace (Найти) на панели Actions. В меню опций в верхнем правом углу экрана выберите Find and Replace. В поле Find (Объект поиска) введите "gotoAndStop", а в поле Replace (Заменить) - "gotoAndPlay". щелкните по кнопке Replace All (Заменить все), и Flash произведет се нужные замены в коде.

Остановка анимации

Если вы сейчас протестируете свой ролик (Control => Test Movie – Управление => Тестировать ролик), то увидите, что кнопка переходит к нужному кадру, и анимация начинается с этой точки, но не заканчивается, а продолжается, пока не будет показана вся анимация на временной шкале. Теперь нужно указать, где Flash должен остановиться.

1.      Выберите кадр 19 слоя actions, непосредственно перед ключевым кадром labeI2 на слое image.

2.      Щелкните правой кнопкой мыши, удерживая при этом клавишу Ctrl, и выберите пункт Insert Keyframe (Вставить ключевой кадр).

В кадр 19 слоя actions будет вставлен новый ключевой кадр.

3.      Откройте панель Actions.

Панель Script на панели Actions пуста. Не паникуйте! Ваш код никуда пропал. Код для настройки слушателей находится в первом ключевом кадре слоя actions. Вы выбрали другой ключевой кадр, в который мы добавим команду остановки.

4.      На панели Script введите stop();

Flash остановит анимацию при достижении кадра 19.

5.      Вставьте ключевые кадры в кадрах 29, 39, 49, 59 и 69.

6.      В каждом из этих ключевых кадров добавьте команду остановки на панели Actions.

7.      Протестируйте ролик, выбрав Control => Test Movie (Управление => Тестировать ролик).

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

Анимированные кнопки

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

Подскажем ключ к созданию анимированной кнопки: анимация создается внутри символа фрагмента ролика, а затем этот символ размещаете ключевых кадрах Up, Over или Down кнопки-символа. При отображении ключевых кадров будет проиграна анимация символа фрагмента ролика.

Создание анимации в символе фрагмента ролика

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

1.      Дважды щелкните по символу фрагменту ролика с желтой линией в библиотеке.

Flash перейдет в режим редактирования символа и откроет символ с желтой линией.

2.      Щелкните правой кнопкой мыши, удерживая при этом клавишу Ctrl, по желтой прямоугольной фигуре в рабочей области и выберите Create Motion Tween (Создать анимацию движения).

3.      В открывшемся диалоговом окне с предложением преобразовать выделение в символ щелкните по кнопке ОК.

Flash создаст слой анимации с кадрами длиной в одну секунду на временной шкале символа.

4.      Выберите инструмент Free Transform (Свободное преобразование) 5. Щелкните по желтому прямоугольнику в рабочей области на сцене.

6.      Перетащите маркеры управления, чтобы уменьшить ширину примерно до 10 пикселей.

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

7.      Выйдите из режима редактирования символа, щелкнув по кнопке Scene 1 над рабочей областью.

8.      Выберите Control => Test Movie (Управление => Тестировать ролик).

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

Лабораторная работа № 7 "Работа со звуком и видео"

2 часа

Обзор урока

В данном уроке вы узнаете, как:

-     Импортировать звуковые файлы.

-     Редактировать звуковые файлы.

-     Использовать кодировщик Adobe Media Encoder.

-     Понимать опции кодирования видео и аудио.

-     Проигрывать внешнее видео из вашего проекта Flash.

-     Настаивать опции компонента проигрывания.

-     Работать с видео, содержащим альфа-каналы.

-     Вставлять видео в ваш проект Flash.

Скопируйте папку Lesson07 с сетевого диска в свою личную папку, если вы еще этого не сделали.

Звук и видео добавляют в ваши проекты новое измерение. Импортируйте звуковые файлы и редактируйте им прямо во Flash, а также используйте Adobe Media Encoder для сжатия и преобразования видеофайлов во Flash.

Знакомство

Начните урок с просмотра законченного анимированного терминала. Мы создадим меню терминала, добавив в проект звуковые и видеофайлы.

1.      Выполните двойной щелчок по файлу 07End.swf в папке Lesson07/07End, чтобы проиграть анимацию.

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

2.      Щелкните по кнопке звука, чтобы услышать звук животного.

3.      Щелкните по кнопке с миниатюрой, чтобы просмотреть короткий фильм о животном.

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

Мы также научимся вставлять звуки в каждую кнопку. Вы будете использовать Adobe Media Encoder для сжатия и преобразования видеофайлов в соответствующий формат и их использования во Flash, а также работать с прозрачным фоном в видео для создания сюжета с силуэтом директора зоопарка.

1.      Выполните двойной щелчок по файлу 07Start.fla из папки Lesson07/07Start, чтобы открыть исходный файл проекта in Flash.

2.      Выберите File => Save As (Файл => Сохранить как). Назовите файл 07_workingcopy.fla, и сохраните его в папке 07Start. Сохранение рабочей копии обеспечивает наличие оригинального исходного файла на случай, если вы захотите начать сначала.

Файл проекта

Мы выполнили начальную компоновку проекта, за исключением аудио- и видечастей. Сцена имеет размер 1000x700 пикселей. Кнопки с изображениями красочных животных находятся в нижнем ряду, другой ряд кнопок располагается справа, заголовок – сверху, а в качестве фона используется изображение отдыхающего льва.

Временная шкала содержит несколько слоев, которые разделяют содержимое.

Три нижних слоя background photo (фоновое фото), title (заголовок) и bottom navbar (нижняя панель навигации) содержат элементы дизайна, текст и изображения. Следующие слои buttons (кнопки) и sound buttons (звуковые кнопки) включают экземпляры символов кнопок. Слой content (содержимое) содержит несколько отмеченных ключевых кадров, а слой actions (действия) – ActionScript, который предоставляет обработчики событий для нижнего ряда кнопок.

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

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

Во Flash можно импортировать несколько типов звуковых файлов. Flash поддерживает файлы МРЗ, WAV и AIFF – три самых распространенных звуковых формата. При импорте звуковых файлов во Flash они сохраняются в библиотеке. Затем эти файлы можно перетащить в рабочую область в разных точках временной шкалы для синхронизации.

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

Мы импортируем несколько звуковых файлов в библиотеку, чтобы использовать их в этом уроке.

1.      Выполните File => Import => Import То Library (Файл => Импорт => Импортировать в библиотеку).

2.      Выберите файл Monkey.wav в папке Lesson07/07Start/Sounds и щелкните по кнопке Open (Открыть, Windows) или Import То Library (Импортировать в библиотеку, Mac

OS).

Файл Monkey.wav появится в библиотеке. Звуковой файл обозначается специальной пиктограммой, а окно предварительного просмотра отображает звуковую волну – серию вершин и впадин, которая изображает звук.

3.      Щелкните по кнопке Play (Воспроизведение) в верхнем правом углу окна предварительного просмотра библиотеки.

Будет проигран звук.

4.      Выполните двойной щелчок по пиктограмме звука перед файлом Monkey.wav.

Откроется диалоговое окно Sound Properties (Свойства звука), предоставляющее информацию о звуковом файле, включая его оригинальное местоположение, размер и другие технические свойства.

5.      Вновь выполните команду File => Import => Import То Library и выберите другие звуковые файлы для импорта в проект Flash. Импортируйте Elephant.wav, Lion.wav, Africanbeat.mpЗ и Afrolatinbeat.mp3.

Все эти файлы должны находиться в вашей библиотеке.

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

Где искать звуковые файлы

Если вы ищете интересные звуки для использования в фильме Flash, можете использовать бесплатные звуковые файлы, доступные в Adobe. Flash CS4 поставляется с десятками полезных звуков, которые доступны через Window => Common Libraries => Sounds (Окно => Общие библиотеки => Звуки). При выполнении данной команды открывается внешняя библиотека (библиотека, не подключенная к текущему проекту).

Просто перетащите один из звуковых файлов из внешней библиотеки на свою сцену. Звук появится в вашей собственной библиотеке.

Размещение звуков на временной шкале

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

1.      Выберите слой содержимого на временной шкале.

2.      Вставьте новый слой и назовите его "sounds" (звуки).

3.      Выберите первый ключевой звук слоя sounds.

4.      Перетащите файл Afrolatinbeat.mp3 из папки звуков в библиотеке в рабочую область.

На временной шкале появится волновая форма звука.

5.      Выберите первый ключевой кадр на слое sounds. панели Properties (Свойства) обратите внимание, что ваш звуковой файл теперь

указан в контекстном меню под разделом Sound (звук).

6.      Выберите вариант Stream (Поток) в качестве опции Sync (Синхронизация).

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

7.      Перемещайте указатель вперед-назад на временной шкале. При этом будет проигрываться звук.

8.      Выполните Control => Test Movie (Управление => Тестировать ролик).

Звук проигрывается только в течение короткого отрезка времени, а потом обрывается. Поскольку звук задан как Stream, он воспроизводится только когда движется вдоль временной шкалы. В кадре 9 указатель останавливается, и поэтому останавливается звук.

Добавление кадров во временную шкалу

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

1.      Щелкните в рабочей области, чтобы отменить выделение временной шкалы, а затем поместите указатель между кадрами 1 и 9, щелкнув по номерам кадров сверху.

2.      Выполните Insert => Timeline => Frame (Вставка => Временная шкала => Кадр) или нажмите F5, чтобы вставить кадры во все слои между кадрами 1 и 9.

3.      Вставьте достаточно кадров, чтобы вся временная шкала растянулась до кадра 80.

4.      Выполните Control => Test Movie (Управление => Тестировать ролик).

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

Обрезка окончания звука

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

1.      Выберите первый ключевой кадр слоя sounds.

2.      На панели Properties щелкните по кнопке Edit (Правка).

Откроется диалоговое окно Edit Envelope (Изменить огибающую), отображающее волновую форму. Верхняя и нижняя волновые формы являются левым и правым каналами звука (стерео). Временная шкала находится между волновыми формами, контекстное меню предварительных установок находится в левом углу, а опции просмотра – внизу.

3.      В диалоговом окне Edit Envelope щелкните по пиктограмме Seconds (Секунды). На временной шкале изменятся единицы измерения – вместо кадров появятся секунды. Можете щелкнуть по пиктограмме frames (Кадры), чтобы вернуться к предыдущим единицам.

4.      Щелкайте по пиктограмме Zoom Out (Уменьшить масштаб), пока не увидите волновую форму целиком. Волновая форма оканчивается примерно на 120 кадрах или около 10 с.

5.      Перетащите правый край ползунка кадров к кадру 40.

Звук станет короче, поскольку он обрезан в конце. Теперь звук проигрывается всего около 40 кадров.

6.      Щелкните по кнопке ОК, чтобы принять выполненные изменения

Волновая форма на основной временной шкале отображает укороченный звук.

Изменение громкости звука

Звук более элегантен, если он медленно затухает, а не внезапно обрывается. Уровень громкости во времени можно изменить в диалоговом окне Edit Envelope.

1.      Выберите первый ключевой кадр слоя sounds.

2.      На панели Properties щелкните по кнопке Edit.

Откроется диалоговое окно Edit Envelope.

3.      Выберите опцию просмотра Frames (Кадры) и увеличьте волновую форму, чтобы увидеть ее конец в районе кадра 40.

4.      Щелкните по верхней горизонтальной линии волновой формы над кадром 35.

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

5.      Щелкните по верхней горизонтальной линии волновой формы над кадром 40 и перетяните ее вниз окна. Направленная вниз диагональная линия обозначает падение громкости с 100 до 0%.

6.      Щелкните по соответствующему ключевому кадру на нижней волновой форме и перетяните его вниз окна.

Уровни громкости для правого и левого канала медленно понизятся начиная с кадра 35. К кадру 40 уровень громкости станет равным 0%.

7.      Проверьте результат редактирования звука, щелкнув по кнопке Play (Воспроизвести) в левой нижней части диалогового окна. Щелкните по кнопке ОК, чтобы принять изменения.

Удаление и изменение звукового файла

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

1.      Выберите первый ключевой кадр слоя sounds.

2.      На панели Properties выберите None (Нет) в контекстном меню Name (Имя).

Звук будет удален из временной шкалы.

3.      В разделе Name выберите Africanbeat.mp3.

Звук Africanbeat.mp3 теперь добавлен во временную шкалу.

Увеличение качества звуков

В настройках нового проекта Flash по умолчанию используется довольно высокая компрессия для звуков, что приводит к некачественному аудио. Лучше увеличить качество экспорта звука через опции Publish Settings (Параметры публикации).

1.      Выберите File => Publish Settings (Файл => Параметры публикации).

Откроется диалоговое окно Publish Settings.

2.      Щелкните по вкладке Flash, а затем по кнопке Set (Задать) для опций Audio Stream (Аудиопоток).

Откроется диалоговое окно Sound Settings (Параметры звука).

3.      Увеличьте скорость передачи данных до 48 Кбит/с.

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

4.      Отмените выделение опции Convert stereo to mono (Преобразовать стерео в моно).

Стереозвуки будут сохранены. В частности, файл Africanbeat.mp3 зависит от стереоэффектов, так что сохранение как левого, так и правого канала имеет значение. Щелкните по кнопке ОК для принятия настроек.

5.      Щелкните по кнопке Set для опций Audio Event (Аудиособытие).

Откроется диалоговое окно Sound Settings.

6.      Увеличьте скорость передачи данных до 48 Кбит/с и отмените опцию Convert stereo to mono. Щелкните по кнопке OK для подтверждения настроек.

Как Audio Stream, так и Audio Event должны иметь настройки 48 Кбит/с и Stereo (Стерео).

7.      Выберите опцию Override sound settings (Переопределить параметры звука).

Настройки звука в Publish Settings будут определять, как экспортируются все ваши звуки.

8.      Выполните Control => Test Movie (Управление => Тестировать ролик) Качество звука в экспортированном файле SWF значительно увеличится

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

На терминале кнопки расположены столбиком справа. Мы добавим к ним звуки так, чтобы они проигрывались при нажатии клавиш пользователем.

1.      В библиотеке выполните двойной щелчок по пиктограмме кнопки под названием "sound_button1". Вы войдете в режим редактирования символа этой кнопки.

2.      В символе кнопки три слоя, которые помогают упорядочить содержимое ключевых кадров Up (Отпущенный), Over (Наведенный), Down (Нажатый) и Hit (Щелчок).

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

4.      Выберите кадр Down в слое sounds и вставьте ключевой кадр.

Появится новый ключевой кадр кнопки в состоянии Down.

5.      Перетащите файл Monkey.wav из папки звуков в библиотеке на сцену.

Волновая форма для файла Monkey.wav file отобразится в ключевом кадре Down слоя sounds.

6.      Выберите ключевой кадр Down в слое sounds.

7.      На панели Properties укажите Start (Начать) в качестве опции Sync (Синхронизация).

Опция синхронизации Start запускает звук, когда указатель попадает на конкретный ключевой кадр.

8.      Выполните Control => Test Movie (Управление => Тестировать ролик). Протестируйте первую кнопку, чтобы услышать обезьяну, а затем закройте окно предварительного просмотра.

9.      Редактируйте sound_button2 и sound_button3, чтобы добавить звуки Lion.wav и Elephant.wav в кадры Down.

Опции синхронизации звука

Синхронизация относится к способу запуска и проигрывания звука и включает несколько опций: Event (Событие), Start (Начать), Stop (Остановить) и Stream (Поток). Опция Stream связывает звук с временной шкалой, так что можно легко синхронизировать анимированные элементы со звуком Опции Event и Start используются для запуска звука (обычно короткого) при наступлении какого-то события, например щелчка по кнопке. Данные опции похожи, только синхронизация Start не запускает звук, если он уже проигрывается (так что перекрывающихся звуков, возможных с синхронизацией Start, быть не может). Опция Stop применяется для остановки звука, хотя вы редко будете ее использовать. При необходимости остановить звук синхронизацией Stream просто вставьте пустой ключевой кадр.

Видео во Flash

Де-факто Flash быстро становится методом передачи видео в Интернете. С помощью Flash просматривать видео могут больше интернет- пользователей, чем при помощи любой другой технологии, включая QuickTime, Windows Media Player и RealPlayer. Новостные сайты, например сайт газеты New York Times, и сайты обмена содержимым, например YouTube, используют Flash для публикации видео.

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

Оба метода требуют, чтобы видео сначала было правильно отформатировано. Подходящий формат видео для Flash – это Flash Video, который использует расширение .flv или .f4v. F4V является самым новым форматом Flash Video, поддерживающим стандарт Н.264 (современный видео- кодек, который обеспечивает высокое качество и эффективное сжатие). Кодек (сжатие-восстановление) – это метод, который используется для сжатия видеофайла с целью экономии пространства, а затем восстановления его для проигрывания. FLV является стандартным форматом для предыдущих версий Flash и задействует более старые кодеки Sorenson Spark или On2VP6.

Использование кодировщика Adobe Media Encoder

Вы можете преобразовать свои видеофайлы в формат FLV или F4V помощью кодировщика Adobe Media Encoder CS4, автономного приложения, поставляемого вместе с Flash CS4. Для облегчения вашей работы Adobe Media Encoder может конвертировать отдельные или множественные файлы (что также называется групповой обработкой).

Добавление видеофайла в кодировщик Adobe Media Encoder

Первым шагом по преобразованию видеофайла в совместимый формат Flash является добавление видео в Adobe Media Encoder для кодирования.

1.      Запустите Adobe Media Encoder, который устанавливается вместе с Adobe Flash CS4.

На экране отображается окно, в котором перечисляются все текущие ви-деофайлы, добавленные для обработки. Окно должно быть пустым.

2.      Выберите File => Add (Файл Добавить) или щелкните по кнопке Add (Добавить) справа. Откроется диалоговое окно для выбора видеофайла.

3.      Перейдите в папку Lesson07/07Start, выберите файл Penguins.mov и щелкните по кнопке ОК.

Файл Penguins.mov добавится в список отображения и будет готов для конвертирования в формат FLV или F4V.

Преобразование видеофайлов во Flash Video

1.      Из опций под пунктом меню Format (Формат) выберите опцию FLV/ F4V (Н.264).

2.      Из опций Preset (Стиль) выберите F4V-Web Medium (Источник среднего качества).

В меню можно выбрать одну из многих стандартных предварительно установленных опций. Опции определяют формат (либо F4V, либо FLV) и размер видео. Опция Web Medium конвертирует оригинальное видео в видео размером 360x272 пикселей, что является средним размером для проигрывания видео в веб-браузере. В скобках Flash отображает минимальную версию плеера Flash Player, требуемую для воспроизведения выбранного видеоформата.

3.      Щелкните по кнопке Output File (Выходной файл).

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

4.      Выберите опцию Start Queue (Запустить очередь).

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

Когда процесс кодирования завершится, зеленая метка в списке отображения будет обозначать, чтобы файл был преобразован успешно. Теперь вместе с оригинальным файлом Penguins.mov в папке Lesson07/07Start появится файл Penguins.f4v.

Примечание. Если вам нужно кодировать несколько видеофайлов в формат f4V или FLV, вы можете выполнить кодирование с помощью групповой обработки. Каждый файл может даже иметь свои собственные настройки. Щелкните по кнопке Add (Добавить) и добавьте видео в список отображения. Выберите иной формат для каждого файла, если желаете. Щелкните по кнопке Start Queue (Запустить очередь) для начала групповой обработки. На следующем рисунке в очереди на кодирование находится два дополнительных файла.

Примечание. Статус отдельных файлов в очереди можно изменить, выбрав файл в отображаемом списке и выполнив Edit => Reset Status или Edit => Skip Selection (Редактировать => Пропустить выбранное). Восстановление статуса Удалит зеленую метку с завершенного файла, так что он может быть снова закодирован, тогда как пропуск выбора заставит Flash пропустить этот файл в групповой обработке.

Опции кодирования

При конвертировании оригинального видео в формат Flash Video можно регулировать множество настроек: обрезать видео или выбрать для него специфический размер, просто конвертировать фрагмент видео, настроить тип компрессии и уровни компрессии и даже применить фильтры. Для отображения опций кодирования щелкните по кнопке Preset (Стиль) в списке отображения или выберите Edit => Export Settings (Редактировать => Параметры экспорта). Откроется диалоговое окно Export Settings (Экспорт настроек).

Обрезка видео

Если вы хотите показать только часть видео, можете его обрезать. Выберите Edit => Reset Status (Редактировать => Восстановить статус), чтобы вернуть файл Penguins.mov в прежнее состояние и иметь возможность экспериментировать с настройками обрезки.

1.      Щелкните по кнопке Crop (Обрезать) в левом верхнем углу диалогового окна Export Settings.

Поверх окна предварительного просмотра видео появится прямоугольник кадрирования.

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

Затененные части снаружи прямоугольника будут отброшены. Flash отображает новые размеры рядом с курсором. Можно также использовать настройки Left (Слева), Тор (Сверху), Right (Справа) и Bottom (Снизу) над окном предварительного просмотра для ввода точных значений в пикселях.

3.      Если вы хотите сохранить стандартную пропорцию обрезанного видео, выберите меню Crop Proportions (Обрезка краев) и укажите желаемое соотношение.

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

4.      Чтобы увидеть результат обрезки, щелкните по вкладке Output (Вывод).

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

5.      Выйдите из режима обрезки, снова щелкнув по кнопке Crop под вкладкой Source (Источник).

В этом уроке вам не понадобится обрезать видео Penguins.mov.

Настройка длины видео

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

1.      Перетащите указатель (верхний маркер), чтобы прокрутить видео и просмотреть его. Поместите указатель в желаемой начальной точке видео.

Маркеры времени обозначают число секунд, которые прошли.

2.      Щелкните по пиктограмме Set In Point (Задать точку входа).

Точка входа переместится в текущую позицию указателя.

3.      Перетащите указатель в желаемую конечную точку видео.

4.      Щелкните по пиктограмме Set Out Point (Задать точку выхода).

Точка выхода переместится в текущее положение указателя.

5.      Также можно просто перетащить маркеры точек входа и выхода для выбора желаемого фрагмента видео. Перетащите точки входа или выхода обратно в их начальные положения, потому что в этом уроке длину видео настраивать не нужно.

Ключевые точки

В нижней левой части диалогового окна Export Settings (Экспорт настроек) находится область, где можно задать ключевые точки видео.

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

Задание расширенных опций видео и аудио

Правая сторона диалогового окна Export Settings содержит все расширенные опции аудио и видео. Вы можете выбрать между простым (Simple) и расширенным (Advanced) режимом с помощью пиктограммы Mode (Режим).

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

На этот раз мы экспортируем файл Penguins.mov большего размера.

1.      Убедитесь, что выбраны окна Export Video (Экспорт видео) и Export Audio (Экспорт аудио).

2.      Щелкните по вкладке Format (Мультиплексор) и выберите F4V.

3.      Перейдите на вкладку Video (Видео).

4.      Выберите Resize Video (Изменить размер видео) и щелкните по опции Constrain (Сохранение пропорций ширины/высоты) (пиктограмма в виде цепи). Введите 480 в пункте Frame Width (Ширина кадра) и щелкните за пределами поля для принятия изменения.

Высота автоматически поменяется в соответствии с пропорциями видео.

5.      Щелкните по кнопке ОК.

Flash закроет диалоговое окно Export Settings и сохранит расширенные настройки видео и аудио.

6.      Щелкните по кнопке Start Queue (Запустить очередь), чтобы начать процесс кодировки с индивидуальными настройками изменения размера.

Flash создаст еще один файл F4V Penguins.mov. Удалите первый созданный файл и переименуйте второй в Penguins.f4v.

Сохранение расширенных опций видео и аудио

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

1.      В диалоговом окне Export Settings щелкните по кнопке Save Preset (Сохранить стиль).

2.      В открывшемся диалоговом окне задайте описательное имя для опций видео и аудио. Щелкните по кнопке ОК.

3.      Вернитесь к очереди видеофайлов. Вы можете применить индивидуальные настройки к дополнительным видеофайлам, просто выбрав предварительную установку из меню Preset.

Воспроизведение внешнего видео

Теперь, когда вы успешно преобразовали видео в правильный формат Flash Video, его можно использовать в проекте Flash. Приложение будет проигрывать каждый из видеофайлов с животными в соответствии с разными отмеченными ключевыми кадрами на временной шкале.

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

1.      Откройте проект 07_workingcopy.fla во Flash CS4.

2.      Выберите ключевой кадр под названием penguins (пингвины) в слое content (содержимое).

3.      Выполните File => Import => Import Video (Файл => Импорт => Импортировать видеофайл).

Появится мастер Import Video (Импорт видеоролика).

4.      В мастере Import Video выберите On Your Computer (На этом компьютере) и щелкните по кнопке Browse (Обзор, Windows) или Choose (Выбрать, Mac).

5.      Выберите Penguins.f4v из папки Lesson07/07Start и щелкните по кнопке Open (Открыть).

6.      Выберите опцию Load external video with playback component (Загрузить внешний видеофайл с компонентом воспроизведения). Щелкните по кнопке Next (Далее) или Continue (Продолжить).

7.      Активируйте опцию SkinUnderAllNoFullNoCaption.swf в меню Skin (Обложка) и укажите цвет #333333 с 75% Alpha. Щелкните по кнопке Next или Continue.

8.      На следующем экране мастера Import Video просмотрите информацию для видеофайла, а затем щелкните по кнопке Finish (Завершить) для кодирования файла.

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

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

10.  Выполните Control => Test Movie (Управление => Тестировать ролик). Щелкните по кнопке Magellanic Penguins (Магеллановы пингвины).

Видео начнет воспроизводиться в вашем файле Flash. Используйте кнопки управления для воспроизведения, остановки и изменения громкости фильма. Закройте окно предварительного просмотра.

11.  Другие видео с животными уже были закодированы (в формат FLV) и находятся в папке 07Start. Импортируйте видеофайлы Mandril.flv, Tiger.flv и Lion.flv в каждый из соответствующих ключевых кадров.

Управление воспроизведением видео

Компонент воспроизведения позволяет управлять проигрыванием видео, выбором автоматического режима воспроизведения и другими его аспектами. Опции воспроизведения можно найти, выбрав Window => Component Inspector (Окно => Инспектор компонентов) (Shift+F7). Параметры перечислены в левой колонке, а соответствующие значения – в правой.

-   Чтобы изменить опцию AutoPlay (Автозапуск), выберите true (правильно) или false (неправильно) из правой колонки. Вариант true включает автоматическое воспроизведение видео, a false останавливает видео на первом кадре.

-   Чтобы спрятать контроллер и отображать его, только когда пользователи наводят курсор мыши на видео, выберите true для опции SkinAutoHide (Автоматическое сокрытие обложки).

-   Чтобы выбрать новый контроллер (обложку), выполните двойной щелчок по опции SkinUnderAllNoFullNoCaption.swf и выберите новую обложку в открывшемся диалоговом окне.

-   Чтобы изменить прозрачность контроллера, введите десятичное значение от 0 (полностью прозрачен) до 1 (полностью непрозрачен) для параметра

SkinBackgroundAlpha.

-   Чтобы изменить цвет контроллера, щелкните по образцу цвета и выберите новый цвет для SkinBackgroundColor.

-   Чтобы изменить видеофайл или местоположение видеофайла, который ищет Flash для воспроизведения, активируйте опцию Source (Источник).

В диалоговом окне Content Path (Путь к содержимому) введите имя файла или щелкните по пиктограмме Folder (Папка), чтобы выбрать новый проигрываемый файл.

Работа с видео и прозрачностью

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

After

Effects. Теперь директор зоопарка появляется на фоне Flash. Похожий эффект используется для комментаторов прогноза погоды, где фон полностью прозрачен, и можно наблюдать карту с информацией о погоде спиной человека. Прозрачность в видео (называемая альфа-каналами поддерживается только в формате FLV с помощью кодека On2VP6. При кодировке видео с помощью альфа-каналов обязательно выберите вариант Encode Alpha Channel (Кодировать альфа-канал) на вкладке Video (Видео) опции Export Settings (Экспорт настроек).

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

Импорт видеоролика

Итак, используем мастер Import Video для импорта файла Popup.flv.

1.      Вставьте новый слой под названием popup video.

2.      Вставьте ключевые кадры в кадрах 35 и 40.

3.      Выберите ключевой кадр в кадре 35.

4.      Выполните File => Import => Import Video (Файл => Импорт => Импортировать видеофайл).

5.      В мастере Import Video выберите On Your Computer (На этом компьютере) и щелкните по кнопке Browse или Choose. Выберите файл Popup.flv в папке Lesson07/07Start и щелкните по кнопке Open.

6.      Выберите опцию Load external video with playback component (Загрузить внешний видеофайл с компонентом воспроизведения). Щелкните по кнопке Next или Continue.

7.      Выберите None (Нет) из меню Skin (Обложка) и щелкните по кнопке Next или Continue.

8.      Щелкните по кнопке Finish (Готово), чтобы импортировать видео.

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

9.      Используйте инструмент Selection (Стрелка) для позиционирования нового видео прямо над красным прямоугольником и кнопками звука.

Видео появится в слое popup video в ключевом кадре на кадре 35 в момент затухания звука. В кадре 40, где находится видео с пингвином, данное видео удалится из временной шкалы.

10.  Выберите Control => Test Movie (Управление => Тестировать ролик) для просмотра видеофильма, в котором используются альфа каналы.

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

Встраивание Flash Video

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

Встраивание видео во Flash поддерживается, начиная с шестой версии Flash Player. Имейте в виду следующие ограничения встроенного видео: Flash не может поддерживать аудиосинхронизацию во встроенном видео, которая превышает 120 с. Максимальная длина встроенных роликов составляет

16 000 кадров. Другим недостатком встроенного видео является увеличение размера проекта Flash, что делает тестирование фильма более долгим, а сеансы авторинга более утомительными.

Поскольку встроенный FLV проигрывается внутри проекта Flash, очень важно, чтобы частота кадров FLV была такой же, как и у файла Flash. В противном случае встроенное видео не будет проигрываться с положенной скоростью. Чтобы убедиться, что у FLV такая же частота кадров, что и у FLA, задайте правильную частоту кадров на вкладке Video (Видео) в Adobe Media Encoder.

Кодирование FLV для встраивания

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

1.      Откройте Adobe Media Encoder.

2.      Щелкните по кнопке Add (Добавить) и выберите файл polarbear.mov в папке Lesson07/07Start. Файл polarbear.mov добавится в очередь.

3.      Выберите опцию Preset (Стиль), чтобы открыть Edit Export (Экспорт настроек). Щелкните по вкладке Format (Мультиплексор) и выберите FLV.

4.      Перейдите на вкладку Video и задайте Frame Rate (Частота кадров) равной 12. Убедитесь, что в окошке Resize Video (Изменить размер видео) нет метки.

Частота кадров файла Flash 07_workingcopy.fla установлена на 12 кадров в секунду, так что необходимо, чтобы и у FLV частота составляла 12 кадров в секунду.

5.      Отмените выбор Export Audio (Экспорт аудио) вверху диалогового окна. Щелкните по кнопке ОК.

6.      Щелкните по кнопке Start Queue (Запустить очередь), чтобы закодировать видео.

Будет создан файл polarbear.flv.

Встраивание FLV на временной шкале

При наличии файла FLV вы сможете импортировать его во Flash и встроить во временную шкалу.

1.      Откройте файл 07_workingcopy.fla.

2.      Выберите первый кадр из слоя popup video.

3.      Выполните File => Import => Import Video (Файл => Импорт => Импортировать видеофайл). В мастере Import Video выберите On Your Computer (На этом компьютере) и щелкните по кнопке Browse или Choose. Выберите файл polarbear.flv в папке Lesson07/07Start и щелкните по кнопке Open.

4.      В мастере Video Import выберите Embed FLV in SWF (Внедрить FLV-файл в SWF-файл и воспроизвести во временной шкале) и проиграйте его во временной шкале. Щелкните но кнопке Next или Continue.

5.      При необходимости отмените выбор Expand timeline (При необходимости расширить временную шкалу) и Include audio (Включить звук). Щелкните по кнопке Next или Continue.

6.      Щелкните по кнопке Finish (Готово) для импорта видео.

В рабочей области появится видео белого медведя.

FLV-файл также появится в вашей библиотеке.

7.      Выполните Control => Test Movie (Управление => Тестировать ролик), чтобы просмотреть встроенный видеофайл от кадра 1 до кадра 35.

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

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

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

1.      Выберите встроенное видео в рабочей области, выполните щелчок правой кнопкой мыши (удерживая клавишу Ctrl) и выберите Create Motion Tween (Создать анимацию движения).

2.      Flash попросит преобразовать встроенное видео в символ, чтобы применить анимацию движения. Щелкните по кнопке ОК.

3.      Flash попросит добавить достаточное число кадров внутри символа видеоролика, чтобы видео могло быть воспроизведено целиком. Щелкните по кнопке Yes (Да).

Анимация движения создается в слое.

4.      Выберите анимацию движения и щелкните по вкладке Motion Editor (Редактор движения).

5.      Сверните все категории свойств. Щелкните по кнопке Plus (+) рядом с Color Effect (Цветовой эффект) и выберите Alpha (Альфа-канал).

В анимацию движения добавится свойство Alpha.

6.      Выделите кадр 25, выполните щелчок правой кнопкой мыши (удерживая клавишу Ctrl) и выберите Add Keyframe (Добавить ключевой кадр).

Ключевой кадр Alpha появится в кадре 25.

7.      Выделите кадр 30, выполните щелчок правой кнопкой мыши (удерживая клавишу Ctrl) и выберите Add Keyframe.

Ключевой кадр Alpha появится в кадре 30.

8.      Выберите последний ключевой кадр в кадре 30 и перетащите его вниз до 0%.

Alpha задано значение 0% в последнем ключевом кадре, так что встроенное видео затемняется от кадра 25 до кадра 30.

9.      Выполните Control => Test Movie (Управление => Тестировать ролик), чтобы просмотреть воспроизведение и затемнение встроенного видео.

Лабораторная работа № 8 "Использование компонентов"

1 час

Обзор урока

В данном уроке вы узнаете, как:

-     Добавлять простой компонент в проект.

-     Модифицировать параметры компонента.

-     Конфигурировать интерактивный компонент.

-     Использовать ActionScript для активации компонента.

Скопируйте папку Lesson08 с сетевого диска в свою личную папку, если вы еще этого не сделали.

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

Знакомство

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

10.  Выполните двойной щелчок по файлу 08End.swf в папке Lesson08/08End.

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

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

12.  Закройте файл 08End.swf.

13.  Выполните двойной щелчок по файлу 08Start.fla в папке Lesson08/08Start, чтобы открыть его во Flash.

Документ Flash содержит фоновое изображение.

14.  Выберите File => Save As (Файл => Сохранить как). Назовите файл 08_workingcopy.fla и сохраните его в папке 08Start. Сохранение рабочей копии обеспечивает доступность исходного файла в любой момент времени.

15.  Откройте файл 08End.fla, чтобы вы могли ссылаться на него при создании ActionScript.

О компонентах

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

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

Вы можете перетащить компоненты из панели Components (Компоненты) (Window => Components) в рабочую область и просто изменить их параметры. Однако, используя более сложные элементы пользователь ского интерфейса, применяйте ActionScript 3.0 для модификации компонентов.

У каждого компонента имеется уникальный набор методов ActionScript свойств и событий, которые составляют его интерфейс прикладного программирования (application programming interface, API). О командах которые доступны для каждого компонента, можно узнать в категории инструментов Actions (Действия) а пункте fl.controls или при помощи команды Help => Flash Help (Справка => Справка Flash). API также позволяет создавать новые, индивидуальные компоненты. Вы можете загрузить компоненты, которые были созданы членами сообщества Flash, на сайте Adobe Exchange по адресу www.adobe.com/exchange.

Добавление текстового компонента

Верхняя часть документа будет отображать прямоугольник, содержащий вводный текст. Мы создадим этот прямоугольник с панели Components (Компоненты), используя компонент TextArea (Область текста). Это простой элемент пользовательского интерфейса, который не требует ActionScript.

Перетаскивание компонента в рабочую область

Все компоненты перечислены на панели Components. Мы перетащим компонент TextArea в рабочую область. При этом Flash автоматически добавит его, а также компонент UIScrollBar и папку Component Assets (Средства компонента) на панель Library (Библиотека).

1.      Заблокируйте слой Background в рабочей копии исходного файла.

2.      Выберите слой Background и щелкните по пиктограмме Insert Layer (Создать слой). Назовите новый слой Components.

3.      Выполните Window => Components (Окно => Компоненты), чтобы открыть панель Components.

Примечание. Перечень компонентов, перечисленных на панели Components, зависит от версии ActionScript, заданной в Document Settings (Настройки документа). В документе может использоваться только одна версия ActionScript. В этой книге описывается только ActionScript 3.0.

4.      Выберите компонент TextArea в папке User Interface (Пользовательский ин-терфейс) на панели Components.

5.      Перетащите компонент TextArea в рабочую область.

Примечание. После того как вы перетащите компонент TextArea, на панели Library (Библиотека) будут содержаться компоненты TextArea, UIScrollBar (который появляется при наличии слишком большого количества текста в текстовом поле) и папка Component Assets (Средства компонента), позволяющая управлять компонентом.

Вставка текста в компонент

После того как мы модифицируем экземпляр компонента, текстовая область будет точно помещаться между заголовком и сеткой, и она должна быть частично прозрачной. Изменив размер и вид текстовой области, мы добавим текст из файла Intro.txt в компонент с помощью панели Properties (Свойства).

1.      Выберите компонент TextArea инструментом Selection (Стрелка).

2.      На панели Properties задайте ширину 600, высоту – 60, X = 47 и Y = 65. Под заголовком появится текстовая область.

3.      Выберите Alpha (Альфа-канал) из меню Style (Стиль) в разделе Color Effect (Цветовой эффект) панели Properties и укажите 57%.

Компонент станет частично прозрачным.

4.      Щелкните по компоненту и откройте панель Component Inspector (Инспектор компонентов), выбрав Window => Component Inspector (Окно => Инспектор компонентов).

Component Inspector предоставляет все опции для изменения и настройки выбранного компонента.

5.      Выберите текстовый параметр.

6.      Откройте файл Intro.txt в текстовом редакторе или приложении обработки текстов. Файл Intro.txt находится в папке Lesson08/08Start, которую вы скопировали с диска к этой книге.

7.      Выберите текст и выполните Edit => Сору (Правка => Копировать) или используйте одноименную команду вашего текстового редактора.

8.      Во Flash щелкните по текстовому параметру и нажмите Ctrl/Сommand+V, чтобы вставить текст.

Текст также появится в рабочей области внутри компонента TextArea.

9.      Выберите Control => Test Movie (Управление => Тестировать ролик). Отобразится текст, и, щелкнув в текстовой области, вы сможете его отредактировать. Добавьте текст. Удалите текст или измените часть существующего текста, чтобы посмотреть, что произойдет.

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

10.  Закройте окно предварительного просмотра.

Изменение параметров компонента

Вводный текст в этом проекте не должен быть редактируемым. Вы измените параметры с помощью Component Inspector (Инспектора компонентов), чтобы обеспечить нередактируемость текста.

1.      Выберите компоненты TextArea в рабочей области.

2.      Выполните Window => Component Inspector (Окно => Инспектор компонентов), если инспектор компонента еще не открыт.

3.      Щелкните по редактируемому параметру и выберите значение false (неправильно), чтобы текст нельзя было редактировать.

4.      Выполните Control => Test Movie (Управление => Тестировать ролик). Текст станет нередактируемым.

5.      Закройте окно предварительного просмотра.

Использование компонентов для создания интерактивности

В сочетании с предварительно созданными компонентами ActionScript позволяет создавать более сложные элементы пользовательского интерфейса. Мы используем компонент TileList и еще один компонент TextArea для создания сетки типов минералов и области, в которой будет отображаться текст о каждом минерале при щелчке по его миниатюре.

Конфигурирование параметров компонента

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

ActionScript.

1.      На панели Components (Компоненты) выберите компонент TileList из папки User Interface (Пользовательский интерфейс).

2.      Перетащите компонент TileList в рабочую область.

3.      На панели Properties (Свойства) задайте ширину 270, высоту – 318, X = 47 и Y = 150.

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

4.      Назовите экземпляр компонента TileList "thumbnails_tl", чтобы представить список каскада миниатюр.

5.      Откройте Component Inspector (Инспектор компонентов) и щелкните по компоненту в рабочей области, чтобы выбрать его.

6.      Измените значение columnWidth (Ширина столбца) на 125, а значение rowHeight (Высота строки) – на 125. Эти значения определяют размер каждого раздела сетки.

7.      Щелкните по параметру scrollPolicy и выберите on (включить) для отображения линейки прокрутки.

8.      Щелкните по параметру направления и выберите vertical (вертикальное), чтобы сделать линейку прокрутки вертикальной, а не горизонтальной (по умолчанию).

9.      Перетащите компонент TextArea с панели Components в правую часть сетки рабочей области.

10.  Выберите новый экземпляр компонента TextArea. На панели Properties задайте ширину текстовой области 290, высоту – 318, X = 360 и Y = 150.

Размер компонента TextArea изменен, а сам компонент помещен в правую часть рабочей области.

11.  Выберите Alpha (Альфа-канал) из меню Style (Стиль) под разделом Color Effect (Цветовой эффект) на панели Properties и укажите значение 0%.

Значение Alpha 0% оставляет фон текстовой области полностью прозрачным, так что виден оригинальный прямоугольник в слое Background.

12.  Назовите экземпляр "mineral_ta", чтобы представить текстовую область минерала.

Улучшение компонентов с помощью ActionScript

Вы создали сетку и область отображения текста. Теперь нужно добавить ActionScript, чтобы это все заработало. Сначала добавим в сетку изображения минералов. Эти изображения будут доставаться динамически из папки на вашем компьютере. Затем мы добавим обработчик событий для запуска ответа при щелчке по миниатюре. Ответ представляет собой отображение соответствующего текста. При написании ActionScript помните, что вы дали экземпляру TileList имя thumbnails_tl, а экземпляру TextArea – имя mineral_ta. ActionScript использует эти имена экземпляров для обращения к различным объектам в рабочей области.

1.      Выберите кадр 1 в слое Actions (Действия).

2.      Выберите Window => Actions (Окно => Действия), чтобы открыть панель Actions.

3.      В Введите информацию для добавления первого изображения в список каскада, включая метку и источник:

thumbnails_tl.addItem ({метка:"OBSIDIAN", источник: "thumbnals/Obsidian.jpg", data:"."});

Для каждого предмета в списке мы отметим компонент в рабочей области (thumbnails_tl) и используем метод addItem(). Эта команда специфична для данного компонента. Все остальное располагается внутри круглых и фигурных скобок. Метка (Label) находится на тексте в верхней части прямоугольника: включите кавычки вокруг него и наберите текст заглавными буквами. За запятой следует источник (source), являющийся путем к изображению, которое вы хотите отобразить. Третье свойство называется data (данные). Это текст, который появится в прямоугольнике mineral_ta. Мы вставим этот текст позже. Теперь же все, что у нас есть, – это точка.

4.      Выполните Control => Test Movie (Управление => Тестировать ролик).

Слева должна появиться миниатюра Obsidian (обсидиан). Изображения миниатюр извлекаются из папки Thumbnails (Миниатюры) в папке 08Start. Если ролик не воспроизводится должным образом, проверьте текст на опечатки, пробелы и другие ошибки. Можете сравнить ваш вариант с ActionScript в файле 08End.fla.

5.      Скопируйте строку, которую только что набрали в шаге 3, и вставьте ее 14 раз. Создав строки для остальных минералов.

6.      Замените имя соответствующего минерала файлом label (метка) и source (источник) в каждой строке: Granite (гранит), Basalt (базальт), Scoria (шлак), Rhyolite (риолит), Shale (сланец), Breccia (брекчия), Sandstone (песчаник), Conglomerate (конгломерат), Limestone (известняк), Slate (шифер), Marble (мрамор), Quartzite (кварцит), Gneiss (гнейс), Schist (сланец).

При проверке ролика все 14 миниатюр должны отображаться в компоненте. Каждая команда addItem() добавляет одно изображение.

7.      Теперь создадим ответ на щелчок пользователя по каждой миниатюре. Создайте обработчик событий для таблицы миниатюр, введя:

thumbnails_tl.addEventListener(Event.CHANGE, thumbnailClicked);

В этой строке сетка является целью события. Вы добавляете обработчик событий, который принимает событие изменения, запускающее функцию под названием thumbnailClicked при щелчке по миниатюре.

8.      Создайте функцию или ответ на событие под названием thumbnailClicked, введя: function thumbnailClicked(event:Event):void{ mineral_ta.text = event.target.selectedItem.data;

}

Функция называется thumbnailClicked и является ответом на событие, который будет выполняться в предыдущей набранной строке.

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

9.      Откройте текстовый документ под названием Minerals.txt (в папке 08Start) в любом текстовом редакторе. Скопируйте текст из раздела Obsidian (обсидиан) документа.

10.  На панели Actions во Flash выберите точку между кавычками после данных в первой строке addItem() и нажмите Ctrl/Command+V, чтобы вставить текст.

11.  Удалите символы конца абзаца (окончания строки) из текста Obsidian (обсидиан). Добавьте \п там, где хотите разместить символы конца абзаца. \n означает новую строку или конец строки. Наберите \n\n в местах, где хотите, чтобы появился пробел между параграфами. Между \n и следующими далее словами не должно быть пробелов.

12.  Выполните Control => Test Movie (Управление => Тестировать ролик). Щелкните по изображению обсидиана. Должен появиться текст про обсидиан. Если изображение мигает или возвращает ошибку, вернитесь на панель Actions и убедитесь, что ввели правильный текст и удалили из него все символы конца абзаца.

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

14.  Выберите Control => Test Movie. Щелкните по каждой миниатюре минерала, чтобы увидеть соответствующий текст в текстовой области. Если вы встретите какие-то ошибки, вернитесь к панели Actions чтобы исправить их. Помните, что вы можете для сравнения обратиться к файлу 08End.fla.

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

-      UlLoader (загрузчик пользовательского интерфейса)

-      UlScrollBar (линейка прокрутки пользовательского интерфейса)

Видеокомпоненты

-      FLVPIayback (воспроизведение FLV)

-      BackButton (кнопка перемотки назад)

-      BufferingBar (индикатор буферизации)

-      CaptionButton (кнопка субтитров)

-      ForwardButton (кнопка перемотки вперед)

-      FullScreenButton (кнопка полноэкранного режима)

-      MuteButton (кнопка выключения звука)

-      PauseButton (кнопка паузы)

-      PlayButton (кнопка воспроизведения)

-      PlayPauseButton (кнопка воспроизведения/паузы)

-      SeekBar (поиск)

-      StopButton (кнопка остановки) VolumeBar (громкость)

Лабораторная работа № 9 "Загрузка и управление содержимым Flash"

1 час

Обзор урока

В данном уроке вы узнаете, как:

-     Загружать внешний файл SWF.

-     Удалять загруженный файл SWF.

-     Управлять временной шкалой фрагмента ролика.

-     Использовать маски для выборочного отображения содержимого.

Скопируйте папку Lesson09 с сетевого диска в свою личную папку, если вы еще этого не сделали.

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

Знакомство

Мы начнем работу с просмотра окончательного варианта фильма.

1.      Выполните двойной щелчок по файлу 09End.swf в папке Lesson09/09End, чтобы просмотреть окончательный вариант ролика.

Проект представляет собой несуществующий интернет-журнал Check о стиле жизни. На первой странице появляется яркая анимация, демонстрирующая четыре главных раздела журнала. Каждый раздел – это фрагмент ролика со встроенной анимацией.

Первая статья журнала о звезде нового фильма называется "Double Identity" (Двойная идентичность, сайт о ней вы создали в уроке 4), второй раздел посвящен новому автомобилю, третий представляет некоторые факты и цифры, а четвертый содержит статью о самосовершенствовании.

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

2.      Выполните двойной щелчок по файлам page1.swf, page2.swf, page3.swf и page4.swf в папке Lesson09/09End.

Каждый из четырех разделов является отдельным файлом Flash. Обратите внимание, что первая страница, 09End.swf, загружает при необходимости каждый файл SWF.

3.      Закройте все файлы SWF и откройте файл 09Start.fla в папке Lesson09/09Start.

Многие изображения, графические элементы и анимации уже были завершены в этом файле. Мы добавим необходимый ActionScript, чтобы файл Flash загружал внешнее содержимое Flash.

4.      Выберите File => Save As (Файл => Сохранить как). Назовите файл 09_workingcopy.fla и сохраните его в папке 09Start. Сохранение рабочей копии обеспечивает доступность исходного файла.

Загрузка внешнего содержимого

Мы будем использовать ActionScript для загрузки каждого из внешних файлов SWF в главный фильм Flash. Загрузка внешнего содержимого сохраняет проект в отдельных модулях и предотвращает его раздувание. Кроме того, это облегчает редактирование, поскольку дает возможность работать с отдельными разделами, а не с одним огромным неразделимым файлом.

Например, если вы хотите изменить статью о новом автомобиле во втором разделе, достаточно просто открыть и отредактировать файл Flash page2.fla, который содержит этот контент.

Для загрузки внешних файлов мы воспользуемся двумя объектами ActionScript: Loader (Загрузчик) и URLRequest (Запрос URL).

1.      Вставьте новый слой и назовите его "actionscript".

2.      Нажмите F9 (Windows) или Option+F9 (Mac OS), чтобы открыть панель Actions (Действия).

3.      В Введите следующую строку точно так, как она показана здесь. var myLoader:Loader=new Loader();

Этот код создает объект Loader и называет его myLoader.

4.      На следующей строке введите следующие данные точно так, как они показаны здесь: page1_mc.addEventListener(MouseEvent.CLICK, page1content); function page1content(myevent:MouseEvent):void { var myURL:URLRequest=new URLRequest("page1.swf"); myLoader.load(myURL); addChild(myLoader);

};

Вы уже встречали такой синтаксис в главе 6. Во второй строке мы создадим обработчик, который обнаруживает щелчок мыши по объекту с названием page1_mc. Это фрагмент ролика в рабочей области. В ответ выполняется функция с названием page1content. Эта функция обеспечивает несколько действий: во-первых, она создает объект URLRequest с именем файла, который вы хотите загрузить; во-вторых, она загружает объект URLRequest в объект Loader; в-третьих, она добавляет объект Loader в рабочую область, так что вы можете его увидеть.

5.      Выберите фрагмент ролика в левой части рабочей области с кинозвездой.

6.      На панели Properties (Свойства) назовите этот фрагмент page1_mc.

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

7.      Выберите Control => Test Movie (Управление => Тестировать ролик) чтобы просмотреть ролик до этого момента.

На титульной странице отображается анимация. Когда вы щелкаете по кинозвезде, загружается и отображается файл под названием page1.swf.

8.      Закройте файл SWF 09_workingcopy.swf.

9.      Выберите первый кадр слоя actionscript и откройте панель Actions.

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

page1_mc.addEventListener(MouseEvent.CLICK, page1content); function page1content(myevent:MouseEvent):void { var myURL:URLRequest=new URLRequest("page1.swf"); myLoader.load(myURL); addChild(myLoader);

}; page2_mc.addEventListener(MouseEvent.CLICK, page2content); function page2content(myevent:MouseEvent):void { var myURL:URLRequest=new URLRequest ("page2.swf"); myLoader.load(myURL); addChild(myLoader);

}; page3_mc.addEventListener(MouseEvent.CLICK, page3content); function page3content(myevent:MouseEvent):void { var myURL:URLRequest=new URLRequest("pageЗ.swf"); myLoader.load(myURL); addChild(myLoader);

}; page4_mc.addEventListener(MouseEvent.CLICK, page4content); function page4content(myevent:MouseEvent):void { var myURL:URLRequest=new URLRequest ("page4.swf"); myLoader.load(myURL); addChild(myLoader);

};

11. Щелкните по каждому из трех оставшихся фрагментов роликов в рабочей области и задайте им названия на панели Properties. Назовите желтый автомобиль page2_mc, раздел с данными – page3_mc, а раздел о самосовершенствовании – page4_mc.

Удаление внешнего содержимого

Как выгрузить файл SWF, чтобы вернуться в главный фильм Flash? Проще всего удалить объект Loader из рабочей области, чтобы зрители его больше не видели. Мы воспользуемся командой removeChild() и зададим имя объекта Loader в скобках, чтобы удалить его из рабочей области.

1.      Выберите первый кадр слоя actionscript и откройте панель Actions.

2.      Добавьте в код на панели Script (Сценарий) следующие строки:

myLoader.addEventListener(MouseEvent.CLICK, unloadcontent); function unloadcontent(myevent:MouseEvent):void { removeChild(myLoader);

};

Этот код добавляет в объект Loader обработчик событий myLoader. Когда вы щелкаете по объекту Loader, выполняется функция под названием unloadcontent.

Данная функция выполняет всего одно действие: она удаляет объект Loader из рабочей области.

3.      Выберите Control => Test Movie (Управление => Тестировать ролик) для просмотра фильма. Щелкните по любому из четырех разделов, а затем – по загруженному содержимому, чтобы вернуться в главный ролик.

Управление фрагментами роликов

Вернувшись на первую страницу, вы увидите четыре раздела и сможете щелкнуть по другому фрагменту ролика, чтобы загрузить другой раздел. Но не лучше ли повторить воспроизведение вступительной анимации? Вступительные анимации расположены внутри каждого видеоролика, и вы можете управлять четырьмя фрагментами в рабочей области. Для навигации по временным шкалам фрагментов роликов, а также по главной временной шкале используйте базовые команды, которые выучили в уроке 6 (gotoAndStop, gotoAndPlay, stop, play). Просто предваряйте команды именем видеоролика и разделяйте их точкой. Flash найдет соответствующий фрагмент ролика и переместит его временную шкалу соответствующим образом.

1.      Выберите первый кадр слоя actionscript и откройте панель Actions.

2.      Добавьте команды в функцию unloadcontent, чтобы функция имела следующий вид: function unloadcontent(myevent:MouseEvent):void { removeChild(myLoader) ; page1_mc.gotoAndPlay(1); page2_mc.gotoAndPlay(1); page3_mc.gotoAndPlay(1); page4_mc.gotoAndPlay(1) ;

};

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

3.      Выполните Control => Test Movie (Управление => Тестировать ролик) для просмотра фильма. Выберите любой из четырех разделов, а затем щелкните по загруженному содержимому в главном ролике.

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

Создание масок

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

Маски и маскированное содержимое могут быть анимированными.

Задаем маску и маскирующие слои

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

1.      Откройте файл page2.fla.

Единственный слой под названием content (содержимое) содержит фрагмент ролика второго раздела о новом автомобиле.

2.      Вставьте новый слой над слоем content и переименуйте его в mask (маска).

3.      Выполните двойной щелчок по пиктограмме перед именем слоя. Откроется диалоговое окно Layer Properties (Свойства слоя).

4.      Выберите Mask (Маска) и щелкните по кнопке ОК.

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

5.      Выполните двойной щелчок по пиктограмме перед нижним слоем content.

Откроется диалоговое окно Layer Properties.

6.      Выберите Masked (Маскируемый) и щелкните по кнопке ОК.

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

Создаем маску

1.      Выберите инструмент Rectangle (Прямоугольник).

2.      Укажите любой цвет для заливки (Fill) и отсутствие контура (Stroke).

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

4.      Выполните щелчок правой кнопкой мыши (щелкните, удерживая клавишу Ctrl) по прямоугольнику и выберите Create Motion Tween (Создать анимацию движения).

5.      Flash попросит преобразовать прямоугольную форму в символ, чтобы вы могли применить анимацию движения. Щелкните по кнопке ОК.

Верхний слой станет слоем Tween (Анимация), и на временную шкалу будет добавлена одна секунда кадров.

6.      Вставьте то же число кадров в нижний слой.

7.      Переместите указатель на последний кадр (кадр 24).

8.      Выберите инструмент Free Transform (Свободное преобразование).

9.      Щелкните по символу прямоугольника.

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

10.  Нажмите клавишу Alt/Option и перетащите правый край маркера свободного преобразования, чтобы растянуть прямоугольник, покрыв им всю рабочую область.

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

11.  Чтобы увидеть эффекты слоя Mask на слое Masked, заблокируйте оба слоя.

12.  Вставьте новый слой и назовите его actionscript.

13.  Вставьте ключевой кадр в кадре 24 слоя actionscript и откройте панель Actions.

14.  В окне Script панели Actions наберите stop().

15.  Выберите Control => Test Movie (Управление => Тестировать ролик).

По мере воспроизведения анимации в слое Mask открывается все большая часть маскирующего слоя, создавая кинематографический переход, известный как затенение (wipe). Открыв файл 09_workingcopy.fla и выбрав Control => Test Movie (Управление > Тестировать ролик), а затем щелкнув по фрагменту ролика с автомобилем, вы увидите, что эффект маскирования сохраняется даже при загрузке в другой ролик Flash.

Лабораторная работа № 10 "Публикация документов Flash"

1 час

Обзор урока

В данном уроке вы узнаете, как:

-     Тестировать документ Flash.

-     Использовать панель Bandwidth Profiler (Профилировщик пропускной способности).

-     Изменять настройки публикации для документа.

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

-     Добавлять метаданные.

-     Публиковать файл SWF и его файл HTML.

-     Определять версию Flash Player, которая установлена у пользователя.

-     Публиковать независимый файл-проектор.

Скопируйте папку Lesson10 с сетевого диска в свою личную папку, если вы еще этого не сделали.

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

Знакомство

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

1.      Выполните двойной щелчок по файлу 10End.html в папке Lesson10/10End, чтобы открыть завершенный проект.

Веб-браузер запускает и проигрывает файл HTML, который отображает файл SWF. Файл HTML сообщает браузеру, как показать файл SWF. Выйдите из веб-браузера.

2.      Выполните двойной щелчок по файлу 10Start.fla в папке Lesson 10/10Start, чтобы открыть ее во Flash.

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

3.      Выберите File => Save As (Файл => Сохранить как). Назовите файл 10_workingcopy.fla и сохраните его в папке 10Start. Сохранение рабочей копии обеспечивает доступность исходного файла.

Тестирование документа Flash

Устранение неисправностей – это умение, которое развивается со временем, но причину проблем проще найти, если часто тестировать ролик по мере создания содержимого. Выполняя тестирование после каждого шага, вы будете знать, какие изменения сделали и, следовательно, что пошло неправильно. Стоит запомнить хороший девиз: "Тестируйте на ранней стадии. Тестируйте часто".

Единственный быстрый способ просмотра ролика – команда Control => Test Movie (Управление => Тестировать ролик) (Ctrl+Enter/Cmd+Return). Эта команда создает файл SWF в том же месте, что и файл FLA, так что вы можете воспроизводить и просматривать ролик; он не создает файл HTML или любые другие файлы, необходимые для воспроизведения ролика с веб-сайта.

Решив, что вы закончили ролик или часть ролика, убедитесь, что все части на месте и ведут себя так, как вы ожидаете.

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

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

3.      Выберите Control => Test Movie (Управление => Тестировать ролик). При воспроизведении ролика сравнивайте его с перечнем проверки. Щелкайте по кнопкам и ссылкам, чтобы убедиться в их корректной работе.

4.      Выполните File => Publish Preview => Default (HTML) (Файл => Просмотр публикации => По умолчанию), чтобы экспортировать файлы SWF и HTML, требуемый для воспроизведения в браузере и предварительного просмотра ролика.

Браузер откроется и воспроизведет окончательный фильм.

5.      Загрузите два файла (SWF и HTML) на веб-сайт и дайте коллегам или друзьям адрес веб-сайта, чтобы они могли протестировать ролик.

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

Если вашему проекту требуются дополнительные медиаресурсы, например видеофайлы FLV, F4V или внешние файлы SWF, вы должны загрузить их вместе с файлом SWF и HTML.

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

Bandwidth Profiler

Вы можете просмотреть, как будет себя вести конечный проект в различных средах загрузки, с помощью Bandwidth Profder (Профилировщик пропускной способности), полезной панели, доступной в режиме Test Movie.

Просмотр Bandwidth Profiler

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

1.      Выберите Control => Test Movie (Управление => Тестировать ролик).

Flash экспортирует SWF и отобразит ваш ролик в новом окне.

2.      Выполните View => Bandwidth Profder (Просмотр => Профилировщик пропускной способности).

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

Имеются два способа просмотра графика справа: как Streaming Graph (Потоковая диаграмма) (View => Streaming Graph) или как Frame by Frame Graph (Покадровая диаграмма) (View => Frame by Frame Graph). Вариант Streaming Graph указывает, как фильм загружается через Интернет, демонстрируя, как данные текут из каждого кадра, а Frame by Frame Graph просто показывает объем данных в каждом кадре. В режиме Streaming Graph можно определить, какие кадры вызовут паузы во время воспроизведения, замечая столбцы, превышающие заданную настройку Bandwidth (Пропускная способность).

Тестирование загрузки

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

1.      Находясь в режиме Test Movie, выберите View => Download Settings (Просмотр => Параметры загрузки) => 56К.

Настойка 56К измеряет скорость загрузки, которую вы хотите протестировать. Она соответствует модему 56К. Выберите более высокую или низкую скорость, в зависимости от целевой аудитории.

2.      Выполните View => Simulate Download (Просмотр => Имитировать загрузку).

Flash симулирует воспроизведение через Интернет при заданной настройке Bandwidth (56К). Зеленая горизонтальная полоска вверху окна показывает, какие кадры были загружены, а треугольный указатель обозначает текущий проигрываемый кадр. Обратите внимание на задержку на кадре 1 при загрузке данных. Каждый раз, когда серый столбец данных превышает красную горизонтальную линию (отмеченную как 400 В), возникает легкая задержка в проигрывании ролика.

После загрузки достаточного объема данных начнется воспроизведение ролика.

3.      Выберите View => Download Settings => DSL (Просмотр => Параметры загрузки => DSL).

DSL – это широкополосное соединение.

4.      Выполните View => Simulate Download.

Flash симулирует воспроизведение через Интернет при более высокой скорости.

Обратите внимание, что задержка в начале будет очень короткой.

Добавление метаданных

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

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

1.      Выберите File => Publish Settings (Файл => Параметры публикации) или щелкните по кнопке Edit (Редактирование) рядом с Profile (Профиль) на панели Properties (Свойства).

Откроется диалоговое окно Publish Settings.

2.      Щелкните по вкладке Flash.

3.      В SWF Settings (Параметры SWF) выберите Include ХМР Metadata (Включить метаданные ХМР) и активируйте опцию File Info (Сведения о файле).

Откроется диалоговое окно ХМР Metadata (Метаданные ХМР).

4.      Щелкните по вкладке Description (Описание).

5.      В поле Document Title (Название документа) наберите "Martian Mike Gets Spaced Out" (Марсианин Майк отрывается по полной).

6.      В поле Keywords (Ключевые слова) наберите "Spaced Out animation showcases our favorite outer space buddy, Martian Mike, Animation, Martian, Spaced Out, Martian Mike, Spaceship animation, mini movie, space, science fiction, cute space animation, Flash animation, webisode".

7.      Введите любую описательную информацию в других полях. Щелкните по кнопке ОК, чтобы закрыть диалоговое окно. Щелкните по кнопке ОК, чтобы закрыть диалоговое окно Publish Settings (Параметры публикации).

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

Публикация ролика для Интернета

Когда вы публикуете ролик для Интернета, Flash создает файл SWF и документ HTML, который сообщает веб-браузеру, как отображать содержимое Flash. Вам нужно загрузить оба файла на веб-сервер вместе со всеми остальными файлами, на которые ссылается файл SWF (например, видеофайлами FLV или F4V). Команда Publish (Опубликовать) сохраняет все требуемые файлы в той же папке.

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

Задание настроек файла Flash

Вы можете определить, как Flash публикует файл SWF, включая необходимую версию проигрывателя Flash Player, версию ActionScript и способ отображения и воспроизведения фильма.

1.      Выберите File => Publish Settings (Файл => Параметры публикации)-

2.      Щелкните по вкладке Formats (Формат) и выберите Flash (SWF) и HTML. Можно также выбрать публикацию файла в дополнительных форматах.

3.      Щелкните по вкладке Flash.

4.      Выберите версию проигрывателя Flash Player.

Некоторые функции Flash CS4 не будут воспроизводиться так, как вы ожидаете, в более ранних, чем Flash Player 10, версиях плеера. Если вы используете последние функции CS4, то должны выбрать Flash Player 10.

5.      Выберите подходящую версию ActionScript. В уроках этой книги мы использовали ActionScript 3.0, поэтому остановитесь на ActionScript 3.0.

6.      Если вы включили звук, щелкните по кнопкам Set (Задать) для Audio stream (Аудиопоток) и Audio event (Аудиособытие), чтобы увеличить качество компрессии звука.

7.      Выберите Compress Movie (Сжать ролик), если файл имеет большой размер, и вы хотите уменьшить время загрузки.

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

8.      Активируйте опцию Include ХМР Metadata (Включить метаданные ХМР), если хотите включить информацию, описывающую ролик.

9.      Щелкните по вкладке HTML.

10.  Выберите Flash Only (Только Flash) из меню Template (Шаблон).

Определение версии проигрывателя Flash Player

Некоторые функции Flash требуют специфических версий проигрывателя Flash Player, чтобы воспроизводить фильм так, как вы хотите. Можно автоматически определять версию проигрывателя Flash Player на компьютере пользователя; если версия Flash Player не соответствует требуемой, сообщение посоветует пользователю загрузить обновленный проигрыватель.

1.      Выберите File => Publish Settings (Файл => Параметры публикации), если диалоговое окно Publish Settings еще не открыто.

2.      Щелкните по вкладке HTML в диалоговом окне Publish Settings.

3.      Выберите Detect Flash Version (Определить версию Flash).

4.      В поле Version (Версия) введите самую раннюю версию проигрывателя Flash Player, которую хотите обнаружить.

5.      Щелкните по кнопке Publish (Опубликовать), а затем – по кнопке ОК, чтобы закрыть диалоговое окно.

Flash опубликует файл, создавая файл SWF и HTML с дополнительным кодом JavaScript, который обнаруживает заданную версию Flash Player. Если браузер не имеет более ранней версии Flash Player, которую вы ввели в полях Version, вместо ролика Flash отобразится сообщение.

Изменение настроек отображения

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

1.      Выберите File => Publish Settings (Файл => Параметры публикации).

2.      Щелкните по вкладке HTML в диалоговом окне Publish Settings.

-     Выберите Match Movie (По ролику) для опции Dimensions, чтобы проигрывать фильм Flash с точным размером сцены, заданным во Flash. Это обычная настройка почти для всех проектов Flash.

-     Выберите Pixels (Пикселы) для опции Dimensions, чтобы ввести другой размер в пикселях для фильма Flash.

-     Выберите Percent (Проценты) для опции Dimensions, чтобы ввести размер для фильма Flash в процентах от окна браузера.

-     Выберите Default (Show All) (По умолчанию (показать все)) в качестве опции Scale, чтобы поместить ролик в окно браузера без искажений или обрезки и показать все содержимое. Это обычная настройка почти для всех проектов Flash.

-     Выберите No Border (Без рамки) в качестве опции Scale для мас-штабирования ролика, чтобы он поместился в окно браузера без искажений, но с обрезкой содержимого.

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

-     Выберите No Scale (Без масштаба) в качестве опции Scale, чтобы сохранить размер ролика постоянным, независимо от того, насколько велико или мало окно браузера.

Изменение настроек воспроизведения

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

1.      Выберите File => Publish Settings.

2.      Щелкните по вкладке HTML в диалоговом окне Publish Settings.

-     Выберите Paused at Start (Приостановить после запуска) в качестве опции Playback (Воспроизведение), чтобы ролик останавливался на самом первом кадре.

-     Снимите выбор Loop (Цикл) в качестве опции Playback, чтобы ролик воспроизводился только один раз.

-     Снимите выбор Display Menu (Отображать меню) в качестве опции Playback для ограничения опций в контекстном меню, которое появляется, когда вы выполняете щелчок правой кнопкой мыши по ролику Flash в браузере.

Dreamweaver и Flash

Тогда как Flash предоставляет несколько опций, помогающих отображать завершенный ролик в веб-браузере, для размещения ролика Flash на странице лучше всего использовать специальный редактор HTML, например Adobe Dreamweaver, особенно когда вы хотите добавить вокруг него другую информацию. Например, ролик Flash может быть всего лишь одним компонентом веб-страницы, содержащей информацию об анимационном фильме, продолжительности и команде актеров. Dreamweaver может собрать все медиакомпоненты на одной HTML-странице. Чтобы вставить фильм Flash на страницу HTML в Dreamweaver, просто выберите Insert => Media => Flash (Вставка => Мультимедиа => Документ Flash). Выделите ваш файл SWF и щелкните по кнопке ОК. Dreamweaver создаст код HTML, указывающий на файл SWF и отображающий его в браузере. Многие идентичные опции отображения и воспроизведения доступны на панели Properties (Свойства) в Dreamweaver.

Альтернативные опции публикации

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

Сохранение кадров в качестве изображений

Иногда необходимо показать лишь один конкретный кадр ролика. Экспорт кадра в формате GIF, JPEG или PNG может быть полезен, если вам нужно изображение для портфолио или вы хотите предоставить конечное изображение зрителю, у которого нет проигрывателя Flash Player. Можно также использовать отдельные изображения для создания раскадровки из множества сцен, чтобы предоставить их клиенту до того, как файл Flash станет доступен.

1.      Выберите File => Publish Settings, а затем щелкните по вкладке Formats (Формат). Flash (.swf) и HTML выбраны по умолчанию.

2.      Выберите GIF Image (.gif), JPEG Image (.jpg), и PNG Image (.png) и щелкните по кнопке ОК, чтобы закрыть диалоговое окно.

Эти опции экспортируют кадр, выбранный в данный момент в документе Flash.

3.      Выделите последний кадр на временной шкале (кадр 150). Это кадр, который Flash экспортирует в качестве файлов изображения.

4.      Выполните File => Publish (Файл => Опубликовать). Flash опубликует файлы в папку, содержащую файл документа Flash.

5.      Перейдите к папке Lesson10/10Start. В добавление к файлам SWF и HTML папка теперь содержит файлы GIF, PNG и JPEG. Откройте файлы изображений для просмотра.

Создание проектора

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

1.      Выберите File => Publish Settings и щелкните по вкладке Formats.

2.      Отмените выбор GIF, JPEG и PNG. Активируйте опции Windows Projector (Проектор Windows) и Macintosh Projector (Проектор Macintosh).

3.      Щелкните по кнопке Publish (Опубликовать).

4.      Когда файл будет опубликован, щелкните по кнопке ОК, чтобы закрыть диалоговое окно.

5.      Откройте папку Lesson10/10Start.

6.      Откройте файл проектора для вашей платформы (Windows или Mac OS). Файл Windows Projector имеет расширение .ехе.

Можно выполнить двойной щелчок как по проекторам для Windows, так и по проекторам для Mac, чтобы проиграть их без браузера. Вы можете записывать проекторы на CD или DVD и использовать эти методы публикации для завершения любых проектов Flash, которые создаете и которыми делитесь с миром.

Данный файл предназначен исключительно для ознакомления. Все права принадлежат ООО "Издательство "Эксмо".

Материал подготовлен в соответствии с печатным изданием:

Adobe Flash CS4 : официальный учебный курс. – М.: Эксмо, 2009. – 400 с.: ил + CD. – (Официальный учебный курс).