shvagir Dec 20 2008 at 16:54

Работа с классом TweenLite

2 min

10K

Доброго времени суток!

Для создания обыкновенного банера во Flash в основном требуються только навыки анимации и знание AS1, чтобы где необходимо поставить stop(); или перейти по ссылке getURL();, и обычно этого хватает. Но если заказчик просит сделать мини мультфильм внутри банера, да еще и растровые изображение присутствуют, а в тоже время администраторы сайта, где будет размещаться банер, ставят на него ограничение 20 кб. Использование множества слоев с Motion tween и Shape tween, объектов в библиотеке и т.д. За счет всего этого объем банера превышает допустимую квоту.

Ниже будем избавляться от tween'ов на нашей сцене и опишем все движения при помощи класса TweenLite(используется с AS2,AS3).

Для начала нам надо определиться как будем работать с кодом, здесь есть два пути:

Создание отдельного класса с кодом(к примеру: tween.as).
Использование одного из кадров сцены где будет храниться наш код.

1.

В этом случае необходимо будет в наш ролик, в первом кадре сцены прописать #include «tween.as». Создадим класс tween.as. Внутри самого класса будет примерно такая структура:

//добавление классов для анимации



import gs.TweenLite;

import gs.easing.*



//описание нашего класса



class tween extends MovieClip 

{



//описание клипов

 private var mc:MovieClip;

 public var mc_:MovieClip;



//описание функций



public function tween1(){}

 private function tween2(){

}

Не будем заострять на этом пути внимании и сделаем более просто.

2.

Сразу хочу предупредить что всем объектам, которые находятся на сцене, заранее заданы имена. В созданном ролике в первом кадре пишем:

//добавление классов для анимации



import gs.TweenMax;

import gs.easing.*



//сама анимация



TweenLite.to(mc, 1, {_x:1, _y:1, _xscale:1, _yscale:1, _rotation:0, _alpha:100, tint:0x000000, ease:Back.easeOut});

TweenLite.to(имя клипа, скорость_анимации, {положение_клипа_на_сцена_по_x_в_конце_анимаци, положение_клипа_на_сцена_по_y_в_конце_анимаци, размер_который_примет_объект_к_концу_анимации_width, размер_который_примет_объект_к_концу_анимации_height, поворот_клипа_(положительное — по часовой, отрицательное — против часовой), прозрачность_клипа, цвет_клипа_к_концу_анимации, ease:Back.easeOut});

Пункт ease отвечает за тип движения. Существует несколько видов:

без ease(обычное равномерное движение)
Back.easeIn
Back.easeOut
Back.easeInOut
Bounce.easeIn
Bounce.easeOut
Bounce.easeInOut
Circ.easeIn
Circ.easeOut
Circ.easeInOut
Cubic.easeIn
Cubic.easeOut
Cubic.easeInOut
Elastic.easeIn
Elastic.easeOut
Elastic.easeInOut
Expo.easeIn
Expo.easeOut
Expo.easeInOut
Linear.easeNone
Quad.easeIn
Quad.easeOut
Quad.easeInOut
Sine.easeIn
Sine.easeOut
Sine.easeInOut

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

function enableTween():Void

{

TweenLite.to(mc, 1, {_x:1, _y:1, delay:0.0, _xscale:1, _yscale:1, _rotation:0, _alpha:100, tint:0x000000, ease:Back.easeOut});

TweenLite.to(mc, 1, {_x:1, _y:1, delay:0.1, _xscale:1, _yscale:1, _rotation:0, _alpha:100, tint:0x000000, ease:Back.easeOut});

TweenLite.to(mc, 1, {_x:1, _y:1, delay:0.2, _xscale:1, _yscale:1, _rotation:0, _alpha:100, tint:0x000000, ease:Back.easeOut});

}

И запустить в нужном месте программы enableTween();

Более подробную информацию о данном классе можно узнать в этом блоге. Там же его можно скачать.

Hubs:

Adobe Flash