Flint Particle System Forum - Mouse Over Particle

Mouse Over Particle

2011-01-28T17:22:42+00:00

Hello,

Pretty new to the Flint particle system, but already a big fan. I see that with the new switch to the 3.0 library you got rid / changed the addExistingParticle. I have read the forum up and down for a solution to add a rollover / mouseover state to a particle... I am just curious is to what is the best / simplest way to do this with the new release?

I am aware that of: renderer.mouseEnabled = true;
renderer.mouseChildren = true;

Any advice, or sample code from someone who solved this would be awesome.
Many thanks in advance.

Mouse Over Particle

2011-01-28T22:51:08+00:00

Maybe you could create a custom action to add handlers to each particle, or possibly add a listener to the emitter and listen for either ParticleEvent.PARTICLE_ADDED or ParticleEvent.PARTICLE_CREATED depending on how you are adding your particles, then add your MOUSE_OVER event to the image of the particle. I suppose if the particle is being reused by a pool you could check with particle.image.hasEventListener(MouseEvent.MOUSE_OVER, yourHandlerName) to avoid trying to add it again.

I'm new to Flint also, I think Richard will know best when he's not too busy.

Mouse Over Particle

2011-01-30T21:46:35+00:00

Good call on the hasEventListener... I ran across this article http://graceblackburn.com/blog/2010/01/25/actionscript-3-using-haseventlistener/ that seems like it would get me close... but still throwing hours at this things... and very puzzled.

	
              public function startemitter1 () {
			var imgClassTag:ImageClass = new ImageClass( Bird );
			var zone:DiscZone = new DiscZone( new Point( 350, 350 ), 425 );
			
			var velocity:Velocity = new Velocity( zone );
			var move:Move = new Move();
				
			emitter1.counter = new Blast( 50);
			emitter1.addInitializer( imgClassTag );
			emitter1.addInitializer( new CollisionRadiusInit( 13 ) );
			emitter1.addInitializer(new MassInit(13));
			emitter1.x = 150;
			emitter1.y = 150;
			emitter1.addInitializer( velocity );
			emitter1.addAction( new Collide(.8) );
			emitter1.addAction( move );
			emitter1.addInitializer(new ScaleAllInit(.6, .9));
			emitter1.addAction( new MouseGravity(200,renderer1) );
			
			emitter1.addAction( new CollisionZone( new DiscZone( new Point( 350, 350 ), 250 ), .8 ) );
			emitter1.addAction( new CollisionZone( new DiscZone( new Point( 350, 350 ), 425 ), .8 ) );
			emitter1.addAction( new CollisionZone( new RectangleZone(-50, -50, 125, 125 ), .8 ) );
			emitter1.addAction( new CollisionZone( new RectangleZone(625, 0, 950, 125 ), .8 ) );
			emitter1.addAction( new CollisionZone( new RectangleZone(625, 625, 950, 950 ), .8 ) );
			emitter1.addAction( new CollisionZone( new RectangleZone(0, 625, 125, 950 ), .8 ) );
				
			particleouterholder.particleholder.addChild( renderer1 );
			renderer1.addEmitter( emitter1 );
			renderer1.mouseEnabled = true;
			renderer1.mouseChildren = true;

			emitter1.start();
			
			for(var i:uint; i				var particle:MovieClip = MovieClip(renderer1.getChildAt(i));
				particle.useHandCursor = true;
				particle.buttonMode = true;
				particle.addEventListener(MouseEvent.CLICK, clickHandler);
				particle.addEventListener(MouseEvent.MOUSE_OVER, overHandler)
			}
		}
		public function overHandler(event:MouseEvent):void{
			trace("OVER");
                        //this is where I am struggling, it tweens the renderer1 alpha, but i would just like to tween the individual particle... i tried a bunch of variations     
                        //with no luck
			TweenMax.to(renderer1, 0, {alpha: .1});
		}	
		protected function clickHandler(event:MouseEvent):void{
			trace("clicked: " + event.target.name)
		}

Mouse Over Particle

2011-01-31T00:01:50+00:00

I had similar issues when I first tried to adjust the alpha of a particle, I just put together this example that does work. I don't know if this is the best way but it is a start. I have created a class for the particle image and a custom action to add the listener, its called ClickAction which is probably not a good name for a rollover but you get the idea.

Obviously I am not doing any cleaning up here, you would want to listen for any particle that dies and remove the listener there. You should see some circle particles come out the emitter going South Easterly, roll over them to see a trace and a change in alpha.


package
{
	import flash.display.Sprite;
	import flash.geom.Point;
	
	import org.flintparticles.common.counters.Steady;
	import org.flintparticles.common.initializers.ImageClass;
	import org.flintparticles.twoD.actions.Move;
	import org.flintparticles.twoD.emitters.Emitter2D;
	import org.flintparticles.twoD.initializers.Velocity;
	import org.flintparticles.twoD.renderers.DisplayObjectRenderer;
	import org.flintparticles.twoD.zones.PointZone;
	
	public class Flint extends Sprite
	{
		public function Flint()
		{
			var renderer:DisplayObjectRenderer = new DisplayObjectRenderer();
			renderer.mouseChildren = true;
			renderer.mouseEnabled = true;
			addChild(renderer);
			
			var emitter:Emitter2D = new Emitter2D();
			emitter.counter = new Steady(1);
			emitter.addInitializer(new ImageClass(Circle, 15));
			
			var zone:PointZone = new PointZone(new Point(20, 20));
			emitter.addInitializer(new Velocity(zone));
			emitter.addAction(new Move());
			emitter.addAction(new ClickAction());
				
			renderer.addEmitter(emitter);
			emitter.x = emitter.y = 100;
			emitter.start();
		}

	}
}


package
{
	import flash.display.Sprite;
	
	public class Circle extends Sprite
	{
		protected var radius:int;
		
		public function Circle(radius:int=10)
		{
			this.radius = radius;
			draw();
		}
		
		// need to nest a sprite or alpha doesn't change
		protected function draw():void
		{
			var s:Sprite = new Sprite();
			s.graphics.beginFill(0x00CC00);
			s.graphics.drawCircle(radius*0.5,radius*0.5,radius);
			s.graphics.endFill();
			addChild(s);
		}
	}
}


package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	import org.flintparticles.common.actions.ActionBase;
	import org.flintparticles.common.emitters.Emitter;
	import org.flintparticles.common.particles.Particle;
	
	public class ClickAction extends ActionBase
	{
		public function ClickAction()
		{
			super();
		}
		
		override public function update(emitter:Emitter, particle:Particle, time:Number):void
		{
			var image:Sprite = particle.image as Sprite;
			if(!image.hasEventListener(MouseEvent.MOUSE_OVER))
			{
				image.buttonMode = true;
				image.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
			}
		}
		
		protected function mouseOverHandler(event:MouseEvent):void
		{
			trace("over: " + event.target);
			Sprite(event.target).alpha = 0.5;
		}
	}
}

Mouse Over Particle

2011-02-14T10:27:39+00:00

Hi

The old addExistingParticles() method is replaced with addParticles() and addParticle().

There is an initializer called MouseEventHandlers which may be useful. It adds listeners when the particle is created on the emitter and removes them when it dies.