"Button" Animation

In this tutorial you will create a button that will change when you drag your mouse over it. You will learn how to:

  1. To launch the program double-click Alligator Flash Designer icon on the desktop.
  2. Click OK button if you are running Unregistered Version.
  3. Choose Blank Document in the Welcome dialog and click OK.
  4. Alligator Flash Designer main window should open with "Flash-1" document.
  5. From the Frame menu choose Frame Size command.
  6. Specify animation size. Put 200 as "Width" and 200 as "Height". Click OK to confirm.
  7. From the Frame menu choose Frame Delay command.
  8. Check "Stop at this frame" and click OK.

  9. Choose Frame > Insert and click OK to add Frame 2.

  10. Choose Movie > Add Master Frame to add Master Frame (1).

  11. From the Frame menu choose Background Color command.
  12. Color selection dialog should appear.
  13. Choose your favorite color. Press OK to confirm your selection.
  14. From the toolbox choose the "Ellipse tool"
  15. Click and drag to draw an ellipse. Center the ellipse with Edit > Align > Center on Page
  16. Press "Page Down" twice to go to Frame 2.
  17. From the toolbox choose the "Text" tool:
  18. Click left mouse button inside the ellipse.
  19. Text edit dialog should appear.
  20. Enter "Click me" in the edit box and click OK.
  21. Center the text with Edit > Align > Center on Page. You can also move the text by pressing arrow keys.
  22. Press Page Up twice to go to the "Master Frame (1)" or select it in the "Frame List" box.
  23. Make sure the ellipse is selected (handles visible). Select it with the selection tool if necessary.

  24. From the Action menu choose On Over command.
  25. In "On Over" dialog choose "Go to Frame", and select "Frame 2". Click OK.
  26. From the Action menu choose On Out command.
  27. In "On Out" dialog choose "Go to Frame", and select "Frame 1". Click OK.
  28. From the Action menu choose On Up command.
  29. In "On Up" dialog choose "Get URL or file".
  30. Type the link to your web site (or you can type "http://www.selteco.com"). The link must begin with "http://". Select "_blank" as the target to open the link in a new window. Click OK.
  31. Press F9 and observe your animation playing. Move the cursor over the ellipse.
  32. Press "Alt+F4" key to quit preview window.
  33. From the File menu choose Export Web Page command, click OK to leave default options.
  34. From the Save In dropdown list choose Desktop (or navigate to desktop using folder list).
  35. Leave default file name and click Save button to create Flash file.
  36. HTML page should popup in a new browser window.
  37. Activate Alligator Flash Designer minimized window and choose Exit command to quit the program. Click "No" in "Save changes" prompt dialog.