Flash is a powerful tool that can give life and interactive interest to a project. However, when using Flash (or any design software for that matter), it is important to follow a set of standards or “best practices.” A well developed Flash project is easier to edit and maintain, and provides the user with a quick download and responsive interactivity. Compliance with these guidelines will also help other Flash developers and design team members to quickly and easily decipher and modify your work.

Organization

The importance of an organized design process cannot be overstated. Before you even touch the software, have a plan. Whether it consists of sketches, story boards, mock ups, or simple notes, a detailed plan will help your ideas come to life smoothly and limit the amount of time you spend backtracking. If you make decisions early about the myriad details (file size, interactivity, imagery, video, etc.), you can save yourself a lot of work. Remember that every project will come with its own set of challenges. It is impossible to anticipate every problem, but your time spent troubleshooting can be significantly reduced if you maintain an organized process.

Once you actually dive into Flash there are a few organizational strategies that will help you collaborate with others and keep the file(s) manageable.

Timeline and Library

• Name your layers. Make it simple and descriptive.
• Organize similar layers into folders.
• Lock layers to avoid placing content in the wrong location.
• Never put assets on the same layer as ActionScript. Keep ActionScript on its own layer and lock it.
• Use frame labels. This allows you to make changes to your timeline without having to edit every snippet of code where you referred to a frame number.
• Use library folders to make changing assets easier.
• Stick to a naming convention with both layers and your library.

Fig. 1 – The above image is a snapshot of a hypothetical work in progress. It illustrates the use of descriptive layer and library names, layer folders, locked layers, frame labels, and library folders. Each project can require a unique organizational structure. Use the planning stage to determine what will work best for your project and work environment.

Scenes

In most cases involving interactive flash, the use of scenes should be avoided. They tend to enlarge your file size,and can be confusing to edit in a collaborative setting. Using scenes also forces the user to download the entire file instead of the pieces they choose to see and use. Perhaps most importantly, scenes can cause ActionScript errors that break the usability of your final product.

One exception to this rule is if you plan to create a lengthy linear animation. This type of file has little or no interactivity, and is intended to play through from beginning to end. A long character animation is a good example of the sort of file that would benefit from the use of scenes.

Saving and Versions

Another key ingredient to smooth project development is to save often (File>Save or ctrl+s). Saving is good advice, whether working in Flash or not. As complex as your file can become, you will prevent a lot of frustration by following this rule.

Also, periodically select File>Save As (or press shift+ctrl+s), to save a new version of your file. This is especially helpful if you decide that your current approach is not ideal. Instead of trying to undo your current work, you can simply open a version of your project that does not have the latest set of changes and work from there.

ActionScript

ActionScript is the brain of your Flash project. Through the process of evolution, nature determined that brains go in a single place. In this case the logic of nature is worth emulating. Your ActionScript should be kept in as few places as possible.

If you intend to keep the ActionScript in your main FLA file, put your code in the top layer, name it “actions,” and lock the layer. The reason for putting the ActionScript in the top layer is to make it easy to find, and setting the file to load “top down” in the publish settings ensures that your code is the first thing to load.

Another option is to put all of your code in separate ActionScript files. You can write these files using a simple text editor (Notepad on PC and Text Edit on Mac), or you can use the Actions panel in Flash, taking advantage of the built-in code hints, then copy and paste to the text editor. Either way the end result is a plain text file. Make sure to save it with a .as file extension. You can then call your file with a few lines of ActionScript on the appropriate frame of your SWF.

Avoid placing code on object instances on the stage. ActionScript on objects can result in having code in hundreds, even thousands, of places depending on the complexity of your project. The tangled mess that results is called “spaghetti code” because of how difficult it can be to decipher, edit and debug. Additionally, there are different syntax rules when you put ActionScript on an object. For someone just learning Flash, this can be confusing. Stick with putting your ActionScript in a central location, and the result will be more elegant and versatile code.

When it comes to coding, you cannot be too organized. Group your ActionScript into related sections to make finding and editing the code easier. Use comments to communicate a particular script’s purpose. Comments are especially useful in a team environment where many people may be involved in editing the code. They are also priceless when revisiting code you have written in the past. You’d be surprised at how foreign your own thought processes can seem after even a short period of time.

Fig. 2 – Sample ActionScript. Note that the current selection is a frame, not an instance on the stage.

Behaviors

Behaviors are prepackaged bits of code that can be added to your project. They are convenient and can potentially save you time. Behaviors are especially useful to novice Flash designers who want to add interest to their piece, yet don’t know much about ActionScript. However, the end result when using behaviors is similar to the “spaghetti code” mentioned earlier. In a complex project, behaviors can be as much of a hindrance as a help.

For a designer who still wants to use behaviors, here are a few guidelines that will save you a lot of trouble:

• Plan ahead. Spend some time determining the number, types, and locations of the behaviors you will need. You can save yourself a lot time and effort by knowing early whether behaviors will work for your needs.
• Keep it simple. If you only have a few behaviors, and avoid putting them on object instances on the stage, they can be a real convenience. If things get more complicated, though, try to stick to ActionScript.
• Be consistent. If you use behaviors for a particular project, stick with them. Avoid writing ActionScript that has to interact with the behavior code. This will help streamline the collaboration process and prevent any potential errors.

Behaviors can be quick and easy. But like Yoda says, that way leads to the dark side. Behaviors encourage sloppy code and work flow, but they can be helpful in a time crunch. For anyone who is looking to create elegant, high quality work, remember that there is nothing that can be done with behaviors that cannot be done with ActionScript. “Mind what you have learned. Save you it can.”

Fig. 3 – A behaviors panel with its associated ActionScript. Notice the difference in syntax between this code and the ActionScript placed directly on a frame (fig. 2). Also note that the current selection is an instance of “start_btn” rather than a frame.

Video

Flash 8 introduced significant advancements for working with video. In the past several years video has spread throughout the Internet, thanks in large part to Flash video (FLV) and sites like YouTube. Here are a few practices that can help you get the best performance from your video, and provide the best experience for the user:

• Decide things like dimensions, quality, duration, format, and download type before you import a video into Flash.
• Edit and compress video outside of Flash.
• Give the user some control. Include pause, close and mute at the very least.

Remember that video files are relatively large. They are likely to be the biggest files in your collection of assets. Therefore, lots of video in a Flash document will equate to a long download time. One excellent way to include video and keep download time short is to keep your FLV files separate from your main SWF. In this way, download time is reduced and the user will only download the video(s) they wish to see. Also, remember that the more visual complexity (special effects, numerous colors, etc.) you have in your video, the larger the video file will be.

Optimizing

The idea of optimization is to minimize your file size without sacrificing quality. A small file size equates to a shorter download time, which tends to please the user. People like immediate results, especially when they are on the Internet.

You may have noticed, by now, a significant emphasis on organization, yet it bears repeating. You cannot be too organized when working with Flash. Plan ahead and make important decisions early in order to avoid having an excessively large or complex file.

Bitmaps

• Avoid using lots of large image files. If you need to display a large amount of high quality images (such as in a photo gallery), store them outside of your main SWF and call them with ActionScript.
• Optimize your bitmaps outside of Flash.
• A resolution of 72dpi is ideal for the web.
• Compress your images as much as possible without causing an unacceptable loss of quality.
• The ideal bitmap format for Flash is the PNG file type. PNG preserves the alpha channel, and allows for a small amount of editing within Flash.

Here are a few more tips for optimizing your Flash project:

• Frame rate directly relates to how hard a user’s computer must work to play the SWF. Choose the lowest frame rate that keeps the animation smooth. Your frame rate should never be higher than 30fps.
• Gradients and alpha transparency will increase your file size. Use them sparingly.
• Keep it simple and keep it clean. The fewer moving elements and visual artifacts in your piece, the smaller the file will be.
• Use external SWFs and FLVs to reduce the file size of complex projects. You can call them with ActionScript so the Flash Player downloads them as needed.

Preloaders

If your file size remains large, despite your efforts to optimize, you could consider using a preloader. A preloader is a simple animation that runs until the entire SWF has loaded, and then proceeds to the first frame of the main animation. While a preloader can be entertaining, its main purpose is to inform the user, so a visual or textual indication of the load progress is recommended. A preloader may not be appropriate for all situations, but in many instances it is the best solution for working with a large file.

Ultimately, it is up to you, the designer, to determine what strategy will work to provide the best experience for you, your team, and the user.

Miscellaneous Dos and Don’ts

There is a good rule that goes, “Just because you can do something, doesn’t mean you should.” This axiom applies to many things in life, and certainly to Flash.

• Don’t be annoying. That includes the use of flashing objects and/or rapid color changes. Not only will you cause seizures, but you will chase users away rather than invite them in.
• Flash comes with a preset rainbow gradient. Unless you’re making a rainbow, don’t use it.
• Learn and apply some fundamental design principles.
• If you use sound, warn the user before it comes, and/or allow them to turn it off. There is little worse than a shockingly sudden noise and the inability to turn it off.
• Transparent ads that float above regular website content should have a close button.
• If you intend to spend a significant amount of time with Flash, learn the keyboard shortcuts. You’ll be surprised at how much time they will save you.

Additional Flash Resources

We recognize that this article is not a comprehensive list of best practices or Flash techniques. Fortunately, there is a seemingly endless supply of resources for someone who is seeking to learn more. Here are a few places we suggest:

Adobe’s Flash Developer Center –
http://www.adobe.com/devnet/flash/

Tutorials –
http://www.flashkit.com/tutorials/
http://www.kirupa.com/developer/flash/index.htm

ActionScript –
http://www.actionscript.org/

This entry was posted on Thursday, August 21st, 2008 at 5:57 pm and is filed under Learning is Living. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.