Monday, May 25, 2009

Difference between .as, .fla and .swf files

Really quickly I want to talk about the simple differences between an ActionScript file (*.as), a Flash File (*.fla) and a Shockwave File (*.swf) pronounced swift file.

Flash files are workspace files that use .fla extension and contain the timeline, stage, library and assets which can contain any number of movieclips (symbols), sound files and graphics: it's your project's development environment. (I hesitate to use the word 'project' because flash also has something called .flp, Flash Project that is for bigger projects containing more than one .fla file and other files, but I haven't gotten to that yet)

SWF files are the compiled executables you get when you export movie from your .fla file. Not all the assets and components in your .fla are exported into your .swf, only those that are actually used. SWF files are what you actually distribute on the net (or whereever) for the world to see. They are the files you embed in your HTML (for a website for example).

.as (actionscript) files are pure class definitions that can be included into fla files to create objects with. Hence Actionscript files define objects that may be used repeatedly in different .fla projects. Each .as file contains only one class definition. The class name must also be the name of the actionscript file. The class definition must be wrapped in a package declaration (you can name the package to avoid name space collisions of class names, I think that is what flash uses itself for package names like flash.display.MovieClip etc), or you can just leave package name blank for small projects, it works for now.

Incidentally, The fla project automatically has access to any actionscript files saved in the same directory as itself. It is also possible to load classes that are in a shared directory above the fla directory through classpath settings (publish settings > flash > actionscript settings or preferences > actionscript > actionscript 3 settings ... something like that, I haven't tried it). (Note to self: I moved Ball.as up two directories to see if the .fla compiler would complain that it couldn't find Ball.as, but it did not complain! Maybe it's somehow linked already and knows where I move it? Not sure...)

One fla project can load one main .as file by selecting the document class in the property inspector of the project (click on an empty area of the stage if your property inspector is not showing it -- or I think you can get to it through publish settings). That calls the constructor function of the class defined in the .as file.

So in a nut shell that's what those different files are for.

Where the heck do I put my ActionScript Code?

So in my first study, I'm going through the first example in the book "Flash Math Creativity" called "TowardUs" by Jamie McDonald. Jamie does a good job explaining that we should get familiar with the sin and cos trig functions because they're good for making oscillating movement. Ok, cool I'm with you so far. The example creates a bunch of small little balls that spin and grow and then fade away when you think they're about to hit you in the face. Awesome, how do I do it?

Here's where it went down hill. In the book he talks about adding Ball movieclip then adding a another movieclip called Events within that movieclip that contains actionscript as such:

onClipEvent (enterFrame) {
_parent.myfunct();
}
erm... wha? Why am I doing this... what's going on? Where does this snippet go now? I tried typing it in my Flash project like the book says but it won't compile! ARGH!!!!

Ok... ok backup.... Take a deep breath.

Let's go back and take a look at what we want to do in concept before we start looking at the code again. There are a couple of issues at hand.

First of all, we want to disect the effect, not the code. So we don't want to be typing the examples from the book, especially since they are using actionscript and we should be using actionscript 3.

So (it helps if you READ the introduction to the book) I found that all the source code for the examples are downloadable online. I got it, ran it. Hey, what do you know, it works.

So after studying the example IN the project environment, I learned the following. You can put your actionscript almost anywhere (at least in actionscript 1, you can - just highlight the object/frame etc and open the actions window and start typing). McDonald put some code that was embedded into an Event movieclip, embedding in the Ball movieclip that would receive "enterFrame" events, so that he could update the ball's size etc. Sort of confusing and something to be avoided using ActionScript 3.

It seems that a common practice is to create a layer in the time line and call it "as" for "actionscript". Your code goes in Frame 1 of this layer (highlight frame 1 and click Windows > Actions to type code). When your swf is loaded it will immediately begin playing the movie, so frame 1 is an option to place your initialization code or do things like halt the play head in order to take control over the playhead and the execution.

As expected, within the timeline each frame may contain actionscript. Although this can become messy since your code will be fragmented all over the place. Where are times when it's necessary to put some code in different frames but in general the bulk of definitions and functions should be kept in a separate class definition, .as file then associated with the fla project via document class.

Which brings me to my next lesson, what is the difference between .as, .fla and .swf files.