Имитация изометрии.

мая 15, 2008

Старый, но приятный трюк: анимация изометрического изображения.

Такая штуковина очень проста в изготовлении.
Надо только сообразить, что мувиклипы с двойным дном таят в себе скрытые возможности ))
Если к примеру клип, который вращается вокруг своей оси, поместить в клип, который сжат по вертикали (_yscale = 75) то мы получим имитацию вращения изометрического изображения.
А если несколько изображений положить друг на другом как блины – получится объемное изометрическое изображение которое можно крутить, как душе угодно )

Самое забавное в этом методе – это моделирование модели.
Делается это на таймлайне. 1 кадр – это дно, последний кадр – вершина нашей блинной скульптуры.
Вот, к примеру – как выглядит клип из которого нарезается приведенная выше анимация:


Алгоритм построения прост:

  1. Создать общий контейнер для всей фигуры;
  2. Создать в нем N пустых контейнеров(N=_totalframes клипа, составляющего фигуру) с _yscale = 75 (варируется) ;
  3. В пустой контейнер N аттачится клип-фигура и останавливается на кадре N+1;

А вот собственно совершенно простой код:

// на сцену нужно в нужном месте положить клип под именем holder
var distance:Number = 1; // дистанция между "кусками"
var speed:Number = 5; // скорость вращения
var scaleFactor:Number = 75; // масштабирование по Y
 
var slices:Number; //  количество кусков (определим позже)
 
// функция, создает контейнер для куска, и вставляет в него
// клип-фигуру с установкой нужного кадра.
// n = порядковый номер куска
function attachSlice(n:Number):Void
{
     var slice:MovieClip = holder.createEmptyMovieClip("slice"+n,n);
     // в библиотеке символ, из которого делим фигуру снабдить linkage=sculpture
     slice.attachMovie("sculpture","gfx",0);
     slice.gfx.gotoAndStop(n+1);
     slice._yscale = scaleFactor;
     slice._y = -n*distance;
}
 
// В начале, создадим первый кусок (дно) и заодно узнаем,
// сколько в нем кадров, чтобы установить значение slices
attachSlice(0);
slices = holder.slice0.gfx._totalframes;
 
// выкладываем все остальные куски
     for(var i=1; i < slices; i++)
{
attachSlice(i);
}
 
// вращение фигуры
// (тут можно определить и другое поведение - вращение от клавиатуры, мыши и т.д.)
holder.onEnterFrame = function():Void
{
     for(var i=0; i < slices; i++)
     {
          this["slice"+i].gfx._rotation += speed;
     }
}

Можно получить вполне грациозную табуретку

Или вот такое подобие сканирования человека ))

Popularity: 6% [?]

Entry Filed under: 3D,ActionScript,Uncategorized,draw,fx,Полезное,анимация

5 комментариев

  • 1. ded pb|xto  |  мая 15, 2008 at 12:49

    Здоровский пост! :)

  • 2. 7thsky  |  мая 26, 2008 at 19:23

    Офигенно :)

  • 3. KUSAKA  |  мая 27, 2008 at 13:07

    Че-то не получается… :-(

  • 4. KUSAKA  |  мая 28, 2008 at 5:43

    Получилось! Прикольный эффект! В коде ошибки есть, пришлось голову включить =)

  • 5. murejib  |  мая 28, 2008 at 9:01

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

    Поправил код )

    НО! То что пришлось включить голову – это самое ценное )




МЕТА

Метки

2d 3D ActionScript adobe ae after effects animation animator_at_work AS2.0 AS3.0 astro bones bug bugfix debug deep linking draw drawing extension Flash flash CS4 flex fscommand fx html IK Math mindstream music-video NB opensource security swfaddress TextField traps uafpug useful utils video Новости анимация кинематика кости поток сознания туториал

Календарь

Май 2008
Пн Вт Ср Чт Пт Сб Вс
« Апр   Июн »
 1234
567891011
12131415161718
19202122232425
262728293031  

Архив

Ссылки

Радио