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

Popular posts from this blog

what is Machenical Engineering

Arithmatic operations, factorial of a number, while loop, prime number, etc

Water Jug Problem