Regular AS3 XML Loading & Parse Array Demo

[mdcaigoy]

I'm working on a site for a client, using AS3 to pull in an XML file with thumbnail URLs and corresponding captions (regular AS3 method). The thumbnails show per category; going offscreen, loading, coming back onscreen once loading completes. I'm trying to base this on the ParseArray demo, but I'm unclear on how to adapt it. Please bear with me; I'm old school AS2, new to custom classes.

 

My approach is based on the premise that this line:

 

var urls:Array = ["image.jpg", "video.f4v", "image.png", "avm2.swf"];

 

can be adapted to accept an array being passed to it either at class instantiation or through a method (is one of these ways good? is there a better way?). If I can pass it directly from an XMList, all the better, but if I have to copy a list to an array first, that's fine, too.

 

Here's some of the code:

 

var xml_loader:URLLoader = new URLLoader();
var thumbs_xml_data:XML = new XML();

xml_loader.addEventListener(Event.COMPLETE, load_xml);

xml_loader.load(new URLRequest("thumbs.xml"));

function load_xml(e:Event):void
{
thumbs_xml_data = new XML(e.target.data);
parse_thumbs_xml(thumbs_xml_data);
}

/*GLOBAL VAR DEFINITIONS*/
var section:String = 'home';

/* SET SECTION VAR & CALL GET_CAPTION */
/* WOULD CALL FROM END OF TWEEN THAT HIDES TFS AND THUMBS */
//function change_section(section_arg:String,called_thumbs:int):void
function change_section(section_arg:String):void
{
/*DON'T PROCEED UNLESS CLICKED SECTION ISN'T CURRENTLY ACTIVE*/
if (section != section_arg)
{
/*SET GLOBAL SECTION VARS TO PRIVATE VARS PASSED BY FUNCTION CALL*/
	section = section_arg;
/*WOULD ALSO CALL THUMB LOADER FROM HERE?*/
/*would end up calling from tweens*/
	pop_thumbs(section);
	pop_captions(section);
	trace('section: '+section);
}
}

var thumbs_xml_out;
var home_cnt:int;
function parse_thumbs_xml(thumbs_xml:XML):void
{
thumbs_xml_out = thumbs_xml;
//trace('thumbs_xml_data.length(): '+thumbs_xml_data.length());

change_section('home');
/*would call from tweens*/
pop_thumbs('home');
pop_captions('home');
}

/*thumbnail listener and index assignments loop*/
for (var i:int = 1; i<=8; i++)
{
this['th_image_' + i].addEventListener(MouseEvent.CLICK, th_image_click);
this['th_image_' + i].idx = i;
}

/*generic thumbnail function*/
function th_image_click(e:MouseEvent):void
{
trace(e.currentTarget.name);
trace('call to large image '+e.currentTarget.idx+' in section '+section);
}

/*GETS URLS FOR THUMBNAILS FROM XML OBJ -- PROOF ONLY; REALLY FOR LOADERS*/
function pop_thumbs(section_arg:String)
{
var pop_thumbs_cnt = 1;
var thumbs_xml_list:XMLList = thumbs_xml_out['th' + section_arg]['thumb']['thimage'];
trace('thumbs_xml_list.length(): '+thumbs_xml_list.length());
/*hide all fields first*/
for (var i = 1; i<=8; i++)
{
	this['th_image_' + i]['image_src'].visible = false;
}
/*reveal and populate field for each xml entry*/
/*these fields wouldn't exist; their src data is for loaders*/
for each (var current_thumb:XML in thumbs_xml_list)
{
	trace(current_thumb);
	this['th_image_' + pop_thumbs_cnt]['image_src'].visible = true;
	this['th_image_' + pop_thumbs_cnt]['image_src'].text = current_thumb;
	pop_thumbs_cnt++;
}
if (pop_thumbs_cnt > 7)
{
	trace('show arrows');
	left_bt.visible = true;
	right_bt.visible = true;
}
else
{
	trace('hide arrows');
	left_bt.visible = false;
	right_bt.visible = false;
}
}

/*GET CAPTIONS FOR THUMBNAILS FROM XML OBJ*/
function pop_captions(section_arg:String)
{
var pop_captions_cnt = 1;
var thumbs_xml_list:XMLList = thumbs_xml_out['th' + section_arg]['thumb']['thcaption'];
/*hide all fields first*/
for (var i = 1; i<=8; i++)
{
	this['th_image_' + i]['image_caption'].visible = false;
}
/*reveal and populate field for each xml entry*/
for each (var current_thumb:XML in thumbs_xml_list)
{
	trace(current_thumb);
	this['th_image_' + pop_captions_cnt]['image_caption'].visible = true;
	this['th_image_' + pop_captions_cnt]['image_caption'].text = current_thumb;
	pop_captions_cnt++;
}
}

/*BOTTOM NAVIGATION LISTENER ASSIGNMENTS*/
/*HOME*/
home_bt.section = 'home';
home_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*LOGOS*/
graphics_bt.section = 'graphics';
graphics_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*FOOTWEAR*/
footwear_bt.section = 'footwear';
footwear_bt.addEventListener(MouseEvent.CLICK, nav_click);
footwear_bt.addEventListener(MouseEvent.ROLL_OVER, show_footwear_sub);
footwear_bt.addEventListener(MouseEvent.ROLL_OUT, hide_footwear_sub);
/*FURNITURE*/
furniture_bt.section = 'furniture';
furniture_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*LOGOS*/
logos_bt.section = 'logos';
logos_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*STORYBOARDS*/
storyboards_bt.section = 'storyboards';
storyboards_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*ART*/
art_bt.section = 'art';
art_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*FOOTWEAR SHAQ*/
footwear_sub_mc.shaq_bt.section = 'footwearshaq';
footwear_sub_mc.shaq_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*FOOTWEAR NEW BALANCE*/
footwear_sub_mc.new_balance_bt.section = 'footwearnewbalance';
footwear_sub_mc.new_balance_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*FOOTWEAR CHAMPION C9*/
footwear_sub_mc.c9_bt.section = 'footwearc9';
footwear_sub_mc.c9_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*FOOTWEAR FATUM*/
footwear_sub_mc.fatum_bt.section = 'footwearfatum';
footwear_sub_mc.fatum_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*FOOTWEAR LA GEAR*/
footwear_sub_mc.lagear_bt.section = 'footwearlagear';
footwear_sub_mc.lagear_bt.addEventListener(MouseEvent.CLICK, nav_click);
/*FOOTWEAR OUTSOLE*/
footwear_sub_mc.outsole_bt.section = 'footwearoutsole';
footwear_sub_mc.outsole_bt.addEventListener(MouseEvent.CLICK, nav_click);

/*BOTTOM NAV CHANGE SECTION FUNCTION*/
this.footwear_sub_mc.visible = false;
function nav_click(e:MouseEvent):void
{
change_section(e.currentTarget.section);
/*DOES SECTION NAME CONTAIN FOOTWEAR?*/
var re1:RegExp = /footwear/g;
if (re1.test(section))
{
	this.footwear_sub_mc.visible = true;
}
else
{
	this.footwear_sub_mc.visible = false;
}
}

 

And some XML:

 

"home/image1.png"
"HOME"


"home/image2.png"
"GRAPHICS"


"home/image3.png"
"FOOTWEAR"


"home/image4.png"
"LOGOS"


"home/image5.png"
"STORYBOARDS"


"home/image6.png"
"ART"





"footwear/image1.png"
"SHAQ"


"footwear/image2.png"
"NEW BALANCE"


"footwear/image3.png"
"C9 BY CHAMPION"


"footwear/image4.png"
"FATUM"


"footwear/image5.png"
"LA GEAR"


"footwear/image6.png"
"OUTSOLE"

[GreenSock]

To answer your question (or at least one of them), sure, you can pass in an array of URLs to a method or a class constructor or whatever you want. But you really might want to look into using LoaderMax's XMLLoader to handle this kind of stuff because it can automatically parse nodes inside the XML and create the necessary loaders for you (and even load them if you want, integrating their progress into the parent XMLLoader). There's an example in the ASDocs.

 

Does that help?

[mdcaigoy]

Hi. Thanks for your suggestion. I was able to incorporate the XML loader, and create the image loaders from there.

 

The trouble I'm having now is that on launch the SWF is trying to load every single image referenced in the XML file. I figured out that it was the load="true" tag; but now I don't know how to reference the specific queues I do want to load on demand. Is there a way to load a queue referenced by the loaded XML file?

 

	

























SHAQ ONE


SHAQ TWO


SHAQ THREE


SHAQ FOUR


SHAQ FIVE


SHAQ SIX


SHAQ SEVEN


SHAQ EIGHT


SHAQ NINE


SHAQ TEN

 

LoaderMax.activate([imageLoader, XMLLoader, MP3Loader]);
var loader:XMLLoader = LoaderMax.parse("thumbs.xml",{onComplete:parse_xml,estimatedBytes:20000});
loader.load();

function parse_xml(event:LoaderEvent):void
{
var thumbs_xml_data = event.target.content;
thumbs_xml_out = thumbs_xml_data;
parse_thumbs_xml(thumbs_xml_data);
}

/*GLOBAL VAR DEFINITIONS*/
var section:String = 'home';

/* SET SECTION VAR & CALL GET_CAPTION */
/* WOULD CALL FROM END OF TWEEN THAT HIDES TFS AND THUMBS */
function change_section(section_arg:String):void
{
if (section != section_arg)
{
	scroll_cnt = 0;
	section = section_arg;
	pop_thumbs(section);
	pop_captions(section);
}
}

var thumbs_xml_out;
var home_cnt:int;
function parse_thumbs_xml(thumbs_xml:XML):void
{
thumbs_xml_out = thumbs_xml;
change_section('home');
pop_thumbs('home');
pop_captions('home');
}

/*generic thumbnail function*/
/*this will call function to load large image; and for home and footwear, call thumb-based navigation across categories*/
function th_image_click(e:MouseEvent):void
{
/*clear all existing large images*/
while (image.image_holder.numChildren)
{
	image.image_holder.removeChildAt(0);
}
/*get large image*/
image.image_holder.addChild( LoaderMax.getContent(section+'large'+e.currentTarget.idx) );
image.x = (stage.stageWidth-image.width);
/*this would be used in tween*/
}

/*GETS URLS FOR THUMBNAILS FROM XML*/
function pop_thumbs(section_arg:String)
{
var pop_thumbs_cnt = 1;
var thumbs_xml_list:XMLList = thumbs_xml_out['th' + section_arg]['thumb']['thcaption'];
for (var i = 1; i<=thumbs_xml_list.length(); i++)
{
	thumbs_nav_mc.addChild( LoaderMax.getContent(section+i) );
	this['thumbs_nav_mc']['th_image_' + i].addEventListener(MouseEvent.CLICK, th_image_click);
	this['thumbs_nav_mc']['th_image_' + i].idx = i;
}
trace('thumbs_xml_list.length(): '+thumbs_xml_list.length());
scroll_max = (thumbs_xml_list.length()-6);
trace('scroll_max: ' + scroll_max );
/*hide all fields first*/
for (var j = 1; j<=12; j++)
{
	this['thumbs_nav_mc']['th_image_' + j]['image_caption'].visible = false;
}
}

/*GET CAPTIONS FOR THUMBNAILS FROM XML OBJ*/
function pop_captions(section_arg:String)
{
var pop_captions_cnt = 1;
var thumbs_xml_list:XMLList = thumbs_xml_out['th' + section_arg]['thumb']['thcaption'];
/*reveal and populate field for each xml entry*/
for each (var current_thumb:XML in thumbs_xml_list)
{
	trace(current_thumb);
	this['thumbs_nav_mc']['th_image_' + pop_captions_cnt]['image_caption'].visible = true;
	this['thumbs_nav_mc']['th_image_' + pop_captions_cnt]['image_caption'].text = current_thumb;
	pop_captions_cnt++;
}
}

[GreenSock]

I don't know how to reference the specific queues I do want to load on demand. Is there a way to load a queue referenced by the loaded XML file?

Sure, you can load() any queue anytime. Get the LoaderMax by name with LoaderMax.getLoader(). For example:

 

var queue:LoaderMax = LoaderMax.getLoader("footwearshaq-queue"); //gets the  you defined in your XML that was named "footwearshaq-queue"
queue.addEventListener(LoaderEvent.COMPLETE, completeHandler);
queue.load();

function completeHandler(event:LoaderEvent):void {
   trace(event.target + " finished loading.");
}

 

Is that what you were asking?

 

Of course you can do the same for any individual loader too if you prefer.