Adobe
Sign in My orders My Adobe

by Yuki Shimizu

Yuki Shimizu
  • Adobe

Content

Modified

3 May 2011

Page tools

best practice Flash Professional workflow

Prerequisite knowledge

This article is intended for users who are familiar with Flash. Basic understanding of symbols, the Stage, timelines, keyframes, the Properties panel, testing movies, and motion tweens is required. Knowledge of ActionScript is helpful, but not required.

User level

Beginning

Required products

Sample files

Adobe Flash Professional CS5 has a feature called the Code Snippets panel that contains ActionScript 3 snippets that are commonly used in projects such as banner advertisements and games. If you've been searching for an easy way to start learning ActionScript 3 and want to add simple interactivity to your projects, then you should learn about this panel. Code snippets are useful not only individually, but can be mixed and matched to rapidly create complex interactive projects. Advanced programmers can use this panel to create and store custom snippets for later use.

Each snippet comes with instructions that explain how to use it and what code in the snippet needs to be modified. Use snippets to add simple interactivity to your projects quickly, without having to know much about ActionScript. Code snippets can also help you learn how ActionScript 3 code is constructed.

During this tutorial, you will learn how to do the following:

  • Apply snippets to your graphic assets (both the Add to Frame method and the Heads Up Display method that's new in Flash Professional CS5.5)
  • Edit the properties of snippets
  • Combine multiple snippets

You will also learn various tips to get the most out of the Code Snippets panel.

The following snippets are featured in this tutorial:

  • Click To Go To Web Page
  • Click To Go To Frame And Play
  • Custom Mouse Cursor
  • Stop At This Frame
  • Move With Keyboard Arrows
  • Play A Movie Clip

What is the Code Snippets panel?

Before you start the tutorial, it will help to know a little more about the Code Snippets panel and what it can do. The default code snippets are written in ActionScript 3. However, you can create your own ActionScript 2 snippets (or ActionScript 3 snippets) and save them in the panel if you want to. Code snippets can be applied to any shape, bitmap, video, text, or symbol. When you apply a code snippet, Flash automatically converts a shape to a movie clip symbol and gives it an automatically generated instance name, when one is not already specified.

Opening the Code Snippets panel

After creating a new ActionScript 3 FLA file, there are two ways to get to the panel:

  • Choose Window > Code Snippets
  • Choose Window > Actions to open the Actions panel and then click Code Snippets at the top right corner

In addition to the snippets themselves, the panel features three buttons (see Figure 1):

  • Add to Frame: Clicking this button or double-clicking a snippet adds the selected snippet to the Actions layer of a current frame (where the timeline playhead is).
  • Copy to Clipboard: Clicking this button copies the selected snippet to the Clipboard. You can paste it anywhere you want.
  • Options for Advanced Users: Although snippets are written for beginning programmers, advanced users can use this panel to save and organize their own snippets, and to import or export snippets.
Examining the Code Snippets panel
Figure 1. Examining the Code Snippets panel

Applying a snippet – Method 1: Add to Frame

Follow these steps to apply your first snippet:

  1. Draw a shape on the Stage and select it
  2. In the Code Snippets panel, expand the Actions category and double-click the Click To Go To Web Page snippet. A notification explains that the shape will be converted to a movie clip (see Figure 2). Click OK.
Notification for converting to a movie clip symbol
Figure 2. Notification for converting to a movie clip symbol
  1. The Actions panel opens and the instructions and code are inserted. Choose Control > Test Movie. When you click the shape, your web browser should open and take you to www.adobe.com.

Applying a snippet – Method 2: HUD (Heads Up Display)

This method is new in Flash Professional CS5.5. Follow these steps to apply a snippet through the HUD:

  1. Draw a shape on the Stage.
  2. In order to apply a snippet via the HUD, convert a shape to a Movie Clip or a Button symbol. Right-click the shape and choose Convert to Symbol from the context menu. Select Movie Clip from the Type pull-down menu. Click OK to close the dialog box.
  3. Select the symbol on the Stage.
  4. In the Code Snippets panel, expand the Actions category and single-click the Click To Go To Web Page snippet. Two HUD buttons appear; click the Show Code button. The content of the snippet is displayed (see Figure 3).
Click To Go To Web Page snippet displayed in the HUD
Figure 3. Click To Go To Web Page snippet displayed in the HUD
  1. There are two areas in the snippet that need to be modified. They are identified by the blue text. Click on "instance_name_here" and type in the instance name of your choice. For example, myMovieClip1.
  2. Click on "http://www.adobe.com" and type in the URL of your choice.
  3. Click the Insert button to close the HUD.
  4. Choose Control > Test Movie. When you click the shape, your web browser should open and take you to www.adobe.com or the URL you specified in Step 6.

Anatomy of a code snippet

Take a closer look at the inserted instructions and snippet (see Figure 4). The shape you drew on the Stage is converted to a movie clip symbol called Symbol 1. The instance name movieClip_1 is automatically generated for you. The function name fl_ClickToGoToWebPage is also automatically generated. When you use snippets multiple times, the number used in the generated instance and function name increases; for example, movieClip_2, movieClip_3, fl_ClickToGoToWebPage_2, fl_ClickToGoToWebPage_3, and so on. You do not have to do anything special to create a clickable movie clip symbol that will take you to a specific URL. The only thing you need to modify to fit your needs is the URL in the URLRequest() call. Replace with the URL of your choice.

Example of a code snippet
Figure 4. Example of a code snippet

Now that you have learned the basics of the Code Snippets panel, you are ready to dive into the sample projects.

Example 1: Applying and modifying snippets

In this section, you are going to learn how to add and modify snippets by creating a banner ad that incorporates two snippets: Click To Go To Web Page and Click To Go To Frame And Play. Also, you'll learn how to replace the default mouse cursor with your own art work by using the Custom Mouse Cursor snippet.

Below is the completed version of the project you are going to make. Click on Play to try it. Shoot the UFO graphic with the mouse cursor. A separate browser window should launch and load www.adobe.com:

This content requires Flash To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player. To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Step 1: Stop At This Frame and Click To Go To Frame And Play

First you want to insert code that pauses at a specific frame:

  1. Open the Sample1_Step1.fla file.
  2. Choose Control > Test Movie in Flash Professional to play the content. Notice that the animation starts before you click >>PLAY. That is because the play button text is placed in Frame 1 of the Timeline. The rest of the animation plays without waiting for user input.
  3. Make sure that the playhead of the Timeline is at Frame 1.
  4. Choose Window > Code Snippets to open the Code Snippets panel.
  5. Double-click the Stop At This Frame snippet in the Timeline Navigation category. The Actions panel opens and shows the following instructions and code:
/* Stop at This Frame The Flash timeline will stop/pause at the frame where you insert this code. Can also be used to stop/pause the timeline of movieclips. */ stop();

Notice that the Actions layer is created in the Timeline, on top of all other layers. You have now inserted your first ActionScript code into Frame 1 of your movie.

  1. Choose Control > Test Movie to confirm that the movie is stopped at Frame 1.
  2. Close the Test Movie window (but do not close the FLA file).
  3. To make the >>PLAY button go to Frame 2 of your movie when the user clicks it, select the >>PLAY button symbol on the Stage.
  4. Choose Window > Code Snippets to open the panel and double-click the Click To Go To Frame And Play snippet in the Timeline Navigation category. Flash displays a notification to let you know that it is creating an instance name (see Figure 5).
Flash automatically generating an instance name
Figure 5. Flash automatically generating an instance name
  1. Click OK. Flash automatically generates the instance name (in this case, button_1) for the >>PLAY button symbol. If you want to confirm this, select the button and look at the Properties panel. The Actions panel opens and the following instructions and code are inserted underneath the stop(); code you inserted in the step 5:
/* Click to Go to Frame and Play Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame. Can be used on the main timeline or on movie clip timelines. Instructions: 1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked. */ button_1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame); function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void { gotoAndPlay(5); }
  1. Read the inserted instructions carefully. They explain exactly what this snippet does and what code you need to modify to make it useful for your project.
  2. In this sample FLA file, you want the Timeline playhead to move to Frame 2 and continue to play when the user clicks the >>PLAY button. Therefore, change the sample code from gotoAndPlay(5); to gotoAndPlay(2);.
  3. Choose Control > Test Movie and click the >>PLAY button to resume the movie.
  4. If you do not see the expected result, open the Sample1_Step2.fla file, which contains the completed code for Step 1.

