Flash: плавная смена кадров

Сегодня я посмотрел на последние записи в журнале и понял, что я перестал писать о программировании... сегодня немного исправим это! Поиграв немного в такие игры как CurveFever2 и RocketPets, я понял, что игры нужно насыщать всякого рода красивыми переходами, эффектами и прочими свистелко-анимационными штуковинами. Давайте смастерим что-нибудь простое для разминки, хорошо? В общем, сейчас будет немного кода, маленькая демка и море позитива. Готовы? Тогда поехали!

Сегодня сделаем простую анимацию смены кадров через прозрачность. Вот, полюбуйтесь:

Штука простая, но, чтобы научиться делать что-то сложное, сначала нужно научиться делать что-то простое... верно?

Да, забыл сказать, я не люблю всякие покадровые анимации. А люблю я все делать кодом... Привычка что ли :) Из бонусов можно упомянуть, что изменение каких-либо отдельных участков анимации кодом намного проще, изменил одну цифру - и все станет проигрываться медленнее или быстрее. При покадровой анимации же приходится все расчитывать с самого начала, а любые изменения даются с большими сложностями.

Так что убираем в сторону мышку, садимся за клавиатуру и начинаем программировать!

Первым делом определимся с тем, что все кадры у нас будут храниться в мувиклипе (иногда для краткости я буду писать "мувик") с именем Texts.

И в первом кадре сцены начинаем писать такой код:

// создаем таймер и устанавливаем задержку в одну секунду
var time: Timer = new Timer(1000, 0);
// запускаем наш таймер
time.start();
// слушаем событие, когда наш таймер сработает
time.addEventListener(TimerEvent.TIMER, onDelay);
// переходим на первый кадр нашего мувика
Texts.gotoAndStop(1);

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

function onDelay(e: TimerEvent): void
{
    // создаем и запускаем твин
    var tween: GTween = new GTween(Texts, 0.5, {alpha: 0}, {ease: Exponential.easeOut});
    // привязываемся к событию завершения твина   
    tween.onComplete = OnHideComplete;    
}

Для плавной смены кадров будем использовать твин на прозрачность. Немного о том, как создаются и инициализируются твины, я описывал здесь и здесь. Время пропадания 0.5 секунды, меняем альфу до нуля, по экспоненциальному закону. Надеюсь, пока все понятно...

Теперь, когда твин на пропадание текста мы запустили, нужно дождаться его завершения и запустить твин на появление следующего кадра.

function OnHideComplete(e: GTween): void
{
    // меняем кадр
    Texts.gotoAndStop(3 - Texts.currentFrame);    
    // запускаем твин на появление текста
    new GTween(Texts, 1, {alpha: 1}, {ease: Exponential.easeOut});
    // сбрасываем таймер
    time.reset();
    // устанавливаем задержку в три секунды
    time.delay = 3000;
    // запускаем таймер
    time.start();
}

Здесь все просто. Сменили кадр, запустили твин на проявление текста и заново стартовали таймер, чтобы зациклить нашу смену кадров. Время появления 1 секунда, меняем альфу до единицы по экспоненциальному закону.

Таким образом текст появится, затем сработает таймер и снова отправит нас в функцию onDelay(), где все начнется заново. Ура!

Подведем итоги:

• мы рассмотрели работу gTween на простом примере
• минимальными усилиями научились плавно сменять кадры
• сделали небольшую демонстрацию на Flash, что, надеюсь, войдет у нас в привычку
• этот простой пример показывает, насколько классно видеть анимацию вместо разких скачков... даешь анимацию везде!

Вот и все... до скорого!

да, чуть не забыл, исходный fla-файл можно найти вот по этой вот ссылочке...

p.s. Если вас что-то беспокоит при работе с Flash, если возникли вопросы - вы всегда можете написать интересующий вас момент в этой теме, не стесняйтесь!

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