courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

school.tutorials

Importing artwork from Adobe® Illustrator®

Many times a designer creates a wireframe in Adobe Illustrator, so why not take that existing artwork and use it directly in your prototype? When you import native Illustrator files into Expression Blend you can take advantage of layers and the vector objects that already exist. In this module you drop in a native Illustrator file and then add interactivity to it by turning an Illustrator object into a custom control in Expression Blend.

  1. To start, make sure that you do not have any other lesson files open. From Expression Blend choose File > Open Project/Solution. Navigate to the WPSketchFlowLesson04 folder and open the project file located inside the Prototype04_Start folder.
  2. Using the Projects Panel or the SketchFlow map, double-click on AdvSearch to open that page. You added a Pivot control to this screen in Module 1. Some content has been added to the first TimeCravinPivotItem; you will create the content for the second, RecipePivotItem.
  3. In order to see the RecipePivotItem, turn off the visibility TimeCravinPivotItem by clicking on the Eye icon to the right of the PivotItem in the Objects and Timeline. Keep in mind that this does not Collapse, or stop that PivotItem from running in the build.
    Turn off the visibility TimeCravinPivotItem
  4. Now, click and drag the RecipePivotItem up above the TimeCravinPivotItem in the Objects and Timeline panel. That second PivotItem is now visible.

    Since this is a prototype and you don’t want to spend a lot of time recreating a design that was already approved you will drop in the native Illustrator file onto this screen.
    Click and drag the RecipePivotItem
  5. Expand the RecipePivotItem and select the Grid within.
  6. Select File > Import Adobe Illustrator File. Navigate to the WPSketchFlowLesson04 folder and select the Adobe Illustrator file named ChickenOliveComp and press Open.

    Notice that a new canvas has been added to your project named ChickenOIliveComp. Even though you had the Grid selected, the import may have placed the canvas in the Pivot control. If this occurred, click and drag the newly imported ChickenOliveComp into the Grid container in the RecipePivotItem.
    New canvas added to project
  7. Use the Selection tool at the top of the Tools panel if you need to reposition the new canvas in the grid.
    Reposition the new canvas in the grid
  8. Expand the ChickenOliveComp canvas to see that Expression Blend kept the Illustrator layers intact, and converted them into canvases. You will use them to add interactivity to this screen.
    Expand the ChickenOliveComp canvas
  9. Choose File > Save.