Здравствуйте сегодя речь пойдет об анимации. Почему о ней? - Потому что большинство начинает свой путь флешера с банеров или мультиков, часть анимации делается ручками, а часть кодом. Очень часто у людей анимация асоциируется с перемещением, т.е. с изменением геометрических координат. Но кроме этого можно менять размер, форму, угол наклона, цвет, прозрачность и много других параметров. Какова цель урока? - Заставить некий объект на экране двигаться.
Начнем - для начала запоминаем две очень важные ссылки [1] и [2]. Как пользоваться первой - догадайтесь сами
, а со второй я постараюсь немного помочь. Открываем вторую ссылку и в левом верхнем навигационном фрейме находим fl.transitions - жмем и в информационном фрейме сверху видим "В пакете fl.transitions содержатся классы, позволяющие использовать ActionScript для создания эффектов анимации. Для настройки анимации в ActionScript 3.0 а качестве первостепенных используйте классы Tween и TransitionManager". Значит мы нашли правильный пакет, надеюсь это слово уже не очень пугает. Последуем совету разработчиков и посмотрим описание класса (это слово тоже не должно пугать) Tween. Как говорилось в прошлом уроке, в классе должна присутствовать функция которая имеет такое же название как и класс - она называется конструктор. Спускаемся ниже и находим описание этого самого конструктора. Вроде бы ничего сложного, начнем пробовать все на практике - запускаем Flash и создаем два файла : myTween.fla и myTween.as, связываем их прописав на закладке PROPERTIES в поле Class значение myTween - вспоминаем AS3-уроки 1 и 2. Теперь создаем графику которую позже будем двигать, и превращаем в символ - у меня получилась кракозябра, которая мне показалась похожей на утку, поэтому мои примеры будут связаны с объектом класса duck.
Переходим в myTween.as и вводим следующий код
package// к слову двойной слеш применяют для комментариев {// и все начиная от двойного слеша до конца строки не воспринимается компилятором import flash.display.Sprite; import fl.transitions.Tween; // импортируем класс Tween import fl.transitions.easing.*; //импортируем все классы пакета public class myTween extends Sprite { public function myTween() { var myDuck:duck = new duck(); addChild(myDuck); var TweenX:Tween = new Tween(myDuck, "x", None.easeNone, 0, 400, 3, true); } } }
Рассмотрим моменты которых мы еще не знаем. Поскольку мы станем использовать класс Tween и он находится не в одном пакете с нашим приложением (точнее файлом myTween.as), то его следует импортировать. В следующей строке импортируются все классы которые находятся в пакете fl.transitions.easing. Классы этого пакета описывают типы замедлений, т.е. при движении объект может ускорятся или замедлятся, делать это в начале или в конце, в разных комбинациях. Это параметр func в описании конструктора Tween.
Осталась одна не совсем понятная строка. Эта строка
var TweenX:Tween = new Tween();
еще как-то была бы понятна - создаем экземпляр класса Tween, который будет управлять анимацией. А все новое что между скобок называется аргументами или параметрами функции. Если при создании экземпляра не указаны параметры, то они принимают значения по умолчанию или значение null (пустое значение), если таковых не указано в описании класса. Параметры идут в строгом порядке. Первый - объект который будет анимироваться, второй - параметр который будет изменяться, в нашем случае координата х, но так как в описании конструктора сказано что этот параметр имеет тип String, то записываем его в лапках : "x". Далее у нас идет функция замедления - я поставил None.easeNone, т.е. никакого замедления или ускорения. Просмотреть описание всех функций можно тут , поэкспериментируйте! Следующих два числа - это начальное и конечное значение изменяемого параметра (координата х). Последний из обязательных параметров - это продолжительность анимации, т.е. за сколько времени параметр изменится от начального значения до конечного. Следующий параметр является необязательным, и если он не указан то считается что он равен false. Этот параметр имеет тип bool, т.е. логический и может принимать всего 2 значения true или false. В даном случае он указывает какие единицы времени используются при задании продолжительности анимации - если false или параметр отсутствует (что равноценно), то милисекунды, если же true - то секунды.
Изменим немного функцию myTween:
public function myTween() { var myDuck:duck = new duck(); addChild(myDuck); var TweenX:Tween = new Tween(myDuck, "x", None.easeNone, 0, 400, 3, true); var TweenY:Tween = new Tween(myDuck, "y", None.easeNone, 0, 400, 3, true); TweenX.looping = true; TweenY.looping = true; }
Сохраняем as-файл и жмем Ctrl+Enter. Анализируем что изменилось - теперь myDuck двигается одновременно по осям x и y, создавая эффект движения наискосок. Две последних строки разрешают анимациям повторятся.
С поэкспериментируйте с другими видами задержек с разными значениями аргументов - почитайте описание классов, все довольно легко. В следующий раз рассмотрим анимации посложнее, а на сегодня все.





27 Янв 2010 в 19:07
Пример бы не помешал.
27 Янв 2010 в 19:20
хм, помоему в уроке как раз таки пример и расписан, или вы имели ввиду скомпилированый результат?
30 Май 2010 в 07:09
Спасибо. Ценная информация, доступно для понимания излагаете.
11 Июн 2010 в 09:46
отличный урок. Спасибо!!!!