WebMIEM
ВебМИЭМ

Flash AS 3.0 - Урок 3: Создание анимации с помощью AS

Flash AS 3.0 - Урок 3: Создание анимации с помощью AS

Сообщение PETERs602 » Пт апр 02, 2010 0:43

Adobe Flash ActionScript 3.0 - Урок 3: Создание анимации с помощью Action Script
Системные требования: Adobe Flash CS3 или CS4
Lesson03.zip
Adobe Flash ActionScript 3.0 - Урок 3: Создание анимации с помощью Action Script
(1.8 Мб) Скачиваний: 558


Управление свойствами символа-клипа с помощью Action Script
Основной синтаксис изменения любого свойства MovieClip(клип) таков:

Код: Выделить всё
ИмяКлипа.НазваниеСвойства = Значение;


Например:

Код: Выделить всё
clip1.rotation = 90;


Часто используемые свойства и их значения:
x - положение по горизонтали (от -бесконечности до +бесконечности)
y - положение по вертикали (от -бесконечности до +бесконечности)
rotation - поворот (от -180 до +180)
width - ширина (пиксели)
height - высота (пиксели)
scaleX - масштаб по горизонтали (от -бесконечности до +бесконечности, 1 равен 100%)
scaleY - масштаб по вертикали (от -бесконечности до +бесконечности, 1 равен 100%)
visible - видимость (true или false)
alpha - прозрачность (от 0 до 1)


Изменение значения свойства
Попробуем изменить положение клипа star_mc по горизонтали.

1. При видимой панели Actions выберите кадр 1 на слое actions.
2. Введите в панеле Actions следующий код:

Код: Выделить всё
star_mc.x = 275
;

3. Сохраните и протестируйте ролик. Клип star_mc должен отображаться в середине экрана.

4. Добавьте следующий код за уже вставленным.

Код: Выделить всё
star_mc.rotation = 90;
star_mc.alpha = .5;


В Action Script 3.0 прозрачность, как и большинство значений измеряемых обычно в процентах, обычно изменяется в диапозоне от 0 до 1, а не от 0% до 100%.


5. Сохраните и протестируйте ролик, звезда должна повернуться и стать на 50% прозрачной.

Увеличение или уменьшение значение свойства.
Вы можете не присваивать определенное значение свойству, а добавлять или вычитать из текущего значения свойства.

1. Найдите и удалите(закомментируйте) весь код, который вы написали в панели Actions.
2. Введите следующий код:

Код: Выделить всё
star_mc.addEventListener(MouseEvent.CLICK,rotateStar);

function rotateStar(e:MouseEvent):void {
star_mc.rotation += 5;
star_mc.width=5;
}


+= - это краткая форма записи команды «взять текущее значение объекта слева и прибавить к нему значение справа». Длинный вариант выглядил бы так:
Код: Выделить всё
star_mc.rotation = star_mc.rotation + 5;


3. Сохраните и протестируйте ролик. При каждом щелчке по звезде её угол поворота будет увеличиваться на 5 градусов.

Использование события ENTER_FRAME для анимации свойства клипа.
Событие ENTER_FRAME постоянно происходит при воспроизведении ролика Flash, даже если на временной шкале только один кадр. Попробуем анимировать положение клипа со звездой по горизонтали, для чего будем использовать свойство x.

1. Под существующем кодом в слое actions добавьте следующий код:

Код: Выделить всё
addEventListener(Event.ENTER_FRAME, starMove);

function starMove(e:Event):void {
      star_mc.x += 2;
}


2. Сохраните и протестируйте ролик. Звезда должна теперь медленно двигаться слева на право. Кромето того, при щелчке она все ещё будет поворачиваться на 5 градусов.

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

3. Ихмените код из пункта 1, чтобы он выглядел следующим образом:

Код: Выделить всё
addEventListener(Event.ENTER_FRAME, starMove);

function starMove(e:Event):void {
   if (star_mc.x < stage.stageWidth) {
      star_mc.x += 2;
   } else {
      star_mc.x = 0;
   }
}


Пока звезда не выходит за границы сцены, она будет двигаться вправо, но если условный оператор определит, что положение звезды больше, чем stageWidth(ширина сцены), он переместит её обратно в левый угол и все начнется сначало. Таким образом анимация будет воспроизводится до бесконечности.

stageWidth и stageHeight являются свойствами сцены, обозначают высоту и ширину сцены.


Создание переменной для хранения ссылки на MovieClip.
В данном разделе мы создадим код, который с помощью кнопок внизу позволит изменять свойства четырёх интсрументов. Пользователь сможет выбирать инструмент, свойства которого будут изменяться с помощью кнопок. Для этого надо будет создать переменную в которой будет отраженно, пок акому инструменту пользователь щелкнул в последний раз.

1. Напишите следующий код под существующим:

Код: Выделить всё
var instrument:MovieClip = banjo;


Обратите внимание, что тип данных переменной установлен, как MovieClip. Это означает, что значение instrument всегда будет ссылкой на MovieClip.

2. Под существующим кодом допишем следующий код, который будет выводить текст о выбранном инструменте.

Код: Выделить всё
instrument_txt.text = "The Banjo has been selected.";


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

Код: Выделить всё
violin.addEventListener(MouseEvent.CLICK,onViolin);
banjo.addEventListener(MouseEvent.CLICK,onBanjo);
trumpet.addEventListener(MouseEvent.CLICK,onTrumpet);
glock.addEventListener(MouseEvent.CLICK,onGlock);

function onViolin(e:MouseEvent):void {
   instrument = violin;
   instrument_txt.text = "The Violin has been selected.";
}


function onTrumpet(e:MouseEvent):void {
   instrument = trumpet;
   instrument_txt.text = "The Trumpet has been selected.";
}


function onBanjo(e:MouseEvent):void {
   instrument = banjo;
   instrument_txt.text = "The Banjo has been selected.";
}

function onGlock(e:MouseEvent):void {
   instrument = glock;
   instrument_txt.text = "The Glockenspiel has been selected.";
}


4. Сохраните и протестируйте ролик. Теперь при щелчке по любому инструменту текст должен изменится на соответствующий выбранному инструменту.

Изменение свойств MovieClip с помощью кнопок.

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

Код: Выделить всё
grow_btn.addEventListener(MouseEvent.CLICK, grow);
shrink_btn.addEventListener(MouseEvent.CLICK, shrink);
rotate_btn.addEventListener(MouseEvent.CLICK, rotate);
hide_btn.addEventListener(MouseEvent.CLICK, hideClip);
show_btn.addEventListener(MouseEvent.CLICK,showClip);
fadeOut_btn.addEventListener(MouseEvent.CLICK,fadeOut);
fadeIn_btn.addEventListener(MouseEvent.CLICK,fadeIn);


2. Добавьте код функции grow, которая будет увеличивать размер выбранного инструмента на 10 процентов при каждом нажатии кнопки Scale UP:

Код: Выделить всё
function grow(e:MouseEvent):void {
   instrument.scaleX += .1;
   instrument.scaleY += .1;
}


3. Добавьте код функции shrink, которая будет уменьшать размер выбранного инструмента на 10 процентов при каждом нажатии кнопки Scale DOWN:

Код: Выделить всё
function shrink(e:MouseEvent):void {
   instrument.scaleX -= .1;
   instrument.scaleY -= .1;
}


4. Добавьте код функции rotate, которая будет поворачивать на 5 градусов изображение инструмента при каждом нажатии кнопки Rotate:

Код: Выделить всё
function rotate (e:MouseEvent):void {
   instrument.rotation +=  5;
}


5. Добавьте код функции hideClip, которая будет скрывать объект, присваивая свойству visible значение false при щелчке на кнопке Hide:

Код: Выделить всё
function hideClip(e:MouseEvent):void {
   instrument.visible = false;
}


6. Добавьте код функции showClip, которая будет показывать объект, присваивая свойству visible значение true при щелчке на кнопке Show:

