ActionScript® 3.0 for Adobe® Flash® Professional CS5 Classroom in a Book: Adding ActionScript Using Code Snippets
Note: This excerpt is from a draft manuscript and may not be representative of the final published work.
From the book
From the book
You can create ActionScript on any keyframe in the main timeline of a Flash movie. You can also create it on any keyframe within a movie clip symbol. During playback of the compiled Flash project, the code on each frame will execute when that frame plays.
All timeline code in Flash is written in the Actions panel, accessible in Flash from the Window menu or by pressing F9 (Windows) or Option+F9 (Mac).
)
Later, you will see that you can also write ActionScript in external ActionScript files, but for now, you will create code exclusively in the Actions panel.
In addition to typing code directly in the Actions panel, you can add code to this panel using the new Code Snippets panel. Code snippets, as their name implies, are prebuilt chunks of ActionScript 3.0 code that can easily be added to your projects and modified to suit your purposes. Code snippets provide a wonderful way to begin working with ActionScript and can be very useful for increasing the range of tasks that you can accomplish.
Adding a code snippet to navigate to a URL
The Code Snippets panel is found on the Window menu in Flash CS5. When you add a code snippet to your project, the code snippet is written in the Actions panel, saving you the trouble of typing it yourself. After the code snippet is placed in the Actions panel, it is fully editable, allowing you to customize and modify that code.
To see how code snippets work, you will add some code that will link to the Flash support page at http://www.Adobe.com when a button is clicked.
Begin by adding a button to the Stage:
- With the lesson01_start.fla file open and the Stage and Timeline visible, select the first frame in the buttons layer.
- If it is not already visible, open the Library panel (Window > Library).
- From the Library panel, drag an instance of the item named Button to the lower-right area of the Stage.
- If it is not already visible, open the Property inspector (Window > Properties).
- Give your new button instance an instance name by selecting the button onstage and typing help_btn in the instance name field in the Property inspector. In Flash, it is essential that all objects onstage that will be controlled with ActionScript be given instance names.
- With your button instance still selected, give it a label by typing the label Flash Support in the Label Name field of the Property inspector, found in the Component Parameters area.
)
Applying a code snippet
Depending on the functionality needed, code snippets can be applied in a few different ways. For a code snippet that is intended to execute when the user interacts with a button, as is the case here, you apply the snippet by first selecting the button onstage and then applying the code snippet. You will do this now with help_btn:
- If they are not already visible, open the Code Snippets panel (Window > Code Snippets) and the Actions panel (Window > Actions).
- Select the help_btn instance onstage.
- In the Code Snippets panel, open the Actions folder.
- In the Code Snippets panel, double-click the snippet named Click to Go to Web Page. Notice that the keyframe in Frame 1 of the actions layer of the Timeline now has a lowercase a in it. This indicates that the ActionScript written by the code snippet has been stored in this frame. You should also see the following code appear in the Actions panel:
- Test the movie by choosing Control > Test Movie > in Flash Professional.
- In the testing environment, click help_btn. The code should cause the Adobe home page to open in the computer’s default browser when the button is clicked.
)
/* Click to Go to Web Page
Clicking on the specified symbol instance loads the URL in a new browser window.
Instructions:
1. Replace http://www.adobe.com with the desired URL address.
Keep the quotation marks ("").
*/
help_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage(event:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.adobe.com"),
"_blank");
}
)
Modifying the code snippet
Because code snippets are pure ActionScript code, they can easily be modified to change their functionality. If you examine the code snippet that was written in the Actions panel, you will notice that the first section of code is gray and contains a description of the code that was written and some instructions for modifying it. All of the code snippets that ship with Flash CS5 come with comments like this that help you understand the ActionScript written by the code snippet. Comments will be discussed in more detail soon and are good elements to add to your own code as notes for yourself and others.
For now, follow the instructions in the code snippet to modify the URL in the ActionScript:
- Locate the line that reads:
- Modify the URL between the quotation marks to read:
- Test the movie by choosing Control > Test Movie > in Flash. This time when you click the button, you should be taken to the support section for Flash on the Adobe website. You can substitute any URL in this code, and clicking the button will cause the browser to navigate to that location.
navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");
http://www.adobe.com/support/flash
By the end of these lessons, you will know the ActionScript necessary to write all of this code from scratch, and that knowledge will open infinite creative possibilities. In the meantime, you can use the actions available in the Code Snippets panel to immediately start adding interactivity to your projects. Using this panel will also aid in your learning process by giving you insight into how to create working code and how to modify it to suit your needs.
You will work with the Code Snippets panel again in the next lesson, but now you will begin to write your own ActionScript code.