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

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

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

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

Урок от 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. Как же нам это использовать? Читать полностью »

Наверное один из самых полезных трюков. С его помощью можно переводить персонажа из одного состояния в другое без лишних усилий.

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

Наверное один из самых полезных трюков. С его помощью можно переводить персонажа из одного состояния в другое без лишних усилий.

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