Skip to main content
A
andjelkovich2012
Inspiring
January 31, 2013
Question

Add XML to rollover Events

  • January 31, 2013
  • 1 reply
  • 702 views

Trying to display xml data when a rollover mouse event occurs.

Im stumped on this to say the least. tried to load the data initally and tried to store in a global array and call from there but my information is only being loaded in the load.Complete listener function I have defined. Does anybody have a solution to this problem? Im trying to avoid nesting functions.

This topic has been closed for replies.

1 reply

Ned Murphy
Ned Murphy
Legend
January 31, 2013

Show what you have first.  If you have the data available in your load COMPLETE handler, that's where it needs to be.  You probably just need to process it into some form of storage that you can access to present however you intend when the rollover occurs

A
andjelkovich2012Author
Inspiring
February 1, 2013

Have it working but im sure there is a more logical and better way of doing this.

var theDisplay:Display;
var theDot:Dot;
var stateArray:Array = new Array(state1,state2,state3,state4);
function loadCity(img:String)
{
//handle transitions and load scene images.
}
var theXml:XML;
var xmlLoader:URLLoader = new URLLoader();
var xmlReq:URLRequest = new URLRequest("stateInfo.xml");
xmlLoader.addEventListener(Event.COMPLETE, theEvent);
xmlLoader.load(xmlReq);

function theEvent(e:Event):void
{
//rollovers has to be called here.
theXml = new XML(e.target.data);
for (var i:int =0; i<stateArray.length; i++)
{
  theDot = new Dot();
  theDot.x = stateArray.x;
  theDot.y = stateArray.y;
  theDot.name = "dot" + as String;
  theDot.addEventListener(MouseEvent.MOUSE_OVER, moEvent);
  theDot.addEventListener(MouseEvent.MOUSE_OUT, moEvent);
  theDot.addEventListener(MouseEvent.CLICK, moEvent);
  addChild(theDot);
}

//!! im trying to avoid nesting the mouse event in here but so far its the only way i found that worked.


function moEvent(e:MouseEvent)
{
  switch (e.type)
  {
   case "mouseOver" :
    theDisplay = new Display();
    stage.addEventListener(Event.ENTER_FRAME,locationUpdate);
    addChild(theDisplay);
    TweenMax.to(e.currentTarget,.5,{scaleX:1.2,scaleY:1.2});
    trace(e.currentTarget.name);
    switch (e.currentTarget.name)
    {
     case "dot0" :
      trace("dot0");
      createInfo(theXml.state1.title,theXml.state1.info);
      break;
     case "dot1" :
      createInfo(theXml.state2.title,theXml.state2.info);
      break;
     case "dot2" :
      createInfo(theXml.state3.title,theXml.state3.info);
      break;
     case "dot3" :
      createInfo(theXml.state4.title,theXml.state4.info);
      break;
    }
    break;
   case "mouseOut" :
    removeChild(theDisplay);
    stage.removeEventListener(Event.ENTER_FRAME,locationUpdate);
    TweenMax.to(e.currentTarget,.5,{scaleX:1,scaleY:1});
    break;
   case "click" :

    break;
  }
}

}

function createInfo(loc:String,desc:String)
{
theDisplay.locTxt.text = loc;
theDisplay.descTxt.text = desc;
}


function locationUpdate(e:Event)
{
theDisplay.x = mouseX;
theDisplay.y = mouseY;
}

Nabren
Nabren
Inspiring
February 1, 2013

I was originally trying to figure out the problem but then noticed you said that you had it working.

In response to "Have it working but im sure there is a more logical and better way of doing this."

In programming there are always so many ways to structure code and different ways of doing things so you have to figure out what works best for you and or your team.

However, in general, I usually try to adhere to simple principles when determining the method to use:

1) Least amount of code or most readable

2) Most re-usable solution

3) Take advantage of existing functionality over re-inventing the wheel

For the code you shared, for instance, you could make unique functions for mouse events since you aren't sharing any code across the events anyway. You are taking it from a single function and then creating different logic paths for each type. Functions would create cleaner code, aka:

theDot.addEventListener(MouseEvent.MOUSE_OVER, mouseOverEvent);

theDot.addEventListener(MouseEvent.MOUSE_OUT, mouseOutEvent);

theDot.addEventListener(MouseEvent.CLICK, mouseClickEvent);

function mouseOverEvent(e:MouseEvent):void

{

theDisplay = new Display();

stage.addEventListener(Event.ENTER_FRAME,locationUpdate);

addChild(theDisplay);

TweenMax.to(e.currentTarget,.5,{scaleX:1.2,scaleY:1.2});

trace(e.currentTarget.name);

switch (e.currentTarget.name)

{

          case "dot0" :

                    trace("dot0");

                    createInfo(theXml.state1.title,theXml.state1.info);

          break;

                    case "dot1" :

                    createInfo(theXml.state2.title,theXml.state2.info);

          break;

                    case "dot2" :

                    createInfo(theXml.state3.title,theXml.state3.info);

          break;

                    case "dot3" :

                    createInfo(theXml.state4.title,theXml.state4.info);

          break;

}

}

function mouseOutEvent(e:MouseEvent):void

{

removeChild(theDisplay);

stage.removeEventListener(Event.ENTER_FRAME,locationUpdate);

TweenMax.to(e.currentTarget,.5,{scaleX:1,scaleY:1});

}

function mouseClickEvent(e:MouseEvent):void

{

// the original case did not do anything, but just demonstrating the idea

}

As you can see, breaking it up like that creates less lines of code and makes it more easily readable without losing any functionality. But ultimately you need to do what is right for you and pick standards/best practices that make sense to you. Of course, you could always research what the industry considers as a best practice!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices