Начинаем изучать Flash

26.05.2009

Здравствуй, дружок! Сегодня я расскажу тебе новую сказку, про то, как создавать интерактивную анимацию.. Или просто анимацию.. Flash, короче…

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

Думаю, стоит привести несколько исторических фактов, для начала. Если посмотреть на название программы, станет ясно, что ее выпустила компания Adobe. Но так было не всегда. Появилась программа, под названием FutureSplash Animator, кажется, в 1996-м году. выпустила ее почти одноименная компания. На тот момент, в ней были только базовые функции анимации, что в 96-м году было и так неплохо.

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

У Adobe, на тот момент, была своя программа flash-анимации, LiveMotion, со значительно скромными функциями. На данный момент, ее разработка, видимо, свернулась.

Итак, в апреле 2007-го года мы получили 9-ю версию Flash, под названием Adobe Flash CS3. Вместе с ней, появился и плеер с таким-же номером. В недалеком будущем ожидается выход новой версии, с еще более продвинутыми возможностями. Пока-же мы имеем следующие

Возможности Flash-плеера, 9-й версии

- программная анимация;
- различные типы обводки (stroke);
- поддержка фильтров и эффектов (blur, glow, drop shadow, bevel, etc);
- новый текстовый движок (FlashType);
- поддержка воспроизведения потокового звука и видео, как встроенного, так и подгружаемого извне;
- собственный, объектно-ориентированный язык программирования ActionScript;
- поддержка XML, JavaScript и международной кодировки символов Unicode;
- собственный HTML-парсер, позволяющий загружать и воспроизводить HTML страницы внутри Flash-роликов.

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

Идеология и принципы работы Flash

Анимация
Если вы уже работали с какой-то программой анимации, то основные принципы анимации вы знаете. Типов анимации существует два. Покадровая и ключевая. В первом случае, каждый кадр анимационной последовательности прорисовывается заново. Во втором — создаются ключевые кадры, через определенный промежуток, а в этих промежутках, анимацию, программа «додумывает» сама. Во Flash используются оба типа анимации, плюс к этому, существует два типа ключевой анимации для различных типов объектов.

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

Итак, основные типы объектов (символов):
- Graphic
- Movieclip
- Button

Еще есть символы типа Font и Video. далее идут символы, которые помещаются в библиотеку извне, такие, как Bitmap (растровое изображение), Sound (звук) и некоторые другие.

Для анимации используются, в основном, первые три.

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

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

Интерфейс программы

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

Как видите, интерфейс не сильно отличается от подобных программ Adobe, например, Illustrator или Photoshop. Тем не менее, отличия в работе есть. Разберемся по порядку.

1. Главное меню
Тут, как водится, находятся основные команды. Объяснять основные команды нет смысла, потому что их вы знаете и так, а остальные, тоже пока не стоит, потому что вы все равно их все не запомните. Просто посмотрите. В процессе работы мы будем к ним обращаться и вы сами решите, какие вам нужны, а какие — нет.

2. Панель Timeline
Здесь и происходит анимация. Тут создаются слои, ключевые кадры, различные маски слоев и папки для их организации. В левой части расположен список слоев, под ним — кнопки управления слоями. Перечислю их по-порядку:

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

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

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

Layer 1 — Пустой ключевой кадр.
Layer 2 — Непустой ключевой кадр. Тут может быть либо какая-то графика, либо объект. В случае покадровой анимации, таких кадров может быть множество.
Layer 3 — Ключевой кадр со статичной анимацией. Аналогичен одному предыдущему кадру, с той разницей, что тут есть последовательность кадров, но без анимации. Подобная конструкция используется для продления времени статичной графики. Если вы будете менять что-то в любом из этих кадров, будет изменяться вся последовательность. То есть, можно считать это одним кадром, растянутым во времени.
Layer 4 — Здесь мы видим два ключевых кадра и анимацию типа Motion Tween между ними. Два крайних кадра — два разных состояния объекта.
Layer 5 — То же, только анимация типа Shape Tween. Типы анимации отличаются цветом.
Layer 6 — Незаконченная Shape Tween-анимация. Есть начальный кадр, но нет конечного. Как правило, это ошибка. Анимацию всегда нужно заканчивать ключевым кадром.

Вертикальная красная полоска с прямоугольником вверху — это Playhead (так называемая «головка воспроизведения»). Ее можно перемещать, двигая верхний красный прямоугольник, либо нажимая на клавиатуре кнопки «<» и «>».

Кнопки (и не кнопки) в нижней части, по-порядку:

Scroll to Playhead — Передвигает текущий вид к положению головки воспроизведения.
Onion Skin — Включает режим отображения промежуточных кадров анимации.
Onion Skin Outlines — Включает схематичное представление объектов, в режиме Onion Skin, для более быстрой их прорисовки.
Edit Multiple Frames — Включает режим редактирования нескольких кадров. Очень удобен для редактирования уже готовой анимации, например, когда вам нужно изменить положение или масштаб, уже анимированного объекта.
Modify Onion Markers — Меню опций для режима Onion Skin.
Текущий кадр — Текущий кадр таймлайна, где находится Playhead.
Скорость (кадров в секунду) — Частота кадров вашего ролика. применяется ко всем объектам текущего проекта.
Текущее время анимации (с учетом общей частоты кадров) — Тут все понятно, надеюсь.

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

Органов управления тут немного, однако все они нам понадобятся в скором времени. Верхние кнопки:

Hide Timeline — Скрывает таймлайн, чтобы увеличить рабочую область.
Back — Служит для перемещения вверх по иерархии объектов.
Значок и имя текущего объекта — Сейчас активна рабочая сцена, поэтому там ее имя. Если вы будете редактировать объект на этой сцене, кликнув на нем два раза, справа от имени появится имя объекта. если в этом объекте есть еще объект и вы захотите его редактировать, добавится еще и его имя. Таким образом, тут будет вся иерархия. перемещаться по ней можно, либо кликая на имени нужного объекта, либо по одному перемещаться вверх, при помощи кнопки Back.

Workspace — Это выпадающее меню, в котором можно выбрать ранее сохраненную схему расположения панелей в интерфейсе программы. Создайте свой набор панелей, расположите их удобным для вас образом и сохраните эту схему для дальнейшего использования.
Scene — О чем я забыл рассказать в начале — анимация во Flash может находиться на нескольких основных таймлайнах. Они следуют друг за другом. По умолчанию, таймлайн (сцена) одна, но можно создать еще. Для этого есть специальная панель. А в этом выпадающем списке можно выбрать сцену для редактирования.
Edit Symbols — Здесь можно выбрать объект из библиотеки, для редактирования. В этом случае, иерархия начнется не с главной сцены, а с этого объекта. Во Flash есть понятия — «Edit Object» и «Edit in Place». В первом случае, объект редактируется отдельно от сцены, во втором, открывается из текущего положения, относительно того места, где он находится в сцене.
Масштаб — Масштаб отображения рабочей области. В дополнение к этому, вы можете пользоваться «Ctrl»+«+», «Ctrl»+«-», как в остальных программах Adobe.

4. Панель Properties

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

Также, здесь есть вкладки еще двух панелей: Filters — на которой можно применять фильтры и эффекты к текущему объекту типа Movieclip и панель Parameters, которая служит для установки параметров для скомпилированных компонентов Flash.

5. Пользовательские панели

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

6. Библиотека

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

7. Панель Инструментов
Стандартная панель инструментов Flash. Она будет подробнее рассмотрена в следующей главе.

Метки: flash