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.
STEP 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).
STEP 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.
Create 2 layers as shown below.
The first layer is going to hold your pages.
Create a new movie clip and name sliding pages. Place your pages inside that movie clip and arrange your pages horizontally one after another as shown below. You can add as many pages as you like.
The second layer will be your masking layer. This should be as the main display area that reveals the sliding pages. This is indicated in the image as the green area.
STEP 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.
As shown below, 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.
STEP 4
Now in the sliding window movie clip, select the keyframe on the pages layer and add the following actions:
onClipEvent (load) {
_x = 0;
_y = 0;
spd = 8;
}
onClipEvent (enterFrame) {
_x += (endX-_x)/spd;
_y += (endY-_y)/spd;
_root.page1.onRelease = function() {
endX = 0;
endY = 0;
};
_root.page2.onRelease = function() {
endX = -220;
endY = 0;
};
_root.page3.onRelease = function() {
endX = -440;
endY = 0;
};
_root.page4.onRelease = function() {
endX = -660;
endY = 0;
};
}
Action Description:
The first part of the script declares the initial values. 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 :)
discuss this topic to forum
