We`ar going to learn how to create buttons and apply simple Actions to them to jump to certain keyframes.

Things to do:

• Draw a rectangular-shaped object.
• Convert it to a button.
• Dublicate the button and rename it to avoid conflicts.
• Drag the dublicated buttons to the stage.
• Distribute the buttons to separate layers
• Create a new layer for the content.
• Each content on a seperate frame with a “stop” action.
• Lable each keyframe with a unique name.
• Add actions to the buttons to go to the contents respectively.Final test the movie.

Step 1

Let’s start by drawing the button.

Select the Rectangular Tool and draw the shape you desire, as Fig 1 for example.

To get the rounded shape on the corners of your rectangular button, select the tool (Round Rectangle Radius) and apply the corner radius value before you draw the button.

Use the color mixer to apply “Linear“ color to your button if you like Fig 0.

Fig 0 Fig 1

Step 2

You`’re going now to convert the shape we drew into a Symbol. That is, making the shape behave as a button.

• Select your object on the stage and press F8 (or go to Insert>Convert to Symbol)
• Select “Button” as the Behavior, and name the Symbol “button1″ as shown in Fig 2

Fig 2

Step 3

• To save time and effort, when creating more than one button, press F11 or go to Windows>Library and dublicateFig 3).
• To avoid any conflicts between the dublicated buttons, rename the second button to “button2” the third to “button3” and so on. Dublicate as needed, and rename in accordance.
• We are going to use 3 buttons.

Fig 4

Step 4

• Create additional layers by clicking on the icon. For now, create 3 layers as shown in in Fig 4.
• Select the first frame of Layer 2 and drag “button2” from the library to the stage. Select layer 3 and do the same for “button3“.

Note: Naming your layers and distributing different object into different layers is important. This can be very helpful in terms of flexibility and ease of future modifications with huge projects.

Fig 4

Step 5

• Add a new layer, name it “content”. This layer is going to hold your contents to be displayed when different button are clicked.
• We are going to distribute different contents to different keyframes.
• Select the first frame of the “content” layer and draw a rectangular-shaped frame next to your buttons, as an area to display the contents.
• Right-click frame 2 of the “content” layer and select “Insert Keyframe” as shown in Fig 5. (Repeat this for the 3rd and 4th frames.)
• Right-click on each of the created keyframes for the “content” and select Actions.
• Add a “stop();” action to each. You can find the stop action under Actions>Movie Control>Stop.
• Click on the first keyframe of the content layer and go to the properties bar. Lable your keyframe with a name.

I labled them content1, do the same for content 2, 3 and 4

These names are going to be as a way of ditinguishing the different content keyframes, thus telling the buttons to jump to a certain keyframe as required. Keyframe numbers can be used as well.

Fig 5

Step 6

• Select the 4th frame of “Layer1″ “Layer2″ and “Layer3″, righ-click and select Insert Frame.

In doing this, we are allowing the buttons to be visible throughout the whole animation process, you don’t want your buttons disappear when the 5th keyframe is selected.

Fig 6

Step 7

Now we customize the buttons.

Normally, with every button, there are 3 major states with regards to the location and the action of the mouse pointer:

• Up: This keyframe is responsible for defining the state of the button normally when no action is applied to it by the mouse pointer. (The original -ideal- shape of the button)
• Over: This keyframe is responsible for defining the state of the button when the mouse pointer is over your button.
• Down: This keyframe is responsible for defining the state of the button when the button is clicked.Hit: This keyframe is responsible for defining the area of the button that is effective to the mouse pointer.

This means, u can right-click each keyframe of the above and select “Insert Keyfram”. Modify each keyfram as you desire, change the color of the button when “over“, for example.

Note2: Type the title of the button on the”Up” keyframe using the Text tool.

Fig 7

Step 8

In final step we’re going to add the Actions to the buttons.

