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

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

После такой отработки дрожит бизнесмен, не желающий рассказывать где деньги лежат:

Всего лишь нужно для каждой части тела сделать 2 состояния (2 кадра) которые немного (главное не переборщить) отличаются друг от друга. Читать полностью »

По ходу своей деятельности, я люблю собирать самые разнообразные анимационные спецэффекты. Те что я сделал сам, пригодятся в будущем для повторного использования, а чужие - отличный источник информации и возможность поучиться. Очень хорошо можно поучиться у Collideascope Animation Studios.

Написано по-английски, но это не важно. Такие уроки можно и не читать - из демок все понятно. Например, видео приведенное ниже нужно просто смотреть много раз, потом много раз смотреть его покадрово. Потом можно и комментарии почитать - понятней будет:



Или вот такой наборчик:

Рассказ не просто о спецэффектах, а о том как сделать их именно во флэше.
Обратите внимание, как символ с кусочком анимации используется многократно. И набор этих клипов дает качественно новый результат (деформируя клипы по вертикали и горизонтали, можно изменить результат до неузнаваемости).
Ссылки на уроки: часть1, часть2, часть3.

А вообще советую скачать их к себе на комп и детально исследовать в любимом проигрывателе.

Еще один урок от ANIMEFISH.COM

Привет Всем!

Итак, продолжаем хитрить

Этот пост посвящен одной из важных хитростей в анимации - 2,5D.
Для тех кто не в “танке” 2,5D - это серединка между 2D и 3D
Интересно, а что значит серединка? Давайте рассмотрим.

Очень часто в анимации требуется использовать движение обьекта не в 2-х плоскостях, как это происходит в 2D, а в 3-х - как это должно происходить в 3D. Но, но! Мы же знаем, что наш всеми любимый Adobe Flash не умеет использовать элементы 3D графики…. А что же делать? Ведь так хочется (или требуется) иногда привнести такой элемент.

На помощь могут прийти 3 способа: 1 - мы прорисовываем покадрово все фазы, как это делают мультипликаторы… сложноватенько и долговатенько… 2 - мы рисуем то, что нам нужно в любом трехмерном пакете, а потом конвертим в последовательности кадров для флеш… Слишком большой объем файла получиться, а у нас каждый байт иногда на вес золота. Поэтому, поэтому выбираем метод 3 - ни 2D ни 3D - 2,5D.
Вся анимация - это обман. Да, это обман зрения. Задача аниматора - обмануть зрителя так, что бы тот не смог этого понять. Аниматоры - они как фокусники, - те же фокусы с обманом зрения. Иногда даже не замечаешь, как тебя обманул аниматор (хотя проффи часто видят то, чего не видит простой глаз). Итак, наша задача - обмануть зрителя так, что бы он думал, что видит объемный объект, на самом деле мы “дурим” - хитрим.

Итак - колесо, но не простое, а от телеги. Возможно кто-то из вас подобные вещи и делал, тут нет ничего сложного.

Рисуем колесо телеги (1), потом создаем movieClip, внутри которого делаем вращение нашему колесу (2) и сжимаем этот movieClip по горизонтали. О! У нас уже что-то получается похожее на колесо в объеме. Теперь сделаем копию этого клипа, поместим ее на слой и совершим над ней (копией) магический тинт. Теперь сдвигаем так, что бы…. ну в общем, сдвигаем на глазок так чтобы получилось как на рис (3). Следует учесть: если спицы колес делать тонкими - то и клипы нужно близко сдвигать, чтобы не было зазоров между затинтованным и оригинальным клипами (4). Так - теперь делаем сколько нужно колес и дорисовываем “телегу” и - поехали (5).

Дальше - дальше сложнее - нам нужна монетка? - без вопросов! Читать полностью »

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

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

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

Урок от ANIMEFISH.COM
Оказывается анимация не такая уж и страшная штука, если понимать что к чему.
Содержание привожу “как есть”:

Всем привет!

Хочу поделиться хитростями использования класической анимации во flash.

Начнем с теории. Загрузка процессора. Использование скриптов для создания спецэффектов для флеш роликов не всегда приводит к хорошим результатам. Часто это приводит к сильной загрузке центрального процессора, что в свою очередь замедляет работу ролика, приводит к снижению fps.

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

Как же нам может помочь применение классической анимации. Пример: нам необходимо создать игру в которой персонаж путешествует по старинному замку. Как нам известно - старые замки освещались с помощью факелов и свечей. Использование скриптов в данном случае может привести к нагрузке на центральный процессор (особенно если мы скрипты используем еще для нескольких эффектов). Заменить скриптовые эффекты могут анимационные клипы “зацикленные” или “закольцованные”, анимация в которых повторяется циклически, без рывков между первым и последним кадром.

Итак, начнем с основ. Сначала нам нужно создать “ключевые кадры”, они содержат главные фазы анимации - между которыми мы позже прорисуем промежуточные фазы.

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

Условно выделю 2 способа - они немного похожи, но дают разные ощущения.

Смысл первого - в рисовании смазанного промежуточного положения, как будто предмет быстро движется, но его проекция не успевает исчезать с воздуха. Анимация при этом сглаживается, не вызывая раздражения. Проще будет, если нарисовать начальное и конечное положение, между ними вставить пустой кадр и включить режим Onion Skin Outlines . Если одного кадра недостаточно, можно нарисовать 2 или даже 3 (совсем роскошь). В примере ниже: в одну сторону - 1 кадр, обратно - 2:

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

Ни о чем таком сложном я говорить не буду - есть простые вещи, знакомые всем еще со школы. Это функции синуса и косинуса, которые во флэше доступны как Math.sin() и Math.cos(). Для их осознанного использования, достаточно понимать, что они имеют колебательный характер (как маятник - внизу ускоряется, по бокам - замедляется), принимают всего один параметр - число(момент времени) и возвращают результат в этот момент времени (от 0 до 1). Обычно нет разницы что использовать, sin или cos, отличаться будет только начальное состояние.
(шепотом, 3cbc8ca6613ce62cc455d8ac747fc112.)

Главное, что можно результат, возвращаемый функциями присваивать любому свойству. Если делать это каждый кадр, то свойство будет колебаться. На примере ниже, я меняю таким образом _x, _y, _width, _height, _rotation. Еще ниже есть Actionscript для каждого случая.

Когда я набрел на мульты Адама Филипса, первое что я сделал после просмотра - начал их декомпилировать. И анимацию можно детально просмотреть, и что-нибуть интересное найти. Интересное нашлось сразу, точнее я не сразу понял как из этого fla-файла, получается такой сказочный swf. Оказалось что Адам, тот еще хитрец - использует секретное оружие, которое разработал его друг Sham Banghal - виртуальную камеру. Посмотреть как она работает и скачать ее можно здесь.

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

Делаем ее так: создаем клип, внутри него делаем 2 слоя. На одном рисуем рамку по размерам флэшки (это важно, иначе могут быть пустые края по сторонам) - это объектив камеры, на другом, в кадре, пишем код:

import flash.geom.Transform;
import flash.geom.Matrix;
 
var level = 0;//на сколько клипов вверх компенсировать трансформацию
 
cameraFrame._visible = false;//делаем саму рамку невидимой
init();
 
//==================================
//don't tuch this :)
 
function init(){
    var oldMode = Stage.scaleMode;
    Stage.scaleMode = "exactFit";
    w = Stage.width;
    h = Stage.height;
    Stage.scaleMode = oldMode;
    recalcParentMatrix();
    cameraStep();
    onEnterFrame = cameraStep;
    onUnload = resetStage;
}
function recalcParentMatrix() {
    mc = _parent;
    if(level){
        var i = level - 1;
    } else {
        var i = 1000;
    }
    while (i-- && mc && mc != _root) {
        var tempTrans = new Transform(mc);
        if (!parentM) {
            parentM = tempTrans.matrix;
        } else {
            parentM.concat(tempTrans.matrix);
        }
        mc = mc._parent;
    }
    cameraTrans = new Transform(this);
    topLevelTrans = new Transform(mc);
    resetM = topLevelTrans.matrix;
    resetTopLevelColor = topLevelTrans.colorTransform;
}
function cameraStep() {
    topLevelTrans.colorTransform = cameraTrans.colorTransform;
    curM = cameraTrans.matrix;
    if (parentM) {
        curM.concat(parentM);
    }
    curM.invert();
    curM.translate(w / 2,h / 2);
    topLevelTrans.matrix = curM;
    //mc.filters = this.filters;
}
function resetStage():Void {
    topLevelTrans.matrix = resetM;
    topLevelTrans.colorTransform = resetTopLevelColor;
}

Использовать камеру очень просто, создайте анимацию, как будто она движется поверх сцены и снимает то что вам нужно. Все трансформации примененные к камере, автоматически пересчитываются на сцену. Чтобы было понятнее, вот пример (здесь анимируется ТОЛЬКО камера): Читать полностью »

Это мега-человек с 15-летним анимационным стажем, у которого многому можно поучиться. В 1993 г. начал работать в Диснеевском отделе 2D-анимации в Сиднее. 8 лет занимался спецэффектами, 3 из которых руководил этим направлением.

В 2004 году ушел от Диснея и стал работать “на себя”, зарабатывая репутацию рассказчика историй и создателя высококачественной анимации. Заработав множество международных наград, и имея кучу поклонников, продолжает радовать нас интересными работами:

Софт, которым он пользуется, по его словам, выглядит так:

• Adobe After Effects
• Adobe Flash
• Adobe Photoshop
• ToonBoom Digital Pro
• ToonBoom Storyboard Pro

А также несколько лет опыта в 3D редакторах:

• Newtek Lightwave
• MAXON Cinema4D
• Carrara
• Autodesk Maya

Еще он часто музыку себе сам пишет.

Из всего этого я для себя вынес 2 вещи: нужно работать на себя и осваивать новые виды деятельности (и конечно, изучать инструментарий - программы, техники, стили…)

Для тех кто зауважал этого человека, есть еще немного интересного. Трафика много, но оно того стоит: Waterlollies, LittleFoot (секретные уровни), the Yuyu, Prowlies at the River, Bitey of Brackenwood.

P.S. Еще у него на сайте есть забавный каледарик вверху где собраны работы-однодневки.

Многие разработчики и аниматоры сильно недооценивают встроенные возможности флэша, а порой просто не знают о них. Одна из таких - инструмент Free Transform Tool. А точнее его подвид Envelope. Наверное все знают его можно применять для изменения формы одного или нескольких объектов. Но мало кто знает, что это можно делать в режиме Edit Multiple Frames. Как же нам это использовать? Читать полностью »