Tutorial Robot menggunakan flash

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

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

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

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

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

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

7. 3. Symbols
Types 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

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

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

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

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

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

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

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

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

16. 5. Programming
ActionScript
• 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

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

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

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

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

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

22. Notes
22