Thanks to the Adobe Gods for making the lives of so many Flash developers much less complicated when dealing with XML Data. XML and AS2 just did not get along very well. It was one of those situations where there was a love/hate relationship.

Love was there when you’ve hacked yourself an impressive solution that simple works well, but that hate returns when it was time to change the XML structure. Going back and rerouting the paths to the correct XML nodes was just painful.

It’s funny because I did not foresee a brighter day for dealing with Flash and XML data. Those brighter days have now finally come with the newly added XML classes that will basically do all the work for you.

The XML libraries have been completely overhauled in AS3. These new changes provide a much more seamless XML integration that is based on the web standards of E4X.

What is E4X?

E4X (ECMA for XML) is the current World Wide Web Consortium standard for reading and writing XML documents, and greatly reduces the amount of code and hoop-jumping required to communicate with XML. It allows you to treat XML objects like any other object with familiar dot syntax, and provides additional shortcuts for traversing XML trees.

By providing the support for E4X, the amount of code and maneuvering in and out of XML nodes is greatly reduced and easier to understand.

In the examples below, I will first demonstrate the AS2 integration of loading XML data followed by the AS3 comparison.

Loading XML data using AS2

//Load XML Data
function loadXML(loaded) {
	if (loaded) {
		var xmlNode=this.firstChild;
		var total:Number=xmlNode.childNodes.length;
		//Creating the arrays needed for storing off the XML data
		var bookInfo:Array=new Array(total);
		var isbnNum:Array=new Array(total);
		var subNum:Array=new Array(total);
		for (var i:Number=0; i<total; i++) {
			//Storing off the ISBN values into an array
			isbnNum[i]=xmlNode.childNodes[i].attributes.isbn;
			//Storing off each parent's(book) children count
			subNum[i]=xmlNode.childNodes[i].childNodes.length;
			bookInfo[i]=new Array(subNum[i]);
			trace("ISBN = "+isbnNum[i]);
			trace("Book Info:");
			for (var j:Number=0; j<subNum[i]; j++) {
				//Store the book info of all the books into a 2D Array
				//Thie is the path to the desired xml nodes
				bookInfo[i][j]=xmlNode.childNodes[i].childNodes[j].firstChild.nodeValue;
				trace(bookInfo[i][j]);
			}
		}
	} else {
		trace("Error loading XML");
	}
}
//Required syntax
xmlData=new XML  ;
xmlData.ignoreWhite=true;
xmlData.onLoad=loadXML;
xmlData.load("book-list.xml");
stop();

Loading XML data using AS3

var xmlLoader:URLLoader=new URLLoader  ;
var xmlData:XML=new XML  ;
//Adding an event listener to notify when loading is completed
xmlLoader.addEventListener(Event.COMPLETE,LoadXML);
//Load the XML file
xmlLoader.load(new URLRequest("book-list.xml"));

function LoadXML(e:Event):void {
	xmlData=new XML(e.target.data);
	ParseBooks(xmlData);
}

function ParseBooks(bookInput:XML):void {
	//Creating an xml list that will store the book info
	var books:XMLList=bookInput.book.children();
	//Creating a xml list that will store the book's ISBN number
	var bookAttributes:XMLList=bookInput.book.attributes();
	//Extract the data from the populated XML lists
	for (var j:int=0; j<bookAttributes.length(); j++) {
		var bookISBNNum:XML=bookAttributes[i];
		trace("ISBN = "+bookISBNNum);
	}
	for (var i:int=0; i<books.length(); i++) {
		var bookInfo:XML=books[i];
		trace(bookInfo);
	}
}

What’s the difference?

The Use of XML Lists

A XML List is a list use to store specific XML nodes or attributes. The way I see it XML Lists are basically arrays formatted for dealing with XML data. This eliminates the need of creating all multiple arrays to store your data for further use – the XML List will do it all for you. If we wanted to, we can save off the an individual list for the author and book title by simply creating an XML List and filtering the specific node data. See code below.

Returning any or all of the XML data

Filtering and storing off any or all XML data becomes a more natural process.

//This xml list stores all of each book's data
var bookChildren:XMLList = bookInput.Book.children();
//This xml list will only store the author's info
var authorList:XMLList=bookInput.book.author;
//This xml list will only store the title's info
var titleList:XMLList=bookInput.book.title;

No need to define ignoreWhite to true

WithinAS3 there is not a need to define the ignoreWhite state to true. By default this is automatically set to true. Makes sense right!

Overall, you can see that loading XML data into Flash is as seamless as can be. No more headaches on trying to get your XML file to work for you. There’s more to the new XML classes than what you see on this page and I plan to touch on more of it in the next few days. If you are in need of additional resources, check out the ones below.

Additional Resources:

• Using XML in Flash CS3/AS3
• AS3 E4X Rundown
• ActionScript 3 XML Basics

Download Source

I hope this helps in your migration over into  AS3.  If there is something in particular you want to add or see with the Moving From AS2 to AS3 series, feel free to contact me via the contact page.

What is ImageViewer3D?

ImageViewer3D is an image viewer with a little hint of the Tiltviewer, a Flickr image gallery created by AirTightInteractive.  ImageViewer3D has been created by Arno Manders using Away3D, Tweener, and Adobe Flash.  The interactivity and feel for this image viewer is really eye-popping.  Its feature set is limited, however, being that this Flash component is free; I’d say it’s pretty impressive.

Features to be expected of ImageViewer3D:

• Slideshow option
• Flickr integration & search
• XML picture load
• Multipage option

Additional Resources:

Coverflow and Papervision3D hook up to create IgalleryX.  IgalleryX is a gallery that displays a stack of multiple photos, swfs, or videos with a reflection and perspective effect.  All photos can be accessed by a skinnable scrollbar, mouse click or flipping by mouse wheel.  Not only is this XML driven menu very robust, but with the integration of Papervison3D  it is also pretty fast.

Features to be expected of IgalleryX:

Extended Content Viewing With Desciption

Skinnable Scollbar

Support for Video, Images, and SWF Files

Additional Features:

• Fullscreen Support
• CSS + XML Driven
• Customize Reflection with 7 Parameters
• Many more…

Additional Resources:

• Preview this file
• More components from creator
• Download Papervision3D

This tutorial by Flash Farmer covers how to create a dynamic Flash XML navigation menu using Actionscript 2.0 and XML. Each button has a roll over and roll out animation. Control the clickthroughs, button titles and the total number of buttons with the external XML file. Once the Flash file is created you can update the menu just by editing the XML file.

This file consists of a nice structure and code is well commented.  Also, files to be downloaded comes along with full offline documentation.

Example of final product:

This is a very sleek Flash news slider using AS3 functionality and XML for fetching the data.

The main purpose of this Flash news slider is to show news on the front page with a title, an image, some descriptive text, and a link to the full article.

Also, the content being loaded is html formatted which allows for flexible customizations. You can find the steps for creating this Flash news slider along with the source files.

Other Available Resources:

Via faustocarrera.com
Demo

Elastic XML Menu created by Richardson
H-Menu Created by djankey
Professional Floating Menu created by gogh
3D XML Menu Studio 2 created by digitalscience
Accordion v2 created by bobocel
Dynamic Accordion Menu created by digitalscience
Rotation Menu created by Richardson
HorizontalMenuStudio v1.0 created by jurgenv
Elastic XML Menu Vertical created by Richardson
mySectionedMenu (xml) created by encryptme
FLASH ARROW MENU XML DRIVEN – Vertical created by djroots
Item Selection v7 created by bobocel
XML Team Members created by digitalscience
V-Menu 2 created by djankey
3d Box Menu created by collis
Dynamic Proximity Menu created by Richardson

Apple like menu created by luke
Two level Horizontal XML menu created by Chuckanucka
Powerful Menu XML 4 – Expanding Text (V) created by Random
Vertical multilevel drop down menu created by OXYLUS
myMacishMenu – Verticle created by encryptme
Cool Image Folio Menu created by OXYLUS
Tweened Menu created by djankey
Two Level XML Accordion Menu created by digitalscience
Fan / Circle Menu Navigation – XML Driven created by Suicidesquirrel
Dynamic XML Menu created by Betillo555
Scrolling Images Menu created by digitalscience

Twirling Button created by doLLie
Horizontal Expand XML Menu created by Chuckanucka
Item Selection v2 created by bobocel
Horizontal XML Image Menu created by digitalscience

Here is a nice collection of Flash countdown timers. They range from XML driven to an old film countdown timer. I’ve noticed that there are many individuals looking for a solid Flash countdown timer, so here they are. Enjoy!

Countdown Timer by Flabell

Flip Countdown Timer by Flabell

Valentine’s Day Countdown Timer by handmadesign

Simple Flash Countdown Timer by Angel Romero

Countdown Timer – FIFA World Cup 2010 Final By pedrodonkey

Countdown Timer v2 By flashnos

XML Countdown With Universal Time and Multiple Events By dxc381

Flash Analouge Countdown Clock By biteMedia

XML Countdown Customizable to the Millisecond By dxc381

Countdown Timer to Region-Based Events(XML Driven using GMT) By meerkatlookou

Old Film Countdown By collis

Final countdown By samss100

Game Countdown Timer Component By RobertaD

::Digital wow clock:: By samss100

Grunge Countdown Timer By JackSparrow

Date and Time, Countdown Timer, and Time Elapsed and Remaining By scottexpo

Strong Countdown By Nemo

Countdown before New Year’s day By fab-shamane

Digital Countdown Preloader By designesia

Countdown Clock By zainesarruke

3D Clock by zizther

Bubbles Clock by drfisher

[box type="note"] Further Reading: Create A Flash Countdown Timer in AS3 Using A Class[/box]

Craig Campbell just created a new Flash/XML music player. The design is loosely based on the old school iPod. The player is very easy to update using the supplied XML file that points directly to all you necessary files. For those of you hoping that this is built in AS3, sorry it is not. However, it is still a nice music player.

Here is the Flash/XML music player created by Craig Campbell.

Original source files:
jukebox.zip

Source: Craig Campbell’s Flash Blog

The internet is clouded with many online picture galleries using Adobe Flash and the Flickr API. Some of these are even free and some you can get for a small price, however, many of these are very predictable, repetitive and don’t offer expandability like XML support.

I came across this free, customizable 3D Flash image viewing application, called TiltViewer and I am excited about its features. This Flickr Online Picture Gallery displays your pictures in a very creative manner and indicates the popularity of 3D in the Adobe Flash environment. The online gallery tool is built in Flash and even supports XML for a personal library along with a Flickr account. Simply the interaction between the user and the gallery is worth giving this online gallery tool a try.

Below is a video showing the off this innovative online picture gallery:

Here are the controls so you can give it test run

Mouse

• Click images to zoom-in, click again to zoom-out.
• Click the background to zoom-out.
• Click the ‘reload’ button (below the image grid) to load a new set of images.
• Click the ‘flip’ button (bottom-right of a zoomed-in image) to see image details.

Keyboard

• Cursor keys to navigate between images.
• Space-bar to zoom in/out.
• ‘F’ key to flip an image (when zoomed in).

Right-Click Menu

• Go Fullscreen. Opens
  TiltViewer in fullscreen mode. Right-click and select ‘Exit Fullscreen’
  to revert to regular mode. Note keyboard navigation does not work in
  full-screen mode.