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

**Medyman** · 10-09-2008, 06:58 PM

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.

Loose ends, as you say. Recalling and dispersing the loading message has more to do with the fading. So, I've left that off as yet. We'll cover it when we go over using MC Tween.

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?

Sure, it's possible. We're already testing to see if the node is empty (well, we're testing to see if it's NOT empty, but same thing) and running a conditional based off of that. So, you can just add an else statement to it. I'll cover it in my next installment.

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.

Yeah, "images" represents the path to the images. If all of your files are in the same folder ("images" in this case), then it's much easier to declare the path once at the top of the XML, then simply add the filename to the rest of the XML. Your XML has path="images/. So, the path to your images (relative to the .fla) should be images/filename.jpg. In your previous examples you posted a path of cms/project1/filename.jpg. If that's still your directory structure, replace images/ with cms/project1/. Remember, the path is FROM the .fla file.

Let me know when you have this path thing sorted out and we'll move on to the animations.

**Medyman** · 10-09-2008, 07:20 PM

I see what you mean now about the path thing. I didn't quite understand you before. I was testing with each node filled, so I didn't notice the mistaken logic. The culprit is in these two lines:

Code:

var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
if(imagePath!='') {

We're setting imagePath equal to the value of the node plus the path variable. Then in the conditional, we're testing to see if imagePath is blank. That'll never be true (unless something is wrong with the path variable). So, let's fix that. Change it to:

Code:

var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
		if(imagePath!=path) {

Hopefully that fixes your URL errors. Confirm that it does and we'll move on.

**GordonBennett** · 10-10-2008, 09:00 AM

Sweet! Worked a treat. Thanks Medyman.

Reviewing the MC Tween now and ready to move on.

Gordon

**Medyman** · 10-14-2008, 10:54 PM

Hey Gordon...
Sorry for not posting for a few days. Had some personal things to deal with. Anyway, let's get back with this.

To refresh: We currently have an XML powered "slideshow" that loads up to 3 images per page and then adds pagination functionality.

Now we're looking to add some visual interest and tie up some loose ends. As mentioned before, we'll be using MC Tween to perform all the tweening. There are other tweening engines out there -- including Flash's native Tween class -- but I'm most fond of MC Tween for use with AS 2.

First, we "include" MC Tween so we can access its methods:

Code:

// Import MC Tween
#include "mc_tween2.as"

Next, let's animate the "loading" message. Currently, we have it being set to be invisible within the onLoadInit() method call. Using MC Tween, let's fade the "loading" message out.

Code:

listener.onLoadInit = function(target) {
	target._parent.loading.alphaTo(0, .75, "easeOutQuad");
}

This uses an alpha tween to go from loading's current alpha state to 0% alpha transparency over .75 seconds using an "easeOutQuad" animation type. Go over the MC Tween documentation for more about animation/ease types.

Ok, so now it fades. Like you mentioned before, this only happens the first time. That is because once it's tweened, it's alpha is at 0. Therefore, there is no need to tween it again. So, we should reset the alpha transparency before we tween it.

Code:

// Load Images
function loadImages(page) {
	pageNo.text = "PAGE " + (page+1) + " OF " + total;
	for(i=0;i<3;i++) {
		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
		if(imagePath!=path) {
			var loader:MovieClipLoader = new MovieClipLoader();
			var listener:Object = new Object();
			
			listener.onLoadInit = function(target) {
				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
			}
			
			loader.addListener(listener);
			loader.loadClip(imagePath,positions[i].holder);
		}
	}
}

Alright, great! Now we have the "loading" message showing where there is no image to be loaded. Instead of showing that, let's fade out that particular "frame". We have a conditional that tests to see if an image is to be loaded within a frame. We can utilize that to set an "else" conditional in case the "frame" is empty.

Code:

// Load Images
function loadImages(page) {
	pageNo.text = "PAGE " + (page+1) + " OF " + total;
	for(i=0;i<3;i++) {
		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
		if(imagePath!=path) {
			var loader:MovieClipLoader = new MovieClipLoader();
			var listener:Object = new Object();
			
			listener.onLoadInit = function(target) {
				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
			}
			
			loader.addListener(listener);
			loader.loadClip(imagePath,positions[i].holder);
		}
		else {
			positions[i].alphaTo(0, .5, "easeOutQuad");
		}
	}
}

Now test and you'll find that once a "frame" is faded out, it stays that way. Again, we need to reset the alpha of the positions[i] movieclip.

Code:

// Load Images
function loadImages(page) {
	pageNo.text = "PAGE " + (page+1) + " OF " + total;
	for(i=0;i<3;i++) {
		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
		if(imagePath!=path) {
			positions[i].alphaTo(100, .5, "easeOutQuad");
			var loader:MovieClipLoader = new MovieClipLoader();
			var listener:Object = new Object();
			
			listener.onLoadInit = function(target) {
				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
			}
			
			loader.addListener(listener);
			loader.loadClip(imagePath,positions[i].holder);
		}
		else {
			positions[i].alphaTo(0, .5, "easeOutQuad");
		}
	}
}

There you have it. You should now have the fade-in/out that you were looking for. Post back with any questions.

**Medyman** · 10-14-2008, 10:55 PM

For reference, below is the AS that I have:

Code:

// Import MC Tween
#include "mc_tween2.as"

// 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++) {
		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
		if(imagePath!=path) {
			positions[i].alphaTo(100, .5, "easeOutQuad");
			var loader:MovieClipLoader = new MovieClipLoader();
			var listener:Object = new Object();
			
			listener.onLoadInit = function(target) {
				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
			}
			
			loader.addListener(listener);
			loader.loadClip(imagePath,positions[i].holder);
		}
		else {
			positions[i].alphaTo(0, .5, "easeOutQuad");
		}
	}
}

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

// Previous Button
prev.onRelease = goBackward;
function goBackward() {
	current--;
	if(current <= 0) { current = (total-1); }
	loadImages(current);
}

xml.load("test.xml");

**GordonBennett** · 10-15-2008, 05:04 PM

That's absolutely fantastic! Exactly how i imagined it to work. I can't thank you enough Medyman, you've certainly shown me the flexibility and full potential of Flash and actionscript!

A million thank you's.

Gordon