16 Replies Latest reply on Aug 24, 2007 1:50 PM by Greg Dove

    loading an array of jpgs into movieclips

    chopTheWood Level 1
      in this code, I am trying to load a bunch of .jpg images into existing movieclips that are named gridClip.mc1,gridClip.mc2...gridClip.mc14.
      The names of the jpgs to load are already in the array "imageArray[ ]".
      The problem is that of a syntax error in the line:
      var "gridClip.mc"+(kount+1):MovieClipLoader = new MovieClipLoader();

      Ordinarily you'd have something like "myVar:MovieClipLoader = new MovieClipLoader();" but I need the var to change to reflect the clip that the image is being loaded into... gridClip.mc1, gridClip.mc2 etc.

      What I want to achieve is a "progress report" that displays something like: x images out of y images have been loaded.
      Any ideas on a simpler way of doing this than what I am currently trying?
        • 1. Re: loading an array of jpgs into movieclips
          Greg Dove Level 4
          You may want to check out David Stiller's MultiLoader article /class here. It should do the type of thing you're trying to achieve.

          http://www.quip.net/blog/2007/flash/actionscript-20/tracking-multiple-files-part2

          I also have a variant of David's original class that I'm working on - which includes the ability to force queueing and provides extra progress information - it works but I haven't finished some extra features yet or done extensive testing (its a little neglected) which I hope to get back to and finish soon (I will get there next month I believe).

          • 2. Re: loading an array of jpgs into movieclips
            chopTheWood Level 1
            Thanks, GWD. I will read David's article.
            • 3. Re: loading an array of jpgs into movieclips
              albee
              I can at least help you with the syntax error. Your code should read:

              • 4. Re: loading an array of jpgs into movieclips
                chopTheWood Level 1
                Okay. I rewrote the code to reflect what I read in the first 3 pages of David's article. The problem is with the line beginning "listener.onLoadInit" This is not considered a proper parameter. So how do I state the name of the .jpg that I'm loading in terms of a variable that will equal the path/file name of the .jpg that I'm trying to load? In other words, "thumbImages/oil/"+imageArray[kount] will evaluate to something like:
                "thumbImages/oil/my_art.jpg"
                imageArray() contains all the file names from the directory "oil"

                Also, you should know that I have 42 mcs named mc1, mc2... mc42 and all those clips are contained in the clip "gridClip" So access to the clip where I want the .jpg placed is "gridClip.mc1" etc. I've tried this using the "loadMovie" method and it works fine. THe problem is that I can't monitor the progress of the downloading images.

                var mcl:MovieClipLoader=newMovieClipLoader();
                var listener:Object=new Object();
                listener.onLoadInit=function("thumbImages/oil/"+imageArray[kount]:MovieClip):Void {
                theProgress="thumbImages/oil/"+imageArray[kount] +" has loded";
                }
                mcl.addListener(listener);

                var numRowsLoaded:Number;
                function loadImages(numImages) {
                var kount:Number;
                for (kount=0; kount<numImages; ++kount) {

                mcl.loadClip("thumbImages/oil/"+imageArray[kount],"gridClip.mc"+(kount+1));
                }
                • 5. Re: loading an array of jpgs into movieclips
                  Greg Dove Level 4

                  the onLoadInit handler receives a reference to the movieclip that the image was loaded into. If you want it to know what its image source is, then you need to give it some way to access that. In this case, you can just check the name of the target clip and extract the index... then check that in your imageArray if you want.

                  Something like:

                  var mcl:MovieClipLoader=newMovieClipLoader();
                  var listener:Object=new Object();
                  listener.onLoadInit=function( target:MovieClip) {
                  var idx = Number(target._name.substr(2))-1; //gets the number from the name and makes it correspond to imageArray indexing
                  theProgress="thumbImages/oil/"+imageArray[idx] +" has loaded";
                  }
                  mcl.addListener(listener);

                  var numRowsLoaded:Number;
                  function loadImages(numImages) {
                  var kount:Number;
                  for (kount=0; kount<numImages; ++kount) {

                  mcl.loadClip("thumbImages/oil/"+imageArray[kount],"gridClip.mc"+(kount+1));
                  }


                  Let me know if you want an example with the class I mentioned earlier... I haven't played with it for a while so all I need is a an excuse to do so.
                  Its similar to David's one but has a few extra features... although like I said I haven't finished adding some more features...its here:
                  http://gregdove.web.googlepages.com/multiloaderclass-wip

                  • 6. Re: loading an array of jpgs into movieclips
                    chopTheWood Level 1
                    So I think what you're saying is that any word (except reserved words) can be used in the place of "target" variable here: listener.onLoadInit=function( target:MovieClip) because this is simply receiving data (of the type MovieClip). I was thinking that it HAD to be the name of the current image being loaded.
                    If this is the case, I believe I am clear on it and will rework it.
                    thanks, I'll let you know the result.
                    • 7. Re: loading an array of jpgs into movieclips
                      chopTheWood Level 1
                      whoa... now the images aren't loading at all. the variable imageArray[ ] does become populated with the file names and the script does reach the mc.loadclip function. But nothing happens. The listener doesn't hear anything and no images appear.

                      // LOAD ALL THUMB IMAGES INTO MOVIE CLIPS AND MAKE RADIO BUTTONS VISIBLE
                      var mcl:MovieClipLoader = newMovieClipLoader();
                      var listener:Object = new Object();
                      listener.onLoadInit = function(target:MovieClip) {
                      var idx = Number(target._name.substr(2))-1;
                      //gets the number from the name and makes it correspond to imageArray indexing
                      tempDir = "thumbImages/oil/"+imageArray[idx]+" has loaded";
                      tempDir=kount;
                      };
                      mcl.addListener(listener);
                      var numRowsLoaded:Number;
                      function loadImages(numImages) {
                      var numImages:Number;
                      var imageArray:Array;
                      progress = "loading images";
                      var kount:Number;
                      for (kount=0; kount<numImages; ++kount) {
                      mcl.loadClip("thumbImages/oil/"+imageArray[kount], "gridClip.mc"+(kount+1));

                      }
                      }
                      • 8. Re: loading an array of jpgs into movieclips
                        Greg Dove Level 4
                        sorry I didn't look at all your code, I was just focusing on the onLoadInit and missed the loadClip error.

                        This:
                        mcl.loadClip("thumbImages/oil/"+imageArray[kount],"gridClip.mc"+(kount+1));

                        Should be:
                        mcl.loadClip("thumbImages/oil/"+imageArray[kount],gridClip["mc"+(kount+1)]);

                        I think that's it, post back if that doesn't work.
                        • 9. Re: loading an array of jpgs into movieclips
                          chopTheWood Level 1
                          Nope.. still nothing. Here's a script that works... one I took from an older version. The problem with this is that it doesn't let you know when all are done loading. Maybe you can tweek this one to "listen" better. BTW: I had gridClip.mc because all the "mc" clips (1-42) are within a clip called gridClip. So gridClip.mc1, gridClip.mc2, etc. Anyway, check it out and thanks for your help.
                          function loadImages(numImages) {
                          var kount:Number = 0;
                          var numRowsLoaded:Number;

                          setProperty(pBar, _visible, true);
                          myLoader = new MovieClipLoader();
                          myListener = new Object();
                          myListener.onLoadStart = function(clip) {
                          pBar.label = "Loading Image...: ";
                          };
                          myListener.onLoadProgress = function(clip, bytesLoaded, bytesTotal) {
                          var percentLoaded = int(100*(bytesLoaded/bytesTotal));
                          pBar.setProgress(bytesLoaded, bytesTotal);
                          };
                          myLoader.addListener(myListener);
                          for (kount=0; kount<numImages; ++kount) {
                          myLoader.loadClip("oilImages/"+oilArray[kount], "gridClip.mc"+(kount+1));
                          };
                          myListener.onLoadComplete = function(clip) {
                          pBar.label = "Load Complete: ";
                          setProperty(pBar, _visible, false);

                          }
                          numRowsLoaded = Math.round((numImages+2.5)/7);
                          for (radios=1; radios<numRowsLoaded+1; radios++) {
                          setProperty("set"+radios, _visible, true);
                          _global.maxRows = numRowsLoaded;
                          }
                          }
                          • 10. Re: loading an array of jpgs into movieclips
                            chopTheWood Level 1
                            Everything working now:
                            GWD:
                            I used the old script but added your modification var idx:
                            myListener.onLoadStart = function(target) {
                            pBar.label = "Loading Image...: ";
                            setProperty("pBar",_visible,true);
                            var idx = Number(target._name.substr(2))-1;
                            tempDir = "thumbImages/oil/"+imageArray[idx]+" has loaded";

                            Everything works well now... don't know what happened in the new script but you have both of them now so you can probably tell.
                            Thanks for all your effort and for pointing me in the direction of David (?) I'll check his blog from time to time. He has a very good way of explaining things that even people like me can comprehend.
                            thanks again
                            • 11. Re: loading an array of jpgs into movieclips
                              Greg Dove Level 4
                              I've never used MovieClipLoader's loadClip with a string value for the target like that but apparently it works.

                              I think it should have worked the other way. I just realise that tempDir wasn't really being assigned anything useful because it was getting reassigned the value of kount (which may have been undefined at the time that code runs.)
                              here:
                              tempDir = "thumbImages/oil/"+imageArray[idx]+" has loaded";
                              tempDir = kount ; //this doesn't make sense.

                              If you try the other one with
                              trace("thumbImages/oil/"+imageArray[idx]+" has loaded";)
                              instead of
                              tempDir = "thumbImages/oil/"+imageArray[idx]+" has loaded";

                              then unless I'm missing something obvious - which can always happen - it should work I think
                              • 12. Re: loading an array of jpgs into movieclips
                                Greg Dove Level 4
                                And yes, I think David Stiller writes his articles extremely well. They're very easy to follow and understand.
                                • 13. Re: loading an array of jpgs into movieclips
                                  chopTheWood Level 1
                                  I'm actually using:
                                  ------------
                                  var idx = Number(target._name.substr(2))-1;
                                  currentLoading.text = (idx)+" of "+numImages+" thumbs loaded";
                                  -------------
                                  to display the current image that's being loaded (I only need the numbers, not the name of the image)

                                  One tiny problem is that the last image actually pops into view a second or so after the script says "14 of 14 thumbs loaded"

                                  I have another function that centers the images on the screen and gives them equal spacing in each row. If the the center function is called before the very last image is loaded, the last image doesn't get centered.
                                  I thought that the best way to handle this is to check to see if the last mc (mc14 in this case) has been loaded with an image. Is there a property that will tell me this?
                                  • 14. Re: loading an array of jpgs into movieclips
                                    Greg Dove Level 4
                                    Instead of doing it in onLoadStart, take a shot at doing your checks and adjustments for centering in the onLoadInit handler. onLoadStart is when the image begins to load and has not in fact loaded any bytes yet. onLoadInit is when it has download and is ready to have its properties adjusted (_xscale and _yscale for example).

                                    E.g. you may want to set target._x and target._y based on the values for target._width and target._height in onLoadInit (and the index you get from the name presumably as well for what I assume is the position in the grid layout).
                                    • 15. Re: loading an array of jpgs into movieclips
                                      chopTheWood Level 1
                                      excellent, that worked. I had been using the onLoadComplete instead on init. Also, I didn't need to check the last mc loaded (height/width). I just counted the number of images loaded:
                                      var completedKount:Number = 0;
                                      myListener.onLoadInit = function() {
                                      completedKount = completedKount+1;
                                      if (completedKount>=numImages) {
                                      centerImages(numImages);
                                      }
                                      };

                                      thanks again
                                      • 16. loading an array of jpgs into movieclips
                                        Greg Dove Level 4
                                        No problems. Its actually a lot easier with that Multiloader approach. My version lets you force the images to load in the correct order if you need that to happen as well by limiting the simultaneous downloads to 1, or track where you are in terms of measuring the uninterrupted progress of completed loads from the start of the queue if you don't force it.

                                        I'll dust it off, finish adding the extra features and do more testing, tidy it up and post some examples next month.

                                        GWD