A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: Image Loader

  1. #1
    Member
    Join Date
    Aug 2006
    Location
    St Austell, Cornwall, UK
    Posts
    43

    Image Loader

    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

  2. #2
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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)

  3. #3
    Member
    Join Date
    Aug 2006
    Location
    St Austell, Cornwall, UK
    Posts
    43
    ok i choose option b lol now any ideas lol :P ?

  4. #4
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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:
    Code:
    stop();
    in the LAST FRAME put this code: (you may have to make a new blank key frame)
    Code:
    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:

    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..
    Attached Files Attached Files

  5. #5
    Member
    Join Date
    Aug 2006
    Location
    St Austell, Cornwall, UK
    Posts
    43
    Thanks ill use this, i think i get the jist of the code lol. ill let u know how it goes!

  6. #6
    World Kit Vote Holder Abelius's Avatar
    Join Date
    Feb 2002
    Location
    US
    Posts
    963
    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):
    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;
    // 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...
    Cordially,
    Abelius
    www.worldkit.com

  7. #7
    World Kit Vote Holder Abelius's Avatar
    Join Date
    Feb 2002
    Location
    US
    Posts
    963
    Here is a sample of this:
    http://www.worldkit.com/swf/fader.html
    Cordially,
    Abelius
    www.worldkit.com

  8. #8
    World Kit Vote Holder Abelius's Avatar
    Join Date
    Feb 2002
    Location
    US
    Posts
    963
    Same thing, different day... oh, and simpler code:
    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;
    		}
    	}
    };
    Cordially,
    Abelius
    www.worldkit.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center