Анимация. 
Adobe Flash

Лабораторная работа Тема: «Анимация. Adobe Flash»

Цель: Изучить основы анимации во Flash.

Задачи:

1. Изучить элементы интерфейса и управления Adobe Flash.

2. Освоить графику в Adobe Flash.

3. Научиться создавать простые анимационные ролики.

Оборудование и ПО:

ПК с установленной ОС Windows и любой версией Flash.

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

Анимация (от англ. animation — одушевление, от лат. animare — оживить) — вид киноискусства, произведения которого создаются путем покадровой съемки отдельных рисунков. Исходя из психофизиологических особенностей человеческого в визуального восприятия для создания эффекта плавного движения скорость смены кадров должна быть не менее 18 кадров в секунду. В современном кинематографе используется стандарт в 24 кадра в секунду. Во flash-анимации используют стандарт 12 кадров в секунду — это норма для лимитированной (более дешевой) мультипликации.

Технология векторного морфинга применялась задолго до Flash. В 1986 году была выпущена программа Fantavision, которая использовала эту технологию. В 1991 году на этой технологии была выпущена игра Another World, а двумя годами позже — Flashback.

Разработка Flash была начата компанией FutureWave, создавшей пакет анимации FutureSplash Animator. В 1996 году FutureWave была приобретена компанией Macromedia, которая переименовала FutureSplash Animator в Flash. Под этим наименованием платформа продолжает развиваться и поныне (хотя после того, как в 2005 году компания Macromedia была поглощена Adobe, Macromedia Flash стал официально называться Adobe Flash).

Программой для воспроизведения flash-контента является бесплатный Adobe Flash Player, который можно также можно установить и на мобильные телефоны с ОС Android, хотя flash-контент умеют воспроизводить и многие плееры сторонних производителей. Например, SWF-файлы можно просматривать с помощью свободных плееров Gnash или swfdec, а FLV-файлы воспроизводятся через мультимедийный проигрыватель Quicktime, и различные проигрыватели в UNIX-подобных системах при наличии соответствующих плагинов.

Некоторые производители ПО для мобильных устройств пытаются заменить или ограничить распространение Flash на свои новые мобильные платформы:

· Apple на HTML5 для iPhone, iPod touch и iPad

· Microsoft на Silverlight для Windows Phone 7

· Oracle на JavaFX

