Posts Tagged ‘ Animation ’

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…


My first Animation in Silverlight

Today I read something very cool. Even for beginners like me it is relatively easy to use animations in an application.

To see how, I quickly created a new project with just a text block. Then I am locating the TextBlock element in XAML view and replacing it with the following:

When I run the application it looks like this:

It looks nice, but it doesn’t do anything. So the next thing to do is adding a button element in XAML view right after the <Ellipse /> tag:

I now have a button called “FirstButton”, so that I can access that button from code. I also have set some properties, like the size of the button and the content.

In order to make something happen I need to add a click event handler. I do that by double clicking on my button in Design view.

Inside that event handler I add this code:

When my button is clicked, the text that is displayed on my button toggles between “Click” and “Click Again”.

When I look at the XAML now, I can see that the Click attribute was added:

Now I want to add a simple animation that squeezes the Ellipse and then expands it back out.

Now this is just a very simple example of an animation. If you want to know more about animations you can check out this Animation Overview.

To create an animation I need to do three things:

1. Create a StoryBoard (more info here)

2. Create the animation

3. Add code to start the animation.

A StoryBoard in a Silverlight application is a resource that contains a collection of animations, each of which targets a specific property of a control.

What I have to do now is replacing the existing StackPanel in XAML view with the following XAML:

This XAML creates a StackPanel.Resource that contains a StoryBoard Element. It is named FirstStoryBoard so that I can access it in code. Basically the animation changes the Width property of the Ellipse. The Storyboard.TargetName specifies the FirstEllipse object. The Storyboard.TargetProperty specifies the Width property on the Ellipse. The To property is set to 1, that means the Width will shrink from its current value of 200 down to 1. Setting the AutoReverse property to “True” will let the animation go back to the beginning and it can start again when the button is clicked again. The Duration is set to one second.

To start my animation I need to call the Begin method on the StoryBoard. I do that by adding this line of code inside my click event handler:

When I run the application now, I have a nice little animation.

Relatively easy, even for a beginner like me.


To be continued…


%d bloggers like this: