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

2. First let’s create the “template” button that will use to create the menu.
Create a Movie Clip (Insert>New Symbol) and give it a name of MyBtn.
Export you button for actionscript with a class name of MyBtn.
Inside this movie clip reproduce the same thing as shown below:

3. Open the actions panel. We’ll use the Tweenlite engine so first if you don’t already have it
go to http://blog.greensock.com/tweenlite/ to download the AS3 version.
Extract the zip file and get the com directory. Place this directory at the same level of your flash file.
First write the following statements to use Tweenlite. We’ll use the Tint plugin to manage the colors so we need to activate it.(More infos at http://www.greensock.com/tweenlite/).

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

4. Next store the label buttons in an array and their colors inside another array.

var btnsArray:Array = ["Home", "News", "About", "Contact", "Info"];
var colors:Array= [0xFF0000,0x66CC00,0XFF9933,0x6633FF,0xFF33CC,0x660066];

5. Then write a createButtons() function.
Loop through the btnsArray. For each button, we use the MyBtn class that we’ve previously declared and use Tweenlite to change the tint property of the button’s rectangle.
We set its x and y properties and its label by setting the btn_label text property.

Then we add the different mouse event listeners and add the button to the display list.

createButtons();

function createButtons ():void{
	for (var i :uint= 0; i < btnsArray.length; i++){
		var btn:MyBtn = new MyBtn();
		TweenLite.to (btn.btn_rect, 0, {tint: colors[i]});
		btn.x = i*115;
		btn.y = 0;
		btn.btn_label.text = btnsArray[i];

		btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
		btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
		btn.addEventListener(MouseEvent.CLICK, btnClick);

		btn.buttonMode = true;
		btn.mouseChildren = false;
		addChild (btn);
	}
}

6. In the btnOver() function we change the button label color and increase the height of the rectangle.

function btnOver (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0xFFFFFF});
	TweenLite.to (mc.btn_rect,.5, {height: 35});
}
}

7. In the btnOut() function we reset the btn label color to black and decrease the height of the rectangle.

function btnOut (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0x000000});
	TweenLite.to (mc.btn_rect, .5, {height: 5});
}

9. Finally for the btnClick() function we let you continue write your own code.

function btnClick(e:MouseEvent):void{
	//do your stuff here
}

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

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

var btnsArray:Array = ["Home", "News", "About Me", "Infos","Contact",];
var colors:Array= [0xFF0000,0x66CC00,0XFF9933,0x6633FF,0xFF33CC,0x660066];

createButtons();

function createButtons ():void{
	for (var i :uint= 0; i < btnsArray.length; i++){
		var btn:MyBtn = new MyBtn();
		TweenLite.to (btn.btn_rect, 0, {tint: colors[i]});
		btn.x = i*115;
		btn.y = 0;
		btn.btn_label.text = btnsArray[i];

		btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
		btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
		btn.addEventListener(MouseEvent.CLICK, btnClick);

		btn.buttonMode = true;
		btn.mouseChildren = false;
		addChild (btn);
	}
}

function btnOver (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0xFFFFFF});
	TweenLite.to (mc.btn_rect,.5, {height: 35});
}

function btnOut (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0x000000});
	TweenLite.to (mc.btn_rect, .5, {height: 5});
}

function btnClick(e:MouseEvent):void{
	//do your stuff here
}

1. With Flash CS5, create a new Flash file (Actionscript 3.0) and save it as columns.fla.

2. Rename “Layer 1″ to “Text”. With the Text tool selected, verify that it is set on TLF Text and draw a text box.

Give it an instance name of “tlf” and paste your text in it.

3. Create a new layer named “button”. Create 3 buttons and give them instance names of “btn1″, “btn2″ and “btn3″.

4. Create a new “actions layer” and open the actions panel. First add the CLICK event listener to the three buttons.

btn1.addEventListener(MouseEvent.CLICK, layoutColumns);
btn2.addEventListener(MouseEvent.CLICK, layoutColumns);
btn3.addEventListener(MouseEvent.CLICK, layoutColumns);

5. Inside the layoutColumns() function we check which button has triggered the Click event to change the number of text columns and the gap between them accordingly. To do so we use the “columnCount” and “columnGap” properties of the new TextLayoutFormat class.

function layoutColumns(evt:MouseEvent):void {
	switch(evt.currentTarget.name){
		case "btn1" :
			tlf.columnCount =  1;
			break;
		case "btn2" :
			tlf.columnCount =  2;
			tlf.columnGap = 30;
			break;
		case "btn3" :
			tlf.columnCount =  3;
			tlf.columnGap = 20;
			break;
	}
}

6. That’s it, here’s the final code, test your movie to see it in action.

btn1.addEventListener(MouseEvent.CLICK, setColumn);
btn2.addEventListener(MouseEvent.CLICK, setColumn);
btn3.addEventListener(MouseEvent.CLICK, setColumn);

function setColumn(evt:MouseEvent):void {
	switch(evt.currentTarget.name){
		case "btn1" :
			tf.columnCount =  1;
			break;
		case "btn2" :
			tf.columnCount =  2;
			tf.columnGap = 30;
			break;
		case "btn3" :
			tf.columnCount =  3;
			tf.columnGap = 20;
			break;
	}
}

1. With Flash CS4 or CS5, create a new flash file (Actionscript 3.0) and save it as flip.fla.

2. Rename “layer 1″ to “content”. Create all your movie clips that you want to animate. Set their registration point at the center.

3. Create a new layer named “butttn”. Create your button and set its instance name to “btn”.

4. Create a new “actions” layer. We’ll use the Tweenlite engine, so first if you don’t already have it go download its AS3 version. Open the actions panel.
First make the following import in order to use it.

import com.greensock.*;

5. At first we don’t want to see the movie clips. Loop through all the objects contained in “content_mc” to set their alpha property to 0.

function init():void{
	for (var i:int =0; i < content_mc.numChildren; i++) {
		 var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		 mc.alpha = 0;
	}
}

6. Next add a CLICK event listener to the button.
In the flipAll() function, we begin by removing the button from the stage.
Next we loop through all the movie clips. For each, we set its index to 0 so that if ever a movie clip intersects with one which is in front of it, this movie clip will stay at the back. And we use the Tweenlite engine to animate its alpha, rotationX and z properties. We specify the delay parameter to make the movie clips appear one after another.

btn.addEventListener(MouseEvent.CLICK,flipAll);

function flipAll(e:MouseEvent):void{
	removeChild(btn);
	for (var i:int = 0; i < content_mc.numChildren; i++){
     		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
			content_mc.setChildIndex(mc,0);
			TweenLite.to(mc,.8,
						 {alpha: 1,
						 rotationX : mc.rotationX -360,
						 z:mc.z - 200,
						 delay: i*.3}
						 );
	}
}

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

import com.greensock.*;

function init():void{
	for (var i:int =0; i < content_mc.numChildren; i++) {
		 var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		 mc.alpha = 0;
	}
}

btn.addEventListener(MouseEvent.CLICK,flipAll);

function flipAll(e:MouseEvent):void{
	removeChild(btn);
	for (var i:int = 0; i < content_mc.numChildren; i++){
     		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
			content_mc.setChildIndex(mc,0);
			TweenLite.to(mc,.8,
						 {alpha: 1,
						 rotationX : mc.rotationX -360,
						 z:mc.z - 200,
						 delay: i*.3}
						 );
	}
}

init();

1. As we’ll use one of Flash Player 10’s 3D features, you need at least Flash CS4 to follow this tutorial.
Create a new flash file (Actionscript 3.0) and save it as swingingImages.fla.

2. Rename “layer 1″ to “content”. Import your images on the stage and convert each to a movie clip with registration point at the top left. Give them respective instance names of “pic1″, “pic2″ etc…

3. Create a new layer called “button”. Create your own button and give it an instance name of “btn”.

4. Then create an “actions” layer. We’ll use the Tweenlite engine, so first if you don’t already have it go download its AS3 version. Open the actions panel.
First make the following import in order to use it.

import com.greensock.*;

5. Store your images inside an array.

var images : Array = [pic1,pic2,pic3,pic4]  ;

6. Create an init() function to loop through the “images” array and set for each movie clip its alpha property to 0 and its rotationX property to 270. Thereby the images will be lifted and not visible.

function init():void{
	for (var i:int = 0; i < images.length; i++){
		var mc:MovieClip = images[i] as MovieClip;
		mc.alpha = 0;
		mc.rotationX = 270;
	}
}

7. Next add a CLICK event listener to the button, event that will be handled by the swingImages function.
Inside the swingImages function we first call the init() function.
Then we loop through the “images” array and use the Tweenlite engine to animate its alpha and rotationX property. We specify the delay parameter to make the images appear one after another.

btn.addEventListener(MouseEvent.CLICK,swingImages);

function swingImages(e:MouseEvent):void{
	init();
	for (var i:int = 0; i < images.length; i++){
     		var mc:MovieClip = images[i] as MovieClip;
            TweenLite.to(mc,.5,{alpha: 1,rotationX: 0,delay: i*.4});
	}
}

8. Finally call the init() function so that the images are not visible at the beginning.
Here’s the final code, test your movie to see it in action.

import com.greensock.*;

var images : Array = [pic1,pic2,pic3,pic4] ;

function init():void{
	for (var i:int = 0; i < images.length; i++){
		var mc:MovieClip = images[i] as MovieClip;
		mc.alpha = 0;
		mc.rotationX = 270;
	}
}

btn.addEventListener(MouseEvent.CLICK,swingImages);

function swingImages(e:MouseEvent):void{
	init();
	for (var i:int = 0; i < images.length; i++){
     		var mc:MovieClip = images[i] as MovieClip;
            TweenLite.to(mc,.5,{alpha: 1,rotationX: 0,delay: i*.4});
	}
}

init();

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

2. Rename “layer 1″ to “actions”. Open the actions panel.
Declare the following variables:

var myText:String;
var counter:int = 0;

3. Create a TextFormat object in order to format our text.

var format : TextFormat = new TextFormat();
format.size = 16;
format.font = "Verdana";
format.bold = true;
format.color = 0xFFFFFF;

4. Create a TextField, set its properties as follow and add it to the display list.

var textField : TextField = new TextField();
textField.width = 600;
textField.height = 350;
textField.selectable = false;
textField.wordWrap = true;
textField.defaultTextFormat = format;
textField.x = textField.y =10;
addChild(textField);

5. Next create an initText function that set the “myText” variable to the string passed as argument. Also add an ENTER_FRAME event listener.

function initText(string:String):void{
	myText = string;
	addEventListener(Event.ENTER_FRAME, writeText);
}

6. The writeText function checks whether the counter variable is inferior or equal to the length of “myText”.
While it’s true, we use the substr method that returns a substring consisting of the characters that start at index 0 and with a length specified by counter. When it becomes false, we remove the ENTER_FRAME listener.

function writeText(e:Event):void{
	if (counter <= myText.length){
   	     textField.text = myText.substr(0,counter);
   	     counter++;
	}
	else{
		removeEventListener(Event.ENTER_FRAME,writeText);
	}
}

7. The text to be display is stored inside a text file. So create your text file, type your own text and save it as text.txt inside the same directory of your fla file. Then load the file. When the load is complete, it simply calls the initText function.

var textLoader:URLLoader = new URLLoader(new URLRequest("text.txt"));
textLoader.addEventListener(Event.COMPLETE, function(e:Event){initText(e.target.data);});

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

var myText:String;
var counter:int = 0; 

var format : TextFormat = new TextFormat();
format.size = 16;
format.font = "Verdana";
format.bold = true;
format.color = 0xFFFFFF; 

var textField : TextField = new TextField();
textField.width = 600;
textField.height = 350;
textField.selectable = false;
textField.wordWrap = true;
textField.defaultTextFormat = format;
textField.x = textField.y =10;
addChild(textField);

var textLoader:URLLoader = new URLLoader(new URLRequest("text.txt"));
textLoader.addEventListener(Event.COMPLETE, function(e:Event){initText(e.target.data);});

function initText(string:String):void{
	myText = string;
	addEventListener(Event.ENTER_FRAME, writeText);
}

function writeText(e:Event):void{
	if (counter <= myText.length){
   	     textField.text = myText.substr(0,counter);
   	     counter++;
	}
	else{
		removeEventListener(Event.ENTER_FRAME,writeText);
	}
}

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

2. Rename “layer 1″ to “buttons”. Create the previous and next buttons and give them respective instance names of “previous_btn” and “next_btn”.

3. Create a new layer named “loading infos”. With the Text tool, create a Dynamic text and give it an instance name of “loading_txt”. We’ll use it later to inform the user about the images’ loading progression.

4. Create a new layer named “container”.
First let’s create a mask that will use to display only 3 images on the screen. As our images are 260px*196px, and that we want to display 3 images and let some space between the images (10px), in our case we have drawn a Rectangle of 800px*196px. Adjust the rectangle size according to your needs. Convert it to a Movie Clip with an instance name of “slider_mc”. Enter this movie clip to edit it. Reselect the rectangle shape and convert it to a Movie clip with an instance name of “mask_mc”.

5. We’ll store the images’ datas in an XML file. Create an xml file that match the following structure and save it as datas.xml. Put all your images inside an “images” folder.

<?xml version="1.0" encoding="UTF-8" ?>
<images>
	<image src="1.jpg"/>
	<image src="2.jpg"/>
	<image src="3.jpg"/>
	<image src="4.jpg"/>
	<image src="5.jpg"/>
	<image src="6.jpg"/>
	<image src="7.jpg"/>
	<image src="8.jpg"/>
	<image src="9.jpg"/>
	<image src="10.jpg"/>
	<image src="11.jpg"/>
	<image src="12.jpg"/>
	<image src="13.jpg"/>
	<image src="14.jpg"/>
	<image src="15.jpg"/>
	<image src="16.jpg"/>
</images>

6. Create an “actions” layer. We’ll use the Tweenlite engine, so first go download its AS3 version. Open the actions panel.
First make the following imports in order to use the Twenlite engine and its easing properties.

import com.greensock.*;
import com.greensock.easing.*;

7. Next declare the following variables.

var xml:XML;
var images:Array = new Array();
var totalImages:Number;
var nbDisplayed:Number = 3; // Number of images displayed on the screen
var imagesLoaded:int = 0;
var slideTo:Number = 0;
var imageWidth = 270;  // our images are 260px wide so we set to 270 to let some space when will position them

8. Create a new MovieClip where we’ll place all the images and set its mask property to the mask we’ve created before.

var container_mc:MovieClip = new MovieClip();
slider_mc.addChild(container_mc);
container_mc.mask = slider_mc.mask_mc;

9. Load the XML file by creating a loadXML funtion. When the load is complete, it will call the parseXML function.

function loadXML(file:String):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE, parseXML);
}

10. Then we need to parse the XML. We set our xml variable to the xml data, get the total amount of images and call the loadImages function.

function parseXML(e:Event):void{
	xml = new XML(e.target.data);
	totalImages = xml.children().length();
	loadImages();
}

11. Inside the loadImages function, we create a “for” statement to loop through the xml datas to create a Loader for each image. We store the Loader inside our images Array variable, and we add listeners for the ProgressEvent.PROGRESS event and the Event.COMPLETE event.

function loadImages():void{
	for(var i:int = 0; i<totalImages; i++){
		var loader:Loader = new Loader();
		loader.load(new URLRequest("images/"+String(xml.children()[i].@src)));
		images.push(loader);
		loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onProgress);
	    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
	}
}

12. The onProgress function is used to warn the user about the progression of the images’ loading.

function onProgress(e:ProgressEvent):void{
	loading_txt.text = "Loading " + imagesLoaded + " / " + totalImages;
}

13. The onComplete function checks whether all images are loaded. If so, it calls the createImages() function.

function onComplete(e:Event):void{
	imagesLoaded++;
	if(imagesLoaded == totalImages){
		loading_txt.text = "";
		createImages();
	}
}

14. Inside the createImages() function, create a “for” statement to loop through the images array in order to create a bitmap object. We set the x property of the bitmap by multiplying the i variable with our imageWidth variable. And we add the bitmap to the container_mc.

function createImages():void{
	for(var i:int = 0; i < images.length; i++){
		var bm:Bitmap = new Bitmap();
		bm = Bitmap(images[i].content);
		bm.smoothing = true;
		bm.x = i*imageWidth;
		container_mc.addChild(bm);
	}
}

15. At this point, we’ve finished loading our images. Now let’s take care about the buttons to slide left and right.
Add the CLICK event listeners for both buttons.

previous_btn.addEventListener(MouseEvent.CLICK,slideLeft);
next_btn.addEventListener(MouseEvent.CLICK,slideRight);

16. At the beginning, we’ve created a slideTo variable. We’ll use it to store the number of the image we want to slide to (the one that we see on the left).
In the slideLeft function we want to go 3 (nbDisplayed = 3) images to the left whereas in the slideRight function we want to go 3 images to the right.

function slideLeft(e:MouseEvent):void{
	slideTo -= nbDisplayed;
	slideContainer();
}

function slideRight(e:MouseEvent):void{
	slideTo += nbDisplayed;
	slideContainer();
}

17. The slideContainer() functions checks at first if we can actually move that far to the left or right so that there’s always 3 images displayed. If not we set the slideTo variable to the appropriate value. Then we use the Tweenlite engine to animate the x property of “container_mc”.

function slideContainer():void{
	if(totalImages - slideTo < nbDisplayed)
		slideTo = totalImages - nbDisplayed;
	if(slideTo < 0)
		slideTo = 0;

	TweenLite.to(container_mc,.5,{x:-slideTo*imageWidth,ease:Quad.easeIn});
}

18. Next we add keyboard functionnality to allow the user to navigate with the right and left arrow keys.

stage.addEventListener(KeyboardEvent.KEY_DOWN,keyHandler);

function keyHandler(evt:KeyboardEvent) {
	if(evt.keyCode == Keyboard.LEFT)  slideLeft(evt);
	else if(evt.keyCode == Keyboard.RIGHT) slideRight(evt);
}

19. Finally, don’t forget to call the loadXML function to make all that works.

loadXML("datas.xml");

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

import com.greensock.*;
import com.greensock.easing.*;

var xml:XML;
var images:Array = new Array();
var totalImages:Number;
var nbDisplayed:Number = 3;
var imagesLoaded:int = 0;
var slideTo:Number = 0;
var imageWidth = 270; 

var container_mc:MovieClip = new MovieClip();
slider_mc.addChild(container_mc);
container_mc.mask = slider_mc.mask_mc;

function loadXML(file:String):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE, parseXML);
}

function parseXML(e:Event):void{
	xml = new XML(e.target.data);
	totalImages = xml.children().length();
	loadImages();
}

function loadImages():void{
	for(var i:int = 0; i<totalImages; i++){
		var loader:Loader = new Loader();
		loader.load(new URLRequest("images/"+String(xml.children()[i].@src)));
		images.push(loader);
		loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onProgress);
	    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
	}
}

function onProgress(e:ProgressEvent):void{
	loading_txt.text = "Loading " + imagesLoaded + " / " + totalImages;
}

function onComplete(e:Event):void{
	imagesLoaded++;
	if(imagesLoaded == totalImages){
		loading_txt.text = "";
		createImages();
	}
}

function createImages():void{
	for(var i:int = 0; i < images.length; i++){
		var bm:Bitmap = new Bitmap();
		bm = Bitmap(images[i].content);
		bm.smoothing = true;
		bm.x = i*imageWidth;
		container_mc.addChild(bm);
	}
}

previous_btn.addEventListener(MouseEvent.CLICK,slideLeft);
next_btn.addEventListener(MouseEvent.CLICK,slideRight);

function slideLeft(e:MouseEvent):void{
	slideTo -= nbDisplayed;
	slideContainer();
}

function slideRight(e:MouseEvent):void{
	slideTo += nbDisplayed;
	slideContainer();
} 

function slideContainer():void{
	if(totalImages - slideTo < nbDisplayed)
		slideTo = totalImages - nbDisplayed;
	if(slideTo < 0)
		slideTo = 0;

	TweenLite.to(container_mc,.5,{x: -slideTo*imageWidth,ease:Quad.easeIn});
}

stage.addEventListener(KeyboardEvent.KEY_DOWN,keyHandler);

function keyHandler(evt:KeyboardEvent) {
	if(evt.keyCode == Keyboard.LEFT)  slideLeft(evt);
	else if(evt.keyCode == Keyboard.RIGHT) slideRight(evt);
}

loadXML("datas.xml");

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

2. First, create a movie clip with several frames, each frame containing a different flower.
Export the movie clip for Actionscript and give it a Class name of Flower.

3. We’ll use the Tweenlite engine, so first go download its AS3 version. Open the actions panel.
First make the following imports in order to use the Twenlite engine and its easing properties.

import com.greensock.*;
import com.greensock.easing.*;

4. Next manage the events that interest us that is MOUSE_UP and MOUSE_DOWN.

stage.addEventListener(MouseEvent.MOUSE_UP,stopSpray);
stage.addEventListener(MouseEvent.MOUSE_DOWN,startSpray);

function startSpray(e:MouseEvent):void {
	stage.addEventListener(Event.ENTER_FRAME,sprayFlowers);
}

function stopSpray(e:MouseEvent):void {
	stage.removeEventListener(Event.ENTER_FRAME,sprayFlowers);
}

5. In the sprayFlower function, we create a new Flower object. At first, we choose a random flower by stopping on a random frame, position the flower according to the mouse position and scale it to 0.
Then we use the Tweenlite engine to animate its x, y and rotation properties by setting their values to random numbers, and set the scaleX and scaleY properties to the same random value. Also we set the ease property to make the effect more catchy.

function sprayFlowers(e:Event):void {
	var flower:MovieClip = new Flower();
	flower.gotoAndStop(Math.ceil(Math.random()*flower.totalFrames));
	flower.x = mouseX;
	flower.y = mouseY;
	flower.scaleX = flower.scaleY = 0;
	addChild(flower);
	var randomScale:Number = 1 + Math.random()*0.5 - 0.5;
	TweenLite.to(flower, 1,{ x: mouseX + Math.random() * 60 - 30,
							 y: mouseY + Math.random() * 60 - 30,
							 rotation: Math.random() * 90 - 45,
							 scaleX: randomScale, scaleY: randomScale,
							 ease:Bounce.easeOut});
}

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

import com.greensock.*;
import com.greensock.easing.*;

stage.addEventListener(MouseEvent.MOUSE_UP,stopSpray);
stage.addEventListener(MouseEvent.MOUSE_DOWN,startSpray);

function startSpray(e:MouseEvent):void {
	stage.addEventListener(Event.ENTER_FRAME,sprayFlowers);
}

function stopSpray(e:MouseEvent):void {
	stage.removeEventListener(Event.ENTER_FRAME,sprayFlowers);
}
function sprayFlowers(e:Event):void {
	var flower:MovieClip = new Flower();
	flower.gotoAndStop(Math.ceil(Math.random()*flower.totalFrames));
	flower.x = mouseX;
	flower.y = mouseY;
	flower.scaleX = flower.scaleY = 0;
	addChild(flower);
	var randomScale:Number = 1 + Math.random()*0.5 - 0.5;
	TweenLite.to(flower, 1,{ x: mouseX + Math.random() * 60 - 30,
							 y: mouseY + Math.random() * 60 - 30,
							 rotation: Math.random() * 90 - 45,
							 scaleX: randomScale, scaleY: randomScale,
							 ease:Bounce.easeOut});
}

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

2. Rename “layer 1″ to “content”. Import your images on the stage and convert each to a movie clip with registration point at the top left. Arrange them into a stack.
Select all your photos and convert the selection to a movie clip with registration point at the top left. Give it an instance name of “gallery”.

3. Create a new “actions” layer. We’ll use the Tweenlite engine, so first go download its AS3 version.
Open the actions panel.
First make the following imports that in order to use the Twenlite engine and its easing properties.

import com.greensock.*;
import com.greensock.easing.*;

4. Next as we want the gallery to auto-play, we’ll use a Timer.

var timer:Timer = new Timer(4000);
timer.addEventListener(TimerEvent.TIMER,showNext);
timer.start();

5. The showNext function consists of moving the stack’s front photo to the right so that the next photo appears.
To do so, retrieve the front photo and use the Tweenlite engine to change its x, y and rotation properties.
When this Tween will be complete, we call the moveBack function.

var frontPhoto:MovieClip;

