Create overlapping animations
The timeline structure in Expression Blend allows you to have more than one animation timeline running at the same time in your application. The following procedure shows you how to create an animation of a butterfly that perpetually moves in a circle, but flaps its wings when the user's mouse moves over the butterfly.
- In Microsoft® Expression Blend, open or create a new project. For more information, see Create a new document or project.
- Press F7 to switch to the Animation Workspace.
- Select the Default timeline from the drop-down box under Objects and Timeline.
Whenever a timeline other than the Default timeline is selected, any property change that you make will automatically record a keyframe on the timeline.
- Select the Ellipse tool from the Toolbox. Draw two small circles on the right side of the artboard. You can make the values of the Height and Width properties the same under the Layout category of the Properties panel to make the ellipses perfect circles. If you see clipping behavior, then adjust the Margin properties.
- Choose the Selection
tool from the Toolbox and move the circles close together, as in the image
Two circles drawn on the artboard
- To work with both circles at the same time, select one circle under
Objects and Timeline, hold the CTRL key so that you can also select the
other circle, right-click the selected circles, select Group Into,
and then click Grid.
A new grid panel appears under Objects and Timeline that contains the two circles.
- Rename the grid by right-clicking the grid and then choosing Rename. Change the name to Butterfly.
- To create the circular animation, you can use the Convert to Motion Path tool that generates an animation timeline from a path. Draw a third ellipse in the center of the artboard, about half as wide as the artboard surface.
- With the new ellipse selected under Objects and Timeline,
select Path on the Object menu, and then
click Convert to Motion Path.
The Choose Target for Motion Path dialog appears.
- Select the Butterfly grid from the list of objects that
are on the artboard, and then click OK.
A new timeline is created. Expression Blend enters into the recording mode of the new timeline so that you can click the Play button to view the animation on the artboard. The target (Butterfly) moves along the motion path that was generated from the ellipse. Note that if the Fill property of the ellipse is set to a brush, it will cover part of the Butterfly object.
- You do not need the third ellipse anymore, so delete it.
- Under Objects and Timeline, expand the nodes for the
Butterfly, RenderTransform, and Translation
elements so that you can view the Motion Path time span.
Right-click the Motion Path element or the grey bar that represents the time span, and then click
Edit Repeat Count.
The Edit Repeat dialog appears.
- To make the timeline repeat forever, click the Set to forever
button, and then click OK.
When this animation runs, it will now loop repeatedly.
- Under Objects and Timeline, click the Create
new timeline button
The Create Storyboard Resource dialog appears.
- In the Resource name (Key) field, enter the name
Flap, and then click OK.
Expression Blend enters the timeline recording mode for the new timeline with the play head at the 0 second mark. While in recording mode, any property that you set will automatically record a keyframe on the timeline.
- To set a keyframe at the 0 second position, select the Butterfly grid and click the
A keyframe appears on the timeline in the row that corresponds to the Butterfly grid.
- Drag the play head to
the 1 second mark, and then record another keyframe.
The starting and ending positions of your animation are now set.
- Drag the play head to the 0.5 second mark, between the previous two keyframes.
- Choose the Selection tool
from the Toolbox, hold the ALT key, and then on the artboard, stretch the
height and compress the width of the Butterfly
grid so that it looks like the image below.
Because Expression Blend is in the recording mode for the Flap animation timeline, the action of modifying the grid sets new keyframes at the 0.5 second mark for the ScaleX and ScaleY properties of the grid.
Stretching the grid of circles on the artboard
- Under Objects and Timeline, expand the nodes for the
Butterfly grid until you see the ScaleX
and ScaleY nodes. One after the other, select the nodes,
right-click them, select Edit Repeat Count, and then in the
Edit Repeat dialog, enter 2 in order to make the timeline
run twice, and click
- Click the Play button to test your animation on the artboard.
Note that the repeat value will not be a part of the playback on the
artboard. If you want
to adjust the timing of your animation, you can move the keyframes on the
grey time span bar.
If there is not enough room to view the entire timeline, you can use the Timeline zoom text box to zoom out the timeline. You can also change the width of the panels to view more of the Objects and Timeline panel.
- You can now set up triggers for your animations. Any new timeline created in the root of your document will cause a default event trigger to be added under Triggers for the Window.Loaded event that occurs when your application starts. You can keep that trigger for the circular timeline, and add a new one for the Flap timeline.
- Under Triggers, select the Window.Loaded trigger.
The actions for the trigger are displayed under When
Window.Loaded is raised. Click the minus sign next to Flap.Begin to delete that action.
Now, the circular animation will still begin when the application starts, but the Flap animation will not.
You might have to adjust the size of the Triggers pane to see the Properties when active section. To adjust the size, click and drag the borders of the pane and the border within the pane.
Removing the Flap animation from the Window.Loaded trigger
- To add the trigger for the Flap animation, click the Add event
button under Triggers.
A new Window.Loaded trigger is created.
- Select the Butterfly grid element under Objects and Timeline, and then under Triggers, use the drop-down boxes to change the new trigger from When Window.Loaded is raised to When Butterfly.MouseEnter is raised.
- Click the Add new action
button next to When Butterfly.MouseEnter is raised, and then use
the drop-down boxes to change the new action to Flap.Begin.
Now, when the user moves the mouse cursor over the butterfly, the Flap animation timeline will begin.
Creating a new trigger for the MouseEnter event for the grid
- To see the behavior of your animation timelines and the event trigger that you just created, test your scene by clicking
Test Project on the Project
If the circular animation is running too fast, you can adjust the running time of the timeline. Under Objects and Timeline, select the motion path timeline from the drop-down box, expand the nodes under the grid until you see the Motion Path node, grab the right end of the grey time span bar, and drag it to the right to extend its end time.
Alternatively, you can delete the circular timeline, create a new timeline, and then start at step 8 (draw an ellipse) to create the motion path. (If you do not create a new timeline before starting at step 8, then the circular animation will be added to the Flap animation timeline.)