Пузырьки во Flash! (ActionScript 3.0)

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

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

Из этого урока вы научитесь делать... пузырьки!!!

Переводить было лень... Тем более, что и по картинкам там всё ясно. Поэтому буду краток. Подробности в коментариях к коду. :)

Подготовка:

1. Создайте новый *.fla 640x480.

2. Создайте новый *.as, сохраните рядом с *.fla под названием "Main.as" и напишите в нем следующий код:

/*
Главный класс Main.as.
 
Создает таймер и по таймеру создает пузырьки в координатах, зависимых от положения мыши.
*/
 
package
{
 //Импорты необходимых классов.
 import flash.display.Sprite;
 import flash.utils.Timer;
 import flash.events.TimerEvent;
 
 public class Main extends Sprite
 {
 //Переменная для таймера.
 private var timer:Timer;
 
 //Конструктор главного класса.
 public function Main()
 {
 //Создаем экземпляр класса Таймер.
 timer = new Timer(50, 0);
 //Назначаем слушатель события тика таймера.
 timer.addEventListener(TimerEvent.TIMER, InTimer);
 //Запускаем таймер.
 timer.start();
 }
 
 //Функция, которая срабатывает по тику таймера.
 private function InTimer(e:TimerEvent):void
 {
 //Создаем пузырек.
 var c:Circle = new Circle(stage);
 }
 }
}

3. Сохраните "Main.as" и пропишите этот класс как главный в свойствах *.fla.

4. Теперь создайте еще один *.as файл, сохраните его под именем "Circle.as" рядом с *.fla и напишите в нем следующий код:

/*
Класс пузырька.
 
Класс рисует пузырек, добавляет его в список отображения и удаляет по событию.
*/
 
package
{
 //Необходимые импорты.
 import flash.display.Sprite;
 import flash.display.Stage;
 import flash.display.GradientType;
 import flash.geom.Matrix;
 import flash.filters.BlurFilter;
 import fl.transitions.Tween;
 import fl.transitions.easing.Strong;
 import fl.transitions.TweenEvent;
 
 public class Circle extends Sprite
 {
 //Контейнер Stage, к которому в список отображения будут добавляться пузырек.
 private var container:Stage;
 //Переменные для будущих твин анимаций.
 private var scaleXTween:Tween;
 private var scaleYTween:Tween;
 private var gravityTween:Tween;
 //Константа разброса пузырьков.
 private const delay:uint = 50;
 
 //Конструктор.
 public function Circle(c:Stage)
 {
 //Кладем в переменную контейнера переданый stage.
 container = c;
 //Добавляем пузырек в список отображения.
 container.addChild(this);
 //Создаем пузырек.
 CreateCircle();
 }
 
 private function CreateCircle():void
 {
 //Задаем фильтр размытия для красоты. :)
 var blur:BlurFilter = new BlurFilter(1.5,1.5,3);
 //Задаем рандомный цвет пузырька в диапазоне от синего до зеленого.
 var color:uint = Math.random() * 0x0000ff + 0x00ff00;
 //Задаем радиус пузырька.
 var radius:Number = Math.random() * 10 + 10;
 //Задаем матрицу для последующей заливки градиентом.
 var matrix:Matrix = new Matrix();
 //Преобразуем матрицу в соответстующий необходимый вид.
 matrix.createGradientBox(2 * radius, 2 * radius, 0, (- radius - radius/2), (- radius - radius/2));
 
 /*
 Рисуем пузырек
 */
 //Задаем градиентный фон заливки.
 this.graphics.beginGradientFill(GradientType.RADIAL,[0xffffff, color],[0.8, 0.3],[0, 200], matrix);
 //Задаем стиль линий.
 this.graphics.lineStyle(1, (color - 0x222222));
 //Рисуем круг.
 this.graphics.drawCircle(0,0,radius);
 //Конец рисования.
 this.graphics.endFill();
 //Назначаем фильтр размытия.
 this.filters = [blur];
 
 //Задаем координаты пузырька.
 this.x = mouseX + Math.random() * delay - delay / 2;
 this.y = mouseY + Math.random() * delay - delay / 2;
 //Анимируем появление пузырька.
 scaleXTween = new Tween(this,"scaleX",Strong.easeOut,0.5,1,1,true);
 scaleYTween = new Tween(this,"scaleY",Strong.easeOut,0.5,1,1,true);
 //Анимируем падение пузырька.
 gravityTween = new Tween(this,"y",Strong.easeIn,this.y,this.y+480,7,true);
 //Назначаем слушатель на событие завершения анимации падения.
 gravityTween.addEventListener(TweenEvent.MOTION_FINISH, Delete);
 }
 
 //Функция вызывается после завершения анимации падения пузырька и удаляет пузырек из списка отображения stage.
 private function Delete(e:TweenEvent):void
 {
 container.removeChild(this);
 /*
 После удаления из списка отображения больше не остается ссылок на экземпляр класса. Поэтому сборщик мусора прекрасно удаляет этот экземпляр из памяти.
 */
 }
 }
}

5. Сохраните изменения в "Circle.as" и протестируйте ролик.
Готово! Пузырьки, пузырьки, пузырьки!

Исходник: 

Впервые!

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

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

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

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

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

Комментарии

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

класс не воспринимает. вроде и .as создаю. правда, почему то этот файл не как в уроках тратата. класс, а тратата. комьюникейшен. а расширение .as. это может быть проблемой?

Аватар пользователя Fly
Цитата: Навка

класс не воспринимает. вроде и .as создаю. правда, почему то этот файл не как в уроках тратата. класс, а тратата. комьюникейшен. а расширение .as. это может быть проблемой?

я вас не понял

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте -

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

ХМ... А като вызиваем в самом fla документе класс? Дапустим я описал классы как показанно на уроке, при компиляции fla, должен быть пустой документ или както обращаться к классу? Просто у меня ничего не происходит)))

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

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте -

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

Также скачан исходник, только вот он у меня не открывается, чтобы посмотреть... Может всетаки подскажете? Чтобы все встало на свои места в голове...

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

О все, разобрался...

ag

 

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

gravityTween = new Tween(this,"y",Strong.easeIn,this.y,this.y+480,7,true);
вместо this.y+480 container.stageHeight, то мы получим универсальную конструкцию,
да и пузыри будут удаляться как раз на границе ролика.
Только вот вопрос, зачем передавать в конструкторе stage, мы ведь можем обратиться
напрямую к ней? типы stage.stageHeight