This is the end result:

Tools used in this post

• Flash CS3
• Illustrator
• Eclipse

These tools are all optional and not needed to follow the post

The pointer

First we need graphics for the pointer. If you import graphics from Illustrator there are a couple of things that are good to know.

• Changing all the lines to fills will prevent the image to look funky when resizing it. (Object, Path, Outline Stroke in Illustrator)
• If you’ve got text in the graphics you’ll want to outline that. Right click (ctrl click on the mac) and choose “Create Outlines”.
• If you import the graphics instead of just dragging it in to flash you’ll get a “incompatibility report” if something is wrong with the illustration.(File, Import, Import to Library…).

When we have our graphics, link it to a class! While we’re at it, let’s create a document class for the main time line as well. Now we don’t have to use the flash code editor at all and can use our favourite IDE instead (Eclipse in my case).

Let’s code

In our document class we first have to instantiate the cursor class and add it to the scene.
// in a good IDE, these two lines add themselves
import flash.display.Sprite;
import src.Cursor;
// our document class pedagogically named "DocumentClass"
public class DocumentClass extends Sprite
{
// Declarations go here
public var cursor:Cursor;
// And Constructor here
public function DocumentClass():void
{
// instantiate the cursor
// and add it to the scene
cursor = new Cursor();
addChild(cursor);
}
}
This is how it looks if we run the application now.

As seen above the cursor graphics is visible at top left even though we do not need it. Right now it is just littering the scene. Let’s make it go away.
cursor.visible = false;
And let’s hide the mouse cursor as well.
// We need this import
import flash.ui.Mouse;
// then hide it like this.
Mouse.hide();

As soon as the mouse enter the scene we want the cursor to be visible again. And when it leaves we have to make invisible. Otherwise it will just lie and clutter the scene at its last registration point. So, two new events:
// needed imports
import flash.events.Event;
import flash.events.MouseEvent;
// The events
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE, mouseLeave);
// The first function
private function mouseMove(e:MouseEvent):void
{
// Since there is no MOUSE_ENTER event
// we'll have to make the cursor visible here,
// hence the if statement.
if (!cursor.visible) cursor.visible = true;
// And pin it to the mouse position.
cursor.x = e.stageX;
cursor.y = e.stageY;
}
// second function
private function mouseLeave(e:Event):void
{
// The anti littering function
// Besides making our cursor invisible
// we may also want to remove eventlisteners
// and stuff we don't need to free up resourcers
// for the user, just remember to turn them on
// again in the mouseMove function.
cursor.visible = false;
}
We’re almost done.

Final touches

As new stuff gets added to the scene we don’t want our nice cursor to get concealed by it. To prevent that from happening we can add these lines.
// check if there are more objects on the scene
if(numChildren > 1)
{
// set the cursor index so the cursor has the
// highest index the other objects on the
// scene will get new indexes automatically
setChildIndex(cursor, (numChildren - 1));
}

depending on the project we need the cursor in, we may need to turn these lines into a little function and call it from more places in the code. Ie, the click event, the enter frame event or whenever a new object gets added, because right now the index will only be updated when you move the cursor.

If we move the cursor around the scene now we’ll notice some stuttering. To get rid of this we need to call the updateAfterEvent(). This will make flash rerender as soon as the event completes. So, at the bottom of our mouseMove function we add this line.
e.updateAfterEvent.updateAfterEvent();
This is the final result.

Conclusion

There really is no perfect way to do this. If you have an application that is heavy on the cpu, the cursor can get laggy even though you did everything by the book. Maybe one day Adobe will improve the mouse ui but until then, make sure to remove the cursor on mouse out, use the updateAfterEvent() and set the right index of the cursor when needed.

If you want you can download this little project.

/ Johan

In this second part we’ll take part one a step further and write classes to load images using the XML-file we loaded in part one.

If you don’t remember anything about part one or never read it, you can find it here.

So what we’re going to do is to take the contents of the XML-file we loaded in part one and extract each of the image-url:s in that file and use them to load the corresponding images. To do this we just need to create two classes and update our document class a bit. The first class that we’ll create will be called ImageLoader and the other will be called ImageLoaderEvent. The ImageLoader-class will be used to actually load the images and the ImageLoaderEvent-class will be used to handle the events thats used when loading the images.

Create the ImageLoader-class

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as ImageLoader.as in the com-folder.
package com
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Bitmap;
public class ImageLoader extends Sprite
{
private var index:int;
public function ImageLoader(url:String, index:int)
{
// This value will be used to know which image
// in the xml-file that's actually been loaded.
this.index = index;
// Load the image
var loader:Loader = new Loader();
loader.load(new URLRequest(url));
// Complete listener
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
onComplete);
}
public function onComplete(e:Event):void
{
// Dispatch the complete event when the image
// has been loaded
this.dispatchEvent(new ImageLoaderEvent(
ImageLoaderEvent.COMPLETE, false,
false, e.target.content, this.index));
}
}
}

Create the ImageLoaderEvent-class

Now we need to create our custom event class that we’ll use to handle the events that we use when we load the images.

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as ImageLoaderEvent.as in the com-folder.
package com
{
import flash.events.Event;
import flash.display.Bitmap;
public class ImageLoaderEvent extends Event
{
public static const COMPLETE:String = "complete";
public var image:Bitmap;
public var index:int;
public function ImageLoaderEvent(type:String,
bubbles:Boolean = false, cancelable:Boolean = false,
image:Bitmap = null, index:int = -1)
{
super(type, bubbles, cancelable);
this.image = image;
this.index = index;
}
}
}

Last step is to update our document class

So now we have the classes we need to be able to load the images. As you can see we’ve added an index-value that the ImageLoader-class takes as an argument and that it’s passed to the event-class when the image has been loaded. We’ll explain what this value will be used for in just a moment. First off we need to update our document class (Main.as) so it looks like this.
package
{
import flash.display.MovieClip;
import com.XMLLoader;
import com.XMLLoaderEvent;
import com.ImageLoader;
import com.ImageLoaderEvent;
public class Main extends MovieClip
{
public function Main()
{
var url:String = "xml/images.xml";
var xl:XMLLoader = new XMLLoader(url);
xl.addEventListener(XMLLoaderEvent.COMPLETE,
onXMLLoaded);
}
public function onXMLLoaded(e:XMLLoaderEvent):void
{
var imageXML:XML = e.xml;
// Get a list of all the image-nodes
var images:XMLList = imageXML..image;
var numImages:int = images.length();
var imageLoader:ImageLoader;
// Loop through each image and load it
for(var i:int = 0; i < numImages; i++)
{
// Get the url from the current image-node
// in our XMLList
var urlStr:String = images[i].url;
imageLoader = new ImageLoader(urlStr, i);
imageLoader.addEventListener(ImageLoaderEvent.COMPLETE,
onImageLoaded);
}
}
public function onImageLoaded(e:ImageLoaderEvent):void
{
// The image
trace(e.image);
// With this value we know which image
// in the XML-list that's actually been loaded
trace(e.index);
}
}
}
As we've said we've added the index-value. This index-value is just there so we can know which one of the images in the XML-file that's been loaded. It's just a nice feature that can come in handy if you need to know this. You might have some information to your image that's listed in the image-node and if you have this index-value you can easily extract that information from the XML-file and present it along with the correct image.

Before you run your code you need to create a folder in your project folder (CustomEvents) that you call images. In this folder you need to add three jpg-images called image1.jpg, image2.jpg and image3.jpg.

The output from executing the code should look something like this:

So what's just happened? What we now do in our document class is that we load the XML. When the XML has been loaded we load each image that's listed in that file and when each image has been loaded we just trace the contents of what's been loaded. We could just as easily have added theese images to be displayed on the stage but for the simplicity of this article we've just traced the contents.

When you get the hang of using your own custom event classes you can get more in control of your code and write larger and more powerful applications. You'll also get a collection of classes that you can reuse in many projects and this will most probably save you precious development-time.

That's it, if you have any ideas about how you could improve this code please write a comment!

In this first part we’re going to use a real-world example and use a custom event-class to load XML more smoothly. We’ll also go through how you create a document class and how you link it to your flash document.

1. Everything starts somewhere

First off, create a folder on your desktop that you call CustomEvents where you can put all the files corresponding to this tutorial. This will be our project directory.

2. Create the flash document:

Open up Adobe Flash (in this case we use Adobe Flash CS4 but the approach is similar if you use another version such as Adobe Flash CS3), choose File->New->Flash File (ActionScript 3.0) and save it as Main.fla in your current project directory.

3. Create the XML-file:

Create a folder in your project directory that you call xml. Add the following code to a file called images.xml and save it in the xml-folder in your project directory. This is the file that we are going to load with the help of our custom event class.
<?xml version="1.0" encoding="utf-8"?>
<images>
<image>
<url>images/image1.jpg</url>
</image>
<image>
<url>images/image2.jpg</url>
</image>
<image>
<url>images/image3.jpg</url>
</image>
</images>
This file is pretty straight-forward. It contains three image-nodes that each of them contain a url-node that specifies the location of each image.

4. Create the custom event class

