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

Creating a Portfolio Web Site Using Flash CS4 Professional

Optimizing the design


From:

Creating a Portfolio Web Site Using Flash CS4 Professional

with Paul Trani

Video: Optimizing the design

As you start to import graphics into Flash, it's important to be aware that the more graphics you import, the larger your file size is going to be, and the larger your file size is, the longer it's going to take to download, and the longer it takes for your users to see your content. So you want your file size to be as small as possible. And what I want to do is I want to take this design down to be about of 10th of its current size. So what you're going to want to do is explore what got imported and how you can optimize it.
Expand all | Collapse all
  1. 1m 41s
    1. Welcome
      1m 7s
    2. Using the exercise files
      34s
  2. 24m 1s
    1. Understanding web design
      2m 44s
    2. Creating a Flash file
      3m 18s
    3. Importing a design from Photoshop
      7m 45s
    4. Optimizing the design
      10m 14s
  3. 13m 59s
    1. Dynamically loading an image
      3m 37s
    2. Loading random images
      10m 22s
  4. 47m 38s
    1. Creating menu buttons
      8m 18s
    2. Adding functionality to buttons
      8m 56s
    3. Adding navigation
      9m 45s
    4. Creating transitions
      12m 0s
    5. Simplifying code
      8m 39s
  5. 26m 11s
    1. Creating web site sections
      7m 41s
    2. Dynamically loading sections
      11m 7s
    3. Linking to web sites and email addresses
      7m 23s
  6. 29m 18s
    1. Setting up a portfolio
      12m 31s
    2. Adding functionality to thumbnails
      10m 10s
    3. Allowing for unlimited thumbnails
      6m 37s
  7. 41m 17s
    1. Benefits of using XML
      4m 42s
    2. Loading XML content
      4m 34s
    3. Sorting XML content
      7m 32s
    4. Displaying XML content
      7m 35s
    5. Using XML to create thumbnails
      8m 41s
    6. Displaying content with thumbnails
      8m 13s
  8. 25m 59s
    1. Creating and importing video
      9m 47s
    2. Adding a Full Screen button
      4m 15s
    3. Creating custom video controls
      4m 50s
    4. Adding functionality to video thumbnails
      7m 7s
  9. 9m 12s
    1. Adding audio to buttons
      5m 30s
    2. Adding audio to dynamically created buttons
      3m 42s
  10. 21m 19s
    1. Applying professional transitions
      9m 26s
    2. Creating a preloader
      8m 56s
    3. Publishing a web site
      2m 57s
  11. 3m 15s
    1. Reviewing the "corporate" Flash site
      1m 40s
    2. Reviewing the "artistic" Flash site
      1m 35s
  12. 12s
    1. Goodbye
      12s

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 Portfolio Web Site Using Flash CS4 Professional
4h 4m Intermediate Feb 17, 2010

Viewers: in countries Watching now:

Flash and ActionScript are ideal for creating flexible, easily updatable web sites that are both unique in design and small in file size. In Creating a Portfolio Web Site Using Flash CS4 Professional, Adobe Certified Instructor Paul Trani shows how to exploit Flash to create a web site that showcases work to clients and prospective employers. Find out how to add dynamic navigation, animation, and video to a page, and how to load, sort and display XML that enables portfolio content to be updated without opening Flash. This course is designed to take your existing tweening skills and gotoAndPlay code and walk away with a fully functional Flash site. Exercise files accompany the course.

Topics include:
  • Optimizing and publishing a Flash web site
  • Designing a professional photo or video portfolio
  • Adding button interactivity
  • Adding functionality to portfolio thumbnails
  • Displaying content with XML
  • Adding audio to portfolio presentations
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Optimizing the design

As you start to import graphics into Flash, it's important to be aware that the more graphics you import, the larger your file size is going to be, and the larger your file size is, the longer it's going to take to download, and the longer it takes for your users to see your content. So you want your file size to be as small as possible. And what I want to do is I want to take this design down to be about of 10th of its current size. So what you're going to want to do is explore what got imported and how you can optimize it.

