Как сделать анимацию во flash. Как создать флеш анимацию

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

Для начала определимся, зачем нам вообще флеш, и что это такое. Флеш — это мультимедийная презентация, сделанная с помощью программы Adobe Flash или . Такие файлы называют флеш-роликами, хотя они могут представлять собой гораздо большее, чем ролик.

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

А могут быть действительно просто видео- , или аудиороликами.

Стандартным расширением для флэш-файлов является SWF . И когда нам попадаются такие ролики на сайтах, мы не можем их скачать так просто, как картинки, правой клавишей мыши. Придется немного потрудиться.

Скачиваете флэш с сайта

Заходите на страницу сайта, на которой стоит нужный Вам флеш-файл. После этого:

Открываете код страницы

Нажимаете на страницу правой клавишей мыши, и выбираете Просмотр кода страницы . Еще два варианта открыть код страницы: нажать Ctrl+U , или написать перед адресом страницы view-source:

Ищете в коде адрес SWF ролика

Для этого включаете поиск с помощью горячих клавиш Ctrl + F , и в поле поиска вводите .swf . Затем нажимаете Enter .

Находите сам адрес, который будет иметь вид:

http: //site.ru/papki/rolik.swf
или такой вид:

/papki/rolik.swf

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

Проверяете адрес

Вставляете адрес флэш-ролика в адресную строку любого браузера, в новой вкладке. Должен появиться ролик.

Делаете адрес ссылкой

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

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

Ссылка

Скачиваете флэш ролик себе на компьютер

Сохраненный файл открываете в браузере. Внутри него будет ссылка. Кликаете по ней правой клавишей мыши, выбираете Сохранить ссылку как... или Сохранить по ссылке..., и сохраняете flash-ролик у себя на компьютере.

Чтобы посмотреть, или открываете его в браузере, или используете флеш-плеер, например Macromedia Flash Player .

Другие варианты

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

• С помощью сайта http://save2go.ru . Вводите адрес страницы, на которой находится Ваш флеш-ролик, и нажимаете Сохранить с сайта . Ниже появится ссылка на ролик. Нажимаете правой клавишей, и выбираете Сохранить ссылку как... или Сохранить по ссылке... .
• С помощью плагина для браузера, например, Downloadhelper для Firefox .
• С помощью программ-загрузчиков, например, Download Master. Для начала нужно найти адрес флеш-ролика, и затем вставить его в загрузчик.

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

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

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

Создание кнопок

Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:

Up-состояние — это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой;

Over-состояние — кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата;

Down-состояние — данный кадр показывает вид кнопки при ее нажатии;

Hit-состояние — определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно.

Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символа-кнопки (например, but1) и выберите тип символа Button («Кнопка»).

Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1).

Рис. 1. UP-кадр кнопки

Выделим второй кадр, помеченный как Over и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой фрейм (по команде Insert => Keyframe), в результате чего появится ключевой кадр, полностью повторяющий содержание Up-кадра. Изменим цвет кнопки, как показано на рис. 2.

Рис 2. Over-кадр кнопки

Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3).

Рис. 3. Down-кадр кнопки

В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже.

Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.)

Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки

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

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

Рис. 5. Hit-кадр кнопки

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

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

Понятие об Action Script

Action Script представляет собой язык написания сценария - набора инструкций, которые управляют элементами Flash-фильма. Сценарии Action Script могут быть встроены в фильм или храниться во внешнем текстовом файле с расширением AS.

При встраивании сценария в фильм его можно внедрять в разные части фильма. Точнее, сценарии Action Script могут содержать ключевые кадры, экземпляры кнопок и экземпляры мувиклипов. Соответственно сценарии называются сценариями кадра (Frame Action), сценарием кнопки (Button Action) и сценарием клипа (MovieClip Action).

Сценарии Action Script выполняются по наступлении определенных событий, инициированных пользователем или системой. Механизм, который указывает программе Flash, какой оператор следует выполнить при наступлении того или иного события, называется обработчиком событий.

Action Script имеет собственный синтаксис, во многом схожий с синтаксисом JavaScript. Flash MX 2004 поддерживает Action Script всех предыдущих версий Flash.

Одним из основных понятий Action Script являются Actions - команды, которые выдают инструкции во время исполнения SWF-файла. Например, gotoAndStop() отсылает воспроизводящую головку (Рlayhead) на определенный кадр или метку. От слова Actions и происходит название языка - Action Script (дословно - сценарий действий). С большинством понятий этого языка мы ознакомимся на конкретных примерах.

Интерактивный фотоальбом

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

Поместим на основной монтажной линейке первое фото и добавим кнопку из стандартного набора. Для доступа к нужной папке следует выполнить команду Windows => Сontrol Panels Common Libraries => Buttons (рис. 6).

Рис. 6. Добавим кнопку из стандартной библиотеки

В результате выполнения данной команды появится панель, содержащая большой набор заранее нарисованных кнопок различных типов. Выберем, например, Key Buttons (кнопки, похожие на клавиатурные клавиши), откроем соответствующую папку, выберем кнопку key-left (рис. 7) и создадим экземпляр данной кнопки (путем перетаскивания ее на сцену).

Рис. 7. Элементы папки Key Buttons

Обратите внимание, что, когда вы устанавливаете вторую кнопку (key-right) на сцене и перемещаете ее, чтобы установить на одном уровне с первой кнопкой, программа дает подсказку (пунктирную линию), которая позволяет точно позиционировать кнопку (рис. 8).

Рис. 8. Автоматическое выравнивание кнопок на одном уровне

Для того чтобы добавить сценарий, необходимо вызвать редактор Action Script по команде Window =>Development Panels => Actions или нажав клавишу F9. Если вы собираетесь часто писать скрипты, то эту клавиатурную команду стоит запомнить. В результате появится редактор Action Script (рис. 9).

Рис. 9. Панели редактора Action Script

Если вы поэкспериментируете, выделяя различные элементы на сцене, одновременно отслеживая сообщения в панелях редактора Action Script, то обнаружите, что программа подсказывает, на какой элемент можно «вешать» код. Если выделить на сцене кадр, то в верхнем левом углу панели редактора появляется надпись Actions - Frame, если щелкнуть по кнопке, то появится надпись Actions - Button, то есть программа подсказывает, что вводимый код будет относиться к сценарию кнопки. А если выделить фотографию, то в поле, предназначенном для ввода скрипта, появится сообщение: Current selection cannot have actions applied to it (к данному выделенному объекту нельзя применить сценария).

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

Итак, для кнопки со стрелкой влево нам нужно формализовать следующий сценарий: «Если кнопка отпускается на некотором кадре, то с этого кадра необходимо перейти на предыдущий кадр». В соответствии с синтаксисом языка Action Script (рис. 10) это будет выглядеть следующим образом:

В первой строчке записан обработчик событий кнопки on(), имеющий формат:

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

Если запустить на исполнение созданный фильм, то кадры будут непрерывно проигрываться один за другим, а следовательно, прежде всего нам нужно дать команду «Стоп» на первом кадре. Для этого первому кадру добавим соответствующую команду (рис. 11).

Рис. 11. Сценарий, присвоенный первому кадру

Обратите внимание: команда присваивается уже не кнопке, а кадру. Тот факт, что кадру присвоен сценарий, отмечается на основной монтажной линейке - в обозначении кадра над жирной точкой появляется строчная буква «a».

В результате мы получили следующий фильм .

Если у нас в фотоальбоме всего несколько кадров, то двух кнопок - «Вперед» и «Назад» - вполне достаточно, но если набор фотографий большой, то желательно иметь еще и кнопки, отсылающие в начало и конец фильма. В следующем примере мы добавим соответствующие кнопки: «В первый кадр» и «В последний кадр». Выбрать кнопки подходящей мнемоники можно из стандартной библиотеки кнопок из папки Сircle Вuttons (рис. 12).

На предлагаемом примере мы ознакомимся с еще одной командой gotoAndStop(), которая позволяет перейти к нужному кадру с последующей остановкой.

Рис. 12. Кнопки из папки Circle Buttons

На кнопку перехода к первому кадру (третья слева на рис. 13) повесим код, как показано на рис. 13.

Рис. 13. Сценарий для кнопки «В первый кадр»

В случае с фотоальбомом из пяти кадров в последнюю кнопку добавим сценарий перехода «В последний кадр»:

Автоматизированное написание скрипта

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

Рис. 14. Средства автоматизированного написания скрипта

Панель редактора Action Script позволяет выбирать, перетаскивать, перераспределять и удалять команды.

Покажем, как можно написать тот же скрипт для кнопки «Вперед» в автоматизированном режиме. Выбрав папку Movie Clip Control (верхнее левое окно на рис. 14) можно получить доступ к обработчику событий on, а далее нужно либо дважды щелкнуть по соответствующему пункту, либо перетащить выражение на поле написания скрипта в режиме Drag and Drop.

Рис. 15. Подсказка для завершения выражения

В результате на рабочем поле появится необходимое выражение и подсказка вида (рис. 15): вы выбираете из меню нужную команду и выражение завершается автоматически. Как видно из меню, можно выбрать не только условие, связанное с экранными кнопками, - можно, также, выбрать из меню рис. 15 пункт keyPress “”, или keyPress “”, что соответствует нажатию клавиатурных клавиш (стрелка влево, стрелка вправо), то есть имеется возможность создать фотоальбом, который будет «перелистываться» с помощью клавиш клавиатуры.

Рис. 16. Обращения к кнопке клавиатуры

Задействуем команду keyPress “” (рис. 16), затем перейдем в папку Timeline Control, выберем команду nextFrame и перетащим ее на рабочее поле (рис. 17).

Рис. 17. Команду nextFrame можно найти в папке Timeline Control

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

Стрелочки в подсказке позволяют просмотреть разные варианты синтаксиса. Программа предоставляет два варианта (рис. 18 и 19), то есть предлагает задать сцену и кадр или только кадр. В нашем случае достаточно указать только кадр (Frame). Если название сцены опущено, то по умолчанию осуществляется переход к кадру текущей сцены.

Рис. 18. Подсказка по возможному синтаксису команды

Рис. 19. Стрелочка-треугольник позволяет просматривать варианты синтаксиса

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

Можно ли обеспечить сценарий, при котором разные события будут приводить к одним и тем же действиям? Оказывается, можно - для этого в обработчике событий on необходимо перечислить список наименований событий. Если вы поставите запятую в списке событий после первого события, то программа сама предложит вам меню (рис. 20).

Рис. 20. При введении запятой в списке событий автоматически появляется меню дополнительных команд

Добавим к первому событию (нажатие клавиатурной кнопки) второе событие (отпускание экранной кнопки):

on (keyPress "", release)

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

В рассмотренном примере мы использовали переход по номеру кадра, но этот способ не всегда удобен: если в процессе редактирования фильма нумерация кадров изменится, то логика может нарушиться. Более удобно использовать переход по метке кадра. Рассмотрим пример, в котором потребуется не только перелистывание альбома, но и переход к разным разделам, то есть более сложная навигация.

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

Первому кадру раздела «рисунки» дадим метку Pictures, аналогично первым кадрам других разделов присвоим метки graphics и photo.

Создадим слой для размещения меток и назовем его Lables. Для того чтобы поставить метку кадру, в панели Properties необходимо выбрать тип метки Name и записать ее имя. В нашем случае Pictures (рис. 21). Аналогично разместим метки в кадрах 5 и 10 (рис. 22).

Рис. 21. Пример присвоения кадру метки

Теперь добавим новый слой и назовем его Actions. В первом ключевом кадре слоя Actions вызовем панель Actions Frame (путем нажатия кнопки F9) и наберем команду stop () (см. рис. 22)

Рис. 22. Сценарий первого кадра

Добавим еще один слой под именем Subjects (тематика), в котором дадим заглавия соответствующим кадрам: «Рисунки» (рис. 23), «Графика» и «Фото».

Рис. 23. Заглавие для кадров раздела «Рисунки»

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

Напечатаем с левого края первый пункт меню «Рисунки» и переведем его в кнопочный символ. С помощью инструмента Arrow выделим текстовый блок «Рисунки» и выполним команду Modify => Convert to Symbol (эту команду можно выполнить и с помощью клавиши F8), в панели Convert to Symbol зададим тип символа Button и определим его имя как pictureButton (рис. 24).

Рис. 24. Назначим кнопке перехода к разделу рисунков имя рictureButton

Создадим четыре кадра для кнопки «Рисунки»: первый будет представлять просто исходный текст (рис. 25), второй - тот же текст только синего цвета, третий кадр мы пропустим (в этом случае Down-кадр будет такой же, как и Over-кадр), а в Hit-кадре нарисуем прямоугольную область, которая определит область нажатия кнопки (рис. 26).

Рис. 25. Up-кадр кнопки pictureButton

Рис. 26. Hit-кадр кнопки pictureButton

Теперь нам нужно повесить сценарий на вновь созданную кнопку. Для этого выделим кнопку в сцене Scene 1 и, нажав F9, вызовем панель Actions, а затем внесем код, показанный на рис. 27.

Рис. 27. Сценарий перехода на кадр с меткой

Всех приветствую!
Итак, по просьбе пишу урок о простейшей анимации во флеше. Начинаем, как говорится, с малого. Потом обещаю добавить еще (по pop-up, если так и не напишут).

Открываем Flash MX.
Перед нами - наша рабочая сцена, меню, панель инструментов итд. Внизу есть такое вот окошко: Properties (Свойства). Там основные настройки вашего мульта (рис.1).
Нас там интересует FRAME RATE - скорость прокрутки вашего мульта. Иначе 12 fps означает, что за одну секунду будет проигрываться 12 кадров (frame) вашего мульта. Эта скорость стандартная и, в принципе, то, что надо. Если вам надо замедлить ваш мульт - уменьшаете, надо сделать быстрее - увеличиваете эту цифру.

Теперь перейдем к самой анимации.
Во флеше есть два основных способа: shape tweening и motion tweening.
Рассмотрим первый. Shape - (англ.) форма. Вы уже понимаете, что тут речь пойдет именно об изменении формы. Создаем некую форму, например синий квадрат. Вверху, в строке времени (timeline) у нас на первом кадре появится кружочек на сером фоне - мы создали ключевой кадр (keyframe). Теперь создадим такой же кадр в 10-м кадре. Это можно сделать двумя способами: наводим мышку на 10 кадр, делаем клик (кадр стает синим) и в меню последовательно выбираем: Insert->keyframe; иначе можно: наводим на 10 кадр, кликаем, нажимаем F6. В строке времени все 10 кадров серые. Красная линия показывает на каком именно кадре мы находимся. (рис.2)

Переходим в 10 кадр. Выделяем наш квадратик (мышкой или нажатием ctrl+A,- данное сочетание клавиш выделяет все, что у нас находится в рабочей области). Перемещаем наш квадрат куда-нибудь в сторону (проследите, что вы в 10-м кадре!) и меняем цвет на, например желтый. Теперь переходим обратно в первый кадр. В строке Properties имеется выбор Tween, где по умолчанию стоит атрибут "none". То есть никакой анимации. Изменяем его на "shape". В строке времени наши кадры приобретают салатовый цвет со стрелочкой. Когда все сделано нажимаем "enter". КРАСОТА! Квадратик двигается, да еще и цвет меняет! Снова переходим в 10 кадр. Выделяем все (ctrl+A). И нажимаем клавишу delete (то есть удаляем). На месте квадратика рисуем какой-нить красненький кружочек. Снова переходим в первый кадр и нажимаем enter. Квадрат теперь стает кружком и красным. Вы уже поняли, что вам не надо прорисовывать каждый кадр - это за вас сделает flash! Хотя если вам нужна особая точность, или что-то - можете прорисовывать. тогда файл вырастет в размерах. Если вам нужен более плавный переход от квадратика к тому же, например, кружку - сделайте этот процесс не на 10, а, скажем, на 25 кадров. Если вам нужно более замысловатые движения и перемещения - для этого существуют слои-маски, но о них как-нибудь в следующий раз. Рисунок 3 показывает, как на линии времени выглядит ваша анимация. Теперь вы умеете рисовать простейший мувик с изменением формы!

