Robot Flash Tutorialby 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

1. The Stage• Where drawings are created, modified, deleted, etc.

• Contains the objects, images, drawing, buttons, etc.

• Things can go outside the stage, but they are clipped when the movie is played.

Modify the stage size• Go to Modify > Document... to change the

stage size, background color, frames per second, ruler units

• Change the dimension to 400px x 300px. Since most monitors have aspect ratios of 4 x 3, you can easily go full screen. The initial dimension of the stage is 550px x 400px.

• Change the frame rate to 10 fps (frames per second), so you can easily compute the number of frames necessary for a par-ticular range of time (e.g. 5 seconds is 50 frames). The initial frame rate is 12 fps.

Show rulers• Go to View > Rulers to show the rulers, which will help in positioning objects on the

screen.

• Dragging from the rulers will create vertical or horizontal guides.

3

2. Drawing on the Stage• Flash graphics are vector-based, while JPEG and GIF images are raster-based.

Vector-based images do not have a set resolution.

Draw a rectangle• Draw a rectangle to represent the robot’s face.

• Select the Rectangle tool from the Drawing tools panel.

• All shapes have an outline and fill color, a line pattern, and a stroke thickness, which can be changed in the property window.

• Note that once a shape has been drawn, selecting the shape does not se-lect the outline. To avoid this, select the Object Drawing button under Op-tions in the Drawing tools panel.

• Turn on stroke hinting so that lines are not blurry.

• The Rectangle tool has an additional option to change the radius of the cor-ner.

Draw a circle• Draw circles to represent the eyes of the robot.

• Select the Circle tool . Similar to the rectangle tool in functionality.

4

Draw freeform lines and shapes

• Select the Pencil tool from the Drawing tools panel.

• You can set whether to straighten or smooth your drawing under the Options in the Drawing tools panel.

Draw lines with the Line and Pen tool• Draw mouths with different expressions: neutral

and sad.

• Select the Line tool to make straight lines.

• Select the Pen tool to make straight lines and curved lines.

• Click once to make a jagged corner.

• Click and drag to make a curve.

• 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 Options in the Properties panel to modify the number of sides of the PolyStar.

5

Draw with the Brush tool

• Select the Brush tool to draw with strokes have a size and a shape.

• The Brush tool has 5 different modes that you can set.

• 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.

Erase• Draw a cheese icon.

• Select the Eraser tool to erase fills and lines.

• Like the Brush tool, the Eraser tool has a size and a shape, and 5 different modes.

Write text• Write the name of the robot.

• Select the Text tool . Click on the Stage and enter text.

• You can set the font face, size, weight, and other properties of the text using the Properties window.

6

3. SymbolsTypes of Symbols• Graphic: used for images or reusable animations.

• Movie Clip: movie within a Flash movie and has its own timeline. Good for interactive elements and sounds.

• Button: responds to clicks, rollovers, and other actions. Define the graphics for each of the button states, then assign particular actions to an instance of the button.

Create a Graphic symbol• Select one of the eyes. Select Modify > Convert to Symbol. Choose Graphic as the

behavior and give it the name EyeGraphic.

• All symbols in a Flash document appear in the Library panel, which is usually in the Panel Sidebar. If not, select Window > Library.

• Delete the other eye and replace it with the EyeGraphic sym-bol by dragging the symbol from the Library panel to the stage.

• The benefit of symbols is that you can create instances of elements that repeat.

• Change how the EyeGraphic symbol looks.

• You can edit a symbol by double clicking an instance or double-clicking the symbol in the Library panel. Editing a symbol also changes its instances.

7

Create a Button symbol

• Draw a circle and select it. Select Modify > Convert to Symbol. Choose Button as the behavior and give it the name RobotButton.

• The RobotButton symbol should now appear in the Library Panel like the Eye-Graphic symbol.

• To edit the RobotButton, double-click an instance of the symbol or double-click the symbol in the Library panel.

• Buttons have frames for each of its states. Each state can have it’s own appear-ance.

• Up: when the button is not pressed, or released.

8

• Over: when the button is hovered over.

• Down: when the button is pressed.

• Hit: defines the clickable area of the button.

• Leave the Up and Over states as they are.

• Insert a keyframe in the Down frame. Change the color of the button’s fill.

• There are two ways to test whether your buttons work.

• Choose Control > Test Movie to build the Flash movie.

• Choose Control > Enable Simple Buttons to make the buttons accept mouse events in edit mode.

Create a Movie symbol• Select Insert > New Symbol. Name the Movie

symbol RobotMovie.This creates an empty stage and a new timeline.

• Return to the main timeline named Scene1 by clicking on the “Scene 1” button on the Timeline panel. Cut the eyes, face, and mouth from the Scene 1.

