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

2. Rename “layer1″ to “btn”. Create the “skip” button and give it an instance of skip_btn.

3. Create an “actions” layer and open the actions panel.
First, we need to set up the video and add to the NetStream instance a listener for the NET_STATUS event.

var conn:NetConnection = new NetConnection();
conn.connect(null);

var stream:NetStream = new NetStream(conn);
stream.addEventListener(NetStatusEvent.NET_STATUS, onStatus);
stream.client = this;

var video:Video = new Video();
video.width = 640;
video.height = 480;
video.x = 0;
video.y = 0;
addChild(video);
video.attachNetStream(stream);

4. The onStatus function detects the end of the video stream in order to redirect the user to the main page of the site.

function onStatus(e:Object):void{
	 if(e.info.code == "NetStream.Play.Stop") gotoSite();
}

Then play the video :

stream.play("video.flv");

5. Finally we create the gotoSite function that will be called either by the skip button or when the videos has finished playing.

skip_btn.addEventListener(MouseEvent.CLICK, gotoSite);

function gotoSite(e:Event = null):void{
	navigateToURL(new URLRequest("http://www.riacodes.com"), "_self");
}

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

var conn:NetConnection = new NetConnection();
conn.connect(null);

var stream:NetStream = new NetStream(conn);
stream.addEventListener(NetStatusEvent.NET_STATUS, onStatus);
stream.client = this;

var video:Video = new Video();
video.width = 640;
video.height = 480;
video.x = 0;
video.y = 0;
addChild(video);
video.attachNetStream(stream);

function onStatus(e:Object):void{
	 if(e.info.code == "NetStream.Play.Stop") gotoSite();
}

stream.play("video.flv");

skip_btn.addEventListener(MouseEvent.CLICK, gotoSite);

function gotoSite(e:Event = null):void{
	navigateToURL(new URLRequest("http://www.riacodes.com"), "_self");
}

1. Starting from the finished file of Circular Menu with AS3. Open menu.fla and with the “actions” layer selected open the actions panel.

2. We are going to add few lines of code to make it work. Create an Array containing the different urls to assign to the buttons :

var menu_items:Array = ["HOME","ABOUT","PORTFOLIO","CONTACT","FACEBOOK"];
var urls:Array = ["http://www.riacodes.com",
				  "http://www.riacodes.com/about",
				  "http://www.riacodes.com/flash",
				  "http://www.riacodes.com/contact",
				  "http://www.facebook.com"];

3. In the buildMenu function, inside the loop, assign to each button its own url by setting a urlsite property.

for (var i:int = 0; i< menu_items.length; i++){
		btn = new myButton();
		btn.buttonMode=true;
		btn.labelBtn.text = menu_items[i];
		btn.mouseChildren=false;
		btn.urlsite = urls[i];
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
}

4. Finally in the clickHandler function we use the navigateToURL method and pass it the url of the button which has triggered the event.

function clickHandler(e:MouseEvent ):void{
	navigateToURL(new URLRequest(e.target.urlsite));
}

5. Here’s the final code, test your application to see it in action.

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

var menu_items:Array = ["HOME","ABOUT","PORTFOLIO","CONTACT","FACEBOOK"];
var urls:Array = ["http://www.riacodes.com",
				  "http://www.riacodes.com/about",
				  "http://www.riacodes.com/flash",
				  "http://www.riacodes.com/contact",
				  "http://www.facebook.com"];

var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;
addChild(menu);

buildMenu();

function buildMenu(){

	var btn:myButton;
	var angle:int=360/menu_items.length;

	for (var i:int = 0; i< menu_items.length; i++){
		btn = new myButton();
		btn.buttonMode=true;
		btn.labelBtn.text = menu_items[i];
		btn.mouseChildren=false;
		btn.urlsite = urls[i];
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
	}
}

menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{
	navigateToURL(new URLRequest(e.target.urlsite));
}

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

2. Rename “layer1″ to “Content” and here create the content that you want to print (images, text …). Convert the whole content into a movie clip and give it an instance name of “content_mc”.

3. Create a new layer at the top named “button” and create the print button. Give it an instance of print_btn.

4. Finally create the “actions” layer. Open the actions panel.
First add a Click event listener to the button that willl be handled by the printContent function.
Inside the function, in order to print the content we use the PrintJob class. To do so we create a new PrintJob instance.
If needed we resize the content to fit within the page dimensions. Then we add the content as a page to the print job and send it to the printer.

