Post
Ask Question

Animated Text 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 TextBlock Tool, write any text, for example "Sonia"; manage height, width, color & stroke as shown below:

1.png

Step 3

Select Window -> Workspace -> Design or Animation, a Storyboardtimeline Window at Artboard appears and have a look at the Object and Timeline Window as shown below:

2a.png

2b.png

Note: In the Object and Timeline Window we have to activate the Storyboardtimeline for the beginning of the animation as shown below:

  • Click on the the Drop-Down Arrow as shown below:

note1a.png

  • Click on Storyboard1 as shown below:
note1b.png
  • The Storyboard appears as shown below:
note1c.png

Step 4

After Editing-Formatting of text, when we start the animation the Text moves from Top to Bottom as shown below:

3a.png

3b.png

3c.png

3d.png
  • Look at the Tabs Window; the Yellow Line Tab and Grey Line Tab starts from Zero (0) and ends at five (5) as shown below:
3e.png

Step 5

Now, we are going to make changes in the tab's position and see the various effects on text as shown below:

  • If both the Upper and Lower Grey Line Tabs are at the same position then the "Formatted-Text" is animated as shown below:

Tab-Position

4a.png

Initial Stage

4b.png

Middle Stage

4c1.png

4c2.png

Last Stage

4d.png

  • If the Upper Tab is at the same position and the Lower Tab is changed ie; moved backward then the effect will be as shown below:

Tab-Position

5a.png

Initial Stage

5b.png

Middle Stage

5c1.png

5c2.png

Last Stage: Here the text animates up to two.

5d1.png

5d2.png

  • If the Upper Tab is at the same position and the Lower Tab has changed ie; moved forward then the effect will be as shown below:

Tab-Position

6a.png

Initial Stage

6b.png

Middle Stage: Here the Text Formatting occurs from zero to three.

6c1.png

6c2.png

Last Stage

6d1.png

6d2.png

  • If the Upper Tab has changed i.e; moved backward and the Lower Tab is at the same position then there is no effect on the text as shown below:

Tab-Position

7a.png

Initial Stage

7b.png

Middle Stage

7c1.png


7c2.png

Last Stage

7d.png

  • If the Upper Tab is set to "Nil" and the Lower Tab is set to Backward then the text animates with Fast Speed without any change in the text as shown below:

Tab-Position

8a.png

Initial Stage

8b.png

Middle Stage

8c1.png

8c2.png

Last Stage

8d.png

  • If the Lower Tab is set to "Nil" and the Upper Tab is set to Backward then there is only text changing with formatting up to the given Animation Time Period; there is no change in the Text Position i.e: Top to Bottom as shown below:

Tab-Position

9a.png

Initial Stage

9b.png

Middle Stage

9c1.png

9c2.png

Last Stage

9d1.png

9d2.png

Step 6: We can Rotate Text as well as shown below:

  • Set the Yellow Tab to Zero and drag the text with the mouse according to your choice. Notice that while dragging the text some points appear at the Artboard as shown below:
10.png

Note: When you Rotate Text remember that the animation starts from that point; point to where the text is placed ie: Top-Center-Bottom-Left-Right.

  • Now the Play Animation; see the effect as shown below:

Initial Stage

11a.png

Middle Stage

11b1.png

11b2.png

Last Stage

11c.png

Summary:

Through this article we can learn about the Animation of Text.


Similar Articles