Building an Interactive Public Transport Map Application in PowerPoint
Author: Jamie Garroch
Date Created: September 3rd 2010
Last Updated: June 14th 2012
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.
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 ActivePresentation™ Designer
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.
Now we have the backdrop and colors, let's start with those free form shapes for the tube lines.
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.
- 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
from the Format ribbon found in the Insert Shapes group
under Edit Shape
/ Edit Points or Draw
/ Edit Points in PowerPoint 2003.
- 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.
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.
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.
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.
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.
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.
Finally, the interactivity was added in two parts:
- 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.
- 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 (available
here) and the
Popups feature allows you to associated 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.
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.
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.
This free download is provided under our GPL terms & conditions. Here's a simple summary of what you may/may not do:
- Use it for personal use
- Edit the file as long as you credit GMARK and the ActivePresentation(TM) name
- Freely distribute the file
You May Not:
- Use it for commercial use -- if you require a comemrcial license
- Resell it
- Remove the publisher details
- Remove the publisher digital certificate
- Pass the work off as your own or any other entity
- Convert the file to any non-PowerPoint format such as PDF, JPG, MOV, SWF etc.
Microsoft and the Office logo are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries.