Итак, нам нужно экспортировать анимацию из Flash для размещения ее на Youtube. Сервис Youtube предназначен для воспроизведения растрового потокового видео и все форматы, которые мы туда загружаем, он пытается конвертировать в свой формат. (Если точнее, в формат FLV, это конечно не его формат, но тем не менее — это потоковое видео.)

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

Для начала нужно правильно экспортировать анимацию из Flash. Сделать это можно, выбрав в меню File команду Export > Export Movie.

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

Размер нужно установить равный размеру текущей сцены, либо любой другой, вам необходимый. Если в вашей анимации присутствуют только векторные объекты, то выходной размер значения не имеет. А имеет значение два флажка: «Maintain aspect ratio» и «Smooth». Первый отвечает за соблюдение пропорций ролика, второй — за сглаживание тонких линий. А, параметр «Compress» должен быть отключен. Сжимать видео мы будем позже.

Хочу отметить, что экспортируется нормально только Shape/Motion tween анимация. Программная анимация не экспортируется. Даже самая примитивная. В моем ролике, солнце вращалось вокруг своей оси, простой функцией _rotation += 1, однако, при экспорте солнце стало неподвижным. Имейте это в виду.

Ну вот, мы получили видео в несжатом формате. Весит оно много. Теперь его надо подготовить к отправке на Youtube, то есть, сжать.

Для этого можно использовать одну из великого множества имеющихся бесплатных и не очень, программ-кодеров. Но, раз уж мы работаем с пакетом Adobe, в нем должна быть программа, под названием Adobe Media Encoder. Собственно, это то, что нам нужно.

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

Итак, запускаем программу и бросаем ей в окно наше несжатое видео. Теперь нас интересует два селектора: «Format» и «Preset».

В первом выбираем «FLV/F4V», во втором — «FLV — Same as source».

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

и видим окно параметров сжатия.

Переходим на вкладку «Video». Тут нас интересует параметр «Bitrate». Устанавливаем ему значение побольше. На этом настройки и заканчиваются. Запускаем конвертацию и через несколько секунд или минут (или часов, в зависимости от длительности ролика) получаем готовый видеофайл для загрузки. Можно еще поэкпериментировать с настройками «Bitrate settings», но, как показывает практика, вышеприведенных вполне достаточно.

Еще один формат, на мой взгляд, заслуживает доверия. Это формат H.264. Появился он не так давно и отличается лучшим качеством при большем сжатии. В Adobe Media Encoder есть даже пресет, специально созданный для Youtube. К сожалению, даже несмотря на то, что пресет этот разработан для Youtube, при загрузке файла .все равно происходит его пережатие на сервере, поэтому надо постараться готовить файл в максимальном качестве. Схема действий тут такая-же, как и в предыдущем случае. Экспортируем файл из Flash, загружаем в кодировщик и выбираем в нем два пресета, соответственно:

Затем, редактируем свойства второго

Тут параметров еще больше и настройки иные. На выбор нам дается два ТВ-стандарта, NTSC и PAL. А это значит, что исходный размер картинки должен соответствовать либо 720х480, либо 720х576 пикселей. Все остальное растянется или сожмется под этот размер. Это неудобно, с одной стороны, а с другой — ваш ролик, как правило, с пропорциями 4:3, там что остается только экспортировать его из Flash с предлагаемой высотой кадра, то есть 480 или 576.

Выбираем нужный стандарт, нужные размеры кадра и устанавливаем значение «Maximum Bitrate» опять побольше. В итоге, получаем файл, формата MP4, который можно легко просмотреть при помощи QuickTime плеера.

Вот и все, удачи!

Ну и компьютер, само собой.

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

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

Полученную секвенцию нужно дополнительно обработать, вырезав фигурку из фона, затем изменить размер фотографии, чтобы он соответствовал нашим требованиям. У меня фотографии размером 500х333 пикселя. Подготовленные фотографии необходимо сохранить в формате PICT, либо в любом другом, поддерживающем прозрачность, Например, PSD или PNG. К сожалению, мой Flash отказался открывать эти два формата, согласился лишь на PICT. Как вариант, можно сделать видеофайл из этой секвенции и сохранить в формате Flash Video, с альфаканалом. Однако, это тоже не выход. Итоговый файл будет меньше, но Flash-плееру придется декодировать кадры видео в реальном времени, а эта операция потребляет очень много системных ресурсов. Флешка будет просто «тормозить».

Итак, фотографии подготовлены, можно приступать. секвенцию для этого урока можно скачать здесь. Создаем новый документ, размером 500х333, с частотой кадров — 25. Затем, в библиотеке нужно создать новый пустой movieclip. Назовем его «vinni» и откроем для редактирования. Затем, импортируем в него нашу секвенцию картинок. Да, и не забудьте, что у картинок должны быть последовательные номера. (например, pic_01, pic_02, pic_03 и так далее.)

Делается это так: выделяете первый кадр на таймлайне, нажимаете Ctrl+R и выбираете только одну, первую картинку секвенции. Flash вам сообщит, что найдена секвенция и предолжит импортировать остальные кадры. Также, возможно вам сообщат, что количества кадров на таймлайне недостаточно для импортирования такого количества картинок и предложат их увеличить. Соглашаемся и ждем, пока все картинки загрузятся. На таймлайне их сразу станет видно. Проведите головкой воспроизведения по кадрам таймлайна и вы увидите, что наш винни крутится вокруг своей оси. Это нам и нужно.

Теперь возвращаемся на главную сцену и помещаем нашего винни-пуха на первый кадр единственного имеющегося там слоя. Если протестировать ролик, нажав Ctrl+Enter, мы увидим крутящуюся фигурку. Значит, все сделано правильно. Добавляем на главной сцене еще один кадр, чтобы наш мувик занимал два кадра и создаем еще два слоя. В первом из них делаем оба пустых кадра ключевыми. Сделать это можно, выделив второй кадр и нажав F6. На втором кадре пишем следующий код:

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

Теперь выделим нашего медведя и на панели Properties дадим ему имя. Например, «vi». Это нужно для обращения к этому movieclip’у из Actionscript.

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

В этом случае, плеер отслеживает положение мыши по оси «X» и устанавливает головку воспроизведения на кадр, соответствующий координате мыши. Однако, сцена у нас имеет ширину в 500 пикселей, а кадров всего 48. Таким образом, плеер будет пытаться воспроизвести медведя на кадрах от 49 до 500. Но их у нас нет. Эту проблему можно решить, разделив ширину сцены на равные 48 частей и присвоить им по единице приращения, относительно координат мыши. Простым делением 500/48 мы получаем число, примерно 10,5. На это число и поделим текущую координату мыши. Для удобства, присвоим получившееся значение, переменной.

Получится так:

И, чтобы все было точно, округлим значение переменной до целого числа, при помощи оператора «Math.floor» Ну, а теперь нужно сказать плееру, чтобы он устанавливал головку воспроизведения на кадр, соответствующий нашей переменной. Итоговый код будет выглядеть так:

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

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

Поскольку, наш ролик весит почти мегабайт, понадобится какое-то время для его загрузки. Чтобы зритель не скучал в это время, надо сделать ему предзагрузчик. Делается он так: нажимаем Shift+F2 для вызова панели со сценами и добавляем новую сцену. Помещаем ее вверх, чтобы она была первой и начинаем работать с ней. Добавляем еще один кадр на таймлайне, создаем еще один movieclip с какой-либо зацикленной анимацией внутри него и помещаем его на слой сцены-загрузчика. Я сделал movieclip с картинкой внутри и заставил ее мерцать в случайном порядке. На самом клипе есть простой код для этого:

Он означает, что когда movieclip появляется в кадре, у него меняется прозрачность в случайном порядке. Подробнее объяснять не вижу смысла, думаю, слова «this», «alpha» и «random» всем знакомы, хотя-бы из уроков английского.

Создаем еще один слой, еще один movieclip (на этот раз пустой) и кладем его туда. На клипе (не на кадре) пишем следующий код:

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

Прочитав все предыдущие статьи, вы, вероятно, уже захотели сделать свой собственный сайт. Необязательно, но, скорее всего. Что ж, вполне понятное желание. Однако, как его сделать более оптимально? Сделать все в одном файле SWF? Если у вас там будет растровая графика, то весить ваше творение будет очень много. К тому-же, обновление его потребует переделки всего проекта целиком и многократной закачки на сервер. Да и загружаться оно будет очень долго. Как этого избежать?

Ну вот, задал себе кучу вопросов. теперь надо на них отвечать…

Ответ простой. Надо поделить сайт на части и загружать их по отдельности. Давайте построим схему вашего воображаемого сайта. Из чего он состоит?

1. Общий загрузчик, который загружает все элементы сайта.
2. Заголовок сайта
3. Навигация. Куча кнопок, которые загружают страницы с разделами сайта
4. Собственно, разделы сайта, которых может быть даже больше, чем куча кнопок в навигации.

Итак, с главным определились. Теперь дело за малым — все это сделать. Допустим, мы сделали все по-отдельности. В разных проектах, получилось много разных файлов. Теперь это надо собрать.

Поможет нам в этом, команда «loadMovie()«. Она позволяет загружать внешние файлы из других файлов SWF. В скобках ей нужно указать два параметра: имя загружаемого файла и уровень, на который его загружать. С именем все понятно, а про уровни я расскажу подробнее.

Уровни похожи на слои. Вы можете загружать разные SWF-файлы поверх друг друга. Первый загруженный файл располагается на нулевом уровне. Тот, который загружается поверх него, имеет уровень, номером выше. Какой именно — вы указываете сами. Всего их может быть 999, вроде. Короче, много

Таким образом, мы встраиваем в HTML-страницу, файл-загрузчик. Ему присваивается номер уровня — 0, по умолчанию. Этот загрузчик загружает заголовок сайта на уровень 1, тоесть выше. Еще выше загружается файл с кнопками. Это уже уровень 2. Потом можно загрузить первый раздел сайта на уровень 3. Впоследствии, при помощи кнопок навигации, можно загружать на уровень 3, другие файлы с разделами сайта. Они будут заменять собой имеющиеся там.

Схематично, это будет выглядеть так:

Давайте теперь приступим к практике и создадим простой сайт с данной структурой. Создайте пустой проект с размерами 500х500 пикселей и сохраните его под именем «loader.fla»

Далее, создайте еще три, с такими-же размерами и сохраните их под именами: «head.fla«, «navigation.fla» и «chapter_01.fla«.

Первый нам пока не нужен, оставим его в покое. Откройте файл «head.fla» и нарисуйте в нем заголовок сайта. Сильно не старайтесь, доделаете красоту потом. Просто напишите в нем, что он заголовок. У меня получилось так:

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

Проекты «chapter«, как вы понимаете, нужно размножить, сделав из первого — четыре. Имена файлов у них будут, соответственно: «chapter_01.fla«, «chapter_02.fla«, «chapter_03.fla«, «chapter_04.fla«. Для порядка, можете разместить в них разную информацию, чтобы было понятно, что они разные.

Теперь начинается самое интересное. Мы будем это собирать.

Открывайте проект «loader.fla«, создавайте в нем новый слой и на первом и единственном кадре этого слоя пишите такой код:

Таким образом, наш загрузчик «loader.swf«, который мы встроили в страницу, загружает на себя еще 3 файла, на разные уровни. Сайт готов.

Готов, да не совсем. Осталось сделать навигацию. Открываем проект «navigation.fla«, выделяем первую кнопку и пишем на ней следующий код:

Этот код заставляет кнопку, при нажатии на нее (и отпускании), загружать ролик «chapter_01.swf» на уровень 3. То же самое нужно проделать и с остальными кнопками, изменив имя загружаемого ролика. Для кнопки «Chapter 2» это будет «chapter_02.swf«, для кнопки «Chapter 3» это будет «chapter_03.swf«, для «Chapter 4» — «chapter_03.swf«. Публикуем проект. Вот и все. Теперь все должно работать. У меня получилось вот так:

Скачать проект целиком можно здесь.

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

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

Команды языка ActionScript чувствительны к регистру. То есть, команда «GotoAndPlay» должна писаться именно так. Если написать «Gotoandplay» или как нибудь иначе, это вызовет ошибку. Далее, все команды должны закрываться точкой с запятой. Ее отсутствие тоже может вызвать ошибку.

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

Код можно назначить либо на кадр таймлайна, либо на объект Movieclip или Button. Соответственно, код можно назначить кадру таймлайна, внутри Movieclip. На Graphic код назначить нельзя.

Многие синтаксические правила схожи с правилами языка JavaScript. А более подробно про синтаксис ActionScript можно почитать в стандартном Help либо на сайте Adobe.

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

Далее, открываем редактор, кнопкой F9 и щелкаем на двадцатом кадре, слоя «actions«. Нажимаем F6, для создания ключевого кадра. В редакторе пишем следующий код:

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

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

Создаем еще один слой, ставим в 20-м кадре пустой ключевой кадр и помещаем в него кнопку, то есть, символ Button. Почему нужно создавать пустой ключевой кадр? А потому что, если этого не делать и просто поместить кнопку в слой, она будет начинаться с первого кадра.

Теперь у нас есть кнопка. Надо назначить код на нее. Делается это так-же. Выделяем кнопку и вызываем окно редактора, нажав F9. И пишем в нем следующий код:

То, что мы написали, есть реакция кнопки на событие. Если происходит событие «on(release)«, то выполняется действие, заключенное в фигурные скобки, то есть «gotoAndPlay(20);«. «release» в данном выражении — это отпускание кнопки, после нажатия. Если вам нужно, чтобы реакция была на нажатие, то следует написать «press«. Есть еще такие события, как «rollOver» и «rollOut» — это работает при наведении мыши на кнопки и на уведение с нее, соответственно. Есть еще несколько событий для кнопок, я не буду их тут описывать. Посмотрите в помощи. А у нас получилось вот, что: 

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

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

Тут речь пойдет об управлении символами из других символов. Честно говоря, под символами, в данном случае, подразумевается Movieclip. Другие символы не предназначены для управления, посредством ActionScript. 

В данном примере показано последовательное воспроизведение одного Movieclip, управляемого кнопками. Каждая из этих кнопок заставляет его воспроизводиться с разных кадров. Для изготовления подобного ролика нам потребуется кнопка — 1 штука, Movieclip c анимацией — 1 штука. А так же, различные цифры и буквы для оформления. Внутри Movieclip’а у меня есть слой с кодом, в котором стоит команда Stop на первом, девятом, девятнадцатом и двадцать девятом кадрах. Это нужно для того, чтобы он останавливался время от времени, а не крутился по кругу. В основной сцене лежит одна кнопка. Она размножена 4 раза, а чтобы не рисовать 4 разных кнопки, поверх каждой написано свое число, в отдельном слое. Рядом-же лежит наш Movieclip с анимацией. А теперь начинается интересное. выделите Movieclip на рабочей области и посмотрите на панель Properties.

Для управления клипом, посредством языка ActionScript, нам нужно этому клипу дать имя. У него уже есть имя «mc«, под которым он был создан и которое мы видим в библиотеке. Однако, для программных манипуляций нужно другое. Называется оно Instance Name. Зачем их два? Поясню. В библиотеке хранится оригинал нашего символа со своим именем. Оно действительно только для редактирования символа, как графического объекта. Мы можем разместить его на рабочей области несколько раз. И это будет не сам символ, а его экземпляр. Таким образом, если вы отредактируете этот символ в библиотеке, изменятся и все его экземпляры в рабочей области. А если мы каждому такому экземпляру дадим свое имя, мы сможем управлять ими по-отдельности, посредством языка Actionscript. Итак, назовем наш клип «my_mc«. Теперь им можно управлять программно. Выделите первую кнопку на рабочей области и откройте редактор кода. Для первой кнопки надо написать следующее:

что, буквально означает:

Двойной слеш — «//» означает начало строчного комментария. Вы можете комментировать хоть каждую строчку своего кода, что я вам и советую делать, потому что, через пару недель вы можете и не вспомнить, что этот код означает. 

Далее, скопируйте этот код и вставьте его на остальные кнопки, лишь изменив в нем цифру 2, на 10, 20 и 30, соответственно. Действие у кнопок повторяется, только воспроизведение начинается с разных кадров. 

Выражение «my_mc.gotoAndPlay()» — это пример адресации. То есть путь, к объекту. Попробую объяснить на детском примере. У нас есть символ «mc_car«, внутри него лежат три символа «mc_wheel1«, «mc_wheel2«, «mc_wheel3«. Нам нужно заставить крутиться одно колесо. 

Для этого нам нужно обратиться к нему, с указанием пути, то есть: «mc_car.mc_wheel1.ROTATE«. Это есть относительный путь, потому что машина лежит в основной сцене. У основной сцены тоже есть имя: «_root«. Мы можем обратиться к колесу при помощи абсолютного пути. Выглядеть это будет так: «_root.mc_car.mc_wheel1.ROTATE«. Эти два выражения равнозначны, с той лишь разницей, что второй вариант менее гибкий. 

Второй вариант из детской сцены: нам нужно из второго колеса обратиться к крану, который лежит тоже в основной сцене. То есть, нам нужно подняться по иерархии на один уровень выше. Выражение для этого будет выглядеть так: «this._parent._parent.mc_crane.DOSOMETHING«.

Исходя из предыдущего, наш код можно записать и так:

 Это будет абсолютный путь к объекту.

Существует и другой тип адресации. Относительно текущего символа. Выделите my_mc и напишите код на нем:

Да, вот так все просто. При нажатии на сам символ, он начнет воспроизведение со следующего кадра. А, так ака, в нем, через определенные промежутки, стоит команда «Stop«, то работать он будет таким-же образом, как если бы мы нажимали на кнопки. Только в данном случае он будет воспроизводиться последовательно.

Анимация бывает нескольких типов. Анимировать можно положение или форму фигуры, перемещая точки, тем самым трансформируя ее в другую фигуру. Можно так-же, анимировать свойства этой фигуры, такие, как цвет, прозрачность, расположение и настройки градиента, цвет, толщину и тип обводки. Это все касается фигур, нарисованных в рабочей области или внутри символов и называется Shape Tween. В процессе анимации можно пользоваться, либо ключевыми кадрами, либо покадровой анимацией. Ключевая анимация, конечно, проще, так как, изменять нужно не все кадры, часть их, между ключевыми, изменяется автоматически. Но, иногда бывает необходимость и в покадровой анимации. Когда какую использовать — на ваш выбор.

Motion Tween — второй способ анимации. Используется для анимации символов, таких, как Graphic, Movieclip и Button. Здесь доступны другие свойства. При помощи Motion Tween можно анимировать положение символов, их масштабирование, вращение, а так же параметры, находящиеся в селекторе Color панели Properties. К ним относятся: яркость, тонирование символа цветом, прозрачность и набор параметров Advanced, который сочетает в себе три предыдущие. При ключевой анимации поддерживается Easing, то есть, анимация с ускорением и замедлением, что весьма полезно при реалистичной анимации персонажей, да и любых других объектов, которые должны двигаться реалистично.

Shape Tween

Нарисуйте в рабочей области прямоугольник, с обводкой черного цвета и толщиной линии в 2-3 пикселя. Если он нарисуется с заливкой, выделите ее одиночным щелчком и удалите. Сейчас нам понадобится только обводка.

На таймлайне, щелкните правой кнопкой на вновь созданном кадре и выберите Create Shape Tween. Ключевой кадр станет зеленого цвета. Далее, выделите щелчком, кадр 10 на том-же слое и нажмите «F6″ для создания второго ключевого кадра.

Если вы все сделали правильно, на таймлайне будет вот такое:

Это и есть ваша первая анимация, поздравляю! Но, два ключевых кадра, еще не есть анимация. Щелкните на таймлайне на кадре 10, выделив его. Вместе с ним выделится все, что находится в рабочей области на этом кадре. Снимите выделение с фигуры и подведите курсор мыши к верхней горизонтальной линии нашего прямоугольника, чтобы рядом с курсором появился значок дуги. Это позволит изгибать сегменты фигуры. Схватите сегмент за середину и протащите немного вниз, чтобы он изогнулся. теперь можно посмотреть, что получилось. Протащите Playhead по вашим 10-ти кадрам анимации и посмотрите, как фигура трансформируется.

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

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

Вот еще один пример неправильного Shape Tween. Я привел его, чтобы показать, как можно бороться с некоторыми недостатками этого метода. Итак, эта фигура просто поворачивается на 90 градусов, но так, как программа двигает точки по кратчайшему пути, получается такая кракозябра. Разработчики, видимо, ничего не смогли с этим сделать, поскольку придумали специальные прищепки, которые вешаются на точки и помогают программе их не путать при трансформации. Называются они Shape Hints. Устанавливаем первый при помощи команды Modify > Shape > Add Shape Hint или комбинацией Ctrl+Shift+H. Появляется красная точка с буквой «а«. Ее можно перетаскивать. Перетаскиваем ее на первую проблемную точку. Повторяем процедуру. Точка с буквой «b«. Ставим ее на вторую точку. И так далее, пока все проблемные точки не будут защиплены этими точками. Это, кстати, надо делать на первом ключевом кадре анимации. На втором ключевом кадре нужно определить, во что превратились наши первоначальные и передвинуть нужные хинты на них. У меня получилось вот так:

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

Motion Tween

С этим типом анимации все немного проще, с одной стороны. Сторона эта называется «символы». Именно с ними и работает этот тип анимации. Алгоритм действий тут такой-же. Только сначала нужно создать этот самый символ. Нарисуйте небольшую окружность на рабочем поле, затем выделите ее, нажмите F8 и преобразуйте выделение в символ Graphic, с центром посередине. Переместите его в левый верхний угол. Потом, точно так-же, кликните правой кнопкой мыши на кадре и выберите команду Create Motion Tween. Если снять выделение с кадра, вы увидите, что он стал голубым. На кадре 20 нажмите F6 для создания еще одного ключевого кадра и передвиньте символ в правый верхний угол. Далее, опять F6 на кадре 30 и передвигаем символ вниз, в правый нижний угол. Еще один ключевой кадр на 50-м кадре и сдвигаем символ вправо, до угла. Остался последний кадр. Можно поступить, как и в остальных случаях, но мне хочется, чтобы символ встал точно на то место, откуда он начал свое движение, поэтому, для создания ключевого кадра, я сделаю следующее: правой кнопкой нужно щелкнуть на первом ключевом кадре и выбрать команду Copy Frames, затем на кадре 60 опять щелкнуть правой кнопкой и выбрать команду Paste Frames. Последний ключевой кадр создастся и будет точной копией первого. Круг замкнулся. Вернее, прямоугольник.

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

Easing

Сравните эти похожие, на первый взгляд, анимации. Видите разницу?

Да, возде углов, объект замедляется. Это возможно, благодаря функции Ease, которую можно применить к ключевому кадру, независимо от типа анимации, Shape Tween или Motion Tween. Делается это так: выделяете ключевой кадр, в панели Properties появляется такое:

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

рядом есть кнопка Edit. Если вы нажмете ее, появится вот такой график:

С его помощью можно точнее настроить поведение анимации. Если вы пользовались подобными установками, вы знаете, как оно работает. По вертикали идет процентное значение анимации, по горизонтали — кадры, в которых она совершается. Таким образом можно установить несколько точек изменения скорости анимации и отрегулировать их по вашим потребностям. Если снять галку с пункта Use one setting for all properties, становится доступной раздельная регулировка различных параметров. Таких, как положение, вращение, масштабирование, цвет и фильтры.

Анимация по пути

Этот тип Motion tween анимации представляет из себя, движение объекта по пути, который вы заранее построили на отдельном слое, при помощи инструмента Pen, например. Итак, создаем новый слой и рисуем пером, какую-нибудь, кривулину. У меня получилось вот так:

Теперь нам нужен еще один слой с графическим объектом на нем и Motion Tween — анимацией, чтобы прицепить к нему этот путь. Объект можно взять из предыдущего примера. Затем, на слое с путем нужно щелкнуть правой кнопкой мыши и выбрать в меню пункт Guide. Иконка слоя изменится и он станет слоем пути. Далее, нужно перетащить наш слой с графическим объектом, под слой пути. Чтобы он стал под ним и немного правее. Примерно, вот так:

Есть альтернативный путь для создания Guide-слоя. Надо щелкнуть правой кнопкой мыши на слое с графическим объектом и выбрать в меню Add Motion Guide. В этом случае, Guide-слой создастся автоматически.

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

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

Маски

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

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

Маска создается, «подминая» под себя ниже лежащий слой. При этом, оба они становятся заблокированными, как видите.

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

В первом случае я просто подвинул маску сверху вниз, чтобы буквы открылись «шторкой». Анимирована маска при помощи Shape Tween, так как это не символ и создавать его нет нужды.

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

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

Фильтры и эффекты

В качестве Motion Tween-анимации, к символам любого типа, можно применять различные фильтры и эффекты из панели Properties. Начнем по порядку:

В первом примере я создал Graphic-символ с полупрозрачным квадратом внутри, затем создал 4 одинаковых слоя с этим объектом и одинаковый Motion Tween на всех этих слоях. В первом кадре всех слоев я убрал прозрачность объектов до нуля и масштаб снизил до 20%. Вот, с этого места — подробнее. Для того, чтобы применить фильтр к объекту, надо выделить его на рабочей области и в панели Properties, в окошке Color выбрать нужный фильтр. Я выбрал Alpha:

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

Затем, в панели Transform я установил для всех объектов, начальный масштаб 20%. Можно, конечно было их и вручную сжать, но так точнее.

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

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

Со вторым примером, думаю, разберетесь и сами.

Эффекты представлены несколькими стандартными фильтрами (Blur, Glow, Drop Shadow etc.), которые применяются немного иначе. Начнем с того, что применяться они могут только к символам, типа Movieclip. Для назначения эффекта нужно выделить объект и перейти на вкладку Filters:

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

Заключение

Ключевые кадры, создаваемые на таймлайне, необязательно могут содержать только Tween-анимацию между собой. Можно комбинировать их между tween и линейной анимацией. Например, нам нужно, чтобы объект переместился и остался до конца анимации, в одном месте. Создаем Motion Tween с двумя кадрами, перемещаем объект, куда надо, а на последнем кадре щелкаем правой кнопкой мыши и выбираем Remove Tween. А потом мы решаем, что, после того, как он постоит немного на месте, он опять должен переместиться или изменить цвет. Щелкаем на кадре, где должна начаться анимация и нажимаем F6, для создания ключевого кадра. Затем создаем на нем Tween, щелкая правой кнопкой и выбирая в меню Create Motion Tween (или «Create Shape Tween«) и создаем еще анимацию. В итоге, кадры на слое могут выглядеть вот так:

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

Пришла пора разобраться с основными принципами работы Flash, а именно, с символами. Как известно, основных символов — три, это Movieclip, Graphic и Button. Не вижу смысла делить их описание, начнем сразу с практики.

Создадим новый документ и нарисуем в нем прямоугольник, небольшого размера. Далее, инструментом Selection Tool рисуем рамку вокруг этой фигуры, чтобы выделить ее всю и выбираем в меню Modify, пункт Convert to Symbol или просто нажимаем F8.

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

Начнем с символа Graphic. Выберите его тип, введите имя «graphic», для наглядности и нажмите кнопку OK. В библиотеке сразу появится наш новый символ. Теперь, на рабочей области находится символ, а не графический объект. Вы не сможете его редактировать, он выделяется сразу весь. Не страшно. Создадим еще объект. Нарисуйте окружность, таким же образом, выделите ее и опять нажмите F8. Теперь установим тип Movieclip и введем такое-же имя. Еще один объект появился в библиотеке. Таким же образом создайте объект Button, нарисовав овал, например.

Вот, что мы имеем в библиотеке. Три объекта, различных типов. Попробуем теперь их рассмотреть поближе. Для этого надо открыть объект для редактирования. Это можно сделать двумя способами: дважды щелкнуть на объект в библиотеке или дважды щелкнуть на объект в рабочей области (они, ведь там у нас лежат сейчас). Это и есть «Edit» и «Edit in place».

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

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

Определить центр точно нам поможет панель Align. Выделите все содержимое символа и нажмите по очереди на две кнопки выравнивания по центру, предварительно включив режим «To stage». Этот способ работает, если в символе одна фигура, если их несколько, то все они будут по центру. Чтобы избежать этого, можно сгруппировать фигуры, выделив их все и нажав волшебное сочетание кнопок «Ctrl»+«G», потом отцентровать их и нажать «Ctrl»+«Shift»+«G» для разгруппирования. Теперь центр объекта находится точно по центру содержимого символа.

Обратите внимание на панель статуса. Тут уже есть иерархия. Последнее имя — это то место, где вы находитесь сейчас. Если щелкнуть на «Scene 1», вы попадете на главную сцену, то есть на основную рабочую область. Вот и щелкните на нем, чтобы это сделать. Теперь выделите наш объект Graphic и щелкнув на нем правой кнопкой мыши, выберите пункт меню «Free Transform».

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

Внутренняя структура Movieclip представляет собой точно такой-же символ, что и Graphic. Различие между ними в том, что Movieclip ориентирован на использование с Actionscript, а Graphic — на линейную анимацию. При помещении на основную временную шкалу, для символа Graphic необходимо создавать столько кадров, сколько у него их внутри, а Movieclip достаточно одного кадра. Мы это потом выясним подробнее, когда доберемся до анимации.

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

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

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

Blend — это режимы наложения. Появились они только в этой версии и с ними пока не все гладко. Применять их можно только к символам типа Movieclip.

Теперь рассмотрим то же самое для символа Graphic:

Почти то же самое, но нет Instance name, режимов наложения и появился еще один параметр, возле кнопки Swap. Это режим вопроизведения. Их, для символа Graphic, существует три:

Loop — Если количество кадров для символа превышает его длину, то он воспроизводится циклически.

Play Once — Однократное вопроизведение. Если количество кадров для символа превышает его длину, будет воспроизводиться его послений кадр.

Single Frame — Воспроизводится один статичный кадр символа. Какой именно кадр воспроизводить и с какого кадра начинать воспроизведение, можно указать в окошке, рядом.

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

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

Вот для чего служат эти кадры:

Up — Спокойное состояние кнопки.

Over — Состояние кнопки, когда на нее наведена мышь.

Down — Нажатое состояние кнопки.

Hit — Область нажатия. Используется, если изображение кнопки содержит пустые области, в которые может «провалиться» курсор мыши при наведении. Например, простой текст, без каких-либо графических объектов под ним. Эта область невидима, поэтому тут можно рисовать любые фигуры, любым цветом. В этом кадре критичен лишь размер объекта. Попробуйте нарисовать различные фигуры в разных кадрах, а потом нажать «Ctrl»+«Enter». И увидите, как это работает.

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

Вот тут нам и понадобится панель Tools. Рисование во Flash тоже отличается своеобразностью. Рисовать можно либо кистью, либо карандашом. В первом случае, рисование происходит при помощи заливки и может быть любой формы, в случае рисования карандашом, это происходит при помощи обводки и может быть тоже любой формы, но только одной толщины, которую потом, вместе с рядом других параметров, можно изменить в панели Properties. Кисть Выбираем кисть на панели инструментов или нажимаем кнопку “B” и сразу-же видим дополнительные свойства кисти, в нижней части панели. Первое — это заливка, то есть активный цвет кисти. Раскрыв его, можно обнаружить там панель Swatches с уже предустановленными цветами. В качестве цвета можно выбирать и градиент. Далее идут две неактивные кнопки, их можно пропустить. Кнопка Lock Fill позволяет заблокировать градиент, чтобы он растягивался на все рисуемые объекты. В обычном состоянии, градиент будет границами совпадать с шириной каждого объекта. Попробуйте порисовать, выбрав в качестве цвета, градиент и попробовать нажать эту кнопку. Brush Mode — режим рисования кисти. Внутри этой кнопки есть несколько других, Смотрите ниже их описание. Paint Normal — Обычный режим рисования. Paint Fills — То же, но кисть не рисует поверх линий, оставляя их целыми. Paint Behind — Рисуем позади закрашенных объектов, оставляя линии и другие объекты нетронутыми. Paint Selection — Рисует только на выделенных объектах. Paint Inside — Закрашивает, в зависимости от того, где вы начали рисовать. Если на пустом поле, то рисует там, если внутри объекта, то рисует на его заливке, оставляя обводку нетронутой. В режиме рисования, становится активной кнопка Object Drawing. Если она активна, после рисования объекта, он сразу группируется, тем самым предотвращается последующее рисование на нем.

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

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

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

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

	Режим Object Drawing активен всегда, так-же есть свойства карандаша:
	Straighten — Рисует прямыми линиями.
	Smooth — Рисует сглаженными линиями.
	Ink — Рисование, без применения коррекции. Непонятно, что это такое. Если выясните, дайте мне знать.

