Mouse Over Effect

December 28, 2010

How To

How to create Mouse Over Effect.

To create a frame that will appear when the user moves the mouse over some item:

  1. Launch Flash Designer. Choose “Frame” > “Frame Size” to set movie dimensions (400 x 200).
  2. Choose “Text” tool and click on the frame. Type the text (for example “mouse over”) and click OK.
  3. Move the text to the top left edge.
  4. Choose “Frame” > “Frame Delay”. Check “Stop” and click OK. This will stop the movie at this frame.
  5. Choose “Frame” > “New” to add a blank frame.
  6. In the “Frame list” toolbox change the background to “Frame 1″. “Mouse over” text should appear on the new frame.
  7. Choose a rectangle tool and draw a rectangle on the frame. It will appear when you move the mouse over the text. You can change rectangle color by using “Item” > “Fill Color” command.
  8. Choose “Intro” > “Intro Animation”. Select “Fly” and click OK.
  9. Go back to the first frame (Frame 1). You can either select the frame from the “Frame list” toolbox or press “PgUp” key.
  10. Make sure “mouse over” is selected, if not choose “Select” tool and select it.
  11. Choose “Action” > “On Over”.
  12. Select “Go to Frame” and choose “Frame 2″. Click OK.
  13. Choose “Action” > “On Out”.
  14. Select “Go to Frame” and choose “Frame 1″. Click OK.
  15. Press F9 to preview the animation.
, , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

8 Responses to “Mouse Over Effect”

  1. kain Says:

    where do you see frame>frame delay? I am using flash cs5

  2. kain Says:

    I am trying to create 2 flash banners, one 728×90 and then one 728×300, the top section (728×90) stay same, i was to display this 728×90 banner but when they mouse over, it will display a second banner right underneath as if it were connected, same concept as found here

    http://www.adrime.nl/gallery/117/demo

  3. Rocket Spanish work Says:

    This is without question the highest quality content I’ve read on this topic. Excellent writing. Keep up the excellent work!

  4. Spanish Says:

    Great points raised as always. Excellent posts and excellent content as always. I’m Tweeting about this now!

  5. Tejas Ramakrishnan Says:

    found your site on del.icio.us today and actually favored it.. i bookmarked it and probably again to check it out some extra later ..

  6. Jalaja Sankar Says:

    Im a sucker for consumers who who post often, its definitely really tough to obtain all variety of observation any other way. Terrific work.

  7. Marcelo Towlerton Says:

    Good post.I’m enjoy it.Thank you!

Trackbacks/Pingbacks

  1. Tweets that mention Mouse Over Effect | Flash tutorials | Flash video tutorials | Flash actionscript | flash animation | flash menu | flashconf.com -- Topsy.com - May 17, 2010

    [...] This post was mentioned on Twitter by J. Anna. J. Anna said: Flash Tutorial: : Mouse Over Effect http://www.flashconf.com/how-to/mouse-over-effect/ [...]

Leave a Reply