How to Make a Sumptuous Numbering Navigation

By OTOBONG INI ARCHIBONG

This tutorial will guide you to making a numbering navigation in flash.

Click here to view the sample

SETTING UP YOUR STAGE

Create a new flash document. Ctrl + N then press Ctrl + J to set the document properties.

Background color: #003399

SETTING UP THE LAYERS

Rename the current layer 1 to buttons. Then insert a new layer ontop of it, and then rename it to contents.

MAKING THE BUTTONS

Click on the buttons layer and then draw a wide rectangle then select it and give it the following properties.

Width-48

Height-36.0

Stroke colour-#00CCFF

Stroke height-2

Fill colour-#0066FF

This is how your rectangle should look similar to-

a.DUPLICATING THE RECTANGLE

Double click on the rectangle and duplicate it into four (4) places then increase the width of the last one. (See the screenshot below)

b.ADDING LABELS TO THE RECTANGLE

Let’s add some text to the rectangle before we convert it to a button. Take the text tool (A) and select static text from the property bar. The first rectangle will have the label of 1, the second 2 and so on, but the last one should be “next”. (See screenshot below)

c. CONVERTING THE RECTANGLES TO BUTTONS

Now we are through with the rectangles lets convert each of them into a button. Select the first rectangle with the label “1” and then press F8. This opens the dialog box Convert to Symbol.

Choose button as the behaviour, you can change the name to 1 and then with registration point center. Press ok. (See screenshot below).

You have successfully converted the first rectangle into a button. If you check the property bar it will should button as the symbol type.

Repeat the same steps to the remaining rectangles.

After you are done with these.

Let’s add some interactivity to the buttons.

d. ADDING INTERACTIVITY TO THE BUTTONS

Double click on the first button with the label 1. And then on the timeline select the OVER FRAME and press f6.

With your OVER frame still selected, click once on your rectangle and then change the fill colour to this -#0033FF.

Click on Scene 1 to go back to the main stage.

Now, repeat STEP D to all other buttons. We now have our buttons working let’s make the contents.

MAKING THE NAVIGATION

While you’re on scene 1 click on frame 5 of the buttons layer and press f6, click again on frame 10 of the buttons layer and press f6 do the same thing to frame 15 and then on frame 20 press F5.

Your timeline should look similar to this

SETTING UP THE CONTENT LAYER

Before we make the contents let’s add stop action to all the key frames to avoid auto play all.

Click on the first frame of the contents layer and press f9 to open the actions panel.

Type in this

Stop();

Do the same thing to frame 5,10,15 and 19.

ADDING THE CONTENTS

Click on frame one of the contents layer and then take the text tool (A) and make a static text as shown below.

This is just an illustration you can change the label to whatever you like or you can even import an image there. Click on the text and convert it to a movie clip symbol.

After converting it to a movie clip symbol click on frame 4 of the contents layer and press f6.

With frame 4 still selected. Click on the text and on the property bar Color- Choose – Alpha.

Enter the alpha value as – 0%.

Click on frame 5 and make a static text of this.

Convert it to a movie clip symbol as we did to the other one.

And then press F6 at frame 9.

Also set the alpha color of the one at frame 9 to 0%, just as the other text.

Keep repeating the same procedure. This is what you should have at frame 10 and frame 15.

FRAME 10

FRAME 15

Finally click on the content layer and on the property bar

Tween – Choose Motion.

Your timeline should now look like this.

NAMING THE FRAMES TO EASE NAVIGATION

Lets name the frames so that when we are adding navigation to buttons it will be easier for us.

Click on frame 1 and then on your property bar.

You will see something like this.

Change it to “name”.

On frame 5 change the label to “sex” on frame 10 change it to “country’ then finally on frame 15 change it to “age”.

CODING THE BUTTONS

Now return to the first frame (frame 1) and click on the first button, the one with the label one. Then press f9 to open the action script panel of the first button.

Type in this.

on (release)

{

gotoAndStop("name");

}

Button with the label 2

on (release)

{

gotoAndStop("sex");

}

Button with the label 3 add

on (release)

{

gotoAndStop("country");

}

Button with the label 4 add

on (release)

{

gotoAndStop("age");

}

Button with the label next add

on (release)

{

gotoAndPlay("name");

}

NOW THAT’S FOR THE FIRST FRAME

Do the same thing to frames 5, 10, 15 and 19 but for the next button. On frame 5 the next button should be

on (release)

{

gotoAndPlay("sex");

}

On frame 10

on (release)

{

gotoAndPlay("country");

}

on frame 15

on (release)

{

gotoAndPlay("age");

}

Now that’s all. I hope you followed the tutorial?

If not just leave your comments or download the full .fla below.

Download the .fla here