function showNext(e:TimerEvent):void{
	frontPhoto = MovieClip(gallery.getChildAt(gallery.numChildren-1));
	TweenLite.to(frontPhoto, .8,{x:600,y:-200,rotation:45,ease:Quart.easeIn,onComplete:moveBack});
}

6. The moveBack function is used to put the photo at the back of the stack. To do so, we change its depth to 0 and use Tweenlite to set its x and y properties to random values (near 0) and the rotation property to 0.

function moveBack():void{
	gallery.setChildIndex(frontPhoto,0)
	TweenLite.to(frontPhoto, 1,{x:Math.random()*80 -40 , y:Math.random()*40 -20 ,rotation:0});
}

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

import com.greensock.*;
import com.greensock.easing.*;

var timer:Timer = new Timer(4000);
timer.addEventListener(TimerEvent.TIMER,showNext);
timer.start();

var frontPhoto:MovieClip;

function showNext(e:TimerEvent):void{
	frontPhoto = MovieClip(gallery.getChildAt(gallery.numChildren-1));
	TweenLite.to(frontPhoto, .8,{x:600,y:-200,rotation:45,ease:Quart.easeIn,onComplete:moveBack});
}

function moveBack():void{
	gallery.setChildIndex(frontPhoto,0)
	TweenLite.to(frontPhoto, 1,{x:Math.random()*80 -40 , y:Math.random()*40 -20 ,rotation:0});
}

1. Create a new Flash file (AS3) and save it as sharedobject.fla.

2. Rename “layer 1″ to “Button”. On this layer create the mute/unmute button which is a movie clip with 2 keyframes, the first for the mute and the 2nd for the unmute. Add stop() action on each frame.

3. Back to Scene 1, create an “actions” layer. With the first frame selected open the actions panel.

(For more details about SharedObject check the documentation)

First we call the getLocal() method to create an instance of a SharedObject and retrieve a reference of the shared object which name is “riacodes_sound”. Next we retrieve the ismute info from the SharedObject by accessing the info through the data property.

var mySO:SharedObject = SharedObject.getLocal("riacodes_sound");
var isMute : Boolean = mySO.data.ismute != null ? mySO.data.ismute : false;

4. Next we add the script to load the sound and play it and create the toggleMute function.

var song:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();
var songPosition : Number = 0;

