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>