Tutorial details:
Written by: Jesse Stratford [email:jessestratford@actionscript.org]
Time: 30+ minutes
Difficulty Level: Intermediate
Requirements: Flash 5, attention to detail.
Topics Covered: Paths, Variables, Instances, Conditional statements, Goto, Custom Functions, Masking.

Please Note: This tutorial was the first I wrote and by my own admission is now outdated. The best way to achieve this effect is to use a completely scripted example such as that shown at www.the-stickman.com/tutorials/ or similar. This way still works but you can better effects using the (more complicated) scripted examples. Those of you with Flash MX may also wish to consider using this free component which does most of the work for you.

Click here to download the source for the movie above in PC Zip format.

In this tutorial we will cover the popular content/background scrolling navigation system that has caused a red flag on many Forums since Barneys and WebAgent amongst others, started using it. So let?s get started!

By now most of you have probably seen a version of this form of navigation somewhere on the web. Granted, most of them don?t have the cute piggy buttons I used in my example above, but hey I?m unique!

This effect is actually pretty easy to achieve. In this tutorial we will investigate how create such an interface with one slight difference: our version doesn't speed up at the beginning and slow down as you get closer to your destination, that is more complicated and I'll save it for another tutorial.

Start up Flash and create a new document. My example above is 300px wide by 200px high. Next create a new graphic symbol, (Ctrl-F8), call it 'content'. Into this graphic symbol you add all the graphics you want to be able to scroll to, in their correct sequence, side by side. For this example, I just made a rectangle using the rectangle too and filled it with that awful rainbow gradient that comes standard with Flash. I then put, at regular intervals, the numbers 1 through 5 using the text tool. Thus, my example has 5 content sections, but you can adapt this to encompass as many as you like. For this effect to look decent you need content that blends (WebAgent does this particularly well).

OK, assuming you've done that right you should have one continuous looking graphic symbol called 'content'. Now create a new Movie Clip symbol (Ctrl-F8) and name it 'bar'. In bar you want to create four layers. From top to bottom label the layers: Script, Frame, Mask, Bar.

Into layer bar, drag one instance of your content graphic symbol. Now, so this doesn't get confusing I'm going to refer to each area of content within your 'content'graphic as a 'scene'. My example above has 5 'scenes', with the numbers 1 through 5 on them. OK? What you want to do now is align the centre of scene 1 of your content, to the centre of the stage (it might help to use the Grid and Snap to Grid functions here, found under the View > Grid menu). The rest of your content should be off to the right of centre.

Now select the Frame layer and, using the rectangle tool, create an empty rectangle (no fill colour) that surrounds scene 1 of your content, like a frame around a picture (see graphic below).

Your timeline should look something like this (but with the Mask and Script layers also):

Now create a keyframe at frame 5 (select frame 5 and press F6). At frame 5 move the centre of scene 2 of your content to the centre of the stage (so that the frame now surrounds scene 2). Create a motion tween between frames 1 and 5, (right click frame 1 and select 'Create Motion Tween'). If you've done this right, you can press enter and your clip should show your 'content' graphic sliding to the left betweens frame 1 and 5 such that scene 1 moves out of the frame and scene 2 moves in.

Now you need to replicate this tween process for all remaining scenes within your 'content' graphic. When you've done this, press enter and you should see your content sliding from right to left across the stage wile all scenes pass through the frame. Don't worry, we'll get around to stopping them later. For now we just want a smooth motion between scene 1 and scene 5, (or your last scene, whatever number it is).

Next we will add a Mask to stop undesired content showing through. Masking is like putting windows in a wall: the areas where you put a window, you will see what's beyond the wall, but where you lay brick, you will see nothing but brick. Select your Frame layer, at frame 1. Your rectangular frame will automatically become selected. Copy your frame (Ctrl C, or Edit > Copy). Now select your Mask layer at keyframe 1 and use the Paste In Place function (Ctrl Shift V or Edit > Paste In Place). You should end up with a copy of your frame in the Mask layer, in the exact same position. Now use the flood fill (paint bucket) tool and fill the frame on the Mask layer with a colour of your choice. I always use pink because it stands out as a colour I would never use for anything except a mask! Now, because the Mask layer is above the Bar layer, the mask shape you just filled will obscure your content. Right-click the Mask layer and select 'Mask' from the menu. You should notice a few changes. First, you Mask layer's icon will change. Second, the Bar layer should be indented and its icon will also change. Also notice that, if you've done it right, you will ONLY be able to see the content on the Bar layer which falls within the bounds of the mask you just created. Just like our window example.

