Search
Powered by SquareSpace
Powered by Squarespace
« Front Page Archive 1 | Main | Maya - MEL Cheat Sheet »
Wednesday
Oct142009

Flash & ActionScript 3.0 Workflow Recommendations

I have been developing Flash content since version 1.0 was released in 1996. During the intervening years, I have learned much the hard way. Following are my workflow recommendations for the Flash authoring environment and ActionScript 3.0.

 

Project Structure

I cannot recall how many Flash projects I have seen fraught with inconsistent naming conventions, scattered scripts, excessively chaotic timelines, and general disarray - the term FUBAR comes to mind...

While content requirements vary widely, the following guidelines will work for the vast majority of Flash projects. These conventions are designed to provide consistent, centralized control and ease of state management.

  1. Dedicate a layer to scripts only. Put this layer at the top of the main timeline and name it "~". Add a script to frame one - this script will contain ALL the logic for your project. NEVER put logic anywhere else. I mean it.
  2. Dedicate a layer to frame labels only. Put this layer below the scripts layer and name it "labels". this provides a control layer for nonlinear content. This is important. Seriously.
  3. Write functions for state changes. Sometimes the content state needs to be updated based on user input or other events. Many content creators handle this by scattering scripts across the main timeline. This approach can quickly lead to disaster, but there is an easy way to avoid trouble - simply call a state change function in your main script instead (see rule #1 above).
  4. ALWAYS use symbols of the MovieClip type, NEVER use Graphic or Button symbols. The limitations of the non-MovieClip symbols can cause unexpected behaviors and other problems. Write some code for button behaviors - you will find that intercepting mouse events is vastly more powerful than using the dumbed down states of a Button symbol.
  5. Keep the Library organized. Folders are provided for a reason, use them!
  6. Don't assume that the existence of software features means they are easy to implement! If I had a dollar for every time I heard a hapless creative lead claim a project would be easy "because we're using Flash"... This one really irks me - the assumption that interactive design is easy because the internet is brimming with it is one of the biggest misconceptions out there. Nonlinear, user driven experience is far from an easy to create. Creating quality interactive content requires planning, precision, and patience. 
  7. Don't take shortcuts. Laziness and ActionScript are like spaghetti and mustard - you can combine them, but the results are never good. Take the time to keep your files and project organized - a few extra minutes here and there can save you hours in the long run.

 

Optimization

Optimization is a tricky subject. Opinions vary widely on the best optimization methods, but there are a few simple guidelines for reducing both CPU overhead and memory footprint.

  1. For bitmaps, reduce the number of colors in the image. Anywhere a solid color can replace a gradient or contrast can be increased will give the buit-in JPG compressor a better shot at increasing quality and reducing data size. There is a global compression quality in the Publish Settings; default is 90%, but some content will look fine at lower quality settings. Reducing this value will generally reduce SWF size. Imported bitmaps also have individual compression controls for fine tuning.
  2. For vectors, reducing the number of anchor points which define a shape can shave thousands of bytes off the published SWF. Each anchor point is stored as a floating point coordinate pair and this can add up to lots of extra data inside the SWF. Watch out for traced bitmaps as they can contain excessive numbers of anchor points - sometimes, the built-in shape optimizer or shape smooth tools can help.
  3. For video, the simplest way to produce high quality low bandwidth content is to use a quality compressor. Adobe's Media Encoder or Quicktime's Export tools usually do a decent job - though they sometimes fail to accurately convert color profiles. Unfortunately, there is no one-size-fits-all approach to video compression - plan on spending plenty of time testing various settings.
  4. For scripts, AS3 is significantly better than AS2. There are many reasons for this: strict typing, compiler optimizations, AVM2, etc. If possible, AS2 projects should be converted or rewritten in AS3.

 

Naming Conventions

These conventions are based on Adobe Open Source Flex SDK Coding Conventions, with a few exceptions. Using the following naming conventions will make your code easier to read. This is accomplished by using formatting that can be read VISUALLY rather than SYNTACTICALLY.

  • variables, lowercase with intercaps: myVariableName
  • constants, all uppercase separed with underscores: CONSTANT, MY_CONSTANT
  • functions, lowercase with intercaps: myFunction()
  • function arguments, single underscore single identifier: _arg
  • objects and classes: uppercase with intercaps: MyObject
  • exported library clips: uppercase with intercaps: MyClip
  • stage instances, double underscore uppercase with intercaps: __StageInstance
  • library folders, dot lowercase with intercaps: .myClips

 

Code Structure

In addition to following coding conventions such as those listed above, the following code structure will keep your project organized and permit better portability between timeline scripts and class files. The basic format is a top-to-bottom categorization of code elements:

  • imports
  • constants
  • variables
  • init
  • functions

unneeded sections can be omitted  - ie. not all projects require imports or constants

example code:

//
// mBakr.com 
// Project X
// 9/2009

// imports

import fl.transitions.*
import Math

// constants

const PROJECT_NAME:String = "Project X";
const FRAMERATE:int = 30;

// variables

var buttonArray:Array = new Array();
var currentState:String = "";
var tweening:Boolean = false;

// init

buttonArray = [__ButtonOne, __ButtonTwo];
enableButtonBehaviors(buttonArray);
currentState = "init";

// functions

function enableButtonBehaviors(_a:Array) {
 for each (var element in _a) {
  element.addEventListener(MouseEvent.MOUSE_OVER, mOver);
  element.addEventListener(MouseEvent.MOUSE_OUT, mOut);
  element.addEventListener(MouseEvent.MOUSE_UP, mOver);
  element.gotoAndStop("up");
 }
}

function mOver(e:Event){
 e.currentTarget.gotoAndStop("up");
}

function mOut(e:Event){
 e.currentTarget.gotoAndPlay("out");
}

//