Теперь рассмотрим второй способ задания анимация: motion tweening (перевод что-то типа: построения промежуточной анимации движения). Здесь будет чуточку посложнее. Снова открываем новый файл флеша.
Чем отличаются shape и motion? Тем, что во втором случае мы будем работать не над формами, а над готовыми объектами, т.е. символами. Символ - это так сказать, простейшая единица анимации во флеше. Это более распространенный способ рисования. Повторяем все снова - в первом кадре рисуем синенький квадратик. выделяем его и нажимаем F8 (или выполняем последовательно: Insert->convert to symbol). Перед нами появляется диалоговое окно (рис. 4).

Что же это такое? Во флеше есть три типа символов: мувик (moovie clip) - это некая дополнительная анимация внутри символа. то есть, этот символ содержит в себе какую-нибудь анимацию и т.д. имеет точно такую строку времени, как и основная сцена; кнопка (button) - элемент, который реагирует на нажатие, присутствие мышки над ним итд. Короче, кнопка и есть; и третий элемент, самый статичный - graphic. То есть просто графика, некое изображение. Мы будем работать с последним. Как-то его называем, нажимаем "ОК". На квадратике появляется кружочек - иначе, центр нашего символа (центр тоже можно задать в том диалоговом окне). Все наши символы заносятся в библиотеку. Оттуда мы их можем редактировать, вставлять куда надо и куда не надо, удалять, добавлять. Чтобы посмотреть на свою библиотеку нажмите F11 или выполните действия: Window -> Library. В 10-м кадре создадим ключевой кадр (F6). Теперь можем переместить куда-то наш квадрат. Затем сделаем его невидимым: для этого выделим его в 10-м кадре. На панели propperties в разделе color зададим alpha (прозрачность). Поставим ему атрибут в процентах: 0. Вернемся на 1-й кадр. Выполним все те же действия, что и для shape tweening, только вместо shape отметим motion. Кадры во временной строке станут фиолетовыми и через них протянется стрелочка, как это показано на рис. 5. Нажмем enter.

У нас получится эффект "квадрат летит в пустоту". Поздравляю! Вы знаете, как делать примитивную графику во флеше!
Еще одна важная особенность - на каждую анимацию у нас должен быть выделен отдельный слой (Layer). Если вам надо добавить еще один слой воспользуйтесь командой: Insert->Layer.
И совсем чуть-чуть о строке времени.
Как вы уже поняли - салатовое со стрелочкой - shape tweening, фиолетовое со стрелочкой - motion tweening. Салатовое или фиолетовое с линиями - вы задали анимацию, но эту анимацию создать невозможно, - вы сделали что-то не правильно. Серый цвет - все кадры с такой закраской являются точной копией предыдущего ключевого кадра (keyframe). Белая окраска линии означает, что в этих кадрах ничего нет. Черный кружочек - ключевой кадр. Белый кружочек - пустой ключевой кадр (blank keyframe). Ну, вроде все. (рис. 6)

На этом пока что все. Этот тот минимум, с которым можно работать. Далее изучите добавление звука, контроль над звуком, и вперед - писать Масяню. :) Обещаю, что обязательно вскоре напишу еще один урок - по продвинутой анимации во флеше. Про то, как сделать "падение пера", про маски, про контроль над изменением формы в shape tweening"е. Потом еще чего-то напишу.
Если это кому-то все-таки помогло - скажите спасибо всему сайту FLASHER.RU. Это лучшее, чего в сети имеется.
Рад был и рад есть! Если вопросы - прошу на форум или: [email protected]
(с)from St.Dimitryi aka Nirva to Flasher.ru
http://flasher.ru

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

Шаги

Часть 1

Покадровая флеш-анимация

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

• По умолчанию Flash воспроизводит 24 кадра в секунду (FPS). Это означает, что за одну секунду будут показаны 24 кадра, но не все из них должны быть обязательно разными. Вы можете изменить этот параметр (если хотите) на 12 кадров в секунду, но при 24 кадрах в секунду анимация будет воспроизводиться более «гладко».

