3 Replies Latest reply on Jul 11, 2016 9:03 AM by ClayUUID

    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.