Subtitles of the Movie

Fireworks has been designed as primarily a web graphics tool, so its main use will be to work on graphics that are going to published on the web. As I mentioned previously, one complication to this is is that the native Fireworks file format the PNG or ping format, is not supported by many browsers so usually you'll need to export or publish your Fireworks images in order to convert them to formats that are more friendly for display on the web. There are two menu commands for exporting in Fireworks. The file export command and the file export wizard command. The export wizard will help you establish your optimization and other settings, so I recommend that you start here. The export option is great if you've already exported once using the export wizard and you've already set up all of your optimization files and perhaps you need to change a file name or the export location, the file format or the slices, how the slices will be exported, or other export details not related to the optimization of the image. Now, I have an image here that's a good candidate to demonstrate for you the various techniques and features involved in exporting files out of Fireworks CS3. I have some slices and some of those slices have been converted to HTML, which means they'll be empty. Some of the slices have been optimized. Here's a JPEG slice. The rest of the file will probably be a GIF image. And then I also have an enter button with a behavior and some frames that go with that behavior. So I have frames and layers, behaviors and slices here. So let's start by choosing file export wizard. That'll bring up this introductory dialog. The export wizard helps you to select an export format, find ways to minimize the size and maximize the quality of your image. I call that image optimization. What do you want to do now? Select an export format. You can also target an export file size. For example, ask Fireworks to limit the size to 20K. So because I have a behavior and frames in this file, it's asking me whether I want to make an animated GIF, a JavaScript rollover or a single-image file. I'm going to do a JavaScript rollover. That's what'll allow the behavior to work in the browser. So choose that option. Click continue and then I get an analysis of the results. They recommend GIF or JPEG, both of which are displayed in the preview. If your exported image has a transparent background, it's important that you select a gif format. JPEG does not support transparency. And then after you select a format, you can choose the export wizard again to change any of these settings. So if you click on exit, actually you get the image preview dialog, which is really the heart of this export process. So let me slow down a little bit and review this dialog here, this preview dialog in more detail. This image preview panel is dominated by the preview window over here to the right. By default it's divided into two sections; one for determining the size and image quality of a gif, the other for a JPEG. In this case I have text on this image so I'm going to go with the GIF setting. Once I've determined which of the two file formats I'm going to choose, I then click on the for previews window option and then I can go ahead and change each of these to one style of GIF. Over here I have my various settings. The palette that I can use; Web 216, exact, Macintosh, grayscale, black and white. So the idea is you change each of the settings and then choose the specific GIF format, including the palette, the dithering, the number of colors, as well as transparency. You'll notice that I can set a transparency over here. Index transparency. Click on the eyedropper and then choose one of these colors to basically make transparent. You can only choose one color, but you can use transparencies with Fireworks GIF images. You can not with JPEGs. So once you've set all your options, let's say that you choose this image here. You want it to be a GIF that's adaptive. One hundred and twenty-eight colors. Select that choice there and then click on the export button. Make sure you've selected the correct image. It will be highlighted over here and also be displayed over here in terms of what the settings are. Notice that this over here changes, so let's click here and make sure that's the image I'm exporting and click on the export button and that will bring us to the export dialog, another very important dialog here in Fireworks. Now, you'll need to be careful at this juncture of the export procedure. If you're going to make a mistake that will hurt you, it'll be here in this dialog. First thing you'll need to ensure is that you're saving it to the correct location. Right here, save in at the very top. Usually you'll want to save this to an images subfolder that's within your website. It's very, very important if you you're working with Dreamweaver. Next, give it a file name. Export one. Usually you want to have no caps, no capitalizations, no weird characters, no spaces. And probably put a number there to indicate which export it is because often times you'll be exporting multiple versions. The next drop-down is very important if you want to export a HTML in images, images only, a Dreamweaver library. CSS layers. Director. You can actually export to the director application. Now I have slices in JavaScript in the form of behaviors so I must choose this HTML images. Luckily, Fireworks is smart enough to know that that's my default. If I don't choose HTML images but images only, my behavior will not work. You'll notice that I'll be just exporting a GIF image, whereas if I choose HTML and images, I'm exporting HTML image in addition to my graphic image. Next, my slices option. I do have slices so I want to export the slices, not slice along the guides but export the slices themselves. I don't want to choose selected slices only or current frame only. I want to include areas without slices because there are some areas of the image that don't have slices. And the current page only. New in Fireworks CS3 you can work with pages. So I would double check or even triple check that everything is OK here. The location, the name, the export. Make sure you include the HTML if you have behaviors. The slices options. And then click on the save button and Fireworks will then go ahead and export this ping file. It actually converts it into the various file formats that you've chosen here in the optimize panel. In this case, this slice will be a JPEG and the rest of this black area will be a GIF. And because these are empty, these bright green areas, they will not be exported at all. They'll just be an empty spot there. Actually Fireworks will create a table that you can open up in an HTML editor and those will be blank. So there you have a summary of some of the very important export procedures and techniques when publishing or exporting your files out of Fireworks CS3.