How do I pass a dynamic url from xml into an onClick Mouse Event in ActionScript 3?

Question

Im loading the xml in, and Im able to read the xml nodes into text fields in my flash. It is also loading the url, but the last one from the loop. Its not loading the one that I click on. I tried using event.target, but that is not working. Im pretty close to figuring it out, Im just not sure where to look. Any help would be greatly appreciative!

// loads xml var xml:XML = new XML(); var loader:URLLoader = new URLLoader(); loader.load(new URLRequest(audioPlaylist)); loader.addEventListener(Event.COMPLETE, onComplete);

function onComplete(evt:Event):void { xml = XML(evt.target.data); xmlList = xml.children(); trace(xmlList); trackLength = xmlList.children().children().length(); trace(trackLength);

 for(var i:int = 0; i < trackLength; i++) {
  trace(i);
  var track:Playlist_item = new Playlist_item();
  track.y = i * 28;

  track.playlist_text.text = xmlList.children().track[i].toString();
  trackURL = xmlList.children().track[i][email protected]();

  trace(trackURL);

  playlist_container.addChild(track);
  track.buttonMode = true;
  track.mouseChildren=false;

  track.addEventListener(MouseEvent.MOUSE_OVER, onCarHover);
  track.addEventListener(MouseEvent.MOUSE_OUT, onCarOut);
  track.addEventListener(MouseEvent.CLICK, onClickLoadData);

 }

}

function onCarHover(event:MouseEvent):void { event.target.gotoAndStop(6); }

function onCarOut(event:MouseEvent):void { event.target.gotoAndStop(10); }

function onClickLoadData(event:MouseEvent):void { ns.play(trackURL); }

Answer 1

Im getting closer, I managed to create an array, with an index value - so now I can choose different url's from the array to play, but Im still unsure how to target the one that Im clicking directly on and have that play.

Here is my updated code:

// xml variables var xmlList:XMLList; var trackLength:Number; var trackURL; var trackNum:Number = -1; var tracksArray:Array = new Array();

// loads xml var xml:XML = new XML(); var loader:URLLoader = new URLLoader(); loader.load(new URLRequest(audioPlaylist)); loader.addEventListener(Event.COMPLETE, onComplete);

function onComplete(evt:Event):void { xml = XML(evt.target.data); xmlList = xml.children(); trace(xmlList); trackLength = xmlList.children().children().length();

 while (trackNum < trackLength) {
  trackNum = trackNum + 1;
  trace(trackNum);

  var track:Playlist_item = new Playlist_item();
  track.y = trackNum * 28;
  playlist_container.addChild(track);

  track.buttonMode = true;
  track.mouseChildren=false;

  track.playlist_text.text = xmlList.children().track[trackNum].toString();
  //trackURL = xmlList.children().track[trackNum][email protected]();

  tracksArray[trackNum] = xmlList.children().track[trackNum][email protected]();

  track.addEventListener(MouseEvent.MOUSE_OVER, onCarHover);
  track.addEventListener(MouseEvent.MOUSE_OUT, onCarOut);
  track.addEventListener(MouseEvent.CLICK, onClickLoadData);

 }

}

function onCarHover(event:MouseEvent):void { event.target.gotoAndStop(6); }

function onCarOut(event:MouseEvent):void { event.target.gotoAndStop(10); }

function onClickLoadData(event:MouseEvent):void {

trace(tracksArray[5]);

trace(event.target.trackNum);
ns.play(tracksArray[5]);

}

Answer 2

I created a solution to my problem!

My solution was to create an array which stored all the url's by trackNum, then create instance names inside my while loop. Then, I used event.target.name with substring to trim off the text and leave me with just the numbers. It works awesome!

// xml variables var xmlList:XMLList; var trackLength:Number; var trackURL; var trackNum:Number = -1; var tracksArray:Array = new Array();

// loads xml var xml:XML = new XML(); var loader:URLLoader = new URLLoader(); loader.load(new URLRequest(audioPlaylist)); loader.addEventListener(Event.COMPLETE, onComplete);

function onComplete(evt:Event):void { xml = XML(evt.target.data); xmlList = xml.children(); trace(xmlList); trackLength = xmlList.children().children().length();

 while (trackNum < trackLength) {
  trackNum = trackNum + 1;

  var track:Playlist_item = new Playlist_item();
  track.y = trackNum * 28;
  playlist_container.addChild(track);
  track.name = "track" + [trackNum];

  trace(track);

  track.buttonMode = true;
  track.mouseChildren=false;

  track.playlist_text.text = xmlList.children().track[trackNum].toString();
  //trackURL = xmlList.children().track[trackNum][email protected]();

  tracksArray[trackNum] = xmlList.children().track[trackNum][email protected]();

  track.addEventListener(MouseEvent.MOUSE_OVER, onCarHover);
  track.addEventListener(MouseEvent.MOUSE_OUT, onCarOut);
  track.addEventListener(MouseEvent.CLICK, onClickLoadData);

 }

}

function onCarHover(event:MouseEvent):void { event.target.gotoAndStop(6); }

function onCarOut(event:MouseEvent):void { event.target.gotoAndStop(10); }

function onClickLoadData(event:MouseEvent):void {

//trace(tracksArray[5]);

trace(event.target.name.substr(5));

ns.play(tracksArray[event.target.name.substr(5)]);

}

Answer 3

It seems to me that you have made this hard on yourself. I may be incorrect as it is hard to traverse through the code you have presented. The concept of an XML playlist and clicking a display object to play sounds is quite easy and I will demonstrate.

The XML

<?xml version="1.0" encoding="utf-8"?>
<xml>
    <item title="Song 1" path="audio/song1.mp3" />
    <item title="Song 2" path="audio/song2.mp3" />
    <item title="Song 3" path="audio/song3.mp3" />
    <item title="Song 4" path="audio/song4.mp3" />
    <item title="Song 5" path="audio/song5.mp3" />
    <item title="Song 6" path="audio/song6.mp3" />
</xml>

The ActionScript 3 code

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

    public class DocumentClass extends Sprite
    {
        private var _urlLoader:URLLoader;
        private var _urlRequest:URLRequest;
        private var _xml:XML;
        private var _xmlList:XMLList;

        public function DocumentClass():void
        {
            _urlLoader = new URLLoader();
            _urlRequest = new URLRequest();
            _urlRequest.url = 'path/to/playlist.xml';

            _urlLoader.addEventListener(Event.COMPLETE, onXMLLoaded);
            _urlLoader.load(_urlRequest);
        }
        private function onXMLLoaded(e:Event):void
        {
            _xml = new XML(e.target.data);
            _xmlList = new XMLList(_xml.item);

            //We use the index in the XML object as its ID. (The XML object/List is an array);
            for(var i:int = 0; i < _xmlList.length(); i++)
            {
                var s:MovieClip = new MovieClip();
                addChild(s);
                s.mouseChildren = false;

                var tf:TextField = new TextField();
                tf.text = _xmlList[i].@title;
                tf.y = i * 12 + 20; //Seperates the textfields by 12 px starting at y:20;
                s.path = _xmlList[i].@path;
                s.addChild(tf);
                s.addEventListener(MouseEvent.MOUSE_DOWN, onSDown);
            }
        }
        private var onSDown(e:MouseEvent):void
        {
            var s:Sound = new Sound(new URLRequest(e.target.path));
            s.play();
        }
    }
}

So we load the XML into our document class. We loop through the xml length(); many times, which is how many children are in the XML Object. For each loop, or child, we create a MovieClip, add a textfield to it, label the textfield, then add a property of "path" (xmlList[int].@path) to the containing movieclip, with a value of that current childs path attribute from the xml. The MouseEvent is regarded to the MovieClip and we tell the textfield inside to not receive mouse input.

I hope that this helps, wrapping the text in a MovieClip we can add properties to it that can be accessed by the event method through the target which is s;

Brian Hodge http://www.hodgedev.com

Check out Lee Brimlow http://theflashblog.com and http://www.gotoandlearn.com