Unit 21 - Creating a Button in Macromedia Flash (simplified) Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------ 1. Open Macromedia Flash. Start > Programs > ICT Room > Macromedia Studio 8 > Flash 8 2. Click on Flash Document below the Create New option 3. Input a size of 135 width and 44 height for the stage. 4. Create a RECTANGLE of 129 x 38 pixels You can fine-tune its size by clicking on the Padlock on the Properties pane to UNLOCK the dimensions of shapes so that you can freely input your own values. When the dimensions are unlocked the padlock will appear open (see left). When locked the padlock is closed and means that when you change one value (width or height) Flash will automatically adjust the other value to retain its original shape. 5. Choose RED for the colour of the rectangle and then click on Modify > Group this helps protect the rectangle from unwanted changes. 6. With the rectangle selected, copy it (Edit > Copy) and then paste it (Edit > Paste in Center). Unit 21 - Creating a Button in Macromedia Flash Page: 1
7. Double-click the original rectangle to enter EDIT MODE and change its colour to BLACK. Doubleclick anywhere on the grey area of the workspace to exit the EDIT MODE. 8. Move the BLACK rectangle to the BOTTOM / RIGHT hand-side of the workspace (e.g. the White area), and the RED rectangle to the TOP / LEFT hand-side. 9. Create a textbox over the RED rectangle and input the text required for the Button: Feedback Make sure the text is CENTRED in the textbox by clicking the Centre Align button on the Properties pane. Choose a standard font (Arial, Tahoma, Times New Roman, etc) and resize it so that the text fits neatly on the Button. 10. Choose a font colour of WHITE. 11. Use the Selection tool to align the textbox approximately in the centre of the RED rectangle. Unit 21 - Creating a Button in Macromedia Flash Page: 2
The Button should look similar to the following example: 12. Select all the items that make up our Button by clicking Edit > Select All. 13. Right-click anywhere on the selected items and choose Convert to Symbol. Input Feedback as the name for the graphic and select Button for the type. Click OK. The selected items are now grouped as a Button. The next step is to set the various states of the Button for when the mouse pointer is over it and the Button is pressed. Unit 21 - Creating a Button in Macromedia Flash Page: 3
Creating the Button states (Over and Down) 14. Double-click the Button to enter EDIT MODE. At the top of the screen you should see the various states: Up, Over and Down. 15. You have already created the UP state, so right-click on the space below OVER and choose Insert Keyframe. This copies the UP state ready for you to edit. Unit 21 - Creating a Button in Macromedia Flash Page: 4
16. Make sure the OVER state is selected and change the font colour to YELLOW. 17. Using the Selection tool, click anywhere on the grey area of the workspace to clear any selection. Press and hold the [Shift] key and then select the RED RECTANGLE and the TEXTBOX DO NOT select the BLACK RECTANGLE. Click Modify > Group to group the items. 18. Right-click on the space below DOWN and choose Insert Keyframe. The OVER state is copied ready for you to edit. Using the Selection tool, click anywhere on the grey area of the workspace to clear any selection. 19. Make sure the DOWN state is selected and then, using the [Arrows] keys on the keyboard, perform the following actions: Select the BLACK RECTANGLE and move it LEFT 2 pixels and UP 2 pixels. Select the RED RECTANGLE and move it RIGHT 2 pixels and DOWN 2 pixels. Your Button is now complete. 20. Double-click anywhere on the grey area to exit the Button EDIT MODE. Testing the Button Just to make sure you re happy with the Button you ve created you can test it before you save it. 21. Click Control > Enable Simple Buttons. 22. Click on the Button you ve just created to test it. If you re happy with the way that it looks/works then you must now export it for use in other applications. If you re not happy for some reason you can edit the Button further by double-clicking it and editing any one of the 3 states (UP, OVER and/or DOWN). 23. Click Control > Enable Simple Buttons once more to switch OFF the TEST BUTTON option. Unit 21 - Creating a Button in Macromedia Flash Page: 5
Exporting the Button Exporting the Button will allow you to use the Button in other applications such as Dreamweaver. 24. Click File > Export > Export Movie. The Export Movie dialogue box will open. 25. Select the correct folder to save your work to (Unit 21 > AO3) and input a name for the Button. Make sure Flash Movie (*.swf) is the Save as type and click Save. 26. The Export Flash Player dialogue box will appear. The only setting you may have to change is to JPEG Quality. Drag the slider to 100. Click OK. 27. Save the Flash file by clicking File > Save As and save it to your Unit 21 folder. Unit 21 - Creating a Button in Macromedia Flash Page: 6