Video: Understanding the SWF file format and its settings

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.

Understanding the SWF file format and its settings

A wonderful benefit to using Illustrator for web graphics is that you have theability to export your artworkboth in raster-based formats, things like GIF, JPEG and PNG, for example, butalso as vector-based web graphics, things like SWF or SVG.Now, later on in this training title, we're actually going to dedicate an entirechapter 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 aquick 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 ExploreCalifornia 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 choosethe SWF file format.Now, the first thing to know is that there are several different versions of theFlash Player out there.Illustrator, right over here, supports up to Flash Player 9, even though FlashPlayer 10 and even Flash Player 10. 1 are out, but this ensures backwardscompatibility with older computers.

According to Adobe's web site, 99% of Internet capable computers have supportfor 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 artworkas a static SWF file, or if I choose to convert my layers to SWF frames, I canactually generate an animation out of Illustrator.For now, I've really don't have any layer set up for any kind of animation so Ican 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'dalso be able to choose a Frame Rate.There are some other options here on the right side, including the abilityto compress my file.This makes it smaller. To protect my file, so that other people can open upthat 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 withanimation, I can choose whether or not that animation plays over and over againby 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 andtransparency effects, and in addition you can use the Appearance panel to addmultiple fills and strokes.Now, not all those things can translate perfectly to something that can bedisplayed inside of the Flash Player.Now, by default, Illustrator actually preserves editability. That means it triesto preserve things like paths and drop shadows as effects, and that way thoseplay back natively inside of the Flash Player.However, you may notice that sometimes the actual appearance of your artworkwill change, because the Flash Player doesn't support these exact constructs ortypes 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 filesas 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 theFile menu I can choose Export, and then from here where it says Format I canchoose 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 SWFOptions, which has a variety of other settings. In fact, so many more settingsthen we saw inside of the Save for Web dialog box, so much so that there's even anAdvanced 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 toexport SWF files out of Illustrator.And as I said before, we'll have an entire chapter inside of this video trainingtitle that will be dedicated specifically to going through all these settingsand exporting really cool SWF animations directly out of Illustrator.

But for now, you know that you can quickly get some SWF files out of Illustratordirectly 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 "" :

Expand all | Collapse all

please wait ...

Q: In the chapter 5 movie, "Simulating the CSS box model," the author details the CSS box, but names the inner portion the margin and the outer portion the padding. This is reversed from what I’ve have seen elsewhere. Is this an error in the video?

A: This video does indeed contain an error where the author describes the margin and padding. The padding should be described as the area inside the border, and the margin the area outside the border.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.