Interactive Bus Route Map

Also see this in the website template

Flash Animation Deliverable

  1. Can you look at a map, put it away, and remember, with surity, how to get there? Or are you better with a verbal explanation where someone points out landmarks along the way? How would you like the best of both? Flash is perfect for an interactive map of this type.
  2. I wanted users to have a psuedo-authentic experience. They can not only imagine a path as with a static map, but they can see the path that the bus takes and some of the key sights along the route.
  3. I began by developing some base images in FireWorks to use throughout the movie: the map image, the bus, location pictures, and buttons.
  4. I then started a new movie project in Flash.
  5. I imported all of the images that I created in FireWorks to the Library in Flash.
  6. I dragged the map image into its layer and the bus image into its layer (I created a layer for each object used in the project).
  7. I placed the bus in front of the Memorial Hall position on the map.
  8. I then selected the bus layer and inserted a keyframe at about 3 seconds (36 frames).
  9. I selected the keyframe and moved the image of the bus to the next position that I wanted it to take.
  10. I then selected one of the frames inbetween and inserted a tween.
  11. I repeated this procedure to move the bus through its route on the map.
  12. When the map itself needed to shift, I did the same process with the map layer (of course I only have to do this once).
  13. I then added pause and play buttons.
  14. I did this by dragging the up button to its layer, right clicking, converting to symbol, double clicking on the image (to get to the symbol editing area), adding a key frame under the down button frame, inserting the down button image, opening the action window, and double clicking on the stop/start option. I did this for all the buttons used in this movie.
  15. Througout the movie I then added scenes: introduction, location indicators, and conclusion.
  16. These scenes were cued by actions in the map scene. I would select the frame that I wanted to open a new scene, then set it as a keyframe, then set the action to goto (scene, frame number). I then used the same process to return from the new scene to the map scene (only I had to make sure that I set the goto frame to the next frame after the one that cues a new scene).
  17. To make these scenes used the insert new scene option.
  18. I then inserted the background images or colors.
  19. On top of these I used tweens to animate the text in the same way that did the bus above. I tried to give users plenty of time to read the text (about 3 seconds per line of text).
  20. The last option that I used was the use of text links that open separate windows for both the Bloomington Transit and the Kroger homepages.
  21. I did this by selecting the text object and setting the options in the property menu. First I changed the type to dynamic, then set the link to the webpage that I wanted to go to, then I set the target to _blank to open the web page in a new browser window.
  22. Finally, I selected publish.