Bouncing Ball

For our first Flash assignment, we will create a bouncing ball.


To Make the Ball:

  1. Select your Oval tool, choose a fill color with no outline.
    (The above example uses a red gradient which is found at the bottom of the color swatch panel))
  2. Draw a circle (about 75 pixels in diameter) on the stage. You can enter the diameter on the width and height box in the properties panel at the bottom of the flash window.
  3. Click on the circle to select it and then right click and select Convert to Symbol
    1. Name: ball
    2. Behavior: Graphic
    3. Look in the library panel and you will see ball - graphic in the library.
      (To open the library panel: Select Window - Library.)
  4. What changes once you make the object a symbol?
  5. Create a Flash folder in your ITGS folder and save your file as bounce. What extension is automatically added to the file? What does this extension indicate?

To Create a Movie:

  1. Using the arrow tool, position the ball in the upper left corner of the stage.
  2. Save your Flash document to your Flash folder.
  3. Select Control -> Test Movie to see the "movie" that you created.
    Close the movie by clicking on the "x."
    Look in your Flash folder, what new file has been created?
    Flash created a movie version of your Flash document when you viewed it.
    Look at the difference in file size. Write down the name of each file and the file size of each.
    The bounce.swf file is the file that you would upload to the web.)
  4. Click in Frame 10 of the Timeline.
  5. Select Insert -> Timeline -> Keyframe and look at the timeline.
    You should see a dot in Frame 10.
  6. In Frame 10, drag the ball to the center bottom of the stage.
  7. Click in Frame 20 of the Timeline.
  8. Select Insert -> Timeline -> Keyframe and look at the timeline.
    You should see a dot in Frame 20.
  9. In Frame 20, drag the ball to the upper right corner of the stage.
  10. Select Control - Test Movie to review the movie. Describe what happens in your "Movie". Unfortunately this is not the effect that is desired. Close the movie by clicking on the lower "x."

To Create Tweening: (tweening refers to the transition between one point or image to another)

  1. Click in Frame 1 and press Enter. What happens?
  2. Click in Frame 1 again. Right click and select Create Classic Tween.
  3. Click in Frame 1 and press Enter again. Describe what happens this time? Flash has created tweening for the first 9 frames!
  4. Click in Frame 10. Right click and select Create Classic Tween.
  5. Click in Frame 1 and press Enter to see the tweening effect.
  6. Select Control - Test Movie to see the tweening. Close the movie by clicking on the lower "x."

To Scale the Ball:

  1. Click in Frame 1 and use the Free Transform Tool in the tool panel (third button down) to make the ball twice as big. Make sure the Properties Panel has a check mark next to Scale.
  2. Click in Frame 20 and use the same tool to make the ball half as big. Make sure the Properties Panel has a check mark next to Scale.
  3. Select Control - Test Movie again. What illusion does the change in size of the ball create? Close the movie by clicking on the lower "x."
  4. Click in Frame 1 and press Enter. Notice that Flash has scaled the ball in the "in-between" frames!

To Accelerate/Decelerate the Ball:

  1. Click on Frame 1 and look at the Properties Inspector. Set the Ease option to -100. (This is Easing In: Starting out slow and going faster and faster.)
  2. Click in Frame 10 and set the Ease option to +100. (This is Easing Out: Starting out fast and going slower and slower.
  3. Select Control - Test Movie again. Does the ball look like it's bouncing away from you? Close the movie by clicking on the lower "x."

Save in your Flash folder as bounce.fla.

Open a new flash file and draw a box the size of the stage. Make another bouncing ball that continually bounces around the inside of the box. Save this file as bouncing box.

Demonstrate your movies for teacher check.