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:
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">....
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.