To be able to streamline and make it easy to use our ActionScript-classes it’s nice (so far it’s possible) to make general classes that you can reuse from project to project. So create a new folder on your desktop that you call AS3Classes and create another folder in that directory that you call com. We’ll get back to how you customize your flash document so it can use the classes you put in this folder. But first off, let’s create the classes.

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as XMLoaderEvent.as in the com-folder.
package com
{
import flash.events.Event;
public class XMLLoaderEvent extends Event
{
public var xml:XML;
public static const COMPLETE:String = "complete";
public function XMLLoaderEvent(type:String,
bubbles:Boolean = false, cancelable:Boolean = false,
xml:XML = null)
{
super(type, bubbles, cancelable);
this.xml = xml;
}
}
}
You don’t need to create your own event class to be able to listen to all the events you can listen to when you load files but it’s a nice thing to do because you get more control of your code. As you can see the event class doesn’t actually load a file, it just has a few properties that you can use when you load a file. We’ll create a specific class later on that actually do all the loading but we’ll get back to that soon.

5. Create a document class

You can start your code by adding ActionScript directly on the first frame in your main timeline but since we write all our code in classes it’s nice to keep on doing this and that’s why we now need to create our document class.

Choose File->New->ActionScript file, add the following code to it and save it as Main.as in your current project directory.
package
{
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main()
{
// This is the constructor of our document class. This
//is where our code will start.
trace("Hello world!");
}
}
}
Now we need to tell our flash document that we want this class to be the document class. Choose File->Publish settings->Flash (the tab)->Settings. At the top of that popup-window you can tell your flash document the name of your document class that in this case is Main. So just write Main in this input and save all your changes.

If you now press CTRL+Enter you will publish your flash document and if you don’t get any error and in the output-window can read the text (“Hello world!”) that we trace in the constructor in our document class everything is set up correctly.

6. Create our XMLLoader class

We want to load XML and we want to write reusable code that we might want to use on other projects so let’s create a general class that we can use each time we want to load XML.

Choose File->New->ActionScript file, add the following code to the class and save it as XMLLoader.as in your com-folder:
package com
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class XMLLoader extends Sprite
{
public function XMLLoader(url:String)
{
// Load the XML
var urlR:URLRequest = new URLRequest(url);
var l:URLLoader = new URLLoader(urlR);
// Add listeners
l.addEventListener(Event.COMPLETE, onComplete);
}
public function onComplete(e:Event):void
{
// Dispatch the complete event when the XML is loaded
this.dispatchEvent(new XMLLoaderEvent(
XMLLoaderEvent.COMPLETE, false, false,
XML(e.target.data)));
}
}
}

This class takes a url to the xml-file as argument and starts to load the XML and dispatches our own XMLLoaderEvent.COMPLETE-event when the XML has been loaded.

7. Tell our flash document where it can find our custom classes that we save in our AS3Classes-folder

To be able to use our classes that we put in our AS3Classes-folder we need to tell our document that this folder exists. You do that by choosing File->Publish settings->Flash (the tab)->Settings. There are a couple of new tabs and you should add the source path to your AS3Classes-folder here. Do that and save your changes.

8. Wrap it all together

Our next and final step is to instanciate our XMLLoader-class and trace the XML when it’s been loaded. So add some code to our document class so it’ll look like this:
package
{
import flash.display.MovieClip;
import com.XMLLoader;
import com.XMLLoaderEvent;
public class Main extends MovieClip
{
public function Main()
{
trace("Hello world!");
var url:String = "xml/images.xml";
var xl:XMLLoader = new XMLLoader(url);
xl.addEventListener(XMLLoaderEvent.COMPLETE,
onXMLLoaded);
}
public function onXMLLoaded(e:XMLLoaderEvent):void
{
trace(e.xml);
}
}
}

Now the code is ready to go so press CTRL+Enter and if everything is set up correctly you will now be able to read the contents of the XML-file in your output window.

This was more of an introduction to how you can write and use your custom events. In part 2 we’re going to take this code a step further and write code to load images more smoothly and more in-depth descripe how event classes work and how you can customize them.

/Simon

This class describes how you can use link events:

package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.events.TextEvent;
public class LinkEventTest extends Sprite
{
public function LinkEventTest()
{
// Create a TextField
var txt:TextField = new TextField();
/* Due to the width of our column on swedishfika.com
we save our link in a separate variable. */
var ourLink:String = "<a href=\"event:Hello World!\">";
ourLink += "Trace \"Hello world!\"</a>";
// Add the link
txt.htmlText = ourLink;
// Add the listener
txt.addEventListener(TextEvent.LINK, onClick);
// Add the textfield to the display list
addChild(txt);
}
private function onClick(e:TextEvent):void
{
/* Is triggered when the user clicks on the link
we declared above. */
// Traces "Hello World!"
trace(e.text);
}
}
}

When the user clicks on the link the TextEvent.LINK event is triggered and the onClick-handler is executed and traces the string “Hello world!”.

This is a really neat new feature that solves a lot of problems!

/Simon Kjellberg