Categories: Flash | Flash Lite | Code Examples

This page was last modified 11:35, 26 April 2008.

From Forum Nokia Wiki

Flash Lite 2

Introduction

The hand-held devices normally do not have the mouse pointers but it is possible to simulate the ‘Mouse Pointer’ in Flash Lite supported devices. This is possible for the devices which supports Flash Lite 2 and onwards.

Creating Mouse Pointer

First create a Movieclip with the graphics for ‘Mouse Pointer’ and name it as ‘mcMouse’. Inside this movieclip add another layer at top and create a small movie clip of 1*1 pixel named ‘mcArrowPointer’. Apply the alpha property to this small clip as 0. This movieclip which will be used to define if the 'Mouse Pointer'is hovered over any object.

Define Carpet area for Mouse Pointer

Define the rectangular area where the ‘Mouse Pointer’ is allowed to move. Add the following code in the first frame

//The following varaibles define the Mouse pointer moveable area
var XMouseStart:Number = mcMouse._x;
// This is TOP X co-ordinates
var YMouseStart:Number = mcMouse._y;
// This is TOP Y co-ordinates
var XMouseLast:Number = 166;
// This is BOTTOM X co-ordinates
var YMouseLast:Number = 188;
// This is BOTTOM Y co-ordinates

Define the distance in Pixcel 'Mouse Pointer' should move on each click.

var nDisp:Number = 10;

Creating Application assets

Create the symbols on the stage and assign instance name to them. You may create any asset which are reuired as per the application. These movieclips/buttons/TextFields will be checked by ‘Mouse-Pointer’ for hover. Create the movieclips with the following structure:

First Frame:

Label: focusLost

Graphics: This layer will have the graphics of normal state.

Second Frame:

Label: focusIn

Graphics: This layer will have the graphics for selected state. The symbol will be moved to this state when the ‘Mouse Pointer’ is hovered on this symbol.

Now create a array named 'aClipsToTrack' and add reference of all the movieclips to this array. This array stores the reference of all the MovieClips/Buttons/InputTextFields which needs to be tracked. Only these symbols will be shown with Mouse-Over effect when hoverd over. In case you do not want to have the Mouse-Over effect during some point of execution, you can remove the entry from the array. Similarly in case you want to add some objects during run time, you only need to add the reference of the symbols into the array.

Create Key Listener

Add the key listener to recognize the key press. Depending upon the key pressed, the 'Mouse Pointer' will be moved in the respective direction.

In case the ‘Left’ key is pressed, the ‘Mouse Pointer’ will move to Left with the displacement defined.

In case the ‘Right key is pressed, the ‘Mouse Pointer’ will move to Right with the displacement defined.

In case the ‘Up’ key is pressed, the ‘Mouse Pointer’ will move to Up with the displacement defined.

In case the ‘Down’ key is pressed, the ‘Mouse Pointer’ will move to Down with the displacement defined.

Add the following code for adding the 'Key Listener'

var myListener:Object = new Object();
myListener.onKeyUp = function() {
	if (Key.getCode() == Key.RIGHT || Key.getCode() == Key.LEFT || Key.getCode() == Key.UP || Key.getCode() == Key.DOWN) {
		if (Key.getCode() == Key.RIGHT) {
			if (mcMouse._x<=(XMouseLast-mcMouse._width)) {
				mcMouse._x = mcMouse._x+nDisp;
				if ((mcMouse._x+mcMouse._width)>XMouseLast) {
					mcMouse._x = XMouseLast-mcMouse._width;
				}
			}
		}
		if (Key.getCode() == Key.LEFT) {
			if (mcMouse._x>=XMouseStart) {
				mcMouse._x = mcMouse._x-nDisp;
				if (mcMouse._x<XMouseStart) {
					mcMouse._x = XMouseStart;
				}
			}
		}
		if (Key.getCode() == Key.UP) {
			if (mcMouse._y>=YMouseStart) {
				mcMouse._y = mcMouse._y-nDisp;
				if (mcMouse._y<YMouseStart) {
					mcMouse._y = YMouseStart;
				}
			}
		}
		if (Key.getCode() == Key.DOWN) {
			if (mcMouse._y<=(YMouseLast-mcMouse._height)) {
				mcMouse._y = mcMouse._y+nDisp;
				if (mcMouse._y+mcMouse._height>YMouseLast) {
					mcMouse._y = YMouseLast;
				}
			}
		}
		fnCheckMouseCursor();
	}
};
Key.addListener(myListener);

Define the ‘Mouse Over’ Function

The most important part is to define the function which will determine which symbol should be given ‘Mouse Over’ effect. This function will iterate through the ‘aClipsToTrack’ array and will check if the ‘Mouse Pointer’ movieclip(named ‘mcMouse’) collides with the movieclips on the stage. We will use the hitTest to determine the collision. In case the hitTest returns true, the movieclip is placed on the ‘focusIn’ state and a variable named 'bSelected' is set to true which keeps the track of that movieclips current hover status. Rather than checking with the total 'Mouse Pointer' movieclip, we will check for hitTest with the 1*1 Pixcel small movieclip inside the 'Mouse Pointer' for accuracy. Add the following code to define this function:

function fnCheckMouseCursor() {
	mRefLastFocus.gotoAndStop("focusLost");
	mRefLastFocus.bSelected = false;
	// The last selected symbol is moved to 'focusLost' frame
	txt_2.text = "Focus is NULL";
	// The status text is accordingly modified.
	for (j=0; j<aClipsToTrack.length; j++) {
		// The ode is iterated for the length of the 'aClipsToTrack' array
		mRef = eval(aClipsToTrack[j]);
		if (mcMouse.mcArrowPointer.hitTest(mRef)) {
			// If the HIT-TEST is true, the Mouse is HOUVERED over this symbol and hence focus is set to this symbol.
			mRef.gotoAndStop("focusIn");
			mRef.bSelected = true;
			Selection.setFocus(mRef);
			mRefLastFocus = mRef;
			fnSetFocusMessage(mRef);
			// The status of the current focus is updated.
			break;
		}
	}
}

Once the ‘Mouse Pointer’ is hovered on the movieclip, that movieclip will be placed to ‘focusIn’ state and the last movieclip with 'Mouse-Over' will be placed to ‘focusLost’ state.

Executing 'OnPress' of Selected MovieClip

We can execute the function on the movieclip when the ‘Mouse Pointer’ is on the movieclip and user presses ‘enter’ key.

Add the following code on the Movieclip.

on (release) {
	if (this.bSelected) {
		/*The follwing function will be called when the 'Mouse Pointer' is over this Clip and user presses 'enter' key */
		_parent.fnObjectClicked("This Object is  Clicked");
		// ‘ _parent.fnObjectClicked’ is the function to be executed on ‘Press’.
	}
}

If the 'Mouse Pointer' is hovered over this MovieClip and user presses 'enter' key, the function will be executed. You can implement any business logic as per your requirement.

Download

You can download an example with source code here: CodeExampleSimulatingMousePointer