Flash animation

сегодня хотелось бы рассказать о таком параметре как ease.
та что мы о нём не знаем? – спросите вы.
изменение параметра от -100 до +100 позволяет настраивать замедление/ускорения анимации как для shape анимации, так и для motion.
но дело в том, что с 8-й версии флэша при анимации motion для параметра ease появилась кнопочка edit. многие о ней даже не знают, а кто знает не всегда использует весь спектр возможностей.

итак, при нажатии на кнопку edit мы получаем вот такой график (кликабельно):

в результате мы имеем возможность управлять замедлением/ускорением с помощью графика. шкала x — последующие кадры до следующего ключевого кадра, шкала y — процент пути.
если снять галочку use one setting for all properties, то нам открывается возможность настраивать кривые для каждого параметра отдельно на одном промежутке анимации! параметры следующие: position, rotation, scale, color и filters.

рассмотрим настройку параметров на паре примеров:

1. допустим нам надо сделать вот такой дурацкий пароходик, плывущий по волнам здесь мы будем работать с двумя параметрами position и rotation.
2. для начала создадим колесо, которое у нас будет крутиться
3,4. растянем анимацию кадров эдак на 90, зададим параметр rotation cw, 1 times и нажмём кнопку edit параметра ease. далее снимаем галочку, выбираем параметр rotation и изменяем график. какой получился у меня, показано на рисунке. колесо быстро крутится, затем сбавляет скорость, сделает пару вращений назад и снова набирает обороты.
5. символ колесо помещается внутрь символа пароходик, который с вою очередь «пускается по волнам» (добавляем направляющую движения).
6. тому промежутку анимации мы настраиваем параметр ease для position и график выглядит немного другим образом.
лично я все графики подбираю на глаз. работать с одной кривой намного проще и удобнее, чем с несколькими промежутками анимаций.
7. а к примеру такой график можно построить для движения рыбки,
8. когда она так себе плывёт, а потом резко так шмыг вперёд!

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

помнится увидела я в каком-то мультфильме как фон со скоростью проносится перед глазами. и так мне это эффект понравился, что захотелось его повторить. но увеличение частоты кадров до 120 проблемы не решало. и тогда мне открылся один секрет, которым я хочу поделиться с вами :о)

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

итак, всё гениальное просто:
1. преобразовываем нужный фон в movie clip
2. применяем фильтр motion blur, при этом убираем замочек и делаем размытие по x
3. делаем анимацию.

а когда-то ещё в 6-м флеше данный ээфект приходилось делать в фотошопе с помощью фильтра motion blur. в принципе так можно делать и сейчас тоже
надеюсь данный метод пригодится в вашей практике

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

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

1. создаём наш список. каждое слово отдельно.
2. преобразовываем каждое слово в символ и выравниваем их по левому краю. после чего переносим одно из слом на максимальную высоту вниз и распределяем символы на одинаковое расстояние.
3. получаем аккуратный список. то же самое делаем с маркерами, если таковые имеются.
4. распределяем символы по слоям.
5. создаём ключевые кадры на одинаковом расстоянии и делаем в них какие-то изменения, одинаковые для всех символов.
6. например, я сместила и применила эффекты alpha и blur.
7. создаём анимацию.
8. теперь самое главное. смещаем каждую анимацию на несколько кадров вправо, чтобы получился каскад.
9. ну и наконец выравниваем анимацию, заполняя её статическими кадрами.
10. вот что у меня в результате получилось.
11. также с помощью каскада можно делать шлейф

по сути этого же эффекта можно добиться используя символ graphic, если задать ему параметр loop и менять в каждом из символов начальный кадр анимации (собственно такой способ описан в статье murejib, которая и вдохновила меня на этот пост).
но! если нам нужно изменить параметры анимации, чтобы например следующая анимация начиналась не с каждого второго кадра, а с каждого 3-го? менять стартовые кадры graphic гораздо хлопотнее чем сдвинуть кадры на таймлайне. к тому же каскад более наглядный и сразу можно увидеть ошибку, чего не скажешь о номерах кадров :о)

зы: xitri, ничё что я стырила твою идею с просмотром изображений?… уж больно она удобная ;о)

cartoon animation by preston blair
это наверное одна из первых книжек по анимации персонажей, которая попалась мне в руки.
очень многие свои знания я почерпнула именно из неё.
в книге подробно описываются принципы создания персонажей, особенности их анимации.
если вы до сих пор не листали её – сделайте это немедленно!
скачать книгу

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

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

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

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

— при использовании в анимации png изображений следите за обтравкой картинок. объект должен хорошо смотреться как тёмном, так и на светлом фоне.

— при фокусировке на заднем плане или на переднем не забывайте делать соответствующие размытия. этого можно добиться с помощью фильтра blur.

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

кстати, png обладает ещё одной замечательной способностью. если преобразовать его в movie clip и применить фильтр (например drop shadow), то он применится только к непрозрачным участкам. что очень удобно.

если вы знаете ещё какие-то особенности или правила касательно формата png? поделитесь пожалуйста.

исследовательская группа «исследуй и создавай» выложили электронную версию книги «рисованный фильм» (автор: иванов вано, госкиноиздат, москва, 1950г).

как сообщил владимир лыков, креативный директор анимационной студии toongu.ru

эта книга об анимации была издана в 1950-м году.
но когда я полистал её, то был поражён насколько сильная школа была в союзмультфильме.
книге уже больше 50-и лет, но материалы в ней актуальны до сих пор.

к сожалению пока сайт нормально работает только под IE. но думаю это вопрос времени.
для flash-аниматоров эта книга окажется очень полезной!
читаем содержание под катом: Read the rest of this entry »

сегодня хотелось бы рассказать о структурировании символов для анимации.
рассмотрим на примере самого обыкновенного прелоадера. что может быть проще?
к примеру вот такой: (пост содержит swf файлы, если вы читаете через rss ленту возможно они не будут отображаться)

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

нужно поменять размер/форму всем кружочкам
блин! надо было засунуть каждый в символ!

нужно поменять цвет/оттенок
блин! надо было сделать корректирующий слой с полупрозрачными тенями, а в нижнем менять основной цвет

нужно изменить интенсивность прозрачности
что?! опять перезаливать все тени во всех кадрах?…

а если бы всё с самого начало было продумано и структурировано правильно – все изменения делались бы в один момент!

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

рассмотрим на нашем примере:
1. мы создаём объект (кружок) и преобразовываем его в movie clip «point»
2. далее мы сразу конвертируем movie clip «point» в «point_anim». это делается для того, что на временной шкале этого видеоклипа мы будем анимировать наш «point»
3. затем мы копируем «point_anim» и располагаем по кругу. чтобы равномерно распределить кружочки, нужно нарисовать многогранник с помощью инструмента polystar tool и разместить видеоклипы на угловых точках. только не забудьте включить привязку.

4. после того как все шарики распределены их можно выделить и конвертировать в символ (»loader»). это для того чтобы с лёгкостью перемещать его по сцене или переносить в другие файлы. теперь наша вложенность соответствует картинке.
5. можем начать делать анимацию. для этого заходим внутрь символа «point_anim». конечно можно сделать 8 ключевых кадров и в каждом установить степень прозрачности. но если вдруг понадобится изменить её? поэтому мы воспользуемся самым простым способом. сделаем motion анимацию параметра alpha на 8 кадров.

6. и последнее что осталось сделать – добавить к каждому муви клипу «point_anim» (внутри символа «loader») следующий скрипт, изменяя параметр кадра от 1 до 8 последовательно:

onClipEvent (load) {
this.gotoAndPlay(1);
}

о, не ругайте меня великие гуру-программисты! я по другому не умею! :о) если вы знаете как оптимизировать этот код, напишите его в камменты!

теперь в случае чего мы с лёгкостью можем менять прозрачность в ключевых кадрах анимации символа «point_anim», и соответственно цвет кружочков или форму всего в одном символе «point».

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

а ведь это всего лишь маленький прелоадер. представьте, если это было что-то более сложное?
поэтому всегда продумывайте структуру анимации перед её созданием и не бойтесь многоуровневой вложенности!

зы: исходник можно скачать тут.

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

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

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

кстати, если в слое-маске текст сдвинуть немного влево и вверх, то когда блик будет пробегать по тексту создастся ощущение рефлёности текста. скачать: text_blik.fla

что касается мерцания, то «звёздочки» лучше рисовать в фотошопе, сохранять с прозрачным фоном в png, а затем анимировать во флеше.
вот собственно быстренько состряпала для вас баннерок а-ля распродажа всё нарисовано во флеше с добавлением нескольких фильтров, отражение и блики делала в фотошопе.
потрошите исходник, разбирайтесь что к чему, задавайте вопросы в камменты.