Introduction to XML in Flash
by senocular
Example: MP3 Playlist
This example will demonstrate editing
XML from within Flash using an XML based playlist
which technically could be sent back to a server
and saved for later use. This particular example
will not actually be doing any saving, but you
will be able to see the XML as its edited in
an output window.
The XML used is a simple, generic playlist
example containing a title, artist and file
path within attribute values of song elements.
mp3_playlist.xml
Here's what you get:
- <?xml version="1.0"
?>
- <playlist>
- <song title="Chocobo
Piano Loop" artist="DJ_XBrav"
src="mp3s/NG5402.mp3"
/>
- <song title="House
Of Kalm" artist="ProfitZ"
src="mp3s/NG7890.mp3"
/>
- <song title="Strobe
Riding" artist="Dreamscaper"
src="mp3s/NG3221.mp3"
/>
- <song title="Awakening"
artist="Evil
Dog" src="mp3s/NG3413.mp3"
/>
- <song title="blue
eyes - limp RMX" artist="czer323"
src="mp3s/NG4348.mp3"
/>
- <song title="Little
Organ Diddy" artist="Dustball"
src="mp3s/NG10179.mp3"
/>
- </playlist>
This is loaded into the player giving us a
list of songs by name which can be selected
and played.
[
mp3 player with playlist ]
Editing XML With ActionScript
I won't get into the details of how everything
works for this example. That might get a little
too involved. I'll just cover that which deals
with the manipulation of the XML. So starting
with your basic XML instance definition, you
get:
- var playlist_xml
= new
XML();
- playlist_xml.ignoreWhite
= true;
- playlist_xml.onLoad
= function(success){
- if (success){
- GenerateSongListing(this,
playlist_mc);
- }else
trace("Error
loading XML file");
- }
- playlist_xml.load("mp3_playlist.xml");
This then calls GenerateSongListing passing
in the XML object and the movie clip in which
the playlist is created. GenerateSongListing
like most other functions of its type goes through
and creates a list of songs by attaching movie
clips for each one, each time adding to the
movie clip attached, a name, some other properties
and button actions etc.
The button actions allow both the selection
of a song and the reordering with in the list
(note: some actions. like onPress, are assigned
to a button within a playlist item movie clip
while others, like onMouseMove, are assigned
to the movie clip itself). Song selection is
performed on a simple click when there was no
dragging of the item, whereas reordering is
performed when dragging has been detected. A
simple moved variable within each item is set
to record this.
- this.moved
= true;
When the mouse is released from an item, this
moved variable is checked. If there was no movement,
the song is selected and sent through to the
MP3 player controller (this is from a button
event so to reference the playlist item movie
clip, _parent is used).
- if (!this._parent.moved){
- SetSong(this._parent.node);
- }
Otherwise, the playlist is reordered taking
the item being moved (this.node) and switching
it with the item that the mouse has dragged
over (over_node) and the list is regenerated.
- if (this.moved){
- this.node.moveBefore(over_node);
- GenerateSongListing(playlist_xml,
playlist_mc);
- }
Its the moveBefore method here that is doing
all the work in this example. This is one of
the XMLNode methods posted earlier. As a reminder,
this is what it looks like:
- XMLNode.prototype.moveBefore
= function(beforeNode){
- if (this
== beforeNode)
return (0);
- beforeNode.parentNode.insertBefore(
this.cloneNode(true),
beforeNode);
- this.removeNode();
- }
This acts much like insertBefore, but it moves
an existing node to before any other node even
if that node exists within the same element
(a case where insertBefore would fail) by using
a clone of itself rather than the actual node
its being used on. Because the clone has no
home, it insertBefore won't complain about it
being placed in the same parent as it would
normally. Of course, having used the clone,
the original would then have to be removed.
This lets us rearrange the order of the nodes
within the playlist XML directly as opposed
to using an array as was done with the grades
sorting example; the advantage being that this
XML could then be re-saved and new order maintained.
|