4 Replies Latest reply on Apr 20, 2018 8:17 AM by jeffery wright

    how to create seekbar for the animation build in flash html5 canvas

    rajee331

      Hi,

      I created a animation in html5 canvas option in flash CC. I want to control the animation using the seek bar ( progress bar ). Can anyone guide me, how to create the same.

      Thanks in Advance.

        • 2. Re: how to create seekbar for the animation build in flash html5 canvas
          Milroy Level 1
          var totalFrame;
          var unitFrame;
          var unitSlide;
          var playMode;
          var sliderInitX = 0;
          var currMovie = this.parent;
          var _this = this;
          var BarMc = this["barMc"];
          
          
          
          
          function setSlider()
          {
            totalFrame = currMovie.timeline.duration;
            unitFrame = (totalFrame / (BarMc.nominalBounds.width));
            unitSlide = (BarMc.nominalBounds.width) / totalFrame;
          
            _this.sliderBtn.x = sliderInitX;
          
          
            playMode = true;
            setInterval(function(){onEnter();}, 33);
          
          
            BarMc.addEventListener("click", onClick);
          
          
          }
          
          
          function onClick(evt)
          {
            var stageXpos = stage.mouseX-(58);
            _this.sliderBtn.x = stageXpos;
            var movFrame = Math.round((_this.sliderBtn.x - (BarMc.x-(BarMc.nominalBounds.width/2))) * unitFrame);
            if ((movFrame< currMovie.timeline.duration) && playMode && (currMovie.timeline.position != currMovie.timeline.duration)) {
            currMovie.gotoAndPlay(movFrame);
            } else if (movFrame > currMovie.timeline.duration) {
            currMovie.gotoAndStop(currMovie.timeline.duration);
            playMode = false;
            } else {
            currMovie.gotoAndStop(movFrame);
            playMode = false;
            }
          }
          
          
          setSlider();
          
          
          function onEnter(){
            if (playMode) {
            _this.sliderBtn.x = BarMc.x + (unitSlide * currMovie.timeline.position) - (BarMc.nominalBounds.width/2);
            if (_this.sliderBtn.x > (BarMc.x + (BarMc.nominalBounds.width))) {
            _this.sliderBtn.x = (BarMc.x + (BarMc.nominalBounds.width));
            }
            }
          }
          

           

           

          name the bar = barMc

          and the handle = sliderBtn

          • 3. Re: how to create seekbar for the animation build in flash html5 canvas
            ClayUUID Adobe Community Professional

            This won't work as expected for any timeline audio though, since HTML5 mode doesn't support streaming audio. At best you can seek to where a particular audio clip starts and let it play from there.

            • 4. Re: how to create seekbar for the animation build in flash html5 canvas
              jeffery wright Level 1

              This is what that code produced for me: Draggable_Scrubber_01

               

              It is very interesting, but it doesn't seem to scrub the timeline at all; I put the scrubber Clip assets into a Clip, to control the parent timeline, which has a stop() command on the first frame.

               

              The handle "sliderBtn" should be what is draggable, but this code only makes the barMc react to clicks along its width, which starts the timeline animating until it loops back around to the first frame.

               

              When I make the sliderBtn draggable, it does not control the timeline, either.

               

              Also, when I change line 26 from BarMc.addEventListener("click", onClick); 

               

              to  sliderBtn.addEventListener("click", onClick); or this.sliderBtn.addEventListener("click", onClick);  the scrubber Clip does not appear at all when published.

               

              Any idea how to get the sliderBtn to be draggable and control the parent timeline?

               

              Thanks!