Flint Particle System Forum - Snowflakes Reacting to Mouse Position

Snowflakes Reacting to Mouse Position

2008-11-21T20:24:11+00:00

Hi. I'm extremely new to ActionScript and I've only been using Flint for a couple hours. Great system by the way. I followed the tutorial for the snow effect. What I want to do is have the snow particles interact somehow with the mouse position. So, if I were to mouse over the swf, the snow flakes would bounce off the mouse position. I tried MouseAntiGravity as follows:

emitter.addAction( new MouseAntiGravity (5, renderer));

This threw a bunch of errors like the one that follows:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at org.flintparticles.twoD.actions::MouseGravity/update()
at org.flintparticles.common.emitters::Emitter/update()
at org.flintparticles.common.emitters::Emitter/updateEventListener()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at org.flintparticles.common.utils::FrameUpdater/frameUpdate()

Any suggestions?

Also, if I wanted to add an emitter to the mouse point for snow particles would that be possible. Thanks in advance for any help.

Snowflakes Reacting to Mouse Position

2008-11-21T21:07:46+00:00

And if I wanted to add a layer on top of the snow particles, like in the example posted on the site with the tree branches above the snow particles, how would I go about doing that? I looked through the example code that I could download, but I'm so unfamiliar with ActionScript, it made no sense. Sorry for being such a pain. The company that I work for has asked for a project in Flash, and though I've worked with several other programming languages before, I've never really worked with ActionScript. Thanks in advance for any help.

Snowflakes Reacting to Mouse Position

2008-11-23T07:08:23+00:00

Use setChildIndex() for layering in Actionscript, for example setChildIndex(renderer, 0); on your main class would make the particle renderer the last layer and put everything else above it. For your first problem it's not because of flint, there is a mistake in your code, your renderer is not initialized when you add your action, that's where the error would be. Here is the modified Snowfall example to make it work.

var emitter:Emitter2D = new Emitter2D();
var renderer:DisplayObjectRenderer = new DisplayObjectRenderer();

emitter.counter = new Steady( 150 );

emitter.addInitializer( new ImageClass( RadialDot, 2 ) );
emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 605, -5 ) ) ) );
emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 65 ) ) ) );
emitter.addInitializer( new ScaleImageInit( 0.75, 2 ) );

emitter.addAction( new Move() );
emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 620, 420 ), true ) );
emitter.addAction( new RandomDrift( 20, 20 ) );
emitter.addAction( new MouseAntiGravity (5, renderer));

renderer.addEmitter( emitter );
addChild( renderer );

emitter.start();
emitter.runAhead( 10 );

Snowflakes Reacting to Mouse Position

2008-11-24T14:07:30+00:00

Thanks alphagod. I tried the MouseAntiGravity and unfortunately it wasn't quite the effect I was thinking it might give. Would there be a way to attach an emitter to the mouse point so that when the mouse enters the frame, the emitter gives off a small number of snow particles around the mouse (this number, I obviously could tweak to my liking) and then when the mouse rolls outside the edge of the movie, the emitter dies but the particles it gave off are still on the screen until they die? Just for clarity, my idea here is to have two emitters. One static that covers the whole stage as I already have. And then a second that would attach to the mouse point but when the mouse rolls outside the movie (this swf will be embedded in a webpage that the user will need to interact with a little) I don't want the emitter just sitting at the edge of the stage spewing particles like in the sparkler example. I want the emitter attached to the mouse point to die and then be recreated when the mouse rolls back over the movie.

And the layering works perfectly. That was exactly the effect I was looking for, but I modified the example you gave to set the layer position to 1 instead of 0 because I have a background that I want the snow to be in front of and then another little image that i want in front of the snow.

Thank you anyone for any help that can be provided with attaching the emitter to mouse point as described above and I'm glad I've chosen to use Flint because this is a very helpful community of Flash developers.

Snowflakes Reacting to Mouse Position

2008-11-24T16:21:03+00:00

Okay, using the following code:

this.addEventListener(MouseEvent.MOUSE_OVER, callSnowFall2);

function callSnowFall2(evt:MouseEvent):void {

var emitter2:Emitter2D = new Emitter2D();
var renderer2:DisplayObjectRenderer = new DisplayObjectRenderer();

emitter2.counter = new Steady( 150 );

emitter2.addInitializer( new ImageClass( RadialDot, 2 ) );
emitter2.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 765, -5 ) ) ) );
emitter2.addInitializer( new Velocity( new PointZone( new Point( 0, 65 ) ) ) );
emitter2.addInitializer( new ScaleImageInit( 0.75, 1.5 ) );

emitter2.addAction( new Move() );
emitter2.addAction( new DeathZone( new RectangleZone( -10, -10, 780, 600 ), true ) );
emitter2.addAction( new RandomDrift( 100, 20 ) );

renderer2.addEmitter( emitter2 );
addChild( renderer2 );
setChildIndex(renderer2, 1);

emitter2.start();
emitter2.runAhead( 10 );

}

I've managed to create a new emitter when the user mouses over the stage. What I can't figure out how to do is dispose of the emitter once the user mouses out of the movie. I've tried a similar tactic listening for the mouse out event, but the function I wrote for that event wouldn't allow me to access emitter2 to dispose of it. I'm sure there has to be an easier way to do this within the Flint system, but I am really lost with ActionScript. I'd also like to attach the emitter to the mouse instead of a fixed point above the stage. Any help with this would be greatly appreciated.

Snowflakes Reacting to Mouse Position

2008-11-24T19:23:23+00:00

Adding this code to the sparkler example makes it behave as you want it too. You should be able to convert this to your own project.

stage.addEventListener( Event.MOUSE_LEAVE, leave );
stage.addEventListener( MouseEvent.MOUSE_MOVE, enter );

private function leave( ev:Event ):void
{
	emitter.counter.stop();
}
private function enter( ev:Event ):void
{
	emitter.counter.resume();
}

Snowflakes Reacting to Mouse Position

2008-11-24T20:14:26+00:00

Fantastic Richard. Thank you for the help. I'm learning more about ActionScript as a result of this project than I ever thought I might want to. It's not too bad though. Maybe I should really take the time to learn it well and then I can put tools like Flint to better use. Really great job though.

Snowflakes Reacting to Mouse Position

2009-01-08T21:18:50+00:00

Using the MouseAntiGravity is very similar to what I want to do...except this inverses the direction of the particles at a constant rate. Is there a way to have more of a boundary effect on the mouse with very little bounce (as if the particles would simply be sliding off the mouse area).

I tried TurnAwayFromMouse but that was even more dramatic.
I'm reading into BoundingBox, Bounce...and Gravity Well--but Gravity Well would be more the opposite of what I want to do.

I guess what I'm trying to say is have MouseAntiGravity only effect the particle until it was far enough away from the mouse that it would revert back to it's normal trajectory.

Snowflakes Reacting to Mouse Position

2009-01-08T23:06:35+00:00

I'm thinking if you extend MouseAntiGravity and overwrite that update function in MouseGravity to something like :

if(d < 30) {
p.velX += x * factor;
p.velY += y * factor;
}
else {
continue doing what you were doing
}

Problem is, how do I store that Velocity and RandomDrift and apply it again to the particles?

Snowflakes Reacting to Mouse Position

2009-01-09T08:13:10+00:00

The particle object contains a dictionary which you can use to hold any properties you want to store for later. To avoid clashing with properties from other actions, it's usually best to use the action itself as the key into the dictionary.

if(d < 30) {
    if( p.dictionary[this] == null ) {
        p.dictionary[this] = { velX: p.velX, velY: p.velY };
    }
    p.velX += x * factor;
    p.velY += y * factor;
} else {
    if( p.dictionary[this] != null ) {
        var obj:Object = p.dictionary[this];
        p.velX = obj.velX;
        p.velY = obj.velY;
        p.dictionary[this] = null;
    }
}