Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this


  1. 1. Tutorials • Downloads • Newsletter • Bulletin Board • Contact Us Free Flash Tutorials Members • Business • Web Design • Home • Search 100 Flash Tutorials 360-Degree Mouse Button Create Animated Tutorials Experts Show You How: Instructional Training for cellphones, PDAs, MP3 players MicroNav by Record your PC and create animated Flash Videos, Tips and Shortcuts Interlink Electronics tutorials with voice/audio. Flash Tutorial - Creating simple buttons 005 Beginners MX Flash Compatibility: For Flash MX 2004 click here Written by: Phil Length: 1200 This tutorial is designed for people who have little Experience of using Flash. The aim of the tutorial is to be able to create your own buttons, how to Align objects to the stage and create layers. States of the button The button can change it's appearance according to what 'state' it is in. There are four states: Up, Over, Down and Hit. 1. Up: Is when the mouse pointer is not over the button. 2. Over: Is when the mouse pointer is over the button. 3. Down: Is when the mouse pointer is over the button and the mouse button is down. 4. Hit: Is an invisible area of the screen. This area defines when the mouse pointer is 'over' the button or not. Roll your mouse over the button below and click to see the Up, Over and Down states. You can't see the Hit area as it is invisible. The button has no actions so does not do anything. My Example: Download the Flash File Beg 005a Step one: Setting up the Document 1. Set the size of the Flash Movie: Modify > Document The movie above is: 200 x 130px Note: You can either have a Flash movie which contains a number of buttons or you can have a Flash movie that is a single button and no more. Flash Tutorial: Simple Buttons - 1 of 5
  2. 2. A Flash movie with several buttons. File size: 400 x130px A Flash movie which is a single button. File size: 105 x31px Step two: Creating the button symbol To create a button you need to have a symbol. 1. Go to Insert > New Symbols (or hit CTRL+F8 on your keyboard). 2. The "Symbols Properties" dialogue box will open. Select button. 3. Name it button 1 and select 'button' as the behavior. 4. Click OK. You will go to a new stage, called button 1. In this stage, you will have four frames: Frame 1 - Up Frame 2 - Over Frame 3 - Down Frame 4 - Hit Step three: Creating the up state 1. Double click on the layer label and name the layer 'background'. 2. In the background layer, frame 1 'Up', draw a rectangle shape with the rectangle tool: When you have finished drawing your rectangle, make sure you go back to the Arrow tool , otherwise you will draw more rectangles by mistake. 3. With the Arrow tool , single click on the rectangle fill and select any colour you may want with the Fill Color tool: 4. You need to align your rectangle to the centre of the stage using the Align panel. Go to Window > Align. 5. Double click on the coloured fill of the rectangle. This should select both the fill and the stroke (outline). Fill and stroke highlighted: Both are dotty! Warning: If the fill and stroke are not both highlighted you will only move part of your rectangle. Often the stroke will get left behind, even if the stroke is white, and cannot be seen, be careful not do to do this, as this Flash Tutorial: Simple Buttons - 2 of 5
  3. 3. 'debris' may cause problems latter. 6. In the Align panel click the 'To Stage' button: 7. With the rectangle selected click on the Align Vertical centre button: 8. Click on the Align Horizontal centre button: 9. Click on the insert layer button to create a new layer and name it 'text'. 10. In the up frame (frame 1)of the Text Layer use the Text tool to type 'Click Here' (or whatever else else you might want your button to say). 11. The text must be set to Static. To check this open the Property panel: Window > Properties. With the text still selected the panel should say: . If it does not, use the drop down arrow to select static text. 12. Select your text with the Arrow tool: 13. In the Align panel the 'To Stage' button should still be selected (it will be white, not gray, see picture below). 14. Click on the Align Vertical centre button: 15. Click on the Align Horizontal centre button: Step four: The over state 1. Right click in the 'over' frame in the 'text' layer and select: Insert Keyframe You will notice the play head has moved to the 'over' frame and your text from frame 1 is copied to the over frame. 2. Change the text to bold by going to Text > Style > Bold. 3. You may need to align the text centre of the stage again. 4. Right click in the 'over' frame in the 'background' layer and select Insert Keyframe. 5. Change the rectangle to another colour by single clicking the fill colour of the rectangle (only the fill will be dotty). Select a colour by clicking on the Fill Color tool: Step five: The down state Do the same as step three by: 1. Inserting new Keyframes in the Down frames of both layers. Flash Tutorial: Simple Buttons - 3 of 5
  4. 4. Your timeline should look like this: Note the keyframes - black dots. 2. • Change the colour of the rectangle and/or... • Change the colour or the look of the text. Step six: Placing the button on the main stage: 1. Click on the Scene 1 Tab . You will return to the main stage, which should be empty. Don't panic you haven't lost your symbol. 2. Click on Window > Library. Your symbol will be in the library. 3. Drag your symbol onto the main stage. Step seven: Actions You now have a new button which you will need to add actions to so that it does something. See previous tutorial for details of how to do this: Simple Links The hit state The hit area is normally the same as the rectangle. You do not need to create this unless the hit area is different to the original rectangle you created on frame one. Note: If your button does not have a solid background (in this case a rectangle) but only text, you will have to create a rectangle (or other solid shape), in the hit area frame. Otherwise when the mouse pointer goes over the gaps between the letters, the button will go back to frame one: The over state. Very slowly move the mouse over button 1 below and you will see the problem. My Example 2: Download the Flash File: Beg 005b Move the mouse slowly over the Buttons to see the difference. Button 1 is not stable and moves between states with small movements of the mouse. Button 2 is stable. Button 2 has a rectangle in the 'Hit' frame. This is not visible in the movie, but controls the 'Up', 'Over' and 'Down' states. If you are having difficulty understanding this, download the movie and look inside the symbol at the Hit Frame. To look inside the symbol double click it on stage. Have fun with your buttons, make them wild and wonderful! If you have not found this tutorial useful, help us improve by telling us why: Forum previous tutorial next tutorial • 10295 visitors to this page since Jan 04 • Home • Tutorials • Downloads • Newsletters • Bulletin Board • Contact Us • • Members • Business • Web Design • Other • Top of Page • Flash Tutorial: Simple Buttons - 4 of 5
  5. 5. All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted. Flash Tutorial: Simple Buttons - 5 of 5