New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Creating a First Web Site with Flash Professional CS5
Illustration by

Optimizing a web site


From:

Creating a First Web Site with Flash Professional CS5

with Paul Trani

Video: Optimizing a web site

Optimization is a very important step with any web site or any web content for that matter. We want to make sure our content looks really good and is as small as possible, and that's what I want to do here. I want to go ahead and optimize this site, but first I need to check and see how large it is and figure out which files or which graphics are the largest in it. So, I'm going to go to my Publish Settings and I'm going to click on the Flash tab and from there, this is where most of my optimization happens, but what I want to do first off is I want to generate a size report to see how large everything is and just see what is included in this file.

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 Professional CS5
2h 45m Beginner Jul 27, 2010

Viewers: in countries Watching now:

Creating a First Web Site with Flash Professional CS5 shows how to make a fully functional, dynamic web site in Flash Professional CS5. This course covers the fundamentals of creating and importing content, adding smooth 2D and 3D transitions, and adding button functionality that goes beyond links. This course will also show how to integrate and control video and audio as well as how to implement a gallery and a contact form. Exercise files are included with the course.

Topics include:
  • Understanding web design
  • Creating buttons and web graphics in Photoshop
  • Formatting text with the Text Layout Framework
  • Using the Timeline
  • Creating a custom looping animation
  • Loading images in a gallery
  • Creating invisible buttons
  • Adding music and video to a site
  • Customizing video playback controls
  • Optimizing and publishing a web site
Subjects:
Web Interaction Design Projects
Software:
Flash Professional Illustrator
Author:
Paul Trani

Optimizing a web site

Optimization is a very important step with any web site or any web content for that matter. We want to make sure our content looks really good and is as small as possible, and that's what I want to do here. I want to go ahead and optimize this site, but first I need to check and see how large it is and figure out which files or which graphics are the largest in it. So, I'm going to go to my Publish Settings and I'm going to click on the Flash tab and from there, this is where most of my optimization happens, but what I want to do first off is I want to generate a size report to see how large everything is and just see what is included in this file.

So, I'm going to go ahead and select Generate size report and I can click OK. Now, anytime I do a Test Movie, what happens is in my Output panel, you can see this size report. This is also a TXT file that I get to put in the same folder as my SWF file, but in here you can see this is my index.swf Movie Report, some of them metadata, which is what this is here, that gets included, and then I can start to analyze the rest of this.

So, you can see that plenty of things are going on in Frame 2. In here, I can start to see sort of the different frames as well and their file sizes. So, about every 20 frames I see this larger hit and what those are are the different sections. So, I really want to scroll down, even beyond these symbols, because they're pretty small, down into this area, because it's either going to be all the embedded fonts or the images and in this case, there's not a lot of embedded fonts in here.

So, I'm looking pretty good there, but right down here you can see my bitmap images seem pretty large. Okay, so I have the Home image, seems large. This Contact image seems pretty large as well. So, this is where the bulk of my file size is coming from, is of course from the images. I can also see that there are some sounds in here as well and potentially those could used to kind of be crunched down a little bit as well, but this is really the size report that tells me everything, and from there I can start to take a look at how much I need to bring it down. Because notice right here this is pretty much the size of my content. It's about 664K, is what it is.

All right, so I know the offending graphics are of course the bitmap graphics. So, what I can do off the bat is I can go to my Publish Settings and in my Publish Settings, in the Flash tab, I can bring down the quality of everything if I want. So, I can take it from 80 down to 30. I'll click OK. I'll do a Control > Test Movie. (Music playing) I can see it generated the size report again, and I can start to take a look at the file size.

So, it's actually drop to a pretty good amount, from 650 or so to 380. So, it's almost cut in half, but let's take a look at the content, because you can see my content has actually suffered as well. So, all of my Bitmap graphics look pretty bad, again, her face looks bad right there. (Female speaker: Hi, my name is Jill Steinman. I'm a freelance graphic designer...) These flowers look bad. So, it's really going to be a fine art of optimizing the specific graphics you need to optimize while keeping everything else maybe higher or lower, just kind of depends.