You have just added user control to your project!

Step 2: Click To Go To Web Page

Next, make the flying UFO movie clip symbol clickable and launch the web browser with the URL adobe.com when it is clicked:

  1. Open the Sample1_Step2.fla file, or continue working on your Sample1_Step1.fla file.
  2. Move the Timeline playhead to Frame 60. This is when the UFO movie clip first appears in the movie.
  3. Select the UFO movie clip symbol by clicking it. It is located on the right side of the Stage.
  4. Choose Window > Code Snippets to open the Code Snippets panel.
  5. Double-click the Click To Go To Web Page snippet in the Actions category. Flash once again notifies you that it is automatically generating an instance name, in this case movieClip_2.
  6. Click OK. The Actions panel opens and the following instructions and code are inserted in Frame 60 of the Actions layer:
/* Click to Go to Web Page Clicking on the specified symbol instance loads the URL in a new browser window. Instructions: 1. Replace with the desired URL address. Keep the quotation marks (""). */ movieClip_2.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage(event:MouseEvent):void { navigateToURL(new URLRequest(""), "_blank"); }
  1. Choose Control >Test Movie and click the animated UFO movie clip. Because you left the default URL in the code snippet, when the browser launches it will load www.adobe.com.

Step 3: Custom Mouse Cursor

The final step in the first example is to add a custom mouse cursor:

  1. Open the Sample1_Step3.fla file. Everything you have done in Steps 1 and 2 is already implemented. In addition, a new layer called "custom cursor" has been inserted.
  2. Move the Timeline playhead to Frame 2. Notice that a movie clip symbol named Cursor is placed in the top right corner of the Stage area. The custom cursor art is placed in Frame 2 because the custom cursor should not take over the default mouse pointer before the user clicks the >>PLAY button in Frame 1.
  3. Select the Cursor movie clip symbol on the Stage.
  4. In the Code Snippets panel double-click the Custom Mouse Cursor snippet in the Actions category.
  5. Click OK on the notification for the new instance name, which will be movieClip_3 this time. The Actions panel opens and the following instructions and code are inserted in Frame 2 of the Actions layer:
