Join Shane Rebenschied for an in-depth discussion in this video Integrating Illustrator content, part of Flash Professional 8 Beyond the Basics.
>>Now that you've seen how other Macromedia applications fare when importing those graphics into Flash, and they've done rather well, let's see how Adobe created graphics fare when being imported into Flash as well. Let's start with Illustrator. So go ahead and create in Flash a new document, change the stage size to 600 pixels wide, and then choose "Import." Navigate again to your desktop, into your "LA Eyeworks" folder, into the "File Types" folder, and then in there into the "Illustrator" folder.
There are a series of files in there that have all been created with Adobe Illustrator. There's a plain Adobe Illustrator document, an EPS, a PDF, and a SWF file. Let's see how those different file types fare when being imported into Flash. First let's start with the actual Adobe Illustrator document itself. Again, the icons that you see here in my Import window, may differ from the icons you see in your window depending upon if you have those particular programs installed on your computer or not. Regardless, select and then double-click on the "Main Menu AI" file, again this is inside of the "Illustrator" folder.
In the "Import Options" dialog box, it gives us a few options. The first set is to "Convert Pages To" and then we can choose either "Scenes" or "Key Frames." If we had other pages in our Illustrator document, we could have those when imported into Flash, be placed in "Scenes" or "Key Frames." Now I'm only using one page in this Illustrator document, but for now go ahead and choose "Key Frames." The next options is to "Convert Layers To," "Layers inside of the Flash file," "Layers in the Illustrator file into Key Frames in Flash," or just to "Flatten it." Go ahead and leave the "layers" in the Illustrator document set to be converted into "layers" here inside of the Flash document.
If I had multiple pages I could also choose all of the pages, or just to import at range of pages from the Illustrator document into my Flash document. For now just go ahead and leave it set to "All." Again, there's only one page in this Illustrator document that we're importing anyway. Under "Options" there's still a few more things to choose from. I can have it include or not, invisible layers. I can have it maintain text blocks, or if I just wanted to make it look just like it did in Illustrator, I could choose to have it "rasterize everything." And then once I selected that option, I could choose a resolution for it to "rasterize those graphics at." In this case, again, I want to test to see how documents created inside of Illustrator, when brought into Flash, retained their editability.
So can I edit the text, can I edit the graphics, and so forth, after I've imported them into my Flash document. So I'm gonna make sure that "rasterize everything" is not checked. I don't want to include any invisible layers, so I'm gonna go ahead and uncheck that option. But I do want to maintain text blocks, so make sure that that option is checked. Once you've specified all that go ahead and click "OK." Now I can see that it's having trouble converting the font that I picked inside of the Illustrator document, to the Flash document here, as it's importing it.
So I'm gonna choose, "Choose Substitute." I can see that what it's having problems with is the Bitstream Vera Sans Bold Oblique font. Flash isn't understanding what to do with that. If I click on that option, I could then choose which font to substitute it with. I'm just gonna choose from this list "substitute it with," instead of the default system font, "Bitstream Vera Sans". So I'm gonna scroll in my font list until I find Bitstream Vera Sans and then I'm click "OK." Now if I scroll up, I can see that what it's actually done is it's still gotten a little confused with the text in my main menu, here once it's been imported into Flash.
So as you can see, it didn't quite like the base Illustrator, the Adobe Illustrator document, after it's been imported into Flash. It didn't translate it over quite exactly like I had hoped. Let's take a look at one of the other formats that have been exported from Illustrator. I'm gonna go ahead and close this FLA file, not save any changes, and repeat that same process over again. Create a new FLA, change its dimensions to 600 pixels wide, and then choose "File Import." And this time again, in the same Illustrator directory, I'm gonna import the EPS file that's been exported from Illustrator.
Let's see how that fares. I get the same import options dialog box. My options should be still set to what they were previously. The important thing is to make sure that it included visible layers, as well as "rasterize everything" are unchecked, and that "maintain text blocks" is checked, and then go ahead and click "OK." Again, I get the same missing font warning dialog box that appears. I'm gonna do the same thing as before and choose the button "Choose Substitute." This time I can see that it's automatically set it to be mapped to Bitstream Vera Sans, I'm gonna leave it set to that and click "OK." Then if I scroll up, I can see that it's done a little bit better with translating the text over, I don't see a bunch of gibberish up there.
But let's see if that text is still editable. I'm gonna click on the "About Us" option, and I can see that what it's done is that is all one giant text block. It's put them all together into one text field, instead of separating them into their own separate fields. It's still editable, if I double-click on it, you can see that I can get in there and edit. And again, it's actually translated it over to the correct font face, Bitstream Vera Sans, but I can also see here inside my font pull down menu, that's having a little difficulty mapping it to the correct font.
So if I were working in Illustrator and had exported an EPS file from Illustrator, and then brought it here inside of Flash, I would want to make sure to select my text, and from the font pull down menu, make sure to choose the correct Bitstream Vera Sans. That way I'm mapping it to the correct font that I have installed on this particular system. Beyond that I can also see that it's done some stuff with the color. This now looks like an 80's florescent green color that it sort of translated everything to. So not only has it taken my text, which was in separate text blocks, and put them all inside of one text field, but it's also messed with the colors that I've also assigned to the well.
Let's see what it's done to the Vector Graphics, if I select that green bar in the background I can see that it's inside of a group, but if I double-click on it, do I still get access to the actual Vector outlines of this graphic? And as I can see by selecting it, I do. So Vector Graphics, exported from Adobe Illustrator as an EPS file, translate over correctly. Now again, it's actually changed the color and the text is been converted into one giant text block, but again at least it's still editable. So it's not optimal by any means, but a lot of the content that was inside of the Illustrator document, after being imported into Flash, is still editable.
So if I had some extra time I could still go back and work with this document, I could change the colors, and take the text and put them in their own text fields. So all is not lost with an EPS file exported from Illustrator. Let's take a look at some of the other formats, again, go ahead and close this FLA, don't save any changes, and open up a new FLA. Change the dimensions to 600 pixels wide, and then choose "File Import" again. This time let's import a PDF file that has been exported from Adobe Illustrator.
Select that PDF file, and double-click on it to import it. Again you get the same options. I'm gonna leave all the options set to what they were previously, and then click "OK." The same missing font warning dialog box appears, so I'm gonna choose "Choose Substitute." Make sure that the Bitstream Vera Sans Bold Oblique font is being mapped to the Bitstream Vera Sans font installed on my computer, and then click "OK." Then if I scroll up in my stage I can see that unfortunately I'm getting the same results that I did when I tried to import the base Adobe Illustrator document.
Not only that, but I can see again my colors have been shifted, this time I can see the greens are more desaturated than what they were when they were originally created inside of the Adobe Illustrator document. So unfortunately it looks like in this case, the Adobe Illustrator document, exported as a PDF file, and then imported into Flash, didn't yield very good results. I'm gonna go ahead and close this FLA, not save any changes, and let's take a look at the last file format that has been exported from Illustrator. Again go ahead and create a new FLA, change the dimensions, and then import in that same Illustrator folder, a SWF file exported from Illustrator.
Go ahead and double-click on the "Main Menu_SWF" file to import that into Flash. This time because it's a SWF file, I'm not given any options, or any problems that talk about matching up the font used. If I scroll to the top of my stage, I can see that there's all my text. If I click on the "About Us" text, I can see that it's by itself, it hasn't been stuck in a big text field like it was with the EPS that's been exported from Illustrator. If I double-click on that group, and then click on that text again, I can see that in the "Properties Inspector" I do have access to the text itself.
But again, it's still mapping it to a system font that isn't quite correct, so I'd want to make sure that I click on that font pull down menu, and set it to the correct Bitstream Vera Sans. It also didn't translate over quite exactly how I had it set, which was bold and oblique. So I'd want to make sure if I was trying to work with a SWF file exported from Illustrator here inside my Flash document, that I also set the bold oblique, like I had it set inside of the Illustrator document originally. But the good news is that the text is still editable, and it's in it's own text block.
Again, it hasn't been merged with all the other text inside my file. Let's take a look and see how it translated to Vector Shapes. So go back to scene one and click on the green bar in the background. I can see that it's been inserted, not into a group this time, but inside of a graphics symbol that it's automatically called "Symbol One." I'm gonna double-click on that symbol to open it up, and then I can see what it's done here, is it's actually created a few different layers. One layer is a mask, and that it's masking another layer. Go ahead and lock the top most mask layer for now, and hide it so that you can see what's behind it, the layer that it's masking.
The layer that it's masking is our green bar, but it is in its own group. If I double-click on that again, and then click on that shape on the stage, I can see that there is the base Vector Object, and yes, I can still go back and edit it. So its done some funny things with creating a mask layer, and the Vector shape that we want to get access to is in another masked layer, but that Vector shape is still there, and I can still take it, cut it out of there, and paste it wherever I needed it, should I want it then integrate that content into my Flash site.
So we're gonna go ahead and go back to scene one now. So SWF files, exported from Illustrator, do a fairly decent job at retaining the editability of both the text and the Vector shapes. Again, it does a few strange things with Vector shapes, and the text doesn't translate over perfectly, but it is still workable with a little extra work, I could always go back in here and make it so that I could use it precisely as I intended here inside of Flash. As you've seen in this video, Adobe Illustrator documents, both the EPS and the SWF file, translate over decently well into Flash.
The Adobe Illustrator document itself, as well as the PDF fared not as well.
- Integrating Fireworks, Photoshop, and Illustrator content ActionScript Classes, Objects, Methods, and Properties Using the LoadVars Class to build scrolling text fields Using HTML and CSS with Flash Integrating usability and functionality Building an ActionScript-driven navigation system Building a dynamically loading slideshow with text and images Building a Preloader Using Components to create a feedback form Testing and publishing your final project