14 Replies Latest reply: Nov 7, 2011 1:58 PM by Ned Murphy RSS

    Multiple movie clips

    clansman132

      Hi everyone.

       

      I have 170 images that I need to place on the same place on the left side of the stage and and have them move across the stage one at a time, increase in size and then fade out after 10 sec. The sequence then continues for all 169 images.

       

      My initial thoughts are to animate the first image inside a movie clip, duplicate it and swap the image. When I tried this it worked fine until the image had shape tweened to the larger size (at this point the image displays for 10 sec and fades out). At the key frame at this point the image changed back to the original one. What do I need to do to make the new image visible throughout the whole movie clip when I swap the image like this?

       

      Is there a better way to produce this type of animation?

       

      I am using Flash Professional 8 and quite new to the world of Flash and Action Script.

       

      Your help would be much appreciated.

       

      Robbie.

        • 1. Re: Multiple movie clips
          clansman132 Community Member

          Hi again.

           

          I have had some success with image swap problem. I discovered I had to change the image twice within the MC to make it work, so that's that one fixed. So I guess the problem is how to best stack 170 movie clips and have them play one after the other!

           

          Robbie.

          • 2. Re: Multiple movie clips
            Ned Murphy CommunityMVP

            You should load the images dynaically rather than have them all loaded and stacked atop one another.  That will make your file much fatser loading.  You should look into using the MovieClipLoader class for this, as you can use a listener (see its addListener method) to detect when the file is loaded and then take action to process it to move and enlarge.  For the movement and enlargement you should look into using TweenLite.  YOu could use the built-in Tween class as well, but will get better results using TweenLite.

            • 3. Re: Multiple movie clips
              Peter Celuch Community Member

              I agree with Ned. Although if you want to be fully in control of the animation best way to do it is with animation MovieClip with a holder. You then just replace holder contents. I wrote little tutorial for you how to do it.

               

              1) Create a new layer

              2) Draw a rectangle in it, make it the same size as your images are

              3) Convert the rectangle to MovieClip with its registration point set to UPPER LEFT corner

              4) Give it an instance name "mc_holder"

              5) Convert the mc_holder to MovieClip (again)

              6) Give it an instance name "mc_animation"

              7) Doubleclick on mc_animation, animate the mc_holder as you want your images to be animated

              8) Put this code to the LAST FRAME of mc_animation:

               

              import flash.events.Event;
              
              stop();
              dispatchEvent(new Event(Event.COMPLETE));
              

               

              9) In your actions frame (of mc_animation's parent), add this code:

               

              var pictureIndex:int = 0;
              var pictures:Array = [];
              
              mc_animation.gotoAndStop(1);
              mc_animation.visible = false;
              mc_animation.addEventListener(Event.COMPLETE, animationCompleteHandler);
              
              loadPictures();
              
              
              function loadPictures():void {
                   // you should load pictures and store them in the pictures Array
                   // when you're done loading pictures, call loadPicturesComplete()
              }
              
              function loadPicturesComplete():void {
                   showNextPicture();
                   mc_animation.visible = true;
              }
              
              function clearAnimationHolder():void {
                  while(mc_animation.mc_holder.numChildren > 0) {
                      mc_animation.mc_holder.removeChildAt(0);
                  }
              }
              
              function showNextPicture():void {
                  if(pictureIndex < pictures.length) {
                      clearAnimationHolder();
                      mc_animation.mc_holder.addChild(pictures[pictureIndex]);
                      mc_animation.gotoAndPlay(1);
                  }
                  else {
                      trace("DONE SHOWING PICTURES");
                  }
              }
              
              function animationCompleteHandler(event:Event):void {
                   // if you want co cycle through images in infinite loop, try this instead of the next line: pictureIndex = (pictureIndex + 1) % pictures.length;
                  pictureIndex++;
              
                  showNextPicture();
              }
              
              • 4. Re: Multiple movie clips
                Ned Murphy CommunityMVP

                The op is using Flash 8, so AS3 code isn't going to help.

                • 5. Re: Multiple movie clips
                  Peter Celuch Community Member

                  Wow I missed that. Now why would you do such a thing, Clansman? I guess the code I provided could be easily transformed to AS2.

                  • 6. Re: Multiple movie clips
                    Ned Murphy CommunityMVP
                    I guess the code I provided could be easily transformed to AS2.

                    Possibly by someone who has good experience with Flash and both versions of AS, but per the op, its not likely to be within his ability

                    • 7. Re: Multiple movie clips
                      clansman132 Community Member

                      Ned, Peter.

                       

                      Thanks for taking the time to help.

                       

                      In answer to your question Peter, I am putting together a presentation to celebrate 10 years of entertainment that has been provided by our local School/Community centre. I have 170 posters of the events that were staged there. Basically, the presentation will start with a opening theatre curtain to reveal the theatre stage. To the left of the stage will be an easel where the posters will sit and then tween out to the right side of the stage one at a time. The presentation will be self running and used during the celebrations next year to show guests and sponsors what we have achieved in the last 10 years.

                       

                      Ned is right, I don't have the experience to do much in action script, however Peter, if you have the time do do a little hand holding I'm more than willing to get stuck in (great opportunity for me to learn)!

                      • 8. Re: Multiple movie clips
                        Peter Celuch Community Member

                        I'm sorry Clansman for misunderstanding, that was the rethorical question about your choice of AS2. The project seems nice, though. That's a lot of activity you got there for 10 years (170 poster..).

                        By learning oportunity, you meant that you would switch to AS3? Because I, personally can't help you with the AS2 - I haven't spoken the language for 4 years now. Max I can write is "stop();" and "play();" in AS2 and... maybe some curly braces too.

                        • 9. Re: Multiple movie clips
                          Ned Murphy CommunityMVP

                          I've made a sample file saved for Flash 8 that you can hopefully play with and see how to tweak it to your needs.  It pretty much does as you described functionally, except as I mentioned, it uses the MovieClipLoader class to dynamically load the images, and the built-in Tween class for the animations.  So what you need to do is assign the filenames (as many as you want) to the array in places of the ones I used (b1,b2,b3) and work it from there. 

                           

                          Note, my code asumed ".jpg" files, so the array only holds the name half of the filenames -- the ".jpg" part is added later in the loader line.  The images should be in the same folder as the html/swf file for what I've done.  Just filling the array is sufficient to get a working output... so maybe experience that first before you start revamping it for your stage size, visuals, and whatnot.

                           

                          I hope you will take some time to play with it and experiment with things to gain an understanding of how it works.  Don't be afraid of breaking what you download and getting a fresh copy if needed - I don't see it going away anytime soon.   Code-wise, it was developed literally from the top down, so you might find it semi-easy to reason out in terms of the sequential approach to the processing.

                           

                          Here's the link, my guess is you will find it a lightweight compared to what you might have already devised....

                           

                          http://www.bedwebs.com/Flash/AS2_Load_Images.fla

                          • 10. Re: Multiple movie clips
                            clansman132 Community Member

                            Hi Ned.

                             

                            Thank you for taking the time to make the sample file. Unfortunately, the link does not work.

                            • 11. Re: Multiple movie clips
                              clansman132 Community Member

                              Hi Peter.

                               

                              I'm stuck with AS2 for the time being. I will keep your example tucked away until I make the jump to AS3. Thanks for your help.

                              • 12. Re: Multiple movie clips
                                Ned Murphy CommunityMVP

                                Typo (what's new?)  change it to nedwebs instead of bedwebs

                                • 13. Re: Multiple movie clips
                                  clansman132 Community Member

                                  Thanks Ned.

                                   

                                  I'll let you know how I get on. I've ordered up a book on AS2 so I'll read up on all the functions as I work through your sample file. Cheers.

                                  • 14. Re: Multiple movie clips
                                    Ned Murphy CommunityMVP

                                    You're welcome