Эффект северного сияния во Flash на AS3

Что-то потянуло меня на «красивости» :-).

Вот еще один пример, как при помощи Flash и языка Action Script 3 можно создать симпатичный эффект северного сияния.

Создадим файл NorthernLights.as, в котором создадим два класса.

Первым создадим класс элементарной частички:

class Particle {
 
 
    //параметры сцены
    private var w:uint=640;
    private var h:uint=480;
    //координаты частички
    public var x:Number;
    public var y:Number;
    public var vx:Number;
    public var vy:Number;
    //цвет частички
    public var color:uint = 0xFF1FA539;
 
 
    //конструктор частички
    public function Particle(_x:Number, _y:Number):void {
        //начальная позиция частички
        x = _x;
        y = _y;
        //указывает направление движения
        vx = 5*(Math.random()-Math.random());
        vy = 5*(Math.random()-Math.random());
    }
    //функция движения частички
    public function move(_value:uint):void {
        //разделяем цветовые составляющие на
        //красный, зеленый, синий
        var r:uint = _value >> 16;
        var g:uint = _value >> 8 & 255;
        var b:uint = _value >> 255;
        //стараемся создать плавное перемещение
        vx += (r-b)/100;
        vy += (g-b)/100;
        //ограничиваем прирост диапазоном[-5;+5]
        vx = Math.min(vx, 5);
        vy = Math.min(vy, 5);
        vx = Math.max(vx, -5);
        vy = Math.max(vy, -5);
        //перемещаем
        x += vx;
        y += vy;
        //положение точки должно быть в пределах сцены
        if(x < 0 || x > w) {
            vx *= -1;
        }
 
 
        if(y <0 || y > h) {
            vy *= -1;
        }
        //распределим цветовой диапазон в по всему периметру сцены
        //присвоим значение цвета частички в зависимости от позиции на сцене
        r = (x / w) * 255;
        g = (y / h) * 255;
        b = Math.abs(Math.round((vx+vy)))*10;
        color = (255 << 24 | r << 16 | g << 8 | b);
    }
}

Когда элементарная частичка описана, опишем основной класс в начале документа:

package
{
    //загрузка необходимых библиотек
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.filters.BlurFilter;
    import flash.geom.ColorTransform;
    import flash.geom.Matrix;
    import flash.geom.Point;
    //настройка основных параметров сцены
    [SWF(backgroundColor=0x0, width=640, height=480, frameRate=24)]
    //наследуем основной класс от класса Sprite
    public class NorthernLights extends Sprite {
        //хранилище данных перемещения частичек
        private var bmpData:BitmapData;
 
 
        //основное полотно
        private var bmpBack:Bitmap;
        //хранилище данных основного полотна
        private var bmpDataBack:BitmapData;
        //хранилище информация со случайным шумом
        private var bmpPerlin:BitmapData;
        //фильтер размытия
        private var blur:BlurFilter;
        //массив частичек
        private var _particles:Array;
        //кол-во частичек - зависит от ресурсов процессора
        private var numParticles:int = 10000;
 
 
        //конструктор основного класса
        public function NorthernLights():void    {
            //создаем хранилище данных
            bmpPerlin = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0xFFFFFF);
            //генерируем шум
            bmpPerlin.perlinNoise(100, 100, 3, Math.round(Math.random()*100), false, true);
            //добавляем шум на сцену
            addChildAt(new Bitmap(bmpPerlin), 0);
            //создание хранилище основного полотна
            bmpDataBack = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x000000);
            //создание основного полотна
            bmpBack = new Bitmap(bmpDataBack);
            //добавление основного полотна на сцену
            addChild(bmpBack);
            //выставляем режим наложения слоя bmpBack
            bmpBack.blendMode = "normal";
            //создание хранилище данных перемещения частичек
            bmpData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x00000000);
            //создание массива частичек
            _particles = [];
            //создание фильтра
            blur = new BlurFilter(10, 10, 3);
            //заполнение массива частичек
            for(var i:int=0; i-1) {
                p = _particles[i];
                //меняем цвет точки хранилища перемещения частичек
                //на тот какого цвета частичка в позиции частички
                bmpData.setPixel32(p.x, p.y, p.color);
                //перемещаем частичку дальше
                p.move(bmpPerlin.getPixel(p.x, p.y));
            }
            //наносим информацию из хранилище данных перемещения частичек
            //на хранилище данных основного полотна
            bmpDataBack.draw(bmpData, null, null, "add");
            //размываем путем применения фильтра
            bmpDataBack.applyFilter(bmpDataBack, bmpData.rect, new Point(0, 0), blur);
        }
    }
}

В конечном итоге, после компиляции AS3 файла с помощью одного из способов компиляции Flash (см. Статью), должно получиться следующее:

NorthernLights-AS3-Flash

Эффект северного сияния во Flash на AS3: 8 комментариев

    • ) Дайте, пожалуйста, больше информации, чтобы можно было что-то предпринять.
      В противном случае, можете просто перезагрузить компьютер)

  1. Доброго времени!
    У меня в флеш-шапке сайта есть слиточек золота и хотелось бы, чтобы он постоянно переливался. Подскажите, как можно адаптировать для этой идеи данный эффект?

    • Здравствуйте, Кристина.
      Желательно данный эффект Вам не использовать, т.к. это будет излишней нагрузкой на процессор посетителей сайта.
      Попробуйте просто наложить анимацию перемещения полупрозрачной белой полосы вдоль слитка. На слой анимации наложить маску, чтобы «выбеливались» только ближние ребра слитка. Анимацию запускать по таймеру.

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

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