Код: Выделить всё
function showClip(e:MouseEvent):void {
   instrument.visible = true;
}


7. Добавьте код функции fadeOut, которая будет устанавливать уровень непрозрачности объекта равным 50% при щелчке на кнопке FadeOut:

Код: Выделить всё
function fadeOut(e:MouseEvent):void {
   instrument.alpha = .5;
}


8. Добавьте код функции fadeIn, которая будет устанавливать уровень непрозрачности объекта равным 100% при щелчке на кнопке FadeIn:

Код: Выделить всё
function fadeIn(e:MouseEvent):void {
   instrument.alpha = 1;
}


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

Создание анимации в Action Script с помощью переходов.
Так как создаётся анимация с помощью переходов на временной шкале Flash, можно создавать и переходы с помощью Action Script.

Классы Easing в Action Script 3.0
Easing позволяет увеличить или уменьшить скорость в начале или в конце анимации. В Action Script есть несколько встроенных классов для указания скорости изменения значений, которые позволяют создавать разнообразные эффекты, в том числе класс CustomEase, позволяющий создавать собственные эффекты с изменением скорости.


Ссылка на новые экземпляры переходов в Action Script обычно хранится в переменных. Синтаксис похож на синтаксис для создания других переменных:

Код: Выделить всё
var tweenName:Tween = new Tween(objectToBeTweened, "propertyToBeAnimated", EasingType, startingValue, endingValue, time, trueForSeconds);


Например, чтобы переместить объект clip1 по оси y из координаты 0 в 400 код будет выглядеть следующим образом:

Код: Выделить всё
var clip1Tween:Tween = new Tween(clip1, "y", None.easyOut, 0, 400, 5, true);


Импорт классов Tween и изменение скорости (easing).
Пока мы использовали только встроенные классы, которые не нужно импортировать при использовании.

1. Выберите на временной шкале 1 кадр в слое actions и перейдите в панель Actions.
2. Добавьте следующий код в самое начало(перед всем остальным кодом, который уже написан).

Код: Выделить всё
import fl.transitions.Tween;
import fl.transitions.easing.*;


Добавление переходов Action Script.

1. Найдите функцию grow:

Код: Выделить всё
function grow(e:MouseEvent):void {
   instrument.scaleX += .1;
   instrument.scaleY += .1;
}


2. Замените её на:

Код: Выделить всё
function grow(e:MouseEvent):void {
   var growX:Tween = new Tween(instrument, "scaleX", Elastic.easeOut, .2, 2, 3, true);
      var growY:Tween = new Tween(instrument, "scaleY", Elastic.easeOut, .2, 2, 3, true);
}


3. Найдите функцию shrink:

Код: Выделить всё
function shrink(e:MouseEvent):void {
   instrument.scaleX -= .1;
   instrument.scaleY -= .1;
}


4. Замените её на:

Код: Выделить всё
function shrink(e:MouseEvent):void {
   var shrinkX:Tween = new Tween(instrument, "scaleX", Elastic.easeOut, 2, .5, 3, true);
      var shrinkY:Tween = new Tween(instrument, "scaleY", Elastic.easeOut, 2, .5, 3, true);
}


5. Найдите функцию fadeOut:

Код: Выделить всё
function fadeOut(e:MouseEvent):void {
   instrument.alpha = .5;
}


6. Замените её на:

Код: Выделить всё
function fadeOut(e:MouseEvent):void {
   var tweenfadeOut:Tween = new Tween(instrument, "alpha", None.easeOut, 1, 0, 3, true);
}


7. Найдите функцию fadeIn:

Код: Выделить всё
function fadeIn(e:MouseEvent):void {
   instrument.alpha = 1;
}


8. Замените её на:

Код: Выделить всё
function fadeIn(e:MouseEvent):void {
   var tweenfadeIn:Tween = new Tween(instrument, "alpha", None.easeIn, instrument.alpha, 1, 3, true);
}


9. Найдите функцию rotate:

Код: Выделить всё
function rotate (e:MouseEvent):void {
   instrument.rotation +=  5;
}


10. Замените её на:

