Create Hotspots using the Fireworks JavaScript API

If you are a designer who happens to know JavaScript, you may be happy to know that Fireworks has a JavaScript API. This tip came from Justin Lee, from Herxun, who used it to create hotspots on an image of the Taipei Metro map and then used the vectors to embedded clickable regions within a mobile app. The result was impressive. You could touch areas of the map and view contextual info, like estimated wait times, etc.

I was impressed by how Justin approached the problem of data transformation, considering how painful it can be mobilize vectors of dynamic data. He used Adobe Fireworks, a graphics app. Fireworks has a JavaScript API the he used to perform data processing. When you clicked a region on the image map, contextual information could be displayed. It was an elegant approach that saved lots of time.

Here is how he did it (per his email to me):

Because Taipei Flora Expo closed a few days ago, the official taipei metro route map changes a lot. With the fireworks work flow, It only take me less than half hour to fix it.

Obtain the FIreworks Console: http://johndunning.com/fireworks/about/FWConsole

Then draw hotspots on the canvas and select all of them.

After that, open the Fireworks Console, paste below code to in it.


var hotspots = [];
for(var i=0;i {
var hotspot={};
hotspot.id = sel[i].altText;
hotspot.l = sel[i].pixelRect.left;
hotspot.t = sel[i].pixelRect.top;
hotspot.r = sel[i].pixelRect.right;
hotspot.b = sel[i].pixelRect.bottom;
hotspots.push(hotspot);
}

console.log("nhotspots = ");
console.log(hotspots);

Then click ‘Eval’ Button, you will get all coordinates of the hotspots in JSON format.
I hope this may help you sometime.

I haven’t tested this yet, but you I can foresee several use cases.  I may write an app that demonstrates this further.  In the mean time, you can download the map here and try it yourself. Pretty slick.

Advertisements

One Response to “Create Hotspots using the Fireworks JavaScript API”

  1. mickeypatterson123 Says:

    Hi there! Your webpage is loading lagging in my situation, the sitentook sort of a moment to finally load, I personally have no ideanwheth Click http://www.l33turl.com/worker091730

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s


%d bloggers like this: