Home Mission Sponsors WDTzine Credits Members Contests

Making A Load Meter Bar
(Countdown To Showtime - Flash Tutorial)
- Page 2-

Decide the approximate size you want your finished Load Meter Bar to be when
at 100%. Set your background "Grid Spacing" to an appropriate size to help you
draw your load meter bar in the desired size. I selected a Grid Spacing of about
25 pixels for each 10% increment in download.

  • (See Illustration 1, for Grid Spacing example… last page).
    To change Grid Spacing, select "Modify…"
  • Select "Movie…"
  • Set Grid Spacing to 25 px
  • To see the grid, select "View"… check "Grid"
     
  • Insert two new Layers for the download action statements.
  • Leave frame 1 empty.
  • We will be using one layer for frames: 2, 4, 6, 8, 10, 12, 14, 16, 18,
    20, and 22 for "If Frame is Loaded… Go to and Play" statements.
  • We will be using the other layer for frames: 3, 5, 7, 9, 11, 13, 15, 17,
    19, 21, and 23 for "Go to and Play" statements, to form short loops, so
    the animation displays the countdown properly.
  • Starting in frame 22, draw your finished Load Meter Bar. (One has
    been provided). Copy it into frames 2 through 20, on the even frames.
    The odd frames do not have keyframes, just regular frames. (No circle).
     
  • To Copy: right-click in frame 22. Select "Copy frames". Right-click in the
    even frames 2, 4, 6, 8, etc. and select "Paste frames".
  • (*Side note: When creating load bars for your own Flash movies, it is
    recommended that you use the "Eraser… Faucet function" to remove the
    outside border of the bar, prior to pasting it into the various frames. It
    makes it much easier to erase a portion of the bar.)
  • Using the erase feature, erase correct percentage amount of the bar in
    order to match the % of download shown in text.
  • Example: In frame 20, (90%) erase the right hand 10% of the bar.
  • In frame 18, (80%), erase the right hand 20% of the bar, etc.
  • Frame 2: "Initial Message" (i.e. One Moment Please… Loading Movie)
  • 2 = Intro, 4 = 10%, 6 = 20%, 8 = 30%, 10 = 40%, 12 = 50%, 14 = 60%,
  • 16 = 70%, 18 = 80%, 20 = 90%, 22 = 100%
  • Note: All of the rest of your frames containing your actual animation will
    have to be pushed down the time-line, to the right of the 22 countdown
    frames.
  • To push all the frames, (in all of the layers), to the right at once, click on
    the timeline above all the frames, and push the F5 button.
  • So we can see the 100% Loaded text in frame 22, we should push the rest
    of the movie down to about frame 28, allowing about 6 frames to see it.


PREVIOUS           1        2        3        4        5        Go To Tutorial   NEXT