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

3 Апрель 2008

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

posted in animation, lesson, исходники |

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

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

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

This entry was posted on Четверг, Апрель 3, 2008 at 7:23 and is filed under animation, lesson, исходники. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 On Апрель 3, 2008, whitered said:

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

2 On Апрель 3, 2008, Lerika said:

2 whitered: да это тоже отличный способ )
но если кружочков будет например 14?
360/14=25,714285…итд
какой в этом случае задавать угол поворота?
а так мы задали number of sides в параметрах polystar и все градусы высчетаны за нас

3 On Апрель 3, 2008, Lerika said:

кстати, а ещё в принципе можно не мучаться со скриптами, а символ “point_anim” сделать graphic и выставить для каждого кружка параметры loop и задать начало анимации кадры от 1 до 8.
правда в этом случае в двух местах надо будет добавлять статические кадры, ибо graphic должен быть синхронизирован с временной шкалой.

в общем решений куча

4 On Октябрь 21, 2008, Виктор said:

Можно еще больше упростить создание этой анимации – клипы назвать point1, point2, pointN и на первый клип повесить код:

onClipEvent (load) {
for (var i = 0; i<N; i++) {
_parent["point"+i].gotoAndPlay(i);
}
}

где N – количество клипов и, соответсвенно, кадров в каждом из них.

5 On Февраль 23, 2009, Nadzeya said:

Прошу прощения.., а как это «сделаем motion анимацию параметра alpha «?
Это где такое делается?)

6 On Февраль 23, 2009, Lerika said:

это когда есть промежуток анимациив (как на картинке в пункте 5) и в последнем ключевом кадре данной анимации мы выделяем символ и на панеле properties задаём символу свойство alpha = например 0% (в выборке Color:)

7 On Февраль 23, 2009, Nadzeya said:

У меня такая беда, у меня на понели пропертис нету ничего связанного с цветом.. Отдельная панель Color есть, а на properties нету..

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

8 On Февраль 23, 2009, Nadzeia said: