Actionscript 3

Named? I'm not following. That parse operation is creating an array of objects with all the XML's attributes. Written in script, the resulting data would be this ("--" = your value):


var data:Array = [{url:"--", title:"--", caption:"--"}, {url:"--", title:"--", caption:"--"}];

Now to get data out of there, you can use the standard Flash accessors that I know you've been using. :D For example, to access the url attribute of the first element, you'd do this:


var url:String = data[0].url;

ah yeah :D so.. could I arrange my XML so that it was split up into nodes for different projects, for example

<?xml version="1.0" encoding="UTF-8"?> 
<vernacular> 

   <image> 
      <url>images/image1.jpg</url> 
      <title>Image One</title> 
      <caption>This is the first image, and it is awesome.</caption> 
   </image> 

    <image> 
      <url>images/image2.jpg</url> 
      <title>Image Two</title> 
      <caption>This is the second image, and it is just as awesome as the first, in its own little way.</caption> 
   </image>
    
</vernacular>

<theCultureShow> 

   <image> 
      <url>images/image1.jpg</url> 
      <title>Image One</title> 
      <caption>This is the first image, and it is awesome.</caption> 
   </image> 

    <image> 
      <url>images/image2.jpg</url> 
      <title>Image Two</title> 
      <caption>This is the second image, and it is just as awesome as the first, in its own little way.</caption> 
   </image>
    
</theCultureShow>

and then call just the image nodes from each separate project when I click on the link to that project, load them into the array, then when I click on another project's link clear the array and load the nodes from another project (eg. theCultureShow?)

Ok... so you said to post any errors, so heres one i'm getting and don't understand.

TypeError: Error #1088: The markup in the document following the root element must be well-formed.
	at MethodInfo-42()
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at flash.net::URLLoader/onComplete()

I THINK its referring to this bit of script...

function xmlCompleteHandler(evt:Event) {

		//Load list of example images
		trace("XML File Loaded");
		var xmlData = new XML(evt.target.data);

		// specify a node name to read as a list 
		var imageList:XMLList = xmlData.cinderella.image;

		// Iterate through the list of image nodes 
		for each (var imageNode:XML in imageList) {
			// extract each node's data 
			var u:String = imageNode.url;
			var t:String = imageNode.title;
			var c:String = imageNode.caption;

			// Add data elements as a new Flash object in array 
			contentData.push({url:u, title:t, caption:c});
		}
		
		contentIndex = 0;
		createPhoto();
	}

...any ideas would be greatly appreciated :D

ah yeah :D so.. could I arrange my XML so that it was split up into nodes for different projects, for example... No, you can't do it like that. One rule of the XMLDocument class that handles XML compositions is that there must be one all-encompassing node that wraps all content. So, in order to do that you'd need to format it as:


<projects>
     <vernacular>
     </vernacular>

     <theCultureShow>
     </theCultureShow>
</projects>

But FYI... I don't think that's a very good move anyway. Unrelated projects should not share data. The only reason that they should pull from the same XML is if they consume common data elements.

Ok... so you said to post any errors, so heres one i'm getting and don't understand.

TypeError: Error #1088: The markup in the document following the root element must be well-formed.
	at MethodInfo-42()
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at flash.net::URLLoader/onComplete()

I THINK its referring to this bit of script...


function xmlCompleteHandler(evt:Event) { }

...any ideas would be greatly appreciated :D Haha, yes. Apparently you tried to load that XML. I didn't even look at this second post before replying to the first. So, see my last post... That's your error: you have malformed data (ie: two root nodes where there can only be one). Also, let me save you some headaches and explain the callstack output... You were thinking that that error might have had something to do with the method "xmlCompleteHandler"? Well, the error message tells you right off the bat that it had nothing to do with that. The error message tells you that command was never even called, so it never even had a chance to produce an error. See that big tabbed list of method names following the error? That's the callstack... or the methods that have been running to lead to this point in the program. The top-most method name indicates the method in which the error was encountered, and everything below it are the chain of events that led up to that method's call. As you can see, your "xmlCompleteHandler" does not fall within that list, meaning that it was never called so clearly did not contribute to the error. Like I say, AS3 error reporting is unbelievably specific and useful once you learn how to read it.

