Welcome to Dream.In.Code
Getting Help is Easy!

Join 132,658 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,180 people online right now. Registration is fast and FREE... Join Now!




How to have dynamic/external loaded image fade in

 
Reply to this topicStart new topic

How to have dynamic/external loaded image fade in

lorne17
post 11 Sep, 2008 - 11:19 AM
Post #1


New D.I.C Head

*
Joined: 26 Aug, 2008
Posts: 8

Hello there,

I have a website that I recently converted all the 50 or so images to load externally. This is a good thing because I got the .swf file size from 3.5mb to 1mb. So what I am running into with that, if you go to the site: www.countandcastle.com you'll see that when you go to portfolio and click a thumbnail there is no transition it quickly jumps back to the original homepage image and then changes. Very "jittery" feeling. Does anyone know any code I can put into the move to help load these image files with a transition? The images load into _root.imageLoader and are activated/controlled by this script on the thumbnails movie clip.

CODE
function startLoading(whichImage) {
   loadMovie(whichImage, "_root.imageLoader");
   _root.onEnterFrame = function() {
      infoLoaded = _root.imageLoader.getBytesLoaded();
      infoTotal = _root.imageLoader.getBytesTotal();
      percentage = Math.floor(infoLoaded/infoTotal*100);
      _root.infoField.text = percentage+"%";
      // Addition below to compensate for online lag, while bytes loaded & bytes total = 0...
      if (percentage>=100 && infoLoaded > 0) {
         delete this.onEnterFrame;
         _root.infoField._visible = false;
      }
   };
};


var button_num:Number = 40; // number of buttons
var button_array:Array = new Array(); // array of button instance names

//Residential buttons
button_array[1] = "btn_mc01";
button_array[2] = "btn_mc02";
button_array[3] = "btn_mc03";
button_array[4] = "btn_mc04";
button_array[5] = "btn_mc05";
button_array[6] = "btn_mc06";
button_array[7] = "btn_mc07";
button_array[8] = "btn_mc08";
button_array[9] = "btn_mc09";
button_array[10] = "btn_mc10";
button_array[11] = "btn_mc11";
button_array[12] = "btn_mc12";
button_array[13] = "btn_mc13";
button_array[14] = "btn_mc14";
button_array[15] = "btn_mc15";
button_array[16] = "btn_mc16";
button_array[17] = "btn_mc17";
button_array[18] = "btn_mc18";
button_array[19] = "btn_mc19";
button_array[20] = "btn_mc20";
button_array[21] = "btn_mc21";
button_array[22] = "btn_mc22";
button_array[23] = "btn_mc23";
button_array[24] = "btn_mc24";
button_array[25] = "btn_mc25";
button_array[26] = "btn_mc26";
button_array[27] = "btn_mc27";
button_array[28] = "btn_mc28";
button_array[29] = "btn_mc29";
button_array[30] = "btn_mc30";
button_array[31] = "btn_mc31";
button_array[32] = "btn_mc32";
button_array[33] = "btn_mc33";
button_array[34] = "btn_mc34";
button_array[35] = "btn_mc35";
button_array[36] = "btn_mc36";
button_array[37] = "btn_mc37";
button_array[38] = "btn_mc38";
button_array[39] = "btn_mc39";
button_array[40] = "btn_mc40";
button_array[41] = "btn_mc41";
button_array[42] = "btn_mc42";
button_array[43] = "btn_mc43";
button_array[44] = "btn_mc44";

var btn_mc:MovieClip // temporary reference to button instance

// loop through array of buttons and assign actions
for (var i=0; i<button_array.length; i++) {
    
    btn_mc = this[button_array[i]];
    
    btn_mc["id"] = i; // create a unique id on this button

    btn_mc.onRelease = function() {
     infoField._visible = true;
     if(this.id < 10){
            startLoading("Creative/New Portfolio/residential enlarged/image0"+this.id+".jpg");
        }else{
            startLoading("Creative/New Portfolio/residential enlarged/image"+this.id+".jpg");
        }
    };
    
    btn_mc.onRollOver = function() {
        this.gotoAndPlay("t1");
    };
    
    btn_mc.onRollOut = function() {
        this.gotoAndPlay("t2");
    };

}// end loop


Any help would be greatly appreciated. I'd like to get this fixed soon, to avoid unhappy website visitors tongue.gif

Thanks,
Lorne

User is offlineProfile CardPM

Go to the top of the page

DilutedImage
post 24 Sep, 2008 - 07:15 PM
Post #2


D.I.C Addict

Group Icon
Joined: 20 Nov, 2006
Posts: 642



Thanked 6 times

Dream Kudos: 25
My Contributions


Set the new image's opacity to zero before loading it, and then create an onEnterFrame handler that increments the opacity and removes itself when it reaches 100.

A search would help too. There is plenty of image gallery code floating around this site, most of which contain image fades.

User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 11/23/08 05:36AM

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month