11 Replies Latest reply on Jul 10, 2009 9:25 AM by kglad

    How to play the main timeline after a movie clip is finished playing.

    meghanlundy

      Ok so here is the problem, I have the main time line with three layers: My actions layer, a music layer, and the movie clip layer.

       

      The movie clip is an actionscript movie which calls images from an external XML file and shows them as a slideshow. What i need to do is after the last image plays, stop the movie and move the main timeline to the next scene of the main movie. Everything logical in my brain is not working, and it may be that I have been staring at this project for too long but for the life of me i can't make this work.

       

      Any help or input would be greatly appreciated!

       

      Thanks in advance.

       

      Meghan

        • 1. Re: How to play the main timeline after a movie clip is finished playing.
          kglad Adobe Community Professional & MVP

          in your code, can you determine when the last slide plays?

          • 2. Re: How to play the main timeline after a movie clip is finished playing.
            meghanlundy Level 1

            Hmmm, yes I have the script right now telling the movie to stop and fade to black after the last image. See below example:

             

            function nextPhoto() {
                _index++;
                if (_index == xml.firstChild.childNodes.length) {
                }                                                                        
                if (mcHolder["mcPhoto"+_index].loaded) {
                    showPicture(mcHolder["mcPhoto"+_index]);
                } else {
                    TweenLite.to(mcPreloader,.5,{_alpha:0});
                    TweenLite.to(mcBlack,.5,{_alpha:100});
                }
            }

            • 3. Re: How to play the main timeline after a movie clip is finished playing.
              kglad Adobe Community Professional & MVP

              then label your frame in the next scene (say "frame1_scene2") and use:

               

               

              function nextPhoto() {
                  _index++;
                  if (_index == xml.firstChild.childNodes.length) {
                  }                                                                        
                  if (mcHolder["mcPhoto"+_index].loaded) {
                      showPicture(mcHolder["mcPhoto"+_index]);
                  } else {
                      TweenLite.to(mcPreloader,.5,{_alpha:0});
                      TweenLite.to(mcBlack,.5,{_alpha:100,onComplete:completeF});
                  }
              }

               

              function completeF(){

              _root.gotoAndPlay("frame1_scene2");

              }

              • 4. Re: How to play the main timeline after a movie clip is finished playing.
                meghanlundy Level 1

                so far, not working....

                 

                any other ideas?

                • 5. Re: How to play the main timeline after a movie clip is finished playing.
                  meghanlundy Level 1

                  I forgot, I have code in after in case I wanted to put buttons in the movie that may be jamming it up...

                   

                  //function that changes to the next photo

                  function nextPhoto() {
                      _index++;
                      if (_index == xml.firstChild.childNodes.length) {
                      }
                      //if picture is loaded, just show it. if not, wait until it loads                                                                           
                      if (mcHolder["mcPhoto"+_index].loaded) {
                          showPicture(mcHolder["mcPhoto"+_index]);
                      } else {
                          TweenLite.to(mcPreloader,.5,{_alpha:0});
                          TweenLite.to(mcBlack,.5,{_alpha:100,onComplete:completeF});
                      }
                  }
                  function completeF(){
                  _root.gotoAndPlay("frame1_scene2");

                   

                  }
                  //function that changes to the previous photo
                  function prevPhoto() {
                      _index--;
                      if (_index == -1) {
                          _index = xml.firstChild.childNodes.length-1;
                      }                                                                          
                      if (mcHolder["mcPhoto"+_index].loaded) {
                          showPicture(mcHolder["mcPhoto"+_index]);
                      } else {
                          TweenLite.to(mcPreloader,.5,{_alpha:100});
                          TweenLite.to(mcBlack,.5,{_alpha:80});
                      }
                  }

                  • 6. Re: How to play the main timeline after a movie clip is finished playing.
                    meghanlundy Level 1

                    better yet, here is the whole code. With your suggestion entered...

                     

                     

                    import flash.display.BitmapData;
                    import gs.*;
                    import gs.easing.*;
                    import gs.plugins.*;
                    TweenPlugin.activate([BlurFilterPlugin]);
                    OverwriteManager.init();

                     


                    var xml:XML = new XML();
                    xml.ignoreWhite = true;
                    _root.xmlPath == undefined ? xml.load("jake.xml") : xml.load(_root.xmlPath);

                     

                    //when xml is loaded
                    xml.onLoad = function(succes:Boolean) {
                        if (succes) {
                            //position the slideshow. remember size.
                            __width = Number(xml.firstChild.attributes.width);
                            __height = Number(xml.firstChild.attributes.height);
                            mcMask._width = mcBlack._width=mcHyper._width=__width;
                            mcMask._height = mcBlack._height=mcHyper._height=__height;

                     

                            //preloader
                            mcPreloader._x = __width/2;
                            mcPreloader._y = __height/2;
                            (new Color(mcPreloader).setRGB(Number(xml.firstChild.attributes.preloaderColor)));

                     

                            //buttons
                            var buttonLoader:MovieClipLoader = new MovieClipLoader();
                            var buttonListener:Object = new Object();
                            buttonListener.onLoadInit = function(cButton:MovieClip) {
                                if (cButton._parent == btnNext) {
                                    cButton._parent._x = __width-cButton._width;
                                } else if (cButton._parent == btnPrev) {
                                    cButton._parent._x = 0;
                                } else {
                                    cButton._parent._x = (__width-cButton._width)/2;
                                }
                                cButton._parent._y = (__height-cButton._height)/2;
                            };
                            buttonLoader.addListener(buttonListener);
                            buttonLoader.loadClip(xml.firstChild.attributes.prevButton,btnPrev.holder);
                            buttonLoader.loadClip(xml.firstChild.attributes.nextButton,btnNext.holder);
                            buttonLoader.loadClip(xml.firstChild.attributes.playButton,btnPlay.holder);
                            buttonLoader.loadClip(xml.firstChild.attributes.pauseButton,btnPause.holder);

                     

                            xml.firstChild.attributes.slideshowOn == "true" ? [_slideshow=true, btnPlay._visible=false] : [_slideshow=false, btnPause._visible=false];

                     

                            for (var i:Number = 0; i<xml.firstChild.childNodes.length; i++) {
                                //create empty movieclip for each picture. create mask movieclip for each picture. save transition and ken burns settings for each picture. save other properties for each picture.
                                mcTemp.createEmptyMovieClip("mcPhoto"+i,mcTemp.getNextHighestDepth());
                                mcHolder.createEmptyMovieClip("mcPhoto"+i,mcHolder.getNextHighestDepth());
                                mcHolder["mcPhoto"+i].createEmptyMovieClip("photo",mcHolder["mcPhoto"+i].getNextHighestDe pth());

                     

                                //attach text clip and set it up
                                mcHolder.attachMovie("square2","mcBack",mcHolder.getNextHighestDepth());
                                mcText.attachMovie("text","text"+i,mcText.getNextHighestDepth());
                                mcText["text"+i].mcText._alpha = mcBack._alpha=0;
                                mcBack._width = mcText["text"+i].mcText._width=__width;
                                mcText["text"+i].mcText.autoSize = true;
                                mcBack._height = 0;
                                mcBack._y = __height;
                                (new Color(mcBack).setRGB(Number(xml.firstChild.attributes.textBackColor)));

                     

                                mcHolder["mcPhoto"+i].transition = Number(xml.firstChild.childNodes[i].attributes.transition);

                     

                                var burns:Array = String(xml.firstChild.childNodes[i].attributes.kenBurns).split(";");
                                mcHolder["mcPhoto"+i].burns = burns;

                     

                                mcHolder["mcPhoto"+i].time = Number(xml.firstChild.childNodes[i].attributes.time);
                                mcHolder["mcPhoto"+i].src = String(xml.firstChild.childNodes[i].attributes.src);
                                mcHolder["mcPhoto"+i].txt = String(xml.firstChild.childNodes[i].firstChild.nodeValue);
                                mcHolder["mcPhoto"+i].url = String(xml.firstChild.childNodes[i].attributes.url);
                                mcHolder["mcPhoto"+i].target = String(xml.firstChild.childNodes[i].attributes.target);

                     

                                //handle loading process. create loader objects. start "intelligent loading". set methods and actions for new newly loaded pictures.
                                var photoLoader:MovieClipLoader = new MovieClipLoader();
                                var photoListener:Object = new Object();

                     

                                photoListener.onLoadInit = function(cPhoto:MovieClip) {
                                    //transform image to bitmap
                                    cPhoto._visible = false;
                                    var tempBitmap:BitmapData = new BitmapData(cPhoto._width, cPhoto._height);
                                    tempBitmap.draw(cPhoto);
                                    var cPhoto2:Object = mcHolder["mcPhoto"+_loaded].photo;
                                    cPhoto2.attachBitmap(tempBitmap,1,"auto",true);
                                    photoLoader.unloadClip(cPhoto);
                                    removeMovieClip(cPhoto);
                                    cPhoto2._parent._visible = false;

                     

                                    //remember original size
                                    cPhoto2._parent.width2 = cPhoto2._parent._width;
                                    cPhoto2._parent.height2 = cPhoto2._parent._height;

                     

                                    cPhoto2._alpha = 0;

                     

                                    _loaded++;
                                    cPhoto2._parent.loaded = true;

                     

                                    if (_loaded<xml.firstChild.childNodes.length) {
                                        //load next picture
                                        photoLoader.loadClip(mcHolder["mcPhoto"+_loaded].src,mcTemp["mcPhoto"+_loaded]);
                                    }
                                    if (_loaded == _index+1) {
                                        //show this picture
                                        showPicture(cPhoto2._parent);
                                    }
                                };
                                photoLoader.addListener(photoListener);
                            }
                            photoLoader.loadClip(mcHolder.mcPhoto0.src,mcTemp.mcPhoto0);
                        }
                    };

                     

                    //function that changes to the next photo(slideshow feature)
                    function nextPhoto() {
                        _index++;
                        if (_index == xml.firstChild.childNodes.length) {
                        }
                        //if picture is loaded, just show it. if not, wait until it loads                                                                           
                        if (mcHolder["mcPhoto"+_index].loaded) {
                            showPicture(mcHolder["mcPhoto"+_index]);
                        } else {
                            TweenLite.to(mcPreloader,.5,{_alpha:0});
                            TweenLite.to(mcBlack,.5,{_alpha:100,onComplete:completeF});
                        }
                    }
                    function completeF(){
                    _root.gotoAndPlay("frame1_scene2");

                     

                    }
                    //function that changes to the previous photo
                    function prevPhoto() {
                        _index--;
                        if (_index == -1) {
                            _index = xml.firstChild.childNodes.length-1;
                        }
                        //if picture is loaded, just show it. if not, wait until it loads                                                                           
                        if (mcHolder["mcPhoto"+_index].loaded) {
                            showPicture(mcHolder["mcPhoto"+_index]);
                        } else {
                            TweenLite.to(mcPreloader,.5,{_alpha:100});
                            TweenLite.to(mcBlack,.5,{_alpha:80});
                        }
                    }

                     

                    //buttons - roll overs
                    btnNext.onRollOver = btnPrev.onRollOver=btnPause.onRollOver=btnPlay.onRollOver=function () {
                        TweenLite.to(this,1,{_alpha:70});
                    };
                    btnNext.onRollOut = btnPrev.onRollOut=btnPause.onRollOut=btnPlay.onRollOut=btnNext.onReleaseOutside=btnPrev.o nReleaseOutside=btnPause.onReleaseOutside=btnPlay.onReleaseOutside=function () {
                        TweenLite.to(this,1,{_alpha:100});
                    };
                    //buttons - next
                    btnNext.onPress = function() {
                        if (!_transition) {
                            clearTimeout(nextT);
                            nextPhoto();
                        } else {
                            clearTimeout(nextT);
                            nextT = setTimeout(nextPhoto, 500);
                        }
                    };
                    //buttons - previous
                    btnPrev.onPress = function() {
                        if (!_transition) {
                            clearTimeout(nextT);
                            prevPhoto();
                        } else {
                            clearTimeout(nextT);
                            nextT = setTimeout(prevPhoto, 500);
                        }
                    };
                    //buttons - play
                    btnPlay.onPress = function() {
                        switchVisible(btnPlay);
                        switchVisible(btnPause);

                     

                        _slideshow = true;
                        if (!_transition) {
                            clearTimeout(nextT);
                            nextPhoto();
                        } else {
                            clearTimeout(nextT);
                            nextT = setTimeout(nextPhoto, 500);
                        }
                    };
                    //buttons - pause
                    btnPause.onPress = function() {
                        switchVisible(btnPlay);
                        switchVisible(btnPause);

                     

                        _slideshow = false;
                        clearTimeout(nextT);
                    };

                     

                    //function that animates text(html for each picture)
                    function inText(cPhoto:Object) {
                        if (cPhoto.txt != "undefined") {
                            mcText["text"+_index].mcText.htmlText = cPhoto.txt;
                            mcText["text"+_index].mcText._y = mcBack._y-mcText["text"+_index].mcText._height-4;

                     

                            TweenMax.to(mcText["text"+_index].mcText,0,{blurFilter:{blurX:15, blurY:15, quality:1}});
                            TweenMax.to(mcText["text"+_index].mcText,Number(xml.firstChild.attributes.textSpeed),{blu rFilter:{blurX:0, blurY:0}, _alpha:100});
                            TweenLite.to(mcBack,Number(xml.firstChild.attributes.textSpeed),{_alpha:Number(xml.firstC hild.attributes.textBackOpacity), _height:mcText["text"+_index].mcText._height+7});
                        } else {
                            mcText["text"+_index].mcText.htmlText = "";
                            TweenLite.to(mcBack,Number(xml.firstChild.attributes.textSpeed),{_alpha:Number(xml.firstC hild.attributes.textBackOpacity), _height:0});
                        }
                    }
                    function outText(cPhoto:Object) {
                        TweenLite.to(mcBack,.5,{_alpha:0});
                        TweenLite.to(mcText["text"+_index2].mcText,.5,{_alpha:0});
                    }

                     

                    //function that applies the ken burns effect to a specific photo
                    function kenBurns(cPhoto:Object) {
                        //reset size and position
                        cPhoto.photo._xscale = cPhoto.photo._yscale=Number(cPhoto.burns[0]);
                        cPhoto.photo._x = returnPosition(cPhoto.burns[2], cPhoto.photo._width, cPhoto.photo._height, mcMask._width, mcMask._height).__x;
                        cPhoto.photo._y = returnPosition(cPhoto.burns[2], cPhoto.photo._width, cPhoto.photo._height, mcMask._width, mcMask._height).__y;

                     

                        //start effect
                        TweenLite.to(cPhoto.photo,cPhoto.transition+Number(cPhoto.time)+1,{_xscale:Number(cPhoto. burns[1]), _yscale:Number(cPhoto.burns[1]), _x:returnPosition(cPhoto.burns[3], cPhoto.width2, cPhoto.height2, mcMask._width, mcMask._height).__x, _y:returnPosition(cPhoto.burns[3], cPhoto.width2, cPhoto.height2, mcMask._width, mcMask._height).__y, ease:Linear.easeNone});

                     

                    }

                     

                    //function that shows a picture(transition function)
                    function showPicture(cPhoto:Object) {
                        for (var i:Number = 0; i<xml.firstChild.childNodes.length; i++) {
                            if (i == _index || i == _index2) {
                                mcHolder["mcPhoto"+i]._visible = true;
                            }else{
                                mcHolder["mcPhoto"+i]._visible = false;
                            }
                        }
                        cPhoto.swapDepths(mcHolder.getNextHighestDepth());

                     

                        setTimeout(hideOld,cPhoto.transition*1000,mcHolder["mcPhoto"+_index2]);
                        //text
                        outText(mcHolder["mcPhoto"+_index2]);
                        _index2 = _index;
                        inText(cPhoto);

                     

                        kenBurns(cPhoto);

                     

                        TweenLite.to(mcPreloader,.5,{_alpha:0});
                        TweenLite.to(mcBlack,.5,{_alpha:0});

                     

                        //transition variable
                        _transition = true;
                        clearTimeout(transT);
                        transT = setTimeout(switchTransition, cPhoto.transition*1000);

                     

                        cPhoto.photo._alpha = 0;
                        TweenLite.to(cPhoto.photo,cPhoto.transition,{_alpha:100});

                     

                        if (_slideshow) {
                            //if slideshow is on
                            nextT = setTimeout(nextPhoto, (cPhoto.transition+cPhoto.time)*1000);
                        }
                    }

                     

                    function hideOld(what:Object){

                     

                    }

                     

                    //hyperlinks
                    mcHyper.useHandCursor = true;
                    mcHyper.onPress = function() {
                        if (mcHolder["mcPhoto"+_index].url != "undefined") {
                            getURL(mcHolder["mcPhoto"+_index].url, mcHolder["mcPhoto"+_index].target);
                        }
                    };

                     

                    //function that returns a number position from a given "compass position"(for the ken burns effect)
                    function returnPosition(pos:String, __width:Number, __height:Number, __width2:Number, __height2:Number):Object {
                        var returnObj:Object = new Object();

                     

                        switch (pos) {
                            case "TL" :
                                returnObj.__x = 0;
                                returnObj.__y = 0;
                                break;
                            case "TC" :
                                returnObj.__x = -(__width-__width2)/2;
                                returnObj.__y = 0;
                                break;
                            case "TR" :
                                returnObj.__x = -(__width-__width2);
                                returnObj.__y = 0;
                                break;
                            case "ML" :
                                returnObj.__x = 0;
                                returnObj.__y = -(__height-__height2)/2;
                                break;
                            case "MC" :
                                returnObj.__x = -(__width-__width2)/2;
                                returnObj.__y = -(__height-__height2)/2;
                                break;
                            case "MR" :
                                returnObj.__x = -(__width-__width2);
                                returnObj.__y = -(__height-__height2)/2;
                                break;
                            case "BL" :
                                returnObj.__x = 0;
                                returnObj.__y = -(__height-__height2);
                                break;
                            case "BC" :
                                returnObj.__x = -(__width-__width2)/2;
                                returnObj.__y = -(__height-__height2);
                                break;
                            case "BR" :
                                returnObj.__x = -(__width-__width2);
                                returnObj.__y = -(__height-__height2);
                                break;
                        }

                     

                        return returnObj;
                    }

                     

                    function switchTransition() {
                        _transition == true ? _transition=false : _transition=true;
                    }
                    function switchVisible(obj:Object) {
                        obj._visible == true ? obj._visible=false : obj._visible=true;
                    }
                    mcTemp._x = -10000;

                     

                    //mouse testing
                    var mouse_dx:Number = _xmouse;
                    var mouse_dy:Number = _ymouse;
                    var mouseSpeed:Number = 1;

                     

                    function checkPosition(Void):Void {
                        if (_xmouse<mouseSpeed || _xmouse>(Stage.width-mouseSpeed) || _ymouse<mouseSpeed || _ymouse>(Stage.height-mouseSpeed)) {
                            //mouse outside - hide buttons
                            TweenLite.to(btnPrev,.5,{_alpha:0});
                            TweenLite.to(btnNext,.5,{_alpha:0});
                            TweenLite.to(btnPlay,.5,{_alpha:0});
                            TweenLite.to(btnPause,.5,{_alpha:0});
                        } else {
                            //mouse inside
                            TweenLite.to(btnPrev,.5,{_alpha:100});
                            TweenLite.to(btnNext,.5,{_alpha:100});
                            TweenLite.to(btnPlay,.5,{_alpha:100});
                            TweenLite.to(btnPause,.5,{_alpha:100});
                        }
                    }
                    checkPosition(Void);

                     

                    var mouseListener:Object = new Object();
                    mouseListener.onMouseMove = function():Void  {
                        mouse_dx = Math.abs(mouse_dx-_xmouse);
                        mouse_dy = Math.abs(mouse_dy-_ymouse);

                     

                        mouseSpeed = mouse_dx>mouse_dy ? mouse_dx : mouse_dy;
                        mouseSpeed += 1;

                     

                        checkPosition(Void);

                     

                        mouse_dx = _xmouse;
                        mouse_dy = _ymouse;
                    };
                    Mouse.addListener(mouseListener);

                     

                    //global variables
                    var this2:Object = this;
                    var __width:Number;
                    var __height:Number;

                     

                    var _index:Number = 0;
                    var _index2:Number = -1;
                    var _loaded:Number = 0;

                     

                    var nextT:Number;
                    var transT:Number;

                     

                    var _slideshow:Boolean = true;
                    var _transition:Boolean = false;

                     

                    Stage.scaleMode = "noScale";
                    Stage.showMenu = false;
                    Stage.align = "TL";

                    • 7. Re: How to play the main timeline after a movie clip is finished playing.
                      kglad Adobe Community Professional & MVP

                      is mcBlack fading in?  if so, make sure you labeled that frame correctly.

                      • 8. Re: How to play the main timeline after a movie clip is finished playing.
                        meghanlundy Level 1

                        yes its fading in fine, basically the slideshow fades to black and the movie seems to just pause because the music keeps playing.

                         

                        The Frame? there isn't a frame animation involved.

                        • 9. Re: How to play the main timeline after a movie clip is finished playing.
                          meghanlundy Level 1

                          All the animation is done through actionscript and external as files, there are no frame by frame actions...

                          • 10. Re: How to play the main timeline after a movie clip is finished playing.
                            meghanlundy Level 1

                            I got it!

                             

                            Thanks to all who have helped and offered assistance!

                             

                            Its not moving to the next scene but advancing to the next frame.So I will take it!