Ah right... I'll have to pay more attention to my error messages then.. up till now i've just tried changing stuff until the error messages go away! I don't think that's a very good move anyway. Unrelated projects should not share data. The only reason that they should pull from the same XML is if they consume common data elements. Ok, so should I create separate XML's for each project? What i'm wanting to happen is that clicking on 'portfolio' in the menu will cause Flash to look at an XML file, see the titles of all the different projects and create buttons for them in the menu. Clicking on the button gets Flash to look at the image urls, titles and captions within that project and add them to an array, then displaying the first image. Then there will be a 'next' button which will add the next image to the stage (by adding 1 to the target index). Then, clicking on another project's button will clear the stage of all images, and start the process again. What would be the best way of organising all that? Here's the site as it stands at the moment... might give you a better idea of what i'm thinking. I havn't given much (or any) thought to the look of the menu yet so excuse it's roughness! www.pigstylearts.co.uk/portfolio.html

Ah... I see. So these are all different slideshows within the greater context of your portfolio. That makes sense, and yes, that would be a case for a single XML doc. I'd structure it something like this...


<?xml version="1.0" encoding="UTF-8"?>
<portfolio>

	<project>
		<title>Vernacular</title>
		<description>About the project...</description>
		<slides>
			<slide>
				<url>URL</url>
				<title>slide title</title>
				<caption>slide caption</caption>
			</slide>
			<slide>
				<url>URL</url>
				<title>slide title</title>
				<caption>slide caption</caption>
			</slide>
		</slides>
	</project>
	
	<project>
		<title>The Culture Show</title>
		<description>About the project...</description>
		<slides>
			<slide>
				<url>URL</url>
				<title>slide title</title>
				<caption>slide caption</caption>
			</slide>
			<slide>
				<url>URL</url>
				<title>slide title</title>
				<caption>slide caption</caption>
			</slide>
		</slides>
	</project>
	
</portfolio>

Right, i'll try that sort of structure then... I take it I tell Flash to just import the nodes called 'project'... put them into an array, then when I want to load the images from a project I put the selected images into a new array, and cycle through it when creating the images? Or do I only need one array for the whole shebang? Oh i forgot to mention, the only button that works at the moment is 'next'... i added click and drag functionality to the pics, and made it so you could click on one at the bottom of the pile and it would come to the top... pretty basic stuff I'm sure but hey, i'm a beginner! :D

Right, i'll try that sort of structure then... I take it I tell Flash to just import the nodes called 'project'... put them into an array, then when I want to load the images from a project I put the selected images into a new array, and cycle through it when creating the images? Or do I only need one array for the whole shebang? Not following... but regardless, there is no one "right" way to manage data; there are just varying degrees of efficiency that makes some approaches better than others. You've now got the basic knowledge of HOW to work with data; that's the easy part. Now it's time to figure out the WHY of managing data. The way you approach a problem is just something that comes through experience. So, go at it! And rest assured this will become easier and more efficient with each new project you do.

Ok... so im using the xml structure you suggested, and flash is pushing the 'project' nodes into the portfolioData array. When I trace

trace ("title: " + portfolioData[0].title + " description: " + portfolioData[0].description + " slides: " +portfolioData[0].slides);

I get the title and description ok, but the 'slides' element returns

<slide> 
            <url>URL</url> 
            <title>slide title</title> 
            <caption>slide caption</caption> 
         </slide> 
         <slide> 
            <url>URL</url> 
            <title>slide title</title> 
            <caption>slide caption</caption> 
         </slide>

...as you would expect I guess. Can I push the two 'slide' nodes into the array as child elements of the 'slides' element, or will I need to create a new array for them? Sorry if that doesnt make any sense!

http://www.pigstylearts.co.uk/portfolio/portfolio.html havn't worked out how to go through the slides yet (see above) so its just one image, but i'm getting there! The menu and all still looks crap, but its just a placeholder, I have a few ideas for a funky interface system.

So when you click on a slide and it gets bigger, that's because you're "picking it up", right? ie: It's elevating in implied depth? If so, here's a challenge / task for you (it's really easy and will be really fun!)... Animate the drop shadow so that the shadow distances from the photo's edge and lightens as it "raises". Cool stuff, simple, and makes for great VFX.

I've actually been planning to do that... have tried doing it using the tween class to modify the variables of the dropShadow filter... doesn't seem to be working. However, i'm considering drawing out the shadows to make them more realistic than just drop shadows, and adding them as a child behind the photo objects... then I should be able to use the tween class to make the shadow object grow and shift when the photo is lifted... I hope? What I'd really like to have is the ability to throw the photos around a bit... pure eye candy, but it just seems a bit wrong the way they just drop without sliding a little.. where would I start with something like that?

What I'd really like to have is the ability to throw the photos around a bit... pure eye candy, but it just seems a bit wrong the way they just drop without sliding a little.. where would I start with something like that? I don't follow what you mean, but regardless, that's all stuff for you to play with and figure out. It's just an inventive process that you get better at designing both the visuals and mathematics of it the more you do it. I'm just giving you foundation knowledge. To that end... here's more foundation: Flash filters are a little funky. They interface through a property setter, which is very limiting. You need to re-set the "filters" property with a new array of filters each time you want to redraw the sprite's filters. So, this is pretty simple when you've only got a single filter applied... you just extract the current filter array, adjust filter properties, then reset it. It's substantially more complicated when you have multiple filters applied and have to sort out what filter is what within the array. It's a system that I assume (and hope) they will revisit in the future with API improvements. Also, as for tweening... tweens suck up memory, and are a little cumbersome as you create new, separate tweens for all different things (IE: scale, position, filter strength, etc). Wouldn't it be simpler to just have ONE tween that manages all components of an animation? Haha... well you can. This is a technique that I came up with personally that I'm sure many people use, although no one documents it. As a result, you've got kind of a disconnect between advanced users who inherently know to do this and beginners who have no idea that this is possible. So, word: make tweens animate via Getters/Setters.... oh crap. Nevermind. You're not using class architectures are you? You probably can't write getter/setter methods.

Haha!! You CAN write getter/setters outside of a class architecture. I suppose that does make sense. Okay, so you can do this in timeline code... The principal of a getter/setter is to manage changes that occur around a value. You're familiar with the concept of a variable. Just think of this as putting that variable within a box that has a defined inlet and outlet. Here's the basic idea:


var _sourceProp:Number = 0;

function get myProperty():Number
{
	return _sourceProp;
}

function set myProperty(val:Number):void
{
	_sourceProp = val;
}

The "myProperty" methods are getters and setters which manage that source property's value. You can now manage that source property through these accessors using "obj.myProperty = 0". Now, this example is no different from just managing that _sourceProp value directly. So what's the advantage of this? Couple things... this is commonly used for read-only properties. You can reserve the source property as an internal value of an object, then expose it with a getter that will allow other object to read the value but never change it. Getters/setters are also known as "mutators" because of their extended uses. Lets say you build a volume control mechanism that manages a percent (decimal) value between 0 and 1. However, the control interface uses a scale between 0 and 100. You can use the getters and setters as mechanisms to accept one value and store another. So, here's the beautiful thing of using getter/setters within a dynamic tween rig... you can point the tween at a getter/setter combo and have it tween between 0 and 1, which will just provide a percentage of the tween that has completed. Then, you can specify all the different animation properties that you want to control within the setter. Tough explanation. Here, I just wrote this for you... paste it into a blank flash (AS3) doc and publish...


import fl.transitions.Tween;
import fl.transitions.easing.*;

const A_START_X:Number = 10;
const A_START_Y:Number = 10;
const A_FINISH_X:Number = 150;
const A_FINISH_Y:Number = 200;
const B_START:Number = 150;
const B_FINISH:Number = 10;

var a:Sprite = new Sprite();
a.graphics.beginFill(0x999999, 1);
a.graphics.drawRect(0, 0, 100, 100);
a.graphics.endFill();
a.x = A_START_X;
a.y = A_START_Y;
addChild(a);

var b:Sprite = new Sprite();
b.graphics.beginFill(0xFF0000, 1);
b.graphics.drawRect(0, 0, 50, 50);
b.graphics.endFill();
b.x = b.y = B_START;
addChild(b);


var _animVal:Number = 0;

function get animate():Number
{
	return _animVal;
}

function set animate(val:Number):void
{
	_animVal = val;
	
	a.x = A_START_X + ((A_FINISH_X-A_START_X) * val);
	a.y = A_START_Y + ((A_FINISH_Y-A_START_Y) * val);
	
	var ds:DropShadowFilter = new DropShadowFilter(15*val, 45*val, 0x000000, 0.25*val, 10*val, 10*val);
	a.filters = [ds];
	
	b.x = b.y = B_START + ((B_FINISH-B_START) * val);
	b.alpha = val;
}

var tween:Tween = new Tween(this, "animate", Regular.easeInOut, animate, 1, 1.5, true);

View Full Version: Actionscript 3