1. Установите Flash Professional. Есть множество программ для создания флеш-анимации, но наиболее мощной является Adobe Flash Professional CC. Вы можете бесплатно установить пробную версию этой программы или использовать другой продукт (если вы не хотите регистрироваться на Adobe Creative Cloud). Далее в этой статье описывается работа с Flash Professional.

   Так как покадровая анимация требует наличия нескольких изображений (которые немного отличаются друг от друга), то вам нужно создать эти изображения вручную. Для этого воспользуйтесь Adobe Flash Professional или нарисуйте изображения в любом графическом редакторе.

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

2. Создайте первый кадр. При первом запуске Adobe Flash Professional вы увидите пустой холст (слой) и пустую временную шкалу. По мере добавления кадров временная шкала будет заполняться автоматически. Вы можете работать со слоями так же, как вы делаете это в Photoshop.

   • Прежде чем добавить изображение, создайте базовый фон вашей анимации. Переименуйте «Слой 1» в «Фон», а затем закрепите его. Создайте второй слой и назовите его как угодно. Это будет слой, на котором вы будете создавать анимацию.
   • Добавьте рисунок на холст первого кадра. Вы можете импортировать рисунок с вашего компьютера, или вы можете использовать инструменты для рисования, чтобы создать рисунок непосредственно в программе.
   • Первый кадр – это «ключевой» кадр. Ключевой кадр – это кадр, который включает изображение и образует основу («костяк») анимации. Вы будете создавать новый ключевой кадр каждый раз при изменении изображения.
   • Ключевые кадры на временной шкале обозначаются черной точкой.
   • Вы не нужен ключевой кадр в каждом последующем кадре. Создавайте ключевой кадр через каждые четыре-пять кадров, чтобы сделать хорошую анимацию.

3. Преобразуйте изображение в символ. В этом случае вы сможете добавить изображение в кадр несколько раз. Это особенно полезно, если вам нужно быстро добавить несколько однотипных картинок в один кадр (например, рыбки в аквариуме).

   • Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем.
   • Удалите рисунок. Не волнуйтесь - вы сможете добавлять его в кадр простым перетаскиванием из библиотеки. Так вы можете добавить в кадр один и тот же рисунок несколько раз.

4. Добавьте пустые кадры. Если ваш первый ключевой кадр готов, вставьте пустые кадры, а затем приступайте к созданию второго ключевого кадра. Нажмите F5 (четыре или пять раз), чтобы добавить пустые кадры после первого ключевого кадра.

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

   • Чтобы создать ключевой кадр, используя содержимое предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши по последнему кадру на временной шкале и выберите «Insert Blank Keyframe» (Вставить пустой ключевой кадр).
   • После того как вы создали второй ключевой кадр, вам нужно внести изменения в его изображение, чтобы анимация «ожила». Если вы пользовались инструментами для рисования Adobe Flash Professional, выберите инструмент «Transform» (Преобразование), чтобы выделить элемент вашего рисунка (например, руку персонажа) и изменить его.
   • Если в каждый ключевой кадр вы вставляете новое изображение, убедитесь, что оно находится в нужном месте (согласно логической последовательности кадров).

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

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

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

   • Выберите кадр, в котором рисунок будет преображаться.
   • Откройте панель свойств рисунка. Для этого нажмите F3.
   • Измените значения параметров в окне свойств рисунка. Например, вы можете изменить оттенок или цвет, добавить фильтры, изменить размер.
   • Вы также можете использовать инструмент «Free Transform» (Свободное преобразование), чтобы менять рисунок так, как вам угодно.

7. Добавьте заключительные штрихи. Проверьте созданную анимацию, нажав Ctrl + Enter. Убедитесь, что рисунок (персонаж) правильно меняется и что анимация воспроизводится с правильной скоростью. Если анимация воспроизводится слишком быстро, уменьшите значение FPS или увеличьте продолжительность твина.

   • По умолчанию FPS равен 24, поэтому попробуйте уменьшить это значение до 12. Измените значение FPS на панели свойств. Однако при FPS = 12 анимация может воспроизводиться недостаточно плавно.
   • Чтобы изменить продолжительность твина, выберите слой, содержащий твин, и при помощи ползунка измените продолжительность твина. Если вы хотите удвоить продолжительность твина, передвиньте ползунок на 48 кадров. Не забудьте вставить фон в пустые кадры, чтобы фон не исчез посередине анимации. Для этого выберите фоновый слой, щелкните по последнему кадру анимации (на временной шкале), а затем нажмите F5.

