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.