This simple tutorial demonstrates how to add a separate Over state to a button and then apply a green glow filter.

The following screencast shows how to make this button. (more…)

Recently I found myself modifying the supplied component buttons to produce sound on/off and play/pause buttons. Although this is easy enough to do, I thought it would save everyone some time if I included these as standard component buttons.

As can be seen in the above example, each type of button is duplicated to allow a default state of on or off. In the example, all of the buttons call the same event handling function (Events) which displays the calling button name and the current button state within the scrolling text box. (more…)

The radio button component is one of the more popular components supplied with SWiSH Max2 and SWiSH miniMax2. A radio button is useful when a user needs to select only one choice from a number of alternatives. This article demonstrates how to use the radio button component.

Click to Download – radiobutton.swi

The radio button component can be found in the Buttons > Radiobutton component category. To use this component, drag the required number of the Radio button components onto the stage. In the Parameters panel for the first radio button, change the Label to “Choice 1″, Group Name to “myChoice” and the Value to 10. If you wish you can also change the color of the dot that shows when the button is selected.

(more…)

The Component Buttons supplied with SWiSH Max2 (and miniMax2) provide an easy way to add buttons to your movie. Quite often these buttons are used in a toggle mode – for example to play or pause a movie. In this case it is useful to change the text (or icon) displayed for each button state. Read on to find out how.

To toggle the Button text displayed

The following steps apply to the Button_ or any of the fancy button components:

1. Drag the Component > Buttons > Pushbutton > Button_glossy_circle to the stage.
2. Select the Component’s Parameters Panel and set the Label Type parameter in the Size and Color Scheme group to the default value “Text”.
3. Set the Toggle? parameter to true.
4. Set the Label parameter to be “Play” this is the label that is displayed when the button is in the off state.
5. In the Event Notification group, ensure that an Event Function “Events” has been defined – this is done by default for Button_ or other fancy buttons.
6. Click on the stage away from the button to select the parent object of the button. In the Script Panel (for the parent object) create the Events() function as shown below. Copy all the Script and Paste it ito the Script Panel. Note: This example assumes that the button that is being modified is named “Button_Play”. For the example ‘Button_glossy_circle’ select the Properties Panel and rename from “Button_glossy_circle” to “Button_Play”.
7. Additional code could be added to the Events function to actually start and stop the target movie. For the sake of demonstration also drag Component > Progress > ProgressCircle to the stage. The button action will start and stop the progress circle rotation.

onSelfEvent (load) {
    ProgressCircle.stop(); // initially stop the target movie
}
function Events(n,v) {
    // If a component has "Events" defined as its event function,
    // then this function will be called when the component changes state.
    // n is the name of the component, v is the new value.
    // if the component is a toggle button, v will be true or false
    // representing the state of the button.

    if ("Button_Play" == n) {
        if (v) {
            // button says play
            Button_Play.label.text = "Pause";    // show button now as pause button
            ProgressCircle.play();    // play the target movie
        } else {
            // button says stop / pause
            Button_Play.label.text = "Play";
            ProgressCircle.stop();    // stop the target movie
        }
    }
}

To toggle the Button icon displayed

1. As per the steps above start with a new movie and drag a Button_glossy_circle Component.
2. Set the Toggle? parameter to true.
3. Change Label Type in the Size and Color Scheme group to ‘Shape’.
4. Expand the button in the Outline Panel and delete the Arrow object in the icon_holder movie clip.
5. With the icon_holder selected in the Outline Panel, drag the Control_play and Control_pause controls from the Component > Shapes > 2D > Shapes and Icons group. This will place a play object and pause object into the icon_holder movie clip.
6. Select the pause object. In the pause object’s Properties Panel set the Target checkbox and adjust the fill color to be white. In the Transform Panel, set the _x and _y position to be 0,0. Set the _xscale and _yscale to be 300.
7. Repeat the above procedure for the play object.
8. Select the pause object again in the Outline Panel, then click on the Script (or Actions) Panel and copy/paste the following script:
onSelfEvent (load) {
_visible = false;
}
9. In the Event Notification group, ensure that an Event Function “Events” has been defined – this is done by default for Button_ or other fancy buttons.
10. In the script for the parent object (of the button), define the function below. This example assumes that the button that is being modified is named “Button_Play”. For the example ‘Button_glossy_circle’ select the Properties Panel and rename from “Button_glossy_circle” to “Button_Play”. Note that additional code could be added to the Events function to actually start and stop the target movie. For the sake of demonstration also drag Component > Progress > ProgressCircle to the stage. The button action will start and stop the progress circle rotation.

onSelfEvent (load) {
    ProgressCircle.stop(); // initially stop the target movie
}
function Events(n,v) {
    // If a component has "Events" defined as its event function,
    // then this function will be called when the component changes state.
    // n is the name of the component, v is the new value.
    // if the component is a toggle button, v will be true or false
    // representing the state of the button.

    if ("Button_Play" == n) {
        if (v) {
            // button says play
            Button_Play.icon_holder.pause._visible = true;// show button now as pause button
            Button_Play.icon_holder.play._visible = false;
            ProgressCircle.play();    // play the target movie
        } else {
            // button says stop / pause
            Button_Play.icon_holder.pause._visible = false;// show button now as play button.
            Button_Play.icon_holder.play._visible = true;
            ProgressCircle.stop();    // stop the target movie
        }
    }
}

Done! You can download Sample SWIs here.

Enjoy!