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

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

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

Случилось так, что сегодня мне пришлось переделывать презентацию после других людей. И я столкнулся с проблемой излишнего веса в одной из работ - обычная на вид презентация, длительностью 15 секунд, весит целых 6 мегабайт. Оказалось, что ее создатели (совсем американцы зажрались), не мудрствуя лукаво, взяли стоковые фотки и вставили во flash “как есть”, а потом масштабированием уменьшили до нужных размеров.

Пришлось пережимать. И тут флэш меня приятно порадовал - оказывается можно пережать растровую картинку пользуясь только его родными инструментами.

Делаем так: уменьшаем фотографию до нужного размера, копируем в буфер (Ctrl+C), дальше Edit-Paste Special, и в появившемся окне выбираем Device Independent Bitmap. Порадовало, что даже прозрачность сохраняется.

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

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

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

Основой большинства спецэффектов во флэше, является функция duplicateMovieClip. До появления програмного рисования и объекта BitmapData, это был чуть ли не единственный способ программирования flash-эффектов. Эта функция просто создает дубликат уже существующего клипа. В нашем случае, мы создаем набор дубликатов и дальше управляем ими по ситуации.

Сделав более 500 игровых баннеров, я заметил, что некоторые эффекты часто переходят из одной работы в другую и практически без изменений. Самый популярный среди них - эффект взрыва / брызг / осколков.

Рзберемся, как это делается (я еще не разобрался с аудиторией сайта, поэтому буду разжевывать) + пример ниже: Читать полностью »

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

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

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

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

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

Ур-р-ра!!!
Сейчас я нажму кнопку «Опубликовать» и мир увидит проект «Хитри» и его первый пост.

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

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