Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

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.
please wait ...
Watch the Online Video Course 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
Subject:
Web
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.


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

* Estimated file size

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

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.