Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Flash CS4 Professional

Creating a preloader


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Creating a preloader

One thing you need to do with any site is view it from the users' perspective, and download times come into play when you think from users' perspective. So in general, what I have here is a site and I want to check out the file size because if this site is pretty large in file size, it might take a little while for the users to see it. So I'm going to go to View and what I want to do is I want a simulate a download. So I'm going to go down to Download Settings, and notice I have this set to DSL.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating a First Web Site with Flash CS4 Professional
3h 8m Beginner Apr 15, 2009

Viewers: in countries Watching now:

Information on how to learn Flash is prevalent, but it can be frustrating to understand how to make an entire working web site using this unique technology. Here's a course that cuts through the clutter and offers practical tools for creating a dynamic web site, even for first-time developers. In Creating a First Web Site with Flash CS4 Professional, veteran Flash instructor Paul Trani simplifies the process of integrating animation, video, audio, and user interactivity to create a site that is dynamic and appealing. The goal of this hands-on workshop is to teach web site-building skills for today's demanding interactive industry. Exercise files accompany the course.

Topics include:
  • Manipulating images for the best results
  • Integrating assets from other Adobe products
  • Creating buttons with ActionScript
  • Embedding links to external web sites
  • Exploring text layouts
  • Customizing interactive contact forms
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Creating a preloader

One thing you need to do with any site is view it from the users' perspective, and download times come into play when you think from users' perspective. So in general, what I have here is a site and I want to check out the file size because if this site is pretty large in file size, it might take a little while for the users to see it. So I'm going to go to View and what I want to do is I want a simulate a download. So I'm going to go down to Download Settings, and notice I have this set to DSL.

Well, in order to see what this looks like on a DSL connection, I can go up here and to Simulate Download. So again, from users' perspective, I can see that they'll see white for a little bit, for about five to eight seconds, and really what I want to do there is I don't want my design to suffer. So I don't want to crunch down my site so much in file size, but what I want to do is I want to provide some feedback within those first five to eight seconds. And that feedback is going to come in the form of a preloader.

So what I want to do is I'm first just going to select all of these frames, and in this first frame here, that's where I'm going to add my preloader. So I'm just going to click-and-drag all of those keyframes to move them over. So it's that easy. I've basically cleared out this first keyframe. And as you'll notice, the Stage is white and really, I'd love to change that to more of a black. So in the Properties panel, I can change that to Black. Next thing I need to do is create my text field that's going to hold my preloader text.

The type of preloader I'm building is just going to be a Percentage preloader that's going to populate this text field. So if I just do click-and-drag, I can draw that text field and I'll go ahead and position it kind of more to the center. Now, I'm going to look at the Properties panel. The font looks good, make sure the color is say, a medium gray because in essence, what they are going to see is something like that. I might say, 100% when it's done. But what I need to do is I need to make sure this is Dynamic Text because this is dynamically going to be populated from ActionScript.

Next thing I need to do is make sure it has an instance name of preloader_txt, so that's the instance name. I'm in fact going to do a Command+C to copy that because I'm going to need that in a second. Now in this very first frame, what I want to do is I want to write some ActionScript. So I'm going to go to Window, down to Actions and I'm going to open up the Actions panel. So the first thing I need to do is stop the Timeline from playing because otherwise, it's going to start running through all these sections or until I hit some other stop action.

Let's type-in stop and then I want to go ahead and build my preloader. I'll just add in a comment here, Preloader. Well, I want to get a built-in function, a loaderInfo on this file which is this SWF file, and I want to add an EventListener to it. So it's going to listen for the ProgressEvent, more specifically the current PROGRESS.

Notice, I can go ahead and do some other things in here, but if I just use my arrow keys, I can select PROGRESS. Alright, so this is the specific method that I'm listening for. And loaderInfo is just referring to my SWF file once it's published. Next, what I'm going to need to do is add a comma, and then I need to type-in the name of the function that I want to execute at the progress of this SWF file. So I'm going to type-in updatePreloader, because that's what it's going to do.

And now, I can write that function. So function updatePreloader, I'm going to type-in Event ObjectProgressEvent. So I need to make sure, these two words match up. And Event Objectagain just refers to this SWF file. I need to add a closing parenthesis, and then structure for a function which is going to be an open curly brace and then a closing curly brace.

Alright, so inside of this function, I'm going to have a container for the progress of the site, so for the download of the site. And what this container is, is it's going to be a variable. So I'm going to add a line, and I'm going to create this variable and it's going to be called percent because that's what it's going to hold. I do need to tell Flash to expect a number in here.

So that's what's going in this container is a number and I'm going to make it equal to the Event Object's byteLoaded. So here's the byte's loaded. So what it does is that it determines the bytes loaded of the site at the PROGRESS as it downloads. So it gets the current bites loaded. But what I need to do here is I need to go ahead and multiply it by 100 because little bytesLoaded is really just a number between 0 and 1, so it could have a decimal point.

I really don't know what it is in general, but I want to round it and I want to multiply it by 100. Alright, so once that's calculated, I'm going to put this in parenthesis because this needs to be calculated first. But then what I want to do is I want to divide it by Event Objects bytesTotal. So as it downloads, it starts giving me what in essence is a percentage and then it also is divided by the total bytes.

Now, remember these aren't whole numbers. I in fact need to round this to a whole number, and how I'm going to do that is I'm going to surround this with parenthesis because I want to create a math function to round to the floor, so as soon as I type-in f, it rounds to the floor. Alright, there it is. I'm going to make sure, two parenthesis are right here, another one is here and another one is here. Just keep an eye out for that because that's an easy mistake to make and something easy to overlook.

But this floor just rounds down to the nearest number. So I want whole numbers in my text field, not any sort of you know, 32.75%. I'm going to end this just by adding a semicolon, and what I'm going to do is I'm going to go ahead and out this number whatever is in this variable in my preloader_txt. And I'm going to type-in text because it's going to put it in the text field, so this is a text property, and then I just need to make that equal to percent.

I am going to do more than just that because I just don't want the numbers sitting there. I want to do a plus sign and then in quotes, I want to add the percentage sign, just like that. And I'm going to end this line with a semicolon. Alright, everything seems to check out and one thing I encourage you to do is click the Auto format button and it will nest everything accordingly, or you can come in and adjust it anyway you want, but I do want to check the syntax.

So this is a quick check, it says there are no errors, I'm feeling pretty good about this. I'll do a control test movie and let's see what happens. Notice, that says 100. Now, that's fine, but let's do a download setting of DSL and let's simulate this download. So as you'll notice, it does count up, it's working great and then it stops on a 100 percent.

So really what I need to do is I need to then jump to the next frame once it's totally loaded. So that's what I'm going to do now. Just right after this preloader_txt, I'm going to create an if statement. I'm going to say, hey, if the percent is equal to, you need two Equal signs because I need to compare these two. The two Equal signs. If the percent is equal to 100, then go ahead and do this.

So open curly brace and then closing curly brace, and right in here, I'll Tab in a touch. I just wanted to go to the nextFrame, just like that. This is looking really good, but till you test it. And there we are, jumps right to the frame I needed to which is the next frame. And I can always simulate download and you'll see of course the numbers again, and as it hits 100, you'll see the Home screen.

So it's looking really good. I'm really liking how this is working, but there is another quick little check you need to make, and this is for Internet Explorer, I'll just type-in IE. There's just an extra little check we need to do because if you've visited the page already, then what's going to happen is there is not going to be anything to download because it's already downloaded. So this check never runs, so it never reaches the next frame. So I need to do this extra little check, just for IE browsers and again, it's going to be this same logic.

In fact, for the most part, I can even just copy all of this. So I'm just going to select it all and I'm going to copy it and line 17, I'm just going to go ahead and paste it, there it is. And I'll just bring this back in touch. And I don't need this at all, in fact, I'm just going to remove it, just like that, okay. Now, of course the reason why I duplicated this and pulled it out is, again, IE browsers are never going to execute this progress, this function because there is nothing to progress because the site has already been visited, so it's already sort of in their browser.

So if that's the case, then just perform this extra little check and you'll be perfectly fine. And notice, it doesn't affect anything else, it will work exactly the same. One thing that will come up is right in here. Now I want to show you this because it's going to look for this Event Object. Now this evtObj was defined right in here. Well, this never really exists outside of here. So that's one last little thing I need to do, this.loaderInfo, just refers to this SWF file, just kind of like I call it out up here, that's what I need to do and I need to also copy that and paste it right here.

So again, if it's looking for something undefined, know that you just need to replace that information and make sure it says this.loaderInfo and let's go ahead and test this, and it runs great. And lastly, let's do the Simulate Download one more time. So again, if your content is fairly large in file size, consider adding a preloader, and the reason I love this preloader is I can easily copy this code and take the text field and pretty much put it in any Flash file I want to put it in and of course I'll get that preloader.

Find answers to the most frequently asked questions about Creating a First Web Site with Flash CS4 Professional.


Expand all | Collapse all
Please wait...
Q: If I create a website using Flash CS4 on a Mac, can I edit it on a PC using Flash CS4?
A: As long the file is saved as a .FLA file with the extention ".fla" typed at the end of the filename when saving on a Mac, it should open with no problem on a PC.
Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 Creating a First Web Site with Flash CS4 Professional.

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


OK

Course retiring soon

Creating a First Web Site with Flash CS4 Professional will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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