Create a Windmill Effect Photo Gallery

October 19th, 2009 in Flash

The following lesson will teach you how to create a windmill effect to display various photos. When the user clicks on one of the navigation’s arrows, the next photo will appear with a movement of a rotating wing of a windmill. This tutorial uses actionscript 3 as usual and the Tweenlite engine.

View DemoDownload Source

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

2. Rename “layer 1″ to “content”. Import 4 images of the same size and arrange them as shown above. Select all of them and convert the selection to a movie clip with registration point at the center and give it an instance name of “content_mc”.

Screenshot

3. Create a new layer above, and name it “mask”. With the rectangle tool selected, draw a rectangle that covers the upper part of the content. Right click on the “mask” layer and choose Mask.

3. Create a new layer named “arrows” and create a left and a right arrow. Convert each to a movie clip with “left_mc” and “right_mc” as respective instance name.

4. Create a new “actions” layer at the top and open the actions panel.
We’ll use the Tweenlite engine so first if you don’t have it already, go to http://blog.greensock.com/tweenliteas3/ to download it.
Extract the zip file and get the gs directory. Place this directory at the same level of your flash file.

5. In order to use the TweenLite engine write the following statement:

import gs.*;

6. First set for each arrow its buttonMode property to true and add a Click event listener that will be handled by the rotate function.

left_mc.buttonMode = true;
right_mc.buttonMode = true;
left_mc.addEventListener(MouseEvent.CLICK,rotate);
right_mc.addEventListener(MouseEvent.CLICK,rotate);

7. In the rotate function, to prevent the user from clicking again on one of the arrow while the rotation is made, first we remove the click event listeners to both arrows.
Next we check which arrow has been clicked and use the Tweenlite engine to create a tween on the content_mc’s rotation property. If it is the left arrow, we remove 90 degrees and if it is the right we add 90 degrees. When the tween has finished we re-add the click event listeners by calling the onTweenFinished function.

function rotate(e:MouseEvent):void{
	right_mc.removeEventListener(MouseEvent.CLICK,rotate);
	left_mc.removeEventListener(MouseEvent.CLICK,rotate);
	if (e.currentTarget == left_mc)
		 TweenLite.to(content_mc,.5 ,{rotation:content_mc.rotation - 90, onComplete:onTweenFinished});
	else TweenLite.to(content_mc,.5 ,{rotation:content_mc.rotation + 90, onComplete:onTweenFinished});
}

function onTweenFinished():void{
	right_mc.addEventListener(MouseEvent.CLICK,rotate);
	left_mc.addEventListener(MouseEvent.CLICK,rotate);
}

8. Here’s the final code, test your movie to see it in action.

import gs.*;

left_mc.buttonMode = true;
right_mc.buttonMode = true;
left_mc.addEventListener(MouseEvent.CLICK,rotate);
right_mc.addEventListener(MouseEvent.CLICK,rotate);

function rotate(e:MouseEvent):void{
	right_mc.removeEventListener(MouseEvent.CLICK,rotate);
	left_mc.removeEventListener(MouseEvent.CLICK,rotate);
	if (e.currentTarget == left_mc)
		 TweenLite.to(content_mc,.5 ,{rotation:content_mc.rotation - 90, onComplete:onTweenFinished});
	else    TweenLite.to(content_mc,.5 ,{rotation:content_mc.rotation + 90, onComplete:onTweenFinished});
}

function onTweenFinished():void{
	right_mc.addEventListener(MouseEvent.CLICK,rotate);
	left_mc.addEventListener(MouseEvent.CLICK,rotate);
}
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Twitter


What you think ...

(7 Comments)

+ Add a Comment
  1. TheWebTuts
    Oct 20th, 2009

    Tutorial added to thewebtuts.com

  2. Joseph
    Oct 21st, 2009

    I like the way you removed the eventlistners straight after its being called back.

  3. 45+ Advanced Adobe Flash Actionscript Trainings | Master Design
    Nov 1st, 2009

    [...] Create a Windmill Effect Photo Gallery [...]

  4. Boogoom
    Nov 25th, 2009

    i have downloaded the source code. it doesn’t work. i even installed the tweenlite engine in flash directory. It seems that the gs is not on that directory.. what should i do?

  5. admin
    Nov 25th, 2009

    @ BOOGOOM : Hi,
    At the time this tutorial was written, we didn’t use the updated Tweenlite version.
    Now with the Tweenlitethe V11 the line : import gs.*;
    should be replaced with : import com.greensock.*;

    Hope you’ll make it work

  6. Advanced Adobe Flash Actionscript Trainings « Flash Criminals
    Nov 26th, 2009

    [...] Create a Windmill Effect Photo Gallery [...]

  7. amarie
    Jan 27th, 2010

    I am getting 5 different complier errors… my code looks as such…

    stop();

    HM_btn.addEventListener(MouseEvent.CLICK,hmClick);

    function hmClick(event:MouseEvent):void{
    gotoAndPlay(“Home”)
    }

    import com.greensock.*;

    left_mc.buttonMode = true;
    right_mc.buttonMode = true;
    left_mc.addEventListener(MouseEvent.CLICK,rotate);
    right_mc.addEventListener(MouseEvent.CLICK,rotate);

    function rotate(e:MouseEvent):void{
    right_mc.removeEventListener(MouseEvent.CLICK,rotate);
    left_mc.removeEventListener(MouseEvent.CLICK,rotate);
    if (e.currentTarget == left_mc)
    TweenLite.to(content_mc,.5 ,{rotation:content_mc.rotation – 90, onComplete:onTweenFinished});
    else TweenLite.to(content_mc,.5 ,{rotation:content_mc.rotation + 90, onComplete:onTweenFinished});
    }

    function onTweenFinished():void{
    right_mc.addEventListener(MouseEvent.CLICK,rotate);
    left_mc.addEventListener(MouseEvent.CLICK,rotate);
    }

    the errors are…
    1093 syntax error and 1086 syntax error both for line 10.
    and 1093 and 1084 for line 17.

    any help would be great!

Leave a Comment

Name (required)

E-mail (required, will not be published)

Website