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: Simple Editor
Back to the basics: simple loading and simple sending (and reloading) of XML. Here, you have a simple, two-paned editor. The top pane is the input pane (a text field named input_txt) and the bottom pane is the output pane (a text field named output_txt). What you do is load existing XML into the input pane, edit it (or just start anew), then send or "save" it and the changes will be sent out to the server using sendAndLoad. The results (what you just sent) is displayed in the output pane thanks to the load aspect of sendAndLoad.

[ save and load using input and output panes ]

Download ZIP


The XML is about as simple as its going to get. It starts out as:

<?xml version="1.0"?>
<edit>This is what is to be edited.</edit>

And then changes based on whoever was last to save what. All you have is a simple edit element for the document root node and a text node as a child. The text within this text node is what represents what you see in the input and output panes of the example.


Much of the Flash-based scripting is old hat. The big difference in this example is that two XML instances are created to deal with the same XML document. One handles the loading and sendAndLoading for the input pane and the other receives data from the return result of the sendAndLoad call from the first. You could actually use the same XML instance to send and load into. However, since the first XML instance handles loading into the input pane, it would be slightly more difficult to also have it handle content loading into the output pane. Lets take a look at their definitions:

var input_xml = new XML();
input_xml.ignoreWhite = true;
input_xml.contentType = "text/xml";
input_xml.onLoad = function(success){
if (success) input_txt.text = this.firstChild.firstChild.nodeValue;
else input_txt.text = "Error loading input XML";
var output_xml = new XML();
output_xml.ignoreWhite = true;
output_xml.onLoad = function(success){
if (success) output_txt.text = this.firstChild.firstChild.nodeValue;
else output_txt.text = "Error loading output XML";

Each input_xml (for the input pane) and output_xml (for the output pane) have their own separate onLoad events to handle each of the text fields' text assignments from the XML loaded where this.firstChild.firstChild.nodeValue represents the text within the text node child of the edit element. Since input_xml is sending data to a server, contentType is also specified for it, set to "text/xml."

input_xml.contentType= "text/xml";

Button actions make up the rest of the code. They control when XML is loaded and sent and also provide ways to clear the two panes.

var xml_file = "simple_edit.xml";
var server_file = "simple_edit.php";
load_btn.onRelease = function(){
input_xml.load(xml_file + "?uniq=" + new Date().getTime());
input_txt.text = "Loading...";
send_btn.onRelease = function(){
input_xml.firstChild.firstChild.nodeValue = input_txt.text;
input_xml.sendAndLoad(server_file, output_xml);
output_txt.text = "Loading...";
clearin_btn.onRelease = function(){
input_txt.text = "";
clearout_btn.onRelease = function(){
output_txt.text = "";

Some variables are first defined for keeping track of what files are being used. These aren't necessary but keep some organization going when dealing with multiple files.

var xml_file = "simple_edit.xml";
var server_file = "simple_edit.php";

Next are the button actions that interact with the server. The first is the load button. It simply loads the xml file into the input_xml instance. To make sure that a fresh version of the file is loaded and not a cached version, an addition query string is added to file url. This adds a (mostly) unique number to the end of the url so that the same url will not be loaded for each instance the XML is loaded into the Flash Player - hence, no cached version.

input_xml.load(xml_file + "?uniq=" + new Date().getTime());

The send button is much like load except it first updates the input_xml with the input_txt text field's text and uses sendAndLoad to send the XML to a server-side PHP script.

input_xml.sendAndLoad(server_file, output_xml);

What this does is takes the XML within input_xml, sends it to the server_file url as raw POST data and then loads the result of that url into output_xml. Once output_xml receives the result, its onLoad will be called and the output_txt text field can be updated.

The remaining buttons simply clear the fields. They set the text of either of the two panes to "" which removes any other text that might have been there before.

input_txt.text = "";


Server-side Scripting
The server-side script used in sendAndLoad does half the work. For this particular example, I used PHP though feel free to use whatever you wish. For it to do its job, the script simply needs to print what its been sent and save it on the server. A very basic version of that in PHP is the following:

$filename = "simple_edit.xml";
$raw_xml = file_get_contents("php://input");
print $raw_xml;
$fp = fopen($filename, "w");
fwrite($fp, $raw_xml);

This takes input from raw post data (sent by the swf) and saves it as a variable called $raw_xml. This is printed as output and then saved to simple_edit.xml.

Normally, the print command would display to a web page. And, for the most part, it's still doing that. However, you never see this web page yourself. Instead, it's sent back to Flash and loaded in as part of the load aspect of sendAndLoad. Send throws the XML at the PHP script as raw data and load brings the results back in.

[ load and sendandload interaction with xml and the server ]


A few modifications and this can be doing something a little more useful. That brings us to our next example.


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