Geoff Blake reveals how you can use CS3’s tight integration features to smoothly transfer an Illustrator Web comp into a fully working Flash project.
You’ve no doubt been in this situation before: you build a beautiful Web layout comp in Illustrator for a tough client who seems to have an axe to grind. The sign-off comes, and you’re ready to pull the layout over into Flash, set a few items, animate a few others, and the job’s done right?
Wrong! In previous versions, getting content from Illustrator into Flash – well, getting it imported decently at least – was a lot tougher than it should have seemed.
Thankfully, CS3 makes this entire process a breeze. From being able to set symbols and tag text in Illustrator to getting Flash to control layer imports and recognize Illustrator objects correctly, it’s all in there.
So, if you’re ready to see what CS3 has in store, let’s take a stroll through an Illustrator layout to Flash movie production.
01. When you’re ready to begin, open Layout.ai in Illustrator, which is supplied in the tutorial files. Take a moment to look around to see how the file has been set up. For example, note how the layout has been organized inside the Layers panel: there’s a layer containing instructions, a layer for the layout’s menu, a layer for the layout elements, and a final layer for background items.
Also notice that the Metal Menace Monthly logo has a warp and drop shadow Effect applied to it. Ungroup it and use the Appearance panel to take a look.
02. Now that we have a sense of how the Illustrator file is organized, we’ll prepare the layout for use in Flash. First, did you notice that the Illustrator file is in CMYK? You can bring CMYK Illustrator files into Flash, but sometimes Flash’s conversion to RGB isn’t the greatest, so I always convert in Illustrator by choosing File > Document Colour Mode > RGB Colour.
03. Next we’ll convert the menu items in the layout to Illustrator symbols. New to Illustrator CS3 is the ability to save Illustrator symbols as a specific type; either Graphic or Movie Clip, which is of course recognized by Flash when they’re imported.
To do this, first open the Symbols panel (Window > Symbols). Then, choose the Selection tool from Illustrator’s Toolbox; select the first menu item; and drag it into the Symbols panel. In the Symbol Options dialog box that appears, name the symbol ‘Current Issue’, set the symbol’s type to Graphic; then click OK. Repeat this for each menu item in the layout, naming each appropriately.
04. Also new to Illustrator CS3 is the ability to tag text for use in Flash. Select “The Monthly Rag for Giant Robots” in the top-right corner; then choose Window > Type > Flash Text. In the panel, use the Type menu to tag your text as either Static, Dynamic, or Input, which Flash recognizes when you import your file.
Notice with Dynamic and Input text, some additional formatting options become available, like the ability to embed characters in your Flash movie, set hyperlinks, and so on. Make sure the Type menu is set to Static; then save and close Layout.ai.
05. If it isn’t already running, launch Flash; then create a new blank document. On the Properties inspector at the bottom, click on the Size button; then in the Document Properties dialog that appears, make sure the Dimensions are set to 770px by 400px. Click OK when you’re done. Now we’re ready to import our Illustrator file. Choose File > Import > Import to Stage; then navigate to and select Layout.ai; then click Import.
06. Flash displays the Import dialog box, where we’ll set how we want the Illustrator file to be brought in. On the left side of the dialog box, all of the layers and sublayers from the Illustrator file are listed.
The right side of the dialog box allows us to set how we want each layer to be imported. First, we don’t need the Instructions layer in our Flash movie, so click the collapse triangle beside the layer; then remove the checkmark beside it. Next, each of the items in the Main Menu layer were converted to Symbols back in Illustrator, so make sure they’re all checked.
If you select one of the symbols, you’ll see symbol import options appear on the right side of the dialog; the only option being to import the selected symbol as a bitmap (rasterized) object. Leave the symbols as they are; then collapse the Main Menu layer.
07. Next, the Layout Elements layer contains a text layer for The Monthly Rag for Giant Robots, and the layout’s logo, which is contained in a group. Highlight the text layer, and on the right, you can see that you can import the text as editable text, vector outlines, or as a bitmap; each with the option of converting the text to a movie clip. Make sure Editable Text is selected; then collapse the Layout Elements layer.
08. The Background Content layer contains the outer frame of the layout, as well as the robot head, which we’ll set as a watermark in Flash. Within the Background Content layer, select the
09. At this point, you may want to further explore the options in the Import dialog box. For example, rather than setting import options for Illustrator’s sublayers, you can select the layers themselves and set how Flash should import them.
Further, at the bottom of the Import dialog box, you can decide how Illustrator’s layers should be imported into Flash (as layers, keyframes, or a single Flash layer), as well as some additional import options. Make sure to leave the default settings however; and when you’re ready, click OK.
10. Flash imports your artwork. Take a look at the Timeline, where your imported Illustrator layers appear. Further, have a look at Flash’s Library (Window > Library).
Open the Layout.ai folder, and you’ll find some subfolders. Open the Layout Elements subfolder, and you’ll notice three movie clips, one for each component of the Metal Menace Monthly logo.
Any objects that have Illustrator Effects applied to them are converted to Flash movie clips. Double-click on the logo back on the Stage (to expand the group) and have a look at the Filter tab on the Properties inspector, where you’ll see the drop shadow effect.
11. If you’re still inside the logo group, click on Scene 1 just beneath the Timeline. Next we’ll adjust our imported editable text. Select the text The Monthly Rag for Giant Robots and because we’d set it to be Static text back in Illustrator, we can of course further edit the text and use the Properties inspector to apply formatting, set a hyperlink, and so on. Here I’ve adjusted the font, size, and alignment, and also applied a drop shadow using the Filter tab on the Properties inspector.
12. Now we’ll set the robot head watermark. Select the robot head on the Stage. The Properties inspector tells us that the object is a bitmap (which is how we’d imported it). Next, choose Modify > Convert to Symbol, and in the Convert to Symbol dialog box, name the symbol Watermark and set the type to Graphic; then click OK. Using the Properties inspector, set the Colour menu to Alpha and set a value in the percentage field that appears to set the watermark’s opacity.
13. Next we’ll set the buttons for the menu. In the library, expand the Illustrator Symbols folder; then right-click on the first symbol in the list and choose Properties. In the Symbol Properties dialog box that appears, switch the symbol type to Button; then click OK.
You’ll have to repeat this process for the remaining menu symbols. Once each menu item has been converted to a button, you can double-click on each to set their Up, Over, Down, and Hit states. When you’re done, click on Scene 1 just below the Timeline.
14. You can continue customizing your Flash interface, import some text and other content, and so on. When you’re finished, save your movie into your tutorial folder; then choose File > Publish Settings. In the Formats tab, make sure Flash and HTML are selected; then click Publish, then OK at the bottom. In your tutorial folder, you can take the HTML file that Flash created into Dreamweaver to further customize your interface. For example, you could add in additional content, incorporate CSS, and so on.
To really harness the power of importing Illustrator content, make sure to take a look at Flash’s AI File Importer preferences. Just choose Edit > Preferences (Windows) or Flash > Preferences (Mac) to get started.
Who: For the past ten years, Geoff Blake has provided a wide range of graphic design, consulting, artwork, and Webdesign services in the Toronto area, providing expert training and support for many graphic, Web, and print applications. He also writes articles and books (most recently, Ten Ton Dreamweaver with Peachpit Press), leads seminars, and is a presenter with Total Training.
Software: Adobe Illustrator CS3, Adobe Flash CS3 (Optional), Dreamweaver CS3
Time to complete: One hour
On the CD: All files for this tutorial can be found on the cover CD.