Creating Animations
In Blend, the panel you use most often is the Objects and Timeline
panel. It might not be obvious yet why it has this long name. The
“Timeline” part of the name indicates that it is also where you can
build your animations as part of your overall design. Timelines are the
basic building blocks of animations.
To begin, take a look at Figure 15. At the top of the Objects and Timeline panel is a bar that controls the creation of storyboard objects. A storyboard
is a container that can hold animations of objects in your design. The +
button in the bar enables you to create a new storyboard to contain
animations.
Figure 15. Storyboard basics
When you click the + button to start a storyboard, you’re asked to
name your new storyboard. This name will be used later to execute the
storyboard (that is, cause the animations to run), as shown in Figure 16.
Figure 16. Creating a storyboard
After you’ve created a storyboard, the Objects and Timeline panel shows a timeline next to each element in the object tree. Figure 17 shows the metamorphosis to this new look.
Figure 17. Objects and Timeline panel with animation
You can see and change which storyboard is the current one, using the panel below “Objects and Timeline” in Figure 17.
The animation pane to the right shows the new storyboard of animations.
The VCR-like controls at the upper-left corner of this pane allow you
to play, pause, or move the current marker (the line currently
positioned at 0) in the animation. You can also move the current marker
by simply clicking at the top of the numbered timeline (these are in
seconds).
To create your first animation, you can simply click the timeline to
change the current time in the animation to one second. Also select the
ellipse object in your object tree. After you do that, you can change
the properties of your ellipse and those changes will be reflected in
the form of an animation. You can see how this looks in the Objects and
Timeline panel, as shown in Figure 18.
Figure 18. Picking the animation point
At this point, you will notice that there is a red rectangle around
the entire artboard to indicate that you are in animation mode and
recording an animation (instead of just modifying objects normally). You
can see this in Figure 19.
Figure 19. Animation mode on the artboard
When you are in animation mode and you modify objects (through either
the artboard or the Properties panel), your changes will be reflected
in the storyboard. For this example, change the opacity of the ellipse
to zero. This will cause the animation to move for one second (where our
marker currently is set) and become transparent. You can see the state
of the ellipse over the time of the animation (at zero, one-half, and
one second) in Figure 20.
Figure 20. The ellipse animated
Back in the Objects and Timeline panel you can see that the ellipse
now has a little red circle on it (to indicate it’s part of this
animation). It also shows an indicator at the one-second mark to show
that the ellipse has a value at that part of the animation. If you open
the arrow next to the ellipse, you will see that there is now a
sub-object that represents the property that was animated (for example,
opacity). If more than one property was affected, there would be a line
for each of them. This is shown in Figure 21.
Figure 21. Animation values in the Objects and Timeline panel
Instead of changing a property, you might decide to change the
location or size of an object on the artboard. When you do this, Blend
attempts to do what you want. To make it easy to animate, Blend usually
incorporates render transforms so that moving or sizing an element is
based on the transform (instead of moving the margin and/or size of an
element). If you move and resize your ellipse, you will see that Blend
creates a RenderTransform and then creates values for the RenderTransform’s properties, as shown in Figure 22.
Figure 22. RenderTransform in an animation
By adding these together, you can create complex animations and then
use the VCR-like controls to test them. When you get the style you want,
you can save and close the animation by clicking the X button, as shown
in Figure 23.
Figure 23. Closing a storyboard
Although you can create individual animations this way, you will find
that using the visual state manager (often called the VSM) to create
the state of a control or object is much more common. See the Blend
documentation about the States panel for more information on the VSM.
