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.