Adobe Flash является платным. Стоит в диапазоне от 599 рублей и выше в соответствии с тарифными планами. Купить его можно на официальном сайте Adobe (http:// adobe.com). Чтобы купить Flash, нужно приобрести Adobe Creative Cloud, который включает в себя целый ряд программ компании Adobe. Кроме того, каждому пользователю Creative Cloud доступно определённое электронное пространство в облачном хранилище, которое зависит от выбранного плана, также как и набор программ. Есть и бесплатный пробный период на месяц. (https://creative.adobe.com)

интерфейс графическая система интерактивная анимация

Начальные сведения о рабочем окне

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

По умолчанию программа Flash отображает строку меню, шкалу времени Timeline, сцену, палитру Tools (Инструменты), панель Properties (Свойства) и несколько других палитр. Поскольку вы работаете в программе Flash, вы можете открывать, закрывать, пристыковывать, отстыковывать и перемещать панели по экрану. Чтобы возвратиться к заданному по умолчанию рабочему окну, выберите команду Classic (классическая) из подменю Workspace (Рабочее окно) меню Window (Окно) непосредственно над окном сценой.

О панели Stage (Сцена)

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

Чтобы видеть рабочую область вокруг сцены, используйте инструмент Zoom (Масштаб) для уменьшения окна или выберите команду меню View ¦ Pasteboard (Вид ¦ Монтажный стол).

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

Понятие о шкале времени Timeline

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

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

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

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

В первый раз, когда вы запускаете программу Flash, вы увидите экран приветствия со ссылками на стандартные шаблоны файлов, обучающие программы и другие ресурсы. В этом уроке вы завершите анимацию для компании по разливу воды в бутылки. Большинство художественной работы уже сделано. Поскольку вы собираетесь узнать о рабочем окне программы Flash, вы добавите объект из палитры Library (Библиотека) на сцену (Stage) и анимируете его. Запустите программу Adobe Flash. В операционной системе Windows выберите команду меню Start ¦ All Program ¦ Adobe Flash CS3 (Пуск ¦ Все программы ¦ Adobe Flash CS4). В операционной системе Mac OS сделайте двойной щелчок мыши на значке Adobe Flash CS3 в папке Applications (Приложения) или в приложении Dock (Док). Выберите команду меню File ¦ Open (Файл ¦ Открыть). В диалоге Open (Открыть) выберите файл и щелкните мышью на кнопке Open (Открыть), чтобы предварительно просмотреть заключительный проект.

Чтобы сохранить файл, выберите команду меню File ¦ Save As (Файл ¦ Сохранить как).

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

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

Выберите команду меню Insert ¦ Timeline ¦ Layer (Вставить ¦ Шкала времени ¦ Слой). Между слоями Labels и Mask появляется новый слой.

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

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

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

Выберите кадр 18 в слое Pour. При выборе кадра программа Flash отображает номер кадра под шкалой времени Timeline.

Выберите команду меню Insert ¦ Timeline ¦ Keyframe (Вставить ¦ Шкала времени ¦ Ключевой кадр).

Работа с панелями

Почти все, что вы делаете в программе Flash, вы делаете с помощью панелей. В этом уроке вы использовали палитру Library (Библиотека), панель инструментов Tools, панель Properties (Свойства), панель Transform (Преобразование), шкалу времени Timeline (Шкала времени) и панель History (Предыстория). В следующих уроках вы будете использовать панель Actions (Команды), панель Color (Цвет), панель Align (Выравнивание) и другие панели, которые позволяют управлять различными аспектами вашего проекта. Поскольку панели — это неотъемлемая часть рабочего пространства программы Flash, необходимо знать, как управлять ими.

Чтобы открыть любую панель в программе Flash, воспользуйтесь меню Window (Окно), а затем выберите название панели из открывшегося меню. В некоторых случаях вам, возможно, придется выбирать панель из подменю, например Window ¦ Properties ¦ Properties (Окно ¦ Свойства ¦ Свойства) или Window ¦ Other Panels ¦ History (Окно ¦ Другие панели ¦ Предыстория).

По умолчанию панель Properties (Свойства), панель Filters (Фильтры) и панель Parameters (Параметры) появляются вместе в нижней части экрана, шкала времени Timeline (Шкала времени) — в верхней части, а панель Tools (Инструменты) находится на левой стороне экрана. Большая часть других панелей отображается на правой стороне экрана. Однако вы можете переместить панель в любую позицию, которая удобна для вас.

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

* Чтобы сгруппировать панели, перетащите вкладку одной панели на вкладку другой.

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

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

Панель инструментов — длинная, узкая панель в самой левой части рабочей области — содержит инструменты выбора, инструменты рисования и ввода текста, инструменты заливки и редактирования, инструменты навигации и элементы управления. Чаще всего вы будете использовать панель инструментов, чтобы переключиться с инструмента Selection Tool (Выделение) на инструмент Text Tool (Текст) или на инструмент рисования. Когда вы выбираете инструмент, не забудьте проверить область настроек внизу панели, чтобы гарантировать, что вы используете заполнение, обводку или другие параметры настройки, подходящие для вашей задачи.

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

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

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

Выберите инструмент Zoom Tool (Масштаб) в панели инструментов.

Выберите значок Enlarge (Увеличить) в области настроек панели инструментов Щелкните мышью на круге воды с символами в нем, чтобы увеличить его на экране.

Выбор скрытого инструмента

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

Вы будете использовать инструмент Oval Tool (Овал), который скрыт инструментом Rectangle Tool (Прямоугольник), чтобы нарисовать контур вокруг круга эмблемы.

Выберите слой Pour на шкале времени Timeline, а затем щелкните мышью на значке Insert Layer (Вставить слой).

Назовите новый слой Outline.

Заблокируйте слой Pour, чтобы вы случайно на него что-либо не переместили. В шкале времени Timeline переместите индикатор текущего времени в кадр 293. последний в фильме, и выберите кадр 293 в слое Outline.

Щелкните мышью и удерживайте инструмент Rectangle Tool (Прямоугольник) в панели инструментов, а затем выберите инструмент Oval Tool (Овал) из открывающегося меню.

Щелкните мышью на значке Stroke Color (Цвет обводки) в области настроек панели инструментов. Откроется палитра Adobe Color Picker (Выбор цвета Adobe).

Выберите черный цвет в палитре Adobe Color Picker (Выбор цвета Adobe).

Щелкните мышью на значке Fill Color (Цвет заливки) в области настроек панели инструментов. Снова откроется палитра Adobe Color Picker (Выбор цвета Adobe).

Выберите отсутствие цвета в палитре Adobe Color Picker (Выбор цвета Adobe).

Удерживайте нажатой клавишу Shift пока вы рисуете овал вокруг круга эмблемы.

ПРИМЕЧАНИЕ: Нажатие клавиши Shift в то время, как вы рисуете, позволяет нарисовать правильный круг. Вы можете модифицировать многие инструменты, нажимая вспомогательные клавиши в то время, как вы используете их. Например, нажмите клавишу Alt (Windows) или Option (Mac OS) во время использования инструмента Zoom Tool (Масштаб), чтобы изменить его режим из Enlarge (Увеличить) в Reduce (Уменьшить).

Выберите инструмент Selection Tool (Выделение) а затем выберите овал. В панели Properties (Свойства) измените значения ширины и высоты на 101 так, чтобы овал, который вы рисовали, точно соответствовал кругу эмблемы. Выберите овал и затем используйте клавиши управления курсором на вашей клавиатуре, чтобы подтолкнуть круг на место.

В панели Properties (Свойства) измените настройку Stroke Height (Толщина обводки) на 4.

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

Пока вы работаете над проектом, имеет смысл часто предварительно просматривать его, чтобы убеждаться, что вы достигаете желаемого эффекта. Для быстрого смотра того, как анимация или фильм будут показаны в программе просмотра, выберите команду меню Control ¦ Test Movie (Управление ¦ Тестирование Фильма). Вы можете также нажать сочетание клавиш ctrl + Enter (Windows) и Command+Return (Mac OS), чтобы предварительно просмотреть ваше кино. Выберите команду меню Control ¦ Test Movie (Управление ¦ Тестирование фильма). Программа Flash открывает и запускает фильм в отдельном окне.

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

Публикация вашего фильма

Когда вы готовы поделиться вашим фильмом с другими, опубликуйте его из программы Flash. Для большинства проектов программа Flash создаст файл HTML. SWF-файл и файл JavaScript (.js). Файл SWF — ваш заключительный фильм Flash, файл HTML содержит SWF-файл, и файл JavaScript обеспечивает хорошую работу браузеров с вашим фильмом. Вы будете должны загрузить все три файла в одну папку на вашем Web-сервере. Всегда проверяйте ваше кино после его загрузки для уверенности в том, что оно работает должным образом.

Выберите команду меню File ¦ Publish Settings (Файл ¦ Параметры публикации).

Щелкните мышью на вкладке Formats (Форматы). Установите флажки Flash (.swf) и HTML (.html). Щелкните мышью на кнопке Publish (Публикация).

Щелкните мышью на кнопке OK, чтобы закрыть диалог.

Добавление текста к слою

Чтобы создавать текст в программе Flash, выберите инструмент Text Tool (Текст) щелкните на сцене и введите текст. Выберите инструмент Text Tool (Текст) (Т).

На панели Properties (Свойства) выберите из открывающегося списка Text Туре (Тип текста) пункт Static Text (Статический текст). Если выбрать пункт Dynamic Text (Динамический текст), то текст не появится в клипе. (Изменения динамического текста основываются на языке ActionScript. С динамическим текстом мы будем работать в уроке 10.)

Щелкните кнопкой мыши на сцене. Введите текст.

Выберите в меню команду Edit ¦ Select All (Правка ¦ Выделить все), чтобы выделить весь текст. На панели Properties (Свойства) выберите из открывающегося списка Font (Шрифт). Щелкните на значке Edit Format Options (Правка параметров формата), где вы сможите отформатировать текст.

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

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

Вы начнете с рисования стакана для шипучего наггитка.

Выберите инструмент Rectangle Tool (Прямоугольник). Убедитесь, что значок режима Object Drawing (Рисование объектов) не выделен. Штриховка и заливка могут быть любого цвета, но убедитесь для каждой операции, что выбран нужный цвет.

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

Выберите инструмент Selection Tool (Выделение).

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

Когда фигура выделена, программа Flash отображает его с белыми точками.

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

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

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

Убедитесь, что весь прямоугольник уже выделен. В случае необходимости протащите мышью инструмент Selection Tool (Выделение) вокруг него снова. В панели Color (Цвет) щелкните мышью на значке Fill (Цвет заливки).

ПРИМЕЧАНИЕ: Убедитесь, что вы щелкнули мышью на значке Fill (Цвет заливки), а не на поле Fill Color (Цвет заливки). Щелчок мышью на поле Fill Color (Цвет заливки) открывает палитру Adobe Color Picker (Выбор цвета Adobe), которая вам не нужна, когда вы импортируете точечный рисунок.

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

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

Выберите файл Water.png и щелкните мышью на кнопке Open (Открыть). Прямоугольник заполняется изображением воды.

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

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

Выберите инструмент Free Transform Tool (Произвольная трансформация).

Протащите мышью инструмент Free Transform Tool (Произвольная трансформация) вокруг прямоугольника на сцене для его выделения. На прямоугольнике появляются маркеры преобразования.

Нажмите сочетание клавиш ctrl+ Shift (Windows) или Command+Shift (Mac OS) во время перетаскивания одного из углов внутрь. Нажатие этих клавиш позволяет вам перемещать оба угла на то же самое расстояние одновременно. Щелкните мышью вне фигуры, чтобы снять ее выделение.

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

Создание выделений

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

Выделение фрагментов заливки

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

Выберите инструмент Selection Tool (Выделение).

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

Выберите команду меню Modify ¦ Group (Модификация ¦ Сгруппировать). Сделайте двойной щелчок мышью на вновь созданной группе для ее редактирования.

С помощью инструмента Selection Tool (Выделение) выберите среднюю область основания фигуры. Начните обрисовывать область выделения снаружи группы — выше или ниже нее, — чтобы предотвратить перемещение всего основания.

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

Щелкните мышью на значке Scene1, чтобы возвратиться к главной сцене.

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

Чтобы сделать напиток более правдоподобным вы искривите или наклоните поверхность жидкости в стакане. Инструмент Lasso Tool (Лассо) — идеальное средство для этого задания, поскольку вы можете использовать его, чтобы сделать нестандартное выделение. Выберите инструмент Lasso Tool (Лассо). Убедитесь, что значок Polygon Mode (Режим многоугольника) не выделен.

ПРИМЕЧАНИЕ: Если выбран значок Polygon Mode (Режим многоугольника), инструмент Lasso Tool (Лассо) ограничивается рисованием многоугольников.

Нарисуйте замкнутую фигуру вокруг верхней части заливки стакана. Замкните линию, а затем отпустите кнопку мыши Щелкните мышью на значке Fill Color (Цвет заливки) в панели инструментов и выберите белый цвет или введите значение #FFFFFF в палитре Color Picker (Выбор цвета). В выбранной области растровый рисунок воды замещается сплошной белой заливкой.

Чтобы гарантировать отображение стакана в течение всей анимации, выделите кадр 35 в слое Glass в шкале времени Timeline и выберите команду меню Insert ¦ Timeline ¦ Frame (Вставить ¦ Шкала времени ¦ Кадр). Программа Flash растягивает кадр 1 на кадры 2−35.

Сам напиток закончен! Все, что осталось сделать, — добавить пузырьки и шипение.

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

Инструмент Oval Tool (Овал) подобен инструменту Rectangle Tool (Прямоугольник) кроме того, конечно, что он рисует овалы. Вы используете инструмент Oval Tool (Овал), чтобы нарисовать пузырек в стакане для питья.

Чтобы вы могли легко анимировать пузырек позже, вы создадите это в новом слое.

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

Выберите команду меню Insert ¦ Timeline ¦ Layer (Вставить ¦ Шкала времени ¦ Слой), чтобы добавить слой для пузырька.

Назовите слой Bubble (Пузырек).

Выберите инструмент Oval Tool (Овал), который сгруппирован с инструментом Rectangle Tool (Прямоугольник).

Удерживайте нажатой клавишу Shift и нарисуйте кружок в стакане. Если вы нажимаете клавишу Shift, инструмент Oval Tool (Овал) рисует правильный круг.

Протащите инструмент Selection Tool (Выделение) вокруг всего чтобы выбрать как заливку, так и обводку. В панели Properties (Свойства) установите настройки Stroke Color (Цвет обводки) в значение No Color (Без цвета) и Fill Color (Цвет заливки) — белый (#FFFFFF).

Выберите инструмент Free Transform Tool (Произвольная трансформация) чтобы изменить размеры пузырька.

Удерживайте нажатой клавишу Shift, чтобы сохранить пропорции пузырька, и перетащите маркер угла внутрь, чтобы сделать пузырек меньше. Измененный в размерах кружок должен быть приблизительно 8 пикселов в ширину и 8 пикселов в высоту. Вы можете найти, что проще изменить размеры пузырька, если увеличить масштаб его отображения. (Панель Properties (Свойства) отображает высоту и ширину пузырька.)

По умолчанию объект масштабируется относительно левого верхнего угла. Если вы нажимаете клавишу Alt (Windows) или Option (Mac OS), объект масштабируется относительно его точки трансформации, представленной значком круга. Вы можете перетащить точку трансформации куда-нибудь в объекте или даже вне объекта.

Создание простой анимации

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

Преобразование фигуры в эталон

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

С помощью инструмента Selection Tool (Выделение) выделите пузырек.

Выберите команду меню Modify ¦ Convert to Symbol (Модификация ¦ Преобразовать в эталон).

Назовите эталон bubble и включите переключатель Graphic (Графический) для выбора типа символа. Щелкните мышью на кнопке ОК, чтобы закрыть диалог Convert to Symbol (Преобразовать в эталон).

Анимация объекта

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

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

Выберите кадр 20 в слое Bubble и нажмите клавишу F6, чтобы вставить ключевой кадр.

Выберите пузырек на сцене.

В панели Properties (Свойства) введите следующие значения:

Н (Высота): 12 пикселов.

W (Ширина): 12 пикселов.

Установите значение Y на 90 пикселов ниже его текущего значения. Например, если текущее значение Y — 100, замените его на 10. Нажмите клавишу Enter или Return, чтобы применить значение.

Больший пузырек перемещается к вершине стакана.

Выберите любой кадр между 1 и 20 в слое Bubble.

Щелкните правой кнопкой на выбранном кадре и выберите из выпадающего меню Create Classic Teween.

Чтобы увидеть анимацию пузырька, выберите команду меню Control ¦ Test Movie (Управление ¦ Тестирование фильма). Пузырек всплывает к вершине стакана и выходит из него, а затем анимация повторяется.

Режимы рисования программы Flash

Программа Flash предоставляет три режима рисования, которые определяют, как объекты взаимодействуют друг с другом на сцене и как вы можете их редактировать. По умолчанию программа Flash использует для рисования режим слияния, но вы можете включить режим объекта или использовать инструменты Rectangle Primitive Tool (Прямоугольный примитив) или Oval Primitive Tool (Овальный примитив), чтобы использовать режим примитивов.

Режим слияния

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

Режим объектов

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

Чтобы преобразовать объект в фигуры (режим слияния), выделите его и нажмите комбинацию клавиш ctrl+ B (Windows) или Command+B (Mac OS). Чтобы преобразовать фигуру в объект (режим объекта), выделите его и выберите команду меню Modify ¦ Combine Objects ¦ Union (Модификация ¦ Объединить объекты ¦ Слияние).

Режим примитивов

Режим примитивов является новым для программы Flash CS3. Если вы используете инструменты Rectangle Primitive Tool (Прямоугольный примитив) или Oval Primitive Tool (Овальный примитив), программа Flash рисует формы как отдельные объекты. В отличие от обычного объекта, однако, вы можете изменить радиус углов прямоугольных примитивов, а также начальный и конечный углы и внутренний радиус овальных примитивов, используя панели Properties (Свойства).

Добавление слоев анимации

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

Щелкните мышью на значке Insert Layer (Вставить слой) девять раз, чтобы создать девять новых слоев.

Назовите слои Bubble2, BubbleЗ, Bubble4 и т. д.

В шкале времени Timeline щелкните мышью на кадре 1 в слое Bubble, а затем нажмите клавишу Shift и щелкните мышью на кадре 20, чтобы выделить кадры 1−20.

Нажмите клавишу Alt (Windows) или Option (Mac OS) во время перетаскивания слоя к одному из новых слоев выше него, сдвинув его немного так, чтобы первый кадр был на несколько кадров далее по шкале времени Timeline.

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

Выберите первый ключевой кадр в слое Bubble2, нажмите сочетание клавиш Ctrl+A (Windows) или Command+A (Mac OS), чтобы выделить пузырек в этом слое, а затем переместите выбранный пузырек в другое положение в стакане.

Выберите последний ключевой кадр в слое, нажмите сочетание клавиш Ctrl+A (Windows) или Command+A (Mac OS) и переместите конечный пузырек в позицию выше его новой отправной точки так, чтобы пузырек передвигался в стакане прямо вверх.

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

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

Для предварительного просмотра анимации выберите команду меню Control ¦ Test Movie (Управление ¦ Тестирование фильма).

Работа с линиями

Инструмент Line Tool (Линия) рисует прямые линии, которые вы можете объединить для создания новых объектов. Для добавления напитку некоторой искристости вы создадите разрывающиеся пузырьки, выталкивающиеся поверх стакана.

Соответствие цвету существующего объекта

Разрывающиеся пузырьки должны соответствовать цвету напитка, поэтому вы установите цвет обводки начальных овалов соответствующим самому темному оттенку в напитке. Выберите слой Bubble10 (верхний слой) на шкале времени Timeline. Выберите команду меню Insert ¦ Timeline ¦ Layer (Вставить ¦ Шкала времени ¦ Слой) и назовите слой Fizz.

Выделите кадр 1 в слое Fizz.

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

В панели Properties (Свойства) щелкните мышью на поле Stroke Color (Цвет обводки), а затем используйте пипетку из палитры Color Picker (Выбор цвета) для щелчка на темной области напитка.

Установите значение 3 для параметра Stroke Height (Толщина обводки) и пустое значение для Fill Color (Цвет заливки).

Нарисуйте маленький кружок поверх напитка.

Добавление линий

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

Выберите инструмент Line Tool (Линия) и режим Object Drawing (Рисование объектов).

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

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

Выберите команду меню Edit ¦ Сору (Правка ¦ Копировать), чтобы скопировать линию, которую вы только что нарисовали.

Выберите команду меню Edit ¦ Paste In Place (Правка ¦ Вставить в то же место), чтобы вставить копию точно в той же самой позиции.

Выберите команду меню Modify ¦ Transform ¦ Rotate 90° CCW (Модификация ¦ Преобразовать ¦ Вращать на 90° против часовой стрелки) для поворота второй линии таким образом, чтобы она была перпендикулярна к первой.

Выберите инструмент Selection Tool (Выделение).

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

Выберите команду меню Edit ¦ Сору (Правка ¦ Копировать), чтобы скопировать обе линии.

Выберите команду меню Edit ¦ Paste In Place (Правка ¦ Вставить в то же место).

Выберите команду меню Modify ¦ Transform ¦ Scale And Rotate (Модификация ¦ Преобразовать ¦ Масштабировать и вращать).

Введите значение 45 в текстовое поле Rotate (Вращать) и щелкните мышью на кнопке ОК.

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

Разделение объектов

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

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

Выберите команду меню Modify ¦ Break Apart (Модификация ¦ Разделить).

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

Управление объектами

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

Отключение привязки к направляющим

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

Выберите команду меню View ¦ Snapping ¦ Snap То Guides (Вид ¦ Привязка ¦ Привязка к направляющим).

Выберите команду меню View ¦ Snapping ¦ Snap То Objects (Вид ¦ Привязка ¦ Привязка к объектам).

Группировка объектов

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

С помощью инструмента Selection Tool (Выделение) выполните мышью выделение всей звезды.

Выберите команду меню Modify ¦ Group (Модификация ¦ Сгруппировать).

Нажмите клавишу Alt (Windows) или Option (Mac OS) и перетащите группу к открытой области выше напитка.

Нажатие клавиш Alt (Windows) или Option (Mac OS) копирует выделенный объект во время его перетаскивания мышью.

Добавление фигур

В дополнение к звездам шипучая область выше напитка будет содержать маленькие овалы. Для их создания вы используете инструмент Oval Tool (Овал). Выберите инструмент Oval Tool (Овал).

Удерживайте нажатой клавишу shift и нарисуйте круг.

С помощью инструмента Selection Tool (Выделение) выберите круг.

Нажмите клавишу Alt (Windows) или Option (Mac OS) и перетащите мышью круг, чтобы создать другую копию.

Анимация объектов

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

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

Выберите команду меню Insert ¦ Timeline ¦ Keyframe (Вставить ¦ Шкала времени ¦ Ключевой кадр).

Добавьте ключевой кадр для каждого пятого кадра вплоть до кадра 30. (То есть создайте ключевые кадры в кадрах 10, 15, 20, 25 и 30.)

На шкале времени Timeline выберите ключевой кадр в кадре 5.

Перестройте разрывающиеся элементы на сцене.

Выберите каждый из остающихся ключевых кадров, в свою очередь, и перестройте шипучие элементы так, чтобы они находились в другом положении для каждого ключевого кадра. Выберите команду меню Control ¦ Test Movie (Управление ¦ Тестирование фильма), чтобы предварительно просмотреть выталкиваемые разрывающиеся элементы, которые вы создали, а затем закройте окно предварительного просмотра.

Наложение маски на объекты

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

Разблокируйте слой Glass.

Щелкните мышью на заливке напитка на сцене для его выделения.

Выберите команду меню Edit ¦ Сору (Правка ¦ Копировать).

Выберите команду меню Edit ¦ Deselect All (Правка ¦ Отменить выделение), чтобы предотвратить заполнение из положения выше контура.

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

На шкале времени Timeline выберите слой Bubble10 ниже слоя Fizz.

Выберите команду меню Insert ¦ Timeline ¦ Layer (Вставить ¦ Шкала времени ¦ Слой). Выберите команду меню Edit ¦ Paste In Place (Правка ¦ Вставить в то же место). Форма заливки напитка вставляется в новый слой. Назовите слой Mask. Щелкните правой кнопкой мыши (Windows) или, удерживая клавишу Command, левой кнопкой мыши (Mac OS) на слое Mask и выберите команду Mask (Маскирующий). Программа Flash блокирует слой Mask и делает отступ в слое ниже него.

На шкале времени Timeline выделите всё слои от Bubble до Bubble9.

Чтобы выбрать группу слоев, щелкните мышью на первом уровне, нажмите клавишу shift и щелкните мышью на последнем слое.

На шкале времени Timeline перетащите выбранные слои в слой Bubble10 (слой с отступом). Все слои ниже слоя Mask имеют отступ, поэтому слой Mask маскирует их все. Никаких пузырьков не появится вне заливки напитка.

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

Задания на самостоятельную работу

1. Создайте анимацию горизонтального движения квадрата с текстом.

2. Создайте анимацию падения мяча на землю.

Контрольные вопросы

1. Что можно создать с помощью Adobe Flash?

2. Какими программами можно воспроизвести флэш контент?

3. Расскажите про шкалу времени (Timeline).