Making A Slide Out Menu With Easing, SWISHmax-- Beginner Options

[browndrake]

Slide Out Menu Tutorial

Here is what we are making (Scroll Over To See Working)



This tutorial was written for SWISHmax. The swi is from SWISHmax build 2004.08.12
It is written for beginners, but requires some basic knowledge of the layout of the tools in SWISHmax.

1. Before we begin working in SWISHmax we need to do a little prep work.

A. Download the zip file from link, at the bottom of the post, open the swi and see what it entails. You can use it as a step by step illustrated guied with this tutorial.

B. You will need to determine what colors and font you want to use in your menu. // I am using the CluffHmkBold font in red with the buttons a lineal gradient of gray.

C. You need to determine how many links you want in your menu, and write down their destinations. //We will be making four in the tutorial.

D. On a blank piece of paper, sketch out your menu. Label the size and position of the buttons. See example.
I have drawn the menu button 125x75 pixels, and each link button 100x50 pixels. I put a 25 pixel space between each menu item and a 50 pixel border around the whole menu. (we will use this sketch to place our buttons later)

2. Start SWISHmax. In the movie tab, set the width to 725, height to 175, and frame rate to 30. (We get the dimensions from the sketch we made earlier).


3. A. Using the rectangle tool, draw a rectangle approximately 125x 75 pixels.
B. In Shape tab set desired colors. // I have chosen a 0 pixel blue line and a solid fill of light gray.
C. In the Transform Tab, set anchor point to top left
D. Set W to 125 and H to 75
E. Set X to 50 and Y to 50.


4.
A. Click the Inset Text button.
B. In text area or the Text Tab, type: MENU
C. Use drop down menu to select desired font. // I am using CluffHmkBold
D. Click on color picker to choose the desired font color // I am using red
E Choose font size 26


F. In the layout screen, drag the MENU text and drop it in the center of the rectangle.

5. A. In the Outline Panel, hold CTRL while click both MENU and shape.
B. Right click-->group-->group as sprite.
C. Name sprite MENU.

6.
A. Using the rectangle tool, draw a rectangle approximately 100x 50 pixels.
B. In Shape tab set desired colors. // I have chosen a 0 pixel blue line and a lineal gradient fill of gray.
C. In the Transform Tab, set anchor point to top left. (The following sizes/coordinates we can get from our sketch we made at the beginning).
D. Set W to 100 and H to50
E. Set X to 200 and Y to 75.
[

7.
A. Click the Inset Text button.
B. In text area of the Text Tab, type: LINK 1
C. Use drop down menu to select desired font. // I am using CluffHmkBold
D. Click on color picker to choose the desired font color // I am using red
E. select font size 20
F. In the layout screen, drag the LINK 1 text and drop it in the center of the new rectangle.

8.
A. In the Outline Panel, hold CTRL while you click both LINK 1 and shape.
B. Right click-->group-->group as button.
C. Right click-->group-->group as button.
D. In Button Tab, Click check box, Has separate over state.

E. In Outline Panel, click plus sign next to button.
F. Click on the shape under the Over State.
G. Change the fill to solid // I used solid gray.
H. Click on the LINK 1 text, under the Over State.
I. Change the color. // I used black.


9.
A. Click the minus sign, next to button, to collapse it.
B. Right click on the button-->group-->group as sprite.
C. Name sprite link1.
10.
A. Right click on link1 sprite--> Copy Object
B. In Layout Panel, right click on the screen to the right of the MENU button (about where the second link button should go)-->Paste Here
C. Repeat step 10 B. a little farther to the right for the third link, then again for the fourth.
D. Click on link2 sprite in the Outline Panel, then, in the transform tab adjust its placement. (using info from our sketch) X 325, Y 75
E. Repeat for links 3 (X 450, Y 75) and 4 (X 575, Y 75).
It should now look like this.


11. We now have all of the menu buttons. We need to individualize them and then add the scripting.
A. Change the names of the Copied link1 sprite to link2 (by double clinking the sprite in the outline panel and then typing the name in the sprite tab)

B. Expand link2 sprite and expand the button within.
C. Change the texts, within both button states, to LINK 2
D. Repeat above steps for link3 and link4, renaming sprites and changing button texts appropriately.
E. Click and hold on the MENU sprite, in the Outline Panel, and drag it to the top of the stack. (so it is above all of the link sprites.)

12 Now we will add the script to our menu. We will start with link4 and move down to link1

12 a. Expand the link4 sprite in the Outline Panel, and select the button
Select the Script Tab
Add Script-->events-->Button-->on(release)
Add Script-->Browser/Network-->getURL(…)
In the bottom of the Script panel, type complete URL of the first link.
(see illustration)

Collapse the sprite by clicking the minus sign next to it.

12 b. In the script panel, place a stop on frame one of the link4 sprite , to keep it inactive until called.
Add Script-->events-->frame
Add Script-->Movie Control-->stop

12 c. We will use easing to move the button sprites in and out. The following is script to open the menu.

Add Script-->events-->frame
At bottom type 2 for frame number and check the “after events for placed objects‿ checkbox.

Add Script-->statements-->name=expre;
At bottom, click drop down arrow for name and select _x
Click operator arrow and select subtract.
In bottom box enter 575 //this is the x coordinate where you want your link to be when open (where it now is in the layout panel (you can check it in the transform tab to be sure,or on the SKETCH))

Add Script-->statements-->name=expre;
At bottom, click drop down arrow for name and select _x
Click operator arrow and select multiply.
In bottom box enter .8 //this is the easing speed

Add Script-->statements-->name=expre;
At bottom, click drop down arrow for name and select _x
Click operator arrow and select add
In bottom box enter 575 //this is the x coordinate where you want your link to be when open (where it now is in the layout panel (you can check it in the transform tab to be sure, or on the SKETCH))

Add Script-->events-->frame …At bottom type 3 for frame number and check the “after events for placed objects‿ checkbox.
Add ScriptàMovie ControlàgotoAndPlay(frame) At bottom type 2

You should now see this:

12 d. Repeat steps 12a-12c for sprites link3, link2, link1.

NOTE!! We want link4 to appear first then 3 then 2 then 1. So, we are going to add 3 frames of delay to each subsequent sprite. BE SURE to use the proper X coordinate!

We still put the stop on frame one of each link sprite.
For link3 we start the easing on frame 5.
For link2 we start the easing on frame 8.
For link1 we start the easing on frame 11.

13a. We will now make the script for closing the menu. This time we will start with link1 and move up. (the script on each sprite, for closing, is identical)

Add Script-->events-->frame
At bottom type 13 for frame number and check the “after events for placed objects‿ checkbox.

Add Script-->statements-->name=expre;
At bottom, click drop down arrow for name and select _x
Click operator arrow and select subtract.
In bottom box enter 50 //this is the x coordinate where you want your link to be when closed.

Add Script-->statements-->name=expre;
At bottom, click drop down arrow for name and select _x
Click operator arrow and select multiply.
In bottom box enter .8 //this is the easing speed

Add Script-->statements-->name=expre;
At bottom, click drop down arrow for name and select _x
Click operator arrow and select add
In bottom box enter 50 //this is the x coordinate where you want your link to be when closed.

Add Script-->events-->frame At bottom type 12 for frame number and check the “after events for placed objects checkbox.
Add Script-->Movie Control-->gotoAndPlay(frame) At bottom type 13

· link1 script should now look like this


13 b. Repeat step 13a for sprites link2, link3, link4. REMEMBER this time the script is exactly the same for each sprite.

14 Now we will add script to the menu sprite. This is what will tell the menu to open

A. Click the menu sprite in the Outline Panel
B. Select the script tab
C. Add Script-->events-->Button-->on(rollOver)
D. Add Script-->Movie Control-->gotoAndPlay--> gotoAndPlay(frame)
E. At the bottom, click the drop down arrow to the right of target and select link1
F. Next to frame type 2
G. Repeat steps 14D-14F, three times, changing only the target, to link2, link3, link4.

15. Now we need to make a closer for the menu.

A. Select the Layout Tab, so that you can see the menu so far.
B. Select the bezier tool (for now set line to 0 and fill to any color of solid, other than your background color)
C. Draw a box around the menu, starting a couple pixels to the left of the MENU box (If you hold shift while doing it, it is easier to draw straight lines. Also, drag the tool to each corner and click before turning and going on.) DON’T close the box -- It should now look like this


D. When the box is almost closed, turn straight towards the left side and draw all around the outside edge of the movie. When you get back to the left side of the menu box, turn towards where your first point is and close the shape. If done properly, it will fill with the color you selected. See example


E. Select the Reshape tool and drag the points (left of MENU) so that the shape is closed. See illustration.

F. In the Shape tab, change the line to None.
G. Click on the fill color and change and the Alpha to 0, then click done.
H. Enter the name: closer

16. Right click the closer shape in the Outline Panel--> convert-->convert to sprite.



17. Now to add the script to the closer. Expand it and put the following code on the closer shape, not on the sprite.

A. Click the closer shape in the Outline Panel
B. Select the script tab
C. Add Script-->events-->Button-->on(rollOver)
D. Add Script-->Movie Control-->gotoAndPlay--> gotoAndPlay(frame)
E. At the bottom, click the drop down arrow to the right of target and select _parent.link1
F. Next to frame type 13
G. Repeat steps 17D-17F, three times, changing the target and the frame, to _parent.link2 and frame 10, _parent.link3 and frame 7, _parent.link4 and frame 4.


We are almost done. YEA!!! Only two things left to do!

18 Select each link sprite, one after another, and change each of their X coordinates to 50. (while sprite is selected, click transform panel to adjust x position)


19. The last step is to make it so the closer sprite is only there when we want it there

A. Select closer sprite in the Outline Panel.
B. Select script panel
C. Add Script-->events-->Frame-->onload
D. Add Script-->statements-->name=expre;
E. At bottom, click drop down arrow for name and select _visible
F. In the bottom box put 0

20.
A. Expand the closer sprite in the Outline Panel, and select the closer shape
B. Select script panel, and click on the bottom script there.
C. Add Script-->statements-->name=expre;
D. At bottom, click drop down arrow for name and select _visible
E. In the bottom box put 0

21.
A. Select menu sprite in the Outline Panel.
B. Select script panel, and click on the bottom script there.
C. Add Script-->statements-->name=expre;
D. At bottom, click drop down arrow for target and select closer.
E. At bottom, click drop down arrow for name and select _visible
F. In the bottom box put 1

Attached File(s)

 menutut.zip ( 255.3K ) Number of downloads: 5114

 

[Winblad]

Overall, this works fairly well unless you swoop your mouse quickly outside the Closer Panel, which leaves the exploded menu still showing. Additionally, this script example doesn't allow execution without a Closer Panel, for situations where one might want additional menu buttons nested closer together and simply have the mouseout function outside the Outline Panel activate closing the menu.

The bottom-line: If you don't want to change anything and only want a few flyout buttons from a very basic menu, it'll work okay.

[Imbios]

Has very much interested this lesson, but unfortunately I can not download a script file, who can that can give this file with a script. In advance I thank.

[browndrake]

until the link is up, here is a link to the files

main link is back up, so I am taking this link back down.

[Imbios]

browndrake

Many thanks, you have very much helped me, and it on friendly, still time of thanks.

[Faakher]

very coooooooooooooooooooll

Thanks for share it

Faakher

[MAngeles]

Thanks

[osta90]

Thanks for share it

[photomaxcairo]

great tut,
tkanks alot

[infotechdata]

Great Tutorial,
Has anyone figured out how to make this animation work properly? I mean, how to keep the menu's from staying open when mousing over them too quickley?

B