Friday, 15 July 2011

Windmill rotation effect in AS3

In this tutorial you will learn how to create a windmill rotation effect in Actionscript 3. This effect gradually increases the speed of the windmill when the mouse is pressed, and gradually decreases the speed when the mouse is released. I have drawn the windmill in Flash, but you can also use an image if you wish.

Windmill rotation effect in AS3

Step 1

Open a new AS3 Flash file and create the windmill arms like below. I have used the Pen tool to draw the arms, but you can use an image if you wish.

Step 2

Convert the windmill arms into a movie clip F8. Choose the centre registration point and give the windmill the instance name: arms. Now add the windmill movie clip into another movie clip F8, and give the instance name: windmill. Inside this movie clip, on the timeline insert a new layer underneath the windmill arms layer and draw the wind mill legs like below.

Step 3

On the main timeline insert a new layer call 'Actions' then open up the Actions panel and enter the following code:

var speed:Number = 0;
var minSpeed:Number = 0;
var maxSpeed:Number = 20;
var increaseNum:Number = 0.8;
var decreaseNum:Number = 0.4;

//Boolean to check if mouse has been clicked.
var clicked:Boolean;

//This creates a click area on the stage using a sprite with
//the same size as the stage's width and height. The mouse down
// and up event listeners are added to the sprite.
var clickarea:Sprite = new Sprite();, 0);,0,stage.stageWidth, stage.stageHeight);;
clickarea.buttonMode = true;
clickarea.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
clickarea.addEventListener(MouseEvent.MOUSE_UP, upHandler);

//These functions set the click variable to true if the mouse is down
//and false if the mouse is up.
function downHandler(e:MouseEvent):void{
clicked = true;

function upHandler(e:MouseEvent):void{
clicked = false;

//Adds an enter frame event to the stage.
stage.addEventListener(Event.ENTER_FRAME, enterHandler);

//This function increase the speed if the mouse is down, and
//decrease the speed if the mouse is up.s
function enterHandler(e:Event):void{

windmill.arms.rotation += speed;


//This function increases the speed. If the speed is greater
//than the max speed then the speed is set to the max speed.
function increaseSpeed():void {
speed = speed + increaseNum;
if (speed > maxSpeed)     speed = maxSpeed;

//This function decreases the speed. If the speed is less
//than the min speed then the speed is set to the min speed.
function decreaseSpeed():void {
speed = speed - decreaseNum;
if (speed < minSpeed) speed = minSpeed; 

Step 4

Export the movie Ctrl + Enter. Now press down on the windmill and it will gradually speed it, and release the mouse and it will gradually slow down. 


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP