
Here we are with a new as3 experiment.
This time I wanted to try to simulate some mercury-like fluid with its blobby aspect that resembles some sort of lava lamp.
Off course everything animated.
This tecnique is quite simple, you just need some fantasy to reach the final effect:
- Create two BitmapData
- Create a Bitmap object linked to one of the BitmapData and add to the display list
- Apply a PerlinNoise with two octaves to the first (hidden) BitmapData
- Use the threshold method on the second (displayed) BitmapData
- Add some ubercool filters
- Animate everything on a frame based event
- Enjoy the magic
Here is the code:
(I will post the FrameRater class soon, until that just comment relatives lines and as usually remember to drop an instance of the components used (checkBox, slider) to the library before compiling or flash won’t be able to attach them dinamically)
import flash.display.Shape;
import flash.events.Event;
import flash.display.Bitmap;
import flash.display.BitmapData;
import fl.controls.Slider;
import fl.controls.CheckBox;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.filters.BevelFilter;
import flash.filters.BlurFilter;
import flash.filters.GlowFilter;
import com.oaxoa.components.FrameRater;
var w:Number=300;
var rect:Rectangle=new Rectangle(0,0,w,w);
var point:Point=new Point(0,0);
var a:Array=[new Point(1,1), new Point(3,3)];
var bd:BitmapData;
var bd2:BitmapData;
var bmp:Bitmap;
var bevel:BevelFilter;
var blur:BlurFilter;
var glow:GlowFilter;
var shape:Shape;
var ns:Slider;
var cb:CheckBox;
var fr:FrameRater;
initFilters();
initBmp();
initInterface();
function onframe(event:Event):void {
a[0].x+=1;
a[0].y+=1;
a[1].x+=2;
a[1].y+=0;
bd.perlinNoise(105,105,2,0,false,true, 7, true, a);
bd2.fillRect(rect, 0x00000000);
bd2.threshold(bd, rect, point, ">", ns.value/255*0xffffff, 0xffff8000, 0x00ffffff, false);
}
function initBmp():void {
bd=new BitmapData(w,w);
bd2=new BitmapData(w,w);
bmp=new Bitmap(bd2);
bmp.filters=[blur, bevel, glow];
addChild(bmp);
addEventListener(Event.ENTER_FRAME, onframe);
}
function initFilters():void {
bevel=new BevelFilter();
bevel.blurX=bevel.blurY=20;
bevel.distance=10;
bevel.highlightColor=0xffffff;
bevel.shadowColor=0xCC0000;
blur=new BlurFilter(2,2);
glow=new GlowFilter(0xFFAA00, 1, 20, 20, 2, 1, false, false);
}
function initInterface():void {
// draw the white bar
shape=new Shape();
shape.graphics.beginFill(0xffffff, .75);
shape.graphics.drawRect(0,0,w,30);
shape.graphics.endFill();
shape.y=w-30;
// create slider
ns=new Slider();
ns.x=80;
ns.y=w-18;
ns.minimum=0;
ns.maximum=255;
ns.value=150;
ns.snapInterval=1;
ns.liveDragging=true;
// create checkbox
cb=new CheckBox();
cb.label="Use filters";
cb.selected=true;
cb.x=200;
cb.y=w-27;
cb.addEventListener(Event.CHANGE, switchFilters);
// create FrameRater
fr=new FrameRater();
fr.y=w-30;
// add iutems to display list
addChild(shape);
addChild(ns);
addChild(cb);
addChild(fr);
}
function switchFilters(event:Event):void {
event.currentTarget.selected ? bmp.filters=[blur, bevel, glow] : bmp.filters=[blur];
}
Important: don’t know why but i found a little bug in the flash CS3 actionscript editor. If you try to autoformat the above code the function switchFilters will be messied up. The line using the ternary operator (just a simpler way to write an if) will be pushed out of the curly brace so pay attention… just like you should in setting up your own virtual dedicated server hosting services.
