Информатизация инженерного образования (выпуск 1)

П Р И Л О Ж Е Н И Я

Рис. П.12.1.20. Временная шкала анимации движения мяча до столкновения

Теперь вернемся к анимации движения мяча. В кадрах 2—10 зададим положение мяча. В кадре 10 разместим мяч так, чтобы он касался стенки, а в остальных он должен перемещаться более-менее равномерно, как раз в этом нам помогут сетка и линейки. Мы немного поторопились, создавая ключевые кадры, взяв за основу первый кадр, и забыли, что положение мяча на предыдущем и последующем кадрах отличается на некоторый шаг по вертикали. Резонно было бы поступить следующим образом. Создать второй кадр на базе первого, сместить в нем мяч, создать третий кадр на базе второго, вновь сместить мяч. Удалим ранее созданные кадры 2—10 слоя «Мяч» и создадим их вновь в соответствии с изложенным.

Выберем кадр 2, нажмем клавишу Shift, выберем кадр 10 — будут выделены кадры 2—10, отображаемые на черном фоне. Для удаления выбранных кадров выполним команду Remove Frames (Удалить кадры) контекстного меню.

После этого создадим кадр 2. Выделим Мяч и клавишей «стрелка вниз» переместим его в нужное положение. Повторим эту операцию для остальных кадров. А теперь давайте посмотрим, что получилось. Фильм можно проиграть непосредственно в окне документа, для этого выберите первый кадр и нажмите клавишу Enter, это можно также сделать с помощью команды Play меню Control. В процессе выполнения ролика виден двигающийся указатель кадров. Анимацию можно прервать на любом кадре, нажав клавишу Esc.

Предоставляется возможность воспроизводить анимацию пошагово, перемещаясь с кадра на кадр как вперед, так и назад с помощью команд Step Forward On Frame и Step Backward One Frame меню Control соответственно.

И, наконец, зациклим ролик, установив флажок пункта Loop Playback меню Control. В окне документа может воспроизводиться как текущая сцена, так и весь ролик (все сцены). В первом случае сбросьте, а во втором установите флажок Play All Scenes меню Control. Для управления показом ролика служит также панель управления проигрыванием. Она отображается выбором в меню Window | Toolbars | Controller (Окно | Панели инструментов | Контроллер). Панель приведена на рис. П.12.1.21.

Кнопки панели в порядке перечисления слева направо выполняют следующие функции:

•останов проигрывания;

•перемещение на первый кадр фильма;

•перемещение на кадр назад (к началу фильма);

•запуск проигрывания;

•перемещение на кадр вперед (к концу фильма);

•перемещение на последний кадр фильма.

804

П р и л о ж е н и е 12.1

Рис. П.12.1.21. Панель проигрыва-

Рис. П.12.1.22. Меню настройки временной шкалы

И, наконец, фильм можно просмотреть в отдельном окне. Что сейчас и сделаем, выбрав в меню Control | Test Movie (Управление | Тестировать фильм) или нажав комбинацию клавиш Ctrl+Enter. При этом Flash создаст исполняемый файл, загрузит проигрыватель и проиграет ролик. Наш фильм оказался зацикленным, несмотря на то, что выключен флажок Loop Playback меню Control. Для однократного воспроизведения ролика следует установить флажок Loop контекстного меню окна проигрывателя.

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

Будем считать, что продолжительности стадий деформирования и восстановления формы мяча совпадают и равны трем кадрам. Таким образом, фаза столкновения разворачивается в 11—16 кадрах. Рассмотрим анимацию первой фазы. Воспользуемся для рисования деформированного мяча ранее рассмотренным инструментом трансформации (рис. П.12.1.13). Создадим ключевой 11 кадр в слое Мяч и деформируем его в эллипс. Далее последовательно создадим кадры 12, 13 с увеличивающейся степенью деформации эллипса. С 14 кадра форма мяча будет восстанавливаться, а степень деформации эллипса будет уменьшаться. Наиболее просто создать эту фазу последовательным копированием в 14 кадр 12, в 15 — 11 и, наконец, в 16 кадр, когда мяч примет круглую форму, нужно скопировать десятый кадр. Движение мяча от стенки можно построить, копируя кадры 10, 9, 8 …1 в 17, 18 и т.д.

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

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

805

П Р И Л О Ж Е Н И Я

Имеется пять заданных типов для настройки ширины кадра во временной шкале: Tiny — самые узкие прямоугольники, Small — маленькие прямоугольники, Normal — значение по умолчанию, Medium, Large — самые широкие прямоугольники.

Если снять флажок Tinted Frames этого же меню, установленный по умолчанию, то прямоугольники кадров будут не серыми, а белыми. Наконец, последние два пункта меню Preview и Preview in Context задают вид кадров временной шкалы. По умолчанию они выключены, и мы видим кадры в виде прямоугольников. Если установить флажок Preview, то кадры будут отображаться в виде больших белых прямоугольников, содержащих изображение. Причем в прямоугольнике отображается только изображение, а свободное пространство вокруг него обрезается (рис. П.12.1.23).

В режиме Preview In Context отображается весь рабочий лист, на котором рас-

и изменении формы мяча (рис. П.12.1.24). В предыдущем случае наблюдаем лишь изменение формы.

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

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

Итак, давайте посмотрим, как можно применить трансформационную анимацию в нашем примере.

Рис. П.12.1.23. Временная шкала в режиме Preview

Рис. П.12.1.24. Временная шкала в режиме Preview In Context

806

П р и л о ж е н и е 12.1

Начнем с трансформации движения. В Flash под трансформацией движения понимается такая трансформация, когда элемент меняет местоположение, форму

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

имячом. Сохраним его с именем ball_trans.fla. Временные соотношения фаз движения мяча оставим теми же, что и для покадровой анимации.

Итак, рассмотрим первую фазу анимации — движение мяча до столкновения. Выделим первый кадр. Выберем в меню Insert | Timeline | Create Motion Tween (Вставить | Временная шкала | Создать анимацию движения). Теперь зададим второй ключевой кадр — это будет десятый кадр, соответствующий моменту соприкосновения мяча со стенкой. На временной шкале первый кадр растянулся, стал синим и в нем нарисована горизонтальная стрелка. Это указывает на то, что кадры 1—10 составляют анимацию движения (рис. П.12.1.25).

Теперь займемся анимацией фазы деформации мяча. Начальным кадром будет кадр 10 с недеформированным мячом, а конечным кадр 13 с максимально деформированным мячом. Создадим ключевой кадр 13 и деформируем на нем окружность в эллипс. Далее аналогично восстановим форму мяча (кадры 13—16) и отскок мяча вверх (кадры 16—22). Окончательно временная шкала нашей анимации имеет вид, приведенный на рис. П.12.1.26.

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

Рис. П.12.1.25. Временная шкала с трансформацией движения

Рис. П.12.1.26. Временная шкала с четырьмя фазами анимации движения мяча

807

ПР И Л О Ж Е Н И Я

вэкземпляр (в терминологии Flash Instance), ссылающийся на образец. Откроем библиотеку, выбрав в меню Window | Library (Окно | Библиотека).

Окно библиотеки состоит из двух панелей (рис. П.12.1.27). В нижней панели отображаются имена элементов (столбец Name) библиотеки с указанием их типа (столбец Kind). Библиотека содержит единственный элемент tween1. Это и есть наш образец, на который ссылаются экземпляры, участвующие в процессе анимации. Впрочем, можно изменить имя образца, вызвав его контекстное меню (рис. П.12.1.28) и выбрав пункт Rename.

Изменить имя можно также в диалоговом окне Symbol Properties (Свойства образца) (рис. П.12.1.29), вызываемом с помощью пункта Properties (Свойства) этого же контекстного меню.

Рис. П.12.1.28. Контекстное меню элемента библиотеки

Рис. П.12.1.27. Мячик в библиотеке документа

Рис. П.12.1.29. Диалоговое окно Symbol Properties

808

П р и л о ж е н и е 12.1

Здесь же можно изменить тип образца, преобразовав его в клип (Movie Clip), кнопку (Button), графический объект (Graphic). Можно создать новый образец на базе уже существующего, воспользовавшись командой контекстного меню Duplicate.

Создадим мяч красного цвета на базе имеющегося образца Ball_blue. Назовем его Ball_red. Теперь осталось изменить синий цвет заливки на красный. Для этого выберем в библиотеке элемент Blue_red. Дважды нажмем мышью на изображении образца в верхней части окна библиотеки. В окне документа будет отображаться образец со своей временной шкалой (рис. П.12.1.30).

Изменим синий цвет заливки на красный, воспользовавшись ранее рассмотренной панелью Color Mixer.

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

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

Рис. П.12.1.30. Выбираем и редактируем образец

809

П Р И Л О Ж Е Н И Я

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

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

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

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

Для этого откроем окно библиотеки, выберем элемент Ball_red, дважды щелкнем мышью на изображении красного мяча и перейдем в окно документа. Будем предполагать, что мяч делает полный оборот за четыре кадра, т.е. в каждом кадре мяч поворачивается на 90°. Выделим первый кадр образца, выполняем команду Create Motion Tween. Переходим на второй кадр временной шкалы, создаем для него ключевой кадр. Поворачиваем изображение мяча во втором кадре на 90°

Рис. П.12.1.31. Фильм с анимацией вращения мяча

