Create a Windmill Effect Photo Gallery
October 19th, 2009 in Flash | 8 CommentsThe 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.
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”.
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);
}
Oct 20th, 2009
Tutorial added to thewebtuts.com
Oct 21st, 2009
I like the way you removed the eventlistners straight after its being called back.
Nov 1st, 2009
[...] Create a Windmill Effect Photo Gallery [...]
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?
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
Nov 26th, 2009
[...] Create a Windmill Effect Photo Gallery [...]
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!
Apr 19th, 2010
[...] Create a Windmill Effect Photo Gallery [...]