Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
When you create artwork inside of Illustrator and you then want to bring that into the Flash application, we've already discussed the best way to do that is to save your file out of Illustrator as a native Illustrator file. That's because Flash has the ability to parse all the information in that Illustrator file including layers, symbols, so on and so forth. However, when you have artwork inside of Illustrator that you just want to create a quick SWF out of, so that you can put it onto a website, we know that you can create a SWF file using Save for Web, you also have the ability to export your document as a SWF file. As we'll soon see, we have a ton of information and setting that we can choose from when we do that.
So I have my banner that I've created, I have all my symbols, I have all my layers that I've created. I'm going to go to the File menu here. I'm going to choose Export and then from the Format popup, I'm going to choose to export my file using Flash or SWF. Now if I had multiple artboards in my document I could choose to use Artboards button and basically choose which of my artboards I want to export as a SWF. But in this document, I just have one artboard. That doesn't come into play here. I'll choose Export over here and I'll have a range of options, some of these we've already explored. For example, I can choose which version of Flash Player I want my Flash file to be compatible with.
I also have the ability to convert my entire Illustrator file to a one static Flash file or I can convert my layers to a variety of different things. I can convert my Illustrator layers to Flash frames to Flash files. Those would be individual Flash files, or each of them can be converted to symbols. If I am using artboards I can convert each of those artboards to individual SWF files as well. I can choose to clip the contents of my Illustrator file to the size of my artboard, just to show you, you can see that in some of these cases here I actually have some artwork that extends without the boundary of the artboard.
By choosing Clip to Artboard Size, I'm ensuring that my banner will actually export at the intended size. Let's take a look at some of the other options here. Preserving Appearance will make sure that anything that I create inside of Illustrator that is not directly compatible with Flash; for example, certain types of live text will all get converted to outlines that it appears correctly in the final SWF file. I can compress the file to make it smaller. I can include unused symbols in this file and I would probably only choose this option if I knew that I was then going to import this SWF into Flash itself to work with. I can export all of my text as outlines. I can choose to ignore kerning information for text. I can include any metadata in my file, by the way, that makes the file size grow somewhat.
I can also choose to protect it from import by using a password. In other words, I don't have to worry about somebody opening up my SWF file inside of Flash and making changes to it. If I want a specific background color I could also choose that option here. If you thought these weren't enough options, well, take a look, there is a button here called Advanced. If I have any placed images inside of my file, I can choose to use a Lossy (JPEG) version to make a smaller compressed version of that file, which by the way results in a smaller SWF file overall or I can use Lossless compression. I can also set which resolution I want those images to be exported in. There are a variety of other settings here as well which only apply to when you work with animations out of Illustrator, which will deal within a separate movie.
Just like in the Save for Web dialog box, you've a preview in browser option; here I can choose Web Preview. That automatically shows exactly what that SWF file is going to look like inside of a web browser. Let's go back to the dialog back here for a minute though. Admittedly, there is a lot of settings here when you export these SWF files. Having to go through each of these can be quite time-consuming. So it's nice to know that any time you could go ahead and choose Save Preset. In doing so, those presets will appear in this little popup list. That way if you have certain settings that you always use when exporting a SWF file, go ahead and save that as a preset and then moving forward, creating your SWF file is one click instead of many.
There are currently no FAQs about Illustrator CS4 for the Web.
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.