|
|
English
 Home >
Flash Tutorials >
Menu & Navigation Tutorials > Sliding pages
|
 |
|
|
|
|
Sliding pages
| | | |
 Download the source file for this tutorial
 Printer version
by Ali Eisa
www.aevision.com
Introduction
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 :)
Written by: AEvision. For further clarification, please visit our forums
(Added: 06-19-2004, Hits: 1, Rating: 3.65, Votes: 146, Reviews: 32)
 Add to Favorites  Suggest to a Friend
|
|
|
|
|
|
|
|
|
"The swf file works fine on it's own but when u load it into a movie container , the swf loads but does not animate. "
experienced same thing.. how it'll work on a container?
(Added: 02-27-2007 User:
Guest)
es muy bueno, pero habra una manera de hacerlo con 2 botones? una que avance y otra que retroceda
(Added: 02-18-2007 User:
Guest)
you have to target the Level so instead of _root.button1, it will be _level2.button1
(Added: 12-13-2006 User:
Guest)
^^ error:
usually means you have pasted the script on a frame instead of the movie clip.
Make sure you have the movieclip selected before pasting the script into the actions panel.
(Added: 12-05-2006 User:
Guest)
fantastic
(Added: 11-13-2006 User:
Guest)
I tryed to do this, I really did. But it's so bad explained.. thanks anyway....
(Added: 10-24-2006 User:
Guest)
Hi Guys,
I've tried the tutorial but was wondering how you changed it to work for bigger pages???
Any help would be great!
(Added: 10-14-2006 User:
gizmo)
Help, I need to do a similar things like this tutorial showed. But I need to insert a *.swf (flash movie) in one of the slide. When I do that, the frame doesnt work anymore because it no longer 4 frames (for 4 pages). How to solve this? Ive been asking around, so Ill probably forget where I drop my question. Please, if you have time, drop a solution at esta_lavista(at)hotmail.com. TQ very much.
(Added: 09-26-2006 User:
Guest)
yup - worked for me also. simple & functional = good stuff! thanks :)
(Added: 09-19-2006 User:
Guest)
The swf file works fine on it's own but when u load it into a movie container , the swf loads but does not animate.
(Added: 09-15-2006 User:
Guest)
|
|
|
|
|
|
|
|
|
|
|
