Robot Flash Tutorial

by Ian Li

This tutorial is based on tutorials by Andy Ko, Hwi Cheong, and James Fogarty. A PDF of this tutorial and the Flash source files are available at http://www.ianli.com/site/HowTo/RobotFlashTutorial

Why Flash
• The frames in Flash can represent states of a user interface. • Elements in a frame can handle events (e.g., a graphic can represent a button) • Interactivity can be done by simply transitioning between frames. • VB is great for form-based applications and Flash is great for time-based applications

Getting Flash
• This tutorial uses Flash 8. • You can buy Flash 8 (individually or part of the Studio Bundle) at the CMU Computer Store. • You can download the 30-day trial (http://www.adobe.com/go/tryflashpro). • You can use various labs at CMU that have Flash 8. • PC version: Wean clusters, Cyert Hall. The complete list is at http://www.cmu.edu/computing/clusters/software/sw_win.html • Mac version: Hunt Library, Cyert Hall, CFA. The complete list is at http://www.cmu.edu/computing/clusters/software/sw_mac.html

1

Flash 8 User Interface

1. Drawing tools: Tools to draw objects and images. 2. Timeline: Where the frames and layers of your Flash application are manipulated. 3. Stage: Where drawings are created, modified, deleted, etc. 4. Panel Sidebar: Contains panels for color palettes, library of symbols, etc. 5. Actions: Where ActionScript code is written to your Flash application. 6. Properties: Where properties of the stage and objects on the stage are changed.

2

which will help in positioning objects on the screen. modified. images. • Contains the objects. background color. you can easily go full screen. • Change the frame rate to 10 fps (frames per second). ruler units • Change the dimension to 400px x 300px. • Things can go outside the stage. 3 . etc.1. drawing. so you can easily compute the number of frames necessary for a particular range of time (e.g. Modify the stage size • Go to Modify > Document. 5 seconds is 50 frames). The initial dimension of the stage is 550px x 400px. deleted. • Dragging from the rulers will create vertical or horizontal guides. frames per second.. buttons. but they are clipped when the movie is played. etc. Show rulers • Go to View > Rulers to show the rulers. to change the stage size. The Stage • Where drawings are created. Since most monitors have aspect ratios of 4 x 3.. The initial frame rate is 12 fps.

• Turn on stroke hinting so that lines are not blurry. • Select the Rectangle tool tools panel. • Note that once a shape has been drawn. Similar to the rectangle 4 . which can be changed in the property window. from the Drawing • All shapes have an outline and fill color. Draw a rectangle • Draw a rectangle to represent the robot’s face.2. select the Object Drawing button under Options in the Drawing tools panel. selecting the shape does not select the outline. To avoid this. Drawing on the Stage • Flash graphics are vector-based. Vector-based images do not have a set resolution. and a stroke thickness. . a line pattern. while JPEG and GIF images are raster-based. • Select the Circle tool tool in functionality. Draw a circle • Draw circles to represent the eyes of the robot. • The Rectangle tool has an additional option to change the radius of the corner.

Draw lines with the Line and Pen tool • Draw mouths with different expressions: neutral and sad. • Click and drag to make a curve. 5 .Draw freeform lines and shapes • Select the Pencil tool panel. from the Drawing tools • You can set whether to straighten or smooth your drawing under the Options in the Drawing tools panel. to make straight lines. • Select Options in the Properties panel to modify the number of sides of the PolyStar. to make straight lines • Click once to make a jagged corner. • Click on a previously-made point to close the shape. Draw a PolyStar • Draw a hexagonal nut icon. • Holding on the Rectangle tool reveals the PolyStar tool. • Select the Line tool • Select the Pen tool and curved lines.

• The Brush tool has 5 different modes that you can set. weight. Click on the Stage and • You can set the font face. size. • Like the Brush tool. Write text • Write the name of the robot. Erase • Draw a cheese icon. and 5 different modes. • Paint Normal: draw strokes on any part of the stage • Paint Fill: draw strokes only on fills (ignores lines and the empty part of the stage) • Paint Behind: draw strokes only on the empty part of the stage • Paint Selection: draw strokes within the active selection • Paint Inside: draw strokes only on the shape or area where the brush was first laid down. the Eraser tool has a size and a shape. • Select the Eraser tool to erase fills and lines. • Select the Text tool enter text.Draw with the Brush tool • Select the Brush tool to draw with strokes have a size and a shape. and other properties of the text using the Properties window. 6 . .

• Delete the other eye and replace it with the EyeGraphic symbol by dragging the symbol from the Library panel to the stage. Choose Graphic as the behavior and give it the name EyeGraphic. • Change how the EyeGraphic symbol looks. 7 . • Button: responds to clicks. Select Modify > Convert to Symbol. If not. Create a Graphic symbol • Select one of the eyes. then assign particular actions to an instance of the button. Symbols Types of Symbols • Graphic: used for images or reusable animations. Good for interactive elements and sounds. and other actions. which is usually in the Panel Sidebar. select Window > Library. • You can edit a symbol by double clicking an instance or double-clicking the symbol in the Library panel. • Movie Clip: movie within a Flash movie and has its own timeline. • All symbols in a Flash document appear in the Library panel.3. rollovers. Editing a symbol also changes its instances. Define the graphics for each of the button states. • The benefit of symbols is that you can create instances of elements that repeat.

Choose Button as the behavior and give it the name RobotButton. Each state can have it’s own appearance. Select Modify > Convert to Symbol. • Up: when the button is not pressed.Create a Button symbol • Draw a circle and select it. or released. • Buttons have frames for each of its states. double-click an instance of the symbol or double-click the symbol in the Library panel. 8 . • The RobotButton symbol should now appear in the Library Panel like the EyeGraphic symbol. • To edit the RobotButton.

• There are two ways to test whether your buttons work. Cut the eyes. since there is only one frame in our movie. • Return to the main timeline named Scene1 by clicking on the “Scene 1” button on the Timeline panel. Create a Movie symbol • Select Insert > New Symbol.This creates an empty stage and a new timeline. • Hit: defines the clickable area of the button. • Down: when the button is pressed. • Choose Control > Enable Simple Buttons to make the buttons accept mouse events in edit mode. • Choose Control > Test Movie to build the Flash movie. • At this point. and mouth from the Scene 1. the RobotMovie symbol doesn’t do anything. face. Change the color of the button’s fill. • Drag the RobotMovie symbol into the Scene1 timeline. • Edit the RobotMovie symbol and paste the eyes. and mouth.• Over: when the button is hovered over. • Leave the Up and Over states as they are. face. 9 . Name the Movie symbol RobotMovie. • Insert a keyframe in the Down frame.

Left Eye. The Timeline • A view of all the frames and layers in your movie. • Create layers for Actions and Labels. Put the corresponding elements in their respective layers. • Edit > Paste in Place pastes elements at the same place they were copied. • Layers can be locked. Layers • Similar to other applications like Illustrator. • Create layers for each of the elements and name them appropriately (Face. hidden. Each layer has its own set of content. and organized in folders. Right Eye. • Create an Other Mouths layer and place the other outlines (except the neutral mouth) in this layer. 10 . • Layers are part of the timeline. • Use the Create New Layers tool on the Timeline panel. Hide the contents of this layer by clicking on the dot under Eye icon. It is good practice to separate them from the rest of the movie elements. Create layers • Put each element of the RobotMovie into its own separate layer.4. and Mouth layer).

• The black dot means that the frame 1 is a keyframe. Select Insert > Keyframe. Each mood will be shown for 1 second. You can also do this by using the context menu. • The hollow white rectangle means that it is the end of the span of frames. 11 .• Create frames • You will create frames to represent the different moods of our robot. • Insert a keyframe on the Mouth layer at the 11th frame. thus the gray frames 2–10 have the same content as the frame 1. • Select 10 frames in the Timeline panel and select Insert > Frame. • All frames following a keyframe contains the same content as the keyframe. • Select frame 1 on the Labels layer and enter “neutral” in the Frame Label text field in the Properties panel.

which you will change by replacing it with the sad mouth. Draw mouths appropriate to the rest of the newly keyframed mood. • You can also create a blank keyframe by selecting Insert > Blank Keyframe. • Test our animation by selecting Test > Movie. 12 . Copy the sad mouth from the Other Mouths layer into the Mouth layer in this keyframe. happy.• This copies the previous keyframe’s contents. angry. highlight the layer and click on the Trash can icon on the Timeline panel. and jittery). • Insert a keyframe on the Labels layer at the 11th frame and label it “sad”. yucked. Label each keyframe. • Proceed to create 10 frames for each of the other mouths (sad. • To delete the Other Mouth layer.

• Convert the tongue shape to a Graphic symbol by selecting Modify > Convert to Symbol and name it TongueGraphic. The frames should extend to frame 50. At frame 45. • You will move the tongue of the yucked robot from left to right and back. • Delete the frames on the Tongue layer beyond frame 50 by highlighting them and selecting Remove Frames on the contextual menu. 13 . • Add keyframes at frame 50 and at frame 45. on the • Add a keyframe and frames corresponding to the yucked sequence. • In the Properties panel. • Create a separate Tongue layer by clicking on the Create New Layers tool Timeline panel. Select Insert > Timeline > Create Motion Tween. move the tongue to the right.Animate by motion tweening • Create an animation by filling in the missing frames between a start and an end positions. • Do the same as above for a frame between the keyframe at 45 and keyframe 50. You can also right-click to bring up the context menu and select Create Motion Tween. The keyframe is at frame 41. • Select a frame between the keyframe at 40 and the keyframe at 45. Copy it to the Tongue layer. select the Motion option under Tween.

• Add keyframes at frame 60 and at frame 55. • At keyframe 51. • You will animate the jittery robots mouth. set the Motion Tween to Shape in the Properties panel. 14 .• Frames that have Motion Tweens are highlighted light purple. • Test the movie. Animate by shape tweening • Create an animation by filling in the missing frames between a initial shape and a final shape. At frame 55 and with the jittery mouth selected. select Modify > Transform > Flip Vertical. Notice that the animation moves the graphic between the keyframes.

• Test the movie.• Frames that have Shape Tweens are highlighted light green. 15 . Notice that the animation blends the shapes between the keyframes.

Go to the Property panel and enter “robot” in the Instance name text field. You do this so you can refer to the instance in the code. but it helps in finding code. Controlling frames on the main timeline • Notice that when the application starts. • Select Window > Actions to show the Actions panel. enterFrame. • robot is the name of the Movie Clip instance that you are manipulating and stop() is the method that stops the Movie Clip from animating. Programming ActionScript • ActionScript is Flash’s scripting language and is event-based like VB. released. 16 . Movie Clips.stop(). Enter the following ActionScript code: robot. the RobotMovie immediately starts playing through its different moods. • Add an Actions layer on the main timeline and select the first keyframe on frame 1. • A separate Actions layer is not required.5. • Two types of events (each with its own syntax): • Button events (pressed. mouseMove) • ActionScript code is associated with frames. rollOver) • Movie Clip events (load. You will write code to stop this.Net. and buttons. • Go to the main timeline and select the RobotMovie instance.

.stop(). • on(release) { .gotoAndStop("angry").gotoAndStop (“angry”).• The keyframe on the Timeline is marked with an “a” above the dot to indicate that the frame has code. • Add other layers (Button Graphics. Handling button events • Buttons handle various events such as press. rollOver. rollOut. Replacing release with press. • You can also have the RobotMovie symbol start at a particular frame. • Select the MoodButton instance.. release. If the Actions panel is not showing. with robot. To do this replace robot. rollOver. Buttons. Robot) to organize the main timeline and place the appropriate elements in the layers. } • Note that the above syntax is specific to Button instances. etc. Text. select Window > Actions. Enter the following ActionScript code: on(release) { robot. and other button events changes the event handled by the code. } is the block of code that handles the event when the button is clicked. • You will write code for our buttons to set the mood of our robot when they are clicked. rollOut. 17 .

Controlling frames within a movie clip: Animate once • Just as you wrote code to manipulate the main timeline. you can write code to manipulate the timeline within a Movie Clip symbol. • Notice that the yucked and jittery mood states are not animated anymore when you click their corresponding buttons.. Try handling other button events.• Multiple on(. add a keyframe at frame 41. • Edit the RobotMovie symbol by double-clicking on an instance or the corresponding symbol in the Library panel.. You will fix this. 18 . • On the Actions layer. • Proceed to create the other buttons and write similar code to set the mood of our robot to the other moods.) blocks can be written for any button.

to gotoAndPlay(“jittery”). • In the RobotMovie symbol timeline. This will show the Output panel. • At this point. You can have it loop by writing code. • Now the yucked mood state should play correctly. • Replace the code stop(). • Follow the same instructions for the jittery mood state which lies between frames 51 and 60. • On the Actions layer. How to debug • Use trace(“The message goes here”). • To show the output of trace().• Select frame 41 and write the code play(). in the Actions panel. running the Flash application and clicking on the yucked button plays the yucked mood state. edit the ActionScript code at frame 60 on the Actions layer. • Select frame 50 and write the code stop(). select Window > Output. in the Actions panel.Net’s Debug. 19 . but it also plays the jittery mood state. This is similar to VB.WriteLine(“The message goes here”). Controlling frames within a movie clip: Looping • The jittery mood state only plays once when you click the corresponding button. add keyframe at frame 50.

• Select the left EyeMovie instance.(_parent. • The EyeGraphic symbol is a Graphic symbol which cannot be programmed. Right-click on the symbol and select Properties. Bring up the Actions panel by selecting Window > Actions. • Select the two eyes in the RobotMovie movie clip and change their properties to Movie Clip.(_parent. • Write the following code in the Actions panel. In this case. change the name from EyeGraphic to EyeMovie and change the type from Graphic to Movie Clip.. the code will handle the event when 20 . • In the Symbol Properties window. yDelta = _root._ymouse .. } is a block of code that handles events for Movie Clip symbols..6. onClipEvent(mouseMove) { xDelta = _root. Click OK. • Select the EyeGraphic symbol in the Library. _rotation = degrees._y + _y)._xmouse .PI. so we need to change it to a Movie Clip symbol.. More Programming Controlling instances of Movie Clip symbols on the stage • We will write code to have the robot’s eyes follow the movement of the mouse. xDelta) * 180) / Math. degrees = (Math. trace(xDelta + " " + yDelta + " " + degrees + " " + _x). • Edit the RobotMovie MovieClip symbol._x + _x). } • The onClipEvent(mouseMove) { .atan2(yDelta. Do the same for the right EyeMovie instance.

21 . because it contains the EyeMovie instance. _parent._y are the coordinates of the RobotMovie instance relative to its parent._xmouse and _root. • To fix this. • Oops. notice that the eyes rotate incorrectly._ymouse are the coordinates of the mouse on this movie clip. such as mouseUp. _root._x and _parent. RobotMovie is the parent. which is RobotMovie. keyUp. edit the EyeMovie instance. mouseDown. You can replace the argument mouseMove to handle other events. Fix it by centering the eyeball on the crosshair. Notice that the eyeball is not centered around the crosshair on the stage. keyDown.the mouse is moving. • _x and _y are the coordinates of the EyeMovie instance relative to its parent. which is _root. • _root refers to the main movie clip which is Scene1. etc. • _parent refers to the parent movie clip of the EyeMovie instance. _rotation is the rotational angle of the EyeMovie instance. In this case.

Notes 22 .

Sign up to vote on this title
UsefulNot useful