Show animations in Expression Blend

With the feature of animation that Expression Blend incorporates, designers find it easy to develop animation without much effort. Not only does this feature provides ease but it also is time saving. The important aspect is that animation building in silverlight is time based rather than frame based hence there's no need to worry about how many frames per second are being received in the application.

Apart from this, the quick access to the property values provides flexibility in designing. This part of property values is covered in the Storyboard object.

Let's start with our simple example of an animation of an eagle hunting a rabbit.

Follow the steps below to create animation in Expression Blend

Step 1 : Open the Animation workspace.

Go to the top menu, select Window -> Workspaces -> Animation. This is the default Workspaces within the Expression Blend that is used to create Animations. You can create and save your own Workspaces from here.It is understood from the name that it is used for creating animation.

 

Step 2 : Adding the Storyboard.

Go to the OBJECTS and TIMELINE panel and click on the "+" sign. It results in a storyboard window that pops up. This is the part where all the events of the animation are recorded and can can be played. You can name the storyboard and can save your own storyboards. The storyboard is basically time-based recorder panel which comprises of time lines divided into seconds, media bar containing PLAY/PAUSE,FORWARD,BACKWARD etc, to preview the animation.

 

As soon as the Storyboard is added, a recording window appears in the design part as shown in the figure below, this window shows that the you have entered the world of animation in Expression Blend. Within this portion, whatever changes you apply to the design part is recorded and white solid bubble appears in time line.

 
Another part that plays the key role in creating animation in Expression Blend is the Timeline 

In the above figure, you see the events is decided by the time. i.e. at what time after the first event will the next event take place,this time can be set by dragging the time line to required time of making the event. an even is basically making the changes in the design part. for example here the events are : eagle is approaching the rabbit and rabbit is moving away from the eagle.

Now Lets begin with the animation.

Step 3:  Making Animation.

In this article I have made the animation of an eagle catching a rabbit. In order to carry out with this animation first set the background image is set in the art board like this. This is done by simply dragging and dropping image form the storage drive on to the art board. Then resize the image by selecting "solid arrow head tool" from the tool bar.

 
 

Step 4: After setting the background of the animation. Now add two images i.e. of eagle and of a rabbit over the background. This is done in the same way as the background was added. Note that background image remains fixed while we only move eagle and rabbit over the background. Here in these events of adding the images the timeline is set at zero seconds.

 

Step 5: Now the animation starts. What we intend to do is move the Eagle towards the prey (image of the eagle is moved downward) and make the rabbit appear as if it is running away from the eagle. Shift the timeline to 1 second then the eagle image is dragged downward while the rabbit image is flipped horizontally in the opposite direction.

 

Step 6: Similarly the timeline is shifted to the next time and the image of the rabbit is dragged forward to appear as rabbit is running away and eagle image is dragged downward as if it is approaching rabbit.

 

Step7 : Continuing with the steps above finally the eagle image is dragged close to the rabbit image to make it appear as if eagle catches the prey but don't forget to shift the time line as it records the event at the time where the timeline is shifted.

 

Step 8 : Now the animation finally ends with eagle taking away the prey.

This is done by shifting the timeline to next time and dragging both the eagle and rabbit images together upward to give a look as if the eagle held the prey in its claws and flies away.

 

The complete Animation looks like this:

 

Hope you would have enjoyed working out this animation in Expression Blend.