Easier Viewing of Large Images and Maps for Your Users

I was off on a tangent and built a Flash component that behaves like the navigator palette in Photoshop... sort of like the inset map in Google Maps. It basically shows a thumbnail of a large image and allows a user to pan a highlighted region of the image. Typically this highlighted area corresponds to the visible portion of the image in some other viewport, as in the example below.

Free Download

I'm giving away this component for free so grab the download below!

Using the Minimap Component

To get the component working for you, follow these steps:

  1. Install the component using the Extension Manager (free download) and restart Flash
  2. Open a new Flash Document
  3. Drag a ScrollPane component onto the stage, name it "scrollPane," and set its size to 400x400
  4. Drag a Minimap component onto the stage and name it "minimap," and leave its size at 100x100
  5. Using the Component Inspector window, set the "contentPath" property for both components to "large_image.jpg". Make sure you have an image named "large_image.jpg" in the same directory as the output SWF.
  6. Publish!

You can also customize the highlight skin by creating a MovieClip with the linkage ID, "MinimapHighlightSkin." Enjoy!!

By the way, the test image above is from Halloween 2005. My parents' dog Katie was so scared of all the noise from the firecrackers that she was shaking wretchedly. So, I built her a bunker out of blankets and hid her deep inside it. The shaking subsided and she stayed protected in her little bomb shelter until the next morning. Poor dogs never enjoy Halloween.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
If you have a Gravatar account, used to display your avatar.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

About

Daniel McLaren

Daniel is a Flash and Flex developer specializing in the art of information visualization.

Latest from SketchyD

Latest Drawing from SketchyD

This is the most recent drawing from my mobile sketch blog, SketchyD.com.

Recent comments