Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Through several hands-on tutorials, instructor Todd Perkins shows how to best build dynamic, streamlined sites using Flash CS3 Professional. Learn how to create custom keyboard shortcuts, apply advanced text techniques such as animating scrolling text with custom easing controls, and using advanced animation techniques. Flash CS3 Professional Beyond the Basics covers many challenging features, including adding complex interactivity to a Flash CS3 project and getting Flash content on a phone. Exercise files accompany the tutorials.
And now we'll add the interactivity so you'll be able to drag the robot around the stage. If you're following along, I'm working in the 06_Drag_Robot.fla in the Chapter 06 folder in the Exercise Files folder. On the stage double-click the robot to enter its timeline. In the labels layer select frame 21 and press F7 on your keyboard to create a new keyframe. With the keyframe you just created selected, in the Property inspector type drag in the Frame Label field.
Extend the timeline to frame 25, by selecting from 25 in the timeline or pressing F5 on the keyboard. Then select frame 21 on the robot player and press F6 to create a keyframe on that layer. Select frame 25 and press F5 on your keyboard to extend the timeline to that point. On frame 21 select the robot on the stage and notice it's an instance of the mcRobotComplex. Let's click the Swap button in the Property inspector to swap the symbol with a symbol that we'll create right now.
Select mcRobot and click the Duplicate Symbol button. For the Symbol Name type mcRobot, capital R, and Drag with a capital D. And then click OK. Select mcRobotDrag and then click OK to close the Swap Symbol window. For now this will simply be an instance of our robot that doesn't move. Let's click Scene 1 at the bottom of the timeline to return to main timeline. Now we'll add the interactivity to drag the robot. Select frame one of the actions layer and open the Actions panel by pressing Option+F9 on the Mac, or F9 on the PC.
At the bottom of your code, add an event listener to robot_mc and the event will be MouseEvent.MOUSE_DOWN. So type robot_mc.addEventListener. The event will be MouseEvent.MOUSE_DOWN, all caps and we'll run a function called dragRobot; Below the dance3 function create a skeleton of the function called dragRobot. So type function dragRobot, with a capital R. Make sure it receives an event with the datatype MouseEvent, and in the curly braces type robot_mc.startDrag.
We'll pass in false for the lock center value and close out parentheses and type a semicolon. Now if we're going to start dragging the robot movie clip, we'll need to stop dragging it at some point. So the very bottom of your code below everything else, type robots_mc.addEventListener, and it will be MouseEvent.MOUSE_UP, all caps. And we'll run a function called dropRobot.
Now we'll define the dropRobot function. We'll do that by copying the dragRobot function. Select the dragRobot function, press Command+C on the Mac or Ctrl+C on the PC to copy the code. And a few lines below paste the code using Command+V on the Mac, or Ctrl+V on the PC. Change the name of the function to dropRobot in the pasted code, Change startDrag to stopDrag in the pasted code and delete the false value passed in the parentheses. Now let's test the movie and drag the robot.
Command+Return on the Mac, Ctrl+Enter on the PC. So you can see the robot works just the same except you can click and drag it. Now we'll add interactivity to stop the music when you click the robot. Inside the dragRobot function below the robot_mc.startDrag code, write the code stop the music. T stop the music, we'll need to refer to our soundControl object.
So type soundControl, capital C, dot stop. and then we'll start the music again when we drop the robot. Inside of the dropRobot function, below robot_mc.stopDrag type soundControl, capital C, = sound.play(); Test the movie using Command+Return or Ctrl+Enter and watch the sound stop as you dragged the robot.
So you can see that the song plays when you're not dragging the robot and stops you're dragging the robot. So the last thing we'll do is make the robot movie clip go to the drag frame. So at the very bottom of the dragRobot function type robots_mc.gotoAndStop then pass in "drag" in quotes.
That will make the robot go to and stop at the drag Frame Label. We'll make the robot start dancing again, once we drop the robot in the dropRobot function. At the bottom of the dropRobot function type robots_mc.gotoAndStop. And then pass in "dance1" in quotes. And that'll make the robot start dancing again once you drop the robot. Let's test the movie using Command+Return on the Mac or Ctrl+Enter on the PC.
When you drag the robot, the robot stops dancing. And when you drop the robot, the robot starts dancing again. So now we've added some more interactivity to our robot. The next thing we'll do is play an animation when you drag the robot.
There are currently no FAQs about Flash CS3 Professional Beyond the Basics.
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.