SMJ's Actionscript Standards and Practices

The debugging situation did improved with ActionScript 2.0. I have yet to use Flash 8, but I hope this continues to improve. Something tells me that the Adobe buyout of Macromedia isn't going to help with the programming interface. It will only lead to more components packaged into the box.

I've spent more than a little time trying to explain timelines and event handlers to my media friends. These are some of the practices that I try to convey. The majority of the time though, they just want to finish the project. “As long as it works. . .” they say.

Well, the following are a few practices that I use to keep my code readable and easier to update in case you do use the similar framework in a second project. This is programming after all--no one will ever know.

• Suggested naming schemes for movie clips
• Using Movieclips vs. Buttons
• Notes on loading modules from a menu

Naming Schemes for Movie Clips

Sample path

someTextMovie_mc.someText_mc.someClip_txt

someTextMovie_mc :: This is the container movie clip that contains the animation timeline. I started out with the suffix “Container” but decided that it was too long and now use the suffix, “Movie”.

someText_mc :: This is the movie clip that is animated. It is the movie clip that is tweened across a timeline This clip is needed, so that the text box inside of it is encapsulated. If the font of text box inside is changed, then all instances of someText_mc will change with it.

someClip_txt :: This is a TextBox inside the animated movie clip.

The above example includes object suffixes that enable the Flash editor to provide code hints.

Common code hint suffixes

Array :: _array; Button :: _btn; Color :: _color; LoadVars :: _lv; LocalConnection :: _lc; MovieClip :: _mc; MovieClipLoader :: _mcl; Sound :: _sound; String :: _str; TextField :: _txt; TextFormat :: _fmt; Video :: _video; XML :: _xml; XMLNode :: _xmlnode; XMLSocket :: _xmlsocket

Using Movieclips vs. Buttons

There is not much advantage to defining an object (Symbol) on the stage as a “Graphic” unless the symbol is animation or static. A “Button” can be used for a quick way to cause events to occur based on user interaction, but both these seem like limited “MovieClips”. I've never used a “Graphic” or a “Button” inside a Flash project. Often movie clips that function as buttons have a similar function. An example would be when the mouse is placed over this movie clip increase the brightness of the movie clip. In the following ActionScript, frame 2 is a highlighted (selected) version of the movie clip while frame 1 is the regular version.

_root.menuBar.menuFilm.menuSummary.onRollOver = function() {

gotoAndStop(2);

}

_root.menuBar.menuFilm.menuSummary.onRollOut = function() {

gotoAndStop(1);

}

If you have a series of similar movie clips that all brighten when the mouse is over them, then having the same exact code inside each and every “onRollOut” and “onRollOver” allows changes to be easily made. If it is decided that you need to animated the transition between the brightened movie clip and the original. A simple find and replace can replace ALL occurrences of “gotoAndStop(2)” with “gotoAndStop(10)”

Loading Modules from a menu

First let me state that if you are wanting to make menu, you will need to be familiar with setInterval and clearInterval to make menus appear and disappear with a short delay

The easiest paradigm to imagine is that every section that can be clicked on a menu downloads a new swf file from the server. The drawback of this method is that every click causes a pre-loader to appear. If there are a few sections (external swf files) that have subsections (specific frames in the timeline of each external swf file).

Another technique that makes entering code more efficient is using variables to refer to movie clips. If you have a series of menu items (that have the prefix “menu”) that you want to each load content into a certain movie clip so that you have a modular site. If you name the movie clips similar names like “section.subsection”, then you can use the movie clip property, “_name”, with a substring function to grab the section's name. “substr(4)” removes all the characters before the fifth letter from the name of the movie (“menuFilm”). “substr(10)” would start reading the characters at the eleventh character.

An examples is:

The user clicks the item, “menuFilm.menuSummary”. “menuFilm” is the section of the short film web site. “menuSummary” is the subsection of the web site. The onRelease() of this item calls the following line:

loadMovie(this._parent._name.substr(4)+".swf",_root.content);

This takes the name of the parent movie clip of the movie clip instance that was clicked (menuFilm) and minuses the first four characters. This loads an external movie clip with the name “Film”. The problem with this is that if you have a subsection clicked (menuFilm.menuSummary), then you need to create a function that tells “Film.swf” to go to the subsection, “Summary”. This might look like the following:

loadContent(this._parent._name.substr(4),this._name.substr(4));

The inside of loadContent might look like:

function loadContent(clickedSection,clickedSubSection){

//load the correct swf file into the movie clip “content”

loadMovie(clickedSection +".swf",_root.content);

/* go to the frame of the swf file just loaded that corresponds

to the subsection clicked on the menu)

_root.content.gotoAndPlay(_root.clickedSubSection)

}

--Stephen M. James

www.smjdesign.com