Анимированная спираль с помощью ActionScript 3.0

Content on this page requires a newer version of Adobe Flash Player.

Информация
Автор/переводчик: 
ProcXel.A

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

Введение:
Это не так сложно, как может показаться на первый взгляд. А код в дальнейшем можно модифицировать для создания другой анимации.

Пишем код:
Просто напишите следующий код в первом кадре TimeLine. Думаю, что коментариев в коде будет достаточно и что вам всё будет понятно без лишних объяснений.

import flash.display.Sprite;
import flash.display.BitmapData;
import flash.display.Bitmap;
 
var speed:Number = 0.3;
var radius:Number = 0;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;
 
 
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
 
//Задаем черный задний фон.
 
var back:Sprite = new Sprite();
back.graphics.beginFill(0x000000);
back.graphics.drawRect(0, 0, 2*centerX, 2*centerY);
back.graphics.endFill();
addChild (back);
 
//Наша спираль будет содержаться в контейнере.
var container:Sprite = new Sprite();
 
//Помещаем наш контейнер в центр сцены.
container.x = centerX;
container.y = centerY;
addChild (container);
 
//Задаем в контейнере стиль линии в 4 пикселя и белого цвета.
container.graphics.lineStyle (4, 0xffffff);
 
//Начальная точка будет в центре сцены. (это левый верхний угол контейнера)
container.graphics.moveTo (0, 0);
 
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
 
/*
Мы останавливаем рисование спирали после того, как ее радиус достигает 100 пикселей.
Но вращение спирали продолжаем.
*/
if (radius > 100) {
speed = 0;
container.rotation += 10;
}
else {
//Увеличиваем радиус каждый кадр.
radius += 0.5;
 
//Новые х и у координаты.
xpos = Math.cos(angle) * radius;
ypos = Math.sin(angle) * radius;
 
//Рисуем линию по новым координатам.
container.graphics.lineTo (xpos,ypos);
 
//Вращаем контейнер.
container.rotation += 10;
 
//Чем больше скорость, тем быстрее рисуем спираль.
angle += speed;
}
}

Как видите, всё просто. Поиграйте с переменными кода.
А теперь давайте, для примера, запустим спираль в обратную сторону. Вот код:

var speed:Number = 0.3;
var radius:Number = 100;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;
 
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
 
//Задаем черный задний фон.
var back:Sprite = new Sprite();
back.graphics.beginFill(0x000000);
back.graphics.drawRect(0, 0, 2*centerX, 2*centerY);
back.graphics.endFill();
addChild (back);
//Наша спираль будет содержаться в контейнере.
var container:Sprite = new Sprite();
 
//Помещаем наш контейнер в центр сцены.
container.x = centerX;
container.y = centerY;
addChild (container);
 
//Задаем в контейнере стиль линии в 4 пикселя и белого цвета.
container.graphics.lineStyle (4, 0xffffff);
 
//Начальная точка.
container.graphics.moveTo (100, 0);
 
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
 
 /*
 Мы останавливаем рисование спирали после того, как ее радиус достигает 0 пикселей.
 Но вращение спирали продолжаем.
 */
 if (radius < 0) {
 speed = 0;
 container.rotation += 10;
 }
 else {
 //Уменьшаем радиус каждый кадр.
 radius -= 0.5;
 
 //Новые х и у координаты.
 xpos = Math.cos(angle) * radius;
 ypos = Math.sin(angle) * radius;
 
 //Рисуем линию по новым координатам.
 container.graphics.lineTo (xpos,ypos);
 
 //Вращаем контейнер.
 container.rotation += 10;
 
 //Чем больше скорость, тем быстрее рисуем спираль.
 angle += speed;
 }
}
Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Похожие записи

Комментарии

Аватар пользователя NecroS

Спасибо за урок =))

Аватар пользователя Tix

Spasibo !!!  

smile

 

Аватар пользователя mirokon

Спасибо! Отличный урок!

Аватар пользователя Майя

Спасибо за все что Вы делаете.Вы просто молодцы!!!

Аватар пользователя DRACTION

здорово!!!!!!:-)

Аватар пользователя enotiki7

Спасибо огромное вам за труд!