Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

An Introduction to Using Code Snippets in Flash CS5

  • Print
  • + Share This
Chris Florio, contributor to ActionScript 3.0 for Flash Professional CS5 Classroom in a Book, introduces the new Code Snippets feature in Flash CS5. This article shows how to add rich interactivity to Flash projects without writing any code, as well as how to modify the code snippets that Flash creates to customize your interactivity without a mastery of programming syntax.
Like this article? We recommend

ActionScript 3.0 has been available since 2006 and has been enhancing the power of Flash tremendously since then. However, even though most experienced ActionScript programmers would agree that ActionScript 3.0 (AS3) is easier to use than earlier versions of ActionScript, many Flash users have still not yet made the transition to AS3. The main reason cited for this is that many users found AS3 difficult to get started with, and AS3 has lacked good tools to assist beginners. This absence has been rectified with the introduction of the Code Snippets panel in Flash CS5.

A code snippet is a piece of prewritten ActionScript code, usually accompanied by explanatory comments. Flash CS5 ships with dozens of code snippets that allow users to accomplish many of the most common ActionScript tasks without writing a line of syntax. There are code snippets for linking to a URL, navigating the Flash timeline, changing and animating properties of a MovieClip, loading all manner of external content, playing sounds and video, and many other common tasks.

In addition to being a good way to avoid writing any ActionScript, code snippets are a good tool for helping beginners to learn ActionScript. By examining the code that is written using code snippets, beginners can get comfortable with the ActionScript syntax used to perform common tasks. The comments included with the built-in code snippets include instructions for customizing and modifying the code snippets, and from there it is not a big step to writing your own ActionScript files. More experienced programmers can even make their own code snippets for reusing or sharing frequently used chunks of ActionScript code.

The following exercise will introduce you to the basics of working with code snippets. You will need Flash CS5 to open the .fla file that is included with this tutorial. You can download a free trial version of Flash CS5 at http://www.adobe.com/products/flash.

Downloading the Example Files

To begin the example, download the codeSnippetExample.zip file and open the codesnippets_start.fla file from the unarchived folder in Flash CS5. This file has graphics laid out on the stage for a simple interactive project but contains no ActionScript and has no functionality. You will use code snippets to add the functionality to this project.

  1. Arrange your Flash workspace so that you can see the Stage, the Timeline, the Properties Inspector, the Actions panel, and the Code Snippets panel (see Figure 1).
  2. Highlight the tabbed graphic that says “Text”, noticed in the Properties inspector, that this is a movie clip with the instance name page1_mc. This movie clip contains an instance of the TextArea component, which has the instance name field1_txt. You will use a code snippet to load an external text file into the TextArea component when this tab is clicked.
  3. The second “Video” tab is a movie clip with the instance name page2_mc and contains an instance of the FLVPlayback component which has been given the instance name vidPlayer. The FLVPlayback component is used to load, play and control video files. You will use a code snippet to load an external video file into the vidPlayer component when this tab is clicked.
  4. The third “Images” tab is a movie clip named page3_mc. You will use a code snippet to load an external JPEG image when this tab is clicked.
  5. Click on the orange star, and note that it is a movie clip with the instance name star_mc. You will soon add code to make this image become a custom cursor.
  6. Click the text that reads “Go to URL”. This is a text field with the instance name URL_txt. You will use a code snippet to navigate to a URL in your default browser when this text is clicked.
  • + Share This
  • 🔖 Save To Your Account