I’ve been playing around with Bitmaps/BitmapData and came up with this. The main .as class loads an external image and then uses a Tiles.as class to break the image into rows/columns and then randomly position the tiles so that they can spring back into position.

The meat and potatoes of the work is done with the BitmapData.copyPixels() method:

bmpData.copyPixels( imgData, new Rectangle( c * w, r * h, w, h ), new Point() );

Where c and r stand for the current column/row.

The spring code is right out of Keith Peter’s Making Things Move for AS3 book, chapter 8, page 202. Thanks Kieth.

There’s a handful of features that I’d like to add to this just for funzies. If you think of something interesting tweak to add just comment and I’ll see about it.

And of course the source is well documented, mostly.

Note to FlexBuilder programmers: thanks for applying my code coloring preferences. But you missed the body:background-color. I had to manually add that. Otherwise it’s unreadable.

Read the introduction to the Particles class here.
Download Class files

setDustPerSec( countSec:Number )
Set the rate at which dust MovieClips are created. Initially the FramePerSecond is set at 33. So that is the maximum number of dust MovieClips that can be created per second. If you increase the FramePerSecond - with setFPS( n:Number), see below - then you can increase the dust per second up to that same rate.

turnDustOff()
Stops the production of dust.

taperDustRate( sec:Number, countSec:Number ):
Change the rate of dust production over a period of time. This means you can fade the dust production up or down. It’s important to remember that this changes the rate from it’s current value. When you initially create an instance of FairyDust the rate of production is 0. So if you try to fade to 0 over a period of time nothing will happen. You first have to set the rate of production using setDustPerSec() and then fade with taperDustRate().

setFPS( n:Number )
Set the FramesPerSecond. FairyDust uses an interval, not an onEnterFrame. So you can change the speed that it runs internally.

momentumBit( b:Boolean )
By default this is false. If you switch it to true and if the source(s) are moving then the dust MovieClips will inherit the momentum of the source(s).

setAlphaThreshold( n:Number )
When the _alpha of a dust MovieClip passes below this value it is deleted. By default it is set to 10.

setAlphaDelta( n:Number )
The rate at which the _alpha changes over time. By default it is set at 2.

moveSourceWithClip( mc:MovieClip )
If you would like for the source(s) to move automatically in relation to another MovieClip then use this. Just pass a reference to the MovieClip that you want the source(s) to follow.

setDustScale( n:Number )
Change the scale of the dust MovieClips when they are created.

setXYFriction( xValue:Number, yValue:Number )
Dampens the momentum and gravity effects. For instance, if something is moving horizontally there is no built in way to change it’s speed. If the xValue were to be < 1 then the movement along the x-axis would slow down as a piece of dust moves. On the other hand if the xValue were to be > 1 then the dust would speed up over time.

setSpin( low:Number, high:Number )
How much, and in what directio, the individual particles can spin. This will be a random number between the two arguments.

Particles is a class that manages simple MovieClip motion. Obviously by it’s name it can be used to create particles such as falling snow, leaves or anything else. And the MovieClips don’t have to fall. They can also float up. ( Download class files ) ( API documentation )

At it’s heart the Particles class is based on the physics from Kieth Peter’s book Making Things Move.

Here’s the essentials of how it works:

• You create MovieClip(s) that are linked in the Flash Library - I’ll refer to them as dust.
• Then you create other MovieClip(s) on the Stage that act as the source of where the linked MovieClips will be emmited from - I’ll refer to them as sources.
• Lastly you create a MovieClip where the dust can be created dynamically - I’ll refer to that MovieClip as the holder.
• And if you want you can specify an array of obstacles for the dust to bounce off of.

It’s important to know that there can be any number of dust and source MovieClips but only one holder is needed.

The way the Particles class works is that it attaches dust MovieClips at random intervals depending on the rate you can set.

The dust is always created within the area occupied by one of the source MovieClips that you specify. So if you have a very small source MovieClip then the dust will appear to come out of a point. Or if you have a horizontal line that spans across the Stage as a source then the dust will appear to fall out of that line. That’s something you might do if you wanted to create a snowing effect.

The holder is the MovieClip where the dust is attached at runtime. Each dust particle is always monitoring to see if it still fits within the area that the holder occupies. If it goes outside of that area then it removes itself from the holder so that it doesn’t waste CPU cycles. Therefore you can’t have an emptyMovieClip as the holder because the dust would be removed as soon as it was created. In most cases you would want the holder to be the size of your Stage. But depending on your design it could be smaller or larger as needed.

Lets make some Particles

Here is how you would create an instance of Particles that would look like what you see above. ( download source )

var simpleDust:Particles = new Particles( holder, [sourceMC], ["mote"] );
simpleDust.setDustPerSec( 33 );

The first line creates an instance of the Particles class and the second line sets the rate of dust production at, roughly, 33 per second. I say roughly because it’s all random. You can slow down the rate or speed it up but it will always fluctuate randomly around the value you set.

What’z with the brackets? [ ]

You’ll notice something a little different in the signature. There are brackets around the sourceMC and “mote”. The reason for that is that those are actually arrays that are created inline. That’s because you can have multiple sources and multiple dusts linked in the library. When you have multiples of either then one is randomly selected each time a dust is created.

Here’s an examle.

Here’s the code for that: ( download source )

// balls is an array of strings that is the collection
// of Linkage IDs that you want to use as dust
var balls:Array = ["ball_yellow", "ball_red", "ball_green", "ball_blue"];
// sources is an array of MovieClips - no quotes - that
// are being used as the origins for the dust particles
var sources:Array = [sourceYellow, sourceGreen, sourceRed];
// create an instance of Particles
var multiples:Particles = new Particles( holder, sources, balls );
// set the dust rate so that it will start
multiples.setDustPerSec( 33 );

You’ll notice that these animations don’t slow down no matter how long they run. That’s because once a piece of dust has an _alpha of less than 10 it will automatically delete itself so as to not waste resources. And remember if a dust passes outside the boundaries of the holder it will also delete itself.

There is a lot more that Particles can do that will be covered in later tutorials. And in the near future I’d like to rewrite it in AS3, if I have the time.

If you would like to move a DropShadow, or just about anything else for that matter, as the user moves the Mouse around then try something like this: ( download FLA )

The code in the FLA is very well commented. Here’s the gist of what’s going on:

1 - Start by creating a dynamic DropShadow

import flash.filters.DropShadowFilter;
var ds:DropShadowFilter = new DropShadowFilter(15, 0, 0x000000, 0.8, 5, 5, 1, 3, false, false, false);
myText.filters = [ ds ]; //


This last line is a bit of a cheat because we are passing ds as an array and not pushing it on to the myText.filters collection. We can do this because we only have one filter that we’re using here.

2 - Create a Mouse Listener

import mx.utils.Delegate;
var mouseList:Object = new Object();
mouseList.onMouseMove = Delegate.create( this, updateShadow );
Mouse.addListener( mouseList );

This should look familiar if you’ve created Mouse Listeners before. What might be a little different is the use of the Delegate class. It’s an amazing class that allows you to run functions in a specified scope. Otherwise the listener would be running in the scope of the mouseList object which is pretty useless. Delegate allows us to keep the scope as this so that we can still access functions on our frame here.

Delegate shines even more when you use it with classes. Once you start using it you’ll love it. You can read a bit more about it on polyGeek.com.

3 - Create a function that is called whenever the Mouse is moved

function updateShadow():Void {
var angle:Number = getAngleBetweenPoints();
angle = (angle * 180) / Math.PI;
ds = new DropShadowFilter(15, angle, 0x000000, 0.8, 5, 5, 1, 3, false, false, false);
myText.filters = [ ds ];
}

This function is called every time the Mouse moves.

4 - Create a function that returns the angle between two points. If you don’t pass any points then it will use the position of the Mouse and the center of the Stage as the two reference points.

function getAngleBetweenPoints( x1:Number, y1:Number, x2:Number, y2:Number ):Number {
if( x1 == undefined ) {
x1 = _xmouse;
y1 = _ymouse;
x2 = Stage.width / 2;
y2 = Stage.height / 2;
}
var dx:Number = y2 - x1;
var dy:Number = x2 - y1;
var angle:Number = Math.atan2( dy, dx );
return angle;
}

You have to love atan2. For more about this read Keith Peter’s Making Things Move, page 55.

Here at Smilebox we make interactive designs that you can put your own photos and videos in. This is my first design here at Smilebox. It’s largely based on the code examples from Keith Peters‘ book Making Things Move.

I did all of the code that makes the photos/videos move around - more about that below. Mark Puskar, a coworker here at Smilebox, did the awesome graphic design. Since the theme is water, and my wife Jill just loves the water, most of the photos are of her. I don’t think anyone will mind. :-)

Make a slide show, scrapbook or ecard

Making it move

If you’ve read the book Making Things Move then you can see that most of what’s going on here is stuff from chapter 11: Billiard Ball Physics. The main difference is the interactions that have been added to turn this into a photo browser. And you’ll notice that the small bubbles only interact with the center bubble but can pass through each other. This is mainly do to performance issues because making the small bubbles interact with each other is very processor intensive and Smilebox already has enough overhead to deal with.

Here’s a version that uses MovieClips attached at runtime instead of Smilebox photo components. Click on a circle to make it replace the center circle.

Download code.

Here’s the main bit of code that handles the motion: