Change your Mouse Cursor to a Pointer in Flash, well actually.. ActionScript 3.0

TAGs: 1 Comment

Posted By: eligeske on in Flash

Recently I have been making a new tool for us web developers out there. (I’ll release it in the next couple weeks)  Part of this new tool I needed to use a flash movie to access some data in the OS which JavaScript cannot access……yet. Since I have not dabbled in any ActionScript in several years it was pretty interesting to see the changes ActionScript 3.0 has brought about.  One of those is the ability to have many mouse pointers styles.  Pretty painless actually.

What I will be showing you is how to make a flash video, load it into an HTML page, and when you hover over it the cursor turns into a pointer.  Building blocks…building blocks.

Quick Overview:

  1. We make the flash file that we will hover over in the html.
  2. We will make the ActionScript for the flash file.
  3. I’ll show you the html to test this, in case you didn’t know.

First let’s open up Flash and create a new fla file and name it something.  Now for me I set my stage to be 1px x 1px, which is what will set the actual size we want in the html.

Secondly. The ActionScript is made right on the stage, or without selecting an object.

ActionScript: (See Code)

At the top we call in the library references we will be using for MouseEvents, import flash.events.MouseEvent.

Then we add the actual method to turn the cursor into a pointer, or as flash would like to call it.. a “button”. Mouse.cursor=”button”.

import flash.events.MouseEvent; // for library for mouseevents
Mouse.cursor="button"; // change cursor to pointer when over top the flash movie


Ok, Let’s take a look at that html.

  2. <title>Mouse Cursor</title>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  5. <style type="text/css">
  6. #btn { height: 30px; width: 30px; border: 1px solid red; background: red; }
  7. </style>
  9. </head>
  10. <div id="btn">
  11. <object width="30" height="30">
  12. <param name="movie" value="test.swf">
  13. <embed src="test.swf" width="30" height="30" mode="transparent"> </embed>
  14. </object>
  15. </div>
  17. </body>
  18. </html>

Once you run your flash file it will output an swf. This is a shockwave file, and what you actually use in most websites if it isn’t video. Those are flv’s.  There is a certain way to embed these into your html.

The object tag and also using the two different methods to cover cross browsers. Set the height and width here to cover your div.  That way it acts somewhat like a button. If you have everything correct it should appear as the pointer.

If you have any issues, feel free to drop a comment.



One Response to "Change your Mouse Cursor to a Pointer in Flash, well actually.. ActionScript 3.0"

  1. Elijah says:

    Hello! I couldn’t find an e-mail link anywhere so I guess a comment will have to do. Just want to say how helpful this post was. It can be a nightmare to find some super specific advice when you have a project to finish and you’re intent on completing it but this definitely exceeded my expectations; it was nice to stumble upon this website and get the job done.

    I read a forum topic elsewhere that mentioned how mouse-overs did not cause the cursor to react (i.e. it did not change from arrow to pointer) when hovering over .swf files. A helpful reply later and someone had manually adjusted the flash file to fix this; they mentioned that they had changed a button to HIT state only. Do you have any more details on that? (http://www.justskins.com/forums/make-entire-swf-file-53623.html)

    Anyway, the site looks relatively new but at a glance it looks like a great resource: PLEASE, keep it running! And thanks again for the post.

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post