Adobe Flash ActionScript 3.0 for Designers Tutorials
Communicating with External Elements / Project 4: Preloader Animations
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Flash ActionScript 3.0 for Designers / Communicating with External Elements / Project 4: Preloader Animations)
Every Flash project larger than a few hundred kilobytes needs a preloader script to inform visitors on the download progress of the Flash file they are requesting to see. Without a preloader script, visitors are often left staring at a blank screen while the Flash file loads into their browser. Obviously this is unacceptable as you'll lose most visitors after a short time making them wait. Unfortunately Flash does not ship with a preloader component and preloader scripts are not that easy to create so our next project will be generating a collection of preloaders for you various Flash projects. Here's a very simple preloader script and a great place to start. If you open up the Preloader Script Text File in the Work Files folder, you can see this script. I've commented quite liberally but it's actually a rather short script as preloader scripts go. If you go ahead and Copy and Paste this text into Frame 1 of a Flash file right there in the Actions Layer, go ahead, create two frames. In the second frame create a label; Welcome to Frame 2 and then add a large image or I've added an audio file, about a two megabyte audio file. That'll give some beef to this file so we can actually see the preloader in operation. If you don't have much to preload, it'll preload quickly and you won't see the animation. The script here will create a little animation. To see the animation create another layer called Loader Bar and then create a rectangle in that frame there. Convert the rectangle to a movie clip and then name that movie clip lbar, all lowercase. Then add a dynamic text field below that. Make sure it's dynamic text there in the Properties Inspector, label that lpc. That'll match the script provided in the preloader script file. Let's double check that this script has been pasted in correctly here in the Actions Window. I'll be reviewing this script and others in more detail a little bit later in this section of the tutorial. And now let's go ahead and do a Control Test Movie. Now, you won't see the preloader the first time because it loads too quickly probably from your hard drive. Flash is now loading that large audio file into memory. It'll jump right to Frame 2 where your label is but if you go to the player here and choose Simulate Download, then you can actually see the script in operation. The bar, the lbar is growing and then I have a percentage that's going to go from zero to 100 percent. When that gets to 100 percent, it'll then mov the play back head into Frame 2. So this style of preloader requires that you have a very small component of content in Frame 1 and then the rest of your file in Frame 2 or later. The advantage of this script is it's easy and fast and you should be able to get a preloader working within minutes in your Flash project. The limitations to this script is that you cannot easily customize this preloading animation. This creates this bar that grows. It also does not indicate that well visually how much is left to download. Also, it won't move on to the rest of the movie after loading if you refresh the browser. The problem with this type of preloader is that it does not wait for the event completes; only the progress event.progress method and I'll be covering these a little bit later. But suffice it to say here that at the end of the progress event, it dispatches a complete event. This is not the same as waiting for the bytes loaded equals bytes total method that most preloaders use. That happens before the complete event gets dispatched so technically you're moving on to Frame 2 before it technically thinks everything is finished. To look at a more complete, a better script but one that's more complex, open the Preloader 2 File in the Work Files folder. Here you'll notice that I have a graphic bar there and a dynamic text field. In this case though I'll be loading an external file rather than having to create a second frame with my content. My content will actually reside in a separate fla file that's a little bit more convenient. If we go ahead and look at the script here, you'll notice that it's a little bit longer, a little bit more complex. It's actually loading in this case this file right here, the one in green, Menu underscore Mouse underscore Over and .sfw. This will look familiar when I do a Control Test Movie. Let's go ahead and do that so you can look at this. Again, it's going to jump to that file right away because the preloader has not had a chance to really run unless I choose Simulate Download from the Flash Player View Option. Also this one is a little bit smaller than my other file so let's go ahead and set the download settings from dsl to 28.8 and now let's do a Simulate Download so we can actually see the script working. So after it loads, the bar loads up from left to right and then you see a percentage sign on there. Let's actually turn this all the way down to 14.4 so we can see this. Better to put a little bit more content here or slow this down so you can actually see the preloader at work there. So this is a little bit more advanced, sophisticated type of preloader. It's using a little bit of a different type of script. It's harder to work it so I like to start my Flash students off with the first example, the Preloader 1 example. There's a copy actually of the completed file in the Work Files folder labeled Preloader 1 so you can see this right away. We'll look at both of these scripts in more detail later plus some other good preloader scripts but for now, let's explore some of the ways that Flash communicates with other applications such as web browsers, images, videos and other Flash movies. And let's start this exploration in the next movie by exploring some scripts for linking to external web pages and websites.
Tutorial Information
| Course: | Adobe Flash ActionScript 3.0 for Designers |
| Author: | James Gonzalez |
| SKU: | 34060 |
| ISBN: | 1-935320-82-3 |
| Release Date: | 2009-11-09 |
| Duration: | 9.5 hrs / 101 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