Your Bar layer will have more frames than your other layers currently. We want to make all the layers have an equal number of frames now, before we test our layout. If, for example, your Bar layer goes all the way to frame 25 (5 frames for 5 scenes), select frame 25 in the Mask layer, right click and select 'Insert Frame' (or press F5). Do this for the Frame layer also. Note that if the Mask layer has a little lock symbol on it, you will need to click this to unlock the layer before you can edit it, (masked layers are generally locked). You should now have 3 layers which have the same number of frames, ignore the Script layer for the moment. You will also notice that if you click a random frame in your Mask layer, say frame 10, the content visible in the Bar layer will be different. Now test your clip again by pressing Enter. You should see your content scrolling right to left across the screen as it did before, but this time you should ONLY be able to see that content which falls within the bounds of the Mask. If this isn't what you see, you've made a mistake. Retrace your steps and find where you went wrong.

Next, select all frames in the Bar layer by clicking the layer once, (unlock the layer if it's locked). Now right click on any of the selected frames and select 'Copy Frames'. Click the very next frame after the current last frame in the Bar layer, then right click and select Paste Frames. You should see the frames you copied duplicated where you right clicked. Now select all the frames you just pasted (click the first frame, then hold shift and click the last), right click and select Reverse Frames. Select frame 1 in the Bar layer again and press enter. You should see your content scroll left to right as it did before, then scroll back, from right to left. We're getting close now!

You may have noticed that the scroll halts at the end before it scrolls back: this is because we have two frames displaying the same content. We need to fix this before we continue. Once more select the frame where you just pasted and reversed your frames, (it should show your last content item in the centre of the stage). Right-click this frame and select 'Clear Keyframe' (or Shift F6). You will see there is now a break in your motion tween. To patch this up, right click where the break begins (where the blue frames end and the grey begin), and select 'Create Motion Tween'. You should once more have all blue frames in the Bar layer. Now press Enter once more and you should see a seamless transition from scene 1 to 5 (or your last) and back again. Don't forget to extend the other layers so they have as many frames as your Bar layer! (Remember? Select the equivalent last frame and press F5).

You should have a timeline that looks something like this now (ignore the Script layer for the moment):



OK! We've finished all the fiddly bits now, it's time to move on to the scripting!

In the Scipt layer, create a keyframe at each frame where the center of a scene is in the middle of the window-frame we created, (where the arrows end in the Bar layer) as show above. Now label your new keyframes, (using the Instance Inspector, Frame Tab) in the following form:

- While the content is scrolling from right to left (forwars from 1 to 5 in my example), lable the frame "f" and the scene number. For instance, as shown above, frame 1 is labled "f1" because scene 1 is centerred in the window-frame and frame 5 is labled "f2" because scnee 2 is centerred in the window-frame.

- While the content is scrolling lef to right (backwards from 5 to 1), label the frame "b" (for backwards), and the scene number. For instace, frame 20 in the above image indicates the beginning of the scrolling backwards, so I labled it "b5" (because scene 5 is visible within the window-frame) and the next keyframe to the right is labled "b4" because we're scrolling backwards and scene 4is visible? Not too hard right?

Now double click each labelled frame you just created and enter the following code:

current = sceneNumber
if (target == current) {
stop ();
}

Where 'sceneNumber' is indicative of the scene in the window-frame at that time. Eg. For label "f1" I enter:

current = 1
if (target == current) {
stop ();
}

While for label "b5" I enter:

current = 5
if (target == current) {
stop ();
}

(The only difference is the 'current =' line, see?).

When you're done your Script layer should look just like mine in the graphic below:



We're 90% done people! Don't fail me now!

Now we need to create our function which will handle directions of where to scroll to and how. Return tot he main timeline by clicking the 'Scene 1' above and to the left of the timeline (above the Scripts Layer).

Drag one instance of your fully completed 'Bar' movie clip onto the stage from the Library (Ctrl L to pop up the library). If your mask is working correctly you should see only the first scene worth of content, not the entire length of the 'content' graphic symbol. Give this instance of the bar symbol an instance name of 'bar'. Now create a button and put a few copies of it on the stage. Add these actions to your buttons:

on (release) {
/bar:target = targetScene;
director ();
}

Where 'targetScene' is the content-scene you want that button to scroll to. For example, if I want a button to scroll to content scene 5 I would enter:

on (release) {
/bar:target = 5;
director ();
}

Actions Evaluation: What we're doing and how.

Line 1 ? Says "Do these actions when the button is released"
Line 2 ? Sets the variable "target" within the movie clip instance "bar" for your chosen number, (5 in the example above).
Line 3 ? Calls our director() function, which we'll make below.

You should have one button for each content scene you have. So if your content has 8 segments, you should have 8 buttons on the stage each with the appropriate code.

Now double click frame 1 of the main timeline to open the Actions Inspector. Enter expert mode using the Menu arrow on the right side of the Actions Inspector (or Ctrl E), and paste in the following script:

stop ();
// set startup variables - we don't want it scrolling away as soon as the file opens!
/bar:target = 1;
/bar:direction = "f";
// our 'director' function, which will control movements
function director () {
if (/bar:target</bar:current) {
// if we're going backwards then, set direction to backwards!
/bar:direction = "b";
} else if (/bar:target>/bar:current) {
// if we're going forwards then, set direction to forwards!
/bar:direction = "f";
} else if (/bar:target==/bar:current) {
/bar:direction = "null";
}
goto = (String(/bar:direction+/bar:current));
bar.gotoAndPlay(goto);
}

Actions Evaluation: What we're doing and how.

Line 1 ? stops the movie.
Line 2 ? Comment
Line 3 ? Sets variable target to 1. Meaning we want to go to and stop content-scene 1 when the movie first loads.
Line 4 ? Sets variable direction to "f". Our director function interprets this to mean "We are moving forwards ? scrolling from 1 through 5".
Line 6 ? Define custom function: director()
Line 7 ? Conditional statement: tests if the target content-scene is less than the current content-scene. ("Are we moving backwards from 5 through 1?")
Line 9 ? Since the target content-scene is less than the current target-scene, we are moving backwards, so set direction to "b"
Line 10 - Conditional statement: tests if the current content-scene is less than the target content-scene. ("Are we moving forwards from 1 through 5?")
Line 12 ? We are moving forwards, so set direction to "f"
Line 13 ? Conditional statement: Is the target content-scene the same as the current content-scene? "Are we staying still?"
Line 14 ? If we're staying still, we have no direction. Set direction to "null"
Line 16 ? set variable "goto" to the String (text value) derived from taking the direction and adding the current content-scene number.
Line 17 ? Tell the "bar' instance of the "bar" movie clip symbol to go to and play the label stored in variable "goto" if such a label exists.

OK so let's take an example scenario and run through it.

Say we're currently at content-scene 4 and the user decides to go to content scene 2.

Our function will do the following things:

- Figure out that 2 is less than 4 so we're going backwards.
- Set the direction to "b" to indicate backwards
- Tell the 'bar' movie clip to go to and play label "b4" (which scrolls backwards from 4 until it reaches it's target frame, which is 2 in this case).

And that's it! You now have a scrolling navigational thing. This version will even re-route in mid tween if you press another button. For example, press the 4 button, then wait for it to scroll past 2 and press the 1 button and it will scroll back without going all the way to 4!

It's a bit messy trying to write out layout intensive tutorials like this so I hope you found it easy to comprehend. I do my best! Let me know if there's some way I can make it clearer, or if you find any errors, etc.

Jesse Stratford [email:jessestratford@actionscript.org] is the Co-Master of ActionScript.org and a freelance Flash developer and teacher. He is based in Australia and enjoys all things Flash. NB: If you have comments or feedback please feel free to email me, but please do not email me Flash questions; the forums are provided for that purpose and you will get a faster answer by posting you question there.

If you have found this tutorial helpful, I hope that you will take 30 seconds to visit The Hunger Site where, with just one click you can make a free donation of food to a starving person in a third-world country. We do not benefit financially from this action; it is purely an act of charity.

This tutorial is protected by International Intellectual Property Rights laws and may not be reproduced or redistributed in full or part, without the prior written consent of the author. Unauthorized reproduction of this tutorial or its contents may result in prosecution. I've worked hard on this tutorial, please don't steal it.