[If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.]

Let’s face it, in the past new Flash users had to deal with a dauntingly empty Actions panel and advanced users had to pillage previous projects to speed up development. Flash CS5 has changed all this with the introduction of the surprisingly easy Code Snippets panel, advanced code hinting, and custom class introspection. Let’s take a look.

1 OPEN THE STARTER FILE
Download the exercise file for this tutorial from the Layers website and unzip it onto your desktop or other location of your choosing. Inside of the zip file you’ll find a file named ImageGallery.fla. Open this file in Flash CS5. It’s important to note that this file targets ActionScript 3, since the code we’re about to show you will only work when targeting ActionScript 3. Also, note that on the Stage there’s one button. Select the button with the Selection tool (V) and notice in the Properties panel that the Instance Name is image_btn.

2 USE A CODE SNIPPET
With the image_btn selected, open the Code Snippets panel (Window>Code Snippets). You’ll see folders of ActionScript 3 code that can be applied to any ActionScript 3 project—from controlling the Timeline, opening webpages, playing video, and using custom cursors to generating random numbers. I encourage you to play around with this code, but for our purpose we want to load an image when the image_btn is clicked. Click on the triangle to the left of the Load and Unload folder to twirl it open. With the image_btn selected, double-click on the Click to Load/Unload SWF or Image snippet to add it to the button.

3 REVIEW THE CODE SNIPPET
When a code snippet is added to a project, Flash adds an Actions layer to the Timeline panel (Window>Timeline) and opens the Actions panel to reveal the ActionScript created. Comments (in gray) are also added to explain what the code does and how to modify it. In this case, the comments mention how to replace the image path with an image path of your own. This path can be on the Internet or in a local folder (e.g., “/Macintosh HD/images/myimage1.jpg”). Test the file (Control>Test Movie>Test) and click on the image_btn in the corresponding dialog. Notice how an image is loaded and unloaded with each button click.

4 ADD ACTIONSCRIPT
This code snippet places images in the upper-left corner by default, but we’d like this image to be centered on the Stage. In order to do this, we need to use contentLoaderInfo to find out when the image is completely loaded, then we can position the image accordingly. Type the lines in the image shown here in the Actions panel, which includes a COMPLETE listener that calls a skeleton function called imageLoaded. Once that function is called, the image will be added to the Stage using addChild(fl_Loader).

5 CENTER HORIZONTALLY
Before we can center the image, we need to determine where the center of the Stage and image is. To determine the horizontal center of the Stage, we need to get the Stage width and divide by two. Apply this to the x position of the image and it will only put the left edge of the image in the center. So, we need to also get the center of the image and subtract that from the stageWidth. Then we can apply it to the x position of the image. Add the line of code circled above to the imageLoaded function.

6 CENTER VERTICALLY
Centering the image vertically is done similarly to centering the image horizontally. Get the stage height and divide by two to get the center. Then, get the height of the image and divide by two. Subtract the center of the Stage from the center of the image, then apply that to the image’s y position. Review the image here and add the circled line to center the image vertically.

7 USE CUSTOM CLASSES
Anytime a movie clip or button is being used we’re actually using an object from the built-in movie clip class. In addition to built-in classes, custom classes can be used allowing for even quicker development and flexibility. There are many custom classes available, but for this tutorial we’ll use the TweenMax class that allows for easy animation of many properties. Go to www.greensock.com/tweenmax and download the AS3 file in the top-right corner of the webpage (it’s free, but donations are encouraged). Unzip the file and place the Com folder in the same location where you saved the ImageGallery.fla.

8 CUSTOM CODE HINTING
Before fading in this image using TweenMax, we need to set the alpha (transparency) of the image to zero. Do this by typing the first line of code circled in the image above. Then, an instance of the TweenMax class needs to be created by typing “var alphaTween:TweenMax” on the next line in the Actions panel. Notice as soon as the colon is typed, Flash displays code hinting not just for built-in classes but for custom classes recognized in the Com folder. Double-click the TweenMax code hint and Flash will complete the word, automatically adding the needed import statement in the Actions panel.

9 USING A CUSTOM CLASS
Complete the code started in the last step by placing an alpha tween inside the alphaTween variable. Do this by adding the circled code above. This line takes the fl_Loader (which contains the image), and within two seconds it animates the alpha to 1 (which is 100% and completely opaque). Test the file (Control>Test Movie>Test) and click on the image_btn to watch the image fade in from the center. Note: This is just one example of a tweened property—I encourage you to explore the many other options available on the GreenSock website and refer to the Getting Started page for additional help.

10 CREATE A NEW CODE SNIPPET
Any ActionScript code can be saved as a new code snippet for use later or to share. To start, in the Actions panel, review the code thoroughly and add any additional comments necessary, such as a note that the Com folder from www.greensock.com is needed in the same folder as the FLA file. The more detail added, the easier it will be to reuse. Then, click-and-drag to select all the code in the Actions panel for the new snippet. Then, at the top-right of the Code Snippets panel, click the Options menu and select Create New Code Snippet.

11 FINISH THE CODE SNIPPET
The first step in creating a code snippet, is to define the Title and Tooltip as shown above. Then, click the Auto-fill button to paste in the selected code. Next, enable the Automatically Replace Instance_Name_Here When Applying Code Snippet checkbox. Then, replace the “image_btn” reference with “instance_name_here.” This will ensure that regardless of the instance name of the next button, the snippet applied to the code will change accordingly. Click OK to make the snippet.

12 CREATE A NEW FILE
Now that a custom code snippet has been created, it can be used in any Flash file. First, select the button on the Stage and press Command-C (PC: Ctrl-C) to copy it. Create a new file (File>New) and in the Type section, select ActionScript 3.0. Click OK. In this new file, press Command-V (PC: Ctrl-V) to paste the copied button and use the Selection tool to position it. Give the button a new Instance Name of new_btn in the Properties panel, and save (File>Save As) this file with a different name in the same location as the previous Flash file.

13 APPLY YOUR CUSTOM CODE SNIPPET
With the button still selected, open the Code Snippets panel. In the Custom folder, double-click the Click to Load, Fade, Center Image snippet to apply it to the button. Review the code in the Actions panel and replace the filename of the image that you’ve been loading in the code (not the gray instructions) to a different filename using an image of a different size. Test the file and click on the new_btn to watch a new image fade in from the center—even though this is a new file with a different Stage size.

14 EXPORTING CODE SNIPPETS
Lastly, after all the hard work is done, we can easily share code snippets by simply exporting. In the Code Snippets panel, click on the Options menu and select Export Code Snippets XML. Give the XML file a name and Save to the location of your choice. Conversely, code snippets can be imported through that same menu. Interested in more flexibility? Through the same menu we can also use Edit Code Snippets XML. This will open the XML file in Flash for further editing.

ALL IMAGES BY PAUL TRANI UNLESS OTHERWISE NOTED