Scribd
Upload
2 views

control button

This document provides a step-by-step guide for creating a bouncing ball animation in Flash, including how to create the ball, animate it using tweening, and control it with play and stop buttons. It covers the necessary actions to assign to the buttons and how to publish the final animation as a .swf file and HTML page. The lesson emphasizes the potential for creating interactive animations with the skills learned.

Uploaded by

madhu bala
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

control button

This document provides a step-by-step guide for creating a bouncing ball animation in Flash, including how to create the ball, animate it using tweening, and control it with play and stop buttons. It covers the necessary actions to assign to the buttons and how to publish the final animation as a .swf file and HTML page. The lesson emphasizes the potential for creating interactive animations with the skills learned.

Uploaded by

madhu bala
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Flash 8: Animate a Bouncing Ball—

and Control it With Buttons


OVERVIEW

This lesson is designed to show you the basics of Flash animation, interactivity, and authoring. You will:

STEP 1: CREATE A BALL


STEP 2: ANIMATE THE BALL WITH TWEENING
STEP 3: PLAY YOUR ANIMATION
STEP 4: SELECT "STOP" AND "PLAY" BUTTONS
STEP 5: ASSIGN ACTIONS TO THE BUTTONS
STEP 6: ENABLE YOUR BUTTONS TO CONTROL THE ANIMATION
STEP 7: PUBLISH YOUR FILE

STEPS

STEP 1: CREATE YOUR BALL


We are going to create a ball in three positions on a timeline: upper left corner, bottom center, and upper
right corner, so that the ball will appear to be bouncing from left to right.

1) Launch Macromedia Flash and create a new file (FILE>NEW).


Make sure that a timeline appears at the top (WINDOW>TIMELINE)
2) Click on the first frame of the time line.
3) Go to the tool palette (WINDOW>TOOLS) and select the oval tool to create a ball in the upper left area of
the stage.
4) Select the arrow tool on the tool palette (WINDOW>TOOLS) and click on Frame #1 on the time line.
5) Right-mouse click to see your contextual menu, and select “insert frames,” or click on the F5 key.
6) Insert 9 key frames so that the last frame ends on frame #10.
(You will see new gray frames appear on the timeline.)
7) Now, select frame #5. Right-mouse click once again, and this time select “Insert Keyframe” from the
contextual menu or click on F6. You should see a black dot appear on this frame, indicating that it is a
keyframe. Now you will be able to reposition your graphic. Click on the ball and drag it to the bottom
center of the stage.
8) Now, select frame #10. Create a keyframe on #10, just as you did on #5 (right-mouse
click or use F6). When you are done, click and drag the ball on frame #10 to the upper right area of the
stage. Now you have the ball in three positions, indicated by frames #1, #5, and #10.

STEP 2: ANIMATE THE IMAGE WITH “TWEENING”


1) Click on frame #1. In the Properties Inspector (WINDOW>PROPERTIES), click on the “tween” menu
and select “Shape.” You will see your frames turn light green and an arrow form between your first and
last frame. This means your tween has been completed.
2) Repeat the same steps on frame #5 to create a tween from frame #5 to #10.

STEP 3: PLAY YOUR ANIMATION


1) Press the "Enter" key (PC) or the "Return" key (Mac) to play your movie.
2) To loop your playback go to CONTROL>LOOP PLAYBACK.

STEP 4: SELECT STOP AND PLAY BUTTONS


1) Create a new layer in your timeline by clicking the "+" button at the bottom of your timeline layers.
2) Select the first frame.
3) Open your buttons library by going to WINDOW>COMMON LIBRARIES>BUTTONS. Double-click on
folders that appear in the library and select two buttons you like (one will be “stop” and one will be
“play”).
4) Click on each button, drag it to the stage, and position it as you like.
(CONT.)
STEP 5: ASSIGN ACTIONS TO THE BUTTONS
”Actions” are scripts that tell a button what to do. We are going to assign an action to the “stop” button you
choose, to tell the movie to stop. Then we will assign an action to the “play” button you choose, to tell the
movie to play. Ready?

1) Click on your "play" button once to select it.

2) Open the actions window (WINDOW>ACTIONS). Copy and paste script below in the window. This script
means “when you click the button and the mouse RELEASES, PLAY the movie you’re in.”

on (release) {
play();
}

3) Now script your stop button. Select it, open the actions window, and this time copy and paste the
following script:

on (release) {
stop();
}

STEP 6: ENABLE YOUR BUTTONS AND CONTROL THE ANIMATION


Enable your buttons (CONTROL>ENABLE SIMPLE BUTTONS) and play your movie (Enter/Return), using
your buttons to start and stop the animation.

STEP 7: SAVE/PUBLISH YOUR FILE


1) Save your file (using FILE>SAVE AS). This is how you will save the authoring Flash file (.fla) in case
you would like to return to the file in the future to make changes.
2) Now you will publish your Flash animation to create the .swf file and the HTML file that it appears in. To
do this, go to FILE>PUBLISH SETTINGS and checking off "HTML" and "SWF" under the “formats” tab.
3) Then, click “Publish” and “O.K.”
4) Close/save your Flash file so you can make edits later.

You have just created a .swf file and an HTML page that will have your animation appear inside of it. To
view your file in a default browser, double-click on the HTML page you created (or drag the HTML page icon
onto your browser icon—for example, Internet Explorer). Your animation should appear inside of the page.

Is that cool or what?

Just with the skills you have learned today, you can see that you could create amazing animations and
make them interactive.

You might also like