3 Replies Latest reply on Jun 15, 2009 1:04 PM by Ned Murphy

    Progress bar for movieclip animations



      I have to create a presentation with audio and animation synced - it's about 5 minutes.  It has 5 buttons at the bottom that the user can use to navigate to a particular subject of the presentation.  But I was asked if there could be a progress bar for each subject so that the user could see how far they've gone.  I'm thinking I could have something check to see how far along the audio is and have a bar move along as the audio moves along.


      This seems like a project that's probably been done, if anyone could help that'd be great, thanks!

        • 1. Re: Progress bar for movieclip animations
          clbeech Level 3

          you can do this by running an enterFrame loop and checking the _currentFrame property of the running clip timeline.  if each clip is a individual MC you will only need to use the _currentFrame and _totalFrames properties to get the percentage completed, as in:


          onEnterFrame = function() {
            var pct:Number = targetMC._currentFrame / targetMC._totalFrames * 100;
            progressBar._xscale = pct;
          • 2. Re: Progress bar for movieclip animations
            eapre Level 1

            How would I make a progress bar that checked sound duration instead of the number of frames in a movieclip?  Some of the movieclips don't have animation, so I need the progress to be determined by how long the audio clip is.


            Also, is progressBar a movieclip - how do I create the progressBar?


            This is kinda high-level for me, so I need some extra explanation :-)  Thanks.

            • 3. Re: Progress bar for movieclip animations
              Ned Murphy Adobe Community Professional & MVP

              I don't deal with sound much, but you should be able to monitor the position property against the duration property much like CL mentioned using the frames.  You would use the ratio of position/duration to determine how far along the playtime is (percent complete), and you can use that value to control the width of a progress bar.


              A progress bar can be as simple as a rectangular strip whose normal width would be the 100% complete size.  You control the width by using the percentage complete times that full width value.  To make it more visually representative of when the end is coming, when you draw that rectangle, include a line border.  But isolate the fill as as the progress bar movieclip.  That way, the border lets you know what the full size is while the fill as a movieclip changes to fill up the outline.  You can also include a textfield if you like to display the percent completion.