Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Building a simple preloader pt. 1

From: Flash Professional 8 Essential Training

Video: Building a simple preloader pt. 1

In this exercise, you're going to learn how to build a simple pre-loader that you can easily add to your other projects. There are a variety of different ways to create a pre-loader. But the method that you're going to be using to create this pre-loader,or progress bar, is simply to create a 100 frame long animation (100 frames representing from zero to a hundred percent downloaded). Again the pre-loader is going to be showing the downloading progress of your content. So you're going to create an animation that represents the downloading progress as it occurs of whatever content that is being loaded.

Building a simple preloader pt. 1

In this exercise, you're going to learn how to build a simple pre-loader that you can easily add to your other projects. There are a variety of different ways to create a pre-loader. But the method that you're going to be using to create this pre-loader,or progress bar, is simply to create a 100 frame long animation (100 frames representing from zero to a hundred percent downloaded). Again the pre-loader is going to be showing the downloading progress of your content. So you're going to create an animation that represents the downloading progress as it occurs of whatever content that is being loaded.

So for the first step let's create a simple animation that spans 100 frames long in length. I'm going to create a new movie clip to house this animation. So inside of a new FLA in the Library create a new symbol by clicking on the new symbol button, down at the bottom left. Name the symbol Progress Bar and make sure that it's type is set to movie clip, and then click OK. Inside of this Progress Bar movie clip, which is where flash puts you automatically, select the Rectangle tool, pick a stroke and a fill color and then, on your Stage, click and drag out a bar to any size that you'd like.

Then select your Selection tool, select that rectangle, and its position is at the top left to the rectangle, aligned with the center of the movie clip instance. To do that, open up your Align panel by choosing Window, Align, make sure that the To Stage button is depressed, and then click on the Align Left Edge, and Align Top Edge buttons to align the top left edge of your shape with the center of that movie clip symbol. Then for how this progress bar is going to be designed let's separate the outside stroke of that rectangle from the fill.

To do that deselect your shape and then double click just in the outside stroke of that shape to select all four sides. And then cut the stroke away from that by choosing Control X on Windows (or Command X on Macintosh). Then create a new layer above that and paste what you just cut in place by choosing Control Shift V (or Command Shift V on Macintosh). That'll place that shape back where you cut it from but in a new layer.

Rename that new layer to be titled Outside Stroke and lock that layer. Then let's define the very end of this animation by creating a keyframe on Frame 100. In Layer 1, the layer that has the fill in it, scroll down to the Frame 100 and add a keyframe there by pressing F6. So you can also see the outside stroke all the way out to that point ,Frame 100, by selecting frame 100 in the outside stroke layer, and press F5.

That'll make it so that you can see the outside stroke throughout the entirety of the animation. Now the reason why you added the keyframe on Frame 100 first is because, now, you already have represented what the progress bar should look like at the very end. It should be filled just like it is now. Now you can easily take your Playhead, move it back to Frame 1, click once on the Fill to select it, and change its size so that it's only one pixel width, and it'll be aligned down here on the left-hand side.

To do that, after you've selected the Fill, making sure your Playhead is down here on Frame 1, open up your Info panel and change the width to 1 pixel wide, and, then press Return or Enter. So now the width of it is only one pixel and it's aligned here on the left-hand side. Now all you have to do is select Keyframe 1 in the layer that contains your fill and then, from the Properties inspector, change the tween to shape.

So essentially, it's just the shape tween of that progress bar moving from the left-hand side to the right-hand side. Again this can be any animation that you'd like as long as it spans 100 frames in duration. Now just to make the progress bar a little more interesting, I'm going to click and drag around where my shape is on the Stage. Again, making sure my Playhead is over Frame 1. And then, in the Properties inspector, I'm going to change the fill to be a yellow color. So not only will the progress bar animate across but the color will change as well from yellow to orange.

So there is the progress bar, that's going to show the downloading progress of whatever content I'm loading,using my movie clip loader class. Now when your movie first loads you obviously don't want this animation to automatically start playing. You're going to use ActionScript to tell this Playhead when to move and where to move to. So you want your animation that you just constructed to be paused at the very beginning. To do that, we need to add, to stop the action to the first key if we remove our movie. But again, because we're adding an action to a keyframe in the Timeline, we should create a separate layer for our actions.

