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.
You know, Illustrator is a vector-based application, so it's only natural that you should be able to also export vector-based graphics out of Illustrator as well, and you can, by generating SWF content directly out of Illustrator. In this movie specifically, we'll talk about exporting what we call a static SWF, meaning that it doesn't actually move, there is no animation inside of it. But it could be quite helpful to export your artwork as a SWF file for a variety of reasons. First of all, you're able to zoom into that content if you want to view more information on the web, and you'll get nice, clean results when you zoom in.
In addition, using Illustrator it's also pretty easy to define hotspots so that people can click on different areas to be directed to a different URL. Now in this file right here called static_banner.ai, I've created a file that's 300 pixels wide by 250 pixels deep, and by going to the Window menu and choosing Attributes, you can click on individual objects, in this case, here I've use symbols, and I've defined Image Map regions for those objects. Even though it's using the Image Map feature which is generally an HTML feature, these do get translated to regular hot spots as if they were buttons inside of Flash.
In this file, you can see that I've actually applied these hot spots to these three graphics that appear towards the bottom. Now there are two main ways to get a SWF out of Illustrator. First of all, I can go to my usual, which is the Save for Web & Devices, and I can choose a SWF file as my format. So let's do that right now. I'm going to go to the File menu and choose Save for Web & Devices. For the file format here, I can choose SWF, and I also have the ability to preview this in my web browser to make sure that it looks correct, and you can see that the hot spots are active as well.
There is one thing to note about these hot spots inside of Flash content. Because of the security settings that are actually available inside of the Flash player, you may need to make some adjustments inside of your web browser. I'll go back to Illustrator here, and I'll cancel out of Save for Web & Devices and instead, I am going to go the File menu, and I'm going to choose Export. From the file format here, I'm going to choose to export this as Flash, or SWF. Now one of the benefits of actually exporting artwork in this way is that if I choose the Use Artboards option, I have the ability to export multiple pieces of art at once.
You see when I'm using Save for Web, the only thing that gets loaded into Save for Web is the current active artboard. Now in this document I only have one artboard. However, let's say I was creating a range or an entire campaign of SWF files, maybe banners of all different sizes. I would have to export each of them individually as separate actions if I were using Save for Web. However, here in the Export dialog box, if I choose Use Artboards, I can export all of them or a specific range of them as well.
Now when I click on the Export button, I actually get a whole separate dialog box called SWF Options. Now in reality, what we're focusing on right now is simply a static image. So we are not really concerned about things like animation, which a lot of these settings are really important for, especially in the Advanced dialog box that you see over here. The nice thing though, is that I have the ability to click on Web Preview, which is the same thing as Preview in Browser, so I can see with this content looks like here inside my web browser. Or if I go back inside Illustrator, I also have the ability to preview this on a mobile device using Device Central.
Now as we go throughout this chapter, we're going to learn about all the settings that appear inside of this SWF Options dialog box. But for now, when it comes to exporting static artwork from Illustrator as SWF, you now know that you can do them in one two ways: either using Save for Web or using the Export function.
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.