print_btn.addEventListener(MouseEvent.CLICK,printContent);

function printContent(evt:MouseEvent) {
	var printJob:PrintJob = new PrintJob();

	if (printJob.start()) {

		if (content_mc.width>printJob.pageWidth) {
			content_mc.width=printJob.pageWidth;
			content_mc.scaleY=content_mc.scaleX;
		}

		printJob.addPage(content_mc);
		printJob.send();
	}
}

5. Test your movie to see the code in action and print your content …

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

2. Rename “layer1″ to “Area” and import on the stage an image much bigger than your stage and convert it to a movie clip with registration point at the top left. Give it an instance name of area_mc.

3. Finally, create a new “actions” layer and open the actions panel. Type the code beneath. To create the draggable area, we use the startDrag method and specify its bounds parameter.

area_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);
area_mc.addEventListener(MouseEvent.MOUSE_UP, dropArea);

function dragArea(e:MouseEvent):void{
	var bounds:Rectangle = new Rectangle(
								stage.stageWidth - area_mc.width,
								stage.stageHeight - area_mc.height,
								area_mc.width - stage.stageWidth,
								area_mc.height - stage.stageHeight
							);
	area_mc.startDrag(false, bounds);
}

function dropArea(e:MouseEvent):void{
	area_mc.stopDrag();
}

4. That’s it, test your movie to see it in action.

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

2. On the first frame, create 4 dynamic text boxes to display numbers of days, hours, minutes and seconds remaining. Give them instance name of “day_txt”, “hour_txt”, “min_txt”, “sec_txt”.

3. Create a blank keyframe and put in here what you want do display when the countdown is finished. Here we simply put a “Happy New Year ~ 2010″ text.

3. With the first frame selected open the actions panel to add some code.
First put a stop() and create a date object to store the 2010 new year date. Note that with AS3 month begins with 0, this is why we put month minus 1.
Next create a timer and set its parameter to 1000 (1000ms = 1s). Add a timer event listener and call the start() method.

stop();

var year:Number = 2010;
var month:Number = 1;
var day : Number = 1;

var finalDate:Date = new Date(year,month-1,day); 

var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, updateTime);
timer.start();

4. Inside the updateTime function that handles the Timer event, create a new date object, to store the current date that will be updated every second.
To calculate the remaining time, we simply make the difference between the final date and the current date.

function updateTime(e:TimerEvent):void{

	var now:Date = new Date();
	var remainTime:Number = finalDate.getTime() - now.getTime();

}

5. Still inside the updateTime function , we check whether the remaining time is superior to 0. If so, we make a series of calculations to retrieve the days, hours, minutes and seconds remaining. Also we check if the numbers are 2 digits so that we can add a 0 before to those who are just 1 digit. Finally we set the text properties of the 4 text boxes that we’ve put on the stage to their respective values.

if (remainTime >0) {

		var secs:Number = Math.floor(remainTime/1000);
		var mins:Number = Math.floor(secs/60);
		var hours:Number = Math.floor(mins/60);
		var days:Number = Math.floor(hours/24);

		var secsText:String = (secs%60).toString();
		var minsText:String = (mins%60).toString();
		var hoursText:String = (hours%24).toString();
		var daysText:String = days.toString();

		if (secsText.length < 2) {secsText = "0" + secsText;}
		if (minsText.length < 2) {minsText = "0" + minsText;}
		if (hoursText.length < 2) {hoursText = "0" + hoursText;}
		if (daysText.length < 2) {daysText = "0" + daysText;}

		day_txt.text = daysText;
		hour_txt.text = hoursText;
		min_txt.text = minsText;
		sec_txt.text = secsText;
}

6. Else if the remaining time is <= 0 we remove the listener, stop the timer and display the second frame to wish you a Happy New Year.

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

stop();

var year:Number = 2010;
var month:Number = 1;
var day : Number = 1;

var finalDate:Date = new Date(year,month-1,day); 

var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, updateTime);
timer.start();

function updateTime(e:TimerEvent):void{

	var now:Date = new Date();
	var remainTime:Number = finalDate.getTime() - now.getTime();

	if (remainTime >0) {

		var secs:Number = Math.floor(remainTime/1000);
		var mins:Number = Math.floor(secs/60);
		var hours:Number = Math.floor(mins/60);
		var days:Number = Math.floor(hours/24);

		var secsText:String = (secs%60).toString();
		var minsText:String = (mins%60).toString();
		var hoursText:String = (hours%24).toString();
		var daysText:String = days.toString();

		if (secsText.length < 2) {secsText = "0" + secsText;}
		if (minsText.length < 2) {minsText = "0" + minsText;}
		if (hoursText.length < 2) {hoursText = "0" + hoursText;}
		if (daysText.length < 2) {daysText = "0" + daysText;}

		day_txt.text = daysText;
		hour_txt.text = hoursText;
		min_txt.text = minsText;
		sec_txt.text = secsText;
	}

	else {
		timer.removeEventListener(TimerEvent.TIMER, updateTime);
		timer.stop();
		gotoAndStop(2);
	}
}

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

2. Rename “layer 1″ to “tree” and on this layer draw your christmas tree. Convert it to a movie clip and give it an instance name of “tree_mc”.

3. Create a new layer named “bulbs”. On this layer create all kinds of bulbs that you want to put on your tree. Convert each bulb to a movie clip with registration point at the top left and export it for actionscript (class : RedBulb, BlueBulb, …).

Give each bulb an instance name of “red_bulb”, “blue_bulb” etc …

4. Create a new layer named “light_btn”. Create a movie clip with 2 frames, the first for the ON state and the second for the OFF state. Give it an instance name of “light_mc”.

5. Create an “actions” layer and with its first frame selected open the actions panel.
There are 2 parts to do. The first part consists of creating the drag and drop bulbs that the user can put on the tree to his convenience. The second part consists of making the lighting.

6. So let’s begin coding. First store all bulbs types in an array. When the user will interact with them a new bulb of the chosen type will be created. To do so, loop through the array to add a MouseDown event listener.

var bulbsType : Array = [red_bulb, blue_bulb,yellow_bulb, purple_bulb, orange_bulb];

for (var i:int = 0; i<bulbsType .length;i++){
	bulbsType [i].addEventListener(MouseEvent.MOUSE_DOWN, createBulb);
	bulbsType [i].buttonMode = true;
}

7. Create an array that we use to store all bulbs that the user will put on the tree.

var bulbs:Array  = new Array();

In the createBulb function, first we check which bulb type the user has chosen and create the matching bulb using the classes that we have created earlier by exporting each bulb type to actionscript.
Then we call the startDrag method and add MouseUp and MouseDown event listeners in order to create the drag and drop interactions.

function createBulb(e:MouseEvent):void {
	var bulb:MovieClip;

	switch(e.target.name){
		case "red_bulb":
			bulb = new RedBulb();
			break;
		case "blue_bulb":
			bulb = new BlueBulb();
			break;
		case "yellow_bulb":
			bulb = new YellowBulb();
			break;
		case "purple_bulb":
			bulb = new PurpleBulb();
			break;
		case "orange_bulb":
			bulb = new OrangeBulb();
			break;
	}

	bulb.buttonMode = true;
	bulb.x = e.target.x;
	bulb.y = e.target.y;
	addChild(bulb);			

	bulb.startDrag();
	bulb.addEventListener(MouseEvent.MOUSE_DOWN, dragBulb);
	bulb.addEventListener(MouseEvent.MOUSE_UP, dropBulb);		

}

8. The dragBulb function simply call the StartDrag method.
The dropBulb function checks whether the bulb has hit the tree. If so it calls the stopDrag method and add the bulb to the array that contains all the bulbs.

function dragBulb(e:MouseEvent):void {
	e.target.startDrag();
}

function dropBulb(e:MouseEvent):void {
	if (e.target.hitTestObject(tree_mc)){
		e.target.stopDrag();
		bulbs.push(e.target);
	}
}

9. Now for the lighting part, we use a Timer to create the sparkling effect on the bulbs.
When the light is ON we start the Timer and loop though the array containing all bulbs on the tree to change randomly their alpha property.
When light is OFF we stop the Timer.

var lighting:Boolean = false;
light_mc.stop();
light_mc.buttonMode = true;
light_mc.addEventListener(MouseEvent.CLICK,toggleLight);

var timer:Timer = new Timer(200);
timer.addEventListener(TimerEvent.TIMER, lightOn);

function toggleLight(e:MouseEvent):void{
	if(!lighting){
		timer.start();
		light_mc.gotoAndStop(2);
		lighting = true;
	}
	else {
		timer.stop();
		light_mc.gotoAndStop(1);
		lighting = false;
		for (var i:int =0; i < bulbs.length; i++){
  			var bulb:MovieClip = bulbs[i];
  			bulb.alpha = .5;
		}
	}
}

function lightOn(e:TimerEvent):void{
	for (var i:int =0; i < bulbs.length; i++){
  		var bulb:MovieClip = bulbs[i];
  		bulb.alpha = Math.random();
	}
}

Here’s the final code, test your movie to see in action. Merry Christmas !!!

var bulbsType : Array = [red_bulb, blue_bulb,yellow_bulb, purple_bulb, orange_bulb];

for (var i:int = 0; i<bulbsType .length;i++){
	bulbsType [i].addEventListener(MouseEvent.MOUSE_DOWN, createBulb);
	bulbsType [i].buttonMode = true;
}

var bulbs:Array  = new Array();

function createBulb(e:MouseEvent):void {
	var bulb:MovieClip;

	switch(e.target.name){
		case "red_bulb":
			bulb = new RedBulb();
			break;
		case "blue_bulb":
			bulb = new BlueBulb();
			break;
		case "yellow_bulb":
			bulb = new YellowBulb();
			break;
		case "purple_bulb":
			bulb = new PurpleBulb();
			break;
		case "orange_bulb":
			bulb = new OrangeBulb();
			break;
	}

	bulb.buttonMode = true;
	bulb.x = e.target.x;
	bulb.y = e.target.y;
	addChild(bulb);			

	bulb.startDrag();
	bulb.addEventListener(MouseEvent.MOUSE_DOWN, dragBulb);
	bulb.addEventListener(MouseEvent.MOUSE_UP, dropBulb);		

}

function dragBulb(e:MouseEvent):void {
	e.target.startDrag();
}

function dropBulb(e:MouseEvent):void {
	if (e.target.hitTestObject(tree_mc)){
		e.target.stopDrag();
		bulbs.push(e.target);
	}
}

var lighting:Boolean = false;
light_mc.stop();
light_mc.buttonMode = true;
light_mc.addEventListener(MouseEvent.CLICK,toggleLight);

var timer:Timer = new Timer(200);
timer.addEventListener(TimerEvent.TIMER, lightOn);

function toggleLight(e:MouseEvent):void{
	if(!lighting){
		timer.start();
		light_mc.gotoAndStop(2);
		lighting = true;
	}
	else {
		timer.stop();
		light_mc.gotoAndStop(1);
		lighting = false;
		for (var i:int =0; i < bulbs.length; i++){
  			var bulb:MovieClip = bulbs[i];
  			bulb.alpha = .5;
		}
	}
}

function lightOn(e:TimerEvent):void{
	for (var i:int =0; i < bulbs.length; i++){
  		var bulb:MovieClip = bulbs[i];
  		bulb.alpha = Math.random();
	}
}

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

2. Rename “layer 1″ to “card”. On this layer import the image of your choice that will be the card.
In our example, the image was taken from www.xmas-wallpapers.com

3. Create a new “actions” layer.
First before writing the code, let’s create a snowflake. Draw the shape of your snowflake and convert it to a movie clip with registration point at the top left. Export if for Actionscript with a Class Name of Snowflake.
Remove the snowflake that you’ve just created from the stage as now all will happen in the code.

4. With the actions layers first frame selected, open the actions panel.
First add an enterframe event listener :

addEventListener(Event.ENTER_FRAME, createSnow);

5. In the createSnow function that handles the enterframe event, we create a snowflake by using the Snowflake class and set its x position to a random value. Also we add an enterframe listener to the snowflake in order to animate it.

function createSnow(event:Event):void{
	var snowflake : Snowflake = new Snowflake();
	snowflake.x = Math.random() * stage.stageWidth;
	snowflake.y = 0 ;
	addChild(snowflake);
	snowflake.addEventListener(Event.ENTER_FRAME, moveSnowflake);
}

6. In the moveSnowflake function, we check whether the snowflake is still visible on the stage by monitoring its y property.
If so, we modify its y, alpha, scaleX and scaleY properties to make it falling and melting.
Else as we don’t see anymore the snowflake, we remove its event listener and remove him from the display list.

