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

**GordonBennett** · 10-01-2008, 11:42 AM

Hello

I've got a gallery i'm making in flash and need some help smoothing out the appearance of the loading process and also most probably the actionscript.

So the idea is a gallery with X number of pages with up to 2 images each page and the option of 3 different placements. See here for an example (only first 3 pages).

What i've done is make a 40 page template and added 3 empty movie clips and loading bars with the following actionscript:

Code:

emptyA.loadMovie("01a.jpg");
loadingBarA._xscale = 1;
loadingBarA.onEnterFrame = function() {
kBytesLoaded = this._parent.emptyA.getBytesLoaded() / 1024;
kBytesTotal = this._parent.emptyA.getBytesTotal() / 1024;
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
this._xscale = percentage;
if (percentage == 99) {
delete this.onEnterFrame;
}
}
emptyB.loadMovie("01b.jpg");
loadingBarB._xscale = 1;
loadingBarB.onEnterFrame = function() {
kBytesLoaded = this._parent.emptyB.getBytesLoaded() / 1024;
kBytesTotal = this._parent.emptyB.getBytesTotal() / 1024;
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
this._xscale = percentage;
if (percentage == 99) {
delete this.onEnterFrame;
}
}
emptyC.loadMovie("01c.jpg");
loadingBarC._xscale = 1;
loadingBarC.onEnterFrame = function() {
kBytesLoaded = this._parent.emptyC.getBytesLoaded() / 1024;
kBytesTotal = this._parent.emptyC.getBytesTotal() / 1024;
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
this._xscale = percentage;
if (percentage == 99) {
delete this.onEnterFrame;
}
}
stop();

The idea is that the client can upload an image and position it by defining the page number and position in it's name eg. 01c.jpg will be 01 (page01) c (far right position).

I found the actionscript on a forum website and it seems to work ok but it's really jerky and no doubt incredibly longwinded. Ideally i'd like it to load evenly each time with a little fade up and down like this website.

It would be cool to have each of the 3 loading bars work but if needs be i could always use just one.

Also is there a way of assigning a bit of script? e.g. if image is not found, display blank image (1x1 pix white jpg), this would stop the missing image errors each time you click to the page. Or even better, no load if image not found, thus stopping random loading bar loads then no image.

Massive thanks to anyone who can put me on the right track for this.

Here's the Fla file if that's any help. Please let me know if you need any other info.

Cheers

Gordon

**Medyman** · 10-01-2008, 12:31 PM

Everything that you say is possible. It's not even that hard. Your workflow will be easier. Your code will be more efficient. And your client will have less to do.

But, you'll have to start from scratch. If you're interested, I can walk you through the process. The more efficient, dynamic way is to use a tweening engine for the fading (MC Tween is my personal favorite for AS2), the MovieClipLoader class for preloading and XML for data entry.

**GordonBennett** · 10-01-2008, 01:07 PM

Thanks Medyman

That would be really helpful, where do you suggest i start? I'll have a browse over the links you just sent.

Thanks again.

Gordon

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

The first is to develop an XML structure that will handle all of the data that you wish to make dynamic. It looks like that date in this case is the source of the image and the position.

So, you might have an XML file such as:

Code:

<gallery>
	<image src="images/image1.jpg" position="right" />
	<image src="image2.jpg" position="center" />
	<image src="images/image3.jpg" position="left" />
</gallery

As you can see, it's very intuitive. Your client won't have to mess around with confusing naming conventions. You can make the file paths as flexible as you want them to be. You can have the client fill out the complete path, a relative path, just the filename, or any other combination that you can think of. If you're sure that all the images will reside in the same folder, I suggest using the filename-only approach. The relative path schema with Flash can be kind of confusing. It's best if you leave clients the easiest workflow possible.

You could add as much data to this file as you wanted -- links, descriptions, etc...
Also, this doesn't limit you to 40 pages. The client can add/remove as he pleases.

Set up a sample XML file that fits your data structure, post a snippet, and we'll go from there!

**GordonBennett** · 10-02-2008, 11:05 AM

How would this change if the client wanted two images on one page? example...

The idea is that they can replace or reposition the images in the gallery.

I'm using a lightweight cms package, is it possible to still use this too?

Here's my code

Code:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
	<image src="cms/project1/image01.jpg" position="left" />
	<image src="cms/project1/image02.jpg" position="center" />
	<image src="cms/project1/image03.jpg" position="left" />
	<image src="cms/project1/image04.jpg" position="right" />
	<image src="cms/project1/image05.jpg" position="left" />
</gallery>

This is one of a number of swf galleries i'm loading into a flash site will i therefore need to give the gallery a unique name in the xml? e.g.

Code:

<gallery1>

**Medyman** · 10-02-2008, 01:13 PM

How would this change if the client wanted two images on one page? example...

The structure is really up to you. The code will be written to pull the correct data from the XML file. So, design the structure that's intuitive to you. You might do something like this:

Code:

<gallery>
	<page>
		<left>path/to/image.jpg</left>
		<center>path/to/image.gif</center>
		<right></right>
	</page>
</gallery>

I'm using a lightweight cms package, is it possible to still use this too?

I'm not familiar with that very product. In general, you can output XML via PHP. So, in theory it would be possible. How exactly it works with that particular software, I have no idea.

If interested, there are better CMS softwares out there that could handle this quite easily and probably require less setup on your part. I specifically am referring to ExpressionEngine (Core).

This is one of a number of swf galleries i'm loading into a flash site will i therefore need to give the gallery a unique name in the xml? e.g.

Again, the structure is entirely up to you. If it's more intuitive for you and your client to use a different/unique name, do so. ActionScript 2 can't read! You can tell it to get the data from particular nodes, but it doesn't care if you call it gallery or elephants. So, the name is really just to make it readable code -- which is also important.

If you wanted to use ActionScript 3, then the naming would be important, as AS3 allows you to reference particular nodes with their tag name.

**GordonBennett** · 10-02-2008, 02:19 PM

Firstly thanks so much for the help. I've read a few intro's to xml+Flash so i'm slowly getting to grips with the idea, nodes etc. Also i've uploaded the files in the xml below.

Ok so my xml file is as follows:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
	<page>
		<left>cms/project1/image01.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image02.jpg</left>
		<center></center>
		<right>cms/project1/image03.jpg</right>
	</page>
	<page>
		<left>cms/project1/image04.jpg</left>
		<center></center>
		<right>cms/project1/image05.jpg</right>
	</page>
	<page>
		<left>cms/project1/image06.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image07.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image08.jpg</left>
		<center></center>
		<right>cms/project1/image09.jpg</right>
	</page>
	<page>
		<left>cms/project1/image10.jpg</left>
		<center></center>
		<right>cms/project1/image11.jpg</right>
	</page>
	<page>
		<left>cms/project1/image12.jpg</left>
		<center></center>
		<right>cms/project1/image13.jpg</right>
	</page>
	<page>
		<left>cms/project1/image14.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image15.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image16.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image17.jpg</left>
		<center></center>
		<right>cms/project1/image18.jpg</right>
	</page>
	<page>
		<left>cms/project1/image19.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image20.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image21.jpg</left>
		<center></center>
		<right></right>
	</page>
	<page>
		<left>cms/project1/image22.jpg</left>
		<center></center>
		<right>cms/project1/image23.jpg</right>
	</page>
	<page>
		<left>cms/project1/image24.jpg</left>
		<center></center>
		<right></right>
	</page>
</gallery>

Am i right in thinking the Flash will can count the page Nodes and make a total sum for the number of pages, and it will be possible to enter this number into Dynamic text e.g. (15/24).

Thanks again, looking forward to the next step.

Gordon

**Medyman** · 10-02-2008, 03:33 PM

Am i right in thinking the Flash will can count the page Nodes and make a total sum for the number of pages, and it will be possible to enter this number into Dynamic text e.g. (15/24).

Yup.

Thanks again, looking forward to the next step.

I think the next step should be to develop the stage structure. You have two options here:

1) Set up the stage with three empty movieclips -- one each for the positions. If you're just starting with dynamic ActionScript-ing, this might be the easiest to grasp visually.

2) Create one empty movieclip of the size that you want and save it to the library. In this way, you'll maximize efficiency by ensuring that only the assets that are relevant are on the stage at one time. This does take more conceptual understanding of Flash though.

By the way, are you using ActionScript 2.0 or 3.0?

**GordonBennett** · 10-02-2008, 04:25 PM

I'll think i'll go for option 1 as i think i can probably change the original design for the gallery. How much more complicated would option 2 be?

Do i need to give them instance names?

I'm working in Actionscript 2.0.

**Medyman** · 10-02-2008, 04:35 PM

I'll think i'll go for option 1 as i think i can probably change the original design for the gallery. How much more complicated would option 2 be?

It depends on the design. If it's just going to be three empty MCs that images load into, I wouldn't say option 2 is any more complicated than 1. It's just a different way of doing it that's a little bit more conceptual but more efficient as well.

Working with AS 2.0 though, I'd actually recommend going with Option 1.

Do i need to give them instance names?

Yes.