AS3 XML based Gallery

[Overshee]

Hey, I'm trying to build an XML based image gallery in AS3. However, I'm having some troubles. Are there any quality tutorials that explain it pretty much from scratch? Everything I can find is fairly geared towards one specific gallery that you are supposed to make, and the code is very hard to turn into what I want.

Thanks for your help,
Overshee

[Pier25]

the basic procedure is the same in all xml galleries and dynamic menus

1) load the xml
2) paint thumbnails/menu elements (one for each xml element)
3) add interactivity

After that it's just a matter of implementing the features you want. You can go as far as you want... add a loading bar, filters, categories, scroll bars, auto scroll depending on mouse movement, 3D, etc...

No tutorial will tell you how to do exactly what you want/need to, but you can post specific problems in this forum. It's difficult to help someone in general terms...

What are those troubles you're having exactly?

[Overshee]

Well, I got the XML loaded... Now I just need to get the thumbnails and text and interactivity...

The XML contains all of it, I just have to get it to display properly, and thats what I'm having an issue with.

[Pier25]

I did a dynamic xml menu today:

The xml:


<menu>
<item_menu>
<texto>HOME</texto>
<url>index.php</url>
</item_menu>
<item_menu>
<texto>STUDIO</texto>
<url>index.php</url>
</item_menu>
<item_menu>
<texto>LOCATIONS</texto>
<url>index.php</url>
</item_menu>
<item_menu>
<texto>EQUIPMENT</texto>
<url>equipment.php</url>
</item_menu>
etc etc etc you get the idea...
</menu>


The code for painting the menu items. The idea is to create a new instance of your library_item for each xml element. The xml is called xml_config and the symbol in the library is boton_menu.

This is not the full code, just to give you an idea. First you need to declare some things like the array, the temp var, etc. I can pass you the fla/as/xml if that can help you.



public function paint_menu():void{

for(var i = 0; i< xml_config.children().length(); i++){ //how many loops do we have to do? as many children the xml has.

temp = new boton_menu;
pone_texto(temp.texto, xml_config.item_menu[i].texto.text());
temp.texto.autoSize = TextFieldAutoSize.LEFT;
temp.fondo.width = Math.round(temp.texto.width + 20);

if(i > 0){
temp.x = lista_menu[i-1].x + lista_menu[i-1].width;
} else {
temp.x = 10;
}

temp.buttonMode = true;
temp.mouseChildren = false;
temp.name = i;

lista_menu[i] = temp;

lista_menu[i].addEventListener(MouseEvent.MOUSE_DOWN,browse);
lista_menu[i].addEventListener(MouseEvent.MOUSE_OVER,on);
lista_menu[i].addEventListener(MouseEvent.MOUSE_OUT,off);

addChild(lista_menu[i]);

}
}

[Pier25]

This tutorial is really useful if you plan on working with as3 and xml:

http://www.sephiroth.it/tutorials/flashPHP/E4X/

[Overshee]

OK, I think I'm getting that... how does one call images into the scene from an XML file in AS3?

[Pier25]

I use this in most of the situations



public function load_pic( URL:String, target){
var targetClip = target;
var _loader:Loader = new Loader();
var request:URLRequest = new URLRequest( URL );
_loader.load( request );
targetClip.addChild( _loader );
_loader.contentLoaderInfo.addEventListener(Event.I NIT, loaded);

function loaded(evento:Event):void{
TweenLite.from(evento.target.content,0.5,{alpha:0} );
}

}


you need to pass the url and the mc where you want to put the pic. You get the url from the xml with something like my_xml.picture[3].url.text() or my_xml.picture[3].@url if it's an attribute

the tweenlite thing is optional of course, but this is the way you do something with the loaded image: event.target.content

[Overshee]

I'm getting an error saying:

1114: The public attribute can only be used inside a package.

[Pier25]

I supose you're writing the code in a frame instead of inside a class... just delete the public declaration

[Overshee]

gah,

1120: Access of undefined property loaded.

[Pier25]

please put your code...

[Overshee]

var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("http://www.picadesign.com/drupaltest/files/flash/portfolios.xml"));


function LoadXML(e:Event):void {

xmlData = new XML(e.target.data);
ParseBooks(xmlData);

}

function ParseBooks(bookInput:XML):void {

trace("XML Output");
trace("------------------------");
trace(bookInput.item.image.thumbnail.text());

}


function load_pic( URL:String, target){
var targetClip = target;
var _loader:Loader = new Loader();
var request:URLRequest = new URLRequest("http://www.picadesign.com/drupaltest/files/flash/portfolio/(a)brand/A1a(100).jpg");
_loader.load( request );
targetClip.addChild( _loader );
_loader.contentLoaderInfo.addEventListener(Event.I NIT, loaded);


}

Thanks for all the help btw!

[Pier25]

you need to create the loaded function for responding to the INIT event

[Overshee]

I still can't get an image to load in... do I have the function wrong or something?