• Edit the RobotMovie symbol and paste the eyes, face, and mouth.

• Drag the RobotMovie symbol into the Scene1 timeline.

• At this point, the RobotMovie symbol doesn’t do anything, since there is only one frame in our movie.

9

4. The Timeline

• A view of all the frames and layers in your movie.

Layers• Similar to other applications like Illustrator. Each layer has its own set of content.

• Layers are part of the timeline.

• Layers can be locked, hidden, and organized in folders.

Create layers• Put each element of the RobotMovie into its own separate layer.

• Use the Create New Layers tool on the Timeline panel.

• Create layers for each of the elements and name them appropriately (Face, Left Eye, Right Eye, and Mouth layer). Put the corresponding elements in their respec-tive layers.

• Edit > Paste in Place pastes elements at the same place they were copied.

• Create an Other Mouths layer and place the other outlines (except the neutral mouth) in this layer. Hide the contents of this layer by clicking on the dot under Eye icon.

• Create layers for Actions and Labels. It is good practice to separate them from the rest of the movie elements.

10

•

Create frames• You will create frames to represent the different moods of our robot. Each mood will be

shown for 1 second.

• Select 10 frames in the Timeline panel and select Insert > Frame. You can also do this by using the context menu.

• Select frame 1 on the Labels layer and enter “neutral” in the Frame Label text field in the Properties panel.

• The black dot means that the frame 1 is a keyframe.

• All frames following a keyframe contains the same content as the keyframe, thus the gray frames 2–10 have the same content as the frame 1.

• The hollow white rectangle means that it is the end of the span of frames.

• Insert a keyframe on the Mouth layer at the 11th frame. Select Insert > Keyframe.

11

• This copies the previous keyframe’s contents, which you will change by replacing it with the sad mouth.

• You can also create a blank keyframe by selecting Insert > Blank Keyframe.

• Insert a keyframe on the Labels layer at the 11th frame and label it “sad”. Copy the sad mouth from the Other Mouths layer into the Mouth layer in this keyframe.

• To delete the Other Mouth layer, highlight the layer and click on the

Trash can icon on the Timeline panel.

• Test our animation by selecting Test > Movie.

• Proceed to create 10 frames for each of the other mouths (sad, happy, angry, yucked, and jittery). Label each keyframe. Draw mouths appropriate to the rest of the newly keyframed mood.

12

Animate by motion tweening• Create an animation by filling in the missing frames between a start and an end posi-

tions.

• You will move the tongue of the yucked robot from left to right and back.

• Create a separate Tongue layer by clicking on the Create New Layers tool on the Timeline panel.

• Add a keyframe and frames corresponding to the yucked sequence. The keyframe is at frame 41. The frames should extend to frame 50.

• Delete the frames on the Tongue layer beyond frame 50 by highlighting them and selecting Remove Frames on the contextual menu.

• Convert the tongue shape to a Graphic symbol by selecting Modify > Convert to Symbol and name it TongueGraphic. Copy it to the Tongue layer.

• Add keyframes at frame 50 and at frame 45. At frame 45, move the tongue to the right.

• Select a frame between the keyframe at 40 and the keyframe at 45. Select Insert > Timeline > Create Motion Tween. You can also right-click to bring up the context menu and select Create Motion Tween.

• In the Properties panel, select the Motion option under Tween.

• Do the same as above for a frame between the keyframe at 45 and keyframe 50.

13

• Frames that have Motion Tweens are highlighted light purple.

• Test the movie. Notice that the animation moves the graphic between the keyframes.

Animate by shape tweening• Create an animation by filling in the missing frames between a initial shape and a final

shape.

• You will animate the jittery robots mouth.

• At keyframe 51, set the Motion Tween to Shape in the Properties panel.

• Add keyframes at frame 60 and at frame 55. At frame 55 and with the jittery mouth se-lected, select Modify > Transform > Flip Vertical.

14

• Frames that have Shape Tweens are highlighted light green.

• Test the movie. Notice that the animation blends the shapes between the keyframes.

15

5. ProgrammingActionScript• ActionScript is Flash’s scripting language and is event-based like VB.Net.

• Two types of events (each with its own syntax):

• Button events (pressed, released, rollOver)

• Movie Clip events (load, enterFrame, mouseMove)

• ActionScript code is associated with frames, Movie Clips, and buttons.

Controlling frames on the main timeline• Notice that when the application starts, the RobotMovie immediately starts playing

through its different moods. You will write code to stop this.

• Go to the main timeline and select the RobotMovie instance. 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.

• Add an Actions layer on the main timeline and select the first keyframe on frame 1.

