The following is a simple but effective method I regularly use when I create "slide in" animations for interface and menu elements. This adds a nice effect which can bring your menu to life. It works great for button roll overs as well.

The principle used here can be used for all sorts of animations types to make things look more appealing. 

Software Used: Adobe Flash CS5

 

What is a Tween?

A tween is basically a way of creating an animation by simply designing "key frames" and then using software such as Adobe Flash, to fill in the blank frames, based on the key frames you created. Flash isn't the only program that does this but it is one of the best.

Advanced Flash users can use a number of different Tween APIs for animation via actionscript but sometimes I prefer to do it by hand.

Here is a list of some APIs out there:

• Tweener
• Tween Lite
• GTween

They don't really require that much knowledge to use, I suggest giving them a try. You don't know what you will learn if your new to actionscript.

Step 1 – Create a Box and convert it twice

Lets start with something to animate. For now it can just be a simple box.

First, create your box, covert it to a movieclip and call it something like "boxGfxMc", good idea to have the registration point set to the center.

 

 

Once again, convert it to a movieclip ANOTHER TIME and call it something like "boxAnimationMc".

The reason we create 2 movieclips is because the graphics of the box can be easily edited once we have completed the animation using the outer, animationMc.

 

 

Step 2 – Start Animating!

We are working entirelly inside the boxAnimationMC. 

 

First, position your box exactly where you want it to FINISH and come to rest. In other words, start by positioning it ready for the final frame. This is makes it easier to create the bounce motion later. It also means you don't forget where you wanted the box to rest when it comes to moving things about.

 

 

Get your frames in the timeline, ready to starting moving the box about into the desired positions. I usually work with about 4-8 key Frames when it comes to bouncy animations. I usually add more frames at the end of the animation to improve the bounce effect.

 

Follow the instructions given in the next 3 images:

 

 

 

 

Now you have got all your positions ready, you can start to see how it will bounce once we add a tween to the frames.

 

 

Select all the frames and right click to bring up the context menu. Click "Create Classic Tween" (this may be different in older versions of Flash, just don't chose "shape tween" and you should be fine). This will basically fill in the missing frames of animation, using those keyframes we created.

 

It is best to play around with the frames and other factors such as distance between keyframes to get your desired effect. To easily create a reverse of this animation, View my Reverse Frames tutorial

 

Download the Source on MediaFire (saved as Flash cs4 fla)

 

Disclaimer

Feedback needed

I'm still getting used to writing tutorials, I'm not really sure if I'm actually providing useful, unnecessary or not enough information. Any feedback would really help me out at this point!