Shaking effect

Shaking effect

Quick tutorial that demonstrates how to create a shaking effect by using Actionscript 3.0. We will create a cocktail shaker that the user can shake by hovering it.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as shakingEffect.fla.

2. Rename “layer 1″ to “img”. Import an image on the stage by selecting File>Import>Import to Stage, and pick the image of your choice. In our example, we import a cocktail shaker.

3. Select the image and convert it to a movie clip with registration point at the center.

4. With the movie clip selected, give an instance name of “shaker_mc”.

5. The effect that we want to create will be done only with code. To do that, create a new layer named “actions”. Open the actions panel and type the following code:

var coordX:Number = shaker_mc.x;  
var coordY:Number = shaker_mc.y;
var timer:Timer = new Timer(10);

shaker_mc.buttonMode = true;

shaker_mc.addEventListener(MouseEvent.ROLL_OVER,startShake);
shaker_mc.addEventListener(MouseEvent.ROLL_OUT,stopShake);
timer.addEventListener(TimerEvent.TIMER, shakeImage);
	
function startShake(e:MouseEvent):void{
	timer.start () 
}

function stopShake(e:MouseEvent):void{
	timer.stop();
	shaker_mc.x = coordX;
	shaker_mc.y = coordY;
	shaker_mc.rotation = 0;
}
    
function shakeImage(event:Event):void {  
	shaker_mc.x = coordX+ getMinusOrPlus()*(Math.random()*5);  
  	shaker_mc.y = coordY+ getMinusOrPlus()*(Math.random()*5);  
  	shaker_mc.rotation = getMinusOrPlus()* Math.random()*6;  
}

function getMinusOrPlus():int{
	var rand : Number = Math.random()*2;
	if (rand<1) return -1
	else return 1;
}   

6. Let’s explain the code.
- First we declare two variables to store the x and y coordinates of the “shaker” movie clip.
- Next we create a timer variable. We add to it a TimerEvent.TIMER event listener so that every 10ms it will call the shakeImage function.
- We want to start the shaking effect only when the user hovers the image. To do so we add a MouseEvent.ROLL_OVER event listener to shaker_mc that when this event is dispatched, it will start the timer.
- Also we add a MouseEvent.ROLL_OUT event listener to shaker_mc. The stopShake function that handles this event stop the timer and reset the x, y and rotation properties of “shake_mc” to their initial value.
- Finally in the shakeImage function we set the x, y and rotation properties of shaker_mc to new random values.
We create a getPlusOrMinus function that returns -1 or 1 so that we can add positive or negative random values.

7. Test your movie to see it in action.

8 thoughts on “Shaking effect

  1. Pingback: Flash tutorials | Some Special Flash Effect | Lemlinh.com

  2. Wotan

    How do you use two different photo? I just can’t figure it out, at some point the secound photo shake above first photo :(

  3. Pingback: Shaking effect with Flash : Online How To

  4. Pingback: Shaking effect with Flash | Online How To

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>