APE and blur filters

1 view
Skip to first unread message

olivier

unread,
Mar 27, 2008, 10:41:11 AM3/27/08
to APE General
Hi all,

First, please excuse me for my english...

Second, thanks a lot Alec for your work that make coding a bit less
frustrating for graphic designer like myself.

I am quite a noob with AS3, its my first attempt to work with APE, and
I have a little problem:

I try to make some simple balls (wheel particles) bouncing around the
screen. In each of these balls, I load a different image, and I would
like the image to be blured on rollOut and "focused" on rollOver

I put some walls, put some wheel particles, load images through xml,
pass the image path to a class called "Billes" that create a round
mask over it and the mouseEvent handlers for the blur, and then I
attach the images to the particles via setDisplay. It quite works...

My results so far:
http://www.binocle.ch/test/binocle_billes/binocle_billes.html
http://www.binocle.ch/test/binocle_billes/binocle_billes_blur.html

You see the problem...? The blur filter seems to slow down everything
dramatically... and I dont have any idea to fix that.

Has anybody an idea how to make this better?

Thank you in advance for your time and your help

My Billes class:
package
{
import flash.display.Sprite;
import flash.display.Loader;
import gs.TweenFilterLite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLRequest;

public class Bille extends Sprite
{
public var taille:Number=Math.random() * 50 + 50;

private var chargeur:Loader;
public function Bille(image:String)
{
chargeur = new Loader();
chargeur.load(new URLRequest(image));

chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,imageChargee);

function imageChargee(event:Event):void
{

chargeur.contentLoaderInfo.removeEventListener(Event.COMPLETE,imageChargee);

addChild(chargeur);
chargeur.x =-chargeur.width/2;
chargeur.y = -chargeur.height/2;

var masque:Sprite = new Sprite();
masque.graphics.beginFill(0x000000);
masque.graphics.drawCircle(0, 0, taille)

addChild(masque);
chargeur.mask = masque;

addEventListener(MouseEvent.MOUSE_OVER, onRollover);
addEventListener(MouseEvent.MOUSE_OUT, onRollout);
//TweenFilterLite.to(chargeur.content, .5, {type:"blur", blurX:20,
blurY:20});
}
}
private function onRollover(mevt:MouseEvent):void
{
//TweenFilterLite.to(chargeur.content, .5, {type:"blur", blurX:0,
blurY:0});
}
private function onRollout(mevt:MouseEvent):void
{
//TweenFilterLite.to(chargeur.content, .5, {type:"blur", blurX:20,
blurY:20});
}
}
}


My document class;
package
{
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Stage;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Loader;
import org.cove.ape.*;
import gs.TweenFilterLite;
import gs.TweenLite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.xml.*;

public class binocle_billes_2 extends MovieClip
{
private static var GRAVITY:Number=0.5;
private static var MAX_PARTICLES:int;

private static var SW:Number;
private static var SH:Number;

private var _particles:Array=new Array;
private var _world:Group;

private var left:RectangleParticle;
private var right:RectangleParticle;
private var bottom:RectangleParticle;
private var top:RectangleParticle;

private var epaisseur:Number=100;
private var demiepaisseur:Number=epaisseur / 2;

private var _binocle_data:XML;
private var _binocle_projets:XMLList;
private var _binocle_firstImage:Array = new Array();

public function binocle_billes_2()
{
init();
}
//
private function init():void
{
//définit les paramètres d'alignement
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;

//ajoute un écouteur à la scène pour gérer le redimensionnement
stage.addEventListener(Event.RESIZE,replaceMurs);

SH=stage.stageHeight;
SW=stage.stageWidth;

APEngine.init(1/4);
APEngine.container=this;
APEngine.addMasslessForce(new Vector(0,GRAVITY));

_world=new Group(true);
APEngine.addGroup(_world);

gereXML("binocle_projets.xml");
ajouteMurs();

addEventListener(Event.ENTER_FRAME,runApe);
}
private function gereXML(donnees:String):void
{
var chargeurXML:URLLoader=new URLLoader;
chargeurXML.dataFormat=URLLoaderDataFormat.TEXT;
chargeurXML.addEventListener(Event.COMPLETE,xmlLoaded);
chargeurXML.load(new URLRequest(donnees));
}
private function xmlLoaded(event:Event):void
{
try
{
_binocle_data=new XML(event.target.data);
_binocle_projets=_binocle_data.children();

for (var i:uint; i < _binocle_projets.length(); i++)
{
ajouteBilles(_binocle_projets[i].images.image[0]);
}
}
catch (e:TypeError)
{
trace(e.message);
}
}
private function ajouteMurs():void
{
left=new RectangleParticle(-epaisseur / 2, SH / 2,epaisseur,SH,
0,true,1,.5);
right=new RectangleParticle(SW + epaisseur / 2,SH / 2,epaisseur,SH,
0,true,1,.5);
bottom=new RectangleParticle(SW / 2,SH + demiepaisseur,SW,epaisseur,
0,true,1,.4,.2);
left.visible = right.visible = bottom.visible = false;
_world.addParticle(left);
_world.addParticle(right);
_world.addParticle(bottom);
}
private function replaceMurs(event:Event):void
{
SH=stage.stageHeight;
SW=stage.stageWidth;

left.height = SH;
left.px = -epaisseur / 2;
left.py = SH/2;
left.paint();

right.height = SH;
right.px = SW + demiepaisseur;
right.py = SH/2;
right.paint();

bottom.width = SW;
bottom.px = SW/2;
bottom.py = SH + demiepaisseur;
bottom.paint();
}
private function ajouteBilles(image:String):void
{
var image:String = image;
var bille:Bille = new Bille(image);

var posX:Number=Math.random() * SW;
var posY:Number=-300 - Math.random() * 300;
var taille:Number= bille.taille;

var wP:WheelParticle = new
WheelParticle(posX,posY,taille,false,taille,.3, 0, .5);
wP.setDisplay( bille );

_world.addParticle(wP);
_particles.push(wP);
}
private function runApe(event:Event):void
{
APEngine.step();
APEngine.paint();
}
}
}

Clark Stevenson

unread,
Mar 27, 2008, 11:57:25 AM3/27/08
to ape-g...@googlegroups.com

Im not sure if it is possible to do this without slowdown.

A full screen APE world running in the browser incorporating bitmap masks and tweening of the blur filter just seems like a massive hit to performance. My old laptop which is 18 months old struggles with tweening blur filters at full screen so even if you manage to optimise your current project, many clients out there will still see a performance issue.

I may be wrong on this but i just feel tweening blur filters while running a physics engine at (x) frames per second is beyond the current realisitc scope of the flash player and its average user hardware base.

Fell free to abuse me if i am incorrect on this issue!

Cheers,

Clark.

Ingmars

unread,
Mar 27, 2008, 12:13:31 PM3/27/08
to ape-g...@googlegroups.com
Hello,

Flash filters are by default very performance-hungry animals. Use them
wisely.

But i've noticed, that this is not very dependent on processing power.
It is more an flash player issue (as Clark said). Oliviers example on
intel quad-core processor performs at about 10 fps, while task manager
shows ~30-40% processor load.

Solution to this could be using pre-blurred images with quick alpha
fades between sharp/blurred states of the image.

k.


Thursday, March 27, 2008, 5:57:24 PM, you wrote:


CS> Im not sure if it is possible to do this without slowdown.

CS> A full screen APE world running in the browser incorporating
CS> bitmap masks and tweening of the blur filter just seems like a
CS> massive hit to performance. My old laptop which is 18 months old
CS> struggles with tweening blur filters at full screen so even if you
CS> manage to optimise your current project, many clients out there
CS> will still see a performance issue.

CS> I may be wrong on this but i just feel tweening blur filters
CS> while running a physics engine at (x) frames per second is beyond
CS> the current realisitc scope of the flash player and its average
CS> user hardware base.

CS> Fell free to abuse me if i am incorrect on this issue!

CS> Cheers,

CS> Clark.


CS> On 27/03/2008, olivier <oli...@binocle.ch> wrote:
CS> Hi all,

CS> First, please excuse me for my english...

CS> Second, thanks a lot Alec for your work that make coding a bit less
CS> frustrating for graphic designer like myself.

CS> I am quite a noob with AS3, its my first attempt to work with APE, and
CS> I have a little problem:

CS> I try to make some simple balls (wheel particles) bouncing around the
CS> screen. In each of these balls, I load a different image, and I would
CS> like the image to be blured on rollOut and "focused" on rollOver

CS> I put some walls, put some wheel particles, load images through xml,
CS> pass the image path to a class called "Billes" that create a round
CS> mask over it and the mouseEvent handlers for the blur, and then I
CS> attach the images to the particles via setDisplay. It quite works...

CS> My results so far:
CS> http://www.binocle.ch/test/binocle_billes/binocle_billes.html
CS>
CS> http://www.binocle.ch/test/binocle_billes/binocle_billes_blur.html

CS> You see the problem...? The blur filter seems to slow down everything
CS> dramatically... and I dont have any idea to fix that.

CS> Has anybody an idea how to make this better?

CS> Thank you in advance for your time and your help

