Our Swish tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Swish Tutorials Scrolling Drop-Down Menu
Your Ad Here

Scrolling Drop-Down Menu


In the previous tutorial I taught you how to make a simple drop-down menu but in this tutorial I'll teach how to put a scroller in drop-drop menu so it would be a drop-down menu with scroller. First you have to learn a scroller then you have to combine the menu and the scroller. We are going to make this type of scrolling menu:

image 1

So lets get started.

Explanation:

Scroller:

1. Make a rectangle like this, we are going to use this red rectangle as mask in scroller:-

Click to enlarge
Click to enlarge

2. Make another rectangle over the red rectangle. Now look the image. In this you can see the navy blue rectangle its converted into button. Make one like this. Now Copy this navy blue rectangle that we have converted into button and paste it in sequence in which I pasted one by one. Then group the all navy blue buttons in one sprite. Remember don't group the red rectangle. In this image you can see the grey rectangle, that's for scroller so also don't group it with buttons, just group the buttons as sprite. Look the image:

Click to enlarge
Click to enlarge

3. Select this sprite and put "move" on its first frame in timeline. Double click on the "move" action and put "70" as "move up by".

4. Now on its "0" frame, put "place".

5. Draw 2 little rectangles for the scroll buttons. Now select the first one and go into its "action" tab. Select "Add action" then chose "On (press)" then press ‘Goto Frame" and select "previous frame" now uncheck the box "play". So it would stop. But for the next rectangle we will apply the apposite method. Look the image:

Click to enlarge
Click to enlarge

6. Select everything that we have made and group them all in one sprite. Go into the "sprite" tab and select "masked" option from there. Now on the "0" frame of the sprite, put "stop". See the image:

Click to enlarge
Click to enlarge

Scroller is complete.

Drop-Down menu:

1. Make a rectangle and we will use this one as mask so put "place" on its "0" frame in the timeline. Then put "move" and stretch the rectangle to down by then leave one frame empty and put "move" again an stretch this rectangle again to normal size like this:

image 6

2. Make a rectangle over the mask that is dark green in the above image and go into it "action" tab. Select "Add action" and press "Goto Frame" now put "11" in that box. Look the image:

image 7

3. Now select everything and group them in one sprite. Go into the "Sprite" tab and check the option for "Masked". Now on the "0" frame of the sprite, put "stop" and on "11" also put "stop".

Drop-down menu is complete.

Scroller with Drop-Down Menu:

1. Copy the scroller that we have made already.

2. Paste in the menu's sprite. Now fix it where you want the scroller to be located.

3. Select each button from the scroller and go into each button's "action" tab. Chose "Add Action" then click on " On (Press)" then press "Tell Target" you will get an option to select the specific sprite so the sprite where the function of menu is located, we will set the target. So you have to select other previous sprite. It means you have to select "../../" it will take you to the sprite where we have to maintain everything.

4. After tell target you have to select "On Frame" it means that you are ordering each button to go on the specific frame of the specific sprite so you have to put "11" in that box. You have to apply this method on every button of the scroller.

Check this image:

Click to enlarge
Click to enlarge

The drop-down menu with scroller is complete.

I hope that will be helpful!



Author's URL: Zahra Kha
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Swish Tutorials at FlashPerfection.com

Add comments to "Scrolling Drop-Down Menu"

Only registered users can write comment

No comments yet...