810

П р и л о ж е н и е 12.1

по часовой стрелке. Указанные действия повторяем для кадров 3 и 4. Последующие изображения мяча отличаются от предыдущего поворотом на 90°.

Снова переходим ко второй сцене. Создаем слой вращающийся мяч между слоями Мяч и Стенка. Выделяем первый кадр и помещаем на него перетаскиванием из окна библиотеки экземпляр анимированного образца Ball_red и перемещаем анимированный мяч вниз, как мы это делали для синего мяча (рис. П.12.1.31).

Работа с текстом

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

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

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

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

В левой нижней части панели отображаются координаты левого верхнего угла блока, его высота и ширина (поля X, Y, H, W). Текст внутри блока можно сделать гиперссылкой, предварительно выделив его и введя адрес ссылки в поле URL.

Рис. П.12.1.32. Текстовый блок

Рис. П.12.1.33. Панель свойств для текстового блока

811

П Р И Л О Ж Е Н И Я

Место вывода web-страницы, на которую имеется ссылка, определяется выбором одного из элементов списка Target справа от поля URL:

•_blank — страница загружается в отдельное окно web-браузера;

•_parent — страница загружается в родительский набор фреймов;

•_self — страница загружается в текущую страницу или фрейм;

•_top — страница загружается в текущее окно web-браузера, заменяя собой весь набор фреймов, если он есть.

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

•статический (Static Text);

•ввода (Input Text);

•динамический (Dynamic Text).

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

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

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

По сравнению с панелью для статического текста здесь появился ряд новых элементов. Так под списком выбора типов появилось поле, в котором необходимо указать имя, идентифицирующее поле ввода (при создании поля серым текстом в нем отображается строка <Instance Name>). Каждое поле, создаваемое в документе, должно иметь уникальное имя. Имя используется для доступа к полю из сценариев ActionScript. Возможны различные виды полей ввода, выбираемые с помощью списка справа от полей координаты и размеров:

•однострочное поле ввода (Single Line);

•многострочное поле ввода (Multiline);

•многострочное поле без автоматического переноса строки, строку можно перенести вручную нажатием клавиши Enter (Multiline no wrap);

•поле ввода пароля является однострочным, при этом вводимые символы отображаются в виде звездочек (Password).

Для поля ввода имеется интересная возможность. В него можно поместить HTML-текст, указав это Flash. Так, если текст поместить в теги <U></U>, то при выводе содержимого поля на экран он будет подчеркнут. К сожалению, набор тегов HTML, которые поддерживает Flash, весьма ограничен:

Рис. П.12.1.34. Панель свойств поля ввода

812

Пр и л о ж е н и е 12.1

•<A>…</A> — гиперссылка;

•<B>…</B> — выделение текста полужирным;

•<FONT COLOR=«#ffff00»>…</FONT> — задание цвета шрифта;

•<FONT FACE=«Arial»>…</FONT> — задание шрифта;

•<FONT SIZE=«24»>…</FONT> — задание размера шрифта;

•<I>…</I> — выделение курсивом;

•<P>…</P> — абзац текста;

•<U></U> — выделение подчеркиванием.

Возможность использования тегов HTML включается с помощью кнопки

Render Text as HTML, на которой нарисованы <>.

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

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

Воспользуемся этой возможностью для создания заставки нашего фильма. Назовем его «Анимированный МЯЧ». Заставку представим следующим образом. Буква М вращается вокруг оси, появляясь слева и двигаясь слева направо. Вращающаяся буква Я падает сверху и, наконец, вращающаяся буква Ч появляется справа. После того как появится строка Мяч, над ней проявится строка Анимированный.

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

в меню Modify | Break Apart (Модифицировать | Преобразовать в отдельные объекты). Каждый символ будет преобразован в графический объект и отображаться в синем прямоугольнике (рис. П.12.1.35).

Теперь выделим поочередно каждый из символов и поместим в библиотеку с именами Буква_М, Буква_Я, Буква_Ч. Для этого выберем в меню Modify | Convert to Symbol… (Модифицировать | Преобразовать в образец…).

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

Снова вернемся к первой сцене. Создадим слои для размещения букв М, Я, Ч. Будем считать, что анимация перемещения букв занимает 20 кадров. Перейдем на слой М, поместим за левой границей рабочего листа экземпляр образца Буква_М. Графические объекты, расположенные за границей рабочего листа, при воспроизведении исполняемого модуля Flash не отображаются. Тем самым можем получить эффект набегания из-за границы. Сделаем ключевым 10 кадр и расположим в нем на нужном месте букву М. Вернемся на первый кадр и зададим для него анимацию

Рис. П.12.1.35. Преобразование текста в графические объекты

813