Animation of Image Using Expression Blend 4

Step 1: Open Expression Blend 4 -> select WPF -> select WPF Application change the Name and Location accordingly -> hit OK, a Blank Window appears on the ArtBoard.

Step 2: Select Ellipse, draw an ellipse, manage the height & width, Color and Stroke as shown below:

1.png

  • Select Window -> select Workspaces -> select Design or Animation as shown below:
2.png
  • When you select animation have a look at the Object and Timeline Window; a new Window appears for animation with Tabs and at the middle of the Workspace a "Storyboard1timeline recording is on" window appears as shown below:
3.png

StoryBoardLine.png
  • In the Animation Window you can manage the frames as shown below:

Go To the First Frame: This tab sends an ellipse to the First Frame.

4a.png

Go To Previous Frame: This tab sends an ellipse to the Previous Frame. 

4b.png

Play Button: This button is used to play an animation. 

4c.png

Pause Button: This button is used to pause an animation.

4d.png

Go To Next Frame: This tab sends an ellipse to the Next Frame.

4e.png

Go To Last Frame: This tab sends an ellipse to the Last Frame.

4f.png

Playhead Position: This tab shows the position of the starting & ending point of the animation. For example, here we start the animations from Zero(0) to five(5). The default value is "Zero" and increase & decrease with animation as shown below:

4h.png

4h1.png

4h2.png

playhead1.png

playhead2.png

Note: A Yellow Line appears below the 0,1,2,3... tabs. By managing the line you can set the starting point and ending point of the animation. It is interrelated with the Playhead Position Tab. When we move the Yellow Line the Playhead Position Value is changed as shown below:

note1a.png

note1b.png

Step 3: When we manage the Start Point of the ellipse, some points appear in front of the ellipse. Drag the points accordingly, set the starting point and play the animation to see the effect as shown below:

5.png

Note: We can move the points in any direction and play the animation in any direction with vaying styles.

Step 4: Set the upper and lower tabs to the value 2, play the animation and see the effect as shown below:

  • This image displays the position of the tabs:

6a.png

  • This image displays the starting position of the ellipse called First Rotation.

6b.png

  • This image displays the second moving position of the ellipse called Second Rotation.

6c.png

  • This image displays the last position of the ellipse in the animation:

6d.png

Summary:

Through this article we can learn so many little things that we generally ignore.

 


Similar Articles