Modeling a bouncing ball - Ease in and Ease out graphs - Changing speed, but no gravity or decay modeled.
Flash animation curves - Ease In, Ease Out versus constant speed
(Green ball has no easing at all - very poor simulation model)
What is the slope of the graph?



  1. Understand the graphs and the EASE IN and EASE OUT concepts for the final exam in 810:025. This is all you will be responsibile for with Flash and After Effects. We did the Flash bouncing ball example shown here in StudioIT 1 computer hands-on lab classes.

  2. In the animation, both balls DROP to the floor from frames 1 to frame 25. The ball squashes and flattens from frame 25 to 30. The ball unsquashes from frame 30 to 35. Then the ball bounces back up from the floor from frame 35 to frame 60. This is the Flash animation we did in StudioIT 1 ITT 134 lab classes.

    See the Bouncing Ball Flash Application in action.

  3. The red ball eases in to the motion as it falls to the floor and eases out of the motion as it bounces back up from the floor.

    The ONION SKINS screen snapshot from the Flash screen snapshot shows the EASE IN as the ball drops from the top to the floor. Notice how that movement is very slow (the ball shadows are very, very close together at the top) but then becomes faster and faster (the ball shadows are farthest apart right at the bottom, where the ball is about to hit the floor). See the EASE IN graph shown above here.

  4. The green ball has no easing at all. It goes at a constant speed. The slope of its line is the same everywhere, indicating a constant rate of speed. The shadows or onion skins are the same distance apart at every one of the moments in time. The moments in time are called FRAMES in Flash. See the NO EASING graph shown above here.
  5. Note where the SLOPE is steepest for the EASE IN graph. After Frame 20 up until Frame 25 it has a steep slope. Note how the slope of the curve is almost FLAT from frame 1 to frame 5.
  6. Note where the SLOPE is steeper for the EASE OUT graph. At the very beginning. From frame 35 to frame 40. Note where the SLOPE flattens out and the ball nearly stops. From frame 55 to 60.

  7. The horizontal axis is labeled FRAMES in the Custom Ease In/Ease Out panels (windows or dialog boxes) shown above here. The RED square highlights the moment when the Ball has gone exactly 50% of the distance it needs to travel to get from one KEYFRAME to the next KEYFRAME. The keyframes are at 1 and 25 for the first two panels and are at 35 and 60 for the 3rd of the 3 panels (Custom Ease In/Ease Out panels). The key question is how long does it take to achieve that total journey is halfway done?

    If you slam on your brakes in a car when you are going 75 miles per hour as you spot a deer running out on the road, and it takes you 50 yards to get stopped and 5 seconds to get stopped, where would your car be after the 1st second (of 5 seconds) of squeeling tires? It would NOT be 10 yards of the 50 yards, right? The first second your car might have gone 25 yards, or half the distance! That is easing out of the motion.

    If you try to get your car up to 70 miles per hour when you pull off the shoulder onto I-380 after stopping because of the deer, how far will your car go in the first second? In the second second? In the 3rd second? That is easing into the motion. The average speed gets faster in the 2nd second than in the 1st second. So the SLOPE of the curve for the speed would be getting STEEPER.