Хитри - блог о хитростях разработки флэш-игр, игровых баннеров и флэш-анимации

Прошла суббота, а вместе с ней и UAFPUG 3, посвященный флэш-анимации.
Я был приятно удивлен теплым коллективом и не ожидал, что это будет так интересно.
Знакомство и общение с новыми людьми, красивый город и увлекательное after party сделали свое дело. Теперь буду посещать такие мероприятия чаще.

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

Я выступал вторым, между Колесником Александром и Акимовым Олегом. Когда подошла моя очередь, я разволновался и первое время мялся как школьник и сказал далеко не все что хотел. Потом как-то попустило и речь пошла более связная. Думаю, это придет с опытом.

Выкладываю свою презентацию, ниже можно и исходник скачать. Все хитрости подаются как готовое решение - эффект копируется в флеш-мультфильм путем copy/paste. Код не везде “чистый”, потому как некоторые вещи брал из работ которым более 2-х лет. К тому же возможен “левый код”, который нужен был для символов, которых здесь нет. Я об этом не сильно заботился, потому как решение выложить исходник было принято уже на самой презентации. Поэтому примите все как есть.

Сегодня Adobe Flash - это мощная программа, которая решает широкий спектр задач и создала несколько профессий – флэш-программисты, флэш-аниматоры и иллюстраторы. Веб-дизайнеры не отстают и тоже стремятся взять флэш на вооружение.
В связи с этим, люди, которые занимаются преимущественно анимацией, Actionscript-ом практически не пользуются, максимум – команды play(), stop(), gotoAndPlay(), gotoAndStop(). Программисты же, впадая в фанатизм, пытаются все сделать исключительно скриптами, а к твиннингу относятся с пренебрежением. Не все, конечно, но многие. Как в программировании, так и в простой анимации, есть свои преимущества и недостатки. И эффективней работать будет тот, кто использует преимущества обоих направлений.
Так как сегодняшняя тема посвящена анимации, то и доклад ориентирован в основном на флэш-аниматоров.

Как же может Actionscript помочь флэш-аниматору?
Я не буду касаться вопросов интерактива, так как без программирования там делать нечего. Наоборот, попробую подружить аниматоров со скриптами для создания простой линейной анимации, будь то мультфильм, клип, флэш-открытка или презентация. Дальше я буду говорить о решениях применительно к такому типу задач. Большей частью программная анимация пригодится для фона и объектов второго плана, т.к. главные действующие лица требуют уникальный и неповторяющийся набор действий.

Чтобы создать программную анимацию, необходимо какой-либо из этих параметров изменять с течением времени. Во флэше для этого есть событие EnterFrame. Для удобства изучения советую для начала писать код непосредственно на клипе при помощи обработчика событий onClipEvent. Так скрипт будет привязан к конкретному клипу и не затеряется (тем более что для мультфильмов излишняя строгость и не нужна).
Создавать и управлять движением можно по разному: можно просто прибавлять к свойству(например, _x) число – это будет линейное движение без ускорения, а можно привязать к какому-либо математическому закону.

1)Инструментарий и базовая анимация

Для Actionscript доступны те же свойства что и для твиннинга:

• _x – положение по оси X
• _ y – положение по оси Y
• _rotation – вращение объекта (угол поворота)
• _width, _height – ширина и высота в пикселах
• _xscale, _yscale – ширина и высота в процентах от оригинального размера
• Цветовые трансформации

Для вращения колеса, на клип “вешается” простой код:

onClipEvent (enterFrame) {
 
 _rotation += 17;
 
}

Но его придется вешать на каждое колесо.

Иначе можно внутри клипа с колесом прописать (всего 1 раз):

onEnterFrame = function(){
 
 _rotation += 17;
 
}

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

Смещение на слайде 6 сделано по принципу программной анимации фона.

Масштабирование (слайд 7).
Это программный способ, как альтернатива рисованному.
Для дрожания таймера с динамитом использован такой код:

onClipEvent (load) {
 
 s0 = _xscale; //запоминаем начальный размер
 
 onEnterFrame = function(){
 
 	_xscale = _yscale = s0 + Math.random() * 3;//добавляем случайный разброс
 
 }
 
}

Дрожание камеры делается точно так же.

2) Анимация при помощи математических законов, на примере функции Math.sin()

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

3) Спецэффекты и готовые решения

Спецэффекты приходится делать очень часто – от этого зависит будущая стоимость работы. Чем больше зритель впечатлится, тем лучше. Далеко не все эффекты можно запрограммировать. Например, течение реки, разбрызгивание воды из шланга, ветер, качающий дерево с листвой проще сделать руками с учетом физики и законов природы. Просто руками в этом случае будет проще. Но есть и такие процессы, которые заранее предсказуемы и повторяются с течением времени. Для них проще применять скрипты, тем более что достаточно сделать это один раз и потом всегда держать их под рукой.

