Creating an Animation in Expression Blend

In yesterday’s blog post I created a little application in Expression Blend. Basically the application shows an image of elephants and a button that lets you hear an elephant’s sound when you click it. Now I want to add an animation. The idea is to let the elephants appear when one button is clicked, and disappear when another button is clicked.

I am going to reuse that button that I already have and add a second one:

Now I can create the animation. To do that I am going to create a new storyboard and then define the animation in the animation timeline.

I want the image invisible until after I press the “Look Who’s There” button. So I am going to begin by setting the opacity of the image to “0”.

In the ‘Objects and Timeline’ panel I click ‘Image’, in the ‘Appearance’ category I type “0” in the ‘Opacity’ field.

Now I am ready to begin recording the animation.

With ‘Image’ selected in the ‘Objects and Timeline’ panel, I click the “+” sign.

That lets the “Create Storyboard Resource” dialog box appear. I give that Storyboard a name and then click “OK”.

In the ‘Objects and Timeline’ panel I click “Record Keyframe”. A keyframe appears on the timeline in the row that corresponds to the selected object, in my case the ‘Image’.

Expression Blend enters timeline-recording mode with the playhead at the 0 – seconds mark. When in recording mode, any property that I set will automatically record a keyframe on the timeline.

I want my animation to last as long as the audio file, which is about 5 seconds. So I drag the playhead to 0:05:00.

Because I want the animation to go from invisible with the playhead at 0 seconds to visible at 5 seconds, I change the ‘Opacity’ in the ‘Appearance’ category now to “100”. Now, when the animation is triggered, the image will fade in gradually. I can test the animation now by clicking “Play”.

When I am happy with my animation I simply click on “Record mode indicator” to end the timeline recording.

My ElephantsStoryboard animates the fading in of the elephants. I am going to need another storyboard to animate the fading out of the elephants.

The easy way to create this animation is to duplicate and then reverse it.

To duplicate the animation I click on the drop – down button next to the “+” sign in my open existing ElephantsStoryboard and select “Duplicate”. That will create a new storyboard with the name “ElephantsStoryboard_Copy1”. I am clicking the same drop – down list and select “Rename” to rename that, then from yet the same drop – down list I select “Reverse”. The storyboard is now replaced with a reversed version of itself.

Now I can close my storyboard. Now that I have created my animations I need to be able to control when to play the animations. So, what I have to do is add a “ControlStoryboardAction” behavior to each button. I simply drag and drop it from the ‘Assets’ panel onto each button, and then modify the properties to fine-tune the behavior:

Now I can build my project and run it:

First the screen appears empty. When I click my “Look Who’s there” button, the audio file begins to play and at the same time the image is slowly fading in:

It is quite easy to build applications in Expression Blend. I am definitely going to experiment more with that. Who knows? Maybe the next application that I am going to submit is going to be an entire Expression Blend application?


To be continued…

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: