Как создать мультик в macromedia flash 8

Обновлено: 04.07.2024

Знаете ли вы, что на горе Кения, которая находится в тропической Африке, смена поры года наступает каждые сутки? Днем на вершине потухшего вулкана царит лето, а ночью земля покрывается льдом. Невероятно, но это факт! Дело в том, что флора вершины Кении очень чувствительна к тропическому солнцу, которое греет только днем. Ночью же температура падает до нуля и ниже. Если бы я не видел этого своими глазами (документальный фильм BBC), я бы точно не поверил!

Но сейчас вам предстоит покорить другую вершину, которая расположена на материке Macromedia Flash 8 Professional и называется "Управление объектами посредством сценариев". С помощью встроенного языка программирования ActionScript можно обратиться почти к каждому элементу Flash- документа и определить программным путем его реакцию на любые события: загрузка клипа в память, нажатие клавиши на клавиатуре и т.д. Эти возможности Flash с большим успехом используются при написании компьютерных игр и создании многофункциональных интерактивных приложений, главная роль в которых отводится пользователю. И именно эти возможности Flash 8 (и более ранних версий) на протяжении данной статьи станут для вас притчей во языцех.

О Flash: назначение, особенности

Какой современный юзверь не знает "Масяню", "Магазинчик Бо", "Ежи и Петруччо"! Так вот, все эти мультики созданы средствами Flash. Вы когда- нибудь посылали пингвина прямо в "десятку" в YetiSports? Так вот, эта игрушка и многие другие тоже созданы средствами Flash. Вы заходили на сайт Disturbed? Здорово, правда? Так вот, эта и многие другие интернет-странички тоже созданы средствами Flash. Так что же такое Flash? Ответ: Flash — это технология, позволяющая создавать высококачественные мультимедийные интерактивные приложения, которые могут быль использованы в любых областях. Хотите рисовать такие же мультики, игры и сайты? Тогда обзаведитесь Macromedia Flash 8 Professional и как минимум дочитайте эту статью до конца:).

Основными особенностями Macromedia Flash являются:
. Работа с векторной графикой и поддержка растровой.
. Временная шкала, используемая для создания мультипликации.
. Возможность оптимизации готовых роликов.
. Мощный язык сценариев ActionScript.
. Множество компонентов GUI.
. Большой набор средств рисования и публикации.
. Поддержка различных платформ (IBM PC, Macintosh, мобильные устройства) и др.

Каждый графический элемент, расположенный на сцене Flash, называется объектом. Это может быть простейшая геометрическая фигура или целый Flash-ролик. Объекты, находящиеся в библиотеке каждого проекта Flash (Window -> Library), называются символами (Symbols). Любой объект можно превратить в символ командой Modify -> Convert To Symbol. Если объект перетащить из библиотеки символов на монтажный стол (используя Drag & Drop), то он превратится в экземпляр символа (Instance). Экземпляр отличается от символа тем, что любое его изменение не отражается на соответствующем ему символе, а редактирование символа сказывается на всех порожденных экземплярах. Типы символов во Flash приведены в таблице 1.

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

На повестке дня

Сегодня я предлагаю читателю поучаствовать в рисовании и оживлении двояковыпуклой линзы, посредством которой можно рассмотреть мелко набранный текст. Увеличительное стекло должно перемещаться как при помощи мышки, так и при помощи клавиатуры. Действия, которые будут проделаны и описаны, просты и легко повторяются, а их результат может даже пригодиться (идея была мною позаимствована из книги по Flash). Кроме того, вы познакомитесь с принципами управления несколькими взаимосвязанными предметами и анимированными масками. Кто сказал, что маски — это suxx? Вы говорите, ересь. Сжечь их на костре! Маски — это палочка-выручалочка каждого Flash-мейкера. Итак, за дело (не бойтесь — про костер я пошутил:))!

Планирование действий, или ликбез

Будет проще, если каждый предмет — исходный текст, первую маску, увеличенный текст, вторую маску и линзу — расположить на отдельном слое. Для наглядности присвоим слоям имена, характеризующие расположенные на них предметы. Самым первым, т.е. нижним, пусть будет Normal Text, затем — Mask 1, следом за ним — Scaled Text, потом — Mask 2 и, наконец, Zoom. Осталось нарисовать действующие лица нашей пьесы и продумать мизансцену. Теперь, когда предельно ясна как сама цель, так и способ ее достижения, можно попробовать воплотить ее в жизнь.

Работа с масками, или как сделать линзу

С помощью инструмента Text разместите на нижнем слое надпись и превратите ее в объект типа MovieClip с помощью команды Modify -> Convert To Object. Теперь введите его имя на закладке Properties (Ctrl+F3). Пусть будет norm_text (рис.2). Это нам необходимо для привязки к тексту первой маски. Теперь нужно создать саму маску. Для этого в меню Insert выберите New Symbol и в свойствах создаваемой маски укажите тип MovieClip и название Mask 1. В открывшемся окне редактирования нового символа нарисуйте большой черный прямоугольник, а в его середине — белый круг радиусом 60, который затем необходимо удалить. При тестировании ролика (Ctrl + Enter) в этом месте текста видно не будет. Это как раз то, что нужно. Следите за тем, чтобы окружность встала ровно по центру рабочей области — там, где нарисован маленький крестик. Это впоследствии избавит вас от лишней головной боли. Когда маска готова, закройте редактор символов и из библиотеки символов (Ctrl + L) перетащите на второй слой монтажного стола экземпляр только что созданного символа.

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

С помощью наложения двух масок было получено увеличительное стекло. Теперь самое время заняться лупой. Для этого в меню Insert выберите New Symbol и опять задайте тип MovieClip. В моем случае лупа состоит из трех частей: ручки, оправы и ее верхнего слоя. Ручка нарисована инструментом Line и залита градиентом, наложение которого можно отрегулировать Gradient Transform Tool'ом. Оправа и ее верхний блестящий слой — полые (т.е. без заливки) окружности. Заливку в этом случае нужно отключить, чтобы через отверстие в лупе можно было видеть нижние слои, которые вместе образуют увеличительную линзу. Первое кольцо оправы имеет внешний радиус 65, внутренний радиус 55 и толщину 10, второе — 66, 64 и 2. Имейте в виду, что на панели Properties указываются средние размеры, т.е. без учета толщины линии. Поэтому придется самостоятельно рассчитывать границы объектов при "подгонке" частей лупы. Готовую лупу, вернее, ее кольца, также необходимо расположить ровно по центру окна редактора символов — иначе не оберешься проблем. Но об этом в следующем разделе.

I like to move it, move it…

Теперь осталось самое интересное — заставить лупу перемещаться вслед за курсором мыши. Итак, из библиотеки символов перенесите на монтажный стол на слой Zoom экземпляр уже созданной лупы и дайте ей название (рис.4). Я решил не мудрить и записал просто "zoom_1". Теперь выделите лупу, откройте редактор сценариев (F9) и наберите следующий код:

onClipEvent(mouseMove) _root.zoom_1._x = _root._xmouse;
_root.zoom_1._y = _root._ymouse;
_root.mask_1._x = _root._xmouse;
_root.mask_1._y = _root._ymouse;
_root.mask_2._x = _root._xmouse;
_root.mask_2._y = _root._ymouse;
>

Это обработчик события mouseMove, т.е. перемещения указателя мыши, для объекта zoom_1. ОnClipEvent("Событие") — стандартная функция обработки событий для клипов. Ключевое слово _root указывает на то, что объекты zoom_1, mask_1 и mask_2 находятся в основном клипе, а свойства _xmouse и _ymouse позволяют узнать текущие координаты курсора мыши. Дальше все понятно: лупу и обе маски передвигаем в точку (_xmouse, _ymouse), т.е. привязываем к мышке. Теперь при малейшем изменении положения указателя лупа будет следовать за ним. Помните, я вам несколько раз советовал располагать создаваемые символы ровно по центру поля редактора? Теперь самое время это пояснить. Видите ли, в противном случае при задании одних и тех же координат для объектов zoom_1, mask_1 и mask_2, т.е. _xmouse и _ymouse, лупа и маски просто бы разбегались кто куда. Если объекты перемещаются посредством клавиатуры, то это замечание неактуально. В этом случае для zoom_1 нужно написать следующий сценарий:

