Shape Up Your Expressions

Expression Studio from Microsoft attempts to bridge the gap between a designer and developer by providing a unified development environment

Tuesday, June 03, 2008

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.

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:

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 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 x:Name="base" d:IsLayer="True" Width="500" Height="200" Canvas.Left="0" Canvas.Top="0">....
<TextBlock TextAlignment="Left" Width="Auto" Height="Auto" Canvas.Left="0" Canvas.Top="0">
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,7.32362,25.947"/>
</TransformGroup>
</TextBlock.RenderTransform>
<Run FontFamily="Segoe UI" FontSize="79.2186" Text="PCQUEST" Foreground="#FFFFFF00"/>
</TextBlock>
</Canvas>
</Canvas>

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:

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.

Page(s)   1