Here’s an interactive map of lumber vendors and rail routes. I can’t share the file for business reasons, Certain elements of the UI are not all that great, but I was given specific instructions.
– The button panel is floating and fixed, as is the zoom slider. The map can be dragged and repositioned.
– Each vendor is represented by a group of objects - text, text ghost, location, railway transfer location, and highway route to the railway pickup point. The route scales along with the map and the location points also adjust positions according to scale.
– The railway routes are PNGs. After being laid out in Photoshop, the routes were duplicated, with one layer set to darken and the other being solid but manually erased where it overlapped a name on the map. The two were combined with the background and isolated - knocking out everything but the shape of the route. Each was output as a PNG that aligns precisely with the map in the background — one PNG for each railroad.
– The routes are controlled by keyframes on a dedicated timeline. This was set up with the visibility for various routes being laid out at one second intervals. For example, if you want to see the Burlington route, apply a mouse action to the Burlington button that sends the railway timeline to the one second position. There is also a position on the timeline where all are visible and another where none are visible. The vendors have their own timeline, which works the same way.
– In addition to the map content, the navigation panel also has items that are controlled by timeline. When you click on a button for a certain vendor, info for that supplier is displayed at the bottom of the navigation panel. This is handled by the same timeline that handles the map content for all the vendors.
I have used this same approach for a rather extensive FAQ system that works at multiple levels: topic, subtopic, question and answer. At that level, editing becomes painful as you have to line up the time cursor for each active timeline to display what you want, then turn off any overlapping content to be able to edit the text.
Check out the “tour” animation on the home page at http://mobile.lightbenders.com. This involves multiple scenes where elements are turned on and off either by selecting something from a list or by triggering a timeline. Depending on the scene and content, there are up to six timelines being used to control the action. Adding to the fun, the the layouts are relative and responsive.