отражения

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

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

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

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

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

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

cartoon animation by preston blair

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

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

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

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

структура символов для анимации

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