Шлейф «Спираль» за курсором мыши на AS3 во Flash

Обещал писать о AS3, а по сей день ни одной записи :). Стало стыдно мне….
Хочу предупредить сразу, что основную массу примеров буду описывать с использованием подхода программиста, а не художника. Весь код буду стараться описывать более читабельно и  с точки ООП (Объектно ориентированного программирования).

Перечитал ранее описанное и смешно стало — звучит как постулаты))).

Сегодня рассмотрим пример создания так называемой мной «красивости». Почему именно так назвал? Дело в том, что практического применения я пока не нашел. Буду использовать математические модели описанные в AS3 коде. Мой совет, если Вы хотите создавать действительно классные вещи во Flash, осмотритесь вокруг, на природу и постарайтесь найти математическое описание модели.

Шлейф «Спираль» на AS3 можно создать при помощи следующих инструментов:

  1. Обычный текстовый редактор и бесплатный Flex SDK для преобразования программы в SWF файл;
  2. Настроенное приложение Flash Develop ;
  3. Настроенное приложение Eclipse ;
  4. Продукты компании Adobe — Flex Builder, или Flash Professional;
  5. и кто чем гаразд)))

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

Приступим.

1. Создание файла AS3 c именем основного класса:

Создадим файл MouseTrailer.as, котрый будет содержать весь Наш код.

2. Создание класса AS3 элементарного объекта:

Запишем в файл следующий код, который описывает элементарный класс с незамысловатым названием «Частичка».

class Particle {
public var oldx:Number;
public var oldy:Number;
public var newx:Number;
public var newy:Number;
public var difx:Number;
public var dify:Number;
public var inertia:Number;
public var k:Number;
public var col:uint;
 
public function Particle() {
this.oldx = 0;
this.oldy = 0;
this.newx = 0;
this.newy = 0;
this.difx = 0;
this.dify = 0;
this.inertia = 0;
this.k = 0.05;
this.col = 0xFFFFFF;
}
}

3. Основной класс сцены

В начало файла MouseTrailer.as дописываем код основного класса. Описание каждой функции опишу ниже.

package {
//загружаем необходимые пакеты
import flash.display.*;
import flash.geom.*;
import flash.events.*;
//описываем основной класс MouseTrailer
//который наследует свойства класса MovieClip
public class MouseTrailer extends MovieClip {
//размер сцены
var WIDTH:Number;
var HEIGHT:Number;
//количество частичек
var MAX_LINE:Number = 75;
var _particles:Array;
 
var _screen:BitmapData;
var _canvas:MovieClip;
//конструктор основного класса
public function MouseTrailer():void {
//вызов функции определения основных характеристик сцены
//и закрепления обработчиков событий
init();
}
 
private function init():void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//записываем размеры сцены в переменные WIDTH и HEIGHT
WIDTH = stage.stageWidth;
HEIGHT = stage.stageHeight;
//создадим фоновое изображение и зальем его черным цветом
_screen = new BitmapData( WIDTH, HEIGHT, false, 0x0 );
this.addChild( new Bitmap( _screen ) ) as Bitmap;
//добавление обработчиков
//событие перехода на следующий кадр
//скорость смены кадров зависит от настроек вашего компилятора
stage.addEventListener( Event.ENTER_FRAME, enterframeHandler );
//сброс всех параметров и очистить "холст":-)
stage.addEventListener( MouseEvent.CLICK, reset );
//обработка события изменения окна
stage.addEventListener( Event.RESIZE, resize );
//сброс всех параметров и очистить "холст":-)
reset();
 
}
private function reset( e:Event = null ):void {
 
//очистить массив частиц
 
_particles = [];
 
//очистить холст - залить черным
 
_screen.fillRect( _screen.rect, 0x0 );
var i:int = MAX_LINE;
 
//создание частичек
 
while( i-- ) createParticle(i);
 
}
private function resize( e:Event = null ){
 
//убрать все обработчики
 
stage.removeEventListener( Event.ENTER_FRAME, enterframeHandler );
 
stage.removeEventListener( MouseEvent.CLICK, reset );
 
stage.removeEventListener( Event.RESIZE, resize );
 
//повторить инициализацию
 
init();
 
}
private function createParticle(ID):void {
 
//создание элементарного объекта
 
var p:Particle = new Particle();
 
//инерция
 
p.inertia = 0.85- ID*0.01;
 
//случайные составляющие цвета частички
 
var colB = Math.floor( Math.random()*128 + 128 );
 
var colG = Math.floor( Math.random()*( colB * 0.5 ) + colB * 0.105 );
 
var colR = Math.floor( Math.random()*( colG * 0.5 ) + colG * 0.105 );
var color = "0x"+ colR.toString(16) + colG.toString(16) + colB.toString(16);
 
//назначение цвета частички
 
p.col = color;
 
//добавление частички в общий массив
 
_particles.push( p );
 
}
private function enterframeHandler( e:Event = null ):void {
 
//обновить положение частичек
 
update();
 
}
private function update():void {
 
//вначале рисуем линию на "черновике"
 
_canvas = new MovieClip();
stage.addChild( _canvas );
var i:int = _particles.length;
 
while( i -- ){
 
var p:Particle = _particles[i];
var sp:Sprite = new Sprite();
 
_canvas.addChild( sp );
 
//выставляем стиль линии и начальную точку линии
 
sp.graphics.lineStyle( 0, p.col, 0.4 );
 
sp.graphics.moveTo( p.oldx, p.oldy );
 
//математическая модель смещения частички с инерцией
 
p.difx = p.difx*p.inertia+( stage.mouseX - p.oldx )*p.k;
 
p.dify = p.dify*p.inertia+( stage.mouseY - p.oldy )*p.k;
 
//добавление к значению нового положения смещения
 
p.newx += p.difx;
 
p.newy += p.dify;
 
//рисуем линию от начальной точки к новой
 
sp.graphics.lineTo( p.newx, p.newy );
 
//присваиваем старому значению позиции частички
 
//уже не новую позицию
 
p.oldx = p.newx;
 
p.oldy = p.newy;
}
 
//переносим значение с "черновика" на основную сцену
 
capture();
_canvas.removeChild( sp );
 
stage.removeChild( _canvas );
 
_canvas = null;
}
private function capture():void {
 
//расписывать не буду, лучше посмотреть в справке :)
 
var matrix : Matrix = new Matrix(1,0,0,1,0,0);
 
var color : ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);
 
var rect : Rectangle = new Rectangle(0, 0, WIDTH, HEIGHT);
 
_screen.draw(_canvas, matrix, color, BlendMode.ADD, rect, true);
 
}
}
}

4. Компиляция MouseTrailer.as и результат

Скомпилировав данный файл. Должно получиться следующее:

as3-mousetrailerspiral

Шлейф «Спираль» за курсором мыши на AS3 во Flash: Один комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *