Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Optimizing a web site

From: Creating a First Web Site with Flash Professional CS5

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.

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.

Show transcript

This video is part of

Image for Creating a First Web Site with Flash Professional CS5
Creating a First Web Site with Flash Professional CS5

34 video lessons · 28226 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Your file was successfully uploaded.

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.