Ext Jpgs with loading bars - clean up actionscript + fade up/down

[GordonBennett]

Ok option 1 it is then. Here is my updated flash file if you need it.

I've given the three movieclips instances of emptyA_mc emptyB_mc and emptyC_mc. They are in the exact position needed and also i've left in the next/prev buttons and added some dynamic text for the page numbers and also embedded the text.

[Medyman]

Alright, that's the jist of what I was talking about. The empty movieclips should also be the size of your images. They will resize once you load in the image, but it's easier to visualize and debug if there is something actually there.

Let's trim down the UI that you have to just the basics. You can then take the techniques and apply them toward the specifics of your project.

Here is along the lines of what I mean.

[Medyman]

Also...

If you haven't done so already, you should install MC Tween. We'll be using it for the fading later on.

[GordonBennett]

Hey Medyman,

Downloaded test_revised.fla and installed MC Tween (sounds absolutely awesome by the way).

Ready when you are.

Gordon

[Medyman]

Alright, let's get the XML up and running. ALl of the ActionScript that I refer to should be added to frame 1 of the "Actions" panel. You'll only have 1 frame in this entire application. Everything will be done at runtime.

So, to initiate the XML object:

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function(success) {
	if(success) {
		trace("XML Loaded");
	}
	else {
		trace("Error: XML Didn't Load");
	}
}

xml.load("test.xml");

The above code loads the XML (called test.xml for example's sake) file. If successful, it'll trace "XML Loaded" and if there's a problem, it'll trace out an error message.

Next, let's add some relevance to this. We'll add a variable that holds the total number of "pages" and set it's value via the onLoad() function. We have to declare the variable outside the function so that it's scope extends to the rest of the code.

We'll also create a function called loadImages(). Like it sounds, it'll load the images. The code should now look something like this:

// Initiate XML
var xml:XML = new XML();
xml.ignoreWhite = true;

// Variables
var total:Number = new Number();

// Load XML 
xml.onLoad = function(success) {
	if(success) {
		total = xml.firstChild.childNodes.length // Set total number of pages
		loadImages();
	}
	else {
		trace("Error: XML Didn't Load");
	}
}

// Load Images
function loadImages() {
	// Here is where most of the code goes
}

xml.load("test.xml");

I haven't explicitly explained the code. You seem confident enough with AS to understand the code thus far. Let me know if you have other questions.

The next step is to set up some more variables, and write the loadImages() function.

[GordonBennett]

Brilliant!

Ok i've added the actionscript to the actions layer1. I've tested the movie and no errors occur.

Thanks, i'm mostly following you so far and reading up on the rest as i go.

[Medyman]

Alright, so let's get some images in.

First, let's make a small change to the XML to make it a bit more flexible and easier to update. It seems like all of your images are in the same directory. If this is the case, then follow the steps below.

I've added an attribute to the <gallery> node called path. This will contain the directory path to the images. My images are in the images/ directory, so I have something like this:

<gallery path="images/">
	<page>
		<left>1.jpg</left>
		<center>2.jpg</center>
		<right>3.jpg</right>
	</page>
...

Now, let's add a variable in Flash to store this information.

First, initiate the variable:

// Variables
var total:Number = new Number();
var path:String = new String();

Then, set the value within the xml.onLoad() loop:

// Load XML 
xml.onLoad = function(success) {
	if(success) {
		total = xml.firstChild.childNodes.length // Set total number of pages
		path = xml.firstChild.attributes.path;
		loadImages();
	}
	else {
		trace("Error: XML Didn't Load");
	}
}

Next, we'll need to set up an array to hold the names of the three "picture frames". This will allow us to use easier coding techniques to refer to each of these movieclips. We could refer to each by name directly, but that would require repetitive code. If I want all three to behave the same way, it's much easier to assign the property to each at the same time.

So, lets create the array. We'll call it positions.

// Variables
var total:Number = new Number();
var path:String = new String();
var positions:Array = new Array(left, center, right);

Now, we get to the good stuff. Let's create the loadImages() function. In order to reuse the function, we'll add pass a paramater -- the page number. This will allow us to target particular nodes within the XML.

Here is the code. I'll explain it below.

// Load Images
function loadImages(page) {
	pageNo.text = "PAGE " + (page+1) + " OF " + total;
	for(i=0;i<3;i++) {
		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
		if(imagePath!="") {
			positions[i].loadMovie(imagePath);
		}
	}
}

First, note that I'm passing in a parameter (page) into the function. Second, one thing to always keep in mind is that Flash counts starting with 0. So, the first element in an array is at index 0, not 1. The first node in the XML is at index 0, not 1.

The very first thing I do in the function is display the page number. The parameter (page) isn't technically the page number. At least, not in human readable format. It's the index of the node. So, to make it human readable, we need to add one.

Next, we have a for loop. Since there are three positions (and three corresponding nodes in the XML), I'm looping through the XML three times. If you need more info on for loops, let me know. So bascially, I'm reading the value of each child node of the <page> node within the loop. The first time, it reads the first node (<left>), the second time it reads <center> and so on...

I then take whatever value that is and set it equal to a variable -- imagePath. Note that I'm concatenating the path variable from earlier to this value so we get the full path to the image. If the variable isn't blank, I load the image into the appropriate movieclip.

This is where the array comes in. The element in the array and the node of the XML have the same index. Node 0 of the XML (<left>) can then be linked with the movieclip left (which is at index 0 in the array) through the same "variable" (i in this case).

Hopefully that's not too confusing. If you have any questions, please ask. Putting it all together, your AS should not look something like this:

// Initiate XML
var xml:XML = new XML();
xml.ignoreWhite = true;

// Variables
var total:Number = new Number();
var path:String = new String();
var positions:Array = new Array(left, center, right);

// Load XML 
xml.onLoad = function(success) {
	if(success) {
		total = xml.firstChild.childNodes.length // Set total number of pages
		path = xml.firstChild.attributes.path;
		loadImages(0);
	}
	else {
		trace("Error: XML Didn't Load");
	}
}

// Load Images
function loadImages(page) {
	pageNo.text = "PAGE " + (page+1) + " OF " + total;
	for(i=0;i<3;i++) {
		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
		if(imagePath!="") {
			positions[i].loadMovie(imagePath);
		}
	}
}

xml.load("test.xml");

You should now be loading the images from the first set of images in the XML.

Next, we'll add the navigation (next and previous buttons).

[GordonBennett]

I can't thank you enough, this must be taking you ages to do!

Ok so i've tested the movie and it comes back with an "Error opening URL" where the image "undefined".

I'm starting to see how flexile the xml can be written, i've been reading the livedocs.adobe.com pages for the actionscript and they're a real help in explaining what isn't familiar. I'm beginning to understand the language...

I'll keep familiarizing myself with the code you've sent and wait for the next installment.

Thanks again.

Gordon

[Medyman]

Is the URL error with the XML file or the images? That error simply means that there is an error in the path. I don't know what your file structure is, but the image paths in the XML file should be relative to the Flash file.

You might try tracing out the imagePath variable to see what's it's calling up.

[GordonBennett]

Ok don't know what happened there but it's fine now.

Thanks, what's next?