onClipEvent (enterFrame) Speed = 10;
if (Key.isDown (Key.RIGHT)) this._x += Speed;
_root.mask_1._x += Speed;
_root.mask_2._x += Speed;
> else if (Key.isDown (Key.UP)) this._y -= Speed;
_root.mask_1._y -= Speed;
_root.mask_2._y -= Speed;
> else if (Key.isDown (Key.DOWN)) this._y += Speed;
_root.mask_1._y += Speed;
_root.mask_2._y += Speed;
> else if (Key.isDown (Key.LEFT)) this._x -= Speed;
_root.mask_1._x -= Speed;
_root.mask_2._x -= Speed;
>
>

Это обработчик события enterFrame для лупы, которое возникает при загрузке каждого нового кадра клипа. Объявленная переменная Speed определяет скорость перемещения указателя мыши, а вернее, приращение координат при нажатии на клавиши управления курсора. Для определения активированной клавиши используется метод isDown общего объекта Key. Функция isDown возвращает истину, если была нажата указанная в ее параметрах кнопка. Таким образом, если пользователь хочет переместить лупу вверх и давит клавишу "вверх", то сработает инструкция "if (Key.isDown (Key.UP))…", если влево — то "if (Key.isDown (Key.LEFT))…" и т.д. Теперь остается изменить координаты лупы и масок для каждого случая. Если лупе приказали ползти вверх, тогда ясно, что нужно уменьшить ординату объектов zoom_1, mask_1 и mask_2 на величину Speed. Это делается при помощи оператора "-=", ну, а синтаксис вы видите в листинге. Ту же самую команду можно записать как "_root.mask_1._y = _root.mask_1._y — Speed"(классический вариант). И так, и так правильно (программисты, пишущие на С/С++, ехидно посматривают на недоумевающих паскалистов). Обработчик нажатия остальных трех клавиш записывается аналогично.

Когда сценарий привязан к конкретному объекту, то при обращении к нему для экономии места указывают не полный путь, а ключевое слово "this". Поскольку данный сценарий закреплен за лупой (объектом с именем "zoom_1"), громоздкую запись "_root.zoom_1._x" можно заменить на "this._x". Обращаю ваше внимание на использование прописных букв в зарезервированных словах ActionScript — например, enterFrame, Key.isDown и других. Это не прихоть автора, а особенность синтаксиса языка. Эти и другие слова нужно записывать именно так, и никак иначе. Если вы допустили ошибку в ключевом слове, то оно сразу изменит свой цвет с синего на черный, а компилятор попросит определить неизвестную переменную. Теперь можете откинуться на спинку кресла, выпить чашечку любимого кофе и с неподдельным восхищением посмотреть на результат ваших трудов.

И еще несколько слов

Посредством сценария можно не только перемещать объекты, но и изменять любые из их свойств. Хотите, чтобы лупа вдруг стала полупрозрачной? Нет проблем! Напишите обработчик события загрузки ролика, т.е. "onClipEvent (load)", содержащий команду "this._alpha = 50;" или "setProperty (this, _alpha, 50)". Увеличенный текстовый блок совсем не обязательно мастерить самостоятельно. Для изменения размеров в полтора раза достаточно записать код:

onClipEvent (load) <
this._width += this._width/2;
this._height += this._height/2;
>

Можно даже предусмотреть возможность ввода оптической силы линзы, скорости перемещения лупы и т.д. Клипы также могут использоваться в качестве кнопок (объектов типа Button) и реагировать на нажатие и, извольте, отжатие клавиш мыши. В этом случае функцией для обработки событий выступает не "onClipEvent ("Событие")", а "on ("Событие")". Список событий, обрабатываемых каждой функцией см. в таблице 2. Если скриптов для объектов накопилось очень много, то можно смело пользоваться их браузером на левой панели страницы Actions (рис.5).

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

Подведение итогов

В первую очередь хотелось бы отметить явные преимущества векторной графики во Flash по сравнению с растровой, которые проявляются в следующих аспектах: маленький размер изображения и высокое качество картинок, нарисованных за сравнительно небольшой период времени. Действительно, весь ролик с лупой занимает всего 5 Kb (мне было лень проводить оптимизацию) в формате SWF. Отсюда напрашивается вывод, что, если разрабатывать быстрый (в смысле, быстро грузится) и красивый сайт, то лучше это делать полностью во Flash и, если необходимо, то с минимальным количеством bitmap-текстур и пр. Развитый инструментарий Flash и большие возможности управления содержимым роликов позволяют это сделать. Что касается таких частей web-страниц, как форумы, то их можно смастерить на своем движке отдельно от сайта. Единственная загвоздка — Flash Player необходимой версии, который установлен далеко не на всех машинах. Я думаю, вы уже ощутили, насколько просто во Flash создается рисунок и насколько удобны инструменты, предназначенные для этого. Вспомним хотя бы то, как была нарисована лупа. Кажется, что разработчики старались все сделать так, чтобы пользователь за несколько минут мог получить классное изображение или мультфильм. То же справедливо и для других пакетов Macromedia, например, Freehand. Там вроде такой же набор инструментов. Из растровых графических редакторов ауру Flash точнее всего может передать PaintShop Pro. Если говорить об ActionScript 2.0 и управлении объектами посредством сценария, то перед нами, без сомнения, мощный объектноориентированный язык программирования, который сконструирован так, чтобы быть интуитивно понятным и одновременно позволять вытворять различные нешуточные вещи. В частности, мне кажется, что создавать и располагать объекты динамическим путем в ActionScript легче, чем, например, в Delphi. Если бы ActionScript умел работать с множествами, я бы делал во Flash свой курсовой проект:).

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

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

1. Дунаев В.В. Самоучитель Flash MX 2004. — СПб.: Питер, 2005. -368 с.
2. Справочная система Macromedia Flash 8.

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

Вот и готов наш первый фильм Flash. Давайте, что ли, посмотрим его.

Простейший способ воспроизвести созданный фильм прямо в среде Flash — нажать клавишу < Enter> или выбрать пункт Play меню Control. Flash тотчас воспроизведет наше творение. При этом бегунок будет перемещаться по шкале кадров, показывая воспроизводимый в данный момент кадр.

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

Если мы захотим прервать воспроизведение раньше, чем фильм дойдет до конца, то должны будем нажать еще раз клавишу < Enter> или выбрать в меню Control пункт Stop.

Чтобы зациклить фильм (сделать так, чтобы он воспроизводился бесконечно), мы включим пункт-выключатель Loop Playback в меню Control. После этого, когда воспроизведение дойдет до последнего кадра фильма, бегунок перескочит на первый кадр, и фильм начнет воспроизводиться с начала.

Мы также можем перемещаться по фильму вперед (к концу) и назад (к началу) по кадрам. Для этого следует пользоваться клавишами <точка> и <запятая> соответственно. Также можно выбирать пункты Step Forward One Frame и Step Backward One Frame меню Control. Ну и, конечно, можно просто мышью перетаскивать бегунок в нужном направлении.

Чтобы быстро переместить бегунок на первый кадр фильма ("перемотать" фильм в начало), мы выберем пункт Rewind меню Control или нажмем комбинацию клавиш <Ctrl>+<Alt>+<R>. А пункт Go to End позволит нам переместить бегунок на последний кадр фильма ("перемотав" его в конец).

Для управления воспроизведением фильма мы можем пользоваться одним из инструментариев Flash — пультом (рис. 11.5). Чтобы вывести его на экран, нужно включить пункт-выключатель Controller подменю Toolbars меню Window.

Перечислим все кнопки пульта в порядке слева направо:

? "перемотка" в начало, т. е. перемещение бегунка на первый кадр фильма;

? перемещение на кадр назад, т. е. к началу фильма;

? перемещение на кадр вперед, т. е. к концу фильма;

? "перемотка" в конец, т. е. перемещение бегунка на последний кадр фильма.

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

Еще одно средство Flash будет нам полезно, но не сейчас, а в дальнейшем, когда мы начнем создавать фильмы, содержащие интерактивные элементы (например, кнопки). Это режим воспроизведения фильма в отдельном окне. Чтобы просмотреть фильм в отдельном окне, достаточно выбрать пункт Test Movie меню Control или нажать комбинацию клавиш <Ctrl>+<Enter>.

Что в этом случае сделает Flash? А вот что…

1. Выполнит экспорт нашего документа в формат Shockwave/Flash.

2. Откроет новое окно — окно просмотра фильма.

3. Загрузит получившийся файл Shockwave/Flash в это окно и запустит его воспроизведение.

Для управления воспроизведением фильма в отдельном окне мы можем пользоваться уже знакомыми нам пунктами меню Control (это меню доступно и в окне просмотра): Play, Stop, Rewind, Step Forward One Frame и Step Backward One Frame.

В окне просмотра фильм всегда воспроизводится зацикленным. Чтобы избежать этого, мы отключим пункт-выключатель Loop меню Control этого окна.

Находясь в окне просмотра фильма, можно также задавать качество и масштаб его отображения. Для задания качества служат пункты — переключатели, находящиеся в подменю Quality меню View: Low (низкое), Medium (среднее) или High (высокое; выбран по умолчанию). Для задания масштаба следует воспользоваться уже знакомыми нам пунктами меню View: Zoom In (увеличение масштаба), Zoom Out (уменьшение масштаба) — и пунктами подменю Magnification.

Насладившись своим творением, закроем окно просмотра, щелкнув на кнопке закрытия или выбрав пункт Close меню File этого окна.

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Оформление созданной презентации

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

Контроль анимации

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

1.4. Дополнение созданной модели процессов организационными диаграммами, диаграммами DFD и Workflow (IDEF3)

1.4. Дополнение созданной модели процессов организационными диаграммами, диаграммами DFD и Workflow (IDEF3) 1.4.1. Диаграммы потоков данных (Data Flow Diagramming) Диаграммы потоков данных (Data flow diagramming, DFD) используются для описания документооборота и обработки информации. Подобно IDEF0, DFD

Эффекты анимации

Эффекты анимации Если бы мы работали в Word или Publisher, то на этом, собственно, пришлось бы и остановиться – что можно сделать с неподвижной картинкой? Но слайду в PowerPoint совершенно нет нужды быть неподвижным! Напротив, ему это в корне противопоказано.Надписи, картинки и прочие

Создание анимации

Создание анимации Теперь нужно научиться перемещать объект по экрану. Если это делать достаточно быстро, то у пользователя создается ощущение непрерывного воспроизведения анимации. Для этого следует создать метод updatePositions, который позволит перемещать изображение. Пока

1.5. Дополнение созданной модели процессов диаграммами DFD и Workflow (IDEF3)

1.5. Дополнение созданной модели процессов диаграммами DFD и Workflow (IDEF3) 1.5.1. Диаграммы потоков данных (Data Flow Diagramming) Диаграммы потоков данных (Data flow diagramming, DFD) используются для описания документооборота и обработки информации. Подобно IDEF0, DFD представляет модельную систему как

Создание анимации

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

Два вида компьютерной анимации

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

Создание покадровой анимации

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

Создание кадров анимации

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

Правка анимации

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

Еще раз об "оборванной" анимации

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

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

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

Параметры внутренней анимации

Параметры внутренней анимации Теперь давайте выделим на рабочем листе экземпляр нашего анимированного образца и посмотрим, что нам предлагает панель Properties. Если это экземпляр графического образца, эта панель примет вид, показанный на рис. 13.4. В данный момент нас

Создание многослойной анимации

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

Управление воспроизведением анимации

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

Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:

• анимационные эффекты — программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;

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

• автоматическая tweened-анимация, или анимация трансформации, — пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.

Анимационные эффекты

Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:

• графические объекты, включая формы, сгруппированные объекты и графические символы;

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

В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode.

Рис. 1. Выделенный текстовый объект

В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.

Рис. 2. Панель Explode

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

Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur. В результате получим следующий ролик.

Рис. 3. Растровое изображение, импортированное на сцену

Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) — в результате появится панель Blur.

Рис. 4. Кнопка Edit находится внизу на панели Properties

В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).

Рис. 5. Панель Blur позволяет поменять настройки эффекта

Рассмотрим простейший пример — листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.

Рис. 6. Первый ключевой кадр анимации

Нарисуем кленовый листочек, например такой, как показано на рис. 6, — соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр — это кадр, в котором происходит помещение содержимого или его изменение.

Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого

Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe. В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).

Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).

Рис. 8. Последний кадр анимации

Обратите внимание на панель Properties (рис. 8) — в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.

Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie. Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.

Рис. 9. Просмотр фильма в режиме Bandwidth Profiler

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

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

Рис. 10. Объект автоматически превращается в графический символ

Рис. 11. Каждый новый символ становится частью библиотеки

Если выполнить команду Window => Library, то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween.

Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween

Выполнив команду Control => Test Movie, получим информацию, представленную на рис. 13.

Рис. 13. Просмотр фильма в режиме Bandwidth Profiler

Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше — всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.

Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм.

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

Рис. 14. Выберем максимальное ускорение объекта Ease = –100

Для этого выставим значение параметра Ease равным –100 (рис. 14). В результате получим фильм. Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.

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

Движение по заданной траектории

Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide.

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

Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15).

Рис. 15. Пример задания траектории движения

Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) — рис. 16.

Рис. 16. Параметр Snap задает режим привязки к траектории движения

После того как вы поставите флажок Snap, центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17).

Рис. 17. Объект как бы прилипает к траектории движения своим центром

Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal, — в результате получим фильм.

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

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

Рис. 18. Если поставить флажок Orient to Path, птица будет лететь головой вперед

Необходимо поставить флажок Orient to Path, и движение птицы изменится на вполне привычное (исходник к данному ролику — полет птицы.fla).

Рис. 19. Добавление одноцветного фона

Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.

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

Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20).

Рис. 20. На новом слое создадим неподвижный фоновый объект

Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз.

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

Рис. 21. Для анимации облака создадим отдельный слой

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

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

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

Добавление ключевых кадров в Macromedia Flash Professional

Для того, чтобы добавить ключевой кадр, выделите на временной ленте кадр, который будет ключевым, и выберите в меню Insert — Timeline — Keyframe . Можно также для создания ключевого кадра кликнуть на нужном кадре правой клавишей мыши, и выбрать команду Insert Keyframe .

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

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

Ключевыми кадрами можно сделать не все кадры. Допустим, Вы сделали ключевыми кадры 1, 5, 6, 7 и так далее. Изображение, которое Вы создадите в кадре 1, будет оставаться видимым, пока не дойдет очередь до кадра 5. Таким образом Вы как-бы увеличиваете длительность проигрывания первого кадра в пять раз.

Создание покадровой анимации

Сделайте изображение в первом кадре.
Выберите кадр, с которого начнется анимация. Сделайте его ключевым с помощью меню Insert — Timeline — Keyframe , или с помощью клика правой клавишей мыши Insert Keyframe .
Измените изображение в новом ключевом кадре.
Продолжайте добавлять новые ключевые кадры и изменять их содержимое до тех пор, пока анимация не будет готова.
Протестируйте Вашу покадровую анимацию, нажав Enter или выбрав в меню Controle — Play .

Копирование изображений при создании покадровой анимации

Для создания изображений в ключевом кадре может возникнуть необходимость копирования изображения, которое есть в другом кадре. Для этого выделите кадр, изображение которого будете копировать, и выберите в меню Edit — Select All , или нажмите клавиши Ctrl+A . Все изображение станет выделенным. После этого копируете изображение с помощью меню Edit — Copy (или Ctrl+C ), затем выделяете ключевой кадр, в который Вы будете копировать изображение, и выбираете меню Edit — Paste in Place (или Ctrl+Shift+V ). Изображение будет вставлено в новый ключевой кадр, и Вам останется только его отредактировать.

Еще проще скопировать сам ключевой кадр, и вставить его в другое место на временной ленте. Для этого нажимаете на кадре, который Вы хотите скопировать, правой клавишей мыши, и выбираете Copy Frame . Нажимаете правой клавишей мыши после этого на кадр, вместо которого хотите поставить скопированный кадр, и выбираете Paste Frame . Кадр будет скопирован.

Работа с кадрами в программе Macromedia Flash

Insert Frame — вставить кадр;
Insert Keyframe — вставить ключевой кадр;
Remote Frames — удалить кадры (один или несколько). Если Вы выделите сразу несколько кадров с помощью перемещения по ним мышкой с нажатой левой клавишей, Вы их сразу все можете удалить.
Insert Blank Keyframe — вставить пустой ключевой кадр, изображение в котором не будет повторять изображение предыдущего кадра;
Clear Keyframe — удалить изображение ключевого кадра, при этом он перестанет быть ключевым.
Clear Frames — удаляет изображение кадров (одного или нескольких). Если удалить изображение ключевого кадра, он станет пустым ключевым кадром.

Создаем анимацию в программе Macromedia Flash

Сделайте такой, или похожий ролик:

и сохраните его с помощью меню File — Save as , в формате .fla .

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

Используйте при создании Вашей покадровой анимации инструмент Text .

Инструмент Text

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

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:

Читайте также: