Эффекты перехода с помощью ActionScript 3.0 (Класс TransitionManager)

Источник: tutorials.flashmymind.com

В этом уроке вы узнаете всё о возможностях класса TransitionManager - этот класс заведует эффектами перехода.

Вступление:

Класс TransitionManager позволяет вам применять к своим МувиКлипам различные анимационные эффекты. Есть десять доступных для вас эффектов:

- жалюзи
- исчезновение
- полёт
- оболочка
- фотография
- пикселизация
- вращение
- сжатие
- стирание
- увеличение

Эти эффекты вы можете пронаблюдать во флешке, которая расположена выше.



Подготовка:

1. Создаем новый документ 500 х 300 пикселей.
2. Рисуем квадрат 50 х 50 пикселей.
3. Конвертируем квадрат в МувиКлип с точкой регистрации в центре, задаем ему имя "box".
4. Теперь на сцене размещаем десять экземпляров нашего МувиКлипа "box".
5. Задаем экземплярам в свойствах в поле "instance name" следущие имена: box1, box2, box3, box4, box5... и т.д.

Пишем код:

6. Создаем новый слой в TimeLine и пишем там следующий код:

 

//Импортируем библиотеку с эффектами переходов.

import fl.transitions.*;

import fl.transitions.easing.*;

//Этот массив будет содержать все эффекты переходов.

var transitions:Array = new Array();

//Назначаем слушатель на событие мыши MOUSE_OVER для каждого квадрата.

box1.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box2.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box3.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box4.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box5.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box6.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box7.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box8.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box9.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

box10.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

//Задаем каждому квадрату свой эффект перехода.

box1.transition = Blinds;

box2.transition = Fade;

box3.transition = Fly;

box4.transition = Iris;

box5.transition = Photo;

box6.transition = PixelDissolve;

box7.transition = Rotate;

box8.transition = Squeeze;

box9.transition = Wipe;

box10.transition = Zoom;

//Эта функция вызывается каждый раз при наведение мышью на какой-либо квадрат.

function mouseOverBox(e:Event):void

{

//Квадрат, на который была наведена мышь, сохраняем в локальной переменной.

var selectedBox:MovieClip = MovieClip(e.target);

/*

Удаляем слушатель события, чтобы пользователь не смог остановить

анимацию до того, как она закончится.

*/

selectedBox.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

/*

Начинаем новый переход со следующими параметрами:

type: Мы используем тот тип эффекта перехода, который был назначен выбранному квадрату.

direction: Направление анимации (Transition.OUT это второй параметр)

duration: Продолжительность анимации в секундах.

easing: Тип ослабления (сглаживания) анимации.

shape: Форма маски. Назначается только когда используется "Iris" переход.

*/

var myTransitionManager:TransitionManager = new TransitionManager(selectedBox);

myTransitionManager.startTransition({type:selectedBox.transition,

direction:Transition.IN, duration:1, easing:Regular.easeOut, shape:Iris.CIRCLE});

//Добавляем переход в массив, теперь он не попадет в процесс сборки мусора;

transitions.push(myTransitionManager);

//Добавляем слушатель на окончание анимации перехода.

myTransitionManager.addEventListener("allTransitionsInDone", animationComplete);

}

//Эта функция вызывается, когда анимация перехода завершена.

function animationComplete(e:Event):void

{

//Вновь назначаем слушатель на событие наведения мышью.

e.target.content.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBox);

}

Протестируйте ролик и наслаждайтесь эффектами перехода.

Если вы будете искать информацию о событиии "allTransitionsInDone", то ничего не найдете, так как это является сакральным знанием для избранных. И Я решил поделиться этим знанием с вами, дорогие друзья. :)

Если что-то вам не совсем понятно или вы хотите знать больше, то вы всегда можете обратиться к справке:
help.adobe.com 

Исходник: urok.rar[21,94 Kb]