Интерблог

Архив за Апрель 2011-го

Эмуляция плавности в ActionScript.
Автор: Ognezmej. Опубликовано: 20 Апреля 2011

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

Тем не менее, выходы и лазейки всегда найдутся. Рассмотрим простенький пример, как можно изобразить подобие плавного ухода элемента в ноль (fade out), не используя кадровую анимацию и не перегружая компьютер большим количеством одновременно выполняемых вычислений. Метод основан на том, что глаз человеческий воспринимает одновременно далеко не так уж много информации. 24 кадра в секунду, чтоб движение казалось плавным - аксиома кинематографа. Чтобы движение казалось хоть каким-то движением, достаточно двух-трёх кадров. Используем вот эту простенькую конструкцию:

my_clip._alpha = 50;
var mPause = setInterval (function ()
                {
                clearInterval (mPause);
                my_clip._alpha = 0;                
                my_function();               
                }, 300);

my_function - функция, которая запускается по окончанию нашей как-бы-анимации.
300 - это 300 миллисекунд, примерно треть секунды. Можете посмотреть, как оно работает с другими значениями.

Запускаем - объект уходит в сумрак быстро, но с некоторой иллюзией плавности - то, что нам и было нужно. Оказалось достаточно одного промежуточного кадра.

Попытаемся подытожить. Для создания сложного интерактивного ролика приходится сочетать разные варианты анимации. При простейших движениях без участия пользователя целесообразнее использовать программную анимацию. Когда возникает необходимость анимации при наведении мыши, используем все возможные методы, чтобы не перегружать машину вычислениями. Если анимация нескольких объектов идентична - оптимальным будет создание одного объекта, внутри которого будет находиться ещё один объект, выполняющий всю необходимую анимацию через tween. Этот самый внутренний объект представляет собой несколько кадров, в каждом из которых изображён один из объектов, которые надо анимировать. Далее внешний объект копируется, при этом внутренний при помощи gotoAndStop() устанавливается на соответствующий кадр. Там, где важна не сколько красота анимации, сколько её наличие, можно использовать эмуляцию через промежуточный кадр. И, разумеется, нейтрализуем быструю мышь посредством onEnterFrame.

 

Метки: ActionScript, Кодинг, Советы

Программная анимация в ActionScript
Автор: Ognezmej. Опубликовано: 19 Апреля 2011

Спрашивается, нафига во Flash программная анимация, если есть tween и shape, позволяющие легко и непринуждённо производить большинство простейших изменений объекта?

Ответ кроется в самой постановке вопроса. Программная анимация нужна там, где работа с tween и shape занимает больше времени. Итак, представьте - нужно сделать разную анимацию нескольких разных объектов. Открываем каждый объект, добавляем туда кадры, прописываем состояние объекта в ключевых кадрах, прописываем события к тем или иным кадрам, если это нужно, выходим из объекта. И это с каждым. В случае, если не устраивает скорость или положение объекта во время анимации - опять заходим, меняем кадры, выходим. Даже, если анимация всех объектов абсолютно одинакова, в случае чего придётся редактировать каждый объект. Также возможна путаница с именами объектов, поскольку для удобства дальнейшей работы (но бабушка-то надвое) объект неподвижный помещается в объект с анимацией.

Кому-как, а мне рыться в монтажной линейке представляется занятием тоскливым до безнадёжности. Всё должно быть максимально автоматизировано.

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

Для примера возьмём функцию fade, позволяющую плавно менять прозрачность объекта

MovieClip.prototype.fade = function (speed,limit,after)
    {
    var interval = Math.round(1000/speed);
    var grow = (this._alpha<limit);
    var Go = setInterval(function(obj) {
        var stopFade = false;
        if (grow && obj._alpha>=limit) stopFade = true;
        if (!grow && obj._alpha<=limit) stopFade = true;
        if (stopFade)
            {
            clearInterval (Go);
            obj._alpha = limit;
            if (after!=false) after.call();
            }
        else
            {
            if (grow) obj._alpha++;
            else obj._alpha--;
            }
        }, interval, this);   
    }

Параметры:
speed - скорость изменения,
limit - уровень альфы, который должен получиться в итоге
after - самое главное - функция, которая запускается по завершению анимации - чтобы можно было отследить это самое завершение. Можно применять любую пользовательскую функцию.

Например,  mc.fade(100,0,function(){trace('анимация завершена');}) - объект уходит в ноль, после чего выдаётся сообщение о завершении анимации.

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