На панели Properties, на этот раз, побольше информации:

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

Перо
	Инструмент Pen (Перо) работает точно так-же, как и в других программах Adobe. Им можно строить кривые Безье, добавлять и удалять точки на кривую, редактировать кривизну при помощи направляющих и конвертировать тип узловых точек.

Рисование фигур

Rectangle Tool — Обычный прямоугольник. После выбора этого инструмента и перед тем, как начать его рисовать, можно выбрать цвет заливки и обводки, а так-же дополнительные свойства на панели Properties. Из новых свойств я бы отметил возможность скругления углов, притом, для каждого угла можно назначить свое скругление. Попробуйте, это очень интересно. И как обычно, можно рисовать квадраты, с зажатой кнопкой Shift. Oval Tool — Овалы и окружности. Здесь можно задавать дополнительные свойства, на панели Properties, такие, как начальный и конечный углы и внутренний радиус, что позволяет рисовать дуговые сегменты окружности. Это тоже стоит попробовать. Я сам узнал об этом только сейчас, когда начал про это писать и посмотрел на панель Properties Rectangle Primitive Tool — Процедурный прямоугольный примитив. Отличается от обычного прямоугольника тем, что дополнительные свойства можно устанавливать и изменять потом, уже после того, как фигура нарисована. Oval Primitive Tool — Процедурный овальный примитив. Тоже, возможна установка дополнительных свойств после его создания. PolyStar Tool — Инструмент для рисования многоугольников или звезд. Имеет дополнительные свойства на панели Properties, при нажатии кнопки Options, открывается такое окно:

Тут можно выбрать тип объекта (polygon или star), количество углов и радиус их внутренних точек.

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

Выделение графики
	Инструменты выделения ничем не отличаются от других программ Adobe, то есть, их два. Черная стрелка (Selection Tool) и белая стрелка (Subselection Tool). Только работают они немного по-другому.

Нарисуйте прямоугольник с заливкой и обводкой, при невключенном режиме Object Drawing. Теперь щелкните на пустом месте рабочей области, чтобы снять выделение. Затем, поверх фигуры можно нарисовать окружность и тоже снять с нее выделение. Теперь возьмите инструмент выделения («V«) и проведите рамку из пустой области, до середины всех объектов, получится примерно вот такое:

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

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

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

Рисование линий. Line tool
	Очень простой инструмент. Рисует прямые, одиночные линии от одной точки, до другой. Аналогичен подобному, в Adobe Illustrator.

Текст
	Новый текстовый движок Adobe Flash предоставляет широкие возможности редактирования свойств текста. После выбора инструмента Text Tool, в панели Properties мы видим вот это:

	Indent — Отступ первой строки.
	Line spacing — Межстрочное расстояние.
	Left margin — Левая граница параграфа.
	Right margin — Правая граница параграфа.

7. Edit orientation of text — Меняет ориентацию текста между горизонтальной и вертикальной.

Заливка объектов цветом
	Как ни странно, этот инструмент делает то-же самое, как и называется, то есть заливает объекты цветом. При этом, цвет меняется только у заливки объекта.

Создание обводки
	Меняет цвет обводки на выбранный, либо создает обводку заново. Для создания обводки у объекта, у которого ее нет, надо выбрать цвет и щелкнуть на крае объекта.

Пипетка
	Копирует свойства объекта, в зависимости от того, откуда они забираются.

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

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

В Adobe Flash CS3 существует два типа градиента: линейный и радиальный. Включение градиентной заливки и выбор ее типа осуществляется на панели Color. За это отвечает параметр Type. При выборе одного из режимов, на индикаторе цвета сразу появляется градиент.

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

Градиент можно назначать, как для заливки, так и для обводки объектов.

Существует дополнительный инструмент для интерактивной настройки градиентов. Выбирается он кнопкой «F«. Если, после выбора этого инструмента, щелкнуть на градиенте, у него появятся дополнительные органы для более детальной настройки:

	1. Треугольник — Центр градиента. Если сдвинуть его в сторону, центральная точка градиента изменит свое положение, однако сам градиент останется на месте. Это важно, когда нужно, чтобы края градиента совпадали с краями объекта.
	1. Точка — Общий центр градиента. Если ее сдвинуть, градиент переместится вместе с границами.
	2. Искажение градиента по горизонтали. Немного некорректная формулировка, так как, по вертикали он не искажается. Скорее подойдет определение «перспективное искажение».
	3. Радиус градиента.
	4. Вращение градиента.

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

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

Здравствуй, дружок! Сегодня я расскажу тебе новую сказку, про то, как создавать интерактивную анимацию.. Или просто анимацию.. 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. Она будет подробнее рассмотрена в следующей главе.