Descriptive drop down menu tutorial - SWiSH 2 Tutorials
 
  Buy Ebooks, Video Games, DVDs, Electronics and more !
Home | Help Forums | Web Design Tutorials | Free Swishmax Downloads Make Money Online Blog . Free Image and Photo Sharing and Hosting

 

 

Company

Home

Nework Details

Tutorials

SWiSH 2

SWiSHMax

Flash MX

PHP & MySQL

HTML / JScript

Adobe Photoshop

Corel Draw

Gimp

Miscellaneous

Downloads

Templates

Plugins

Fonts

Wallpapers

Free Images

Scripts and Codes

Products

E-Books

SWiSH BB

SWiSH Templates

SWiSH-DB Newsletter
Subscribe to our newsletter : GO
  Partners / Affiliates

   Free image hosting
   Web Design Pakistan
   Swish Templates
   SWiSH Climax
   Talkfreelance Community
   Template Desire
   Lite boards
   Script Sector
   GimpTalk
   13dots
   Idea Designs
   PHP Cafe
   Sposatoettore
   Free swishmax templates
   Swishzone

Manage your site with Flax Article Content Management System
Descriptive drop down menu tutorial
Category : SWiSH 2 | Level : Intermediate | Language : English
Ask Question | Read Comments | Post tutorial | Previous | Next

Web www.swish-db.com

Description:-

In this tutorial I’ll teach you how to make a drop-down menu. The steps that I am going to explain are very simple just the concept must be clear in your mind that what we are going to make and of what type. The outlook of the drop-down menu is like that:-

user posted image

Also swi file is attached below.

Explanation:-

1. Make a rectangle like the darkgreen rectangle in the above image.

2. Copy this rectangle and paste it. Now look the rectangles in the image over which the text is Menu 1, 2, 3,…” paste all the rectangles like these and don’t forget to change the colour into lite colour. You have to paste each rectangle one by one as I pasted.

3. Now covert each rectangle into button. Just not the main that is darkgreen in colour. Then you have to select the main button darkgreen in colour and then go into the "Action" tab and press "Add Event" then chose "On Release" then select "Goto Frame" so you will put "1" in that box, after it the action will be like that "Goto Frame 1".

4. This step is very important. Copy the first rectangle that we made in 1st step and paste it over the darkgreen rectangle. You must drag it to the bottom like this:-
user posted image

5. Move the rectangle that we have recently made in 5th step. You have to put “place” on the “0” frame then on 1st frame you will add “move”. After it you will have to leave an empty frame then on the next frame you will have to put again “move”.

6. Select the “preview frame” and hold the bottom line of the rectangle. Now stretch it according to the numbers of rectangle. Then you will have to re move it by selecting the second “move” duration. You will stretch this again to the normal size. Check out this image:-

user posted image

This one is stretched again to the normal size:-
user posted image

7. Put “stop” on the first frame and “11th” frame so the buttons that we are going to complete would stop at the 11th frame. See the image:-
user posted image

8. Now that’s the most important step. Select all rectangles and text, group them as sprite. Go into “sprite” tab and “check” the box for “masked” located near the “loop” option.

9. The rectangle that has been stretched already, is mask. We want to make a menu that when we press the main button then it will open some more buttons in it so we have to do something like this through which we can also close the menu whenever we want.

10. Select each button (in the image which are menu 1, 2, 3,…..). Go into the “action” tab of this button and press “Add Event” after it you would have some option so you have to select “On(Release)” and then “Goto Frame” then you have to put “11” in the box defined in this image:-

user posted image

11. Apply the same method defined in “11th” step for all the buttons name “Menu 1, Menu 2, Menu 3,….” In the image.

After that you would have a smooth drop-down menu. If you want to put “easing” then simply select the “move” action of the mask located at the bottom of the sprite. And put 2 in the box.

I hope that will be helpful!

regards

@Zahra


© 2002-2005 Flaxweb Network | Article Manager | Gimp Tutorials Library | RAD C++ Library | Free C/C++ Sourcecode |
Sites of interest : Web Design Blog | Swish Templates | Swishmax Ebook | Photoshop Templates | Gimp Tutorials | Text Forum | Make Money Online