INTERACTIVE FLASH TUTORIAL

Objectives:
Working with Nested Symbols
Using AS to interact with timelines
Using AS to interact with symbols
1) Open Flash and create a new ActionScript 3.0 file.

2) Rename the first layer Face. Create a

face using the Circle tool (hold shift to make it
circular). Make it a symbol and call it face,
setting the registration point to the center and
make it a Movie Clip. Give it an instance name of
myface.

3) Double-click the face symbol, or on the cog

next to face in the library to open up the face
symbol. Rename Layer 1 to Face, and add a new
layer called Eyes, with Eyes at the top of the layer
stack.

4) Draw an eye on your face, making sure youre in the eyes layer. Double click on your
eye to select the fill and stroke, and convert it to a symbol, setting the registration point
to the center, and call the symbol eye. Double click it to open the eye symbol.
5) Rename Layer 1 to eyeball. Create a new layer called pupil, ensuring its above
eyeball. Draw a pupil using the Circle tool, and make the pupil a symbol. Call it pupil
and set the registration point to the center. Place it in the center of the eye by using the
guides. Alternatively, change the X and Y settings in the pupil properties to 0. This will
put the center of the pupil in exactly the same place as the center of the eyeball (which
is one of the reasons why we set the registration point as the center!).

6) Create a new layer called eyelid and ensure it is above the other two layers. Copy the
stroke of the eyeball from the eyeball layer, and Paste in Place in the eyelid layer. Create
4/5 new keyframes (NOT Blank Keyframes). Click the second frame, and draw in part of
an eyelid. Over the course of the 5 frames, create a frame-by-frame animation of the
eye closing. Ensure the last frame has the eye fully closed.

7) Highlight the 5 frames, and copy them by right-clicking. Go to frame 6, and paste them.
Highlight the 5 new frames, right click, and click Reverse Frames. Add a new frame at
Frame 10 in the pupil and eyeball layers.

8) Return to the face symbol by clicking face at the top. Move the eye to a suitable
position. In the Properties window, give it an Instance Name of eye1. From the
Library, drag a second eye symbol to a suitable spot, and give it an Instance Name of
eye2. Hold Shift and click each eye to select them both. Go Modify > Align > Top to
ensure the eyes are level.

9) Press Ctrl+Enter to test your movie. At this stage, the face should just be continuously
blinking. Close the movie.

10) Create a new layer,

and call it Actions. Place it at
the top of the layer stack.
With the Actions layer active,
right click on the first frame
and click Actions. This will
open the ActionScript
window.

11) Type in
myface.eye1.stop();. Press
Ctrl+Enter to test your movie
again. Notice that now only
one eye is animated. Close
the movie. In the Action
window, press Enter to go to
line 2, and type in the code
that is required to stop the
animation of the second eye.
Test your movie to make sure
you have achieved this.

12) To make our movie respond to a mouse click, we need to add a mouse listener. On line
4 of your script, type stage.addEventListener(MouseEvent.CLICK, blink);. What this
says is that if a mouse click is detected on the stage, run the function blink. The function
blink doesnt exist yet, so we now need to write that.

13) At line 6, paste the following code:

function blink(e:MouseEvent) {
myface.eye1.play();
myface.eye2.play();
}
This function responds to an event (our mouse click), starts the timeline in eye1, and the
timeline in eye2. What do you think will happen when we run our movie now? Try it and see;
were you right?

14) You should have noticed that when you click, our face doesnt stop blinking. We can fix
this with some more code, but we cant do this from the timeline. Scripting doesnt have
to be done from the main timeline each symbol can have its own actions. Close the
Action window, and open the eye symbol. As before, add a new layer and call it
Actions, placing it at the top of the layer stack. Right click on the 10th frame, and click
Actions. Youll see the Actions window open again, but theres no code in it anymore.
Thats because the code we just wrote applies to the entire stage. The code were about
to write applies only to the eye symbol. What we need to do is add some code that will

make the animation stop once it reaches this frame. This can be done by typing stop(); .
Yep, thats it. Test your movie now and see what it does.

15) Create an action that takes place when you right click the mouse. Add the following code
to the script on the stage:
Line 5: stage.addEventListener(MouseEvent.RIGHT_MOUSE_DOWN, myRightClick);
Line 12:
function myRightClick(e:MouseEvent) {
//My code goes here
}

16) For my example, Im going to make him bounce when I click the right mouse. I added a
motion tween in frames 2 to 22. To stop the movie from automatically playing the
tween, I added the line stop(); on line 4. To make the tween start when I click the right
button, I added the line gotoAndPlay(2); at line 15. This tells the timeline to move to

frame 2, and to start playing, which will cause the tween to start. When the tween
reaches its end, there is another line of code at frame 22 that says gotoAndStop(1); ,
this sends the timeline to frame 1, and stops there.

Some ideas you could try:

Motion tweens
Shape tweens
Make him smile
Have a tree grow next to him
Clicking different areas has different results
Make him reappear somewhere else

EXTENSION Make the eyes follow the mouse

1) In your main timeline script, add the following line:
stage.addEventListener(Event.ENTER_FRAME, moveEyes);
This event listener will run the function moveEyes every time a new frame is entered,
which by default happens 24 times a second.

2) To illustrate how this works, add the following code to the bottom of your script:
function moveEyes(e:Event) {
myface.x = mouseX;
myface.y = mouseY;
}
Press Ctrl+Enter to test your movie. Notice that your face will now follow the mouse.
myface.x refers to the X co-ordinate of your symbol, and mouseX is a pre-programmed
variable that is set to the current X co-ordinate of the mouse. Thus, the first line is setting the X

co-ordinate of our face to be the same as the X co-ordinate of the mouse. The same applies in
the Y co-ordinate.

3) We can use the same concept to move just the pupils of our eyes, since the pupils are a
separate symbol. Delete your moveEyes function, and replace it with:
function moveEyes(e:Event) {
var angle = Math.atan2((mouseY-200),(mouseX-275));
myface.eye1.pupil.x = Math.cos(angle);
myface.eye1.pupil.y = Math.sin(angle);
myface.eye2.pupil.x = Math.cos(angle);
myface.eye2.pupil.y = Math.sin(angle);
}
Test your movie again. Are your eyes moving? How do you think you can make them
move a bit more noticeably? Can you explain how this works?

EXTENSION: EXPLORATION
1) Open pacman.fla, and Test the Movie. What happens when:
a. Left click?
b. Right click?
c. You do nothing?
2) Double click pacman on the stage to open the Pac-man symbol. Which frames are
responsible for the looping eating action? How are just these frames being looped,
rather than the entire timeline? (Hint: check the ActionScript)
3) What does the ActionScript in Frame 26 do? Why is it there?
4) Any ideas on what the purpose of frames 7 to 13 is?

5) Return to the main stage by clicking Stage 1 in the top left-hand corner. Open the
ActionScript in Frame 1. Have a read through the code can you understand what is
happening?
6) What do you think will happen if you change the value of speed on line 21? Try it and
see! Set the value to 10 instead of 3, and run the movie. Was there any difference in
Pac-Mans speed before your first click compared to after the first click? Why?
7) Try changing it to a very high number such as 50 and run the movie. Any observations?

Some code which may be useful:

stop(); -stops the movie at the current frame
play(); - plays the movie starting at the current frame
gotoAndPlay(2) jumps to frame number 2 and plays the animation from that point
gotoAndStop(2) jumps to frame number 2 and stops
myface.x =100 - changes the X co-ordinate of the instance myface to 100. Works for Y as
well.