Flex | Flash | Air | AS3
Shaking effect
June 15th, 2009 in FlashQuick 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.
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.
Jul 8th, 2009
Nice effect, nice tutorial
Jul 21st, 2009
[...] Read tutorial [...]
Sep 22nd, 2009
how can i meke it stop at certain , specific point or frame?
Oct 7th, 2009
How do you use two different photo? I just can’t figure it out, at some point the secound photo shake above first photo
Jan 7th, 2010
Now I understand South Park xD