maxp
January 2nd, 2006, 04:27 AM
I know,
I know. "Everybody knows how to do bouncing balls." Wrong. Everybody can make
a rubber ball that bounces, but can they make it realistic or make it good
looking?
Chances are, if you just got flash, this is what your ball
will look
like:
http://img378.imageshack.us/my.php?image=noobball6yl.swf
And if you have spent 3 months on flash, It might look something like
this:
http://img378.imageshack.us/my.php?image=noviceball3fa.swf
Those are both wrong. The first, not because of the very crappy
looking ball, but because it does not have the material of a rubber ball. The
'rubber ball' looks as hard as a golf ball. There is no easing on the fall
and ascent, so gravity is unrealistic.
Things wrong with the
secong example include not having a shadow, (also applies for ex. 1) and not
making contact before the squash distortation. It should also have an
arc(apllies to ex. 1 as well). Everything should have an arc. That is the way
a lot of things move in real life.
Now lets get started.
Draw a background if you like, then use the circle tool to draw a circle.
Hold the shift key while doing so to create a perfect round shape. I
recommend 5px lines, with a darker red fill. A plus would be to add a little
shading, but not as to make the ball look still. Mine looks like
this:
http://img368.imageshack.us/my.php?image=010120062052587av.png
Place it just outside the stage in top left area. Make a motion
tween that lasts around 30 frames (I'm using 24 fps) and drag the ball to
the outside of the top right area of the screen on frame 30's keyframe. Make
a blank keyframe on frame 31. Place a keyframe on frame 15. The ball should
be above the stage, in the middle. Drag it down to whereever you would like
your floor to be. Make a keyframe on frame 16, and use onion skin to move the
ball into the exact same place it was on frame 15. Make a keyframe on frame
17, with out doing anything to it. Go up to the timeline and remove tweens
where necessary. Use the free transform tool(Q) to change it's rotation
point to the bottom. Scale it down so it looks a bit squashed.
As
shown
here:
http://img324.imageshack.us/my.php?image=010120062101426cq.png
If you test your movie now, the ball looks a bit... wrong. That's
because there has been no easing yet. Select frame one and go down to the
properties panel(Ctrl+F3). Slide 'Easing' to -100. (It seems a little
excessive, I know, but it works well.) Then go to frame 17, and repeat,
except make the easing 100 instead. Now it looks a little better, but we're
not done yet.
Make a new layer above the ball layer, and use onion
skin the view the entire course the ball takes by moving the brackets out.
Draw these lines along the coourse of the ball, to get a nice V-shape. Bend
the left line by moving your mouse along the middle of it until a cursor
whith a bent line by it appears instead of you normal one. Then click and
drag about 8 px or so to the upper right.
Do this with the other line,
except move it to the upper left. Lock this layer, and go back to the ball
one.
On each frame, move the ball sideways with the arrow keys until
the lines overlap the ball's rotation point. Remove all unecessary tweens.
Test this. If it looks good, delete the line layer. If it looks bad, you may
have done it wrong, or need to touch it up.
One more thing to do!
Make a layer called 'Shadow' under the ball layer. Go to frame 15, and draw
a flattened black circle with 30% alpha underneath it. If it looks suitable,
go to frame one and make a motion tween. Make a keyframe on frame 15. Move it
sideways with the arrow keys on frame one until it is under the ball, and
scale it down about 40%. Make a keyframe on frame 16, and move it under the
ball, again in the exact same place as frame 15. Remove unecessary tweens.
Make a keyframe on frame 30, and move the shadow under the ball. Scale it
down until it is very small. Make a blank keyframe on frame 31. You don't
need easing for the shadow. I don't know why, but it looks better this
way.
Here is my finished product(needs flash 8 player to see the
blurred
background):
http://img337.imageshack.us/my.php?image=ball2pb.swf
r
I hope you leared a little bit on motion, and enjoyed the
tutorial.
Also, If anyone can make a better rubber ball method, please
post it so I can learn it. :D
I know. "Everybody knows how to do bouncing balls." Wrong. Everybody can make
a rubber ball that bounces, but can they make it realistic or make it good
looking?
Chances are, if you just got flash, this is what your ball
will look
like:
http://img378.imageshack.us/my.php?image=noobball6yl.swf
And if you have spent 3 months on flash, It might look something like
this:
http://img378.imageshack.us/my.php?image=noviceball3fa.swf
Those are both wrong. The first, not because of the very crappy
looking ball, but because it does not have the material of a rubber ball. The
'rubber ball' looks as hard as a golf ball. There is no easing on the fall
and ascent, so gravity is unrealistic.
Things wrong with the
secong example include not having a shadow, (also applies for ex. 1) and not
making contact before the squash distortation. It should also have an
arc(apllies to ex. 1 as well). Everything should have an arc. That is the way
a lot of things move in real life.
Now lets get started.
Draw a background if you like, then use the circle tool to draw a circle.
Hold the shift key while doing so to create a perfect round shape. I
recommend 5px lines, with a darker red fill. A plus would be to add a little
shading, but not as to make the ball look still. Mine looks like
this:
http://img368.imageshack.us/my.php?image=010120062052587av.png
Place it just outside the stage in top left area. Make a motion
tween that lasts around 30 frames (I'm using 24 fps) and drag the ball to
the outside of the top right area of the screen on frame 30's keyframe. Make
a blank keyframe on frame 31. Place a keyframe on frame 15. The ball should
be above the stage, in the middle. Drag it down to whereever you would like
your floor to be. Make a keyframe on frame 16, and use onion skin to move the
ball into the exact same place it was on frame 15. Make a keyframe on frame
17, with out doing anything to it. Go up to the timeline and remove tweens
where necessary. Use the free transform tool(Q) to change it's rotation
point to the bottom. Scale it down so it looks a bit squashed.
As
shown
here:
http://img324.imageshack.us/my.php?image=010120062101426cq.png
If you test your movie now, the ball looks a bit... wrong. That's
because there has been no easing yet. Select frame one and go down to the
properties panel(Ctrl+F3). Slide 'Easing' to -100. (It seems a little
excessive, I know, but it works well.) Then go to frame 17, and repeat,
except make the easing 100 instead. Now it looks a little better, but we're
not done yet.
Make a new layer above the ball layer, and use onion
skin the view the entire course the ball takes by moving the brackets out.
Draw these lines along the coourse of the ball, to get a nice V-shape. Bend
the left line by moving your mouse along the middle of it until a cursor
whith a bent line by it appears instead of you normal one. Then click and
drag about 8 px or so to the upper right.
Do this with the other line,
except move it to the upper left. Lock this layer, and go back to the ball
one.
On each frame, move the ball sideways with the arrow keys until
the lines overlap the ball's rotation point. Remove all unecessary tweens.
Test this. If it looks good, delete the line layer. If it looks bad, you may
have done it wrong, or need to touch it up.
One more thing to do!
Make a layer called 'Shadow' under the ball layer. Go to frame 15, and draw
a flattened black circle with 30% alpha underneath it. If it looks suitable,
go to frame one and make a motion tween. Make a keyframe on frame 15. Move it
sideways with the arrow keys on frame one until it is under the ball, and
scale it down about 40%. Make a keyframe on frame 16, and move it under the
ball, again in the exact same place as frame 15. Remove unecessary tweens.
Make a keyframe on frame 30, and move the shadow under the ball. Scale it
down until it is very small. Make a blank keyframe on frame 31. You don't
need easing for the shadow. I don't know why, but it looks better this
way.
Here is my finished product(needs flash 8 player to see the
blurred
background):
http://img337.imageshack.us/my.php?image=ball2pb.swf
r
I hope you leared a little bit on motion, and enjoyed the
tutorial.
Also, If anyone can make a better rubber ball method, please
post it so I can learn it. :D