Share via

Try it: Create overlapping animations

  • Article

This page applies to WPF projects only

The timeline structure in Microsoft 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.

Note

The following procedure uses triggers in a Windows Presentation Foundation (WPF) project to control the storyboards. Alternatively, you can use the ControlStoryboardAction behavior to control the storyboards, in either WPF or Microsoft Silverlight. For information about using a behavior, see Add a behavior to an object.

To create animations that overlap

  1. In Microsoft Expression Blend, open or create a new WPF project. For more information, see Create a new project.

  2. Switch to the Animation workspace. (F6 will switch between the available workspaces. In the Animation workspace, the Objects and Timeline panel is underneath the artboard.)

  3. If a storyboard is open, click Close Storyboard Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(en-us,Expression.30).png in the Objects and Timeline panel.

    Note

    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 EllipseCc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(en-us,Expression.30).png from the Tools panel. 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 SelectionCc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png from the Tools panel and move the circles close together, as in the following image:

    Two circles drawn on the artboard
    Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(en-us,Expression.30).png

  6. To work with both circles at the same time, select one circle in the Objects and Timeline panel, 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 layout panel appears in the Objects and Timeline panel that contains the two circles.

  7. Rename the Grid object by right-clicking it 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 in the Objects and Timeline panel, 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 object 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 Play Cc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.30).png 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. In the Objects and Timeline panel, 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 Set to foreverCc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(en-us,Expression.30).png, and then click OK.

    When this animation runs, it will now loop repeatedly.

  14. In the Objects and Timeline panel, click New Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,Expression.30).png.

    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 playhead Cc294767.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.30).png 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 object and click Record Keyframe Cc294767.e8ec61d4-c8e8-465a-85a7-70bf787a67de(en-us,Expression.30).png.

    A keyframe Cc294767.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,Expression.30).png appears on the timeline in the row that corresponds to the Butterfly Grid object.

  17. Drag the playhead to the 1 second mark, and then record another keyframe.

    The starting and ending positions of your animation are now set.

  18. Drag the playhead to the 0.5 second mark, between the previous two keyframes.

  19. Choose the Selection tool from the Tools panel, hold the ALT key, and then on the artboard, stretch the height and compress the width of the Butterfly Grid object so that it looks like the following image.

    Because Expression Blend is in the recording mode for the Flap animation timeline, the action of modifying the Butterfly Grid object sets new keyframes at the 0.5 second mark for the ScaleX and ScaleY properties of the Grid object.

    Stretching the Grid object on the artboard
    Cc294767.a6857649-160b-446f-b998-a135389a19be(en-us,Expression.30).png

  20. In the Objects and Timeline panel, expand the nodes for the Butterfly Grid object 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.

    Note

    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 in the Triggers panel 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. In the Triggers panel, 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.

    Note

    You might have to adjust the size of the Triggers panel to see the Properties when active section. To adjust the size, click and drag the borders of the panel and the border within the panel.

    Removing the Flap animation from the Window.Loaded trigger
    Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(en-us,Expression.30).png

  24. To add the trigger for the Flap animation, click Add event triggerCc294767.671c69bb-32e9-4ef9-9837-29403524abd0(en-us,Expression.30).png in the Triggers panel.

    A new Window.Loaded trigger is created.

  25. Select the Butterfly Grid object element in the Objects and Timeline panel, and then in the Triggers panel, use the drop-down boxes to change the new trigger from When Window.Loaded is raised to When Butterfly.MouseEnter is raised.

  26. Click Add new actionCc294767.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.30).png 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 pointer over the butterfly, the Flap animation timeline will begin.

    Creating a new trigger for the MouseEnter event for the Grid object
    Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(en-us,Expression.30).png

  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.

    Note

    If the circular animation is running too fast, you can adjust the running time of the timeline. In the Objects and Timeline panel, select the motion path timeline from the drop-down box, expand the nodes underneath the Grid object 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.)