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.
While copying and pasting individual elements from Illustrator into Flash can be useful, there may be times when you have an entire document all ready to go and you just want to bring everything in one fell swoop. Again, whether you are just the designer who is using both Illustrator and Flash, you can easily see the value of defining and creating everything in your favorite design application, Illustrator. But then adding all the interactivity later on inside of Flash. And likewise if you are working with a developer, it's much easier for you to take your simple Illustrator file and hand that off to the developer, which they can then use directly inside a Flash. You may know that if we go to the File menu, you can choose Export. In doing so, underneath the File Format setting, you can choose to export your file as a Flash or SWF file.
However if you are moving graphics from Illustrator into Flash, the application, this is not the way to go. As I shared with you before, Illustrator and Flash do share the same graphics engine. And likewise whether you work with symbols and other elements such as text, they're all the same. Therefore, the best way to bring an entire file from Illustrator into Flash is simply to save your file as a regular native Illustrator file. So I will cancel out of this. I come over to the File menu and I will choose Save As and on my desktop I will choose to save this file called animated_banner and I will name this one flash_banner. I will click OK over here in the dialog box. I will just take the regular standard Illustrator settings and now I will switch over to Flash, the application.
I will create a brand new Flash file right here and now I want to get started with everything I have done inside of Illustrator. To do so, I will go to the File menu > Import > Import to Stage. I go to my desktop and I will choose that flash_banner.ai file and import it. Now Flash throws up this Import dialog box, which gives me a tremendous amount of control over exactly how this entire file does get imported into Flash. As you can see on the left side over here, every single object that I have created inside my Illustrator file shows up in this list. I can choose to import only specific layers, and I will go ahead I will close these layers so I just see the overall layers that exist in the file.
In the Illustrator file I had a Background layer, a Surfer layer, a Groundswell logo on its own layer and that Sign Up button as well. If I don't want any of these, I can simply uncheck it and then that artwork will not be included inside of Flash. But in this case here I am going to have all these options checked. Take a look over here. It also says Select Illustrator Artboard. If I would have had multiple artboards defined to my Illustrator document, I can simply choose which those artboards I want to import. Let me highlight just one of these for example. I will go ahead and I will click on the word here Groundswell. I can turn that entire layer here and simply convert that to a bitmap or I could turn that entire layer into a movie clip as well.
But since I have done all this work already inside of Illustrator, I don't even need to go there. The one thing that I do want to make sure is taking a look at some of the settings down here on the bottom. I would like to convert all my Illustrator layers into Flash layers. By the way, the alternative is to turn them into keyframes or to turn everything to a single Flash layer, but I want to preserve my Illustrator layers and turn them into Flash layers. I want to place all my objects at their original position and most importantly, I want Flash to automatically change its stage size to match the size of the artboard that I created inside of Illustrator. In this case, it's a 728x90 leaderboard. I will go ahead and I will choose that option and I could also choose to import any unused symbols. For example, I might have some symbols that I defined inside of Illustrator which are saved to my Symbols panel, but that don't appear on the artboard itself. I may want to be able to use those symbols here inside of Flash. So I will go ahead and I will check that option.
Now let's simply click OK and all of my artwork is brought right here inside of Flash. You will notice that my stage now changed to the right dimension. I can click on these individual elements, for example right now on this particular logo. And if I go to my Properties panel, I will see that all the information is preserved. The same applies to all the other symbols that I created. In fact if I go ahead and now I double-click on this particular symbol to isolate it, I can actually select this text and see that with my Type tool I can go ahead and I can edit that text. In fact inside of Illustrator I already defined that as dynamic text and I have given an instance name. So all the information that I put into my artwork inside of Illustrator is all preserved now inside of Flash. Let me go ahead and exit the Isolation mode for these particular symbols and you will see here on the Timeline that all of my layers that I created inside of Illustrator are also preserved.
So here is the way that I look at it using both Illustrator and Flash together. On an individual basis if you just need to bring some graphics in at one time or another, a simple copy and paste will do. But if you spend a few moments upfront planning your project, you can really take advantage of defining an entire file with layers and everything inside of Illustrator and bringing everything into Flash in one step. From this point it's simply a matter of adding some ActionScript and some interactivity and you are ready to go.
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.