I think the clouds in the background, I can maybe crunch those down, because they're inherently nebulous and rough looking anyway. So again, that's the goal is to crunch down everything on a per graphic basis as opposed to using just my Publish Settings and crunching everything down. So, let's close that file, close our Output panel, and what I can do, if I just open up this Library panel, I can take a look at all of the graphics.

So, right in here, I can take a look at this clouds.jpg. So, what I can do is I can right-click on this clouds.jpg and go to Properties. From there, I can take this down from its imported quality, whatever that was, and I can make that Custom. So, I'm going to take the Quality down to maybe 20%, and I'll click Test, and you can see what you get. Obviously, that is way too small. Let's try 50.

Hit OK. That looks pretty good. Let's try 40 and really it's going to take this fine art of crunching this down, and also I can allow smoothing for this as well, and I might smooth it out a little bit. But I think that's acceptable, bringing that down to about 40% for my clouds, so it's about 17K, pretty darn small actually for the file size for that image. And next up, I have my other images. My contact image seems pretty darn large. That's this background image. It's going to be the same process of right-clicking, going to Properties, taking a look at the image, do a quick Test, and I can start to customize its quality.

So, let's take that down to 50, click Test, and I'd say that's still pretty acceptable. Luckily these graphics are fairly gritty to begin with. So, I think 50 works. Let's try 40, and that still looks pretty good. Click OK. I'm going to do this just to a couple of other images, Portfolio. Again, this is my Portfolio.

I can customize this down to say 30. I usually try pretty low and then start working my way up, and let's go to about 40, there to 45, and there we are. Okay, that looks pretty good as well. Home section, again, Jill's face unfortunately was not looking too good in this case, but I can come in here to test it, to use this Custom Quality of about 40 and still isn't that great.

And since this is the Home page, I actually, am going to leave this a little higher, about 60, just like that. All right, the last page, the About page, these are with all the flowers, which in general red is really tough to deal with, any sort of warm tone, but let's go ahead and see what happens when I take that down to 40. Okay, I would say that is acceptable, about 60%. Test out Allow Smoothing, sometimes it does a better job than others. But in general, I've just identified the sort of offending images, edited them or actually just optimized them on a per image basis.

Now, I can go to my Publish Settings and instead of crunching everything down to 30, just make it about 60 instead, because this logo file was also getting crunched down a lot. All right, so I've changed that. Let's go ahead and do a Test Movie. (Music playing) She looks better. Let's take a look. (Female speaker: Hi, my name is?) Those graphics look better.

These graphics look better, and let's just double-check our file size in here as well. Yeah 469, I'd say that's pretty good. All we've done is we've added maybe about 100K in image quality to certain areas, and as you can tell, I was able to customize that it on a per image basis to really give a nice look to the entire site, while still keeping it a small file size.

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


Expand all | Collapse all
please wait ...
Q: I followed all the steps and suggestions in the "Adding a progress bar" video, but when I add the progress bar to my web site, I can’t remove it once the index.swf file loads up. The progress bar remains on the homepage and the rest of the pages. How do I make it disappear once the site loads?
A: To make it disappear, just make sure the progress bar is only in frame 1. If it’s on its own layer, then right-click on the 2nd frame in that same layer and select "Insert Blank Keyframe." That will make it disappear.
Q: Despite following the steps in the "Adding a progress bar" video, I cannot figure out how to keep the progress bar from appearing on a movie that has finished loading. How can I make the progress bar disappear?
A: Just add the red line below to the preloader.fla file. This will make the progress bar invisible: 
"function contentLoaded(evt:Event):void { //Optionally change to a clip holder and set progressbar visibility. addChild(contentLoader); progressbar.visible = false; }"
 
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.
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.

join now 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 Professional CS5.

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

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.