Animate a Bouncing Ball— and Control it With Buttons
Animate a Bouncing Ball— and Control it With Buttons
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.
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.
Comments
Post a Comment