Sliding Pages

In this tutorial you're going to learn how to create a menu system with a sliding content.

The pages slide horizontally and the target page eases out as it approaches the main window.

1:

Let's start this by drawing the main interface. Create as many buttons as you like (we're going to use 4 buttons for this tutorial).

Fig 1

2:

• Good, now create a new movie clip and name it sliding window. (Insert>New symbol)

This movie clip is going to hold the sliding pages. The pages will be masked to be only displayed when passed through the desired display window.

The First layer will be your masking layer. This should be as the main display area that reveals the sliding pages. This is indicated in Fig2 as the green area.

Fig 2

• Create a new movie clip and name it sliding pages. Place your pages inside that movie clip and arrange your pages horizontally one after another as shown in Fig 2. You can add as many pages as you like.
  
  
• Drag the sliding pages Movie Clip from your library (windows>Library or F11) and place it in a layer below the Mask layer

3:

Ok, very well done.

Now we're going to add the Instance Names to the buttons. These names will be used in the Action script in the following step.

Fig 3

As shown in Fig 3, click on the button and add the name under the Properties panel. Do the same for page2, page3 and page4 respectively.

Almost done! We're going to add the actions in the following step.

4:

Now in the sliding window movie clip, select the keyframe on the pages layer and add the actions:

Action Description:

The first part of the script declares the initial vlaues. The spd value is the scrolling speed, the higher the value, the faster the pages will scroll.

Depending on the dimensions of the pages you've got, the onRelease endX and endY is set. In my case, the width of each page is 220px. Therefore, the second page will appear when i set the endX value to -220, the third to -440 and the forth to -660 (Increment of 220).

page1, page2, page3 and page4 should be the instance names you added to the buttons in the previous steps.

You are ready to test your movie now!

Conclusion:

What we did:

• Drew the Interface and created buttons.

• Created a new movie clip and named it sliding window.

• Inside the sliding window, we added 2 layers, one is the mask and the other one is the pages.

• Created a new movie clip, named sliding pages and placed it on the pages layer. This clip holds the pages to be slided.

• Added actions to the sliding pages movie clip.

Hope you enjoyed this tutorial :)

Download *.fla