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

**Medyman** · 10-03-2008, 08:55 PM

Alright, great.

Next...the next/previous buttons.

First, in order to manipulate the page number, we'll have to add it to a variable. I'm going to call it current for current page and set it equal to 0 at the beginning of the movie. Remember that the page number is really the XML index (which starts at 0). Have I said that enough? :-p

Code:

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

To reflect this change, we'll update our onLoad() function from loadImages(0) to loadImages(current).

Code:

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

Now, we're ready to write the logic for the next/previous buttons. First, the next. Each time we click the next button we want the page to go up one. In other words, we want current to increase by one. Then, we want to load the images associated with that next page.

So, we do something like this:

Code:

function goForward() {
	current++;
	loadImages(current);
}

current++ increases current by one each time the function is called. Since we made loadImages() flexible by adding the parameter, we can easily call the images associated with the next "page".

The same logic applies with the previous function. This time, we're just decreasing current by one.

Code:

function goBackward() {
	current--;
	loadImages(current);
}

Next, we assign those functions on the onRelease states of the next and previous buttons.

Code:

next.onRelease = goForward;
prev.onRelease = goBackward;

To wrap up, let's add some logic to test for when the next and previous buttons are needed. On the first page, we don't need the previous button. On the last page, we don't need the next button. So let's create a function that tests for those conditions.

Code:

function createNavigation() {
	// Show/Hide Next Button
	if(current >= (total-1)) {
		next._visible = false;
	}
	else {
		next._visible = true;
	}
	
	// Show/Hide Prev Button
	if(current == 0) {
		prev._visible = false;
	}
	else {
		prev._visible = true;
	}
}

We'll want to call this function each time the page is changed. The one function we 100% know will get called on each page is loadImages(). So, we'll add a function call to createNavigation() within loadImages() right after the for loop.

Code:

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);
		}
	}
	createNavigation();
}

That's it. Now, you should have working navigation. The pages should change accordingly. The page number display should update accordingly. Let me know if that doesn't happen.

All together, this is the AS I have so far:

Code:

// 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);
var current:Number = 0;

// Load XML 
xml.onLoad = function(success) {
	if(success) {
		total = xml.firstChild.childNodes.length // Set total number of pages
		path = xml.firstChild.attributes.path;
		loadImages(current);
	}
	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);
		}
	}
	createNavigation();
}

// Next Button
next.onRelease = goForward;
function goForward() {
	current++;
	loadImages(current);
}

// Previous Button
prev.onRelease = goBackward;
function goBackward() {
	current--;
	loadImages(current);
}

// Create Navigation
function createNavigation() {
	// Show/Hide Next Button
	if(current >= (total-1)) {
		next._visible = false;
	}
	else {
		next._visible = true;
	}
	
	// Show/Hide Prev Button
	if(current == 0) {
		prev._visible = false;
	}
	else {
		prev._visible = true;
	}
}

xml.load("test.xml");

Next, we'll use the MovieClipLoader class to load in the images and create a preloader. Lee Brimelow has a great video tutorial on gotoAndLearn() about this, if you're interested. It's entitled "External SWF Preloading".

**GordonBennett** · 10-04-2008, 03:28 PM

That's amazing! I just looked at my original .fla file and actionscript, it's amazing how streamlined you've made it. All working perfectly, great! I'm very excited.

I might have a go at changing the hiding buttons so that the gallery continuously rotates through and i'm wondering if it's possible for the page number to always have 2 digits e.g. 01/20 instead of 1/20. If i get stuck i might have to ask some advice if that's cool?

I had a quick look at the video's, i'll definitely bookmark them. I've got to go for a wedding reception tonight and it's my birthday tomorrow so i won't have a chance to look at the code properly until monday.

Thanks so much for helping.

Gordon

**Medyman** · 10-04-2008, 04:13 PM

i'm wondering if it's possible for the page number to always have 2 digits e.g. 01/20 instead of 1/20

Sure...
The page number is being set here:

Code:

pageNo.text = "PAGE " + (page+1) + " OF " + total;

You'll need to provide some logic to test to see if "page" is less than 10 and then add the leading 0 manually.

If i get stuck i might have to ask some advice if that's cool?

Yeah, of course. You're still a bit away from my limit of questions in one thread, lol.

I've got to go for a wedding reception tonight and it's my birthday tomorrow so i won't have a chance to look at the code properly until monday.

Just post back when you're ready to move forward. I'll probably add the next bit of code later today. Oh, and happy B-day.

Enjoy the weekend.

**GordonBennett** · 10-06-2008, 03:39 PM

Thanks Medyman.

Superb. I've adapted it to my own design now and it looks great. Having a time trying to figure out where and how to change the script to keep the buttons visible and scrolling through the images and logic for the 0 for pages lower than 10. Any hints?

Thanks again

Gordon

**Medyman** · 10-07-2008, 04:16 PM

By "scrolling" through the images, do you mean that you want them to change (i.e. progress forward) automatically. If so, you want to use setInterval().

The function you call with that would be very similar to goForward() (from my example code). You would need to insert a conditional statement that tests if "current" is equal to "total". If so, reset "current" to 0.

As for the page number, this would be one way of doing it. It's a bit verbose, but illustrates the point.

Code:

if(current < 10) {
   pageNo.text = "PAGE 0" + (page+1) + " OF " + total;
}
else {
  pageNo.text = "PAGE " + (page+1) + " OF " + total;
}

If you plan to having less than 10 items total, you'll need to run this kind of logic against the "total" variable as well.

**GordonBennett** · 10-07-2008, 04:30 PM

Thanks for the code, i've been trying out some things today and evidently i'm on the track.

By scrolling forward i mean; once the gallery has come to the last image and you click next button i wanted the gallery to go back to the first image and the same for the first page and the previous button, basically a looped gallery. Is this terribly complicated?

**Medyman** · 10-07-2008, 11:22 PM

Is this terribly complicated?

Nope. That's actually simpler than what I was imagining. We already have the skeleton for the code in our goForward() and goBackward() functions. We just need to add a small check in there.

Code:

function goForward() {
	current++;
	if(current >= total) { current = 0; }
	loadImages(current);
}

Code:

function goBackward() {
	current--;
	if(current <= 0) { current = (total-1); }
	loadImages(current);
}

You would also want to get rid of the createNavigation() function.

**GordonBennett** · 10-08-2008, 09:02 AM

Ahhhhh! I was so close...I think i just missed out "loadImages(current);" off the end, damn and blast!

Thanks though, the preceding zero issue has also been resolved.

This is really coming together now, where do we go from here?

Very excited, thanks Medyman

**Medyman** · 10-09-2008, 01:05 PM

Alright, next lets use the MovieClipLoader class to load in the images. We're currently using loadMovie() to do this. loadMovie() is a global Function for doing practically the same general thing as the MovieClipLoader class. However, the MCL class also includes some additional methods that allow us to "preload" our external assets (the images in this case).

First, for aesthetic reasons, let's make some changes to the interface. Open up any one of the "image" movieclips (instance names left, right, center). Double click on the rectangle make sure you do not select the stroke, left click, and select "Distribute to Layers". Next, create a new layer and copy and paste the rectangle that you just distributed. Now, you should have three layers -- one with just the stroke and two with rectangles. Turn both of the rectangles into separate movieclips. Give one an instance name of "loading" and the other an instance name of "holder". The holder movieclip will hold our image and the loading movieclip will display a loading message. Make sure the layers are in this order (from top-down) -- first, the layer w/ the stroke, then "loading", then "holding". If you would like, you can add whatever loading message you want within "loading". Here is what I'm working with.

Now, that we have that done, let's get to some code! The only thing we'll be changing is our loadImages() function (for obvious reasons). The code is pretty standard MCL class stuff. You haven't watched the video I recommended before (link), you'll want to do that for a better understanding of what's going on.

Code:

// 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!="") {
			var loader:MovieClipLoader = new MovieClipLoader();
			var listener:Object = new Object();
			
			listener.onLoadInit = function(target) {
				target._parent.loading._visible = false;
			}
			
			loader.addListener(listener);
			loader.loadClip(imagePath,positions[i].holder);
		}
	}
}

You might not see the change when testing locally. You obviously don't need to preload anything that you're pulling off of your hard drive. So, in order to test it properly you'll want to "Simulate Download". When you test the movie, go into the View menu and select the appropriate option. You can change what speed the simulation uses in the "Download Settings" menu. I prefer to test at DSL speed.

As always, let me know if you have any questions. The next step will be adding some fading action. If you want, you can familiarize yourself a bit with MC Tween before we begin.

**GordonBennett** · 10-09-2008, 03:27 PM

Thanks Medyman

The preloading animation is working fine for the first page but is missing each time you advance to each subsequent page. I've even checked it with your template and the same thing is happening. I'm not sure is it's just because these loose ends will be tied up with the next bit of coding or not. Also as you'll see from my xml file, the maximum number of images i'll load in will be 2, sometimes 1 if it's in landscape orientation. Is there a way to hide any unused loading movieclips? Something like...if node is empty hide movieclip?

Here is my flash file and here is my xml file.

I'm also getting 1 url error each time i advance, "images/" is this because we're using a path? I've tried with different paths and images but it still comes up.

Thanks again for all your help, i'll look at those links in the meantime.

Cheers Again.