Flash animation

вот и дождались! обещание данное в этом посте выполнено. мы с александром титовым таки добили плагин для flash layer manager.

данный плагин позволяет быстро и легко проводить операции со слоями.
скачать layer manager ver 1.4.0

convert layers to symbol

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

rename layers

задаёт выделенным слоям новое имя. при этом можно задать счётчик имён от 1 до … например слои содержащие какие-то анимационные эффекты можно назвать effect 1, effect 2 и тд.

dublicate layers

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

delete empty layers

удаляет все пустые слои. слои содержащие скрипты не удаляются!

set publish view

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

установка плагина

1. скачайте и установите adobe extension manager, если он у вас не установлен.
2. запустите LayersManager.mxp
3. перезапустите flash
4. выберете пункт меню window -> other panels -> layers manager
5. приятной работы!

! данный плагин является beta версией. мы будем очень благодарны, если вы примете участие в его тестировании.

все найденные баги присылайте на адрес: santer.titov [sobaka] gmail.com или mallayeva [sobaka] gmail.com

или пишите в комменты. живое обсуждение приветствуется!

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

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

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.

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

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

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

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

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

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

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

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

а вот что получилось у меня. по идее должна смотреть за курсором и говорить если по ней кликнуть

ps: если вы читаете блог через rss-ленту возможно swf файл отображаться не будет. перейдите по ссылке для просмотра http://flash-animation.ru/?p=24

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

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

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

а вам уже доводилось вставлять swf в свой блог? мне да.
я опубликовала свой предыдущий пост, вставив по старинке следующий кусок текста, сгенерируемый публикацией из flash в html.

в опере и эксплорере всё было чудесно, как вдруг я обнаружила, что мозилле всё поплыло и съехало.
я мигом полезла в вордпресс. что же произошло? наш чудесный друг отформатировал код как ему вздумалось, а именно извлёк из тега <object> теги <embed> и <param>, аккуратненько их структурировал и позакравал сразу после открытия.

естественно ничего не работало!
45 минут беседы с техподдеркой никаких результатов не принесли. но посоветовали поискать плагин для вордпресса. таков нашёлся. easy swf plugin 1.1. вроде всё понятно – отличная инструкция по установки и использованию, но работать всё равно не хочет! вставляет ссылки на swf, но никак не хочет вставлять саму флешку. в чём проблема – не знаю.
но попробуйте, может у вас получится!

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

вот таким нехитрым образом мне удалось побороть swf и вордпресс жуть! если вы знаете более удобный и надёжный споссоб – поделитесь пожалуйста