Flash animation

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

1. итак, мы имеем на выходе вот такой симпатичный домик. рассмотрим по порядку все шаги, которые привели к этому результату.
2. всё всегда начинается со скетча (наброска) на бумаге. можно конечно и сразу на компьютере, если у вас есть планшет, но как по мне никакой планшет не сможет сравниться с простым карандашом и листком бумаги. этот домик был нарисован гелевой ручкой в блокноте.
3. первое что я делаю это выбираю контрастный цвет для контурных линий (зачастую это синий или красный) и прорисовываю все основные контуры с помощью инструмента pen и редактирую точки и линии инструментом arrow. не используйте при прорисовке pencil, его линии зачастую получаются кривые и содержат много точке, к тому же их сложнее редактировать.
4. когда все линии прорисованы, удаляем слой с наброском, меняем цвет линий на чёрный и корректируем элементы по композиции. я увеличила домик, передвинула окошки, дорисовала облака и велосипед. планировались ещё деревья, но они не вписались )
5. подбираем основные цвета картинке. обычно это процесс у меня занимает больше всего времени. если я не знаю, чего конкретно хочу от цветовой гаммы, на помощь приходит адобовский кулер. здесь я обошлась без него, заранее зная, что хочу картинку в тёплых тонах.
6. вот как выглядит наша картинка без контурных линий. не спешите их удалять, они могут вам ещё пригодится, лучше всего скопируйте их на отдельный слой.
7. далее добавляем градиенты. в идеале нужно использовать корректирующие слои (слой с градиентной заливкой в чётных или белых тонах с прозрачностью), чтобы мы в любой момент могли поменять основной цвет без ущерба градиентным переходам. но в данном случае цвета менять я не собиралась, поэтому работала без корректирующих слоёв – просто добавляла градиент основному цвету (от более всетлого к тёмного). результат вы можете видеть.
8. далее шёл кропотливый процесс добавления бликов и теней, который и привёл домик к «карамельному» виду. и добавлены детали такие как цветочек и кружка в окошке.
9. вот блики и тени без заливки. обратите внимание на контуры окошек и забора – это нично иное как наши контурные линии, просто где-то они чёрные, а где то белые с прозрачностью 15-25%. так же добавлены градиентные блики везде, где что-то может блестеть. даже шёрстка у кошки )
10. чтобы блики смотрелись симпатичнее я использовала градиентную заливку  не белого цвета, а светло-жёлтого, в результате чего блики кажутся теплее.
11. что касается теней, то часть из них это просто градиенты чётного с прозрачностью он 0 до 25% (см. тени вокруг окошек и двери), а часть – расблёреные movie clip-ы с обычной заливкой (см тени под велосипедом и забором).

вот собственно и весь секрет. пробуйте, экспериментируйте и у вас всё получится!!!

вот например процесс отрисовки нескольких «сладких» иконок.

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

на самом деле для этого не нужно никаких специальных плагинов или сложных настроек, всё предельно просто.

Read the rest of this entry »

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

данный метод может быть применён как к последовательности ключевых кадров (например ряд импортированных картинок png), так и к комплексной motion анимации.

1. рассмотрим на примере анимации акулы (да, я знаю акулы плавают по другому! )
2. к примеру нам нужно отрезайзить всю анимацию вместе с рыбкой и положением ключевых кадров в 2 раза. такое случается достаточно часто, например когда нужно делать несколько баннеров с различным разрешением.
на таймлайне есть ряд очень полезных кнопочек. слева-право: onion skin, onion skin outlines, edit multiply frames, modify onion markers
первые 2 зачастую используются аниматорами при покадровой анимации
3. onion skin позволяет одновременно просматривать несколько последовательных кадров сразу. вверху на таймлайне вы можете увидеть маркеры, которые просто регулируются и обозначают количество выделенных кадров до и после текущего. в данном случае я отметила 3 кадра после. результат которые получается вы видите справа.
4. onion skin outlines работает таким же образом, единственное отличие кадры отображаются аутлайнами.
5. modify onion markers позволяет быстро изменить настройки маркеров
6. ну и собственно, то что нас больше всего интересует edit multiply frames — позволяет редактировать сразу несколько ключевых кадров.
замечу сразу, что почему-то у многих возникают трудности при использовании этого режима, поэтому расскажу алгоритм действий, который действует наверняка:

1. выбираем режим edit multiply frames
2. выделяем маркерами нужный промежуток кадров вручную или с помощью команды onion al. картинка будет выглядеть как показано на рисунке: будут отображаться только ключевые кадры анимации.
3.выделяем все кадры промежутка, в нашем случае, т.к мы выбираем все кадры, можно просто кликнуть по слою. все символы при этом должны быть выделены.
4. выбираю инструмент transform нажатием горячей клавиши «Q». всё отображаемые символы должны выделиться группой для трансформации. если выделился только один символ, возможно вы что-то сделали не так, повторите процедуру.
5. скейлим до нужного размера (рис.7)

8. проверяем результат

для shape анимации тоже можно использовать этот метод, но если вы используете shape hints, то с ними будут проблемы, ибо они остаются на прежних местах.

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

ззы: ну и бонусом выкладываю исходник акулы

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

рассмотрим на примере хомячка из предыдущей статьи:

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

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

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

есть такой хитрый приём, когда что-то очень быстро движется, необходимо дорисовать шлейф, тогда анимация будет казаться более динамичной.
шлейф может быть как в одном кадре анимации, так и в нескольких. лично я использую максимум 5-6 на 25 fps.
важно отметить, что шлейф обычно рисуется градиентом основного или белого цвета движущегося объекта, плавно переходящий в альфу, но могут быть вариации.
рассмотрим на примере теннисного мячика.

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

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

