Hey Sandy,
Defining rectangular hotspots in Flex is relatively easy. I use
transparant Canvas instances on top of the Image to respond to mouse
clicks. I choose to use an external xml file to hold my hotspot
information. It looks like this;
<?xml version="1.0" encoding="ISO-8859-1"?>
<hotspots>
<spot id="c01" x="229" y="225" w="95" h="90" alpha="0">
You clicked on my purse!
</spot>
<spot id="c02" x="70" y="193" w="76" h="103" alpha="0">
Those are my bags!
</spot>
</hotspots>
So now here is the code I use
<?xml version="1.0" ?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import flash.events.MouseEvent;
import mx.containers.Canvas;
public var myHotSpots:XMLList;
public var myMessage:Object = new Object();
public function init():void {
myHotSpotData.send();
}
private function myHotSpotDataResult(event:ResultEvent):void {
myHotSpots = event.result.spot;
createHotSpots();
}
private function canvasClickHander(event:MouseEvent):void {
var msgID:String = event.currentTarget.id;
myLabel.text = myMessage[msgID];
}
private function createHotSpots():void {
for(var ndx:Number = 0;ndx < myHotSpots.length();ndx++)
{
var myCanvas:Canvas = new Canvas();
myCanvas.id = [EMAIL PROTECTED];
myCanvas.useHandCursor = true;
myCanvas.buttonMode = true;
myCanvas.mouseChildren = false;
myCanvas.setStyle("backgroundColor",
"0xff0000");
myCanvas.alpha = [EMAIL PROTECTED];
myCanvas.width = [EMAIL PROTECTED];
myCanvas.height = [EMAIL PROTECTED];
myCanvas.x = [EMAIL PROTECTED];
myCanvas.y = [EMAIL PROTECTED];
[EMAIL PROTECTED] = myHotSpots[ndx].text();
myCanvas.addEventListener("click",
canvasClickHander);
this.addChild(myCanvas);
}
}
]]>
</mx:Script>
<mx:HTTPService id="myHotSpotData"
url="hotspotdata.xml" result="myHotSpotDataResult(event)"
showBusyCursor="true" resultFormat="e4x"/>
<mx:Image id="myImage" source="200387680-001.jpg" width="337"
height="455" />
<mx:Label id="myLabel" width="337" x="0" y="430" textAlign="center"/>
</mx:Application>
Let's first skip over the Script and look at the interface tags. I
define an Image tag and a Label that rests at the bottom on the Image.
I use an HTTPService to access the external XML file as E4X (I love E4X).
OK, now up to the Script. After importing a few classes I declare an
XMLList variable to hold my XML result. The myMessage Object instance
will hold the text message for each Canvas instance.
The init() function triggers the HTTPService.
The myHotSpotDataResult function stores the result in the XMLList
variable and calls the createHotSpots() function.
The canvasClickHander() function handles the mouse click on each of
the canvases. It access the myMessage Object variable to output the text.
Now for the magic ... The createHotSpots() function creates a Canvas
instance for every line in the XMLList. It sets several properties and
a style. Notice the three properties called useHandCursor, buttonMode,
and mouseChildren. These are needed so the mouse cursor will change to
a hand when you hover over the Canvas hotspot. The Canvas's
transparency is set using the alpha property. I populate the myMessage
object. I create an EventListener to call the canvasClickHander()
function when the Canvas is clicked upon. An finaly we add the Canvas
instance to the display.
As I said, rather simple. I created a small app that allows me to
create the xml file containing the hotspot data. It allows me to place
hotspots on the Image, move them around, resize them, and save it's
properties in an xml file. Let me know if you want to take a look at
it. Later I will add the capability to add non-rectangular hotspots.
Theo
http://therush.wordpress.com
--- In flexcoders@yahoogroups.com, "Sandy Saline" <[EMAIL PROTECTED]> wrote:
>
> I am trying to find information on how to isolate areas of a graphic to
> make hot spots that will trigger different events. I am looking for
> something like the map tag in HTML or a hotspot interaction in
> Authorware.
>
>
>
> Any ideas about what I should search on or examples would be
> appreciated.
>
>
>
> TIA
>
> Sandy
>
