Image Loader

[stormofsilence]

ok hows the best way to create an image loader.

I have a move clip that get loaded to stage called wallpapersfull_mc inside this movie clip is wallpapers_mc that i will be alppling all code and changes to.

ok, is it best to have multiple frames all of witch has a different wallpaper image, and when the user clicks a button at the bottom say a left and right arrow, the frame changes forward one or back one.

now that in itself is annoying because i quite want the images to fade from one to another, and thats alot of tweens can that be done with action script?

The other option is using action script to make the movie load the images when clicked and replace a current MC on the stage, but this is quite dull and there could be quite a pause as the image loads from the external source, can i make the images fade in? and mabie some sort of loader that loads all the pics before allowing them to be viewed.

Any light would be nice. i can do either to an extent but im still only intermediate with action script.

Thanks in adavance

Storm

[whispers]

the approach you pick is ultimately up to you..

a.) you have the user wait initially for ALL images to load..

b.) you have the user wait for EACH image to load..only if he/she clicks the link to view it.


pros for choice A:
there will be no more waiting for the rest of the images through the 'visit'

pros for choice B:
If the user never intends to look at image #3 (for example) he never clicks that link and hence never has to wait for an image to download especially when he never intends to view it. (make sense?)

aside from that.... you can fade in the clips either method you choose. (we'll work on that later)

[stormofsilence]

ok i choose option b lol now any ideas lol :P ?

[whispers]

umm..sure how about this:

1.) new Flash document: (3 layers, actions, imageHolders, buttons)

2.) make a layer (named buttons) and create/drag 3 buttons to it.. INSTANCE NAMES: button1_btn, button2_btn, button3_btn.

3.) make another layer (named holderClips).. I want you to make a NEW movieClip on this layer (called imageHolderA).. this NEW movieClip (INSIDE) will have 2 layers.. a.) actions layer & b.) imageHolder layer

3a.) on imageHolder layer, I want you create/place a NEW blank (empty) movieClip in the X:0 Y:0 coordinates.. and give it the INSTANCE NAME of: imageHolder now on this layer make a frame tween of however many frames long you want to fade it to be.. and create an alpha tween starting form 0 to 100.

3b.) in the ACTIONS layer... in FRAME 1 put this code:

stop();

in the LAST FRAME put this code: (you may have to make a new blank key frame)

stop();
_root.holderB.gotoAndStop(1);

4.) go back to the _root/MAIN timeline of the whole project..(our original 3 layers)
make sure that movieClip you just created above has the INSTANCE NAME of: imageHolderA.... now go into the library.. DUPLICATE this movieClip... call it imageHolderB.. drag it to the stage on the same layer as imageHolderA is.. and give THIS movieClip the INSTANCE name of imageHolderB..

So to recap.. main timeline.

actions layer
imageHolder layer.. (that NOW have two movieClips with the instance names of: imageHolderA & imageHolderB..both of these clips have the INSIDES as outlined above in steps 3, 3a & 3b)
buttons layer: has 3 buttons on it all with instance name used in step 2.

in the actions layer.. put this code:

newTarget = "holderA";
function loadMe() {
	_root[newTarget].swapDepths(2);
	_root[newTarget].imageHolder.loadMovie(image2Load); 
	trace("FUNCTION CALLED");
	trace("path: "+[newTarget+".imageHolder"]);
	trace("image: "+image2Load);
	_root.onEnterFrame = function() {
		tb = Math.round(_root[newTarget].imageHolder.getBytesTotal() / 1024); 
		lb = Math.round(_root[newTarget].imageHolder.getBytesLoaded() / 1024); 
		if (tb > 0 && lb > 0) {
			percent = Math.round((lb / tb) * 100);
			//trace("percent: "+percent);
			if (lb >= tb) {
				trace("currentTarget: "+newTarget);
				this[newTarget].gotoAndPlay(2);
				trace("deleting onEterFrame");
				delete _root.onEnterFrame;
				holderClip = (holderClip != "holderB") ? "holderB" : "holderA"; 
				newTarget = holderClip;
				trace("nextTarget is: "+newTarget);
			}
		}
	};
}
button1_btn.onPress = function(){
	image2Load = "image1.jpg";
	loadMe();
}
button2_btn.onPress = function(){
	image2Load = "image2.gif";
	loadMe();
}
button3_btn.onPress = function(){
	image2Load = "image3.gif";
	loadMe();
}

I just chose random image names and formats.. change these to be your images.. or just place images named imge1.jpg, image2.gif & image3.gif in the same folder..

[stormofsilence]

Thanks ill use this, i think i get the jist of the code lol. ill let u know how it goes!

[Abelius]

Here is what I did. I'll give you the steps:
1) Make a new Flash movie, and create up to 8 movieclips. Make sure they are all in the Library, not on the actual stage.
2) Give them Linkage from 1 to 8.
3) Insert an image in each one of the movieclips so that you actually visualize the fading from one image to the next one.
4) Create an empty movieclip. I called it "holder_mc".
5) Drag 8 instances of holder_mc onto the stage and give them the instance names "holder1_mc", "holder2_mc", "holder3_mc" and so on...
6) Put all 8 instances of holder_mc on the same place on the stage, piled up one on top of the other. I placed them on the center.
7) Type the following code into your timeline (frame 1):

// number of images. Changing this number will increase the number of images alternating
var n:Number = 8;
// initial loop number
var x:Number = 1;
// initial onEnterFrame
var t:Number = 0;
// fade Speed in frames!
var f:Number = 50;
// 
// Initial case
var c:Number = 1;
//
for (x = 1; x <= n; x++)
{
	// if loading extrnal files:
	//str = x add ".jpg";
	//eval("holder" add x add "_mc").loadMovie(str, x, _root.getNextHighestDepth());
	// if loading Library items:
	eval("holder" add x add "_mc").attachMovie(x.toString(), x, _root.getNextHighestDepth());
	eval("holder" add x add "_mc")._x -= eval("holder" add x add "_mc")._width / 2;
	eval("holder" add x add "_mc")._y -= eval("holder" add x add "_mc")._height / 2;
	x > 1 ? eval("holder" add x add "_mc")._alpha = 0 : doNothing();
}
//
this.onEnterFrame = function()
{
	t++;
	//trace(c);
	if (t > f)
	{
		switch (c)
		{
		case 1 :
			holder1_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder2_mc._alpha += 7;
			if (holder1_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		case 2 :
			holder2_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder3_mc._alpha += 7;
			if (holder2_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		case 3 :
			holder3_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder4_mc._alpha += 7;
			if (holder3_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		case 4 :
			holder4_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder5_mc._alpha += 7;
			if (holder4_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		case 5 :
			holder5_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder6_mc._alpha += 7;
			if (holder5_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		case 6 :
			holder6_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder7_mc._alpha += 7;
			if (holder6_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		case 7 :
			holder7_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder8_mc._alpha += 7;
			if (holder7_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		case 8 :
			holder8_mc._alpha -= 7;
			c == n ? holder1_mc._alpha += 7 : holder1_mc._alpha += 7;
			if (holder8_mc._alpha <= 0)
			{
				c == n ? c = 1 : c++;
				t = 0;
			}
			break;
		}
	}
};

Hope it helps...

[Abelius]

Here is a sample of this:
http://www.worldkit.com/swf/fader.html

[Abelius]

Same thing, different day... oh, and simpler code:

// number of images. Changing this number will increase the number of images alternating
var n:Number = 8;
// initial loop number
var x:Number = 1;
// initial onEnterFrame
var t:Number = 0;
// Image transition speed
var f:Number = 30;
// Fade speed
var z:Number = 10;
// Initial case
var c:Number = 1;
//
for (x = 1; x <= n; x++)
{
	this["holder" + x + "_mc"].attachMovie(x, x, _root.getNextHighestDepth());
	this["holder" + x + "_mc"]._x -= this["holder" + x + "_mc"]._width / 2;
	this["holder" + x + "_mc"]._y -= this["holder" + x + "_mc"]._height / 2;
	x > 1 ? this["holder" + x + "_mc"]._alpha = 0 : doNothing();
}
//
this.onEnterFrame = function()
{
	t++;
	if (t > f)
	{
		this["holder" + c + "_mc"]._alpha -= z;
		c == n ? holder1_mc._alpha += z : this["holder" + Number(c + 1) + "_mc"]._alpha += z;
		if (this["holder" + c + "_mc"]._alpha <= 0)
		{
			c == n ? holder1_mc._alpha = 100 : this["holder" + Number(c + 1) + "_mc"]._alpha = 100;
			c == n ? c = 1 : c++;
			t = 0;
		}
	}
};