• Articles and Tutorials
• Contact

Bouncing text flash animation

I just got an idea for a new text animation effect that I will save for later, (mostly because im not sure what to do with it right now). But its quite funny so I will share it with you all.

So here is my tutorial on how to make a funny letter bouncing effect with flash actionscript 3.0

First to make this effect work we need to type in some text, then split it up into separate letters we then convert into separate movie clips to animate.

So first type in the text we want to add this effect to, right click on the text, choose break apart, this should split your text up into single letters.

Now you can add colors, gradients and other styles to make your text more interesting. (I tried my best).

Now we need to give the letters instance names, name them whatever you want, I named mine a1_mc, a2_mc, a3_mc etc.

Now the final and most important thing is to add some actionscript coding, so type in the following code and your effect should work.

I tried my best to explain the code line by line within the source code so you can follow along if you want.

First we need to import some transition class to handle the tweens we will be using.

import fl.transitions.*;
import fl.transitions.easing.*;

This might seem strange, but we apply an eventlistener to each letter to call the function doMouseOver when the mouse is over the specific letter.

a1_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
a1_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
a2_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
a2_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
a3_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
a3_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
a4_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
a4_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
a5_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
a5_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
a6_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
a6_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);

This is the function called to make the letters bounce towards you.

function doMouseOver(event:MouseEvent):void {
    // we define a tween to scale on the x and y axis, make it bounce.easeOut, which actually makes it act like a ball.
    // also the number 1 is the size its scaled to, and 2 is the number of seconds the tween will happen in.
    var xT:Tween = new Tween(event.target, "scaleX", Bounce.easeOut, event.target.scaleX, 2, 20);
    var yT:Tween = new Tween(event.target, "scaleY", Bounce.easeOut, event.target.scaleY, 2, 20);
}

This is the function called to make the letters bounce back when the mouse moves away from the letter

function doMouseOut(event:MouseEvent):void {
    var xT:Tween = new Tween(event.target, "scaleX", Bounce.easeOut, event.target.scaleX, 1, 20);
    var yT:Tween = new Tween(event.target, "scaleY", Bounce.easeOut, event.target.scaleY, 1, 20);
}