Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.