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