ComTech

Make a Mouse-over Button in Flash CS4

Need a button to switch frames or scenes?

  1. Open Flash CS4
  2. Draw a shape and select it. Next, right click on the object and name it My_btn. Make sure that it is a button symbol type.
  3. Click on your new symbol. Then in the properties panel, click where it says “< Instance Name >” and type My_btn.
  4. Go to the Library Panel and double-click on My_btn. This should open up a new window where you can edit your button. Notice that the timeline has changed now. Now, the timeline says “Up” “Over” “Down” “Hit”. This is where you edit how the button reacts to the mouse.
  5. Leave the “Up” event the same and copy the “Up” event frame and paste the frame in the “Over”, “Down”, and “Hit” spots. Now, go to the “Over” event and change the color of your button to anything that looks good to you.
  6. Choose Edit>Edit Document to return to the document
  7. Test the button by choosing Control>Test Movie It should be when you roll over the button with your mouse that it changes color and when you click on the button, it changes to your “Hit” color.

Now its time to make a button that is clickable:

  1. Now it is time for the code part. This code will make the button change positions in the timeline.
  2. Go to frame one and press F9(right click the keyframe->Actions or Window->Actions) to open the actions panel and put the following code:

    stop();
    import flash.events.MouseEvent;
    My_btn.addEventListener(MouseEvent.CLICK, CursorClick);
    function CursorClick(event:MouseEvent):void{
    gotoAndStop("2");
    }
  3. Create a new keyframe and draw something on frame two.
  4. Test your video and have fun!

Tips if you have errors:
1. note the symbol name “My_btn” in the library, properties instance, and where it appears in the script
2. note the frame # in the lines with a gotoAndStop command
3. be comfortable switching from editing a document and editing a symbol – note the differences in the timeline

Challenge:
Add a similar button to frame 2 that will return you to frame 1.

Try the following script in place of the one above and notice the differences in its behaviour:

stop();
import flash.events.MouseEvent;
My_btn.addEventListener(MouseEvent.CLICK, CursorClick);
My_btn.addEventListener(MouseEvent.MOUSE_OUT, CursorOff);
function CursorClick(event:MouseEvent):void{
gotoAndStop("2");
}
function CursorOff(event:MouseEvent):void{
gotoAndStop(1);
}

Example button navigation between frames in the same scene:
My_Story.fla
My_Story
[swf]https://comtech.snowotherway.org/files/2011/10/My_Story.swf, 400, 300[/swf]

Example button navigation between scenes:
control-movie-clip-3.fla
control-movie-clip-3
[swf]https://comtech.snowotherway.org/files/2011/10/control-movie-clip-3.swf, 400, 300[/swf]

Example button to start/stop an animated soccer ball:
enter-frame-3.fla
enter-frame-3
[swf]https://comtech.snowotherway.org/files/2011/10/enter-frame-3.swf, 400, 300[/swf]

Looking for help to embed swf objects in your blog? Look for and activate the WP-SWFObject plugin.

D. Sader

, ,