Chapter 3

Designing an Interface

After completing this chapter, you will be able to:

  •  Create a new project.
  • Place visual elements and common controls in your project.
  • Use layout panels as containers for arranging objects.
  • Use image and video elements.
In this chapter, you will complete exercises that help you build your skills in creating projects with Microsoft Expression Blend 4. Even if you’re not an artist, you will be able to create a multimedia project and run a website—all from within the Expression Blend user interface. The previous chapters dealt mostly with the workspace itself and where you could find the Expression Blend tools. This chapter will help you use the tools and features you learned about in the previous chapters to produce amazing results.

Creating a New Project

Before you can draw and add elements on the Artboard, you must create a new project.

Expression Blend New Project Dialog

Placing Visual Elements and Common Controls in Your Project

Although you can draw basic shapes manually on the Artboard in Expression Blend, it’s often faster and more accurate to insert basic shapes rather than drawing them in a free-form style. Expression Blend provides three basic shape tools in the Tools panel: Ellipse, Rectangle, and Line. They share the same button, but clicking the small triangle in the lower-right corner of the button makes all the options visible.

Expression Blend Shapes Tool

When a predefined shape won’t work even with the various manipulations you can apply, you will need to draw it manually. In Expression Blend, you draw shapes by creating paths on the Artboard with Expression Blend’s drawing tools.

Drawing a Line in Expression Blend

Among the new features in Expression Blend 4 is the ability to easily add and modify custom shapes in your projects. Custom shapes are ideal for meeting requirements that are too detailed for a simple shape such as the one you inserted in the previous section, especially when you need these shapes often enough that it would be inefficient to draw them by hand every time.

Expression Blend Shapes Panel

Using Layout Panels as Containers for Arranging Objects

Layout elements serve as containers for the objects in your project. With layout elements you can control the size, positioning, and arrangement of their child elements. If you are familiar with laying out HTML pages, you can think of a layout element as similar to a div tag, table cell, or other container element. There are several types of layout panels available for use in your Silverlight projects :

Layout Panels in Expression Blend

Using Image and Video Elements

In addition to drawing visual elements and adding controls and layout elements to your project, you can also insert images, video, and other media elements. These capabilities of Expression Blend help you create meaningful projects that can take advantage of existing media assets and help you convey a message to the viewer.

Using Images

In this exercise, you will add a basic image to a Silverlight project. Because many businesses and sites already have an inventory of creative assets such as images, the skills you will develop in this exercise are important in repurposing existing creative assets.

Using Images in Expression Blend

Using Video

Using media elements in your project can help you deliver information to your visitors in an easy-to-consume way and goes far beyond the visual impact afforded by static elements such as text and images. Over the past few years, video use on the web has exploded . Expression Blend provides tools that help designers provide high-end media experiences.
Media File Formats:
Expression Blend supports most common video file types, including .asf, .avi, .dvr-ms, .ifo, .m1v, .mpeg, .mpg, .vob, .wm, and .wmv. Expression Blend also supports audio file types such as .aif, .aifc, .aiff, .asf, .au, .mid, .midi, .mp2, .mp3, .mpa, .mpe, .rmi, .snd, .wav, .wma, and .wmd. In fact, Expression Blend supports the full list of video and audio file formats that Windows Media Player 10 supports.

The process for adding media elements to a project is very similar to the one you’ve already seen for adding images. In this exercise, you will add a basic video to the project you worked with in the previous exercise.

Using Video In Expression Blend

You can easily make this a point to YOUR company OR hide it all together.