Lets face it, writing ActionScript in Flash has never been its strong suit. New users had to face a dauntingly empty Actions panel, and advanced users had to pillage previous projects to speed development. Flash CS5 has changed all this starting with the introduction of the surprisingly easy Code Snippets panel, advanced code hinting and custom class introspection. Lets take a tour of these new features.
Open the Starter File
Download the exercise file for this tutorial here and unzip it onto your desktop or other location of your choosing. Inside of the 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 I’m about to show you will only work when targeting ActionScript 3. Also note that on the Stage there is one button. Select the button with the Selection tool and in the Properties panel give it an instance name of “image_btnâ€.
Using a Code Snippet
With the image_btn selected, open the Code Snippets panel (Window>Code Snippets). Notice that the Code Snippets panel contains many folders of ActionScript 3 code that can be applied to any ActionScript 3 project. From controlling the timeline, opening web pages, 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. So open the “Load and Unload†folder. With the image_btn selected, double-click the “Click to Load/Unload SWF or Image†snippet to add it to the button.
Reviewing a Code Snippet
When a code snippet is added to a project, Flash adds an “Actions†layer to the 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. “images/myimage1.jpgâ€). Test the file (Control>Test Movie>Test) and click the image_btn. Notice how an image is loaded and unloaded with each click.
Adding ActionScript
This code snippet places images in the upper right hand 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. Enter the code in the image above which includes a “COMPLETE†listener that calls a skeleton function named “imageLoadedâ€. Once that function is called the image will be added to the Stage using “addChild(fl_Loader)â€;
Centering an Image 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, get the stage width and divide by 2. 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 find out the center of the image and subtract that from the stageWidth. Then we can apply it to the x position of the image. A shown in the image above, in the “imageLoaded†function add line 26.
Center an Image Vertically
Centering the image vertically is done similarly to centering the image horizontally. Get the stage height and divide by 2 to get the center. Then, get the height of the image and divide by 2. Subtract the center of the stage from the center of the image then apply that to the image’s y position. Review the image above and add line 27 to center the image vertically.
Using Custom Classes
Anytime a movieclip or button is being used we are actually using an object from the built-in movieclip class. In addition to built-in classes, custom classes can be used enabling even quicker development and more flexibility. There are many custom classes available but for this tutorial we will use the TweenMax class that enables easy animation of many properties and can be downloaded here: http://www.greensock.com/tweenmax. (Even though it is free, I encourage you to donate.) Unizip the file and place the com folder in the folder where you saved the ImageGallery.fla
Code Hinting for Custom Classes
Before fading in this image using TweenMax we need to set the alpha (transparency) of the image to 0, as shown on line 29 in the above image. Then, an instance of the TweenMax class needs to be created by typing “var alphaTween:TweenMaxâ€. 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, as shown in the image above. Select the TweenMax code hint and Flash will complete the word and automatically add the needed import statement at the top of the Actions panel.
Using a Custom Class
Complete the code by placing an alpha tween inside the “alphaTween†variable. Do this by adding line 31 in the image 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 the image_btn to watch the image fade in from the center. Note that this is just an example of one tweened property. I encourage you to explore the many other options available on www.greeensock.com and refer to the Getting Started page for additional help.
Create a New Code Snippet
Any ActionScript code can be saved as a new code snippet for use later or to share. To start off, open the Actions panel and review the code and insert any additional comments that you want. Such as a note that the com folder from greensock.com is needed in the same folder as the file. The more detail added the easier it will be to reuse. Next, select all the code for the new snippet. Then, open the Code Snippets panel (Window>Code Snippets). At the top of the Code Snippets panel open the Options menu and select “Create New Code Snippetâ€.
The first step in creating a code snippet is to define the title and tooltip as shown in the image above. Next, click the “Auto-fill†button to paste in the selected code. Next, check the box to automatically replace “instance_name_here†when applying the code snippet. Then, replace the “image_btn†reference with “instance_name_hereâ€. This will ensure that regardless of the instance name of the next button this snippet is applied to the code will change accordingly. Select OK to make the snippet.
Applying a Custom Code Snippet
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 copy it (Command-C [PC: Ctrl-C]). Then, create a new file (File>New) and select ActionScript 3 as the type. Click OK. In this new file paste in the copied button (Command-V [PC: Ctrl-V]).  Give the button a new instance name of “new_btn†using the Properties panel. Save this file as “FlashGallery2.flaâ€, in the same location as the previous Flash file.
With the button still selected, open the Code Snippets panel (Window>Code Snippets). In the Custom folder, double-click the “Click to Load, Fade, Center Image†snippet to apply it to the button. Review the code. On line 30, replace the reference of “image1.jpgâ€Â to “image2.jpgâ€. Test the file (Control>Test Movie>Test) and click 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.
Exporting and Importing Code Snippets
Lastly, after all our hard work is done we can easily share code snippets by simply exporting. At the top of the Code Snippets panel (Window>Code Snippets) click the Options button. Then, select Export Code Snippets XML. Give the XML file a name and save to the location of your choice. You can also import code snippets through that same menu. Interested in more flexibility? Through the same menu we can also “Edit Code SnippetsXMLâ€. This will open the XML file in Flash for further editing.
Download my Code Snippets.xml here. Enjoy!