/* Custom Mouse Cursor Replaces the default mouse cursor with the specified symbol instance. */ stage.addChild(movieClip_3); movieClip_3.mouseEnabled = false; movieClip_3.addEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor); function fl_CustomMouseCursor(event:Event) { movieClip_3.x = stage.mouseX; movieClip_3.y = stage.mouseY; } Mouse.hide(); //To restore the default mouse pointer, uncomment the following lines: //movieClip_3.removeEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor); //stage.removeChild(movieClip_3); //Mouse.show();

At the end of the snippet there are instructions for restoring the default mouse pointer. Since you want the default mouse pointer to be shown after the movie loops and goes back to Frame 1, you will need to place this restoration code at the end of the movie.

  1. In the Timeline, right-click the last frame (Frame 258) of the Actions layer and select Insert Keyframe.
  2. Open the Actions panel and paste the mouse pointer restoration code. Remember to uncomment the code by removing the // characters from the start of each line of code.
  3. To see if the banner ad is fully functional, choose Control > Test Movie or open the Sample1_Complete.fla file.

Example 2: Combining multiple snippets

In this section, you are going to learn how to combine multiple snippets by completing an interactive project without using any timeline animation. You will learn how to use the Move With Keyboard Arrows and Play A Movie Clip snippets together. In addition, you'll also see how to use just part of a snippet.

Below is the completed version of the project you are going to make:

This content requires Flash To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player. To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Step 1: Move With Keyboard Arrows

Follow these steps to enable the user to move the UFO movie clip symbol by pressing the arrow keys:

  1. Open the Sample2_Step1.fla file.
  2. Select the UFO movie clip symbol on the Stage.
  3. Choose Window > Code Snippets to open the Code Snippets panel.
  4. Double-click the Move With Keyboard Arrows snippet in the Animations category. The Actions panel opens and the following instructions and code are inserted in Frame 1 of Actions layer:
/* Move with Keyboard Arrows Allows the specified symbol instance to be moved with the keyboard arrows. Instructions: 1. To increase or decrease the amount of movement, replace the number 5 below with the number of pixels you want the symbol instance to move with each key press. Note the number 5 appears four times in the code below. */ stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_PressKeyToMove); function fl_PressKeyToMove(event:KeyboardEvent):void { switch (event.keyCode) { case Keyboard.UP: { UFO_MC.y -= 5; break; } case Keyboard.DOWN: { UFO_MC.y += 5; break; } case Keyboard.LEFT: { UFO_MC.x -= 5; break; } case Keyboard.RIGHT: { UFO_MC.x += 5; break; } } }

