×
Namespaces

Variants
Actions

Archived:Simulating Mouse Pointer in Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

Article Metadata
Code ExampleArticle
Created: sangramp (26 Apr 2008)
Last edited: hamishwillee (14 May 2013)

Flash Lite 2

Contents

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.

Source

Create 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;

Create Application assets

Create the symbols on the stage and assign instance name to them. You may create any asset which are required 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.

Execute '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

This page was last modified on 14 May 2013, at 09:22.
51 page views in the last 30 days.