Saturday, July 9, 2011

Flash AS3: globalToLocal & localToGlobal

The reason I had written about these 2 functions in Flash AS3, was mainly because of the fact that I keep forgetting about how to use these functions in Flash. Here you go, 2 similar outputs with 2 different ways of writing the swf file.


GlobalToLocal Implementation:
Actionscript codes:
//Create a array to store the highest MC in a (3*3) grid
var mcArray:Array = new Array();
//Maximum level of each box
var noOfBaseMc:int = 6;
//Variable to store number of level
var randomInt:int = 0;
//temp Obj to store MovieClip
var tempMC:Object;
//instance of bgMC;
var newMC:bgMC;
//temp Obj to store parent of MovieClip
var tempParent:Object;
//Creating a Grid
for(var g:int = 0; g < 3; g ++){
 for(var h:int = 0; h < 3; h ++){
  //Select random number of level
  randomInt = Math.floor(Math.random() * noOfBaseMc) + 1;
  tempMC = stage;
  //Stacking the levels within each MovieClip 
  //and add the highest level to the array 'mcArray'
  for(var i:int = 0; i < randomInt; i ++){
   newMC = new bgMC();
   if(i == 0){
    newMC.x = (150 * (g + 1)) - 70;
    newMC.y = (125 * (h + 1)) - 50;
   }
   tempMC.addChild(newMC);
   tempMC = newMC;
   tempParent = newMC.parent;
   while(tempParent != stage){
    tempParent = tempParent.parent;
    //Changing the frame of the MovieClip 
    //darker the color, higher the level
    newMC.gotoAndStop(newMC.currentFrame + 1);
   }
  }
  tempMC.rotation = Math.floor(Math.random() * 360);
  mcArray.push(tempMC);
 } 
}
//Create a tag MovieClip
var tempTagMC:tagMC = new tagMC();
tempTagMC.visible = false;
stage.addChild(tempTagMC);

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEvent);

//On mouse move, show the tag MovieClip when rollover 1 of the grid boxes
//the tag will move with the mouse cursor and display the contents
function mouseMoveEvent(event:MouseEvent){
 for(var j:int = 0; j < mcArray.length; j ++){
  if(mcArray[j].hitTestPoint(stage.mouseX, stage.mouseY,true)){
   tempTagMC.x = stage.mouseX + 2;
   tempTagMC.y = stage.mouseY + 2;
   tempTagMC.visible = true;
   tempTagMC.text_txt.wordWrap = true;
   tempTagMC.text_txt.autoSize = "left";
   //Display the global coordinates (X,Y) of mouse cursor
   tempTagMC.text_txt.htmlText = "Global: X=" + stage.mouseX + " Y=" + stage.mouseY;
   //Display the local coordinates (X,Y) of mouse cursor 
   //in the MovieClip using globalToLocal function
   var tempPoint:Point = mcArray[j].globalToLocal(new Point(stage.mouseX,stage.mouseY));
   tempTagMC.text_txt.htmlText += "Local: X=" + tempPoint.x + " Y=" + tempPoint.y;
   //Display number of level of MovieClip
   var level:int = 1;
   tempParent = mcArray[j].parent;
   while(tempParent != stage){
    tempParent = tempParent.parent;
    level ++;
   }
   tempTagMC.text_txt.htmlText += "Level: " + level;
   tempTagMC.text_txt.width = 120;
   tempTagMC.bgMC.height = tempTagMC.text_txt.height + 4;
   tempTagMC.bgMC.width = tempTagMC.text_txt.width + 4;
   return;
  }
 }
 tempTagMC.visible = false;
}
Output:
Click here for the demo.

Explanation:
When it comes to the function of globalToLocal, there are a few parameters need.

Formula for globalToLocal:
{A}.globalToLocal(new Point({B}.x,{B}.y));

Paramters:
  • {A} - The container that you want to pass the coordinates to
  • {B}.x, {B}.y - Usually this refers to the stage mouseX and mouseY


LocalToGlobal Implementation:
Actionscript codes:
//Create a array to store the highest MC in a (3*3) grid
var mcArray:Array = new Array();
//Maximum level of each box
var noOfBaseMc:int = 6;
//Variable to store number of level
var randomInt:int = 0;
//temp Obj to store MovieClip
var tempMC:Object;
//instance of bgMC;
var newMC:bgMC;
//temp Obj to store parent of MovieClip
var tempParent:Object;
//Creating a Grid
for(var g:int = 0; g < 3; g ++){
 for(var h:int = 0; h < 3; h ++){
  //Select random number of level
  randomInt = Math.floor(Math.random() * noOfBaseMc) + 1;
  tempMC = stage;
  //Stacking the levels within each MovieClip 
  //and add the highest level to the array 'mcArray'
  for(var i:int = 0; i < randomInt; i ++){
   newMC = new bgMC();
   if(i == 0){
    newMC.x = (150 * (g + 1)) - 70;
    newMC.y = (125 * (h + 1)) - 50;
   }
   tempMC.addChild(newMC);
   tempMC = newMC;
   tempParent = newMC.parent;
   while(tempParent != stage){
    tempParent = tempParent.parent;
    //Changing the frame of the MovieClip 
    //darker the color, higher the level
    newMC.gotoAndStop(newMC.currentFrame + 1);
   }
  }
  tempMC.rotation = Math.floor(Math.random() * 360);
  mcArray.push(tempMC);
  tempMC.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEvent);
  tempMC.addEventListener(MouseEvent.MOUSE_OUT, mouseOutEvent);
 } 
}
//Create a tag MovieClip
var tempTagMC:tagMC = new tagMC();
tempTagMC.visible = false;
stage.addChild(tempTagMC);

//On mouse move, show the tag MovieClip when rollover 1 of the grid boxes
//the tag will move with the mouse cursor and display the contents
function mouseMoveEvent(event:MouseEvent){
 tempTagMC.text_txt.wordWrap = true;
 tempTagMC.text_txt.autoSize = "left";
 //Display the local coordinates (X,Y) of mouse cursor
 tempTagMC.text_txt.htmlText = "Local: X=" + event.target.mouseX + " Y=" + event.target.mouseY;
 //Display the global coordinates (X,Y) of mouse cursor 
 //in the MovieClip using localToGlobal function
 var tempPoint:Point = event.target.localToGlobal(new Point(event.target.mouseX,event.target.mouseY));
 tempTagMC.text_txt.htmlText += "Global: X=" + tempPoint.x + " Y=" + tempPoint.y;
 //Display number of level of MovieClip
 var level:int = 1;
 tempParent = event.target.parent;
 while(tempParent != stage){
  tempParent = tempParent.parent;
  level ++;
 }
 tempTagMC.text_txt.htmlText += "Level: " + level;
 tempTagMC.text_txt.width = 120;
 tempTagMC.bgMC.height = tempTagMC.text_txt.height + 4;
 tempTagMC.bgMC.width = tempTagMC.text_txt.width + 4;
 tempTagMC.x = tempPoint.x + 2;
 tempTagMC.y = tempPoint.y + 2;
 tempTagMC.visible = true;
}

function mouseOutEvent(event:MouseEvent){
 tempTagMC.visible = false;
}

Output:
Click here for the demo.

Explanation:
When it comes to the function of localToGlobal, there are a few parameters need.

Formula for localToGlobal:
{A}.localToGlobal(new Point({B}.x,{B}.y));

Paramters:
  • {A} - The container that currently holds the coordinates that you want to convert
  • {B}.x, {B}.y - the x and y coordinates of the point that you want to convert into a global coordicates


Click here for the source files of the examples in this post.

No comments:

Post a Comment