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

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

Get Adobe Flash player

Описание: 

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

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

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

Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Комментарии

Аватар пользователя ДимOn

А для ActionScript 2 это возможно?

Аватар пользователя Fly

ДимOn,
учите actionscript 3, второй версией ещё динозавры пользовались

ag

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя Neirol

В таком случае первой пользовался бог, и мы все написаны на ActionScript 1.0

ag

 

Написал программу? Проверь на ошибки. Исправил ошибки? Проверь еще раз. Нет ошибок? Ты плохой программист!<br /><br />http://prograph.ru/ - видео уроки по программированию в разных средах, а также справочники, программы и новости.<br />

Аватар пользователя Fly
Цитата: Neirol

В таком случае первой пользовался бог, и мы все написаны на ActionScript 1.0

Ага, вот оттуда и все пороки наши, всё из-за несовершенство первой версии языка

xaxa

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя SarGun

полезный класс)

Аватар пользователя jura2272

да,спаибо,мне имено это и надо!

Не рой другому яму, не делай чужую работу.

Аватар пользователя samana

Помню когда случайно в далёком прошлом, при изучении справки флеша наткнулся на этот класс, радости не было предела, оказывается всё так просто.

Аватар пользователя Morozoff

Добрый день.
Я установил Adobe Flash CS3 и при попытке открыть исходник он ругается: Unexpected file format
Дело в версии продукта или возможны другие причины ?
Спасибо !

Аватар пользователя megamonster

ProcXel.A, со всем уважением к тебе, хочу дополнить:
Так как событие "allTransitionsInDone" пока не документировано; для новичков, которые захотят выбрать направление

direction:Transition.OUT

событие окончания анимации будет "allTransitionsOutDone"

Аватар пользователя Fly
Цитата: Morozoff

Добрый день. Я установил Adobe Flash CS3 и при попытке открыть исходник он ругается: Unexpected file format Дело в версии продукта или возможны другие причины ? Спасибо !

Ставьте CS5 - точно будет всё открываться :)

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя NecroS

Ставьте CS5 - точно будет всё открываться :)

зачем ставить если тут же выложили портабл версию =))))

Аватар пользователя megamonster

Цитата: "ДимOn"

А для ActionScript 2 это возможно?

Да.
 http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00002939.html

Аватар пользователя Tix

Spasibo !!!

Аватар пользователя Apikaster

М-дааа ...
Ты священную вешь только что нубам рассказал ...
Они это должны были понять со временем ...
Читая хелпы ... гугля ... Находя кусочки кодов ... и собирая их вместе ...
Я сам работаю на Флексе ... И хочу от себя лишь добавить ...
Эфектов кучаааааааааааааааааааааааааааааа.............
Но я их не расскажу никому ...... =)) 

Аватар пользователя Morozoff

Всем привет.
Может кто знает для TweenMax проверить, что перемещение объетка закончилось ( что бы на него снова навесить слушатель ) ?

Аватар пользователя Damian

Добрый день. Очень полезно. Скажите, а как можно сделать переход от одного кадра к другому? мне нужно сделать баннер, в котором 2 кадра будут постоянно сменять друг друга через переход пикселизации. Только я что-то никак не пойму как это реализовать. Если кто знает, скажите пожаоуйста.

Аватар пользователя psinksi

А возможно ли такое провернуть с кнопкой перехода? Т.е., чтобы при наведении на неё использовался, скажем, эффект "Fade"?