Простой tween'инг во flash

Потихоньку изучаю flash, решил поделиться новыми знаниями, полученными в ходе недавних изысканий... сегодня немного распишу про tween'инг. Для тестов я взял стандартный класс Tween, находящийся в пакетах Adobe Flash. Код простой, демка еще проще, но как-то очень приятно видеть, как страницы журнала тут же оживают и начинают анимационно и интерактивно двигаться по экрану. Это вам не демки качать и полдня компилировать! :)

Итак, сначала завлекательная флешка того, что получилось "в конце":

А теперь вернемся к самому началу...

Что же такое Tween?

С английского tween переводится как "между". По сути это класс-аниматор, который должен заниматься изменением какого-либо параметра подопечного объекта. Изменения как раз производятся между двумя заданными положениями. Допустим, нужно "проявить" объект - сначала он полностью прозрачен, а в финале становится видимым, непрозрачным. На математическом языке это значит, что нужно изменить значение alpha (альфу) объекта от 0 (прозрачный) до 1 (непрозрачный). Таким же образом иногда нужно менять положение объекта (вроде выезда фотографий на экран), угол поворота (к примеру для эффекта "улетающий в ураган"), размеры (увеличивающиеся при наведении кнопки) и многое другое.

Для одной задачи решение может быть простое - ставим таймер, засекаем время, изменяем по какому-либо закону наш параметр. Вроде такого: alpha = Time / FinishTime. Где Time - прошедшее время анимации, FinishTime - общее время для анимации. В итоге увидим проявляющийся по линейному закону объект. Даже такой простой код можно отнести к твинингу (сленг, что поделать) параметра.

Зачем же тогда навороченные классы?

Ответ прост - чтобы не дублировать код, чтобы реализовать возможность для задания сложных законов для изменения параметра (резкое нарастание, выпрыгивание и т.д.). То есть написал что-то вроде:

ХочуИзменятьПараметр(объекта MyObject; параметр для изменения - Alpha; от 0; до 1; по линейному закону; в течение 1ой секунды)

и оно само все изменяет дальше. В общем, чтобы было как в сказке :) Оказывается, все уже придумано, реализовано и используется по назначению. Пакетов для tween'инга во флеш довольно много. Имеется даже график сравнения производительности разных пакетов, правда как я понял данные трёхгодичной давности.

Ну а теперь поговорим о простом tween'инге во flash.

Для знакомства я взял стандартный класс Tween, из пакетов Adobe Flash. Хочу сказать, что лично у меня проблемы начались с самого начала. Дело в том, что я же стараюсь все делать кодом, поэтому программирую во FlashDevelop. Так вот класса Tween у него нет. Как быть? Можно указать ClassPath (Tools->Global ClassPaths... Ctrl+F9) к твину из пакетов Adobe Flash. Где они находятся? У меня вот здесь:

{Programs}\Adobe Flash CS4\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\projects\Flash\src

Все, теперь простые import fl.transitions.Tween и import fl.transitions.easing.* работают безоговорочно и можно приступать к работе! Так как я решил попробовать сделать все в качестве обучения, поэтому пришлось наворотить несколько счетчиков, чтобы рулить анимациями из кода.

При создании объекта Tween, указываются те самые параметры, как и в сказке:

  Tween(obj, "x", Elastic.easeOut, obj.x - 100, obj.x, AnimTime, true);

объект, имя параметра для изменения, способ изменения параметра, начальное положение, конечное положение, итоговая продолжительность анимации... последний параметр (Boolean) указывает на то, что продолжительность задана в секундах, а не в кадрах (указываем false для задания кадров).

Для того, чтобы понять, какой именно из способов изменения параметра подходит больше, можно заглянуть сюда и потыкать кнопочки с различными анимациями.

Итого...

В итоге "слушаем" кадры:

addEventListener(Event.ENTER_FRAME, Update);

и обновляем наш счетчик кадров + запускаем анимации твининга:

        private function Update(event: Event):void 
        {
            var obj: DisplayObject;
            switch (fFrame)
            {
                case 0: //слово "Первые"
                    obj = fText.getChildAt(0);
                    new Tween(obj, "x", Elastic.easeOut, obj.x - 100, obj.x, AnimTime, true);
                    new Tween(obj, "alpha", Regular.easeOut, 0, 1, AnimTime * 0.7, true);        
                break;
                                                                
                                // здесь еще много запусков твининга на появление и пропадание слов текста

                case 115: //слово "Tween"
                    obj = fText.getChildAt(5);
                    new Tween(obj, "y", Strong.easeOut, obj.y, obj.y + 150, AnimTime, true);
                    new Tween(obj, "alpha", Regular.easeOut, 1, 0, AnimTime * 0.4, true);                        

                break;
            }    
            
            fFrame += 1;
            if (fFrame = 200)
            {
                fFrame = 0;
                InitText();
            }
        }

Больше никаких хитростей вроде и нет... 

Результат можно увидеть наверху сообщения, вдохновением стала презентация на xitri.

Delphi

Увидев такую замечательную штуку во флеш, я бросился искать что-то подобное под Delphi. Погуглил, но ничего толкового не нашел... Может кто видел готовые твининги под делфи? Изобретать велосипед пока не хочется :)

Сообщения, схожие по тематике: