Home > Animation and interactivity > Create overlapping animations

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.

1. In Microsoft® Expression Blend™, open or create a new project. For more information, see Create a new document or project.
2. Press F7 to switch to the Animation Workspace.
3. 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.

4. 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.
5. Choose the Selection tool from the Toolbox and move the circles close together, as in the image below:

   

   Two circles drawn on the artboard

6. 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.
7. Rename the grid by right-clicking the grid and then choosing Rename. Change the name to Butterfly.
8. 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.
9. 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.
10. 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.
11. You do not need the third ellipse anymore, so delete it.
12. 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.
13. 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.
14. Under Objects and Timeline, click the Create new timeline button .
    The Create Storyboard Resource dialog appears.
15. 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.
16. To set a keyframe at the 0 second position, select the Butterfly grid and click the Record Keyframe button.
    A keyframe appears on the timeline in the row that corresponds to the Butterfly grid.
17. 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.
18. Drag the play head to the 0.5 second mark, between the previous two keyframes.
19. 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

20. 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 OK.
    
21. 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.

22. 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.
23. 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

24. To add the trigger for the Flap animation, click the Add event trigger button under Triggers.
    A new Window.Loaded trigger is created.
25. 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.
26. 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

27. 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 menu.

    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.)