How to Animate a UML Activity Diagram?

In this tutorial, we will show you how to animate an activity. In the end you will be exporting the animation into an HTML file, which can be helpful when you want to play the animation on another machine.

Playing an Animation in UML Activity Diagram

1. Download Activity-Diagram-Example.vpp. You can also find this file at the bottom of this tutorial, under the Resources section.
2. Open the downloaded project file in Visual Paradigm.
3. Open the UML Activity Diagram Place Order. You should see the Activity Diagram below:
   
4. Before we continue, let's take a quick look at this diagram. The diagram presents two possible paths after receiving an order. One is rejection, and another one is acceptance.
5. Let's animate the paths one by one. On the right hand side of the diagram, click on the tiny button Show Action Bar.
   
6. Click in the bar.
7. The Activity Diagram Animation window appears, with two paths listed on the left hand side. The two paths are found by analyzing the diagram. Let's check what they are about. Click on Path1.
   
8. The shapes involved in Path1 are being highlighted in purple. As you can see this path is about the rejection of order.
   
   In order for us to identify the path easier, we better rename Path1 to reflect the actual flow content. Double click on Path1 and enter Rejection to be the new path name.
   
9. Similarly, select Path2 and take a look.
   
10. Obviously Path2 is about the acceptance of order. Double click on Path2 and rename it to Acceptance.
    
11. So now we have two paths - Rejection and Acceptance. Let's animate the Acceptance path. Select it and click to play.
    
    This starts the animation. A token which looks like a tiny black dot will appear and traverse along the path. When it is arriving a shape, the arriving shape will be highlighted.
    
    The animation will end when it reaches the end of the path. You can travel along the execution by updating the slider position at the bottom of the diagram.

Exporting an Animation

You may want to share the animation with others, or to view it on another machine. To achieve this, you can export the animation as HTML. We will show you how it works in this section.

1. Open the Activity Diagram Animation window again. This time, you can open it by clicking on Show Dialog at the end of the animation slider.
   
2. You have to select the paths to be exported. Let's export both the Rejection and Acceptance paths. Select them both in the window.
   
3. Click Export to Flash....
4. In the Export to Flash window, enter the output path of the HTML file. You can also adjust the dimension of video but for this case, 800 x 600 is large enough so just keep it unchanged.
   
5. Click Export.
6. The exported HTML file will be popped up in your web browser. You can play and control the animation via the slider below the animation.
   
   You can select another paths and animate it by selecting from the drop down menu at the top right corner of the animation.