function moveSnowflake(e:Event):void{
	if(e.target.y < stage.stageHeight){
		e.target.y += 10 + Math.random() * 5 ;
		e.target.alpha -= 0.015;
		e.target.scaleX = e.target.scaleY -= 0.01;

	}
	else{
		e.target.removeEventListener(Event.ENTER_FRAME,moveSnowflake);
		removeChild(e.target as Snowflake);
	}
}

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

addEventListener(Event.ENTER_FRAME, createSnow);

function createSnow(event:Event):void{
	var snowflake : Snowflake = new Snowflake();
	snowflake.x = Math.random() * stage.stageWidth;
	snowflake.y = 0 ;
	addChild(snowflake);
	snowflake.addEventListener(Event.ENTER_FRAME, moveSnowflake);
}

function moveSnowflake(e:Event):void{
	if(e.target.y < stage.stageHeight){
		e.target.y += 10 + Math.random() * 5 ;
		e.target.alpha -= 0.015;
		e.target.scaleX = e.target.scaleY -= 0.01;

	}
	else{
		e.target.removeEventListener(Event.ENTER_FRAME,moveSnowflake);
		removeChild(e.target as Snowflake);
	}
}

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

2. Rename “layer 1″ to “menu”. First we are going to design our arrow shaped menu items. To do it, with the rectangle tool selected draw a rectangle on the stage with the fill color of your choice and no stroke color. To create the end part of the menu_item use the polystar tool to create a triangle that you stick to the rectangle. Now with your menu item shape built, convert it to a Movie Clip with registration point at the top left. Give it an instance name of “menu1_mc”.

3. To add the label to the menu item, double click on the movie clip you’ve just created so you can edit it.
With the Text tool, draw a static text box and type your label. And we are done with this first menu item.

4. Next create the others menu items by following the same steps. Once finished position each menu item one below the other and put all of them to the left of the stage so that only the triangle part is visible on the stage.

5. Now let’s add the actionscript. 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.

6. Create a new “actions” layer and with its first frame selected open the actions panel.
First to use the Tweenlite engine and its easing properites write the following statements :

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

7. Then create an array that contains each menu item’s instance name. Next loop through this array to add to each item the Mouse Event listeners (for the rollover, rollout and click events) and set their button mode to true so that a hand cursor appears when we hover them.

var menu_items:Array = [menu1_mc,menu2_mc,menu3_mc,menu4_mc];

for (var i:int = 0; i< menu_items.length; i++){
	menu_items[i].addEventListener(MouseEvent.ROLL_OVER,overHandler);
	menu_items[i].addEventListener(MouseEvent.ROLL_OVER,outHandler);
	menu_items[i].addEventListener(MouseEvent.CLICK,clickHandler );
	menu_items[i].buttonMode = true;
}

8. The overHandler function uses the Tweenlite engine to change the x property of the menu item to 0 so that the menu item stretches out. Also we set the Tweenlite ease property to Bounce.easeOut to make it more catchy.

function overHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:0,ease:Bounce.easeOut});
}

<em>9.</em> The outHandler function sets the menu item that triggered the rollout event back to its original position. And finally the clickHandler function simply trace which menu item was clicked.

[javascript]
function outHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:-168,ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent ):void{
	trace(e.currentTarget.name + " was clicked");
}

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

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

var menu_items:Array = [menu1_mc,menu2_mc,menu3_mc,menu4_mc];

for (var i:int = 0; i< menu_items.length; i++){
	menu_items[i].addEventListener(MouseEvent.ROLL_OVER,overHandler);
	menu_items[i].addEventListener(MouseEvent.ROLL_OUT,outHandler);
	menu_items[i].addEventListener(MouseEvent.CLICK,clickHandler );
	menu_items[i].buttonMode = true;
}

function overHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:0,ease:Bounce.easeOut});
}
function outHandler(e:MouseEvent):void{
	TweenLite.to(e.currentTarget,1,{x:-168,ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent ):void{
	// TO DO ...
	trace(e.currentTarget.name + " was clicked");
}

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

2. Rename “layer 1″ to “actions”.
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.

3. With the rectangle tool selected draw a black rectangle on the stage. Convert it to a Movie Clip and export it for Actionscript with a class name of myButton.

4. Double click on the movie clip to edit it. With the Text tool selected draw a Dynamic Text box and set its color property to white. As we are going to rotate the text, embed your font by clicking on the Embed… button. In our case we just embed the Uppercase[A-Z].
Give the movie clip an instance name of labelBtn.

5. Return to Scene1 and remove the movieclip we’ve just created from the stage.

6 With the first frame selected of the actions layer, open the actions panel.
First to use the Tweenlite engine write the following imports :

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

7. Then create an array that contains each menu item label.
Next create a menu Sprite and position it at the center of the stage.

var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];

var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;
addChild(menu);

8. Now we need to create each menu items and to do that create a buildMenu function.
Inside this function, we loop through the menu_items array to create different “myButton” items.
To position and animate each item, we use Tweenlite to set their rotation property to a different value.

function buildMenu(){

	var btn:myButton;
	var angle:int=360/menu_items.length;

	for (var i:int = 0; i< menu_items.length; i++){
		btn = new myButton();
		btn.buttonMode=true;
		btn.labelBtn.text = menu_items[i];
		btn.mouseChildren=false;
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
	}
}

9. Finally we add a Click event listener to the menu and let you continue.

menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{
	// TO DO ...
	trace(myButton(e.target).labelBtn.text);
}

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

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

var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];

var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;

addChild(menu);
buildMenu();

function buildMenu(){

	var btn:myButton;
	var angle:int=360/menu_items.length;

	for (var i:int = 0; i< menu_items.length; i++){
		btn = new myButton();
		btn.buttonMode=true;
		btn.labelBtn.text = menu_items[i];
		btn.mouseChildren=false;
		menu.addChild(btn);
		TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
	}
}

menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{
	// TO DO ...
	trace(myButton(e.target).labelBtn.text);
}

1. Create a new flex project named SlidingPanel, set the name of the main MXML application file to Main.mxml and set its layout to absolute.

2. First let’s create the top panel. To do so add a Canvas component and give it an id of “panel”. To make it open or close, add a Button at the bottom of the canvas and set its properties as shown in the code below. Its click event will be handled by the toggleBtn function that we are going to create later.
When the application will be launched we want only the button “Open” to be visible so in order to do that set the canvas y property to -180.

<mx:Canvas id="panel" width="100%" height="200" y="-180" backgroundColor="#000000">
		<mx:LinkButton id="btn" width="100%"  height="21"
			bottom="0" horizontalCenter="0"
			label="Open"
		  	click="toggleBtn(event)"/>
</mx:Canvas>

We let you put your own content inside this panel.

3. To make the panel appear and disappear we need to create 2 Move effects, one to slide out and the other to slide in.
The first one will be used to open the panel. To do so set its yTo property to 0 so that the panel is fully visible and when its effectEnd event will occur we set the label property of the button to “Close”.
Follow the same process for the second Move effect that we’ll use to close the panel.
To make these effects more eye-catching, we add a bounce easing.

<mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'"
		duration="1500" easingFunction="Bounce.easeOut"/>
<mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'"
		duration="1000" easingFunction="Bounce.easeIn"/>

4. Next add a Script section to create the toggleBtn function. In this function we check whether the panel is opened or not and we play the corresponding Move effect.

<mx:Script>
		<![CDATA[
			import mx.effects.easing.*;

			private function toggleBtn(e:MouseEvent):void{
				if(e.currentTarget.label== 'Open')
					 panelOut.play();
				else
					panelIn.play();
			}
		]]>
</mx:Script>

5. Finally we add some CSS to custom the app.

<mx:Style>
		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}
</mx:Style>

Here’s the final code, run your application to see it in action.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Style>
		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.effects.easing.*;

			private function toggleBtn(e:MouseEvent):void{
				if(e.currentTarget.label== 'Open')
					 panelOut.play();
				else
					panelIn.play();
			}
		]]>
	</mx:Script>

	<mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'"
		duration="1500" easingFunction="Bounce.easeOut"/>
	<mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'"
		duration="1000" easingFunction="Bounce.easeIn"/>        

	<mx:Canvas id="panel" width="100%" height="200" y="-180" backgroundColor="#000000">
       <!--Add the content of your sliding panel here  -->
		<mx:LinkButton id="btn" width="100%"  height="21"
			bottom="0" horizontalCenter="0"
			label="Open"
		  	click="toggleBtn(event)"/>
	</mx:Canvas>

	<!--Add the content of your page here-->

</mx:Application>