Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates (NEW)  |  Website templates  |  Privacy Policy  |  Link Exchange  |  Contact Us

Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!

Welcome To ProDesignHost.com Flash Tutorials Area - 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).

image01
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.

  • Create 2 layers as shown below.
image02

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.

image03
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.

image04
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:

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 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

Author: AEvision
Advertisements

Premium Partners

  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Website Design Tutorials - Web site design is an area that simply takes experience to perfect. Get started with these tutorials covering everything from page layout to content tips. At Webdesigntutorials.net you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website templates  |  Privacy Policy  |  Contact Us

All Right Reserved by ProDesignHost.com