Часть 3

Добавление звуковых эффектов и музыки

1. Запишите или скачайте звуковые эффекты и музыку. Вы можете добавить в анимацию звуковые эффекты, чтобы сделать ее более эффектной. Музыка сделает анимацию более захватывающей и может превратить хорошую анимацию в великолепную. Flash поддерживает различные форматы аудиофайлов, в том числе AAC, MP3, WAV, и AU. Выберите формат, который гарантирует высокое качество звука при минимальном размере файла.

   • Формат MP3 гарантирует высокое качество звука при минимальном размере файла. Файлы формата WAV имеют большой размер.

2. Импортируйте аудиофайлы в библиотеку, чтобы иметь возможность быстро добавлять звуки и музыку в анимацию. Нажмите «File» (Файл) – «Import» (Импортировать) – «Import to Library» (Импортировать в библиотеку). Найдите аудиофайл на вашем компьютере. Убедитесь, что аудиофайл имеет легко запоминающееся имя, чтобы вы могли быстро найти его.

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

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

Вы не задумывались, что скрывается за красивой анимацией баннеров в интернете? Или за новомодными мультиками, созданными с помощью компьютерных технологий? Чаще всего в их основе лежит «плоть », точнее так переводится с английского название технологии Flash . Сегодня мы поговорим о флеш анимация для сайта:

Технология Flash

Мультимедийная основа, была разработана компанией Macromedia . Но после ее поглощения (слияния ) все права на технологию перешли новому владельцу — компании Adobe Systems .

Область современного применения Adobe Flash :

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

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

• Реализация мультимедийных возможностей – для прослушивания аудио и воспроизведения видео на сайтах часто используют медиа плееры, созданные на основе Flash . Их разработка включает в себя использование одного из скриптовых языков (чаще JavaScript ):

• В средствах интернет-рекламы – чаще всего технология используется для создания анимированных баннеров. Они подразумевают не только проигрывание мультимедийной рекламы, но и некое взаимодействие с пользователем на игровой основе.

Основы и инструментарий для разработки Flash

Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :

• Adobe Flash Professional – программа для создания интерактивной анимации (аниматор );
• Adobe Flash Builder – среда для создания интерфейса веб-приложений;
• Adobe Flash Player – интегрируемый в браузер плеер для воспроизведения Flash .

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

Данная технология позволяет отображать любой тип графики (растровую, векторную, 3D ). А также поддерживает потоковую ретрансляцию аудио и видео данных. Специально для мобильных устройств была разработана облегченная версия Flash Lite .

Основным стандартом для флэш-файлов является расширение SWF . Аббревиатура расшифровывается как Small Web Format . Видео, записанное в Flash , имеет файловые расширения FLV , F4V .

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

Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана (разрешения ).

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

К недостаткам технологии можно отнести следующие моменты:

• Сильная нагрузка на центральный процессор клиентской машины. Это связано с низкой эффективностью виртуальной машины флэш, встраиваемой вместе с проигрывателем в браузер пользователя;
• Высокая вероятность возникновения ошибок – проигрывание флэш анимации может происходить с высокой вероятностью возникновения ошибок. Причем сбои в проигрывании Flash негативно влияют на работу всего клиентского приложения (браузера ). Это связано это с недостаточным контролем отказоустойчивости программного кода при создании флэш-приложений;
• Невозможность индексирования – весь текстовый контент, отображаемый в содержимом Flash , не участвует в процессе индексации. Данное ограничение особенно проблематично для тех ресурсов, которые созданы на основе этой технологии.

Обзор стороннего программного обеспечения для создания Flash

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

Кроме создания и редактирования флэш редактор «умеет » работать со всеми остальными видами веб-анимации (GIF , HTML и другие стандарты):

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

Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно «New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню «File ». Среди предлагаемых вариантов мы выбрали создание баннера:

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

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

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

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