print this article

Creating Buttons with SWiSHmax

Many animations are created around interactivity, and the most common interface to begin an animation or cause an action is a button. In this section we look at how to create a button in SWiSHmax.

Before doing the tutorial, understand that an interactive button is said to have multiple states, depending on how the user is interacting with the button. These states are:

• Up state. The default behavior of the button.
• Over state. The button when a mouse is placed over it.
• Down state. The button when it is clicked.
• Hit state. The clickable area of the button.

You don’t have to use every state with your buttons, but the more you customize these states, the more interactive your button will appear to be – basically the better understanding the user will have of what is happening.

To create a button in SWiSHmax:

1. Start a new movie.
2. Use the Tools to draw a box on the stage.
3. Click the Shape panel and give your button a name. In this example, the shape is called “Red Button.”
4. Select the Line pull-down menu, and select a line style to outline your button. Set the width of the outline in the field that appears, then use the color menu to select an outline color. You can change the Fill color of the button in this panel as well.
   
5. From the Modify menu, choose Convert > Convert to Button. Your object has now been turned into a button, and you will see a Button tab in the Objects panel.
6. Click the boxes next to “Has separate over state” and “Has separate down state.” (It is only necessary to set a separate Hit state if the area that should be clickable is not the same shape as the button you created. For example, if your button is text, but you want the spaces around and between letters to be clickable, you could set a separate Hit state and define a larger area as clickable.)
7. Take a look at the Outline panel. In it, you can see your Red Button object. Click the plus sign () next to the object view all the button states.
8. To set a new Fill color for the Over state, select the shape object under the Over State. SWiSHmax opens the Shape tab in the Objects panel. Select a new Fill color and a new line color if you wish.
   
9. To set a new Fill or Outline color for the Down state, select the shape object under the Down State in the Outline panel. SWiSHmax opens the Shape tab in the Objects panel.
   
10. Use the Shape tab to set new Fill and/or Outline colors.
11. Click the play button () in the icon menu across the top of the application to watch your animation. Place your mouse over the button, and click the button to preview the Over and Down states.
12. Now it’s time to add the interactivity that will make your button actually do something when clicked. Some of the possibilities include:
    • Jumping to a specific frame in the animation.
    • Stopping or starting the animation.
    • Playing a sound.
    • Opening a Web page.

To apply interactivity you need to add a script to the button. Select Script from the Panels menu at the top of the application. The Script panel opens.

1. In the Outline panel, select the Red Button object (you want the entire button to be selected, not just one of the button states).
2. In the Script panel, click the Add Script pull-down menu . Then select Browser/Network > getURL(&hellip from the menu that appears. SWiSHmax places the code in the Script panel that will cause this action to occur. Below the code, you can see fields for the Properties you need to provide.
3. In the URL field, type or paste the exact Web address you want the button to open. Remember to include the http://. For example: http://www.google.com
4. The Window field allows you to target how the Web page opens. You don’t need to select anything if you want the page to open in the same browser window the user is currently using.
5. Click the play button () in the icon menu across the top of the application to preview your animation. When you click your button, the Web page should open in a browser window if you have an active Internet connection (even though you haven’t yet put the SWF onto your Web site).

> READ NEXT ARTICLE: Saving an SWF using SWiSHmax

• This was a VERY helpful tutorial on making interactive buttons in Swishmax. I would like to take this one step further, if it’s possible. Can you assign an effect to a state (Over state to be precise)? I’m wanting the button to jump (or any other effect the user chooses) and come to rest where it was when the mouse pointer in moved over it. Any help you can give is very much appreciated.

  Posted by  on  01/23  at  11:43 PM

You must be registered (free) in order to post a comment.