• Right-click on button 1 on the stage and select Actions.
• Add the actions as shown in Fig 7, the “goto” action can be found under Actions>Movie Control>Goto.
• Now right-click on the second button and add the same action ,but make sure you change the frame to “content2“
• The same for the third button, and “content3” for the frame.

Once you click on button1 or button2, how are you going to tell whether it has actually jumped to content1 or content2. Don’t forget to add some content to your contents keyframes!

Fig 8

Download the source flash buttons.zip

In this tutorial I will teach you how to create an advanced XML menu. We will first set up everything ready in Flash, then create the XML file and finally add some ActionScript 3 for the functionality. Hope you enjoy the tut!

Setting up the environment

1. Create a new document of size 400×350.

2. First, let’s create a menu item. Draw a rectangle of size 40×40. Convert it into a movie clip named “menuItem”. Set the registration point to the bottom left corner. I used a 4 pixels wide white stroke and for the fill #ff8800.

3. Inside the menu item movie clip, create a new layer and add a dynamic text field in the center of the menu item. Set the text-align to center. Type some number in the text field, e.g. “1″. I used a font size of 16 for my textfield.

4. Embed the numberals in the text field.

5. Give the text field an instance name of “menuText“.

6. Linkage the menu item movie clip to a class named “MenuItem“. If you don’t know how to linkage movie clips, please see step 4 from the External Classes tutorial.

7. Delete the menu item from the stage. We will create all the items dynamically with XML and ActionScript 3.

Creating the XML

8. Create a new text file and type the following.

<?xml version="1.0" encoding="utf-8"?>

<menus>

	<menu id="1">
		<item>1.1</item>
		<item>1.2</item>
	</menu>

	<menu id="2">
		<item>2.1</item>
		<item>2.2</item>
		<item>2.3</item>
		<item>2.4</item>
	</menu>

	<menu id="3">
		<item>3.1</item>
		<item>3.2</item>
		<item>3.3</item>
		<item>3.4</item>
	</menu>

	<menu id="4">
		<item>4.1</item>
		<item>4.2</item>
		<item>4.3</item>
	</menu>

</menus>

9. Save the file as “flash_menu.xml“.

Moving to ActionScript 3

10. Type the following in the first frame of your Flash movie. Feel free to change the XML filepath to match your settings!

//Import TweenMax for animation
import gs.*;
import gs.easing.*;
import gs.plugins.*;
TweenPlugin.activate([GlowFilterPlugin]);

//Save menu item's height to a constant variable
const ITEM_HEIGHT:Number = 50;

//Save the path to the XML file
var xmlPath:String = "http://flashmymind.com/xml/flash_menu.xml";

//The XML data will be inserted into this variable
var xml:XML;

//Set the floor (= y coordinate) for the menu items
var floor:Number = stage.stageHeight - 20;

//We want to know which menu array is currently selected
var selectedMenu:Array;

//We want to keep track how many menus have been created
var menuCounter:uint = 0;

// Load the XML file
var loader = new URLLoader();
loader.load(new URLRequest(xmlPath));
loader.addEventListener(Event.COMPLETE, xmlLoaded);

//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {

	//Make sure we're not working with a null loader
	if ((e.target as URLLoader) != null ) {

		//Insert the loaded data to our XML variable
		xml = new XML(loader.data);

		//Ignore white space
		xml.ignoreWhitespace = true;

		//Call the function that creates the whole menu
		createMenus();
	}
}

//This function creates the menus
function createMenus():void {

	//Loop through the menus found in the XML file
	for each (var menu:XML in xml.menu) {

		//We create a menu for each menu found in the xml.
		//We pass the "menu" xml data as a parameter to the function.
		var menuItems:Array = createMenu(menu);

		//Position the menu items that are in the menuItems
		for (var i= 0; i< menuItems.length; i++) {

			//Set the x and y coordinates
			menuItems[i].y = floor;
			menuItems[i].x = -30 + menuCounter * 80;

			//Add the item to stage
			addChild(menuItems[i]);
		}
	}
}

//This function creates a single menu (= one vertical menu).
//It returns all the menu items which belong to the created menu.
function createMenu(menu:XML):Array {

	//Create an array which contains all the items in this menu
	var menuItems:Array = new Array();

	//Loop through the items found in the menu
	for each (var item:XML in menu.item) {

		//Create a new menu item
		var menuItem:MenuItem = new MenuItem();

		//Set the item text
		menuItem.menuText.text = item.toString();

		//Set the menuItem to have no mouseChildres
		menuItem.mouseChildren = false;

		//Add the item to the menuArray
		menuItems.push(menuItem);
	}

	//We also need to create the main MenuItem for the menu
	var mainItem:MenuItem = new MenuItem();

	//Set the mainItem to have no mouseChildren
	mainItem.mouseChildren = false;

	//Add the main item to menuArray
	menuItems.push(mainItem);

	//Save the array to which this mainItem belongs to.
	//We need this in the animation later on.
	mainItem.belongsToMenu = menuItems;

	//Set the "id" attribute to be the main item's text
	mainItem.menuText.text = menu. @ id;

	//Add CLICK listener for the mainItem
	mainItem.addEventListener(MouseEvent.CLICK, mainItemClicked);

	//Update the menuCounter since we just created a new menu
	menuCounter++;

	//Return the menuArray that contains all the items in this menu
	return menuItems;
}

//This function is called when a menu's mainItem is clicked
function mainItemClicked(e:Event):void {

	//Animate the previous menu down if there is one
	if (selectedMenu) {
		for (var i =0; i<  selectedMenu.length-1; i++) {
			TweenMax.to(selectedMenu[i], 0.5 , {y:floor, glowFilter:{color:0x324df, alpha:0, blurX:0, blurY:0}});
		}
	}

	//Get the menu where the mainItem is located
	var clickedMenu:Array = e.target.belongsToMenu;

	//Set the clickedMenu to be our selectedMenu
	selectedMenu = clickedMenu;

	//Loop through the items except for the last one which is the mainItem.
	//We don't animate the mainItem
	for (var j =0; j<  selectedMenu.length-1; j++) {

		//Save the item to a local variable
		var item = selectedMenu[j];

		//Calcute the target y coordinate for the item.
		var targetY:Number = floor - ITEM_HEIGHT*1.2*(1 + j);

		//Tween an item up.
		TweenMax.to(item, 0.5 , {y:targetY, glowFilter:{color:0xffffff, alpha:1, blurX:20, blurY:20}});
	}
}

11. You are done

short video tutorial on how to make a button “work” inside Adobe Flash CS4. It’s a little different with the new ActionScript 3.0, so I decided I’d make a video on it. I’d also like to tell you that in ActionScript 3.0, all the actions are in the timeline, meaning you cannot give objects their own set of actions anymore.

Actions used in the video.

Give the object an instance name first, as shown.

Then, add an event listener like:
instanceNameHere.addEventListener(MouseE vent.CLICK,mouseClick);

Then, you have to define the function, mouseClick.
function mouseClick(event:MouseEvent):void
{
insert what you want to happen here
}

Possible actions:
You can go to another frame and play the video: gotoAndPlay(framenumber);

You can go to another frame and stop the video:
gotoAndStop(framenumber)

You can play the video:
play();

You can stop the video:
stop();

Skip Intro.

Add “Skip Intro” button to larger Flash animations so inpatient or dial-up users can go straight to your home page.

Use “Skip Intro” button on preloader frame.

1. Launch Flash Designer and choose “Blank Animation”. Choose “Frame” > “Frame Size” to set movie dimensions.
2. Choose “Movie” > “Edit Preloader”
3. Choose “Button Tool” and draw a button in the right bottom corner.
4. Double-click the button to rename it, enter” “Skip Button” and click OK.
5. Choose “Item” > “Action” > “OnClick”, check “Get URL” and enter the URL of your home page (the page after the intro). The URL must be absolute (begin with http://)
6. Choose “Movie” > “Go to Main Movie” to quit preloader.