Adobe Flash ActionScript 3.0 for Designers Tutorials
Communicating with External Elements / Setting Up the Preloader Animation
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 / Setting Up the Preloader Animation)
At the start of this Section of the tutorial I presented a rather simple script that you can use to quickly get a Preloader up and running on your Flash website. We're looking at the text file of this script: pre underscore loader underscore script.txt that I've placed in the Work Files folder so you can paste this into a working Flash file to very quickly and easily get your first Preloader up and working. Now although easy to implement this Preloader script has some limitations that I covered earlier, so in this movie let's look at a more sophisticated script to create an alternative Preloader for your Flash sites. This is such an important component that you'll want to have a collection of these Preloader scipts to work with any given project. You can have a look at this more advanced Preloader by opening up the Preloader2 file from the Work Files folder and then choosing Control, Test Movie to test this. You'll get this navigation file that we looked at earlier but if you, here in the Flash Player, choose View, Simulate Download, first set your download settings to rather small value because this is a rather small file, but if you choose Simulate Download you can see this script in action here. There's a loader bar and then a percentage down there that tells you the percentage of the file that's loaded. Now the key with Flash Preloaders is they must be small and they should be informative. You want them to load fast and to clearly tell your visitors how much longer they'll have to wait to see your Flash content. The third attribute of the best types of Preloaders is that they are entertaining; they're entertaining your users while they wait. Now Flash provides several ways for monitoring the progress of a file's download. We looked at one method earlier on this Section of the tutorial; that is, the LoaderInfo object to determine when an external SWF file had completely loaded. You can also use this LoaderInfo object to determine when the main SWF, or any other external file for that matter, has completely loaded. You can also use the ProgressEvent event with the byte loaded and bytesLoaded and byteTotal properties to monitor the progress of downloads. The concept of most Preloaders, including the one we'll look at here is pretty straightforward. You compare the amount of data loaded with the total data of the file. This ratio changes as the file downloads so you can display this percentage in a dynamic text field. That's what we did here in this example with this dynamic text field giving you the percentage of the download. You can also display this changing ratio graphically with a growing horizontal progress bar or any other animation. We used a growing bar here to graphically illustrate the progress of the download. The best types of Preloader animations entertain and clearly indicate how much of the file has loaded and how long it has to go to be completely downloaded. Here's a Preloader that meets these specifications. Notice that it's going to very graphically indicate when the file is done loading as well as give us a numeric value there. Now these example Preloaders that I've shown you so far all are scripts in Frame 1 that then move the Playback Head to Frame 2 after the file has downloaded. We're going to use a different approach here for the example that I'll be giving you. We're going to use a separate Preloader file that will check the download progress of a second SWF file that will constitute probably the main content of your website. This will keep our Preloader file very small since it will only consist of a text field, like here, this dynamic text field, a very small vector graphic and then just the ActionScript. Let's start our Preloader by creating a second layer in a new Flash file. Label the first layer actions and the new one label it loader indicator like I have here. Then in the loader indicator layer create a rectangular movie clip. Make sure the registration point is on the far left edge of the movie clip. For example, notice if I double-click here there's my movie clip and there's the registration point over to the left. Place an instance of this movie clip on the Stage in Frame 1 of the loader indicator layer. Name this instance bar underscore mc. Since its registration point is on the left, Flash will stretch the rectangle to the right as the download progresses. To add a little bit of nuance to this bar I have, notice, two colors here. What you can do is create a background graphic and then create a very small different colored movie clip rectangle here. Mine is blue and this blue will extend over to the right covering up the light blue. Again, notice that my registration point is over here to the left and notice also, if I go into the Properties Inspector this movie clip is named bar underscore mc. Notice my second movie clip over here is named background underscore mc, so you can do it either way. You can either create just a simple bar or create this more complicated graphic consisting of two rectangular movie clips, one very small the other one larger. First one named bar underscore movie clip and then the second one, the larger one named background underscore mc, or movie clip. Next, select the Text Tool here in the Toolbar and let me go ahead and zoom out so you can see this. Select the Text Tool and create a text field on the Stage. Change this to a Dynamic Text field, notice that this is a Dynamic Text field right here that says Dynamic Text and then change the name of this instance to percentage underscore text. Make sure that's spelled correctly. You'll probably want to pause these movies frequently as I go through the script to make sure that your syntax and your spelling and all the details are accurate. We're now ready to add our code to get our Preloader working, so let's now move on to the next movie and review the code for expanding the graphic bar as a percentage of the download as well as show this percentage numerically here in the Dynamic Text field.
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
