Teaching Examples

Missed opportunities with online maps
July 2, 2006, 1:08 pm
Filed under: Uncategorized

In the Ottawa Citizen’s online package about the underground railroad, this map (a GIF image) represents a missed opportunity to add some practical interactivity. It’s already large enough, it’s very attractive, and in one sense, it tells the whole story.

To bring this map into Flash, the best practice would be:

  1. Export two separate JPGs from Illustrator: One would include the full background (outlines and all fills), without any makers, place names, route. The other JPG includes all of those.
  2. Import both JPGs into Flash. (Because of the gradients on the water, you want to retain this as a JPG or a PNG-24, and not save it as a GIF.)
  3. Put the background-without-extras on the bottom layer in the Flash movie.
  4. Put the other JPG on layer 2, and use it to re-create the route and all text in Flash — on layer 3. You would do this because the text will look so much sharper this way, and in most cases, the SWF will be a smaller file as a result.
  5. Delete layer 2. (You don’t need it anymore.)
  6. Create one button to match the orange place markers.
  7. Drag an instance of that button to each of the places on the route. I would lock layer 3 and put all of the buttons on layer 4.
  8. Now add the content relevant to the marked places on the map!

If you don’t want to do the extra work on the text labels, or you don’t have the time, then just save the whole thing as PNG-24 or GIF and import that to level 1 in Flash. You can build the buttons on top of that.

Depending on what you wanted to put into the place-linked modules, you might choose to make each one either a movie clip symbol or an external SWF. You could also do it using scenes, but I wouldn’t choose that for this package because there are so many place markers. If the modules include graphics, I would definitely make each one an external SWF. If they contain only text, though, you could dynamically load that into one movie clip each time a different button is clicked.

I hate it when a multimedia package pushes me out of the package and opens an HTML page of content that could have been included in the package. I know a lot of bean-counters force the multimedia producers to build the package this way to inflate the site’s hit count. But for me, as a user, it just makes me feel tired of the package very quickly.

Technorati tags: | | | | | | |


1 Comment so far
Leave a comment

Hi Mindy and readers of this blog!
Thanks for the user feedback, we all need that to keep our sites fresh and user-friendly! (nice tutorial too!)

My name’s Andrea, and I do the flash/multimedia for our online site at the Ottawa Citizen….
I just had to post a reply to your blog as we have updated this map…..you see, we always had a plan for an interactive route map, but, alas, newspaper timelines are tight (and I was very busy working on my interactive journey and other flash elements of our site, Guestbook, etc…) Every week, we are adding interactive elements and people are responding very positively!

Please, take a look at our maproute that tracks Chris as he travels along, complete with rollovers and watch for the up-and-coming ferryboat!)
Click here to see Chris’s Route Map

If you want to experience a wonderful journey to freedom where you choose the way, check this out, click Can You Escape?:
Click here to go to Tracks to Freedom

Be sure to send us an email and flip through our interactive pages of the guestbook! 
Click here to go to The Guestbook
We value hearing from everybody!

Happy flashing everybody! :o)

Comment by Andrea Sirman, The Ottawa Citizen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: