Efficient Fuse (Keep Filesize Low in Multiple Files)

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:

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:

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:

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:

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:

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:

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:

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 :).