Flash Components      Flash Menu      Flash Gallery      Flash Slideshow      FLV Player      Flash Form      MP3 Player      PhotoFlow      Flash CMS      3D Wall      Flash Scroller

Flash / AS



ASP.net / PHP






  Design & Effects
  Audio & Video
  User Interface





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.


Here's what you get:

<?xml version="1.0" ?>
<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" />

This is loaded into the player giving us a list of songs by name which can be selected and played.

[ mp3 player with playlist ]

Download ZIP


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");

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){

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){
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 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.



kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components
flash menus, buttons and components Digicrafts Components
The best flash components ever! Entheos Flash Website Templates
Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com Purchase & Download Flash Components
flash components Free Website | Make a Website
Streamsolutions Content Delivery Networks Learn how to advertise on kirupa.com