Unit 21 - Creating a Button in Macromedia Flash

Transcription

1 Unit 21 - Creating a Button in Macromedia Flash Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document Using both the Sketch Diagrams and House Style documents as your guide, this tutorial will show you, step-by-step, how to create a basic Button Bar using Macromedia Flash. While this tutorial details the creation of a specific Button please feel free to substitute any of the settings for your own should you feel confident enough to experiment. That said, your Button should match the design detailed in your Sketch Diagrams. Creating the basic shapes that make the Button 1. Open Macromedia Flash. Start > Programs > ICT Room > Macromedia Studio 8 > Flash 8 2. Click on Flash Document below the Create New option 3. Using the information detailed in your design change the size of the document (e.g. the white area) so that it approximately matches the size of the Button you are wanting to create. This can be done by pressing the Size button on the Properties pane at the bottom of the screen, and then inputting a WIDTH and HEIGHT. For this example input a size of 135 Width and 44 Height. Unit 21 - Creating a Button in Macromedia Flash Page: 1

2 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 Group it ([Ctrl] + [G] or Modify > Group). 6. With the rectangle selected, copy it ([Ctrl] + [C] or Edit > Copy) and then paste it ([Ctrl] + [V] or Edit > Paste in Center). 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. Unit 21 - Creating a Button in Macromedia Flash Page: 2

3 10. Choose a font colour of WHITE. 11. Use the Selection tool to align the textbox approximately in the centre of the RED rectangle. The Button should now resemble the following example: 12. Select all the items that make up our Button by clicking either [Ctrl] + [A] or Edit > Select All. 13. Right-click anywhere on the selected items and choose Convert to Symbol from the available options. Input a sensible name for the Button (in this case Feedback ) and make sure the type of symbol being created is set to Button. 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 both over it and the Button is pressed. Unit 21 - Creating a Button in Macromedia Flash Page: 3

4 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. We have already created the UP state, so right-click on the space below OVER and choose Insert Keyframe from the available options. This copies the UP state ready for you to edit. Unit 21 - Creating a Button in Macromedia Flash Page: 4

5 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 (make sure the BLACK RECTANGLE is NOT selected). Press [Ctrl] + [G] or choose Modify > Group to group the items. 18. Right-click on the space below DOWN and choose Insert Keyframe from the available options. The OVER state is copied ready for you to edit. 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: (Each press of the [Arrows] keys equals 1 pixel) 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

6 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 sensible 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. Remember to save the actual working file by clicking File > Save As and saving it to your Unit 21 folder. Unit 21 - Creating a Button in Macromedia Flash Page: 6