In this sample FLA file, the instance name for the UFO movie clip is already specified as UFO_MC. Therefore, the instance name is not automatically generated when the snippet is applied. To confirm the instance name, you can select the UFO movie clip symbol and look at the name in the Properties panel.

  1. From the code that was inserted, you'll need to remove the Keyboard.LEFT case statement. Since the Left Arrow key is not used, delete the following lines of code:
case Keyboard.LEFT: { UFO_MC.x -= 5; break; }
  1. Choose Control > Test Movie and verify that pressing the arrow keys moves the UFO up, down, and right.

Step 2: Play A Movie Clip

Next, change the event that is attached to the Right Arrow key. Instead of moving the UFO to the right, pressing the Right Arrow key will shoot the light beam:

  1. Select the UFO movie clip symbol on the Stage.
  2. In the Code Snippets panel, double-click the Play A Movie Clip snippet in the Actions category. The Actions panel opens and the following instructions and code are inserted right after the Move With Keyboard Arrows snippet in Frame 1 of the Actions layer:
/* Play a Movie Clip Plays the specified movie clip on stage. Instructions: 1. Use this code for movie clips that are currently stopped. */ UFO_MC.play();

You need to modify the inserted code UFO_MC.play(); because what you want to play is not the UFO movie clip. Instead, you want the beam-Parent movie clip inside of the UFO movie clip to play when the Right Arrow key is pressed. The beam-Parent movie clip is nested inside of the UFO movie clip so that it moves as the UFO moves.

  1. Double-click the UFO movie clip to see the three layers inside: light, body, and beam.
  2. Hide the light and body layers so that you can see the small orange dot in the beam layer. This small orange dot is the beam-Parent movie clip.
  3. Select the beam-Parent movie clip. In the Properties panel you'll see the instance name for the beam-Parent movie clip is already defined as beam.

    Note: You can double-click the beam-Parent movie clip to see the detail of the beam animation, but that is not necessary for this tutorial.

    Now you know the instance name of the movie clip you want to play when the user presses the Right Arrow key. The correct code is UFO_MC.beam.play();. Because beam is nested inside of UFO_MC, you use dot syntax to reference the beam movie clip.

  4. In the case Keyboard.RIGHT statement, replace UFO_MC.x += 5; with UFO_MC.beam.play();:
case Keyboard.RIGHT: { UFO_MC.beam.play(); break; }
  1. Delete the Play A Move Clip code and instructions. The finished code should look like this:
/* Move with Keyboard Arrows Allows the specified symbol instance to be moved with the keyboard arrows. Instructions: 1. To increase or decrease the amount of movement, replace the number 5 below with the number of pixels you want the symbol instance to move with each key press. Note the number 5 appears four times in the code below. */ stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_PressKeyToMove); function fl_PressKeyToMove(event:KeyboardEvent):void { switch (event.keyCode) { case Keyboard.UP: { UFO_MC.y -= 5; break; } case Keyboard.DOWN: { UFO_MC.y += 5; break; } case Keyboard.RIGHT: { UFO_MC.beam.play(); break; } } }

The Up Arrow key moves the UFO up five pixels. The Down Arrow key moves the UFO down five pixels. The Right Arrow key plays back the beam animation.

  1. Choose Control > Test Movie and press the Right Arrow key to play the beam animation.
  2. If you don't see the expected results, you can open Sample2_Step2.fla file to see the completed code.

There is a lot more you can do with this sample file—for example, you may want to add buttons that show and hide the instructions. Open Sample2_Complete.fla to see how the rest of the code is implemented.

Where to go from here

Now that you have experience using ActionScript 3 and the Code Snippets panel, I hope you'll agree that ActionScript is not scary when you can look at code as a well-designed block.

Once you get used to using snippets, you may want to do the following:

  • Create your own snippets
  • Import or export snippets to exchange them among friends and coworkers

My colleagues and I have set up a blog for the Code Snippets feature. In the blog, we will continue introducing how to use each snippet and discuss where in your project they can be most useful. We will also cover more advanced topics such as customizing the Code Snippets panel.

Adobe Platform Evangelist Lee Brimelow has a popular blog that covers various topics on Flash and Flex, including ActionScript. The Code Snippets panel in Flash Professional CS5 is inspired by his version of the snippets panel.

I encourage you to use the Code Snippets panel to insert, combine, and modify snippets and create more advanced interactive content.

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company

Choose your region

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Reviewed by TRUSTe: site privacy statement