In all my Vista Presentations I have been doing some sort of animation with the Expression Interactive Designer and thought I would jot down the steps how to do this with a button.

1.       Create or open a project

2.       Open a preexisting XAML page or add a new one (called a scene) in Expression Interactive Designer

3.        In the library Pane (View > Library) add two buttons

4.       Open the timeline pane (View > TimeLine)

5.       Create a new Timeline(this is the control in the timeline pane that looks like a clock)

6.       Select one of the buttons

7.       Record a frame of the button in this position

8.       Move the keyframe indicator forward in time like to the “1”

9.       Move, resize, spin etc the button –this will automatically record the new properties – the same can be accomplished with the “record keyframe” button –it is the one with the “star” on it.

10.   Move the keyframe indicator forward again

11.   Move, resize etc the button again

12.   Repeat steps 11 & 12 until the animation you desire is complete (you can hit the “play” button in the timeline to view)

To activate the animation:

1.       Select the button you didn’t animate above

2.       Open the timeline properties (View > Timeline Properties)

3.       Click the “Add” button.  This will launch the animation on this event

4.       Change the button event from mousedown to the click event

5.       Verify this scene is the startup:  In the project pane right click on the scene and choose “Startup Scene”

6.       Pressing F5 will launch the scene; pressing the button should fire off the scene.

 

To loop the animation:

1.       Click the arrow to the left of the button you have animated above in the timeline window .

2.       Click the arrow to the left of “RenderTransform” exposed by the step above

3.       Click the arrow to the left of “Translation” exposed by the step above

4.       Right Click the “X” property and choose “Edit Repeat Count” choose “Forever”

5.       Right Click the “Y” property and choose “Edit Repeat Count” choose “Forever”

6.       Pressing F5 will launch the scene; pressing the button should fire off the scene.