So again, still on the progress bar of movie clip symbol, select the topmost layer and add a new layer. Rename the new layer to be titled A, for actions, select the very first keyframe. And, in your Actions panel, type "stop begin print the c and print the c, semicolon". That'll make the Playhead, when it first goes to play this movie clip symbol, stop on the very first frame. Now return to Scene 1 by clicking on the Scene 1 icon above the Timeline.

There is no progress bar symbol instance yet on your Stage because you've constructed it entirely within the Library. Now, from within the Library, take that progress bar movie clip symbol and drag it out unto the Stage placing it where you want it to be. I'm going to put mine right about in the middle, and rename the layer that that progress bar resides in from Layer 1 to Progress Bar. Now when we tell that that progress bar to actually animate or move, we need to be able to target it by name in the actions that we create.

So click once on that progress bar movie clip symbol instance on the Stage, and then in the Properties inspector, click in the instance name field and type ProgressBar, all one word with the capital B in Bar. Now we know, as we're writing our ActionScript, we can tell that specific movie clip instance to do something by saying, "progress bar, do this". As you saw on the last exercises when you're loading content using the movie clip loader class, you need to specify where the content is going to load into.

In the previous exercises we created a blank movie clip symbol to act as a container for that content to load into. We're going to do the same thing in this new FLA. So back in your Library panel, again, click on the new symbol icon at the bottom and create a new movie clip symbol called Container. Again, make sure the type is set to movie clip, and click OK. We don't need to put anything inside this movie clip so go back to Scene 1 by clicking on its Tab, and create a new layer.

Rename this new layer to be called Container and make it the bottom most layer by changing the layer order by dragging it. Then, just so we don't accidentally put anything in the progress bar layer, go ahead and lock that layer leaving your container layer, which is currently empty, unlocked. Then take the movie clip that you just created ,the empty one called Container, and drag an instance of it out on to the Stage. Remember wherever this movie clip symbol instance is positioned is where the top left of your content will load into when it loads into that movie clip symbol.

So that we can target that movie clip symbol container with ActionScript, we also need to give it an instance name as well. So make sure you have it selected. And in your Properties inspector, click in the instance name field, and type container. So now, I can just refer to it by the name Container. Now we can start writing the ActionScript to make this whole thing work. Click on the topmost layer (which right now should be Progress Bar) and create a new layer.

This layer's going to house all the ActionScript that makes this all work. Rename the new layer therefore, to be titled A for actions, and go ahead and lock that layer so we don't accidentally put anything on the Stage in our Actions layer. Then select the first keyframe in that layer and open up the Actions panel. In the next movie you're going to start writing the ActionScript to load the content in as well as show the downloading progress using your new progress bar as the content is being downloaded.

Show transcript

This video is part of

Image for Flash Professional 8 Essential Training
Flash Professional 8 Essential Training

101 video lessons · 37460 viewers

