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).
2: 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.
Fig 2.1
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. 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, as shown in fig 2.1
| | | | 
Fig 1 
|
|  | |  | |  | | |
| | | | | | | | |
| |
| 
Fig 3 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;
};
|
Fig 4 Download *.FLA  | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
 | |  | |  | | |  |
| | |  |
| | | | | | | | |
| | | | | | | | |
| |
| |
discuss this topic to forum
