As2 Flash Effects: Optimized

[LesPaulPlayer]

I'm sure many of you have seen my other posts by now and know what this is all about. GustTheASGuy has found disfavor with the way the effects were coded, so revamped them and optimized them a lot so that they run faster. Updates include: 100% OOP, no defining functions to prototypes, a new ColorTransition class, optimized color fading (which used to make the whole thing lag, much more so than filters), and better filters that are applied to each particle individually (runs faster).

SCRIPTS

Static.as

import flash.geom.Point;
import flash.filters.GlowFilter;
class Static extends MovieClip {
	private var elec:MovieClip;
	private var rand:Number;
	private var i:Number;
	private var mc:MovieClip;
	private var x:Number;
	private var y:Number;
	private var r:Number;
	private var paths:Array;
	private var spd:Number;
	private var path:MovieClip;
	function Static(mc2) {
		mc = mc2;
		elec = mc.createEmptyMovieClip("elec", 1);
	}
	private function addPath(x:Number, y:Number) {
		if (this.paths.length>15) {
			this.paths.pop();
		}
		this.paths.unshift(new Point(x, y));
	}
	private function drawPath() {
		path = elec.createEmptyMovieClip("path", 1);
		this.path.lineStyle(1, 0xFFFFFF, 100);
		this.path.moveTo(this.x, this.y);
		for (i=0; i<this.paths.length; ++i) {
			this.path.lineTo(this.paths[i].x-this.elec._x, this.paths[i].y-this.elec._y);
		}
	}
	private function move() {
		addPath(this.x, this.y);
		drawPath();
		this.x += Math.cos(this.r*Math.PI/180)*this.spd;
		this.y += Math.sin(this.r*Math.PI/180)*this.spd;
		this.spd *= .5;
		if (this.x>275+Stage.width/2 || this.x<275-Stage.width/2) {
			this.r *= -1;
			this.r += 180;
			this.x = 275+Stage.width/2*(this.x>275+Stage.width/2)-Stage.width/2*(this.x<275-Stage.width/2);
		}
		if (this.y>200+Stage.height/2 || this.y<200-Stage.height/2) {
			this.r *= -1;
			this.y = 200+Stage.height/2*(this.y>200+Stage.height/2)-Stage.height/2*(this.y<200-Stage.height/2);
		}
		this.r += random(90)-random(90);
		if (this.spd<.01) {
			this.elec.removeMovieClip();
		}
		if (this.spd<.5) {
			if (random(2) == 0) {
				this.elec._visible = !this.elec._visible;
			}
		}
	}
	public function init(x:Number, y:Number,glow:GlowFilter):Void {
		this.x = x;
		this.y = y;
		this.paths = new Array();
		rand = random(10)+2;
		this.r = random(360);
		this.spd = rand*7;
		if (glow) {
			elec.filters = [glow]
		} else {
			elec.filters = [new GlowFilter(0x9900CC,1,16,16,6)]
		}
		elec.parent = this;
		elec.onEnterFrame = function() {
			this.parent.move();
		};
		elec.onUnload = function() {
			this._parent.removeMovieClip();
		};
	}
}

Spark.as

import flash.geom.Point;
import flash.filters.GlowFilter;
class Spark extends MovieClip {
	private var spark:MovieClip;
	private var rand:Number;
	private var i:Number;
	private var mc:MovieClip;
	private var x:Number;
	private var y:Number;
	private var xspd:Number;
	private var yspd:Number;
	private var spd:Number;
	private var paths:Array;
	private var path:MovieClip;
	private var r:Number;
	private var glowing:Boolean;
	function Spark(mc2) {
		mc = mc2;
		spark = mc.createEmptyMovieClip("spark", 1);
	}
	private function addPath(x:Number, y:Number) {
		if (this.paths.length>3) {
			this.paths.pop();
		}
		this.paths.unshift(new Point(x, y));
	}
	private function drawPath() {
		path = this.spark.createEmptyMovieClip("path", 2);
		this.path.lineStyle(1, ColorTransition.rgbToHex(0xFF, 0xCC-random(100), 0), 100);
		this.path.moveTo(this.x, this.y);
		for (i=0; i<this.paths.length; ++i) {
			this.path.lineTo(this.paths[i].x-this.spark._x, this.paths[i].y-this.spark._y);
		}
	}
	private function move() {
		if (this.xspd != undefined) {
			this.x += this.xspd;
			this.y += this.yspd;
			this.yspd += .7;
			if (this.x>275+Stage.width/2 || this.x<275-Stage.width/2) {
				this.xspd *= -.8;
				this.x = 275+Stage.width/2*(this.x>275+Stage.width/2)-Stage.width/2*(this.x<275-Stage.width/2);
			}
			if (this.y>200+Stage.height/2) {
				this.yspd *= -.6*Math.random();
				this.y = 200+Stage.height/2;
			}
			this.spark._alpha -= 3;
			if (this.spark._alpha<0) {
				this.spark.removeMovieClip();
			}
		} else {
			this.x += Math.cos(this.r*Math.PI/180)*this.spd;
			this.y += Math.sin(this.r*Math.PI/180)*this.spd;
			this.spd *= .9;
			if (this.x>275+Stage.width/2 || this.x<275-Stage.width/2) {
				this.r *= -1;
				this.r += 180;
				this.x = 275+Stage.width/2*(this.x>275+Stage.width/2)-Stage.width/2*(this.x<275-Stage.width/2);
			}
			if (this.y>200+Stage.height/2 || this.y<200-Stage.height/2) {
				this.r *= -1;
				this.y = 200+Stage.height/2*(this.y>200+Stage.height/2)-Stage.height/2*(this.y<200-Stage.height/2);
			}
			this.r += random(30)-random(30);
			if (this.spd<.4) {
				this.spark.removeMovieClip();
			}
		}
		this.addPath(this.x-this.spark._x, this.y-this.spark._y);
		this.drawPath();
	}
	public function init(x:Number, y:Number, glowing:Boolean):Void {
		this.x = x;
		this.y = y;
		this.paths = new Array();
		spark._rotation = random(360);
		rand = random(10)+2;
		if (random(100)<=80) {
			this.xspd = Math.cos(spark._rotation*Math.PI/180)*rand;
			this.yspd = Math.sin(spark._rotation*Math.PI/180)*rand;
		} else {
			this.r = spark._rotation;
			this.spd = rand*3;
		}
		this.glowing = glowing;
		if (this.glowing == true) {
			this.spark.filters = [new GlowFilter(0xFFFFFF,1,8,8,1)];
		}
		spark._rotation = 0;
		spark.parent = this;
		spark.onEnterFrame = function() {
			this.parent.move();
		};
		spark.onUnload = function() {
			this._parent.removeMovieClip();
			delete this.parent;
		};
	}
}

ColorTransition.as

class ColorTransition extends Color {
	private var co:Color;
	private var v:Object
	function ColorTransition(target:MovieClip) {
		co = new Color(target);
	}
	public function setRGB(hex:Number) {
		this.co.setRGB(hex);
	}
	public function getRGB():Number {
		return this.co.getRGB();
	}
	public function getTransform():Object {
		return this.co.getTransform();
	}
	public function setTransform(trans:Object) {
		this.co.setTransform(trans);
	}
	public static function rgbToHex(r, g, b):Number {
		return (r << 16 | g << 8 | b);
	}
	public static function hexToRGB(hex):Object {
		var red = hex >> 16;
		var grnBlu = hex-(red << 16);
		var grn = grnBlu >> 8;
		var blu = grnBlu-(grn << 8);
		return ({r:red, g:grn, b:blu});
	}
}

More To Follow In Next Post....

[LesPaulPlayer]

Retro.as

import flash.geom.Point;
import flash.filters.GlowFilter;
class Retro extends MovieClip {
	private var retro:MovieClip;
	private var rand:Number;
	private var i:Number;
	private var mc:MovieClip;
	private var x:Number;
	private var y:Number;
	private var r:Number;
	private var paths:Array;
	private var spd:Number;
	private var path:MovieClip;
	private var sC:Number;
	private var frame:Number;
	private var frames:Number;
	private var sRGB:Object;
	private var cRGB:Object;
	private var eRGB:Object;
	private var rAdd:Number;
	private var bAdd:Number;
	private var gAdd:Number;
	private var glow:Boolean
	function Retro(mc2) {
		mc = mc2;
		retro = mc.createEmptyMovieClip("retro", 1);
	}
	private function addPath(x:Number, y:Number) {
		if (this.paths.length>4) {
			this.paths.pop();
		}
		this.paths.unshift(new Point(x, y));
	}
	private function move() {
		this.addPath(this.x-this.retro._x, this.y-this.retro._y);
		this.drawPath();
		this.x += Math.cos(this.r*Math.PI/180)*this.spd;
		this.y += Math.sin(this.r*Math.PI/180)*this.spd;
		this.spd *= .9;
		if (this.x>275+Stage.width/2 || this.x<275-Stage.width/2) {
			this.r *= -1;
			this.r += 180;
			this.x = 275+Stage.width/2*(this.x>275+Stage.width/2)-Stage.width/2*(this.x<275-Stage.width/2);
		}
		if (this.y>200+Stage.height/2 || this.y<200-Stage.height/2) {
			this.r *= -1;
			this.y = 200+Stage.height/2*(this.y>200+Stage.height/2)-Stage.height/2*(this.y<200-Stage.height/2);
		}
		if (this.spd<.2) {
			this.retro.removeMovieClip();
		}
	}
	private function drawPath() {
		if (this.frame<this.frames) {
			this.cRGB.r += this.rAdd;
			this.cRGB.g += this.gAdd;
			this.cRGB.b += this.bAdd;
			if (this.glow) {
				this.retro.filters = [new GlowFilter(ColorTransition.rgbToHex(this.cRGB.r, this.cRGB.g, this.cRGB.b))];
			}
			this.frame++;
		}
		path = this.retro.createEmptyMovieClip("path", 2);
		this.path.lineStyle(1, ColorTransition.rgbToHex(this.cRGB.r, this.cRGB.g, this.cRGB.b), 100);
		this.path.moveTo(this.x, this.y);
		for (i=0; i<this.paths.length; ++i) {
			this.path.lineTo(this.paths[i].x-this.retro._x, this.paths[i].y-this.retro._y);
		}
	}
	public function init(x:Number, y:Number, sC:Number, eC:Number, transTime:Number, glow:Boolean):Void {
		this.sRGB = ColorTransition.hexToRGB(sC);
		this.cRGB = sRGB;
		this.eRGB = ColorTransition.hexToRGB(eC);
		this.frames = transTime;
		this.frame = 0;
		this.rAdd = (eRGB.r-sRGB.r)/frames;
		this.gAdd = (eRGB.g-sRGB.g)/frames;
		this.bAdd = (eRGB.b-sRGB.b)/frames;
		this.x = x;
		this.y = y;
		this.paths = new Array();
		rand = random(10)+2;
		this.r = random(360);
		this.spd = rand*3;
		if (glow) {
			this.glow = glow;
			retro.filters = [new GlowFilter(sC)];
		} else {
			this.glow = false;
		}
		retro.parent = this;
		retro.onEnterFrame = function() {
			this.parent.move();
		};
		retro.onUnload = function() {
			this._parent.removeMovieClip();
			delete this.parent;
		};
	}
}

Instructions for using:

Make sure all files are in the same directory, including the .fla

to create a spark:

var s:Spark = new Spark(createEmptyMovieClip("s"+depth,depth))
s.init(x:Number,y:Number,glow:Boolean)

x defines the starting xcoordinate of the spark
y defines the starting y coordinate of the spark
glow defines weather or not the spark has a glow [default = false]

to create static:

var s:Static = new Static(createEmptyMovieClip("s"+depth,depth))
s.init(x:Number,y:Number,glow:GlowFilter)

x defines the starting xcoordinate of the static
y defines the starting y coordinate of the static
glow defines the glowfilter applied to the static [default = new GlowFilter(0x9900CC,1,16,16,6)]

to create retro:

var r:Retro = new Retro(createEmptyMovieClip("r"+depth,depth))
r.init(x:Number,y:Number,startColor:Number,endColor:Number,transitionTime:Number,glow:Boolean)

x defines the starting xcoordinate of the retro
y defines the starting y coordinate of the retro
startColor is the hexValue for the initial color of the particle
endColor is the hexValue for the final color of the particle
transitionTime is the amount of frames it takes for the particle to fade from startColor to endColor
glow is whether or not the particle glows [default = false]

Thats all. Visit this blog for more information and updates. Thanks!

[LesPaulPlayer]

Here is an example of the optimized version

[kalmana]

Will this stuff work with MX? i tried it earlier but i couldn't get it to work.

[LesPaulPlayer]

no it wont work because it uses filters. Take out the filters and should work. The static effect wont look good though.

[kalmana]

At 2/17/08 09:45 PM, LesPaulPlayer wrote: no it wont work because it uses filters. Take out the filters and should work. The static effect wont look good though.

meh, ive been planning on upgrading to Flash 8 soon anyways. So ill probably tuck the AS away untill i upgrade

[DarkRedemption]

Gust took issue with mine as well, although I'm not certain how or why...mine are all OOP already.

But nice optimization anyway, should run a little faster now.

[GustTheASGuy]

I did? Well anyway awesome. :D

[BasV]

100% OOP ? Not if you use this.parent. Use events. using parent or root properties is very un-OOP

[GustTheASGuy]

While that's a point I don't see why one would advocate OOP for any reason. :P

AS3 port.
http://www.ucuaah.com/up/uploads/effects .rar
Use MXMLC to compile Main.as, and you'll probably die if you want to play with it unless you get FCSH and Flashdevelop to integrate them (project file included).

[DarkRedemption]

At 2/18/08 09:03 AM, B-Mantis wrote: 100% OOP ? Not if you use this.parent. Use events. using parent or root properties is very un-OOP

I'd say that, while that's a valid point, its better to adapt to the language you're using and the effect you want to achieve rather than try to maintain 100% OOP structure.

[LesPaulPlayer]

At 2/18/08 09:39 AM, GustTheASGuy wrote: While that's a point I don't see why one would advocate OOP for any reason. :P

AS3 port.
http://www.ucuaah.com/up/uploads/effects .rar
Use MXMLC to compile Main.as, and you'll probably die if you want to play with it unless you get FCSH and Flashdevelop to integrate them (project file included).

Thanks Gust.

Ok, its at least 98% OOP. And it runs, well in fact, so no big deal.

[GustTheASGuy]

Nah it's about 20% OOP. The AS3 version would be 50%. It's almost a good thing.

[ProfessorFlash]

Very usefull. Good job.

[EKublai]

haha this is most definitely my fault for not knowing AS, but the thing doesn't work for me when I put the

var s:Spark = new Spark(createEmptyMovieClip("s"+depth,dep th))
s.init(x:Number,y:Number,glow:Boolean)

it keeps saying the a ")" or "," is expected. haha. otherwise everything's in order

[EKublai]

Finally it worked out for me. Thanks Les, once I modify this a bit, it'll have a perfect place in my upcoming flash. You'll get due credit of course. Thanks a bunch!

[EKublai]

At 2/24/08 01:43 AM, EKublai wrote: Finally it worked out for me. Thanks Les, once I modify this a bit, it'll have a perfect place in my upcoming flash. You'll get due credit of course. Thanks a bunch!

sorry bout the triple post, but I was just wondering, since I don't get the parameters for GlowFilter();, How would I a) change the quality of the glow and b) change the intensity and blur? Or can u?

[GustTheASGuy]

Hit f1.

[Jimp]

That spark effect would look shit hot in a shooter when you shoot walls/metal.

Awesome, these look cool!

[daperson1]

Very impressive work.

[EKublai]

At 2/24/08 05:04 AM, GustTheASGuy wrote: Hit f1.

That's not fair. I used it before and it wouldn't give me jack, now you say to just hit f1 and it gives me a entirely new help section? How do you do it Gust?

[GustTheASGuy]

Browse to it manually, AS reference/classes/flash.display.GlowFilt er. Noone can remember that many params.