6 Replies Latest reply on May 10, 2006 7:08 AM by Chad_Killingsworth

    Building a Better Progress Bar

    asm0d Level 1
      Hi all!

      One of the most common feedback items we've seen is the lack of a progress bar to let the student know how much of the presentation is left. Sure, there's a bar when the viewer is in the "tabbed" view, but the "time remaining" listed there is usually WAY off if you're letting the student advance through the presentation at their own pace. We set out to make a self-contained progress bar in Flash that could be dropped into any PPT presentation and would provide the student with a simple indication of how far along they are. Here's how to make one yourself :

      First, your progress module has to have at least two frames. This is because your module will need to read data from the "viewer.swf" application that shows the Breeze presentation, and that information is apparently not read in until all the actions on frame one of every module present are done. So the actionscript for frame 1 of our module is simply:

      this.gotoAndStop(2);

      Next, we're indicating progress by how long a bar is - namely, modifying the _width property of a movieclip instance. Our movieclip in the library was just a green rectangle, and our instance of that was named progress_mc, with a default width of 285 pixels. Make sure that the bar is aligned with the left & center of the stage in the movieclip in your library, so that it will grow and shrink correctly.

      Now that the bar is set up and ready to manipulate, here's the code we placed on frame 2:

      var mySlideNumber = _root.m_contentView.m_currentSlide.indexInTOC + 1;
      var myLastSlide = _root.m_viewerController.m_slides.length;
      var myIncrement = 285 / myLastSlide; //285 pixels is the default width of the movieclip instance

      progress_mc._width = (myIncrement * mySlideNumber);

      _root.m_sidebarView.m_elapsedBar._visible = false; // this hides the incorrect "time remaining" bar



      ...and that's all it took! Of course, the one we're using now is a little fancier in terms of graphics, and tailor-sized for our templates, but the code is virtually identical. I can give the "progress bar.swf" module to anyone for inclusion in their PPT slides, and it will work perfectly when they compile their Breeze presentation. The only annoyance is that you have to paste one on every slide (that you want indication on), rather than putting one on the slide master. But, this is still FAR easier than hand-crafting progress bars for every presentation.



      Cheers!

      ~Marc B
        • 1. Re: Building a Better Progress Bar
          Chad_Killingsworth
          I'm trying to modify the viewer.swf in similar ways with no success. I tried implementing just the code below to set the m_elapsedBar = null with no success. I included the swf file on the first slide of my powerpoint, and then on every slide and neither option worked. Inside the flash IDE a trace statement on _root.m_sidebarView.m_elapsedBar._visible reports "undefined".

          What am I missing?
          • 2. Re: Building a Better Progress Bar
            asm0d Level 1
            Hi!

            Well, the code only works with a Flash movie that's being shown "on top of" the Breeze viewer, so trace will always come up negative (those properties and methods are unique to the viewer.swf file). To trace info with embedded flash modules, I use a text box instance in the module.

            As far as turning off the progress bar, are you sure you're not thinking of the "scrub" bar - that thing at the bottom which shows you where you are within a particular slide's animation? The bar I'm disabling is under the tabs (in the tabbed, vice full, view), and usually says something like "2 minutes 30 seconds left". Other than that, I don't think it does much, except confuse students.

            good luck!

            ~Marc B

            • 3. Re: Building a Better Progress Bar
              kyle_christie
              Thanks for sharing Mark

              Can you please post a link to a room with you progress bar so i can see what the final outcome looks like

              Thanks

              Kyle
              • 4. Re: Building a Better Progress Bar
                Chad_Killingsworth Level 1
                I'm openning the viewer.swf in the flash IDE to enable the traces. I can switch to using a textbox. And yes - I was looking at the correct bar.

                My goal in all this is to check if m_miniControlBar._visible is true when the viewer initially loads, and if so force the viewer to switch back to the tabbed view using m_viewChangeBtn.onRelease(). The viewer has the annoying property of loading in "fullscreen" view if it's width is less than 793px.
                • 5. Re: Building a Better Progress Bar
                  asm0d Level 1
                  Hi!

                  I build a small module to do what you're asking - again, the key was to put the actual "check" code on the second frame. So... I made a blank Flash module with two frames. Frame one simply said:

                  this.gotoAndStop (2);

                  and on frame 2 we have:

                  if (! _root.m_miniControlBar._visible)
                  _root.m_controlBar.m_viewChangeBtn.onRelease ();



                  Which was interesting, but only switched into full mode once. To keep the user in full mode no matter how often you resize, you could change frame 1's code to gotoAndPlay (2) , which cycles through about 30 times a second without generating an endless loop error. I dropped this little flash module into a few different PPTs, and it worked fine in all of them when compiled.


                  Cheers!

                  ~Marc B
                  • 6. Re: Building a Better Progress Bar
                    Chad_Killingsworth Level 1
                    Actually just before you posted this, I figured out the problem. Somehow _lockroot was getting set in my movie. By setting this back to null, everything worked as expected.

                    I actually only need to load this on the first slide since the HTML template file I'm placing the flash movie in sets the size - there won't be any resizing.

                    Thanks for the help!