Magic 8 ball tutorial in AS3 part 3

This is part 3 of the Magic 8 ball tutorial where you will learn how to add a shake effect to the 8 ball. Be sure you have completed part 1 of the tutorial as addition code will be added to this one.


Magic 8 ball tutorial in AS3 part 3

Step 1

On the timeline select the first frame and open up the Actions panel. Delete the following line of code from the showAnswers() function.

TweenLite.to(magic8Back_mc.output_mc, 3, {autoAlpha:1});

And then replace it with the following lines of code.

//This creates a new instance of the Timer class which will run once with a delay 
//of 2seconds.
var myTimer:Timer=new Timer(2000,1);

//This is a timer event to set up the timer intervals.
myTimer.addEventListener(TimerEvent.TIMER, moveBack);

//The start() method starts the timer. 
myTimer.start();

//Adds an enter frame event to the 8 ball. 
magic8Back_mc.addEventListener(Event.ENTER_FRAME,shakeEffect);

Step 2

Outside of the showAnswers() function add the remaining code below.

//This function add the shake effect to the magic 8 ball. 
function shakeEffect(event:Event):void {
    var shakeAmount:uint=4;
    var randomAction:int=Math.floor(Math.random()*2);
    if (randomAction==0) {
        event.target.x+=shakeAmount;
        event.target.y+=shakeAmount;
    } else if (randomAction == 1) {
        event.target.x-=shakeAmount;
        event.target.y-=shakeAmount;
    }
}

//This function removes the shake effect and sets the 8 ball back to it original position. 
//The inner triangle message will also fade in.
function moveBack(event:TimerEvent):void {
    magic8Back_mc.removeEventListener(Event.ENTER_FRAME,shakeEffect);
    magic8Back_mc.x = 90;
    magic8Back_mc.y = 61; 
    TweenLite.to(magic8Back_mc.output_mc, 3, {autoAlpha:1});
}

Step 3

Test your movie Ctrl + Enter and you should now see a shake effect when you selected the magic 8 ball.