Поэтому - правило - всему своё время и место. Используйте ту анимацию, которая более уместна в данной ситуации. Программная анимация больше подходит для простых изменений, не зависящих от действий пользователя.

 

Метки: ActionScript, Кодинг, Советы

Анимация при наведении в ActionScript
Автор: Ognezmej. Опубликовано: 19 Апреля 2011

"А хотите, я его стукну, и он станет фиолэтовым в крапинку?" ("Тайна Третьей планеты")

Любимое требование заказчика - а вот сделайте так, чтобы при наведении мышкой оно двигалось (пропадало, появлялось, меняло цвет и так далее). Глянув в справочник по ActionScript, садишься за компьютер - через пару часов красотища готова. Наводишь мышку - и тебе движение, и покадровая анимация, и программная (об этом в следующей статье), и появление-исчезновение, и куча спецэффектов...

Несёшь красотищу заказчику - через некоторое время звонок: "А что это оно у тебя не работает?" Это как не работает?! Вот же у меня здесь работало... Приходишь к заказчику, и видишь, как он размашистыми движениями мыши приводит твою красотишшу в полную негодность. Где-то движение останавливается раньше времени, где-то просто не успевает начаться, где-то продолжается, хотя уже должно закончиться, мало того, если таких элементов с анимацией при наведении несколько, то вообще чёрт-те что творится...

Но ведь оно же всё правильно прописано! Смотришь код - нет, никаких ошибок. Вот здесь onRollOver, здесь onRollOut. Запускаешь трассировку - вот те раз - некоторые действия и вправду не выполняются.

О эти быстрые движения мышью! Заказчику - развлечение, а программисту головная боль и бессонные ночи. Итак, правило - любую анимацию проверяй на быстрые движения мышью. Чтоб никаких глюков, лишних, или, наоборот, отсутствующих объектов, их перемещения непонятно куда...

На этом лирическое отступление заканчиваем. Итак, мы выяснили, что при быстром перемещении мыши (и клике, кстати, тоже, такое бывает), одним словом, при определённом количестве событий в секунду Flash перестаёт на них реагировать должным образом. Заметим, что количество глюков зависит от производительности компьютера - чем медленнее машина, тем легче испортить анимацию. Теперь упрощаем задачу. Итак, имеется некое множество элементов, при наведении и убирании мыши с которых должно происходить нечто. Прописываем это самое нечто в виде одной строчки, выполняющей некое простейшее действие, хотя бы ту же трассировку. Проверяем на быструю мышь - работает! Делаем вывод - компьютер не способен просчитать большое количество сложной анимации одновременно, однако простейшие действия выполняет. Теперь наше простейшее действие прописываем более утилитарно - изменением либо свойства элемента, либо просто какой-нибудь переменной. Ещё раз проверяем на быструю мышь. Эти самые свойства элемента и переменные - и есть тот хвост, за который мы поймали зверя, и теперь вытащим его на свет.

А вытаскиваем  мы нашего зверя при помощи onEnterFrame. Функция, которая гарантированно срабатывает с регулярностью, равной frame rate, который у нас меняется от 0.01 до 120. В зависимости от производительности компьютера его можно увеличить или уменьшить - не забывая, что у разных пользователей разные компьютеры. Я предпочитаю значение, равное 50.

Теперь всё просто. Внутри onEnterFrame анализируем наши переменные или свойства элементов, и выполняем необходимые действия.

Вопрос - почему onEnterFrame работает, а onRollOver и onRollOut - не работают? Ответ очевиден. В первом случае с регулярностью вызывается ОДНА функция, во втором - столько функций, сколько Вы за это время успели попасть мышкой по каждому элементу. Много сложной анимации одновременно покамест не по зубам даже очень мощному компьютеру - проверял на таком.

Удачи!

 

Метки: ActionScript, Кодинг, Советы

Популярные записи

Принцип неопределённости в РНР

Принцип неопределённости в MYSQL

Недолёт

А ещё AJAX нужен для...

Принцип неопределённости в PHP - праздник продолжается!

Эмуляция плавности в ActionScript.

Программная анимация в ActionScript

Анимация при наведении в ActionScript

Использование кодировки UTF-8

Буквицца

Архив записей  

2019

Янв  Фев  Мар  Апр  Май  Июн

2018

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2017

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2016

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2015

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2014

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2013

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2012

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2011

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2010

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2009

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек