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 File | Samples | Tutorials Menu.
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. | Start a New empty movie (File Menu | New). 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 perfect circle)
|
|
|
| 2. | On the Main Menu bar, select Modify | Convert to Button
|
|
|
| 3. | After pressing the (+) icon next to the Button object, the 'Outline' Panel should look like this:
|
|
|
|
4. Open the 'Button' Panel and check the options for 'Has separate ... state' (over/down/hit)
5. 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' Panel should now look like this:
|
6. Open the 'Shape' Panel and select "None" for the Fill type. Give this shape a Line Width of "1" with a Line Color of Black, 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:
|
7. 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:
|
8. 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:
|
9. 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
'Play Scene' button on your 'Control' Toolbar then move your mouse over the Ellipse to preview your Sprite
| 10. | 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.
|
|
|
| Note: If you want the black circle to continually radiate from the red circle, open the Sprite panel and uncheck the option for 'Stop Playing at End of Sprite'
|
11. 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
12. You are finished. Press the 'Play' button on the 'Control' Toolbar to test your button
13. Save your Movie as "mybutton.swi"
|
|
|
|