Flash AS3 xml images

Discussion in 'Web Design and Development' started by andy5000, May 7, 2009.

  1. andy5000 macrumors regular

    Joined:
    Sep 17, 2006
    #1
    Hi i basically have an flash mp3 player, which i am importing the song file and info from an xml file. i want to add album art so to speak but cant figure out how.
    Here is my XML file.
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <PLAYLIST>
    <SONG URL="audio/track1.mp3" TITLE="Man on the Moon" ARTIST="REM" ARTISTINFO="R.E.M. is an American rock band formed in Athens, Georgia, in 1980 by Michael Stipe (lead vocals), Peter Buck (guitar), Mike Mills (bass guitar), and Bill Berry (drums and percussion). R.E.M. was one of the first popular alternative rock bands, and gained early attention due to Buck's ringing, arpeggiated guitar style and Stipe's unclear vocals."/>
    </PLAYLIST>
    
    Here is my AS3 file:
    Code:
    var my_songs:XMLList;
    var my_total:Number;
    
    var my_sound:Sound;
    var my_channel:SoundChannel;
    
    var current_song:Number = 0;
    
    var song_position:Number;
    var song_paused:Boolean;
    
    
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);
    
    function processXML(e:Event):void {
    	var myXML:XML = new XML(e.target.data);
    	
    	my_songs = myXML.SONG;
    	my_total = my_songs.length();
    
    	playSong(0);
    
    	myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
    	myXMLLoader = null;
    
    }
    
    
    function playSong(mySong:Number):void {
    	var myTitle = my_songs[mySong].@TITLE;
    	var myArtist = my_songs[mySong].@ARTIST;
    	var myArtistInfo = my_songs[mySong].@ARTISTINFO;
    	var myURL = my_songs[mySong].@URL;
    	
    	title_txt.text = myTitle;
    	artist_txt.text = myArtist;
    	artistInfo_txt.text =myArtistInfo;
    
    	if (my_channel) {
    		my_channel.stop();
    		my_channel.removeEventListener(Event.SOUND_COMPLETE, onNext);
    	}
    
    	my_sound = new Sound();
    	my_sound.load(new URLRequest(myURL));
    	my_channel = my_sound.play();
    	my_channel.addEventListener(Event.SOUND_COMPLETE, onNext);
    	
    }
    next_btn.addEventListener(MouseEvent.CLICK, onNext);
    function onNext(e:Event):void {
    	current_song++;
    	if (current_song>=my_total) {
    		current_song=0;
    	}
    	playSong(current_song);
    }
    prev_btn.addEventListener(MouseEvent.CLICK, onPrev);
    function onPrev(e:MouseEvent):void {
    	current_song--;
    	if (current_song<0) {
    		current_song = my_total-1;
    	}
    	playSong(current_song);
    }
    
    pause_btn.addEventListener(MouseEvent.CLICK, onPause);
    function onPause(e:MouseEvent):void {
    	if (my_channel) {
    		song_position = my_channel.position;
    		my_channel.stop();
    		song_paused=true;
    	}
    }
    play_btn.addEventListener(MouseEvent.CLICK, onPlay);
    function onPlay(e:MouseEvent):void {
    	if (song_paused) {
    		my_channel = my_sound.play(song_position);
    		song_paused=false;
    	} else if (!my_channel) {
    		playSong(current_song);
    	}
    	
    }
    
     
  2. samwich macrumors regular

    Joined:
    Aug 5, 2007
    #2
    One way to do it is you will have an empty movieclip on the stage where you want the album art to load into, then add a definition for a image URL path in your XML and use the addChild to add the loaded image into your movieclip.

    I recently posted heavily commented source code on creating a XML slideshow in AS3 on my blog here http://www.samwirch.com/blog/actionscript-3-xml-slideshow-update
     
  3. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #3
    I am assuming you are looking to pull as image stored within the metadata of the mp3 file - like itunes and the ipod does it?

    Look into the ID3 classes and the ID3 event in the flash documentation. Its quite easy to pull that content out after the metadata has streamed in.

    If you need greater metadata control, look into the Metaphile as3 library... http://code.google.com/p/metaphile/
     
  4. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #4
    thanks for the responses. samwhich i think adding the blank movie clip is the way i want to go rather than id3 tags. i created a new movie clip called theImage and added
    Code:
    var imageLoader = new Loader();
    function imgLoaded(event:Event):void {
    
    		//add the image
    		theImage.addChild(imageLoader);
    To my as3 file.
    And changed my xml file to this:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <PLAYLIST>
    
    
    <SONG URL="audio/track1.mp3" TITLE="Man on the Moon" ARTIST="REM" ARTISTINFO="R.E.M. is an American rock band formed in Athens, Georgia, in 1980 by Michael Stipe (lead vocals), Peter Buck (guitar), Mike Mills (bass guitar), and Bill Berry (drums and percussion). R.E.M. was one of the first popular alternative rock bands, and gained early attention due to Buck's ringing, arpeggiated guitar style and Stipe's unclear vocals." pic ="../image1.jpg"/>
    
    and put the image file just in the root directory and it doesnt work. what am i missing:S
    bit of a newbie to as3 and its really confusing me. Really appreciate the help
     
  5. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #5
    not sure why you need a movie clip here... your loader is also a display object and has many of the same properties as the movie clip object... simply add the loader to the display list after your image has downloaded and talk to it like you would the container movie clip...

    Are you writing this project in pure AS3 (or are you speaking to objects on the timeline/library)? if so, you can start to leave movie clips behind... movieclips were important in as2, but are not that frequently used in as3. Try to use sprites and shapes to improve your performance and memory footprint.

    The only real use I have found for MCs in as3 is that the initial document class of a flash .flv has to extend the movieclip class. If you use flex or an open source as compiler you should have very little reason to use movie clips at all...

    as for your current code... you have added the loader to the display list with addChild, but did you remember to add the containing movie clip to the display list as well? this is a common mistake for beginners.

    another common problem is correctly parsing your XML and and passing that URL to your loader.
     
  6. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #6
    im trying to do as pure as3.
    how would i go about adding the containing movie clip to the display list as well?
    thanks
     
  7. samwich macrumors regular

    Joined:
    Aug 5, 2007
    #7
    unless that was just a snippet of your code you also have to add the event listener to check to see when the image is done being loaded for it to be able to call the imgLoaded function

    PHP:
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETEimgLoaded);
     
  8. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #8
    This is my full code. Loosing the plot.
    Code:
    var my_songs:XMLList;
    var my_total:Number;
    
    var my_sound:Sound;
    var my_channel:SoundChannel;
    
    var current_song:Number = 0;
    
    var song_position:Number;
    var song_paused:Boolean;
    
    
    var myXMLLoader:URLLoader = new URLLoader();
    myXMLLoader.load(new URLRequest("playlist.xml"));
    myXMLLoader.addEventListener(Event.COMPLETE, processXML);
    
    var imageLoader = new Loader();
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);  
    function imgLoaded(event:Event):void {
    
    		//add the image
    		theImage.addChild(imageLoader);
    }
    
    
    function processXML(e:Event):void {
    	var myXML:XML = new XML(e.target.data);
    	
    	my_songs = myXML.SONG;
    	my_total = my_songs.length();
    
    	playSong(0);
    
    	myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
    	myXMLLoader = null;
    
    }
    
    function playSong(mySong:Number):void {
    	var myTitle = my_songs[mySong].@TITLE;
    	var myArtist = my_songs[mySong].@ARTIST;
    	var myArtistInfo = my_songs[mySong].@ARTISTINFO;
    	var myURL = my_songs[mySong].@URL;
    	
    	title_txt.text = myTitle;
    	artist_txt.text = myArtist;
    	artistInfo_txt.text =myArtistInfo;
    
    	if (my_channel) {
    		my_channel.stop();
    		my_channel.removeEventListener(Event.SOUND_COMPLETE, onNext);
    	}
    
    	my_sound = new Sound();
    	my_sound.load(new URLRequest(myURL));
    	my_channel = my_sound.play();
    	my_channel.addEventListener(Event.SOUND_COMPLETE, onNext);
    	
    	
    }
    next_btn.addEventListener(MouseEvent.CLICK, onNext);
    function onNext(e:Event):void {
    	current_song++;
    	if (current_song>=my_total) {
    		current_song=0;
    	}
    	playSong(current_song);
    }
    prev_btn.addEventListener(MouseEvent.CLICK, onPrev);
    function onPrev(e:MouseEvent):void {
    	current_song--;
    	if (current_song<0) {
    		current_song = my_total-1;
    	}
    	playSong(current_song);
    }
    
    pause_btn.addEventListener(MouseEvent.CLICK, onPause);
    function onPause(e:MouseEvent):void {
    	if (my_channel) {
    		song_position = my_channel.position;
    		my_channel.stop();
    		song_paused=true;
    	}
    }
    play_btn.addEventListener(MouseEvent.CLICK, onPlay);
    function onPlay(e:MouseEvent):void {
    	if (song_paused) {
    		my_channel = my_sound.play(song_position);
    		song_paused=false;
    	} else if (!my_channel) {
    		playSong(current_song);
    	}
    	
    }
    
     
  9. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #9
    theImage.addChild(imageLoader);

    looks to me that you have not defined what "theImage" is...

    try removing "theImage" so that you only say "addChild(imageLoader)" and add the loader to the stage... you are currently placing the imageloader into a variable that I do not see you defining anywhere.
     
  10. samwich macrumors regular

    Joined:
    Aug 5, 2007
    #10
    you have to add an attribute to the xml for the picture, say <picture>, define the URL in that attribute, then when you load the XML you also have to add the pictures to an XML list (or in my case I read the XML into arrays). Then you have to call imageLoader.load(//and put the corresponding image url)

    right now your code never references a URL of an image so one can never be loaded.
     
  11. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #11
    thanks guys, i have to chosen to put this off for a bit until i understand as3 a bit better. back to the drawing board. appreciate the help, shows what a good community mac rumors is.
     

Share This Page