Need to know when the mouse leaves the stage?

Ever need to know when the cursor leaves the stage? This comes up every once in a while and is useful to know. First there is Event.MOUSE_LEAVE which is:

Dispatched by the Stage object when the mouse pointer moves out of the Flash Player window area.

According to Flash Help.

stage.addEventListener( Event.MOUSE_LEAVE, mouseLeaveListener );
 function mouseLeaveListener (e:Event):void {
         trace("mouse left the stage");
         stage.addEventListener( Event.MOUSE_MOVE, mouseMoveListener );
 }
 function mouseMoveListener (e:Event):void {
         trace("mouse re-entered the stage");
         // remove the listener until the next time the mouse exits the stage.
         stage.removeEventListener(Event.MOUSE_MOVE, mouseMoveListener);
}

Then there is also Event.ACTIVATE and Event.DEACTIVATE. These events are dispatched when Flash gains and loses focus. In other words when the cursors leaves the area of the movie.

A link to a discussion of the subject on Ationscript.orghere

XMLLoader

Here’s a simple class that wraps the URLLoader. I called this XMLLoader but it will load any text. The class itself illustrates the basic code required to load a text file. The class can be used to simplify the process in any project.

Save the following as XMLLoader.as

package {
	import flash.events.*;
	import flash.net.*;

	public class XMLLoader extends EventDispatcher {
		public var data;

		public function XMLLoader() {

		}

		public function load( _xml_url:String ):void {
			var loader = new URLLoader();
			loader.addEventListener( Event.COMPLETE, on_complete );
			loader.load( new URLRequest( _xml_url ) );
		}

		private function on_complete( e:Event ):void {
			data = e.target.data;
			dispatchEvent( new Event( Event.COMPLETE ) );
		}
	}
}

Use the class like this. Add the following code to any project:

my_xml = new XMLLoader();
my_xml.addEventListener( Event.COMPLETE, xml_loaded );
my_xml.load( "file.xml" );

What happens when something leaves the stage?

I noticed that problems can occur when something leaves the stage. At times when a movie clip leaves the stage you will want to clean up or put things in order. I found there are two events that occur when a display object leaves the stage: REMOVED and REMOVED_FROM_STAGE. These have the potential to be very useful.

Here’s a short snippet of code to show how they work. Imagine you have a movie clip named box_mc. The script below adds a the clip to the satge, then assigns a CLICK event listener to it. When the box_mc is clicked it removes itself from the stage. This enabled by adding the REMOVED_FROM_STAGE event listener.

var box_mc:MovieClip = new Box();
addChild( box_mc );
box_mc.addEventListener( MouseEvent.CLICK, click_box );
box_mc.addEventListener( Event.REMOVED_FROM_STAGE, remove_me );

function click_box( event:Event ):void {
	trace( "Click box" );
	removeChild( box_mc );
}

function remove_me( event:Event ):void {
	trace( event.target + " has been removed from the stage" );
}

Here’s another exmaple. Imagine you have a class that is used as he base class for a MovieClip. That is the class is set as the Base Class for a MovieClip Symbol in your library. This class might create objects that live on after it is removed from the stage.

To take care of these object you can give your class a destroy() method and add an event listener for REMOVED_FROM_STAGE. This way the clip takes care of cleaning up after itself.

Here’s an example of a class with a destroy() method set up as described:

package {
	import flash.display.MovieClip;
	import flash.events.*;

	public class OrangeBox extends MovieClip {

		public function OrangeBox() {
			addEventListener( Event.REMOVED_FROM_STAGE, destroy );
		}

		public function destroy( evt:Event ):void {
			trace( "Destroy the Orange box" );
		}
	}
}

Content Manager Class

These are some ideas that I have been working on. The goal was to make a simple system to display images or movie clip symbols on the stage. These use Tween for animation duties so be sure to include the Tweener class in the folder with any project that might use the Content_Manger class.

The basic idea is to animate any currently displayed clip off the stage and remove it from the display list. Then add a new clip to the display list and move  this clip in to view.

The first version, Content_Manager, extends the MovieClip class and so itself must be added to the display list. Content_Manager_1 example files: Content_Manager

The second version, Content_Manager2 takes three parameters when it is instantiated, these are:

  1. open_tween:Object
  2. close_tween:Object
  3. start_values:Object

These parameters determine the animation object that will be passed to Tweener for clips that are added to a page, open_tween. The animation object passed to Tweener for clips that are removed, close_tween. And an object containing the starting properties for clips that have been added to the stage, start_values.

Start_values set the intial starting properties for a clip, open_tween sets the animation applied to a clip as it moves on to the stage. Close_Tween sets the animation that moves a clip off the stage. Content_Manager_2 Example files: Content_Manager2

This last version of the content manger, Content_Manager3, adds a new parameter for the host clip. THe host clip is when an instance of Content_Manager3 is created. The host clip determines the MovieClip that Content_Manager3 will be adding, removing and animating clips within. Otherwise it is the same as Content_Manager2.

The example files show several ways in which this class can be used.

Add_Page3.fla, shows serveral different ways that clips can be animated by passing different objects to the Content_Manager3.

Add_Page4, shows how the content manager can be nested. Here the main movie uses content manager to add clips that also contain other instances of the Content_Manager3. Here are the Content_Manager3 example files: Content_Manager3

Tweener Ideas AS3

Here are a few examples that illustrate using Tweener with AS3. Tweener is an animation Class that makes it easy to get things moving in Flash. The Tweener class files are included with these examples in the cuarina folder. You can download the latest version and read more about Tweener here.

These examples show some simple animation ideas using Tweener. Each movie is built using the Document Class. The FLA file contains a movie clip that is animated. In the First movie these clips are on the stage. In the second and third examples these clips are in the library and attached to the stage. For this to work the Linkage option must be set to Export For Actionscript.

Basic Tweener

Some More AS3 Exmaples, Loader Class

Here are a few examples that use the Loader class to load other SWFs into a main SWF. Here I planned each of the loaded SWFs around it’s own Document class. So, the Actionscript that runs each movie is contained in a document class for that SWF. This method seemed to work pretty well. The loaded movies in this don’t really do anything. But, they each contain something happening going on with Actionscript, which is stored in the Document Class for each SWF.

More AS3 Examples

AS3 Version of ScrollBar Class

Here’s an AS3 version of the ScrollBar Class. This uses the same methods and properties as the AS2 version of this class.

Make a newinstance of ScrollBar with:

 new ScrollBar( target_mc, callBack )

The target_mc must have two clips inside named drag_mc and track_mc. The first is the dragger and the second sets the limits for the dragger. You can design these in any way you like as long as they use the instance names

  • drag_mc
  • track_mc

For best results place the registration points of both clips in the upper left corner and align both clips within their parent.

The callback can be any function name that you have defined. The ScrollBar class will send a value from 0 to 1 to the callback function. Think of this as the percentage position of drag_mc from the top of track_mc.

For example if you made a clip with both drag_mc and track_mc you might give that clip the instance name of scroll_mc. To make a new instance of ScrollBar you could use the following:

var a_scrollbar:Scrollbar = new Scrollbar( scroll_mc, test );

When the scrollbar is dragged the function test would be called and passed a value between 0 and 1 representing the position of the dragger. You could use this to scroll some text in a dynamic text field or set the volume of a sound object.

Here is a sample function that would scroll a dynamic text field named scroll_txt:

function test( n ) {
scroll_txt.scroll = Math.round( ( scroll_txt.maxscroll - 1 ) * n ) + 1;
}

AS3 Scrollbar class

Here’s an example of the scrollbar in action.

Scrollbar( host_mc:MovieClip, call_back_func:Function )Creates a new Instance of Scrollbar. The host_mc clip must contain two clips named drag_mc and track_mc. These clips act as the scrollbar. track_mc sets the limits while drag_mc is the interactive clip.The call back function can be the name of any function you define. It will receive one parameter, a value representing how far the scrollbar is scrolled. The range of the returned value will be from 0.0 to 1.0. With 0.0 being the value returned when the scrollbar is at the top (or left when scrolling horizontally) and 1.0 when the scrollbar is at the bottom (or right). You can use this value to control elements in your movie.

  • host_mc: a movie clip containing the drag_mc and track_mc.
  • call_back: the name of a function that will be called when the scrollbar is scrolled.

scroll_horizontal( horizontal_scroll:Boolean )

This method determines whether the scrollbar scrolls vertical or horizontal. By default the scrollbar scrolls vertically. Calling scroll_horizontal() and passing true makes the scrollbar scroll horizontally.

getValue():Number

The method returns the current value of the scrollbar.

setValue( n:Number )

The method sets the current position of the scrollbar. Pass a value of 0 to 100.

Property enabled

This property enables and disables the scrollbar.