Easing Generator и анимация движения в ActionScript 3.0

Easing Generator - это узкоспециализированное AIR-приложение, которое помогает в визуальном режиме создать сложные эффекты замедления и ускорения анимации. Программа поддерживает несколько движков анимации движения, написанных на ActionScript 3.0:

- Tweener;

- BetweenAS3;

- KTween;

- TweenMax.

Интерфейс программы прост:

Easing Generator

В правой части программы сосредоточены основные настройки программы. Там вы можете выбрать движок, с которым хотите работать, а также настроить основные параметры анимации движения: функции ускорения/замедления; скорость анимации и её продолжительность. А кнопки «Copy» и «Show source» вам понадобятся, чтобы скопировать или просмотреть сгенерированный программой код анимации движения.

Внизу расположены окна предпросмотра, в которых отображается текущая анимация движения.

Остальное пространство занимает визуальный редактор для создания уникальной анимации замедления и ускорения. Просто изменяем линию-путь и смотрим на результат в окне предпросмотра.

Давайте испробуем программу в работе. В качестве движка я выбрал KTween. Теперь изменяем на свой вкус прямую в основном окне программы и жмём кнопку «Show source». Появляется код, автоматически созданный программой на основе введённых нами данных. У меня получился следующий код...

Код ActionScript 3.0:

import flash.geom.Point; import fl.motion.BezierSegment; import net.kawa.tween.KTween; // Custom Easing Function for KTween var ease:Function = function(t:Number):Number { var points:Array = [ {point:[0,0],pre:[0,0],post:[0.2,0.2]}, {point:[0.66,0.64],pre:[0.66,1.61],post:[0.66,-0.33]}, {point:[1,1],pre:[0.8,0.8],post:[1,1]}, ]; var bezier:BezierSegment = null; for (var i:int = 0; i < points.length - 1; i++) { if (t >= points[i].point[0] && t <= points[i+1].point[0]) { bezier = new BezierSegment( new Point(points[i].point[0], points[i].point[1]), new Point(points[i].post[0], points[i].post[1]), new Point(points[i+1].pre[0], points[i+1].pre[1]), new Point(points[i+1].point[0], points[i+1].point[1])); break; } } return bezier.getYForX(t); }; // Apply easing function such as... KTween.to(target_mc, 4, {x:400}, ease);

Обращаю ваше внимание, что target_mc в данном коде - это тот MovieClip, к которому мы и применяем анимацию движения. Поэтому перед тем, как проверить работу кода, нам надо создать мувик target_mc.

А теперь давайте добавим созданный ранее в программе Easing Generator код в наше небольшое flash-приложение. Приложение будет состоять из кнопки btn и мувиклипа target_mc. Клик по кнопке btn будет вызывать анимацию мувика target_mc.

Код ActionScript 3.0:

/* импортируем классы */ import flash.geom.Point; import fl.motion.BezierSegment; import net.kawa.tween.KTween; /* создаём кнопку */ btn.addEventListener(MouseEvent.CLICK, onClick); function onClick(event:MouseEvent):void { /* устанавливаем для мувика target_mc начальное положение по оси x */ target_mc.x = 100; /* далее идёт код, скопированный из генератора */ // Custom Easing Function for KTween var ease:Function = function(t:Number):Number { var points:Array = [ {point:[0,0],pre:[0,0],post:[0.2,0.2]}, {point:[0.66,0.64],pre:[0.66,1.61],post:[0.66,-0.33]}, {point:[1,1],pre:[0.8,0.8],post:[1,1]}, ]; var bezier:BezierSegment = null; for (var i:int = 0; i < points.length - 1; i++) { if (t >= points[i].point[0] && t <= points[i+1].point[0]) { bezier = new BezierSegment( new Point(points[i].point[0], points[i].point[1]), new Point(points[i].post[0], points[i].post[1]), new Point(points[i+1].pre[0], points[i+1].pre[1]), new Point(points[i+1].point[0], points[i+1].point[1])); break; } } return bezier.getYForX(t); }; // Apply easing function such as... KTween.to(target_mc, 4, {x:400}, ease); }

Получили вот такой флеш-ролик:

Загрузить Adobe Flash Player

Вот и всё. Скачать программу Easing Generator можно здесь, а исходники к данному посту здесь.

Автор: admin

Дата добавления: 2012-01-07

Просмотров: 4073

Рейтинг поста: +7-

Правила перепечатки

Социальные закладки:
Комментарии:
К данной заметке комментариев пока нет. Ваш комментарий может стать первым.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика