Groups | Blog | Home
all groups > flash actionscript > may 2004 >

flash actionscript : Progress Bar



kevin_tx
5/21/2004 9:14:06 PM
Is there a way to create a horizontal progress bar where, if I have a
Flash-based course that is 20 frames long and requires the pressing of a "next'
button to advance forward in said course, that the progress bar gradually fills
up in color the further you move along in the course?

As it is now, I've been inserting a graphic which I've shaded manually so for
a 20 page course I've got 20 progress bars with different levels of shading. If
I add pages to the course, I'm basically screwed and have to recreate the
graphic again - I'd just as not have to do this.

Thanks in advance for your support -

Sincerely,
Kevin
McKinney, TX

Pete The Chop
5/21/2004 9:32:37 PM
Have you tried making a tween across all 20 frames? on a new layer above the 20
frames, make the full size progress bar a movie clip and make it skinny on
frame 1 and full width in a keyframe on frame 20. Then create a motion tween
between the two.
inhswebdev
5/21/2004 9:41:44 PM
You could build it sort of like you would a preloader...

Say your test has the 20 pages and each page is in a frame within a movie clip
called "test".
your progress bar ("progressBar") would have a fixed width but would be done
in two layers, the top layer would be a black border (or whatever color you
chose) that would show the full extent of the bar. On the layer beneath that
will be the movie clip fill ("progressFill") that will be, in its entirety, the
width of the black border.
your code inside the "Next" button would be the following:

on(release){
currentPos = test._currentframe;
totalTest = test._totalframes;
percentComplete = (currentPos / totalTest) * 100;
percentComplete = Math.round(percentComplete);
setProperty(progressBar.progressFill, _xscale, percentComplete);
test.nextFrame();
}

hopefully that helps :)
kevin_tx
5/22/2004 4:11:02 AM

You guys are great! THese are two excellent alternatives and I'll try both of em out! Thanks!

Kevin
AddThis Social Bookmark Button