mute_mc.addEventListener(MouseEvent.CLICK,toggleMute;
mute_mc.buttonMode = true;

song.load(new URLRequest("sound.mp3"));
if(!isMute)
	channel = song.play();
else
	mute_mc.gotoAndStop(2);

function toggleMute(e:MouseEvent):void{
	if(!isMute){
		songPosition = channel.position;
	        channel.stop();
		isMute = true;
		mute_mc.gotoAndStop(2);
	}
	else {
		channel = song.play(songPosition);
		isMute = false;
		mute_mc.gotoAndStop(1);
	}

}

5. Last thing that we need to do, is to store the ismute info data each time the user mute or unmute the sound. To do so, at the end of the toggleMute function, we add ismute data to the SharedObject by setting its value to the isMute Boolean variable and call the flush() method to write the data inside the end user’s machine.

function toggleMute(e:MouseEvent):void{
	if(!isMute){
		songPosition = channel.position;
	       channel.stop();
		isMute = true;
		mute_mc.gotoAndStop(2);
	}
	else {
		channel = song.play(songPosition);
		isMute = false;
		mute_mc.gotoAndStop(1);
	}

	mySO.data.ismute = isMute;
	mySO.flush ();
}

6. Here’s the final code, test your movie and try playing with the mute button and refresh your page to see the code in action.

var mySO:SharedObject = SharedObject.getLocal("riacodes_sound");
var isMute : Boolean = mySO.data.ismute != null ? mySO.data.ismute : false;

var song:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();
var songPosition : Number = 0;

mute_mc.addEventListener(MouseEvent.CLICK,toggleMute);
mute_mc.buttonMode = true;

song.load(new URLRequest("sound.mp3"));
if(!isMute)
	channel = song.play();
else
	mute_mc.gotoAndStop(2);

function toggleMute(e:MouseEvent):void{
	if(!isMute){
		songPosition = channel.position;
	    channel.stop();
		isMute = true;
		mute_mc.gotoAndStop(2);
	}
	else {
		channel = song.play(songPosition);
		isMute = false;
		mute_mc.gotoAndStop(1);
	}

	mySO.data.ismute = isMute;
	mySO.flush ();
}

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

2. Rename “layer 1″ to “content”. Place 4 images on the stage and align them. Convert each one to a movie clip with registration point at the center. Next scale down each movie clip to 0.4 of its actual size so that when we zoom in a photo it will completely covers the others on the back. As each of our image is 300px height, we set it to 120px and its width proportionnally.

3. Select the 4 movie clips and convert the selection to a movie clip with registration point at the center. Give it an instance name of “content_mc”.

4. Create an “actions” layer. We’ll use the Tweenlite engine, so first go download its AS3 version.

Open the actions panel.
First make the following imports that we need to use the Twenlite engine and to create the hover glow effect.

import com.greensock.*;
import flash.filters.*;

5. Create an init() function that loop through all the children of “content_mc” to add mouse event listeners and store their initial x and y coordinates.

function init():void{
	for(var i:int=0; i< content_mc.numChildren; i++){
		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		mc.buttonMode = true;
		mc.posX = mc.x;
		mc.posY = mc.y;
		mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
		mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
		mc.addEventListener(MouseEvent.CLICK, onClick);
	}
}

6. For the onOver function we simply add a glow filter and for the onOut function we remove it.

var glow:GlowFilter=new GlowFilter(0xffffff, 1, 2, 2, 3, 255, false, false);

function onOver (evt:MouseEvent) {
	evt.target.filters=[glow];
}

function onOut (evt:MouseEvent) {
	evt.target.filters=[];
}

7. For the onClick function we use the Tweenlite engine to scale up and down the photo clicked.
Outside the function declare a zoom variable that will store the current movie clip that is in front.

var zoom : MovieClip;
function onClick (evt:MouseEvent) {

}

8. When the onClick function is called, we need to know whether it is to zoom in a photo or to zoom out the one which is in front.
To do so, we check whether the zoom variable is equal to the movie clip that has triggered the click event :
- If NO, which means no photo is in front, we set the zoom variable to the movie clip and set the movie clip index to the highest one so that when we zoom it, the photo will be in front of the other three.
Then we use the Tweenlite engine to scale it up and set its x and y coordinates to 0 so that it centers inside the container.
- If YES, which means one photo is in front of the others, we scale it down and set its x and y properties to their original values, and we set the zoom variable to null.

var zoom : MovieClip;
function onClick (evt:MouseEvent) {
	var mc = evt.target as MovieClip;

	if(zoom != mc){
		zoom = mc;
		content_mc.setChildIndex(mc, content_mc.numChildren -1);
		TweenLite.to(mc, 0.5,{scaleX:1,scaleY:1,x:0,y:0});
	}
	else {
		TweenLite.to(mc, 0.5,{scaleX:0.4,scaleY:0.4,x:zoom.posX,y:zoom.posY});
		zoom = null;
	}
}

9. Finally don’t forget to call the init() function.
Here’s the final code, test your movie to see it in action.

import com.greensock.*;
import flash.filters.*;

var glow:GlowFilter=new GlowFilter(0xffffff, 1, 2, 2, 3, 255, false, false);

function init():void{
	for(var i:int=0; i< content_mc.numChildren; i++){
		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		mc.buttonMode = true;
		mc.posX = mc.x;
		mc.posY = mc.y;
		mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
		mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
		mc.addEventListener(MouseEvent.CLICK, onClick);
	}
}

function onOver (evt:MouseEvent) {
	evt.target.filters=[glow];
}

function onOut (evt:MouseEvent) {
	evt.target.filters=[];
}

var zoom : MovieClip;
function onClick (evt:MouseEvent) {
	var mc = evt.target as MovieClip;

	if(zoom != mc){
		zoom = mc;
		content_mc.setChildIndex(mc, content_mc.numChildren -1);
		TweenLite.to(mc, 0.5,{scaleX:1,scaleY:1,x:0,y:0});
	}
	else {
		TweenLite.to(mc, 0.5,{scaleX:0.4,scaleY:0.4,x:zoom.posX,y:zoom.posY});
		zoom = null;
	}
}

init();