0 Replies Latest reply on Sep 17, 2009 11:57 AM by yujai@hotmail.com

    Timeline like navigation  using tween class

    yujai@hotmail.com

      I am a beginner, please help!

      So I want to create a timeline nav like this site:
      http://us.leica-camera.com/photography/m_system/m9/

      timeline is a 40 x 40px color filled movie clip that use as the playhead. 
      featContent is the movie clip that contains the feature content.

      I make the timeline controls the feature contents to slide (using tween class) to the next feature. No problem on this, but I can't make the feature to slide when click on the button.

      Please shed some lights!  Thank you very much!

      function loadFeature(node){
            var m = 0;

            this.createEmptyMovieClip("featNav",50);
            this.timeline._xscale = 1;

           this.createEmptyMovieClip("featContent",10);

            this.featNav._x = featNav_x;
            this.featNav._y = featNav_y;
            featl = node.childNodes.length;
                 fBtnW = (featNav_w/featl);
                 duration = 10*featl;

            for(var x=0; x < featl; x++){
                 //create nav buttons
                 feat[x] = node.childNodes[x];
                this.button = this.featNav.attachMovie("menu_btn","featBtn"+x,x+  1);
                 this.button.menu_txt.text = feat[x].attributes.name;
                 this.button.menu_txt.embedFonts = true;
                 this.button.menu_txt.autoSize = true;
                 this.button.menu_txt.setTextFormat(menuTxtFmt);
                 this.button.mask_mc._width = this.button.menu_txt._width;
                 this.button._x = 20 + fBtnW*x;    
                this.button.curNum = x;

                 //onClick
                 this.button.mask_mc.onRelease = function(){
                      if (this._parent._parent._parent.overlay._y > -this._parent._parent._parent.overlay._height){
                           removeOverlay();
                      }
                      feat = this._parent._parent._parent.featContent;

                     count = this._parent.curNum;
                      newX = -Stage.width*count;
                      moveTimeline = new Tween(this._parent._parent._parent.timeline, "_xscale", None.easeIn, (422*count), 1850, (duration-10*count), true);
                      slideFeature = new Tween(feat, "_x", Regular.easeOut, feat._x, newX, 0.4, true);
                 }
            };

                 var t_listen = new Object;

                 t_listen.onMotionChanged = function(target){
                 if (count == 0){
                      for(var i=0; i < featl; i++){
                           if (target.obj._xscale > (422*i)){
                                newX = -Stage.width*i;
                                slideFeature = new Tween(target.obj._parent.featContent, "_x", Regular.easeOut, target.obj._parent.featContent._x, newX, 0.4, true);
                           }
                      }
                 }
            }

                 var moveTimeline:Tween;
                 moveTimeline = new Tween(this.timeline, "_xscale", None.easeIn, 1, 1850, duration, true);

                 moveTimeline.onMotionFinished = function(){
                           moveTimeline.start();
                 }


            moveTimeline.addListener(t_listen);
      };