ActionScript 3.0 или «От «Hello world» к программной анимации»

Привет! Сегодня я познакомлю вас с языком среды Flash — ActionScript, будем рассматривать 3ю версюю языка, так как даже 2я уже считается устаревшей. Приступим.Для начала обзаведемся справочными материалами — официальным руководством, а также  «библией ActionScript 3.0«-книгой Колина Мука — «ActionScript 3.0 для Flash». Итак приступим. По сложившейся традиции программистов всех времен и народов мы сначала выведем на экран надпись «Hello world!». У начавших знакомство со средой разработки (я использую Flash CS5) возникнет дельный вопрос, куда писать код скрипта? Давайте откроем для начала проект из прошлого урока:

Для начала создадим слой с помощью кнопки New Layer:

Появиться новый слой New Layer 2, кликните 2 раза на названии слоя и переименуйте его в Scripts, а слой Layer 1 переименуйте в main:

Зачем мы это сделали? Дело в том что скрипт можно писать в любом слое и в любом кадре, но лучше сделать специальный слой для скриптов, что мы и проделали. В реальности же делается множество слоев, в которых храниться фон, движимые объекты, меню и т. д. Отвлекся… Выделите слой Scripts, кликнув на него. Теперь выделите первый кадр в слое, кликнув на нем на шкале кадров. А теперь нажмите кнопку Actions:

Все эти действия означают: выделить первый кадр в слое Scripts для написания кода скрипта. Просто, не правда ли? В открывшемся окне напишем следующий код:

trace('Hello world!');

Теперь нажимаем Ctrl+Enter и смотрим что получилось: Обратите внимание на окно вывода, вот наши заветные слова «Hello world!». Но почему их так много? Дело в том, что кадры идут один за другим, а после последнего осуществляется переход к первому. Что же делать? Останавливать воспроизведение, что мы и сделаем: Анимации нет, но нет и постоянного вывода фразы «Hello world!». Почему?! Дело в том, что функция stop останавливает воспроизведение вообще. Теперь удалим лишние кадры — все, кроме первого. Чтобы удалить кадр необходимо щелкнуть на нем правой кнопкой и выбрать в меню команду Remove frames, можно также предварительно выделить кадры в слоях и удалить их «массово»: Остался только один кадр, но не беда, мы его оживим программно, а как делать анимацию фона, рассмотрим в следующем уроке. Как будем оживлять? Давайте подвигаем наш шар по оси X, но с тем условием, что мы будем менять направление всякий раз когда X превысит 600 или будет меньше 40. Поехали?) Для начало нам надо задать имя экземпляра — имя, к которому мы сможем обращаться в коде скрипта, для начала давайте конвертируем наш объект. Кликните правой кнопкой на объекте и выберете команду с Convert To Symbol…: Заполните поля указанные на рисунке ниже и нажмите ОК: Теперь откройте вкладку Properties, выбрав клип на вкладке Library и в поле с надписью <Instance Name> введите название экземпляра, у меня это ball: Теперь наконец-то можно заняться программной анимацией. Выделяйте первый кадр слоя Scripts, стирайте trace(‘Hello world!’); и пишите:

import flash.events.Event; //Загрузим класс для работы с событиями

stop(); //останавливаем воспроизведение
var x_direction=1; //задаем приращение
stage.addEventListener(Event.ENTER_FRAME,moveByX);//добавляем обработчик события кадра
function moveByX(e:Event){
	ball.x+=x_direction;//добавляем приращение к координате x
	if (ball.x>600 || ball.x<40) //если вышли за верхний или нижний предел,
		x_direction*=-1; //меняем направление
}

Я специально подробно закомментировал код, чтобы вам было понятней. Подробней о том, как работают события, расскажу в одном из следующих уроков, а сейчас давайте нажмем Ctrl+Enter:

Напоследок приведу немного модифицированный код, который сложней, но интересней, ваша задача — разобраться, как он работает и запустить:

import flash.events.Event;

stop();
var x_direction=1;
var y_direction=2;

stage.addEventListener(Event.ENTER_FRAME,moveObject);

function moveObject(e:Event){
	moveByX();
	moveByY();
}
function moveByX(){
	ball.x+=x_direction;
	if (ball.x>600 || ball.x<40)
		x_direction*=-1;
}

function moveByY(){
	ball.y+=y_direction;
	if (ball.y>440 || ball.y<40)
		y_direction*=-1;
}

В следующих статьях мы будем подробнее разбирать синтаксис и особенности языка ActionScript 3.0. До новых встреч.