Animated Lines in Visio

For a visio diagram I was working on I wanted to add animated connectors, as part of an overall animation goal. I.e. there would be a button (or slider) that would allow the person looking at the diagram to see an animation of the process - from the first step to the end. Initially I started by simply changing the line thickness to highlight the processes and lines for the animation, but I go to wondering how to make it a little more dramtic.


Not finding any easy way of doing this, I played around, and came up with the following. Using a series of custom line patterns, and a little bit of VBA animation, the following animation for a standard connector between two shapes was created.

Create Custom Line Patterns

The first step is to create the custom line patterns. Choose View->Drawing Explorer Window

The drawing explorer here shows 10 new line patterns created for this purpose. To create a new line pattern right click the 'Line Patterns' folder and select 'New Pattern'.

Enter a name for the new pattern, and select the relevant behaviour. The one we want in this case is the third button, which stretched the pattern over the length of the line. Alternatively select the first button, which will create a repeated pattern, which will show movement too. Try experimenting with different options.

Then click ok, and then from the drawing window, right click the new pattern and select 'Edit Pattern Shape'. The page that is shown represents a segment of the line that will be drawn. There are many ways to achieve the movement, the cleanest in the end was to draw a large rectange over the whole page (you need to having the drawing toolbar for this) for the background, and then a narrower (but still full height) rectangle for the moving part. In each subsequent pattern the narrow reactangle will be moved to the right. The image below shows the different patterns...

Add a slider

Then create the diagram (start simple) and add a connector. The easiest way to play with the animation is to add a slider. Select 'Insert' then 'Control' then select 'Microsoft Slider Control' (either version if more than one is displayed).

Add code for the slider