• A separate Actions layer is not required, but it helps in finding code.

• Select Window > Actions to show the Ac-tions panel. Enter the following Action-Script code:

robot.stop();

• 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.

16

• The keyframe on the Timeline is marked with an “a” above the dot to indicate that the frame has code.

• You can also have the RobotMovie symbol start at a particular frame. To do this replace robot.stop(); with robot.gotoAndStop(“angry”);

Handling button events• Buttons handle various events such as press, release, rollOver, rollOut, etc.

• You will write code for our buttons to set the mood of our robot when they are clicked.

• Add other layers (Button Graphics, Buttons, Text, Robot) to organize the main timeline and place the appropriate elements in the layers.

• Select the MoodButton instance. If the Actions panel is not showing, select Window > Actions. Enter the following ActionScript code:

on(release) {

robot.gotoAndStop("angry");

}

• Note that the above syntax is specific to Button instances.

• on(release) { ... } is the block of code that handles the event when the button is clicked. Replacing re-lease with press, rollOver, rollOut, and other button events changes the event handled by the code.

17

• Multiple on(...) blocks can be written for any button.

• Proceed to create the other buttons and write similar code to set the mood of our robot to the other moods. Try handling other button events.

Controlling frames within a movie clip: Animate once• Just as you wrote code to manipulate the main timeline, you can write code to manipu-

late 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. You will fix this.

• Edit the RobotMovie symbol by double-clicking on an instance or the corresponding symbol in the Library panel.

• On the Actions layer, add a keyframe at frame 41.

18

• Select frame 41 and write the code play(); in the Actions panel.

• At this point, running the Flash appli-cation and clicking on the yucked but-ton plays the yucked mood state, but it also plays the jittery mood state.

• On the Actions layer, add keyframe at frame 50.

• Select frame 50 and write the code stop(); in the Actions panel.

• Now the yucked mood state should play correctly.

• Follow the same instructions for the jittery mood state which lies between frames 51 and 60.

Controlling frames within a movie clip: Looping

• The jittery mood state only plays once when you click the corresponding button. You can have it loop by writing code.

• In the RobotMovie symbol timeline, edit the ActionScript code at frame 60 on the Ac-tions layer.

• Replace the code stop(); to gotoAndPlay(“jittery”);

How to debug• Use trace(“The message goes here”). This is similar to VB.Net’s Debug.WriteLine(“The message goes here”).

• To show the output of trace(), se-lect Window > Output. This will show the Output panel.

19

6. More ProgrammingControlling instances of Movie Clip symbols on the stage• We will write code to have the robot’s eyes follow the movement of the mouse.

• Edit the RobotMovie MovieClip symbol.

• The EyeGraphic symbol is a Graphic symbol which cannot be programmed, so we need to change it to a Movie Clip symbol.

• Select the EyeGraphic symbol in the Library. Right-click on the symbol and select Properties...

• In the Symbol Properties window, change the name from EyeGraphic to EyeMovie and change the type from Graphic to Movie Clip. Click OK.

• Select the two eyes in the RobotMovie movie clip and change their properties to Movie Clip.

• Select the left EyeMovie instance. Bring up the Actions panel by selecting Window > Actions.

• Write the following code in the Actions panel. Do the same for the right EyeMovie in-stance.

onClipEvent(mouseMove) {

xDelta = _root._xmouse - (_parent._x + _x);

yDelta = _root._ymouse - (_parent._y + _y);

degrees = (Math.atan2(yDelta, xDelta) * 180) / Math.PI;

trace(xDelta + " " + yDelta + " " + degrees + " " + _x);

_rotation = degrees;

}

• The onClipEvent(mouseMove) { ... } is a block of code that handles events for Movie Clip symbols. In this case, the code will handle the event when

20

the mouse is moving. You can replace the argument mouseMove to handle other events, such as mouseUp, mouseDown, keyUp, keyDown, etc.

• _root refers to the main movie clip which is Scene1. _root._xmouse and _root._ymouse are the coordinates of the mouse on this movie clip.

• _parent refers to the parent movie clip of the EyeMovie instance. In this case, RobotMovie is the parent, because it contains the EyeMovie instance. _parent._x and _parent._y are the coordinates of the RobotMovie instance relative to its parent, which is _root.

• _x and _y are the coordinates of the EyeMovie instance relative to its parent, which is RobotMovie. _rotation is the rotational angle of the EyeMovie instance.

• Oops, notice that the eyes rotate incorrectly.

• To fix this, edit the EyeMovie instance. Notice that the eyeball is not centered around the crosshair on the stage. Fix it by centering the eyeball on the crosshair.

21

Notes

22