This is an introduction to the Flash methodology and terminology. It's not an ActionScript tutorial nor is it a tutorial on using any of Adobe's development environments.

 

Basics Steps to Working with Flash

Flash is, essentially, a drawing program with the ability to run scripts written in a language called ActionScript. This language is similar to Java and JavaScript. Over the years, ActionScript has had changing features and newer versions are not 100% compatible with older versions. Developers will often write applications in one version of Flash only to save (that is, "publish") the final product in an older format so it can be run by browsers running older versions of Flash.

Flash uses several different file formats:

• .fla ("Flash Document") - an editable Flash document with graphics and ActionScript
• .swf ("Shockwave File") - a compiled, compressed flash document for a website
• .as ("ActionScript") - a text file containing ActionScript but no graphics

These are the basic steps to build a Flash document:

1. Create a Flash application in the Flash application builder.
2. Test the project with Control / Test Movie.
3. Publish the Flash application as a .swf/HTML files and put it on your web site
4. Install the Flash player for Linux and load the web page in your web browser

 

Flash on Linux

To write a Flash application, you need to use Adobe's Flash development environment (e.g. Flash 8, Flash MX, Flash CS3, etc.). As of the time of writing, these application builders have not been released for Linux. However, the Linux Wine Windows emulator supports most of these applications. You should be able to install Wine and run the Windows versions of these products on Linux. See Frank's Corner or The Wine Homepage. There is also an open source Flash making library called Ming.

Adobe does provide a native Flash player for Linux. The player can display .swf files but it cannot be used to create or edit Flash applications. The player can be downloaded through your package management software or directly from Adobe's website.

 

Flash Applications

Flash has a drawing area ("the stage"), a library of objects that can be drawn and a timeline which contains scripts and specifies how the appearance of the stage will change over time. A language reference is included with the builder's online help.

 

Doing Flash Safely - Best Practices and Coding Standards

For large Flash projects, you'll do virtually everything in ActionScript and will draw little using the application builder. (This includes creating buttons or movie clips.)

Writing an ActionScript application is something like programming with JavaScript or shell scripts. ActionScript has very little error checking but the features are constantly improving. Flash has little type-checking and no variable spell checking, for example. To build large, reliable Flash applications, it's very important to follow good programming standards and use the latest Flash features to their best effect. Be wary of Internet tutorials for old versions of Flash which demonstrate obsolete ways of doing things.

Here are some general guidelines:

• Create an "actions" layer in the timeline to hold scripts.
• Put as much of the program as possible in the first frame of the actions layer. This makes it easier to find, read and maintain the program. For example, don't use on (release) -- use button.onRelease = instead.
• Then move as much of the first frame program as possible into external .as files. These .as files can be put under source control while the .fla files, which contain graphics, cannot get the full value of source control.
• Declare all variables with var. Use type checking and set default values for variables to unusual values (such as a large number or "NO VALUE" for strings). Don't rely on empty or undefined values. This makes it easier to check for variable errors.

    var dist:Number = 9999;             // player distance
  

• Use unique variable names to avoid conflicts with reserved words or other flash labeled items. Don't rely on case because some versions of ActionScript ignore case.
• Prefix all names with the location, whether this. or this._parent. (for user names) or _root. (for Flash built-ins). This makes the script more reusable.

  start_button.onRelease = function() {
  	this._parent.player_status = this._parent.playerStatusAlive;
  	this._parent.action = this._parent.playerActionStart;
  	_root.gotoAndPlay(2);
  }
  

• In any multi-line if or switch statement, always include a "catch-all" case for unexpected values to display an error message with trace().

  if ( this.action == "attack" ) {
     ...
  } else {
  	trace( "main(): ERROR: UNKNOWN ACTION CODE: " + this.action );
  } // actions
  

• In functions, always check for illegal or unexpected values and display an error message with trace().

  //  RND
  //
  // Return a random number between 1 and limit.  Error reported if the
  // limit is out of range.
  // ---------------------------------------------------------------------
  
  function rnd( limit:Number ):Number {
    if ( limit == undefined ) {
  	  trace( "rnd(): ERROR: limit is undefined" );
    } else if ( limit <= 0 ) {
  	  trace( "rnd(): ERROR: limit is <= 0" );
    }
    return Math.floor( Math.random() * limit ) + 1;
  } // end of rnd()
  

• Clean up your arrays. Delete any items you are not using to prevent against memory leaks.

Adobe provides many pages of recommendations for "best practices". You can read them on the Flash website.

 

Flash Project Structure

How do you navigate around a Flash project?

The main program is always the .fla file. Flash begins running the scripts in the first frame of the timeline when an application begins. Often any scripts that are not essential to the .fla file are separated and stored as include files, imported classes and packages.

#include is a directive, like C's #include, that loads a text file and inserts the contents directly into the current script. The include only applies to compile-time: the text file isn't required for the .swf file.

For example, the rnd() function above can be saved in a file of random number functions called "random.as". To include random.as from the same directory as the .fla file, use:

  #include "random.as"

Don't use an ending semi-colon because this is a directive, not a command.

Classes cannot be included with #include: you have to use import instead. When Flash documentation refers to packages, they are simply referring to subdirectories. Packages are directories containing class files. You specify subdirectorys with dot notation.

If you have a kitten class to create an animated kitten, and file is called "animals/kitten.as", use:

  import animals.kitten;

import is a command: the ending semi-colon is required.

You can import all the classes in a directory with ".*".

  import animals.*;

 

Sample Flash Program

// canvas_mc is an empty movie clip that can be
// used as a drawing area.  The initial settings
// with be (x,y) = 0 and height/width = 0.

this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth());

trace( "INFO: Stage width: " + Stage.width );
trace( "INFO: Stage height: " + Stage.height );
trace( "INFO: Before drawing" );
trace( "INFO: Movie clip x position: " + canvas_mc._x );
trace( "INFO: Movie clip y position: " + canvas_mc._y );
trace( "INFO: Movie clip width: " + canvas_mc._width );
trace( "INFO: Movie clip height: " + canvas_mc._height );
 
 // Draw a filled rectangle that coverse the stage
 // +3/-2 to compenstate for line width 0f 5
 
canvas_mc.opaqueBackground = 0x000000;   // background colour
canvas_mc.beginFill(0x0000FF, 50);       // fill colour, alpha
  canvas_mc.lineStyle(5, 0xFF00FF, 100); // thickness, colour, alpha, ...
  canvas_mc.moveTo(0+3, 0+3);
  canvas_mc.lineTo(Stage.width-2, 0+3);
  canvas_mc.lineTo(Stage.width-2, Stage.height-2);
  canvas_mc.lineTo(0+3, Stage.height-2);
  canvas_mc.lineTo(0+3, 0+3);
canvas_mc.endFill();

trace( "INFO: After drawing" );
trace( "INFO: Movie clip width: " + canvas_mc._width );
trace( "INFO: Movie clip height: " + canvas_mc._height );

stop();                                    // end of script

The program will draw a blue rectangle with a purple border that fills the application area (the stage). The output window will contain:

INFO: Stage width: 550
INFO: Stage height: 400
INFO: Before drawing
INFO: Movie clip x position: 0
INFO: Movie clip y position: 0
INFO: Movie clip width: 0
INFO: Movie clip height: 0
INFO: After drawing
INFO: Movie clip width: 550
INFO: Movie clip height: 400