Flash Professional 8 Essential Training
Illustration by Bruce Heavin

Building a simple preloader pt. 1


From:

Flash Professional 8 Essential Training

with Shane Rebenschied

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

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

please wait ...
Watch the Online Video Course Flash Professional 8 Essential Training
11h 32m Beginner Sep 14, 2005

Viewers: in countries Watching now:

Flash Professional 8 Essential Training with Shane Rebenschied teaches new users how to use the drawing tools, swatches, and color panels in Flash 8. The course walks learners through animation processes, and how to integrate type, graphics, audio, and video. Shane teaches you how to use ActionScript for common projects such as creating slide shows, pop-up menus, and scrolling text. The training ends with instruction on how to publish to the Web or CD-ROM.

Subject:
Web
Software:
Flash Professional
Author:
Shane Rebenschied

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.

There are currently no FAQs about Flash Professional 8 Essential Training.

 
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

* Estimated file size

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.