Всем привет!
Меня зовут Денис. Как и Сергей, я уже много лет занимаюсь разработкой флеш-приложений и прочей веб и offline радости :) Не мог упустить возможности поделится с вами некоторыми флеш-полезностями)).
Очень рад, что вас собралось очень много на этот интереснейший тренинг!)
Если будете слушать Сергея — он из вас сделает крутых флешеров) А быть крутым флешером — это совсем не шутки!) Это тысячи километров заанимашенного таймлана за плечами, это способность придумать анимацию для целого промосайта за 15 секунд, это знать как ужать всё что угодно до 25 кб, это красный Ferrari возле дома, мировая слава итп! :)
Сразу хочу извиниться за возможные неточности в определениях, т.к.я больше аниматор, чем кодер) постараюсь попонятней. В общем начнём!
Сегодня я расскажу об очень полезной и довольно лёгкой штучке).
Вы, скорее всего, заходили на дорогие красивые промо-флешевые сайты мировых брэндов… удивлялись интересному дизайну… и как истинные начинающие флешеры подмечали, что на страничке очень динамичная анимация и самое главное(!) всё на этих страничках летает, не грузит проц на 100% и не рвёт браузер от тормозров :) менюшки поражают скоростью своего реагирования на курсор итп).
Но тут сразу с мыслью «Хе! Я могу круче! )» вы шустро открывали флеш… накидывали кучу графики, эффектов, фильтров, полупрозрачных стильных блюров, сложных роловеров, широченный бэкграунд, который постоянно плывёт… Ставили fps (frames per second) окороло 100, делали паблиш и наблюдали дикие тормоза, перегруз проца, критические ошибки браузеров и так далее) Сайт симпатичный, но в таком виде он не имеет права на существование :)
Помочь в этом случае может программная анимация! :) Т.к. она абсолютно объективно выигрывает у фрэймовой (назовём её так).
Кратко о плюсах программной анимации:
- Mеньше грузит проц, шустрее работает
- Скомпилированный файл с программной анимацией весит меньше, чем с аналогичной фрэймовой.
- В некоторых случаях удобна для редактирования. Поменяв пару строк кода, вы можете получить совершенно другую анимацию.
- Незаменима при создания сложных структур и флешек с динамичным контентом
Минусы:
- Требование хотя бы минимальных знаний Action Script.
- Ненаглядность анимирования: увидеть анимацию можно, только закончив код и сделав компеляцию swf
Но и ещё стоит добавить, что даже программная анимация не творит чудес! Но не стоит сильно расстраиваться, просто помните об основных вещах, которые подгружают флеш, а именно:
- большие картинки и большие, сложные объекты
- большое количество мувиклипов сразу
- полупрозрачность и прозрачность
- фильтры
- сложные дёртовые шрифты
- экстремальный скэйлинг объектов
- неоптимизированный код
Это в общем о программной анимации. На практике программная анимация может быть реализована во можествах форм.
Сегодня мы разберём 2 улётных класса:
Tween class & Easing class
Рассмотрим их функционал, а в конце бонусом сделаю вам видео-туториал)
Tween class
Tween class служит для создания плавной анимации с возможностью гибкой настройки изменения свойств мувиклипов за период времени или за некоторое количество кадров. Также позволяет создавать анимацию, привязанную ко времени, т.е. в секундах. (для справки: фрэймовая анимация на практике может выдавать на порядок меньший реальный fps , чем тот, который вы установили. )
Иначе говоря, класс Tween служит для анимирования ряда свойств мувиклипа. Происходит это по несложной схеме:
- устанавливаем начальное значение некоторого свойства клипа
- устанавливаем конечное значение некоторого свойства клипа
- задаём период, за который значение свойства поменяется с начального на конечный
- задаём вид изменения этого свойства (вид моушна)
и всего-то :)
Теперь разберём на живом примере)
Открываем Flash. Создаём новый док. Что-нить рисуем. Делаем из этого MovieClip и присваиваем Instance Name этому клипу FunnyBall. Затем кликаем на фрэйм и жмём F9 (или Right-Click – Actions) и пишем туда код :
import mx.transitions.Tween;
import mx.transitions.easing.*;
var FunnyAnimation:Tween = new Tween (FunnyBall,"_x",Strong.easeOut,0,400,2,true);
FunnyAnimation.onMotionFinished = function (){
this.yoyo()
}
и выходит у нас следующее (нажмите кнопку чтобы задвигалось):
Теперь пройдёмся по коду
import mx.transitions.Tween;
import mx.transitions.easing.*;
Для использования класса мы должны сначала его импортировать в документ. Достаточно 1 раз его импортировать и использовать его многократно.
var FunnyAnimation:Tween = new Tween (FunnyBall,"_x",Strong.easeOut,0,400,2,true);
Для контроля над свойствами клипа мы должны объявить класс Tween по шаблону
var tweenInstanceName:Tween = new Tween (object, property, function, begin, end, duration, useSeconds);
- tweenInstanceName - валидное имя, с помощью которого мы сможем управлять анимацией.
- object - это InstanceName объекта, который мы будем анимировать (Мувиклип, кнопка, текст…)
- property – это _scale, _x, _y, _alpha или любое другое свойство. Писать нужно в двойных кавычках (пример: “_x”)
- function – это тип моушна (об этом позже)
- begin – начальное значение свойства
- end – конечное значение свойства
- useSeconds – использование секунд или кадров как меру времени для анимации. (true – секунды, false – кадры)
FunnyAnimation.onMotionFinished = function (){
this.yoyo();
}
В этих строчках мы использовали оператор событий (onMotionFinished) и метод (yoyo();). После завершения анимации, она вновь стартует инверсивно. Методы и операторы мы так же рассмотрим позже.
Класс Easing
Пока вернёмся к параметру function, это параметр, который определяет вид моушна (анимации). Это реализуется при помощи класса Easing, который имеет 16 различных видов моушна: 5 категорий, каждая из которых поддерживает 3 типа моушна + 1 тип, не имеющий особенностей (easeNone).
Категории моушна:
- Regular – анимация будет постепенно замедляться или ускоряться в соответствии с выбранным типом.
- Strong – более выраженная категория Regular
- Back – анимация с захождением за конечные значения анимированного параметра
- Bounce – анимация «с отскоком»
- Elastic – микс Back & Bounce
- None – специальная категория, анимация без изменения скорости
Типы моушна:
- easeIn – равноускоренный
- easeOut – равнозамедленный
- easeInOut – равноускоренный до середины и равнозамедленный после
- easeNone – прямолинейный (взаимодействует только с категорией None)
Категории и типы взаимодействуют вместе в таком виде Back.easeInOut. Описать все 16 видов моушна словами и даже слэнгом довольно сложно, поэтому посмотрим это на примере :) можно поиграться с точками begin\end & duration.
Как видно, мы можем наделать кучу приятной анимации всего несколькими строками, но при желании функционал можно немного расширить, используя некоторые элемнты управления классами. Об этом делюсь ниже :)
Операторы событий класса Tween
Операторы событий класса (Tween Event Handlers) это инструменты, которые срабатывают при при наступления какого-нибудь события (например завершение анимации). Используются они так:
myTween.onMotionFinished = function (){
trace("Motion is finished!");
}
Существует несколько операторов событий:
- .onMotionChanged – постоянно срабатывающий оператор на протяжении всей анимации (от начала до конца)..
- .onMotionFinished – срабатывает при завершении анимации
- .onMotionResumed – срабатывает при вызове метода .resume() после предварительной остановки
- .onMotionStarted – срабатывает при вызове метода .start() или .yoyo(). Не срабатывает при первом старте анимации после стандартного объявления класса.
- .onMotionStopped – срабатывает при вызове метода .stop().
Методы класса Tween
Манипулировать классом Tween мы можем с помощью методов (Tween Methods), иными словами это команды, с помощью которых, класс выполняет некоторые действия. Этих команд совсем не много:
- Tween.stop() – останавливает анимацию в текущей позиции.
- Tween.resume() - возобновляет анимацию с текущей позиции (используется после метода .stop() )
- Tween.continueTo(finish, duration) – продолжает анимацию с текущей позиции до позиции finish за период времени duration с применением того же вида моушна.
- Tween.start() – начинает анимацию с начала.
- Tween.fforward() - останавливает анимацию и одновременно переходит в конечную позицию
- Tween.nextFrame() - переходит к следующему кадру анимации
- Tween.preFrame() – переходит к предыдущему кадру анимации
- Tween.rewind() - останавливает анимацию и одновременно переходит в начальную позицию
- Tween.yoyo() – проигрывает анимацию реверсивно
Исползуются методы так: NameOfTheTween.stop();
Свойства класса Tween
Также мы можем получать доступ к некоторым свойствам класса.
- Tween.duration – возвращает значение продолжительности анимации
- Tween.finish – возвращает конечное значение параметра
- Tween.FPS – возвращает значение FPS (количество кадров в секунду) проигрываемой анимации.
- Tween.position – возвращает значение текущей позиции анимируемого мувиклипа
Например, мы можем постоянно трэйсить положение нашего объекта
MyMotionTween.onMotionChanged = function (){
trace (this.position);
}
Скачать исходник (314 Кб)
Скачать видео-урок (25.5 Мб)
Специально для «Flash-онлайн!»
|
![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small}