Leveraging code snippets and using enhanced code hinting

This article is the third of seven in a series highlighting examples of programming strategies that make it easier than ever before to create rich content in Adobe Flash CS5 Professional. Flash Professional CS5 includes many helpful new features for coding with ActionScript 3. The interface includes the new Code Snippets panel—a code library that is very easy to use. In the Code Snippets panel, the prewritten scripts are categorized and organized into several subfolders (see Figure 1).

For example, you can assign the Move With Keyboard Arrows script from the Animation folder to an instance in the Timeline:

1. Select a named movie clip instance on the Stage.
2. Double-click the name of the snippet from the list in the Code Snippets panel.

A frame script is automatically written to the instance, using the instance name you've set. Look at the Actions panel and notice that the instance names in the code are automatically updated to use the instance name you entered in the Property inspector (see Figure 2).

3. Test the movie and see how the code adds interaction in the published SWF file.
4. In this example, you can press the arrow keys on the keyboard to move the movie clip in the corresponding direction.

If you are new to ActionScript 3, you can learn a great deal by analyzing the scripts generated by the Code Snippets panel. And if you are more experienced with programming, you can add your own scripts to the Code Snippets panel, to make it easy to apply them to instances on the Stage.

To prepare your custom scripts for use in the Code Snippets panel, follow these steps:

1. Open the Actions panel to edit the script you want to add to the Code Snippets panel.
2. Replace all the hard-coded instance names in the script with the placeholder name instance_name_here. For example, you can revise the script generated by the Code Snippets panel when you double-clicked the Move With Keyboard Arrows option, as though it was a custom script that you wrote from scratch.
3. Declare a variable named nMove with a datatype of Number at the very top of the script, and replace all references of the number of pixels with the variable name, so that its value is easy to change in a single location (see Figure 3).

4. After editing the code, select the entire script in the Actions panel. Click the Code Snippets link in the top right corner. The Code Snippets panel appears. Click the Options menu icon (horizontal lines) in the top right corner to see the menu items appear. Click the first option listed: Create New Code Snippet.

The Create New Code Snippet dialog box appears (see Figure 4).

5. Enter a title for the snippet in the Title field. For this example, enter the title: Arrow key navigation.
6. The tooltip will appear when you hover your cursor over the item listed in the Code Snippets panel. For this example, enter the tooltip: Move the instance by pressing the arrow keys.
7. Click the Auto-fill button to use the code you selected in the Actions panel.
8. For this example (and when needed in the future), select the check box next to the option: Automatically replace instance_name_here when applying code snippet.
9. Click OK.

The dialog box closes and the Code Snippets panel updates (see Figure 5).

In addition to the Code Snippets panel, the code hinting functionality has also been improved in Flash Professional CS5. Now, when you create ActionScript classes in packages Flash automatically inserts the import statements. This timesaving feature is especially helpful if you write a lot of custom classes.

After the release of Flash CS4, the code hinting worked as you added the datatype of a variable declaration. However, when writing a constructor, you had to type the entire line (or copy the datatype from the variable and then paste it after the new keyword). In Flash CS5, the code hinting works when a constructor is being called. Flash displays the code hint menu immediately after you type the new keyword, with the variable's datatype listed on the top (see Figure 6).

Even better, the code hinting includes properties and methods of your custom classes:

For example, the properties and methods of the generic class shown above are included in the list of code hints (see Figure 7).

Note that the code hinting is not shown unless the class has been imported into a package. However, as soon as you declare a variable, the import statement is automatically inserted. For this reason, class constants require a workaround to see the code hints.

For example, consider the Event.ENTER_FRAME constant used for event listeners. When you begin typing that line, the code hinting is not invoked by just typing the class, Event. To workaround this, you can declare a temporary variable with the Event datatype, like this:

After declaring the variable of the type Event, the import statement of the Event class is automatically inserted and the code hinting for the class begins working immediately.

Where to go from here

As you can see from these examples, there are many new possibilities to explore when developing ActionScript 3 projects in Flash Professional CS5. Hopefully the scripts provided in these examples will serve as the starting point as you begin experimenting with the new events and capabilities for delivering rich content with interactivity.

Be sure to check out my other articles in this series:

• Working with TLF Text to control the appearance of text elements
• Manipulating springs of an IK Bone for animations
• Dynamically drawing a vector instance that contains elements
• Displaying the audio waveform captured from a microphone
• Deploying projects on devices with touch panels
• Catching errors globally to facilitate troubleshooting

To learn more about developing with ActionScript 3, see the following online resources:

• ActionScript Technology Center
• ActionScript 3.0 Reference for the Adobe Flash Platform
• Adobe ActionScript Cookbook

Also be sure to visit the Flash Developer Center to find more articles and sample files to help you take your Flash projects to the next level.