1. Open a new Flash file (AS 3.0).

2. First we’ll make our four buttons. Draw a rectangle on the stage. I set my x and y coordinates to be at 25.

figure 1

3. Turn the shape into a movie clip. Double click to select the shape, press F8 (or right click and Convert to Symbol), name it “navbg_mc”, and hit OK.

figure 2

4. Now we’ll create three more instances of this movie clip object. To align them we can select all, hit Command (⌘) + K to open our Align panel (or Window > Align), then click “Align left edge” (figure 4: circled in red). You may need to reposition the x coordinate of the rectangles on the stage to 25. Next, click “Distribute vertical center” (figure 4: circled in blue). This will distribute all of the items evenly between the first (top) and last (bottom) item.

figure 3

figure 4

5. Title the layer “nav bkgnd” for navigation background.
6. Add a new layer and title it “nav txt” for the navigation text and lock the nav bkgnd layer.

figure 5

7. Now add text for each of the navigational buttons. Be sure your text boxes are on whole pixels. This will be important when we publish our movie. The text may appear blurry if it sits on a partial pixel (i.e. if x was equal to 25.5).

figure 6

8. Unlock the nav bkgnd layer. We are now going to turn these into individual movie clips, but first, give each rectangle (instance of navbg_mc) an instance name of “navbg”.

figure 7

9. Now that we have done that we can select each rectangle and the text corresponding and create our movie clips. Select the home text and the rectangle underneath. Convert it into a Movie Clip Symbol (F8 or right click, Convert to Symbol). Name it nav_home_mc. Repeat this for each item, naming them appropriately (nav_about_mc, nav_services_mc, nav_contact_mc).

figure 8

10. We can now delete the layer we are no longer using and rename the one with all of our buttons: nav buttons.
11. Out on frame 25, add a frame (F5 or right click > Insert Frame).

figure 9

12. For each nav item, give it an instance name. Start with the home nav button and name it: home_btn
Do the same for every button (about_btn, services_btn, contact_btn).

figure 10

13. Lock the nav buttons layer then create a new layer and title it: home content.
14. Add two more layers. Title the top one “actions” and the middle one “labels”. These will be used for our ActionScript and our timeline markers for each section.

figure 11

15. On frames 8, 17 and 25 insert blank keyframes on the actions and labels layers.

figure 12

16. Lock the actions layer.
17. We now need to label our sections. First, on frame 1, we will name this section “home”. Click on the first frame on the labels layer. Then, down in the properties panel you’ll find a place to define the Frame Label.

figure 13

18. Give it a label of “home”. Then go to frame 8 and label it “about”; frame 17 label “services”; frame 25 label “contact”.

figure 14

19. So because we will need Flash to stop at each of these sections, we need to add a stop action (stop();) for each. Press Control + F9 or go to Window > Actions to pull up your ActionScript panel. In the actions layer on each of the blank keyframes type into your ActionScript Panel the stop action.

figure 15

20. Now we need some elements for each section. Lock all the layers and create a new layer in between layers nav buttons and labels and title it: home content.
21. On the home content layer, add a title and body content.

figure 16

22. Select both text items, create a new movie clip symbol (F8 or right click, Convert to Symbol). Name the movie clip: home_content
23. Insert a blank keyframe on the 2nd frame.

figure 17

24. In your library panel, find the movie clip you just created and duplicate the symbol, renaming it to: about_content
25. Double click on the about_content movie clip. Change the title to ABOUT.
26. Go back to the main timeline by clicking on Scene 1.

figure 18

27. We now need to create another layer and name it: about content
28. Insert a blank keyframe on the same frame as our “about” label (frame 8).
29. Drag the new about_content movie clip onto the stage.
30. Insert a blank keyframe on frame 9.

figure 19

31. Repeat steps 24 through 30 for both of the remaining sections.

figure 20

32. Now for the good stuff! Click on the first frame on our actions layer. We now need to tell Flash what we want to happen when the user clicks on one of our buttons.
33. Since we are going to use our movie clips as buttons, we need to tell each of these instances to be buttons. (change each)

figure 21

34. In the Actions panel, type:

import flash.display.MovieClip;

This will allow us to give actions to the movie clips on our stage. You really don’t need to know anything more than it is necessary to have at the top of your code.

35. Now to create the function that will navigate us to the proper sections when we click one of the buttons. Type this into your Actions panel (on that same frame, frame 1 of the main timeline).

function clickHome (event:MouseEvent):void {
trace("home button clicked");
};

36. Now that we have a function that will tell us when the home button is clicked, we need to link it to the actual click event. In order to do that we need to add above our function a line of code. This line of code will add an event listener to the home button and call our clickHome() function when it is clicked.

home_btn.addEventListener(MouseEvent.CLICK, clickHome);

function clickHome (event:MouseEvent):void {
trace("home button clicked");
};

37. Let’s test the movie and click the home button.

figure 22

38. It worked!

39. Okay so now we need to be able to do this for every one of the buttons. So we need to create a function for each section and add the call on the CLICK event:

about_btn.addEventListener(MouseEvent.CLICK, clickAbout);

function clickAbout (event:MouseEvent):void {
trace("about button clicked");
};

figure 23

40. Test your movie again. Notice now you get results every time you click one of the buttons?

41. From here we need to tell it what to do when we click on a button. Currently it just gives us a trace(); to let us know it is working. But what we need is to tell it to go to the specific sections, which is where gotoAndStop(); comes in! In between the curly brackets (“{” and “}”) in our clickAbout() function type:

gotoAndStop('about');

The function should now look like this:

function clickAbout (event:MouseEvent):void {
trace("about button clicked");
gotoAndStop('about');
};

If you remember, we labeled our sections on the timeline using the Frame Label in our Properties panel. These are now coming in handy. For each of our functions we need to tell it to go to the specific sections.

figure 24

42. Test your movie. You have just completed creating a simple Flash website!

Download finished files

Addendum:
Change your button instance names to match that of the labels for each section: take off the “_btn”. The code below will use the instance names of each button in order to find the corresponding frame label and navigate there.

stop();

import flash.display.MovieClip;

home.addEventListener(MouseEvent.CLICK, gotoMySection);
about.addEventListener(MouseEvent.CLICK, gotoMySection);
services.addEventListener(MouseEvent.CLICK, gotoMySection);
contact.addEventListener(MouseEvent.CLICK, gotoMySection);

// this function takes user to specified section or frame label
function gotoMySection (event:MouseEvent):void {

gotoAndStop(event.target.name);

trace(event.target.name + " was clicked");

};

Download these files w/ updated code

There are some terms, some of which we have covered, that will be useful to have a general and basic understanding of.

1. Instances & Instance Names
   When we create symbols, existing in the Library and drag them onto the stage, we create an instance of that symbol. If we will be referencing an instance in our ActionScript, we must name that instance. You name your instances in the Properties Panel.
   
2. Statements
   A statement is like a sentence only rather than the expression ending with a period it ends with a semi-colon (";"). Example:
   var theDog;
3. Variables & Data Types
   Variables are containers; they are vessels used to store various bits of information. There are many types of data. Here are a few:

   Number
   These can be positive, negative, integer or decimal (floating point) numbers.

   var myAge:Number = 52;

   //comments are indicated by using two slashes ... these are good to use. they will help you remember what a line of code means

   /*
if you will be writing extra, you
can use a slash + a star and that will
give you the ability to comment a longer
description or block of code

*/

   Boolean (true/false)
   var myStatement:Boolean = false;

   String
   var myName:String = "Bob Saget"; // set value of the myName variable equal to Bob Saget

   NOTE: The way in which data is stored is very important. For example, these are not equal:

   
var myAge:Number = 52;
var myAge:String = "52";


4. Functions
   Functions allow for reusing a block of code.

   function myFirstFunction() {
     trace("hello");
};
myFirstFunction();

   Many functions are built into Flash. trace(); stop(); and gotoAndPlay(); are three of the most common.

5. If Statements

   An if statement is a conditional statement…if you’ve ever taken a logic class, these are similar type statements…
   First, write out what you’d like to check:

   // if the x property of the dog movie clip is equal to 50, then trace "x equals 50"

   
   if (dog_mc.x == 50) {
     trace("x equals 50");
}

   You can also have it do something else if the condition is not true using if / else statement.

   // if the x property of the dog movie clip is equal to 50, then trace "x equals 50", otherwise, trace "x does not equal 50"

   
   if (dog_mc.x == 50) {
     trace("x equals 50");
} else {
     trace("x does not equal 50");
}

6. Operators
   The double equal sign (==) in our if statement is called an Operator. Operators tell the statement how to compare the two variables. Here are some other operators and their descriptions:

   Operator	Description
   ==	equals
   !=	does not equal
   >	greater than
   >=	greater than or equal to
   <	less than
   < =	less than or equal to
   &&	and*
   ||	or*

   *Here are examples of how you would use the && and || operators:

   AND Operator: &&
   // if the x property of dog mc is equal to 50 AND the y property is equal to 50, trace "x and y equal 50"

   if ( (dog_mc.x == 50) && (dog_mc.y == 50) ) {
     trace("x and y equal 50");
}

   OR Operator: ||
   // if the x property of dog mc is equal to 50 OR the x property is equal to 100, trace "x equals 50 or 100"

   if ( (dog_mc.x == 50) || (dog_mc.x == 100) ) {
     trace("x equals 50 or 100");
}

7. Loops
   Loops are used to execute a specific set of items a specific amount of times. There are several types of loops, the most common of which is the For loop.

   for ( var i:Number = 1; i < = 10; i++ ) {
     trace(i);
}

   The first item in the for loop is establishing the counter. We have to declare the variable (var i), the variable type (:Number) and give it a value ( = 1;). This will be the beginning or starting value of the counter.

   Next we need to establish the condition. How many times does the for loop need to run? So we state the the variable i is less than or equal to 10.

   The final piece in the for loop is the action. This tells the loop whether to increase (i++) or decrease (i--). Most often you will only need to increase.

   Try changing the initial counter number, the final number or the action…see what happens!

Resources

Variables & Data Types
Functions
For Loops
General tutorials

Among these many wonderful capabilities lie a few [major] items for consideration. Here are three I can think of off the top of my head:

1. Search Engine Optimization
Google recently announced their new ability to search and index Flash sites (a very exciting!). Their new technology can read any text and most URLs with in Flash. However, because this is only the beginning, they are still not able to guarantee that all text, content, or links will be indexed. Google does a great job of outlining these points here.

2. Purpose and Intention
I am absolutely in love with Flash. However, it is simply not practical to recommend it for every website. Three questions I ask myself when assessing a potential client’s needs are:

1. Can I achieve the same quality of work using HTML/CSS?
2. Would it be easier to build the site and less complicated for the client to update content/images, etc. if we used Flash?
3. What is the project budget? Flash work is typically more costly. Designers/Developers can be more intentional in more ways using Flash which takes more conceptual work and potentially more time in general.

If a site will be information heavy and the content changing frequently, I would most certainly choose PHP/HTML/CSS option (couple with content management, WordPress rocks) over Flash. The site will have better optimization and exposure in searches. Watch this (a little outdated, WordPress 2.7 is most recent, but still relevant). However, for an image heavy or portfolio focused website, Flash would be the way to go, providing faster download speeds and graphic quality (ability to deliver higher resolution images/graphics using less bandwidth).

3. Who Cares?
Websites are an online marketing extension of a business. As with any marketing piece or campaign, the business needs to determine who they are trying to reach. Young? Old? Businesses? Individuals? Corporate? Independent? Savvy? Or..not? Using Flash does not automatically mean your audience needs to be young, savvy and into “flashy” things. Counter to many people’s initial thought, it can be an elegant addition, executed with intention and professionalism. Regardless, a business needs to determine whether or not having a Flash element or a full Flash website will be a value add to their users.