Simple Site using Button Navigation and AS3

Created March 10, 2010    Last Updated: September 18, 2011

Skill Level: Intermediate. Actionscript version: AS3

Flash skills needed:
  1. Creating MovieClip symbols
  2. Simple animation
  3. Using ActionScript panel

This tutorial is going to show you how to create a real simple template site, using MovieClips as buttons to navigate through the site.

The goal is to make a site, such that the movieclips that we will use as 'buttons' will have rollover state, rollout state, and a clicked state that will remain/be 'sticky' until another button is clicked.

Here is the finished piece that we will be aiming for:


This file consists of a 1 frame "main time-line" that has three movie clips as buttons, and it has another movie clip which will hold the changing content.

Before we even start anything else, we always need to work out our strategy on how we are going to go about achieving what we want to do. My perenial mantra is 'there are many ways to go about doing that'. This holds true for this too.

The way I see it, we have 2 major design approaches to take. I mean designing the architecture of this site, not the graphics.

The first decision is how we are going to make our 'pages' appear and disappear.

We could have a timeline based navigation on the main timeline, using frame labels to get us to the correct frame.

We could have a 1 frame main timeline, which has a movieclip with its own timeline, which would be targeted using frame labels, etc.

We could have a one frame main timeline in which we have our 'page' elements appear and disappear when needed by manipulating their 'visible' and or 'alpha' properties.

We could have a one frame timeline , with the page elements as Library assets with linkage/export class names for use in actionscript.

We could have a one frame main timeline with a Loader which will load and unload external SWFs as needed.

I usually prefer the last 2 methods. I also try to get away from using any timelines at all. This means inside buttons and other clips. It is not always possible, but it is my goal, as I believe the finished SWF to be smaller, cleaner, and faster.

The second decision we have to make is about the movieclip buttons. How are we going to create them and give them the different states we want?

We could of course either create on the stage or in code a Simple Button. A button symbol is OK to use in certain situations, and their ease makes them attractive for simpler situations, but you can not access via code their various button states. So when we want to get specific, we use movieclip symbols as our 'buttons'.

An oft used method is to create a 2 or 3 frame movieclip, and have the first frame have the look you want for the 'up' state - the normal state. Then you can change the second frame to have the button look like the way you want it to appear in its 'over' state. A third, optional frame, could serve as it's 'down' or 'clicked' state. Fully animated buttons would just extend this concept. Either extended logic will take care of keeping the clicked button in its'clicked' state, or we can employ an auxilary movieclip to fake this appearance.

Another way would be to have the RollOver and RollOut functions swap out the images via add/removeChild, or using Loaders.

Another way is to write code to make some changes - color change, alpha change, or size change being most common visual signals that the button is rolled over.

The strategy decided upon for this example is to use Libray assets and add/removeChild to 'change' the 'pages' , and to use code to give the button different states.

LET'S SET UP THE FLA FIRST:

flash screen capture

The fla has 3 layers. The bottom layer has a movieclip symbol with the instance name 'red'. It is nothing more than a rectangle - a drawn Shape with a fill color of the stock red gradient. This shape was turned into a MovieClip symbol and giventhe instance name 'red'.

The middle layer has the 3 buttons. They are like wise just a simple drawn shape with a red fill. On top of the shape is some text. This shape and text are then turned into a MovieClip symbol and given an instance name 'btn1'. This was then duplicated, adjusted, and made into 'btn2' and 'btn3' also.

The last thing(s) to be created, before we start the coding, is to make the 'page' content.

The page content is likewise in this case a simple movieclip - a drawn shape - a gray box, which has type over it. This shape and box are turned into a MovieClip symbol. This was done for the 4 'pages' : the home page, page 1 page 2, and page 3. Either when creating the symbol, or from the Library, give each of these symbols Linkage class names. I used 'pagehome', 'page1', 'page2' and 'page3' for the linkage names.

The Library assets and Linkage names:

flash library screen shot

So to elaborate our strategy, we can say that we have the home page added as a Child to the 'red' movieclip. Of course we don't have to load it into anything, we could as easily just have it added to the stage, or on top of a graphic. This way just illutrates the extra step of adding one symbol as the child of another symbol.

Here is the actionscript to make it all work. I will describe it below.

The ActionScript to make it all work:

flash actionscript screenshot

Explanation of the ActionScript:

The first 4 lines declare the variables for the 4 movieclips in the Library. This of course is the necessary step(s) totake before anything inthe Library can be added to the stage/Display List.

Line 6 adds the homepage movieclip as a child of the movieclip 'red'.

Next , on line 8, we create an array of the button symbols. It is not necessary to create and use the array, but it makes it easier. The more buttons we have, the more we save time and space in coding if we do use an array.

Lines 10 - 15 uses a 'for' loop to cycle through our array and to add the rollover, rollout, and click event listeners to each of the buttons. It also makes each button have a buttonMode=true so we can see the cursor turninto a hand for each button. Not necessary, but a common convention that is usually good to adhere to unless you are using otherstrong visual cues to give the user feedback. We actually are using some obvious visual cues, but I am also giving it a buttonMode=true anyway !

Lines 17-18 and 20-21 declares new ColorTransforms. I guess this is actually a third, minor choice for us to make. We could just use alpha changes, and/or size changes. but I am also choosing to use some color changing. In order to do color changes, and work with the color channels, we could Import the Color class, and change its color(tint, 0xFF11AA as a color example) and its tint multiplier( its strength, represented by a number like 1). Or rather than import a class, we can just work with colortransform and the seperate color channels, as well as the alpha. I think its beyond the scope of this exercise to go into detail on colortransform. Look it up if you need to, or I can write about it separately.

Just know that in this code, the first variable, 'myColor' is going to change the red channel by decreasing the red in the red channel. We are giving it half ( .5 ) of its value. The second varibale 'myColor2' will return it to its original value ( 1 ).

The rollover and rollout functions, lines 25 - 33 just tell which ever button is rolled over to change its color via colortransform, and also to change its size ( via scaleY )

The rest of the code deals with the Click function. This is the most complicated. In its simplest form, with just needs to swap out the page content. If that is all you are concerened about, fine. But if you want to have the button click keep the button s rollover state 'sticky' until another button is clicked, we have to deal with some logic to keep it all straight.

Line 36 is easy. It just removes the original 'home page' page content movieclip.

Lines 38 - 50 are a 'switch' statement. It is a different way to write an 'if/else' statement. This one reads like this: if the button clicked (the event.target) is btn1, then place the page1 content as a child to the 'red' movielip, and then move on out of the switch statement ( break ). If not, check to see if the buttonclicked was button 2 or button 3 and add the correct movieclip to the 'red' movieclip.

Then, once that is done, line 52 is another 'for' loop to cycle through the button array and on line 53 gives all the buttons the original rollout listener.
Line 54 sets all the buttons back to the original color value, and line 55 puts all the buttons back to thier original size.

Line 59 tells the button that was clicked to actually remove the rollout event listener, becuase we need it to all remain 'sticky' after the button click, otherwise once we moved away from the button, it would change back to normal according to the listener.

Lines 60 and 61 tell the clicked button to have the color change, and the size change that we want.

That's really it. I hope this all makes sense. It might seem complicated, but it really is not so bad. I have tried to present it in a way that you can grasp all the main concepts, and then use them for yourselves.

HERE's THE CODE:

var hpage:pagehome = new pagehome();
var p1:page1 = new page1();
var p2:page2 = new page2();
var p3:page3 = new page3();

red.addChild(hpage);

var btnArray:Array = [btn1,btn2,btn3];

for (var i:uint=0; i<btnArray.length; i++) {
btnArray[i].addEventListener(MouseEvent.ROLL_OVER, bRollover);
btnArray[i].addEventListener(MouseEvent.ROLL_OUT, bRollout);
btnArray[i].addEventListener(MouseEvent.CLICK, bCLICK);
btnArray[i].buttonMode=true;
}

var myColor:ColorTransform = new ColorTransform();
myColor.redMultiplier = .5;

var myColor2:ColorTransform = new ColorTransform();
myColor2.redMultiplier = 1;

 

function bRollover(event:MouseEvent):void {
event.target.transform.colorTransform=myColor;
event.target.scaleY=1.5;
}

function bRollout(event:MouseEvent):void {
event.target.transform.colorTransform=myColor2;
event.target.scaleY=1;
}

function bCLICK(event:MouseEvent):void {
red.removeChildAt(1);

switch (event.target) {
case btn1 :
red.addChild(p1);
break;

case btn2 :
red.addChild(p2);
break;

case btn3 :
red.addChild(p3);
break;
}

for (var i:uint=0; i<btnArray.length; i++) {
btnArray[i].addEventListener(MouseEvent.ROLL_OUT, bRollout);
btnArray[i].transform.colorTransform=myColor2;
btnArray[i].scaleY=1;

}

event.target.removeEventListener(MouseEvent.ROLL_OUT, bRollout);
event.target.transform.colorTransform=myColor;
event.target.scaleY=1.5;
}



If you have questions or comments, feel free to let me know.

You must have 'styles' or 'CSS' disabled. That's OK.

If so, and you see this, please DO NOT fill out the next 3 fields: name, email and zipcode. Thank you.

Name:

Email:

Just continue on to the rest of the form below this. Thank you.








Thanks for helping us control spam by filling in this question:
What is 10 + 3 = ? (Use numerals only)