Внешний вид сайта:

Эффекты перехода с помощью ActionScript 3.0

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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Вступление:

Класс 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", то ничего не найдете, так как это является сакральным знанием для избранных. И Я решил поделиться этим знанием с вами, дорогие друзья. :)

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

http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/fl/transitions/TransitionManager.html

Комментарии

Нет комментариев. Ваш будет первым!