День добрый, продолжаем учить методы програмной анимации. Сегодня еще немного рассмотрим пакет fl.transitions - не в полном объеме естественно, а то на эксперименты и пробы мало что останется)) . В следующий раз узнаем что за звери такие слушатели и обработчики событий. Притупим к подготовительной части:не поверите, но нам опять понадобится графика которую мы станем приводить в движение 
! Я буду использовать утку из прошлого урока по программной анимации - вот так неожиданно всплыла лень моя. Таким образом файл myTween.fla я пересохраню с новым именем в другой папке - новое имя fewTransitionExamples.fla. Файл myTween.as тоже пересохраняем в ту же папку с новым именем transitionExamples.as, не забываем внести нужные коррективы: в файле fewTransitionExamples.fla указываем класс документа transitionExamples, в файле transitionExamples.as меняем название класса и название конструктора на transitionExamples. Конечно можно было бы создать и новый as-файл, а не корректировать старый, но мне так легче - кому не лень сделайте все с нуля. Проверяем Ctrl+Enter компилируется ли файл, если да то пойдем дальше.
Моя утка (библиотечный символ duck) имеет размер 65 на 65 пикселей (кто знает как правильно пикселей или пикселов?), возьмем промежуток между утками в 15 пикселей, а первую из них разместим в координатах (20,20). Всего уток будет 5. Вы естественно либо повторяете все мои манипуляции, либо делаете размещение своей графики в соответствии с ее размерами и своими желаниями. Далее поработаем с кодом и доведем его до такого:
package { import flash.display.Sprite; import fl.transitions.*; // импортируем все классы пакета import fl.transitions.easing.*; //импортируем все классы пакета public class transitionExamples extends Sprite { public function transitionExamples() { var DuckZoom:duck = new duck(); var DuckFade:duck = new duck(); var DuckFly:duck = new duck(); var DuckWipe:duck = new duck(); var DuckPixelDissolve:duck = new duck(); DuckZoom.y=DuckFade.y=DuckFly.y=DuckWipe.y=DuckPixelDissolve.y=20; DuckZoom.x=20; DuckFade.x=100; DuckFly.x=180; DuckWipe.x=260; DuckPixelDissolve.x=340; addChild(DuckZoom); addChild(DuckFade); addChild(DuckFly); addChild(DuckWipe); addChild(DuckPixelDissolve); } } }
Что у нас тут поменялось? Импортируем мы теперь не один класс fl.transitions.Tween, как было в прошлом уроке, а весь пакет fl.transitions. Добавляем 5 уток близняшек - имена им выбирал исходя из видов анимации, которую будем на них испытывать. И вот нововведение:
DuckZoom.y=DuckFade.y=DuckFly.y=DuckWipe.y=DuckPixelDissolve.y=20;
Эту строку можно было представить и вот так:
DuckZoom.y=20; DuckFade.y=20; DuckFly.y=20; DuckWipe.y=20; DuckPixelDissolve.y=20;
но зачем? если так более понятно и забегая вперед (тематика оптимизации) - одной строкой работает быстрее! Свято верю что все рассказаное было достаточно простым для понимания. Ctrl+Enter тестим!
Теперь откроем Справочник по языку ActionScript 3.0 и его компонентам - ссылочка с прошлого урока и найдем в верхнем навигационном фрейме ссылку на пакет fl.transitions и почитаем описание классов TransitionManager, Zoom, Fade, Fly, Wipe и PixelDissolve. Читаем-читаем если я буду рассказывать все, то кто-то в конец разленится! Особое внимание уделяем конструктору
public function TransitionManager(content:MovieClip)
и двум методам
public static function start(content:MovieClip, transParams:Object):Transition // и public function startTransition(transParams:Object):Transition //
Разобравшись с параметрами и вариантами создания анимаций на основании TransitionManager, выбираем один из них и дополняем код. Ниже я привожу только конструктор, который собственно и претерпел изменения:
public function transitionExamples() { var DuckZoom:duck = new duck(); var DuckFade:duck = new duck(); var DuckFly:duck = new duck(); var DuckWipe:duck = new duck(); var DuckPixelDissolve:duck = new duck(); DuckZoom.y=DuckFade.y=DuckFly.y=DuckWipe.y=DuckPixelDissolve.y=20; DuckFly.x=20; DuckFade.x=100; DuckZoom.x=180; DuckWipe.x=260; DuckPixelDissolve.x=340; addChild(DuckFly); addChild(DuckFade); addChild(DuckZoom); addChild(DuckWipe); addChild(DuckPixelDissolve); var trFly:TransitionManager = new TransitionManager(DuckFly); var trFade:TransitionManager = new TransitionManager(DuckFade); var trZoom:TransitionManager = new TransitionManager(DuckZoom); var trWipe:TransitionManager = new TransitionManager(DuckWipe); var trPixelDissolve:TransitionManager =new TransitionManager(DuckPixelDissolve); trFly.startTransition({type:Fly, direction:Transition.IN, duration:5, easing:Bounce.easeOut}); trFade.startTransition({type:Fade, direction:Transition.IN, duration:5, easing:Bounce.easeOut}); trZoom.startTransition({type:Zoom, direction:Transition.IN, duration:5, easing:Bounce.easeOut}); trWipe.startTransition({type:Wipe, direction:Transition.IN, duration:5, easing:Bounce.easeOut}); trPixelDissolve.startTransition({type:PixelDissolve, direction:Transition.IN, duration:3, easing:Bounce.easeOut}); }
Тестим Ctrl+Enter, и разбираемся что тут такого мы понадобавляли. Строка
var trFly:TransitionManager = new TransitionManager(DuckFly);
Создаем trFly - экземпляр класса TransitionManager и в качестве агрумента берем символ DuckFly, а аргумент в данном случае у нас что? - правильно мувиклип, который будет анимироваться. Четыре следующих строки по аналогии. Идем далее, строка
trFly.startTransition({type:Fly, direction:Transition.IN, duration:5, easing:Bounce.easeOut});
Функция startTransition() запускает анимацию. Аргумент type, обозначающий тип анимации, после двоеточия указывается его значение, в нашем случае Fly. Аргумент direction - направление анимации имеет два значения Transition.IN и Transition.OUT, которые обозначают появление и исчезновение объекта соответственно. Поэкспериментируйте - посмотрите разницу. Аргумент duration - длительность в секундах. Здесь в отличии от Tween длительность анимации только в секундах. С аргументом easing - мы знакомы с прошлого урока, он указывает тип замедления.
Остальные виды анимаций (Squeeze, Rotate, Photo, Iris и Blinds) рассмотрите сами, обратив особое внимание на Iris. Анимация повторяется только один раз(( так она и отличается от Tween-анимации, но если все таки кому-то понадобиться повторение - читайте следующий урок.
Ниже то что должно было получиться у вас плюс кнопочка, которая запускает анимацию заново