а вот ещё несколько примеров шлейфов из мультфильмов студии toongu.ru и сергея максимовича

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

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

1. всегда! всегда удаляйте очищайте панель swatches от стандартных цветов. для этого используйте команду clear colors.
после очистки ваша панель будет иметь такой вид и у вас уже не будет искушения ткнуть в первый попавшийся цвет )

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

3. и собственно самое главное. что делать, когда нет времени, желания или способности подобрать правильно цвета.
для этого вам нужно просто взять изображение или часть изображения с понравившейся вам цветовой гаммой, пересохранить его в формате gif и импортировать с помощью команды add colors на панеле swatches.
в результате у вас будет приличный набор нестандартных цветов, который вы можете смело использовать!

удачных рисунков и анимаций вам!

сегодня хотелось бы рассказать о таком параметре как 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, ничё что я стырила твою идею с просмотром изображений?… уж больно она удобная ;о)

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

но как поступить в случае, если фон неоднородный?

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

• нужно дублировать символ и создать в нём новый слой с градиентной заливкой. обязательно белой!!!



• символ должен быть movie clip. если это graphic, можно поменять ему тип на панели свойств.
• задать режим blend: multiply (тоже на панели properties)

единственная проблема в том, что этот способ хорошо работает только на светлых фонах. это особенность режима multiply.

если вы знаете ещё какие-нибудь способы, велкам в камменты
исходник можно скачать тут

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

горячие клавиши для форматирования кадров

f5 – добавить статический кадр. также можно заполнить выделенный промежуток статическими кадрами.
f6 – добавить ключевой кадр. преобразовать статический кадр или группу в ключевые.
f7 – добавить пустой ключевой кадр. или соответственно преобразовать статический кадр или группу в пустые ключевые.
shift+f5 – удалить кадр или группу выделенных кадров
shift+f6 – преобразовать ключевой кадр в статический (можно также преобразовывать группу ключевых кадров)

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

назначение горячих клавиш

например очень часто нам приходится создавать или удалять motion tween, a сочетания клавиш для этого действия нет. рассмотрим как это делается.

• для начала вызываем пункт меню edit -> keyboard shortkuts…
• далее дублируем стандартные установки с помощью кнопки dublicate. этого можно и не делать, но лучше перестраховываться
• из списка команд выбираем нужную. в нашем случае это insert -> timeline -> create motion tween
• добавляем новое сочетание с помощью кнопки add shortcut (плюсик)

• далее нажимаем нужное сочетание клавиш. если такое сочетание уже зарезервировано, появится сообщение содержащее описание команды на которую это сочетание зарезервировано. в данном случае я выбрала сочетание ctrl+shift+t (t – tween, легко будет запомнить).
• нажимаем ok. всё готово!

теперь при нажатии на эти клавиши у нас будет создаваться motion tween. и что ещё замечательно – этим же сочетанием движение можно удалить!

проанализируйте, какими командами вы пользуетесь очень часто и назначте на них горячие клавиши.
я например использую ctrl+shift+y и ctrl+shift+u для flip horisontal и flip vertical соответственно. а ещё клавишу «/» для включения/отключения привязки. :о)
а какие нестандартные сочетания ипользуете вы?

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

1. все контурные линии одного цвета. зачастую чёрного.
2. контурные линии имеют оттенок цвета заливки, но более тёмного.
3. контурные линии не используются вообще
4. в качестве контура выступают линии нарисованные кистью.

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

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

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

если убрать контурные линии вообще, картинка станет аккуратнее, но в нашем случае некоторые детали сливаются:

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

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

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

• практически всегда наброски я рисую на бумаге карандашом или ручкой. возможно я консерватор, но никакой планшет не идёт в сравнение с обычным простым карандашом по части создания скетчей. советую поступать также. хотя иногда бывают исключения.
  
• скетч помещается в самый нижний слой и делается guige, чтобы при компиляции не отображался.
• используйте контурные линии контрастного цвета, например синюю или красную. чёрной прорисовывать очень не удобно.
• забудьте вообще о таком инструменте рисования как pencil! pen, line и oval – вот наши друзья, которые помогут нарисовать всё что угодно. все точки и линии я редактирую с помощью arrow (чёрная стрелка), subselct (белую стрелку) использую только в особо сложных узлах.
• используйте слои и группы. но без фанатизма! есть много элементов, которые можно без проблем совместить в один слой, ибо если слоёв много, с ними не удобно работать.
• не нужно сразу все элементы преобразовывать в символы, достаточно использовать группы. в символы можно будет преобразовать в самом конце, на начальном этапе они будут только мешать.
• при прорисовке я всегда меняю расположение панелей. т.к. анимации в ближайшее время не предполагается – разумно перенести панель timeline влево, при этом становится очень удобно работать со слоями, появляется больше свободного места:
  
• после того как основные контурные линии прорисованы я занимаюсь подбором цветов. во-первых практически всегда удаляю стандартную цветовую палитру, чтобы глаза не мозолила и ищу новые цветовые решения. моя палитра хорошо видна на предыдущей картинке.
• когда основные цвета подобраны, начинается кропотливая работа с градиентами, бликами и деталями.

вот собственно правила и этапы работы, которые использую я при прорисовке.
а как прорисовываете вы? что делаете в первую очередь, какие из приведённых этапов не используете и какие используете, не указанные здесь?

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

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

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

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

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

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

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

сегодня хотелось бы рассказать о структурировании символов для анимации.
рассмотрим на примере самого обыкновенного прелоадера. что может быть проще?
к примеру вот такой: (пост содержит 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 кружков, то придётся затратить немного больше усилий: нарисовать новый многогранник, перераспределить кружочки и растянуть анимацию на соответствующее количество кадров. но в любом случае это на много быстрее, если бы нам пришлось перерисовывать весь прелоадер целиком.

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

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