Sliding Pages | 1 2 | continued:

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 in Fig 3, click on the button and add the name under the Properties panel. Do the same for the buttons of page2, page3 and page4 respectively.

 

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

4:

  • Go to the sliding window MC.
  • Right-click the content of the sliding pages MC on the stage (the one you dragged from the library in the previous step), not the keyframe, then select Actions and add the action script in Fig 4.

    If you can't see any of the content on the stage, make sure the layers are not locked/hidden in the timeline.

Once you have added the action script, go back to the main stage, the root timeline of your scene.

  • Now drag the "sliding window MC" from the Library to the stage.

Now you've go the buttons and the sliding window MC on the main stage and you should be able to test your movie (control>test movie).

 

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.

That's it, enjoy your sliding flash content!

 

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.
  • Dragged the Sliding Window MC to the stage on the root timeline

Hope you enjoyed this tutorial :)

 

 

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

Not clear enough? Check our forums. We will be glad to help you out.
   
Main | Tutorials | BestFlash | Goodies | Forums | Portfolio | Contact Us
    
 
AEvision Tutorials 2.1 - All rights reserved AEvision Designs 2002-2007
  
 
Icons provided by iconpacks.com