Shane Rebenschied
Author

 
Expand all | Collapse all
  1. 32s
    1. Welcome
      32s
  2. 17m 45s
    1. File types
      3m 13s
    2. Bitmaps vs. vectors
      4m 33s
    3. Flash 8 vs. Flash Professional 8
      5m 37s
    4. What's new in Flash Professional 8
      4m 22s
  3. 24m 33s
    1. The Start page
      1m 37s
    2. The default workspace
      6m 49s
    3. Interface management
      4m 15s
    4. Essential preferences
      7m 1s
    5. Finding help
      4m 51s
  4. 1h 2m
    1. Drawing with the Pencil tool
      9m 58s
    2. Modifying lines
      2m 54s
    3. Drawing with the Pen tool
      3m 20s
    4. The Oval and Rectangle tools
      7m 59s
    5. The Free Transform tool
      2m 46s
    6. Modifying and optimizing shapes
      4m 26s
    7. The Brush tool
      2m 3s
    8. The Lasso tool
      1m 28s
    9. The Eyedropper tool
      2m 53s
    10. Using the Color Mixer and creating gradients
      12m 27s
    11. Adding and importing colors to the Color Swatches panel
      3m 45s
    12. Grouping and ungrouping objects
      4m 15s
    13. Object-based undo
      4m 18s
  5. 27m 37s
    1. Movie properties and frame rate
      7m 52s
    2. Timeline, frames, and keyframes
      5m 4s
    3. Deleting, copying, and reversing frames
      3m 18s
    4. Testing movies
      4m 5s
    5. Frame by frame animation
      7m 18s
  6. 28m 38s
    1. Shape tweening
      9m 36s
    2. Shape hinting
      5m 51s
    3. Shape tweening text
      6m 4s
    4. Editing multiple frames
      3m 49s
    5. Animating gradients
      3m 18s
  7. 23m 37s
    1. Creating Symbols
      10m 2s
    2. Alternate methods for creating and editing Symbols
      5m 32s
    3. Working with the Library
      8m 3s
  8. 45m 53s
    1. Basic motion tweens
      5m 57s
    2. Tweening effects
      3m 51s
    3. Editing multiple frames
      2m 48s
    4. Motion Guides
      15m 7s
    5. Motion tweening text
      9m 33s
    6. Easing
      3m 11s
    7. Custom easing controls (Pro only)
      5m 26s
  9. 5m 10s
    1. Adding, editing, and removing Timeline Effects
      5m 10s
  10. 14m 50s
    1. Masking
      7m 5s
    2. Animated masks
      7m 45s
  11. 27m 47s
    1. Text overview
      12m 38s
    2. Text options
      6m 23s
    3. Aliasing options
      5m 54s
    4. Spell checking, and Find and Replace
      2m 52s
  12. 29m 48s
    1. Importing and compressing
      9m 59s
    2. Bitmap sequence
      3m 46s
    3. Bitmap fills
      3m 28s
    4. Tracing bitmaps
      10m 18s
    5. Changing opacity of bitmaps
      2m 17s
  13. 11m 38s
    1. Working with Filters
      5m 59s
    2. Working with Blend Modes
      5m 39s
  14. 25m 52s
    1. Button types
      4m 48s
    2. Basic buttons
      10m 53s
    3. Rollover button
      2m 16s
    4. Rollover button with down state
      2m 51s
    5. Invisible button
      5m 4s
  15. 32m 41s
    1. What are Movie Clips?
      12m 22s
    2. Modifying Movie Clip instances
      8m 32s
    3. Animated rollover buttons
      11m 47s
  16. 3h 16m
    1. Time-based vs. user-based actions
      1m 53s
    2. Actions panel
      3m 7s
    3. Script Assist
      3m 24s
    4. Stop on frame
      6m 55s
    5. GetURL
      13m 17s
    6. Slide show
      26m 20s
    7. Creating a pop-up menu pt. 1
      6m 31s
    8. Creating a pop-up menu pt. 2
      16m 59s
    9. Creating a pop-up menu pt. 3
      17m 32s
    10. Scrolling text
      13m 24s
    11. Controlling Movie Clips
      9m 41s
    12. What are Scenes?
      3m 13s
    13. Loading SWFs
      20m 3s
    14. Loading JPEGs, GIFs, and PNGs
      8m 12s
    15. What is a preloader?
      1m 21s
    16. Building a simple preloader pt. 1
      9m 18s
    17. Building a simple preloader pt. 2
      18m 31s
    18. Building a simple preloader pt. 3
      14m 14s
    19. Behaviors
      3m 0s
  17. 6m 41s
    1. What are Components?
      2m 6s
    2. The UI Scrollbar Component
      4m 35s
  18. 36m 15s
    1. Importing sounds
      6m 8s
    2. Supported formats
      1m 29s
    3. Sound on buttons
      8m 46s
    4. Music on/off button
      19m 52s
  19. 16m 55s
    1. Importing and compressing video
      14m 45s
    2. Using the Flash 8 Video Encoder to compress video (Pro only)
      2m 10s
  20. 47m 38s
    1. Publishing content
      17m 8s
    2. Creating a projector
      3m 18s
    3. FS commands
      12m 36s
    4. The Bandwidth Profiler and simulating a download
      5m 50s
    5. Generating a size report
      2m 55s
    6. The Flash Player Detection Kit
      5m 51s
  21. 5m 33s
    1. Making Flash content accessible
      5m 33s
  22. 3m 46s
    1. Using the built-in templates
      3m 46s
  23. 22s
    1. Goodbye
      22s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Professional 8 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.