September 2006 Archives
As I'm sure most people know, Fuse is finally out of beta.
I've been using the beta Fuse for a while now and its a great way to create advanced Flash motion tweens in no time.
One comment that seems to come up regularly in the forum and mailing list is that Fuse is too heavy. If not checked, Fuse can quickly get hefty, but if you follow a few guidelines you can easily keep Fuse at quite a small size for its amount of features.
The first thing to note about Fuse is that it provides a modular mix & match format with its classes. What this means is that it allows you to only publish and use the classes that you need. You can test this out by creating a new Flash movie and adding a square MovieClip with an instance name of "box" to the stage. Then add the following code on a new layer:
import com.mosesSupposes.fuse.*;
ZigoEngine.doTween(box, '_scale', 20, 2, mx.transitions.easing.Elastic.easeOut);By not registering any additional classes, you have just compiled your movie with the basic classes needed to get started animating with Fuse (well technically ZigoEngine). This file should come out around 13kb. 13kb is not too shabby for the amount of functionality that ZigoEngine provides.
According to Moses, the brains behind Fuse, you should be able to get this filesize even smaller (to around 10kb) by excluding the trace actions in your publish settings. I personally haven't been able to successfully see a decrease, but if your under tight size constraints its a good tip to know about anyway.
In the example above, you should note that the easing function that I used is from the mx.transitions.easing set. By doing it this way, you only import the easing function that you will be using. This works with the com.robertpenner.easing classes as well. But if you think you will be using many different types of easing functions in your project, an easier way to import and use them is by registering all of the PennerEasing classes. Use the previous example and replace the code with the following:
import com.mosesSupposes.fuse.*;
ZigoEngine.register(PennerEasing);
ZigoEngine.doTween(box, '_scale', 20, 2, 'easeOutElastic');This allows you to use a simpler syntax to call the easing methods, but does however add a bit more overhead to the swf. If you check the file now, it should be around 15kb. If you're under a tight size constraint and only need a couple of easing functions, go the first route, otherwise use this way for simplicity.
Another nice thing to know about is that you can use the FuseFMP functionality without using Fuse at all. FuseFMP allows you to quickly setup filters on your clips. To try this, use the same file as above but replace the code with the following:
import com.mosesSupposes.fuse.*;
FuseFMP.writeFilter(box, 'Blur', {blurX:10, blurY:0});
FuseFMP.setFilterProps(box, 'DropShadow', {distance:20, alpha:.5});If you check out your filesize now, you'll be at around 6kb. If you only need to setup filters on your objects and not do any animation, this is a great way to go.
If you like the Fuse object syntax, but don't need all of Fuse's functionality you can register FuseItem much like you registered PennerEasing above. As a quick example, take the same file and replace the code with the following:
import com.mosesSupposes.fuse.*;
ZigoEngine.register(FuseItem);
ZigoEngine.doTween({ target:box, scale:20, ease:mx.transitions.easing.Elastic.easeOut, time:"02:00"});This opens up some of Fuse's power, but also begins to open up some of Fuse's filesize as well. If you look at the file in finder or explorer now, the filesize should be around 22kb. Once you start getting up here though, you might as well start using the full functionality of Fuse. The next section is about that and how you can use Fuse in multiple swfs but only see the filesize hit once.
Once you decide to register Fuse and start using its full functionallity, you are instantly at 27k. This in itself wouldn't be too big of a deal if you had a large animation in a single Flash movie, but what if you are like me and build your sites and Flash projects using multiple swfs... if you want to use Fuse in all of those swfs you are instantly dealing with 27k in each and every swf. This adds up very quickly.
What if I told you there's a way to only get the 27k hit once but use Fuse in all of the swfs in your project? There is... using exclude xml files.
To test this, setup a new Flash movie and add a movieclip with a circle in it and name it "circle_mc". Place the circle somewhere in the center of the flash movie. On a new layer add the following code:
import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse);
ZigoEngine.register(PennerEasing);
var f:Fuse = new Fuse();
f.push({target:circle_mc, x:-100, y:-100, seconds:.5, ease:"easeOutQuad"});
//f.push({scope:this, func:"loadSection"});
f.start();
function loadSection ():Void {
this.loadMovie("section.swf");
}Ignore the commented line and the function for now and compile the movie. What you should see is a circle tweening off the stage to the top left. If you look at the swf in finder or explorer, you should see the filesize around 27 or 28k.
Please note, Fuse is a VERY advanced motion sequencer and the example I am showing you is VERY basic, for something this basic you would not even want to use Fuse.
Now, create another Flash movie and this time add a square in it and name it "square_mc". Place the square somewhere in the center of the flash movie. On a new layer add the following code:
import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse);
ZigoEngine.register(PennerEasing);
var f:Fuse = new Fuse();
f.push({target:square_mc, x:Stage.width, y:Stage.height, seconds:1, ease:"easeOutBounce"});
f.start();Make sure to save this movie as "section.fla" and compile it. This time you should see a square tween off to the bottom right. Again if you look in finder or explorer you will see section.swf weighing in around 27 or 28k. Now go back to the first movie and uncomment the commented line and recompile the movie. Now you should see the circle go off to the top left and then you should see the square go off to the bottom right.
Everythings working great, right? One problem... we're now dealing with Fuse in two seperate swfs but one project and the total weight is around 54 or 56k. Now imagine loading in 10 swfs all using Fuse... adds up pretty quick doesn't it?
The solution is to use an exclude xml file. An exclude xml file allows you to compile a swf without specific classes knowing that it will be able to pull those classes in from a container movie.
To make the exclude xml file, create an xml file and add the following into it:
<excludeAssets>
<asset name="com.mosesSupposes.fuse.Fuse"/>
<asset name="com.mosesSupposes.fuse.FuseFMP"/>
<asset name="com.mosesSupposes.fuse.FuseItem"/>
<asset name="com.mosesSupposes.fuse.FuseKitCommon"/>
<asset name="com.mosesSupposes.fuse.PennerEasing"/>
<asset name="com.mosesSupposes.fuse.Shortcuts"/>
<asset name="com.mosesSupposes.fuse.ZigoEngine"/>
<asset name="com.mosesSupposes.fuse.ZManager"/>
</excludeAssets>Save the xml file as "section_exclude.xml". If you are going to use an exclude xml file it needs to be named exactly what the flash movie that you are trying to exclude classes from is named plus "_exclude.xml". Inside of the file, each Fuse class is listed as an asset to exclude from section.swf. Now compile section.fla. It compiles but no longer works. Go back to the first circle Flash movie and compile it again. Everything should work now. Circle moves off top left and square moves off bottom right. The square movie is able to pull in the Fuse classes from the circle container movie. Now look at finder or explorer and check out the filesize. The first movie is still around 27 or 28k but check out section.swf... it should be around 2k!! Not too shabby. This is a much more efficient way of loading multiple swfs using Fuse then the first option.
To make working with exclude xml files easier, check out the commands from Martijn Devisser. These commands allow you to compile without using the exclude xml file for testing purposes and then allow you to compile with the exclude xml file when you're ready to finalize the project. Makes life nice and easy :).
Well, that's it!
I've made my way through Robert Penner's Programming Flash MX to the end and survived.
Every class from the book has now been converted from AS1 to AS2 and every example from the book has been shown working with these new classes.
It has taken me exactly 73 days (in my spare time) to complete since announcing the project on June 27th earlier this summer. A lot of times I thought about shelving it, but I really wanted to see it through to completion and I'm glad I did.
I hope that everyone out there gets some use out of these classes and I'll try and post some of my personal examples using them in a little while.
Thanks to Robert Penner for writing the book and giving me the green light on the project and thanks to everyone out there that has emailed or commented with your support. It was quite an undertaking but well worth it in the end.
Download:
Complete Penner AS2 ProFMX Classes and Documentation
After the cyclone above builds out, click and drag the small rotating plus sign to direct the storm. The Cyclone example uses the classes from the Chapter 14 Penner AS2 post.
To replicate this example:
1) Create a new Flash movie and then create a new Graphic named "particleGraphic".
2) Inside the Graphic, add a square 10px wide by 10px high. Rotate the square 45 degrees and then resize it to 3px wide by 11px high, x and y position at 0.
3) Outside the Graphic, select it on the Stage, center it over the registration point, give it a tint of 153, 153, 153, and convert it to a MovieClip so that the Graphic is now within a MovieClip. Name this MovieClip "Particle" and give it an instance name of "particle".
4) Select this MovieClip on the stage and convert it to another MovieClip. Name this clip "CyclonePath" and add the class linkage of "com.robertpenner.profmx.cyclone.CyclonePath". Also, give it an instance name of "path".
5) Within the CyclonePath MovieClip, add a layer above the particle named "actions" and put the following code:
this.init();6) Back outside of the CyclonePath MovieClip, convert it to another MovieClip. Name this clip "CycloneOval" and add the class linkage of "com.robertpenner.profmx.cyclone.CycloneOval".
7) Within the CycloneOval MovieClip, add a layer above the path named "actions" and put the following code:
this.init();8) Close all of these MovieClips and create a new MovieClip named "CycloneDragger" with a class linkage of "com.robertpenner.profmx.cyclone.CycloneDragger".
9) Within this MovieClip, add a 1px wide by 28px high line centered over the registration point. Duplicate this line and rotate it 90 degrees so you end up having crosshairs. Convert the crosshairs to a graphic named "crosshairs".
10) Outside of the crosshairs graphic, within the CycloneDragger MovieClip, give the crosshairs graphic an alpha of 65% and scale it to 70%. Add a new layer with a fully transparent oval centered over the registration point and crosshairs, 28px wide by 39px high. This will be used as the button for the dragger.
11) Outside of the CycloneDragger MovieClip, scale the clip to 35%, centered over the registration point horizontally, and vertically placed at 106 with an instance name of "p0".
12) Convert the CycloneDragger MovieClip to a new MovieClip named "Cyclone" with a class linkage of "com.robertpenner.profmx.cyclone.Cyclone".
13) You will now convert this Cyclone MovieClip to a component. Right-click on it in the library and select "Component Definition". In the window that pops up add the same class to the area that says "AS 2.0 Class:".
14) Give the Cyclone component that is currently on the stage an instance name of "cyclone" and scale it to 150% wide by 110% high and center it on the Stage so that both the registration point and dragger can be seen. Click on the Parameters tab to see the following component options: funnelHeight, maxParticles, speed, and stiffness. Play around with these options.
15) On the root timeline add the following code and compile:
this.cyclone.init();Chapter 14 of Robert Penner's Programming Flash MX is the final chapter of the book. This chapter includes classes to develop a cyclone particle system that bends towards a user-controlled dragger.
This chapter contains four classes: CyclonePath, CycloneOval, Cyclone and CycloneDragger, which will be included in the com.robertpenner.profmx.cyclone namespace.
Documentation:
com.robertpenner.profmx.cyclone.CyclonePath
com.robertpenner.profmx.cyclone.CycloneOval
com.robertpenner.profmx.cyclone.Cyclone
com.robertpenner.profmx.cyclone.CycloneDragger
Click around above while the counter moves up to 150. Once it reaches 150, let go and the fractal tree will repeat the motions that you created as it recursively creates new branches. You can also change the 150 number to any other number that you would like. This is the Fractal Dancer example using the classes from the Chapter 13 Penner AS2 post.
You can download this example here.
Click around above and then let go, whatever motion you created will be repeated until you start clicking again. This is an example using the MotionCamera class from the Chapter 13 Penner AS2 post
To replicate this example, add an oval shaped MovieClip to the stage with an instance name of "oval".
Then on the root timeline add the following code:
import com.robertpenner.effects.MotionCamera;
var xmouse_cam:MotionCamera = new MotionCamera (oval, "_xscale");
var ymouse_cam:MotionCamera = new MotionCamera (oval, "_y");
xmouse_cam.setActor (this, "_xmouse");
xmouse_cam.looping = true;
ymouse_cam.setActor (this, "_ymouse");
ymouse_cam.looping = true;
this.onMouseDown = function () {
with (xmouse_cam) {
eraseFilm();
rewind();
start();
startRecord();
}
with (ymouse_cam) {
eraseFilm();
rewind();
start();
startRecord();
}
};
this.onMouseUp = function () {
with (xmouse_cam) {
stopRecord();
cutFilm();
rewind();
}
with (ymouse_cam) {
stopRecord();
cutFilm();
rewind();
}
};
stop();Chapter 13 of Robert Penner's Programming Flash MX is the third of the final four chapters of the book. This chapter includes a class that records motion and two other classes to develop a recursive fractal tree that bends and sways with user interaction.
This chapter contains three classes: MotionCamera, which will be included in the com.robertpenner.effects namespace, and FractalBranch and FractalTree, which will be included in the com.robertpenner.profmx.fractalTree namespace.
Documentation:
com.robertpenner.effects.MotionCamera
com.robertpenner.profmx.fractalTree.FractalBranch
com.robertpenner.profmx.fractalTree.FractalTree
Source:
Penner AS2 ProFMX: Chapter 13 Classes
Dependencies:
mx.transitions.Tween
mx.utils.Delegate
Move around above and you will see the Snowstorm example using the classes from the Chapter 12 Penner AS2 post.
To replicate this example:
1) Create a new Flash movie and then create a MovieClip at (0, 0).
2) In this MovieClip, add a rectangle 400px wide by 300px high with the registration point at the top left of the rectangle.
3) This will be the boundingBox of the snow component. Give the MovieClip an instance name of "boundingBox".
4) Select this MovieClip on the stage and convert it to another MovieClip. Name this clip "snow" and add the class linkage of "com.robertpenner.profmx.snow.Snow". Also, give it an instance name of "snow".
5) You will now convert this MovieClip to a component. Right-click on it and select "Component Definition". In the window that pops up add the same class to the area that says "AS 2.0 Class:".
6) Click on the Parameters tab to see the following component options: fallSpeed, friction, maxFlakes, and zDepth. Play around with these options.
7) On the root timeline add the following code and compile:
this.snow.init();Chapter 12 of Robert Penner's Programming Flash MX is the second of the final four chapters of the book. This chapter includes classes to develop a 3d snowstorm particle system with user controlled wind.
This chapter contains three classes: Snowflake, Snowstorm and Snow, which will be included in the com.robertpenner.profmx.snow namespace.
Documentation:
com.robertpenner.profmx.snow.Snowflake
com.robertpenner.profmx.snow.Snowstorm
com.robertpenner.profmx.snow.Snow
Source:
Penner AS2 ProFMX: Chapter 12 Classes
Dependencies:
Penner AS2 ProFMX: Chapter 5 Classes
Penner AS2 ProFMX: Chapter 3 Classes
mx.transitions.OnEnterFrameBeacon
Move around above and you will see the Aurora Borealis example using the classes from the Chapter 11 Penner AS2 post.
To replicate this example:
1) Create a new Flash movie and then create a MovieClip.
2) In this MovieClip, add a rectangle 2.5px wide by 100px high with the registration point at the top center of the rectangle.
3) Fill the rectangle with a gradient 50% white alpha at the top and 0% white alpha at the bottom. This will be the Aurora Borealis particle.
4) Remove this MovieClip from the stage so that it is only in the library and then name it "auroraParticle" and add a class linkage of "com.robertpenner.profmx.auroraBorealis.AuroraParticle" to it.
5) Now add another blank MovieClip to the library and name it "auroraBorealis" and add the class linkage of "com.robertpenner.profmx.auroraBorealis.AuroraBorealis" to it.
6) You will now convert this MovieClip to a component. Right-click on it and select "Component Definition". In the window that pops up add the same class to the area that says "AS 2.0 Class:".
7) Now drag this component to the stage and place it at the top center.
8) Add an instance name of "auroraBorealis" to the component MovieClip and then click on the Parameters tab to see the component options. Play around with these options.
9) On the root timeline add the following code and compile:
this.auroraBorealis.init();
Click around above and you will see an example using the ElasticForce, Force, and PhysicsParticle classes from the Chapter 11 Penner AS2 post
To replicate this example, add a circle MovieClip to the stage with an instance name of "ball".
Then on the root timeline add the following code:
import com.robertpenner.physics.PhysicsParticle;
import com.robertpenner.physics.forces.ElasticForce;
var p:PhysicsParticle = new PhysicsParticle(ball, ball._x, ball._y);
p.setFriction(.1);
var eForce:ElasticForce = new ElasticForce(130, 70, .2);
p.addForce("elastic", eForce);
this.onMouseDown = function() {
eForce.setAnchor(this._xmouse, this._ymouse);
}
stop();Chapter 11 of Robert Penner's Programming Flash MX is the first of the final four chapters of the book and they are devoted to case studies. With each of these four chapters I will post about the converted classes and then follow it up with a post showcasing the case study. Chapter 11 builds upon the physics concepts from Chapter 8 and includes classes that help to encapsulate many of the physical forces that act upon objects and then builds upon those classes creating an effect that closely resembles the Aurora Borealis.
This chapter contains five classes: PhysicsParticle and Force, which will be included in the com.robertpenner.physics namespace, ElasticForce, which will be included in the com.robertpenner.physics.forces namespace, and AuroraParticle and AuroraBorealis, which will be included in the com.robertpenner.profmx.auroraBorealis namespace.
Documentation:
com.robertpenner.physics.PhysicsParticle
com.robertpenner.physics.Force
com.robertpenner.physics.forces.ElasticForce
com.robertpenner.profmx.auroraBorealis.AuroraParticle
com.robertpenner.profmx.auroraBorealis.AuroraBorealis
Source:
Penner AS2 ProFMX: Chapter 11 Classes
Dependencies:
Penner AS2 ProFMX: Chapter 4 Classes
Penner AS2 ProFMX: Chapter 3 Classes
mx.transitions.OnEnterFrameBeacon
I made some minor updates to a few of the previous Penner AS2 classes:
Changes:
1) MathUtil added two new methods from the final chapters: randRangeFloat and randRangeInt.
2) Graphic3d added getter setter methods for the scale property.
3) WaveMotion fixed minor bug.
4) DrawingClip fixed minor bug.