First off, there is just this extra layer, just hanging out down here. He doesn't add any file size, but I'm just going to perform some clean up by selecting that layer and hitting the delete button. All right. Next up, I do have this image. Well, quite frankly, I do need that image, so I'll just leave it there for now. Let me go into my content movie clip, and as I double-click into that, I can see that I have these text items. These are movie clips and then there's texts inside of them, so they're fine.

This I imported as text, so that's looking pretty good, but if I zoom out, I can see that there's this really large image, and this is probably my biggest issue, is this big background. So I have this gradient, vertical, and horizontal, as wells as this gradient burst, and then this pattern in there. So what I want to do, instead of this being a really large file, I want to make this in vector format, because if it's a vector, it's going to be a lot smaller.

But first, let's explore the file size of this file, so this is an index.fla file, the .fla file is the working file. But what I want to do is I want to go to Control and I want to do a Test Movie, which you will do this a lot in Flash. If you go to Test Movie, what actually happens is it creates an SWF file, small web format file, so Flash does a good job of making your files small, but in general, this is the file that would go on the Web.

You're probably wondering "How small is this SWF file?" Well, if I go to View, and I select Bandwidth Profiler, you can see that I'm given this graph right here. So this animation is only one frame long, but I can see, down here at the bottom of this panel, it says that it's about 1400KB, about one-and-a-half megabytes, so which is pretty darn large. So I'm going to take this one-and-a- half megabytes and crunch it down. So I want to close that file, and again, this is probably my biggest offender if you will, and what I want to do is recreate some of these elements.

So I'm just going to create a new layer. With this new layer, I'm going to select the rectangle tool, and what I want to initially select is the Fill color, and instead of it being a solid color, it's going to be this burst, this radial burst, like that. Okay, so when I draw the circle, I am going to draw it from this upper corner, in fact, I'll scale that out a little bit and maybe zoom out and touch more, but I'm just going to go ahead and draw this radial burst, like that.

There is my radial burst. I can select this item, and what I want to do is I want to modify it, Color. So I'm going to expand out this panel, and I'm basically going to the Color panel. You can always get to it through Window, going down to Color. But in general, this fades to white. The center points a white, when really, I want the center point to be, not necessarily black, but I want it to be transparent, just like that. So there's my gradient.

It's looking pretty good. In fact, I can even call this layer just by double-clicking in it. I can call it gradient, and that's now a vector item. But I'm still creating different parts here. So I'm going to create a new layer, and this time, I want to duplicate this gradient bar, so I'll zoom in a touch, and I'm going to select the Rectangle tool again, and instead of using the burst, I'm going to use this linear gradient, and I'll just click and drag, like that.

So if I select the Selection tool, you can see that I can start to align this appropriately. But it's going the wrong direction, so the first thing I'm going to do is I'm going to fix the color. I'm going to have it fade to black, and I'm going to make fades to transparent, and then what I want to do is I need to adjust the angle. One easy way to do that is just to use the Paint Bucket tool, because if I click and drag with the Paint Bucket tool, it starts to manipulate - let me just change this color for you - it starts to manipulate the angle of your linear burst, so let me just change that to Red. There we go.

You can start to see it work, but in general, I can go ahead and make sure this is fading the right direction and sort of the right degree. So using your Paint Bucket tool, you can add that gradient, and again, I just changed it to red, so I can see it, but I can easily change that back to black, just like that, and there is my gradient. Now, I need to create the same gradient right here, okay, vertically. Well, anytime you find yourself doing something twice, think about converting it to a movie clip, and I'm going to show you how to make something a movie clip.