Код: Выделить всё
function rotate(e:MouseEvent):void {
   var spin:Tween = new Tween(instrument, "rotation", Elastic.easeOut, 0, 360, 5, true)
}


11. Сохраните и протестируйте ролик.

Вот весь код урока:
Код: Выделить всё
import fl.transitions.Tween;
import fl.transitions.easing.*;

star_mc.addEventListener(MouseEvent.CLICK,rotateStar);

function rotateStar(e:MouseEvent):void {
star_mc.rotation += 5;
star_mc.width=5;
}

addEventListener(Event.ENTER_FRAME, starMove);

function starMove(e:Event):void {
   if (star_mc.x < stage.stageWidth) {
      star_mc.x += 2;
   } else {
      star_mc.x = 0;
   }
}

var instrument:MovieClip = banjo;
instrument_txt.text = "The Banjo has been selected.";

violin.addEventListener(MouseEvent.CLICK,onViolin);
banjo.addEventListener(MouseEvent.CLICK,onBanjo);
trumpet.addEventListener(MouseEvent.CLICK,onTrumpet);
glock.addEventListener(MouseEvent.CLICK,onGlock);

function onViolin(e:MouseEvent):void {
   instrument = violin;
   instrument_txt.text = "The Violin has been selected.";
}

function onTrumpet(e:MouseEvent):void {
   instrument = trumpet;
   instrument_txt.text = "The Trumpet has been selected.";
}

function onBanjo(e:MouseEvent):void {
   instrument = banjo;
   instrument_txt.text = "The Banjo has been selected.";
}

function onGlock(e:MouseEvent):void {
   instrument = glock;
   instrument_txt.text = "The Glockenspiel has been selected.";
}

grow_btn.addEventListener(MouseEvent.CLICK, grow);
shrink_btn.addEventListener(MouseEvent.CLICK, shrink);
rotate_btn.addEventListener(MouseEvent.CLICK, rotate);
hide_btn.addEventListener(MouseEvent.CLICK, hideClip);
show_btn.addEventListener(MouseEvent.CLICK,showClip);
fadeOut_btn.addEventListener(MouseEvent.CLICK,fadeOut);
fadeIn_btn.addEventListener(MouseEvent.CLICK,fadeIn);

function grow(e:MouseEvent):void {
   var growX:Tween = new Tween(instrument, "scaleX", Elastic.easeOut, .2, 2, 3, true);
      var growY:Tween = new Tween(instrument, "scaleY", Elastic.easeOut, .2, 2, 3, true);
}

function shrink(e:MouseEvent):void {
   var shrinkX:Tween = new Tween(instrument, "scaleX", Elastic.easeOut, 2, .5, 3, true);
      var shrinkY:Tween = new Tween(instrument, "scaleY", Elastic.easeOut, 2, .5, 3, true);
}

function rotate(e:MouseEvent):void {
   var spin:Tween = new Tween(instrument, "rotation", Elastic.easeOut, 0, 360, 5, true)
}

function hideClip(e:MouseEvent):void {
   instrument.visible = false;
}

function showClip(e:MouseEvent):void {
   instrument.visible = true;
}

function fadeOut(e:MouseEvent):void {
   var tweenfadeOut:Tween = new Tween(instrument, "alpha", None.easeOut, 1, 0, 3, true);
}

function fadeIn(e:MouseEvent):void {
   var tweenfadeIn:Tween = new Tween(instrument, "alpha", None.easeIn, instrument.alpha, 1, 3, true);
}


Самостоятельные задания:
1. Создайте MovieClip, изображение которого будет отталкиваться от 3 или даже 4 сторон сцены(на аналогии с звездой).
2. Отобразите значение свойства анимированного элемента в текстовом поле.
3. Добавьте ещё один музыкальный инструмент.
Аватара пользователя
PETERs602
Site Admin
 
Сообщения: 810
Зарегистрирован: Ср сен 06, 2006 0:42
Откуда: Д123

Вернуться в Общий

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron
line
www.WebMIEM.ru © 2006-2010