Adobe Flash CS6 Classroom in a Book: Creating a Home Button with Code Snippets
From the book
A home button simply makes the playhead go back to the first frame of the Timeline, or to a keyframe where an original set of choices, or the main menu, are presented to the viewer. Creating a button that goes to frame 1 is the same process as creating the four restaurant buttons. However, in this section, you’ll learn to use the Code Snippets panel to add ActionScript to your project.
Adding another button instance
A home, or main menu, button is provided for you in the Library panel.
- Select the Buttons layer and unlock it if it is locked.
- Drag the button called mainmenu from the Library panel to the Stage. Position the button instance at the top-right corner.
- In the Properties inspector, set the X value to 726 and the Y value to 60.
)
Using the Code Snippets panel to add ActionScript
The Code Snippets panel provides common ActionScript code that makes it easy for you to add interactivity to your Flash project, and simplifies the process. If you are unsure of your ability to code your own buttons, you can use the Code Snippets panel to learn how to add interactivity. The Code Snippets panel gives you a preview of the actual code, allows you to modify the critical parameters of the code, and use a visual pointer, called the pick whip, to point to objects on the Stage.
You can also save, import, and share code between a team of developers to make the development and production process more efficient.
- Select the first frame of
the actions layer in your
Timeline. Choose Window > Code
Snippets, or if your Actions
panel is already open, click
the Code Snippets button
(
)
at the top right of the Actions
panel. - In the Code Snippets panel, expand the folder called Timeline Navigation and select Click to Go to Frame and Stop.
- Click the description button.
- Click the code button.
- Move your mouse over the blue words instance_name_here.
- Click and drag your cursor from the blue code words to the Home button on the Stage.
- Release your mouse cursor.
- Highlight the blue number within the parentheses in the code.
- Replace the blue number with the number 1.
- Click Insert.
The Code Snippets panel appears. The code snippets are organized in folders that describe their function.
)
)
Immediately to the right of the code snippet name you’ll find a description button and a code button.
A brief description of the selected code appears.
)
The actual code appears. There is a commented portion of the code that describes the function of the code and the different parameters. The colored parts of the code are the parts that you need to change.
)
A purple line extends from the Code Snippets panel to the Home button. The Home button becomes highlighted with a yellow border, indicating that the selected code snippet will be applied to it.
)
If you point your pick whip to an object that doesn’t support the particular code snippet, a circular icon with a diagonal line appears (the international “no” symbol).
Since you have not yet named the Home button, a dialog box appears to allow you to give a name to the instance.
)
The instance name of the Home button is added to the code.
)
If you pointed your pick whip to an object that doesn’t support the particular code snippet, your pick whip will rebound and the code snippet will remain unmodified.
The blue number indicates which frame of the Timeline that Flash will display when you click on the Home button.
)
Flash adds the code snippet to the current keyframe on the Timeline. A flag appears on the Timeline to let you know that the code has been added, and to indicate where on the Timeline it’s been placed.
)
Click on the flag to open the Actions panel to view the code. You should be familiar with the syntax since you hand-coded your restaurant buttons earlier in this lesson. The Code Snippets panel, however, can make adding code quick and easy.
)