Right now, I'm going to open up the Library panel, and with this gradient selected, I'm just going to click and drag it right into the Library. Once I drag something into the Library, in essence, what I'm doing is I'm converting it to a symbol, and I want to call this symbol 'gradient,' and I'm going to keep it as a movie clip, but I can some other things as well. I'm going to just keep it as movie clip, select OK. And sure enough, if I select it, and look at my Properties panel, it says that it's an instance of the gradient, but there it is.

It's in my Library now, and what I can do from here is I can drag out another instance of that gradient, and I can use my Free Transform tool, third one from the top, to rotate that around like so and line it up. So when you find yourself doing something more than once, think about converting it into a symbol and having multiple instances on your stage, because what this means is that Flash is only storing one version of it, and then it just duplicates it.

So it makes your file size smaller when you use symbols, and really, you need to get in the habit of making things symbols. So, I'm going to go ahead and select this, and these are also gradients, but this is the layer, so these are my linear gradients. Let me just turn off these two layers, because you can see I still have this pattern, and this is where things get a little tricky, because how am I suppose to recreate this pattern? Am I suppose to draw little squares? Well, no.

It is a pattern, so I want to use a pattern to cover that entire area. So I'm going to zoom in a touch. I'm going to add another new layer and this is going to be my pattern, and I'm going to go to File, and I'm going to Import the pattern. So I'm going to Import to the Library a pattern. So this is just a really simple file. It's really small. It's just a PNG, so it's a file with transparency that just has four little dots in it, but this could be whatever type of pattern you want.

It could be anything. In general, I want to take this and import this pattern into my library, and I'm going to go ahead and Import this, everything set to the defaults, select OK. So I have it imported. There is my pattern PNG, and now what I can do, if I minimize that Color panel and expand this out some, and zoom out, because what I want to do is want to draw another rectangle. And instead of using these Fills, what I want to use is that imported pattern, and if I twirl this open, just so you can see where it is, it's actually clear down in here, and it's called Bitmap 5.

It's actually this one right here. It's that graphic, so I'm just going to go ahead and select that file, and with that pattern selected, I can go ahead and draw with the Rectangle tool, and it recreates that pattern. So let me go ahead and turn off this gradient layer. Again, all this stuff was imported, but you know what? I don't need this layer anymore, so I can select that layer I was trying to recreate, hit delete, and twirl up some of these things. Actually, let me make sure everything is showing appropriately.

You can see that there's the pattern, and I've recreated the look of that pattern. So let me go ahead and do a Control> Test Movie, just so we can check the file size, and sure enough, we're actually down to 4KB for this file, so we've drastically decreased the file size, and if I turn that on, you can see my image is actually still in there. So let me just turn that on, because this is ultimately the look I want.

Let's go to Test Movie. You can see with that image back there, I have a file that's 100KB, quite a bit smaller than the original file, all by sort of recreating elements that were imported, which you might have to do on occasion, depending on what you import. But again, it can all be done in Flash, and if you're given the choice, recreate it in a vector format, and it's really going to make your files smaller and provide for a better user experience.

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


Expand all | Collapse all
Please wait...
Q: While following along with the course, I encountered the following error in Flash CS4: 
1120: Access of undefined property content_mc.
What is causing this error?
A: Flash is looking for something (the content movieclip) with the instance name “content_mc” but it is not finding it. Select the content movieclip on the stage. In the Properties panel give it an instance name of “content_mc”. Make sure there are no spaces before or after. That should resolve the error.
Q: What is the best strategy for integrating 720/60P HD video into a website? Would creating a blank page that opens in full HD resolution be the best way to view the full quality of the HD video file?
A: A video file that large would just be unreasonable for most users to open.  These settings are a good place to start: 600x400is
24-25fps
Audio: 128kbps
Codec: On2VP6
Bitrate level: 1,000kbps
Bitrate Encoding: VBR These are just recommendations, and can be modified to preference. Also keep in mind that in Flash, one of the buttons that can be added is a full screen button, which is part of the skins.
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 Portfolio Web Site Using Flash CS4 Professional.

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
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