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;

timer.addEventListener(TimerEvent.TIMER, shakeImage);
function startShake(e:MouseEvent):void{
	timer.start () 

function stopShake(e:MouseEvent):void{
	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 |

  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 *