How to create a website navigation system

In this tutorial I will show you how to create a great looking navigation system by using Creative Flash Scroller without writing any code; all the behaviors will be configured using the component’s interface in a very short time.

Before starting the work on this tutorial, please verify that you have the Creative Flash Scroller installed; if you encounter any problems while installing it, please use the “How to install an extension” tutorial.


Click here to download the files required for solving this tutorial


1. In order to start, open Flash and create a new file (For CS3 and CS4 users: in order to set-up the frame rate, right-click the stage and select "Document properties").

Create a new Flash file

Create a new Flash file

2. Create the following layer structure and name the layers accordingly.

Create a layer structure

Create a layer structure

3. After downloading the attached archive, extract the files inside and open the “.fla” file. From this file’s Library, copy the following items in the Library of your created file: the two folders “Horizontal theme” and “Vertical theme”, the movie clips “layout” and “small-layout”.

Copy the files in the Library of your file

Copy the files in the Library of your file

4. In the “content” layer, drag-and-drop the movie clip “layout” on the stage and align it centered horizontally and vertically with respect to the stage; in order to align it, you have to open the Align panel (CTRL+K).

Center-align the "layout" movie clip

Center-align the "layout" movie clip

5. Open the Components panel (CTRL+F7) drag an instance of Creative Scroll Area on the stage, in the “scroll-area” layer; name it “scrollArea”, place it at (0;0) coordinates and resize it to 750x750 pixels, such that it will cover all the stage.

Configure the Scroll Area properties

Configure the Scroll Area properties

6. Open the Component Inspector (SHIFT+F7) and disable the “Motion Blur” parameter (you can find it in the General tab, the Scrolling enhancements section of the Scroll Area’s configuration interface). Go to Behavior and select "Reverse Touch Scroll".

Disable the Motion Blur option

Disable the Motion Blur option

7. In the “minimap” layer, drag-and-drop the movie clip “small-layout” on the stage and place at (0,0) coordinates.

Configure the "small-layout" movie clip properties

Configure the "small-layout" movie clip properties

8. From the Components panel, drag two instances of Creative Scrollbar on the stage, in the “scrollbars” layer; in the following two steps we will configure them to suit our needs.

9. From the Components Inspector, configure the first Scrollbar instance in the following way: make its target “scrollArea”, its orientation “Horizontal” and then follow the link “Click here to create your custom skin”. Write in the “Skin name” option “horiz”, as this is how the skin files were defined; if you want to find out more about the custom skin creation, read the corresponding section of the documentation or the “How to create a custom skin” tutorial. Resize the scrollbar to 150x20 pixels and place it at (0;0) coordinates.

Configure the first Scrollbar component

Configure the first Scrollbar component

Configure the first Scrollbar skin

Configure the first Scrollbar skin

Configure the first Scrollbar properties

Configure the first Scrollbar properties

10. Configure the second Scrollbar instance in the following way: make its target “scrollArea”, its orientation “Vertical” and then follow the link “Click here to create your custom skin”. Write in the “Skin name” option “vert”, as this is how the skin files were defined. Resize the scrollbar to 20x150 pixels and place it at (0;0) coordinates.

Configure the second Scrollbar component

Configure the second Scrollbar component

Configure the second Scrollbar skin

Configure the second Scrollbar skin

Configure the second Scrollbar properties

Configure the second Scrollbar properties

You can preview your file now, and you can use the top-left navigation. But if you want to just display the top-left navigation without using it follow these steps.

11. At this point we have finished the website navigation system, with navigation using the touch scroll, or the scrollbars on the minimap. If you want to disable the minimap navigation, use the following method. Firstly, insert a new layer above all the others and name it “mask”; the new layer structure will look as in the following image:

Add a new layer

Add a new layer

12. Create a rectangle on the stage – set the stroke color to black (#000000) and the fill color to blue (#0000FF). Set its dimensions to 150x150 and place it at (0;0) coordinates.

Configure the rectangle properties

Configure the rectangle properties

13. Convert the rectangle to a movie clip and name it “mask”; set its Alpha property to 0%.

Configure the "mask" movieclip

Configure the "mask" movieclip

14. Preview your file. If you would like to add buttons to your navigation system, please read the “How to create a slideshow using Scroll Area” tutorial.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.