Importing Adobe Illustrator files in Expression Blend 3

I previously wrote a few blog posts about importing Adobe Photoshop files into Expression Blend 3. This post focuses on the ability to import an Adobe Illustrator .ai file and converting the content to Silverlight 3 or WPF objects. You can also use this import feature to bring in wireframes or comps created in Illustrator to use in a SketchFlow application.

The Illustrator import feature in Blend 3 has the equivalent functionality to the Illustrator import feature in Microsoft Expression Design 3. Let’s use the following file as an example and open it in Illustrator to explore its contents:



The Illustrator file above displays a complex illustration that is composed of an image, a text control, as well as a variety of vectors.

In order to be able to import .ai files into Blend you must ensure that the “Create PDF Compatible file” checkbox is checked when the file is saved otherwise the file will not import.




Once saved with the “Create a PDF Compatible file” setting enabled you can import the .ai file into Blend by selecting the “Import Adobe Illustrator File…” entry in the File menu. You can then select an .ai file and see the following results on the artboard:



The Illustrator layers are converted into equivalent Silverlight 3 and WPF objects and displayed on the Objects and Timeline panel. Many features from Illustrator files are imported and others are not supported. You’ll notice some of the following behavior:

◦Images: Images are imported as PNGs and automatically added to a <.ai file name>_images folder in the project.
◦Text & Vectors: Text and vector artwork are all converted to editable paths on import.
◦Visibility toggle & lock states: These properties are preserved for the imported objects.
◦Gradients: Midpoint stops and gradient stops are imported and editable.
◦Layer Structure & Groups: Only the top groups are preserved in the file structure.
◦Layer Names: These are only persisted only for the top level groups in the file. Object names in Blend can only contain alphanumeric character [A-Z][a-z][0-9] and underscores. Keep this in mind when naming objects in Illustrator.