Using Code Snippets in Flash CS5

While you can do a lot using the timeline and drawing tools in Flash, adding interactivity almost always involves writing code. To help those of us who know a little bit of ActionScript 3 but could use a leg up to get running, you have some help via the Code Snippets feature introduced in Flash CS5.
What are Code Snippets?
Code snippets are essentially generic pieces of code that demonstrate how to do something. For example, let’s say that you want to do something when a button is pressed. This involves two things - creating an event handler and wiring up an event to call that event handler when fired.
The code for doing that would look as follows:

myButton.addEventListener(MouseEvent.CLICK, mouseClickHandler);

 

function mouseClickHandler (event:MouseEvent):void

{

trace("Mouse clicked");

}

Notice that no assumption about your particular project or preferences is made. I am using a generic instance name for both the button instance as well as the event handler associated with the Click event. To make it more applicable to your application, it is up to you to modify and revise it.
Despite the code being very generic, it does help you recall how to associate an event with an even handler. In general, code snippets are not meant to be a replacement for getting away with adding interactivity without writing code.Code snippets are really just shortcuts to help you recall how to do something that you simply forgot the syntax for. You can argue that programming is really about taking your ideas and remembering the appropriate syntax to use to bring your ideas to life.
The Code Snippets Panel
Similar to how behind every awesome man is an even more awesome woman, behind every awesome feature is an awesome panel that takes up space in the UI. The Code Snippets feature is no different.
The Code Snippets panel can be accessed by clicking the Code Snippets button that by default is docked to the left of your Properties panel:

[ the Code Snippets button brings up the Code Snippets panel ]

If you don’t see the Code Snippets button, go to Window | Code Snippets to display the panel. Regardless of how you get the panel up, the Code Snippets panel will look like the following image:

[ behold - the Code Snippets panel in all its magnificence! ]

This panel displays a categorized list of code snippets that you can browse and add. In the next part, let's look at how to actually take some of these code snippets and use them!

In the previous part, you received an introduction to code snippets and learned how to access the Code Snippets panel in the Flash CS5 panel.

Copying/Pasting a Code Snippet
According to how I use code snippets, the most common way to add a code snippet is to look at something that you are interested in and copy it to your clipboard for pasting in the appropriate location in your code later.
To copy a code snippet, from the Code Snippets panel, find a code snippet you are interested in and select it:

[ select a code snippet you want to use ]

Once a snippet is selected, click on the Copy button found in the top-left corner of your Code Snippets panel:

[ go ahead and copy a code snippet first ]

Click on that copy button to copy your snippet into memory. A dialog will appear with suggestions on what you can do with your copied snippet:

As the dialog says, you can copy this snippet into your Actions panel or AS file, but you can actually pretty much paste this snippet anywhere that you want. It is just some text stored in memory.
Below is a scaled down view of my Actions panel where I pasted my code snippet:

[ what my pasted snippet looks like ]

You can also copy a code snippet by just right-clicking on a snippet in your Code Snippets panel and selecting Copy to Clipboard:

[ all the cool kids actually use the right-click menu ]

The end result would be exactly identical to the behavior you would have had when you clicked on the Copy button to copy your code snippet instead.
Adding a Snippet to a Frame
Besides copying a code snippet to your clipboard for pasting later, you can associate a code snippet with a particular object. That’s what the first button found to the left of the Copy button does:

[ the insert a frame button ]

You need to have an element selected on your artboard in order to do this, and if your selected element isn’t an object with an instance name, it will automatically be taken care off for you.
The only advantage of using this approach over the Copy to clipboard approach is that some of your code snippets will auto-fill the instance name of your selected element to save you from having to manually type it in.
Conclusion
Code snippets provide some much-needed assistance to help you navigate some of the common pieces of ActionScript that you can easily forget. While this article only talked about how to consume code snippets, note that you can actually create code snippets as well as import code snippets from a 3rd party! Pretty cool.