Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter we'll take the robot animations that we built in the last chapter and make them into an interactive application. If you're following along, I'm working in 01_Interactive_Buttons.fla in the Chapter 06 folder in the Exercise Files folder. Let's take a look at how this file is set up. There are four layers: actions, text, buttons, and robot. The text layer contains text for the buttons. I'll lock text layer and unlock the buttons layer. The buttons layer contains buttons with Instance Names of dance1_btn, dance2_btn and dance3_btn.
I'll lock the buttons layer and unlock the robot layer. The robot layer contains an instance of a movie clip called mcRobotAll with a instance name of robot_mc. Let's double-click the robot on the stage to enter its timeline. Inside of the mcRobotAll timeline there are two layers, actions and robot. In the actions layer, there is some code written that's simply a stop action as you can see. I opened the Actions panel, by the way. using Option+F9, that's on the Mac, and on the PC it's F9.
You can close the Actions panel using the same keyboard shortcut. The robot layer has three frames. The first frame of the robot layer contains an instance of a movie clip called mcRobotDancing. The second frame contains an instance of a movie clip called mcRobotoHinge. And the third frame contains an instance of a movie clip called mcRobotComplex. What we're going to do in this movie is make the robot do three different dances by clicking the buttons at the top right of the stage. Let's return to Scene 1 by clicking Scene 1 at the bottom of the timeline.
Let's select the first keyframe of the actions layer and open up the Actions panel by pressing Option+F9 on the Mac or F9 on the PC. The code that's already written for you, simply adds event listeners to all the buttons on the stage, and then we have skeletons of event handler functions for each of those buttons. Inside of the danceOne function at the top of your code, let's control the timeline of the robot movie clip on the stage by typing robot_mc.gotoAndStop Here the A in and is capitalized and the S in Stop is also capitalized.
We'll pass in the frame number that we want to go to and stop at, which is one. So we're speaking to the robot_mc movie clip, and using dot syntax or with a dot, we're telling that movie clip to navigate to frame one, when the danceOne function runs, which is connected to dance1_btn. Let's select the line of code that you just wrote, and copy it using Command+C on the Mac, or Ctrl+C on the PC.
Let's paste the code inside of the danceTwo function by clicking between the curly braces and pressing Command+V on the Mac or Ctrl+V on the PC. And we'll do the same thing for the danceThree function. Click in between the curly braces and press Command+V on the Mac or Ctrl+V on the PC to paste the code. In the danceTwo function modify the code to tell the robot movie clip to go to and stop at frame 2 instead of frame 1. In the danceThree function we'll modify the code for robot_mc.gotoAndStop to go to and stop at frame 3.
Now we can test the movie and watch the robot navigate to the three different frames. Command+Return on the Mac, Ctrl+Enter on the PC to test the movie. The robot's dancing, the frame one makes the robot dance. When you click dance2, the robot does the robot. Then when you click dance3, the robot does the breakdancing move. I'll close the Preview window now. So now we've added interactivity to navigate through different frames inside of a robot movie clip.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 61190 Viewers
61 Video lessons · 93450 Viewers
82 Video lessons · 104362 Viewers
56 Video lessons · 107785 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.