Advertisment

Shape Up Your Expressions

author-image
PCQ Bureau
New Update

Expression Blend is a tool to simplify the building of graphical interfaces

for web and desktop applications. It uses XAML, a new markup language that can

describe the presentation surface of an application. Through this tool one can

easily build interactive applications and even animate them, as most of the

functionality to achieve these tasks is integrated into the tool. Expression

Blend and Expression Design are the two components of Microsoft's Expression

Studio. We shall use Visual Studio 2008 to show hassle free interoperability of

the code. As one builds an interface using Expression Studio, an XAML code is

generated. This code can be exported to Visual Studio 2008 where the developer

can add logic to it. Expression Design is a vector and raster graphic design

tool to help designers build appealing graphics. The graphics created using this

tool can be exported (using XAML) to other tools of Expression Studio to add

logic and



animation.

Advertisment

Designing and animating images



We will start by designing a simple graphical image that will be later

animated using Expression Blend. Here, we shall create a simple banner in

Expression Design. As it is a design tool, creation of design depends on the

creativity of designers. Once the banner's design has been created, we can

export it to Expression Blend. Simply copy-paste your design or click on 'File|Export.'

A window will pop up. Here, click on 'Export' at the bottom. This will export an

XAML file to a desired destination. The following is part of XAML code generated

for our banner:

Direct Hit!

Applies To:

User interface designers and developers



USP:
Smooth transformation of design into code



Primary Link:


www.microsoft.com/expression/




Keywords:Microsoft Expression Studio





xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006" c:Ignorable="d"

x:Name="pc_design" Width="500" Height="200">



Canvas.Top="0">....


Canvas.Top="0">






















Foreground="#FFFFFF00"/>














Advertisment

In Expression Blend we created a new project and simply copied our designed

banner to it. We can check the XAML code of our design from the XAML option in

Expression Blend. To animate this banner, select the objects to be animated from

Object and Timeline menu. For animation we need a timeline. For this, click on

the “+” button under Object and Timeline menu and give a name to your timeline.

You will find a new timeline added. Now move the highlighted bar in timeline

from 0 to 4 seconds and click on Properties at the top. Go to Transform menu and

click on the Angular tab on top (second from left). Now change the angle to 360

degrees and press F5 to see your animation. Besides angular transformation one

can also move objects in X and Y coordinate, scale, skew and flip them. The

animation starts when Windows loads. To change the time it starts, create a

button by double clicking on button icon in the toolbar. But before this make

sure you have turned off Timeline recording. This can be done by clicking on the

red button on top left of the display area. Now delete 'WindowsLoaded' event

from Triggers menu and click on the Event button, This will trigger the event

that you've just created. Then from the dropdown box specify when that event

should trigger (in our case it is click). One can also mention the type of

action i.e. pause, begin etc. Now press F5 again and click on 'Button' to start

the animation.

To create a timeline, click on

'+' under Object and Design menu. This will create a timeline for animation
If you want to rotate the

banner, simply set the timeline to 4 and under Transform menu change the

angle to 360 degrees.

The same project file can be opened in Visual studio, where desired code can

be added. In this project we shall add a simple message box in Windows.xaml.cs

file through the following code:

Advertisment

using System.Windows.Media;



using System.Windows.Media.Animation;


using System.Windows.Navigation;


namespace UntitledProject10


{


public partial class Window1


{


public Window1()


{ this.InitializeComponent();


MessageBox.Show("Simple Animation Using EXPRESSION BLEND,DESIGN and VS");


}}}








To play animation on 'Button'

click, first add the button to your project and then delete WindowsLoaded

event and add 'Button Click Event'
Project file of design and

animation built in Expression Blend can be directly opened in Visual Studio,

where the required code can be added

This is how a designer and a developer can use the same project file, giving

them the desired flexibility to move forward and backward in a project

development cycle. To achieve the same quality of animation and design using

JAVA 2D and 3D APIs, each feature needs to be properly coded, whereas here we

can achieve the same results by simply dragging and dropping objects. Other

designing tools such as Flash let you create innovative designs, but converting

it to a successful program code is difficult. Moreover, for a developer working

on .NET or other Microsoft platforms, using Expression Studio Suite is a better

option.

Advertisment