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

eligeske — Thu, 05 Apr 2012 05:26:24 +0000

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:

We make the flash file that we will hover over in the html.
We will make the ActionScript for the flash file.
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”.
Code:

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.

Source code


<html>
<head>
<title>Mouse Cursor</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
	<style type="text/css">
		#btn { height: 30px; width: 30px; border: 1px solid red; background: red;  }
	</style>
 
</head>
<body>
	<div id="btn">
		<object width="30" height="30">
			<param name="movie" value="test.swf">
			src="test.swf" width="30" height="30" mode="transparent"> </embed>
		</object>
	</div>
 
</body>
</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.

eli geske » Flash

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