➤
when referring to the Expression Suite in Expression Design (a rich Photoshop-like tool that is used for the same).
The second scenario is when you need to transcode media to get it into a format that can be
➤
➤
consumed easily in Silverlight. This tool is called the Expression Encoder.
The third typical scenario is when you need to build multi-scale images that can be generated
➤
➤
from images using Expression Deep Zoom.
Expression Design is a topic for its own book, and just a basic walk-through would fi ll a chapter; but it is important to note that Expression Design doesn’t use native XAML but exports to XAML. Then you can dive into a basic scenario using Expression Encoder.
expression encoder
Expression Encoder as part of the Expression Suite is specifi cally designed to take media content and either transcode or encode that media or produce it in a form that can be consumed online by a Silverlight media player and Windows Media Video (WMV) to integrate it into your existing Silverlight application. Expression Encoder has several built-in templates you can select as part of the output of Expression Encoder and that you can use to quickly build Silverlight media players.
Once you get Expression Encoder running, you need to import your media fi le. To do so, go to the File menu and select Import, navigate to the video fi le you want, select it, and then click Open.
Next, you need to select a template, which you can do by clicking the Output tab at the top and then, under the section “Job Output,” selecting one of the templates. It should look like Figure 3-20.
Click the button in the middle on the bottom labeled ‘Encode’, and Expression Encoder will “go to town.” Now this is all good and Expression Encoder has a variety of other features regarding set-ting up markers, but the key thing is that it gets video content into a nice format, one that Silverlight can consume easily.
deep Zoom composer
Expression Deep Zoom is the key tool for building out MultiScaleImages that you will use in Silverlight. Deep Zoom is a simple tool like Encoder, for example, that allows you to import images and produce the multi-layer image collections; it auto-generates the underlying tile structure used by Deep Zoom (MultiScaleImages) that thus can be used in Silverlight to produce the effect of effi ciently having an infi nite ability to zoom in and out without performance issues. When you open Deep Zoom Composer for the fi rst time, you will get a dialog like that of Expression Blend that lets you create a new project or select an old one. Since this is your fi rst time, you need to create a new one.
figure 3-20
Deep Zoom Composer then creates a new Deep Zoom Project in which you import all the high-resolution images you want to use. Then you can compose your collection of images, and it will export and build all of your multi-layer image collections, tiles, and other bits as configured so you can use them in your Silverlight applications.
Now you need to get familiar with the user interface. Initially there is just going to be a File menu at the top and then three buttons centered below that — Import, Compose, and Export (Figure 3-21).
Import is selected by default. To the right, just below that level, is the Add Image button — the only other item that is important on the UI.” When you click “Add Image,” you can select as many images as you want to add to the collection. Once they are added, you will see a list of the images as thumb names below the button; you can select one at a time, and the selected image is shown in the larger gray area to the left in high resolution, with the image details at the bottom.
Next, click Compose and the view shown in Figure 3-22 displays.
Here the user interface still has the Menu bar and the three buttons. However, you can also see a toolbar to the left, the images laid out in the center, the image collection at the bottom, and the Layers and Properties to the far right, along with the small button menu between the design surface in the center and the Layers and Properties box.
figure 3-21
Images can be dragged into the center and laid out as you like. The toolbar to the left can be used to manipulate the design surface with Zoom, Pan, and Selection tools as well as various alignment tools. The bottom-left corner of the design surface features a higher-level view that allows you to move the viewable area around the design surface. This is helpful when you are zoomed in and there are lots of images.
The buttons to the right are for creating specialized elements in the Deep Zoom project, including creating a slide show out of your images, creating a menu navigator for your images, and creating internal links or external links within the Deep Zoom design surface. Once you are done and your images are laid out as you want the multi-scaled image to work, click the Export button at the top.
The Export section (Figure 3-23) shows a preview area as well as a dual-tabbed section for either creat-ing a DeepZoomPix account or Custom. Select Custom and you can set the output type, which should be “Silverlight Deep Zoom.” Then you have an area to give it a name and location with a Browse but-ton that opens a Folder dialog box. Below that are the “Deep Zoom Settings.” The settings include the Export type, which can be a composition or image, and a Collection. If you select Collection — which is the most typical selection — a template drop-down includes the default template as well as an Expression Blend Behavior-based template, a classic with source template, an empty project template, and a tag browser template. Below this area are the Image settings for setting the fidelity of the images in the generated project.
Export Button Design surface for composing images
into a deep zoom composite Images that can be added to the
design surface for composition
Selection Tool Pan Tool Zoom Fit To Screen Tool
Alignment Tools
Arrange Icons Size Matching Icons
figure 3-22
figure 3-23
When you click Export, the Export in Progress dialog displays. When the export process is com-plete, the Completed dialog displays, where you can preview the project in a browser, open the image folder, view the project folder, and learn more or just close it. If you open the Folder view in Expression Encoder, you can then open your project in Expression Blend to do further customiza-tion or in Visual Studio.
suMMary
In this chapter, you reviewed the Expression Blend IDE including all the key sections and how those sections behave with regard to your Silverlight view when it is selected on the design surface. You should now be able to find and change properties, including complex transitions, as well as navigate the Visual Tree using the Objects and Timeline tab and find and drag controls off the toolbar.
You learned the process of creating a new project in Expression Blend and how to transition from Visual Studio to Expression Blend. You also learned the process of building custom Behaviors in Visual Studio and how those custom Behaviors are consumed and used in the Expression Blend IDE. You also learned how to import Photoshop (PSD) files and Adobe Illustrator (AI) files, as well as how to include images and fonts in your project.
You also learned how to use the Visual State Manager in the Expression Blend IDE, including how to use the State tab and how to customize elements. You learned how Expression Blend provides custom control templates for you to edit based on the existing built-in template used by the framework (as opposed to Visual Studio, which has no concept of getting at the base control templates that are part of the framework).
Even if you do not have the skill and eye of a designer, you should be able to work with the Expression Blend — the main design tool for Silverlight — to help you build better application UIs.