Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
A wonderful benefit to using Illustrator for web graphics is that you have the ability to export your artwork both in raster-based formats, things like GIF, JPEG and PNG, for example, but also as vector-based web graphics, things like SWF or SVG. Now, later on in this training title, we're actually going to dedicate an entire chapter to creating SWF files or Flash files directly out of Illustrator. However, I like to take your few moments to show you how you can actually get a quick SWF right out of Illustrator using the Save for Web & Devices feature.
I'm going to go here to the File menu and choose Save for Web & Devices. And I'm going to use my Slice Select tool here just click on this Explore California logo. Maybe I want to export this as a SWF file, so that people can zoom in on it. In reality, we may see later on that we can actually create some animation here. But with this slice selected, I'll come over here to the pop-up menu and choose the SWF file format. Now, the first thing to know is that there are several different versions of the Flash Player out there. Illustrator, right over here, supports up to Flash Player 9, even though Flash Player 10 and even Flash Player 10. 1 are out, but this ensures backwards compatibility with older computers.
According to Adobe's web site, 99% of Internet capable computers have support for the Flash Player 9. Now, here's an interesting pop-up. I have some options here. One of them is called AI File to SWF File. The other one is called Layers to SWF Frames. We're going to see later on that this gives me the ability to export my artwork as a static SWF file, or if I choose to convert my layers to SWF frames, I can actually generate an animation out of Illustrator. For now, I've really don't have any layer set up for any kind of animation so I can just choose to export this as a single static file.
I can choose a Curve Quality and if I did have some kind of animation here, I'd also be able to choose a Frame Rate. There are some other options here on the right side, including the ability to compress my file. This makes it smaller. To protect my file, so that other people can open up that SWF file and say, for example, Flash Professional. I can convert my text as outlines. This way I don't have to worry about who has a font. And if I am working with animation, I can choose whether or not that animation plays over and over again by looping that animation. However, an important setting over here is also on the bottom where it says Preserve.
You know, Illustrator supports a variety of different blend modes and transparency effects, and in addition you can use the Appearance panel to add multiple fills and strokes. Now, not all those things can translate perfectly to something that can be displayed inside of the Flash Player. Now, by default, Illustrator actually preserves editability. That means it tries to preserve things like paths and drop shadows as effects, and that way those play back natively inside of the Flash Player. However, you may notice that sometimes the actual appearance of your artwork will change, because the Flash Player doesn't support these exact constructs or types of effects that you've applied inside of Illustrator.
In those cases you'll want to choose to preserve the appearance of your artwork, in which case Illustrator will flatten or rasterize certain parts of your files as necessary, to ensure that your artwork displays correctly inside of the Flash Player. Now in reality, this is just one way to export a SWF out of Illustrator. If I click Cancel here to go back to my document, I'll see that if I go to the File menu I can choose Export, and then from here where it says Format I can choose to export my file in the Flash or SWF format.
When I click on the Export button here, I'm going to get a dialog box called SWF Options, which has a variety of other settings. In fact, so many more settings then we saw inside of the Save for Web dialog box, so much so that there's even an Advanced button which brings you to an entirely different panel. So there are two panels full of settings that we'll see that will allow us to export SWF files out of Illustrator. And as I said before, we'll have an entire chapter inside of this video training title that will be dedicated specifically to going through all these settings and exporting really cool SWF animations directly out of Illustrator.
But for now, you know that you can quickly get some SWF files out of Illustrator directly by using the Save for Web & Devices feature.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
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.