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

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

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

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

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

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

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();

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