Анимационные обманки

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

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

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

А вообще, сама идея в ролике замечательная. Мое внимание привлекли однозначно.

Я перешел на 5-й уровень!

Ура! Наконец-то я дождался очередного апа Google и сегодня toolbar показал мне пятерку. Как-то кисло было наблюдать раньше нолик — теперь намного приятнее.

Pagerank 5

А чтобы было еще веселее — буду относиться к этому, как к игре, поэтому сейчас я на 5-м уровне. А чтобы пройти дальше, нужно найти аптечку, супероружие и набрать побольше бонусов :))

Программное движение автомобиля во флеш — теперь с прицепом

Это продолжение дорожных приключений. Тогда попросили сделать вариант с прицепом. Я понимаю желание сделать «побырику» flash-игру типа «Парковка» имея под рукой готовый код, поэтому дальше описан пример как это сделать. И не один прицеп, а целый поезд.

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

В жизни, на колеса действует множество сил, и машина с прицепом — сложная система для расчетов. На решение такой задачи может претендовать какой-нибуть физический движок. У меня же нет точных расчетов и все что можно — имитируется. Поэтому, если ваш вариант будет вести себя не совсем корректно, некоторые параметры нужно будет изменить по ситуации. Я не часто вижу как ездят автомобили с прицепом, поэтому все настраивал интуитивно. Прошу оценить реализм 🙂

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/07/auto_trailer_control.swf" height="200" width="550" /]

От предыдущего примера код почти не отличается. Добавилось несколько новых клипов и одна функция в коде. Читать далее Программное движение автомобиля во флеш — теперь с прицепом

Сделал себе игровой баннер.

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

Тема выбрана как наиболее ходовая для игровых баннеров — шутер. С идеей тоже долго не возился. С некоторых пор я «завязал» и не пью спиртное (и вообще пытаюсь вести здоровый образ жизни), так что для успешного прохождения игры, нужно расстреливать бутылки со спиртным, но оставлять невредимыми упаковки с соком. Набравший 100 очков переходит на «сайт с трезвым подходом к разработке флэш-игр«. Пока их не набьете, у вас ничего не выйдет. Получился он вот такой (300х250):

[kml_flashembed movie=»http://xitri.com/wp-content/uploads/2008/07/bannerxitri2_300x250.swf» height=»250″ width=»300″ /]

или такой,  поменьше (200х100):

[kml_flashembed movie=»http://xitri.com/wp-content/uploads/2008/07/bannerxitri2_200x100.swf» height=»100″ width=»200″ /]

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

P.S. Позже опишу как его сделать. Задавайте пока вопросы

Флэш-игра Shift 3 — шедевр от Armor Games

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

Это уже третья версия игры:

Shift3 от Armor Games

В предыдущие версии тоже стоит поиграть, наверное так даже будет интереснее — Shift 1 и Shift 2.

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

P.S. Спасибо Ixifeus за ссылку

Даю порулить — программируем движение автомобиля для флэш-игр

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

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

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/07/auto_control.swf" height="200" width="550" /]

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

Где брать идеи для flash-игр

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

Например, стоит подумать об аппликации, оригами или… конструкторе Лего. Именно так и поступил  некто Skinny Coder и перестроил близкие сердцу игромана старые игрушки на новый лад. Пока только в виде картинок.

LEGO game - duck hunter

Даже стало интересно, как теперь персонажей анимировать 🙂 Хочется привязаться к конструкторскому пикселу и при движении смещать объект на один зубчик, примерно за треть секунды. А частица взрыва будет такой: вначале кубик 4х1, затем 3х1,  затем 2х1, затем 1х1 и нету его.

А вообще это хороший способ изобретения — взять качества с одного объекта и перенести их на другой.

Программная анимация и сферы её применения — UAFPUG 3 и как это было

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

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

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

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

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

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/07/uafpug_3_xitri.swf" height="415" width="550" /]

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

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

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