Creating Buttons – Lesson 71 Creating Buttons Lesson 7

2 Creating Buttons – Lesson 7 Objectives Import a sequence of images. Create button symbols to control photograph navigation. Add ActionScript to buttons and frames to control movement on the Timeline. Insert keyframes and frames.

3 Creating Buttons – Lesson 7 Import multiple images at one time When creating a movie which contains a series of images that you want to appear in succession, they can all be imported at the same time. The images must have the same name, followed by a numeric sequence such as Image0, Image1, Image2, etc. When imported, the images are all added to the same layer, on individual frames.

4 Creating Buttons – Lesson 7 Import images as a movie clip symbol Create a new symbol, give it a name, and set the Behavior to Movie Clip. You will be in symbol-editing mode for the new symbol and see a blank Stage. Click the File menu, point to Import, then click Import to Stage. Locate the folder with the images to import. Double-click the first image in the sequence. Click Yes when asked if you want to import a sequence of images. The images are all imported to a new layer, which you can rename to indicate its purpose or content.

5 Creating Buttons – Lesson 7 The Timeline for a layer of imported images This figure shows a layer named Photos which has just had a sequence of five images imported to it. After the images are imported, you will see the first image that was imported to frame 1. Click one of the other frames to see the image on that frame.

6 Creating Buttons – Lesson 7 Create button symbols for site navigation You can add button symbols to the library and drag them to the Stage. Buttons allow the user to navigate among the sections of your site. Buttons have four states: Up, Over, Down, and Hit. The Timeline contains a frame for each button state, but the Timeline does not play for button symbols. It reacts to actions of the pointer and the mouse.

7 Creating Buttons – Lesson 7 How to create a button Use the Rectangle (or other shape) tool to draw the button where you want it located. (Buttons are usually located on their own layer, but they do not have to be.) Set the height, width, stroke, and fill color in the Property inspector. Convert the shape to a symbol with a Behavior of Button. Double-click the button to enter symbol- editing mode, and set the actions for the various states.

8 Creating Buttons – Lesson 7 The Timeline for a button The figure below shows the Timeline for a button symbol. Note that, in this case, multiple layers have been defined for the button to separate the elements associated with the button. The Box layer is the shape of the button, the Text layer contains the text written on the button, and the Sound layer will contain a sound that plays when the button is clicked. Note that the Timeline contains one frame for each button state.

9 Creating Buttons – Lesson 7 Adding keyframes to buttons You need to insert keyframes when creating a state for the button. Keyframes are used to change the look or activity of the button in one state without affecting how it appears or acts for other states. Add a keyframe by clicking the state in the Timeline, clicking the Insert menu, pointing to Timeline, and then clicking Keyframe.

10 Creating Buttons – Lesson 7 Add frames to your movie In addition to adding keyframes to your movie, you can add regular frames as well to affect button states. To do so: Click the frame for the button state on the layer to be affected. Click the Insert menu, point to Timeline and then click Frame.

11 Creating Buttons – Lesson 7 Add ActionScript to your movie Defining buttons is not enough to make them do something. You add interactivity by adding ActionScript code to the buttons. There are two areas where you can add ActionScript code: On an object – A button or a movie clip can have actions added to them that cause them to do something when clicked or the pointer rolls over them. On a frame – You can add actions to frames that cause them to stop the movie or jump to a different scene when a particular frame is reached. ActionScript is added in the Actions panel.

12 Creating Buttons – Lesson 7 The Actions panel This figure shows the Actions panel. The left side of the panel shows a list of actions, broken into categories. To add an action to a button, select the button and open or expand the Actions panel. Select an action from the Category list. Double-click an action to insert it into the Script pane.

13 Creating Buttons – Lesson 7 An ActionScript example This figure shows a closer view of the Script pane of the Actions panel. Note that the “on” action has been inserted, and “release” is specified, which means that, when this action occurs, the movie will go to the specified frame and begin playing that frame. The Previous Frame option has been selected, so when the action occurs, the movie will go to the previous frame and play it.

14 Creating Buttons – Lesson 7 Summary In this lesson, you learned: To import a sequence of images. How to create button symbols to control photograph navigation. To add ActionScript to buttons and frames to control movement on the Timeline. To insert keyframes and frames.