CS> My Billes class:
CS> package
CS> {
CS>         import flash.display.Sprite;
CS>         import flash.display.Loader;
CS>         import gs.TweenFilterLite;
CS>         import flash.events.MouseEvent;
CS>         import flash.events.Event;
CS>         import flash.net.URLRequest;

CS>         public class Bille extends Sprite
CS>         {
CS>                 public var taille:Number=Math.random() * 50 + 50;

CS>                 private var chargeur:Loader;
CS>                 public function Bille(image:String)
CS>                 {
CS>                         chargeur = new Loader();
CS>                         chargeur.load(new URLRequest(image));

CS>
CS> chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,imageChargee);

CS>                         function imageChargee(event:Event):void
CS>                         {

CS>
CS> chargeur.contentLoaderInfo.removeEventListener(Event.COMPLETE,imageChargee);

CS>                                 addChild(chargeur);
CS>                                 chargeur.x =-chargeur.width/2;
CS>                                 chargeur.y = -chargeur.height/2;

CS>                                 var masque:Sprite = new Sprite();
CS>                                 masque.graphics.beginFill(0x000000);
CS>                                 masque.graphics.drawCircle(0, 0, taille)

CS>                                 addChild(masque);
CS>                                 chargeur.mask = masque;

CS>                                 addEventListener(MouseEvent.MOUSE_OVER, onRollover);
CS>                                 addEventListener(MouseEvent.MOUSE_OUT, onRollout);
CS>                                 //TweenFilterLite.to(chargeur.content, .5, {type:"blur", blurX:20,
CS> blurY:20});
CS>                         }
CS>                 }
CS>                 private function onRollover(mevt:MouseEvent):void
CS>                 {
CS>                         //TweenFilterLite.to(chargeur.content, .5, {type:"blur", blurX:0,
CS> blurY:0});
CS>                 }
CS>                 private function onRollout(mevt:MouseEvent):void
CS>                 {
CS>                         //TweenFilterLite.to(chargeur.content, .5, {type:"blur", blurX:20,
CS> blurY:20});
CS>                 }
CS>         }
CS> }


CS> My document class;
CS> package
CS> {
CS>         import flash.display.StageScaleMode;
CS>         import flash.display.StageAlign;
CS>         import flash.display.Stage;
CS>         import flash.display.MovieClip;
CS>         import flash.display.Sprite;
CS>         import flash.display.Loader;
CS>         import org.cove.ape.*;
CS>         import gs.TweenFilterLite;
CS>         import gs.TweenLite;
CS>         import flash.events.MouseEvent;
CS>         import flash.events.Event;
CS>         import flash.net.URLRequest;
CS>         import flash.net.URLLoader;
CS>         import flash.net.URLLoaderDataFormat;
CS>         import flash.xml.*;

CS>         public class binocle_billes_2 extends MovieClip
CS>         {
CS>                 private static  var GRAVITY:Number=0.5;
CS>                 private static  var MAX_PARTICLES:int;

CS>                 private static  var SW:Number;
CS>                 private static  var SH:Number;

CS>                 private var _particles:Array=new Array;
CS>                 private var _world:Group;

CS>                 private var left:RectangleParticle;
CS>                 private var right:RectangleParticle;
CS>                 private var bottom:RectangleParticle;
CS>                 private var top:RectangleParticle;

CS>                 private var epaisseur:Number=100;
CS>                 private var demiepaisseur:Number=epaisseur / 2;

CS>                 private var _binocle_data:XML;
CS>                 private var _binocle_projets:XMLList;
CS>                 private var _binocle_firstImage:Array = new Array();

CS>                 public function binocle_billes_2()
CS>                 {
CS>                         init();
CS>                 }
CS>                 //
CS>                 private function init():void
CS>                 {
CS>                         //définit les paramètres d #39;alignement
CS>                         stage.scaleMode=StageScaleMode.NO_SCALE;
CS>                         stage.align=StageAlign.TOP_LEFT;

CS>                         //ajoute un écouteur à la scène pour gérer le redimensionnement
CS>                         stage.addEventListener(Event.RESIZE,replaceMurs);

CS>                         SH=stage.stageHeight;
CS>                         SW=stage.stageWidth;

CS>                         APEngine.init(1/4);
CS>                         APEngine.container=this;
CS>                         APEngine.addMasslessForce(new Vector(0,GRAVITY));

CS>                         _world=new Group(true);
CS>                         APEngine.addGroup(_world);

CS>                         gereXML("binocle_projets.xml");
CS>                         ajouteMurs();

CS>                         addEventListener(Event.ENTER_FRAME,runApe);
CS>                 }
CS>                 private function gereXML(donnees:String):void
CS>                 {
CS>                         var chargeurXML:URLLoader=new URLLoader;
CS>                         chargeurXML.dataFormat=URLLoaderDataFormat.TEXT;
CS>                         chargeurXML.addEventListener(Event.COMPLETE,xmlLoaded);
CS>                         chargeurXML.load(new URLRequest(donnees));
CS>                 }
CS>                 private function xmlLoaded(event:Event):void
CS>                 {
CS>                         try
CS>                         {
CS>                                 _binocle_data=new XML(event.target.data);
CS>                                 _binocle_projets=_binocle_data.children();

CS>                                 for (var i:uint; i <
CS> _binocle_projets.length(); i++)
CS>                                 {
CS>                                         ajouteBilles(_binocle_projets[i].images.image[0]);
CS>                                 }
CS>                         }
CS>                         catch (e:TypeError)
CS>                         {
CS>                                 trace(e.message);
CS>                         }
CS>                 }
CS>                 private function ajouteMurs():void
CS>                 {
CS>                         left=new RectangleParticle(-epaisseur / 2, SH / 2,epaisseur,SH,
CS> 0,true,1,.5);
CS>                         right=new RectangleParticle(SW +
CS> epaisseur / 2,SH / 2,epaisseur,SH,
CS> 0,true,1,.5);
CS>                         bottom=new RectangleParticle(SW /
CS> 2,SH + demiepaisseur,SW,epaisseur,
CS> 0,true,1,.4,.2);
CS>                         left.visible = right.visible = bottom.visible = false;
CS>                         _world.addParticle(left);
CS>                         _world.addParticle(right);
CS>                         _world.addParticle(bottom);
CS>                 }
CS>                 private function replaceMurs(event:Event):void
CS>                 {
CS>                         SH=stage.stageHeight;
CS>                         SW=stage.stageWidth;

CS>                         left.height = SH;
CS>                         left.px = -epaisseur / 2;
CS>                         left.py = SH/2;
CS>                         left.paint();

CS>                         right.height = SH;
CS>                         right.px = SW + demiepaisseur;
CS>                         right.py = SH/2;
CS>                         right.paint();

CS>                         bottom.width = SW;
CS>                         bottom.px = SW/2;
CS>                         bottom.py = SH + demiepaisseur;
CS>                         bottom.paint();
CS>                 }
CS>                 private function ajouteBilles(image:String):void
CS>                 {
CS>                         var image:String = image;
CS>                         var bille:Bille = new Bille(image);

CS>                         var posX:Number=Math.random() * SW;
CS>                         var posY:Number=-300 - Math.random() * 300;
CS>                         var taille:Number= bille.taille;

CS>                         var wP:WheelParticle = new
CS> WheelParticle(posX,posY,taille,false,taille,.3, 0, .5);
CS>                         wP.setDisplay( bille );

CS>                         _world.addParticle(wP);
CS>                         _particles.push(wP);
CS>                 }
CS>                 private function runApe(event:Event):void
CS>                 {
CS>                         APEngine.step();
CS>                         APEngine.paint();
CS>                 }
CS>         }
CS> }

CS>


Olivier Murith

unread,
Mar 27, 2008, 12:19:53 PM3/27/08
to ape-g...@googlegroups.com
mmmh... seems like its just the answer i didnt want to hear... anyone else? ^__^

It seems that its not especially the tweening of the blur, but yet the blur itself that cause the project to slow...

I wonder if I could try to bypass the problem with some kind of  bitmap.draw that would perhaps "freeze" the blur instead of recalculate it every time? Apply the blur, then draw a bitmpadata with the picture; on rollOver remove the blur, re-draw etc... What do you think, it could works?

Thanks,

Olivier


Le 27 mars 08 à 16:57, Clark Stevenson a écrit :

Eric

unread,
Apr 1, 2008, 2:01:30 PM4/1/08
to APE General
That's perhaps the fastest way to do it, yes. Switching between
cached bitmaps is extremely fast in Flash. Much faster than using the
built in vector renderer. You could possibly make your own animation
by applying different levels of blur and using the copyPixels
functionality of the BitmapData class to copy frames into your
animation bitmap. You might as well make your animation with some
other program and just write your own "animateBitmap" function to chop
up a bitmap and cycle through the subparts. Not hard and very fast.
> ...
>
> read more »

Mike Parisi

unread,
Apr 1, 2008, 2:12:34 PM4/1/08
to ape-g...@googlegroups.com
One way you could achieve a blur effect would be to set a bitmap.bitmapData to constantly draw your root scene, then apply the blur filter to bitmap.bitmapData.applyFilter.

check it out: http://www.gotoandlearn.com/player.php?id=63

much faster than applying it to individual objects. you wouldnt be able to blur based on individual velocity though...
Reply all
Reply to author
Forward
0 new messages