[Previous] [Main] [Next]

How to Make an Animated Button

This is a step-by-step tutorial on how to create a simple animated button using a Sprite. The .swi file for this tutorial is "buttondemo.swi" in the Samples folder.

Buttons can be created using the 'Insert Button' icon on the 'Insert' Toolbar or by converting an existing object into a button by selecting Modify | Convert to Button on the main Menu. This second option is the method illustrated in this tutorial.

1.Create a red circle using the 'Ellipse' vector tool from the Toolbar on the 'Layout' Panel (hold down the Shift key on your keyboard while you drag out the shape to make a circle)  
 
2.On the Main Menu bar, select Modify | Convert to Button  
 
3.Open the 'Outline' Panel, it should look like this:  
 
button_outline1.png  

4.   Select the ellipse in the Over State and press Control+C to copy, and Control+V to paste a duplicate into this Over State
   Your 'Outline' Pane should now look like this:

button_outline2.png  

5.   Open the 'Shape' Panel and select "None" for the Fill type, and then right-click on the Ellipse in the 'Outline' Panel and select Convert | Convert to Sprite. Your 'Outline' Panel should now look like this:

button_outline3.png  

6.   Double-clicking on the Sprite in the 'Outline' Panel will open the 'Timeline' Panel showing the Timeline for the Sprite Object. Your Timeline should look like this:

button_timeline_sprite1.png  

7.   On the Timeline, double-click on Frame 10 in the 'Ellipse' object row. This will insert a Move Effect.
   Your Timeline should look like this:

button_timeline_sprite2.png  

8.   Double-click on the Keyframe at the end of the Move Effect. This will open the 'Move Settings' dialog box. In this dialog box, select Scale | Resize to Scale | 300% and then Alpha | To Transparent. Press the button_play_scene1.png 'Play Scene' button on your 'Control' Toolbar to preview your Sprite

9.   On the 'Timeline' Panel, select the Scene 1 row and press 'Play' to see how the mouseover works to this point. Move the mouse over your red circle. You should see a black circle radiating out from the red circle and fading out

10.   Open your 'Outline' Panel to finish editing your button. Select the ellipse in the Over State, then open the 'Shape' Panel and change the color to a bright green. Then go back to the 'Outline' Panel and select the ellipse in the Down State, changing the color to blue in the 'Shape' Panel

11.   You are finished. Press the 'Play' button on the 'Control' Toolbar to test your button

12.   Save your Movie as "mybutton.swi"
















 
 
[Previous] [Main] [Next]