Building an Interactive Public Transport Map Application in PowerPoint

Here's a convention-challenging thought. PowerPoint isn't here to create presentations! At least not exclusively anyway. I read a lot of articles talking about the best way to create presentations yet PowerPoint can be used to do so many things, even create applications.

To improve your skills and knowledge of PowerPoint, it's often a great idea to give yourself a seemingly impossible task. In this project, I decided to recreate the London Underground (tube/metro) system map entirely in PowerPoint, make it interactive and then link it to an Internet real-time update service.

The Basics
Tube Lines
Station Names
Station Markers
River
Zone Shading
Icons
Interactivity
So What's Next?
Screen Resolution
Licensing

The Basics

This PowerPoint project consists of many vector based shapes (to keep the file size minimal) on many layers to achieve the complex network of interconnected stations. This is a summary of the elements used:

• Tube Lines: Freeform shapes with open ends
• Station Names: Text box shapes
• Station Markers: A mix of short line shapes, circle shapes and combined shapes
• River: Closed freeform shape with grey overlays at either end
• Zone Shading: Combined freeform shapes
• Icons: Combined freeform shapes
• Interactivity: Standard PowerPoint trigger based animation plus "Popups", one feature of ActivePrez

The first thing to do was to take a PDF copy of the map which is available here. A simple screen shot of this PDF, pasted in the slide provided the backdrop for the “tracing” conversion. In parallel, the screen shot was analysed in an image processing application (such as Photoshop or PaintShop Pro) to extract the brand colors used in the map as RGB values. These colors were transferred to the slide as the “key” items (on the right hand side of the slide) for the tube lines and not recreated in the PowerPoint theme since the color design in PowerPoint 2007/2010 does not support enough colors in the palette.

Tube Lines

Now we have the backdrop and colors, let's start with those free form shapes for the tube lines.

1. I select the Freeform tool from the PowerPoint Ribbon (Insert tab | Shapes | Lines | 2nd icon from right). In PowerPoint 2003, this is available from AutoShapes | Lines | Freeform function from the Drawing toolbar.
2. Starting at one end of one of the lines I click along the length of the line. Importantly, when reaching a corner or curve of the line, I click once before the turn and once after the turn, each point being just where the straight section starts to change direction. This doesn't make a curve yet but a straight line and is adjusted when the full line has been drawn. At the end of the line, a double click completes the freeform shape as an open ended shape and then it’s time to tune those curves. I make sure the freeform shape I’ve just drawn is selected before using the PowerPoint 2007/2010 Edit Points tool from the Format ribbon found in the Insert Shapes group under Edit Shape / Edit Points or Draw / Edit Points in PowerPoint 2003.
3. This changes the shape to edit mode and each point is seen as a small black dot. Clicking on one of these dots reveals the two control points of a Bezier curve represented by white dots. I drag these two control points until the curve shape matches the PDF backdrop.
4. 

Station Names

There’s nothing complex about station names as they are just simple text boxes with an Arial Narrow font except that for multi-lined names, there are multiple text boxes since it’s yet not possible in PowerPoint to have the font leading control (vertical line spacing) required using a single text box.

Station Markers

The small colored markers are simple line shapes although I had to zoom in to 400% to be able to select/copy/paste them, rotate them 45 degrees and recolor them.

The circular markers are made from a simple oval shape (with 1:1 aspect ratio of course), filled with white and outlined with a black ¾ point outline. For the stations that have multiple circles, my favourite new tool from PowerPoint 2010 was used. The Combine tool allows multiple shapes to be, well, combined! There are 4 modes (Union, Combine, Intersect, Subtract) and I used the Union mode to create the “dog bone” effect from two circles and a rectangle. Note that this tool has to be added to your Ribbon and you can find more information on adding/using it here.

River

The blue river is created in a similar way to the tube lines. The only difference is that the shape is closed i.e. I start and finish drawing at the same point on the canvas. The shape is the filled in light blue and outlined in a slightly darker blue. This yields an undesired effect that the left and right ends of the river appear closed, like a lake. So a simple addition of a grey rectangle over each end before grouping the 3 shapes is all that was required to trick the eye.

Zone Shading

The grey areas for zones 2 and 4 in the background of the map could have been added as multiple simple freeform shapes but just to show the power of the new Combine tool, I created them as combined shapes, using the combine mode. Each of these shapes is in fact the combination of the outer shape plus the inner shape. Doing it this way means I end up with a transparent center instead of an opaque white filled center.

Icons

To keep the file size to a minimum, all icons have been recreated from the raster screen shot as vector shapes. To do this, I went back to the original PDF and zoomed in to 1600% to get a screen capture of the icon in full screen. I then went back to PowerPoint and traced around each element of the icon using the freeform tool as shown earlier in this article and finally used the Combine tool in various modes to create the final vector based graphic which can then be reduced/enlarged without loss of resolution while maintaining much less disk space than a raster based bitmap image in once of the popular formats such as PNG, JPG, GIF etc.

Interactivity

Finally, the interactivity was added in two parts:

1. The tube lines and their corresponding keys on the right of the slide have had a trigger action blink animation added to each other. They exist as pairs of animation and the tube line is the trigger for the key and vice-versa so that the user can click on a tube line to see the name in the key or click on the key to see where the tube line is. Similar pairs of animations were added to other icons.
2. The second part on the interactivity comes from a feature called “Popups” which is part of the ActivePresentation™ Designer suite of tools. This is a PowerPoint add-in called ActivePrez that has a Popups feature which allows you to associate two shapes with each other, one being the trigger and the other being the popup. This provides a non-sequential hide/show capability for any object on a slide and unlike animation effects, you can show/hide all Popups in the edit mode, have them hidden automatically when the slide show starts and associated mouseover and mouseclick sounds. In this free sample, pictures of stations for Paddington and Edgware Road have been used but in the full version, all stations have popups showing additional information for the station. The station finder is built in the same way with a single grouped object of all station names and their grid positions being linked as a popup to the trigger shape, in this case the raster based binoculars icon.
3. 

So What's Next?

As the company behind many PowerPoint design services including templates, slides, software, GMARK is working on providing this “application” with additional capability to interrogate the live tube line update service via the Internet. This is the final stage in the project and will be built using the VBA capability within Microsoft Office applications.

As seen in this article, PowerPoint is not “just” for creating presentations. It’s become quite a formidable application for the creation of interactive applications as well as amazing looking presentations.

Screen Resolution

In designing this application, I used a monitor at 1920x1200 pixels and the result is quite usable. For monitors with lower resolution, the content will not be as clear so I use the OfficeOne ProTools Zoom product to actively zoom in and out of the slide during the slide show.

Licensing

This free download is provided under our GPL terms & conditions. Here's a simple summary of what you may/may not do:

You May:

1. Use it for personal use
2. Edit the file as long as you credit GMARK and the ActivePresentation(TM) name
3. Freely distribute the file

You May Not:

1. Use it for commercial use. Please contact by email if you require a commercial license
2. Resell it
3. Remove the publisher details
4. Remove the publisher digital certificate
5. Pass the work off as your own or any other entity
6. Convert the file to any non-PowerPoint format such as PDF, JPG, MOV, SWF etc.