1. Программный огонь во флэше уже был описан на сайте.
2. Дым получен путем дублирования клипа smoke, определение для него свойств и задания поведения. Волнообразное движение дыма задано все тем же синусом
3. Программное создание моря.
4. Снег получается так же как и flash-пузырьки, только летят вниз и площадь покрытия для них определяется другим клипом.
5. Конфетти - то же самое, но в снежинке другая форма и есть еще дополнительная анимация.
6. Эффекты взрыва во флэше.
7. Собственно, сами пузырьки.
8. Электрический разряд. В двух словах это звучит так: по двум заданным точкам (начало и конец) строятся промежуточные, случайно отклоняются от основной оси (к центру сильнее) и потом средствами флэша рисуется ломанная линия. И так каждый кадр. Слоем ниже есть такая же ломанная, но линия для нее задана толще - эффект свечения.

4) Полезности

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

Например, на слайде 23 есть 2 ряда персонажей. Только у верхних анимация рассинхронизирована, а нижние движутся как отряд солдат или клонов. Думаю все используют прелести MovieClipа, а именно сделал 1 раз - дублируй сколько хочешь (меняй размеры, поворачивай, отражай по осям, разная прозрачность, оттенки). Но точно так же стоит и начать проигрывание с произвольного кадра. Картинка получается живее и, что самое интересное, она каждый раз будет разная.

Лучше всего писать этот код внутри самого клипа и поставить проверку чтобы он выполнился всего один раз:

if(!_f) {//этот код
 
 _f = true;//выполнится один раз
 
 gotoAndPlay(random(_totalframes));
 
}

Это самая короткая известная мне форма записи, однако специалисты из Adobe рекомендуют писать так:

if(!_f) {
 
 _f = true;
 
 gotoAndPlay(Math.floor(Math.random() *_totalframes));
 
}

Но если нужно остановиться в случайном кадре, то лучше так:

if(!_f) {
 
 _f = true;
 
 gotoAndStop(Math.floor(Math.random() *(_totalframes - .001)) + 1);
 
}

Так избегается возможный вариант gotoAndStop(0);

На слайде 24 можно посмотреть как это выглядит в природных условиях.
Но здесь есть еще одна интересная хитрость. На мой взгляд, это самое интересное в докладе, что до этого еще не публиковалось. Можно сказать что “анимация выносится за скобки”. То есть, анимируется некий “скелет” - набор символов-контейнеров для головы, тела, рук и ног, а разные персонажи получаются путем нехитрого скинования (слайд 25). В эти символы-контейнеры в разных кадрах рисуются части тела для конкретного персонажа. Все что касается собаки лежит в первом кадре, все для котенка - во втором. Поросенку достался третий кадр. В каждом из этих символов прописан код:

gotoAndStop(_parent.type);

А на самих клипах-персонажах (которые внешне выглядят как персонаж из первого кадра) написано кем он будет.

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

Слайд 26 - программная пауза во флэше. Для эффекта фотоснимка или чтобы мультфильм плеером остановить.

Слайд 27 - виртуальная flash-камера. Это так полезно для аниматора, что внешний вид клипа стоит распечатать и повесить возле рабочего места чтобы не забывать ею пользоваться (во всех уважающих себя анимационных программах она давно есть).

Без упоминания о классе Tween доклад о программной флэш-анимации точно будет не полный. Хотя на эту тему было много публикаций, стоит и help почитать. Лично для себя я решил что он лучше всего подходит для анимации текста. Особенно когда он разбит на слова. Также лучше вначале выстроить финальную композицию из объектов, а затем перемещаться из какой-либо точки в текущую. Для примера, для слова “Этот” написан такой код (скорость появления текста я вынес в отдельную переменную timeIn и настраивать эффект стало легче):

onClipEvent (load) {
 
 import mx.transitions.Tween;
 
 import mx.transitions.easing.*;
 
 var tX = new Tween(this, "_x", Elastic.easeOut, _x - 100, _x, _parent.timeIn, false);
 
 var tA = new Tween(this, "_alpha", Regular.easeOut, 0, 100, int(_parent.timeIn*.7), false);
 
}

Вообще-то непростой код, как для человека который не привык нажимать “F9″. Но если хранить его под рукой, можно повысить производительность.

Пожалуй и все, больше деталей в исходнике.

  UAFPUG_3_Xitri (690 KB, 2,902 hits)

P.S. Фотоаппарат я не брал, поэтому жду фотки, а пока спасибо Мигелю за видео о том как играют флэшеры и поют памятники. Еще немного фоток я нашел здесь.

Интересно на 71%