Функция random, пожалуй, одна из самых используемых функций. Сейчас речь пойдёт об анимации глаз персонажа, а именно, будем делать так, чтобы он моргал в разное время. Это можно сделать и обычным способом, как делают аниматоры – размещают на таймлайне несколько анимаций моргания, сделав между ними промежуток с разным количеством кадров. А все можно сделать намного проще, используя as3.

Самый простой способ – это использовать random и обработчик событий ENTER_FRAME. Но об этом позже, сейчас сделаем некоторые приготовления. Для начала нам нужен глазастый персонаж. Мы возьмём оленя, а вы, я уверен, нарисуете своего неповторимого героя. Персонажа оборачиваем в клип (F8), разбиваем на части и распределяем по слоям.

Итак, имеем примерно вот такую структуру:

 

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

Этому клипу назначаем имя c_eyes в Instance name на панели Properties. 

Рассматривая исходный файл, вы можете заметить, что все клипы, которые я именую, начинаются с приставки "с_" (сокращённо от clip). Это нужно для того, чтобы лучше ориентироваться в коде и не искать откуда взялась та или иная переменная, а знать что это клип созданный во флеше. Некоторые люди используют приставку "mc_" (MovieClip), а иные пишут вообще без приставок. Это всё договорённости.

Создаём новый слой и в первом кадре пишем код:

c_eyes.stop(); // останавливаем анимацию

var k = 1; // начальное значение

addEventListener(Event.ENTER_FRAME, Update); // добавляем слушатель событий 

function Update(e:Event):void {

      if (--k<=0) { // если --к ноль 

            c_eyes.gotoAndPlay(1); // проигрываем анимацыю 

            k = Math.floor(Math.random()*100+30); // генерируем новое к [30..100]

      }

      if(c_eyes.currentFrame == c_eyes.totalFrames) // если последний кадр анимации 

            c_eyes.gotoAndStop(1); // возвращаемся на начало

}

Получаем оленя моргающего через определённый, каждый раз разный, промежуток времени. Чтобы лучше было видно, что время разное, я добавил шкалу:

Пару слов о том, как это работает. Каждый раз, когда олень моргает, генерируется случайное число k от 30 до 100. Это число определяет задержку в кадрах, во время которой персонаж не моргает. Анимация в это время не проигрывается, и мы видим только первый кадр. С каждым кадром значение k уменьшается на 1 и когда достигает нуля, начинает проигрываться анимация и генерируется новое число k. Когда анимация моргания отыграла, то мы возвращаемся на первый кадр и опять ждём пока k не превратиться в 0. И так далее.

Что делать, если нужно анимировать несколько частей тела? Все то же самое. Разберём на примере уха оленя. Оборачиваем ухо в клип и внутри делаем анимацию. Именуем этот клип c_ear. Меняем код в верхнем кадре на следующий:

c_eyes.stop();

var k = 1;

// то же самое для уха

c_ear.stop();

var k1 = 1; // начальное значение

addEventListener(Event.ENTER_FRAME, Update);

function Update(e:Event):void {

if (--k<=0) {

       c_eyes.gotoAndPlay(1);

       k = Math.floor(Math.random()*100+30);

}

if(c_eyes.currentFrame == c_eyes.totalFrames)

       c_eyes.gotoAndStop(1);

 

// обработчик для уха, такой же самый.

if (--k1<=0)

{

       c_ear.gotoAndPlay(1)

       k1 = Math.floor(Math.random()*100+30);

}

 

if(c_ear.currentFrame == c_ear.totalFrames)

       c_ear.gotoAndStop(1);

}

Анимация:

Как видим, всё то же самое. Обработчик событий остался один, добавилась новая переменная k1 (можно использовать и k, только тогда ухо будет дёргаться синхронно к морганию). И в обработчике появился блок аналогичный предыдущему.

Небольшое дополнение:

Я приверженец того, чтобы весь код писать в одном кадре, а не разбрасывать его по отдельным клипам. Это существенно упрощает работу с исходником. Например, когда мне скидывают проект (особенно если это as2), то иногда, даже при наличии исходного файла, мне приходится использовать декомпиляторы, чтобы увидеть, где же спрятан код.

Тем не менее, есть такая возможность, писать для каждого клипа свой код и свой обработчик событий, использовать шаблон, так сказать. Такую штуку как раз очень любят аниматоры. Поменять нужно следующее: клип c_eyes обернуть в ещё один клип и уже внутри него уже создать новый слой. На нём написать универсальный код:

var clip = c_eyes;

var k = 1;

clip.stop();

addEventListener(Event.ENTER_FRAME, Update);

function Update(e:Event):void {

if (--k<=0) {

       clip.gotoAndPlay(1)

       k = Math.floor(Math.random()*100+30);

}

if(clip.currentFrame == clip.totalFrames)

       clip.gotoAndStop(1);

}

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

Дело сделано. Эксперементируйте!

Также вы можете скачать исходник (Cs5).

 

Автор урока: Андрей Барвинко