Hi Simon,
I was curious about this, so I went ahead and created a "quasi" component...
I went back to as3 basics, created a "map" Sprite from xml, and then nested
Sprites as "hotspots" according to coordinates. Scaling this "parent"
sprite also scales the children as you specified...
So, I then overrode the updateDisplaylist(), and manually set the width and
height of the "map" Sprite to the width and height of the image...
Here's the code:
Application.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml";
xmlns:my_components="my_components.*"
layout="absolute"
>
<mx:Script>
<![CDATA[
[Embed(source="bin/assets/sausage_monster.jpg")]
[Bindable]
public var SausageMonster:Class;
[Bindable]
public var target_image:Object=new SausageMonster();
public function getHotSpotXML():XML{
var hsx:XML=<hot_spots map_width="100" map_height="100">
<hot_spot>
<x>10</x>
<y>10</y>
<width>10</width>
<height>10</height>
</hot_spot>
<hot_spot>
<x>80</x>
<y>10</y>
<width>10</width>
<height>10</height>
</hot_spot>
<hot_spot>
<x>10</x>
<y>40</y>
<width>70</width>
<height>50</height>
</hot_spot>
</hot_spots>;
return hsx;
}
]]>
</mx:Script>
<my_components:ImageMap id="my_image_map"
hot_spots_xml="{getHotSpotXML()}"
bg_image="{target_image}" width="50%"
height="50%" horizontalCenter="0" verticalCenter="0"/>
</mx:Application>
"ImageMap" mxml component:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.display.Sprite;
[Bindable]
public var bg_image:*;
private var _hot_spots_xml:XML;
[Bindable]
public function set hot_spots_xml(hsx:XML):void{
_hot_spots_xml=hsx;
createImageMap();
}
public function get hot_spots_xml():XML{return _hot_spots_xml;}
private var map:Sprite;
private function createImageMap():void{
if(map!=null){
if(map_holder.contains(map))map_holder.removeChild(map);
}
map=new Sprite();
map.graphics.drawRect
(0,0,[EMAIL PROTECTED],[EMAIL PROTECTED]);
var s:Sprite;
for each(var hot_spot:XML in _hot_spots_xml.hot_spot){
s=new Sprite();
s.x=parseInt(hot_spot.x);
s.y=parseInt(hot_spot.y);
s.graphics.beginFill(Math.round(Math.random
()*0xFFFFFF));
s.graphics.drawRect
(0,0,parseInt(hot_spot.width),parseInt(hot_spot.height));
s.graphics.endFill();
s.addEventListener(MouseEvent.CLICK,handleHotSpotClick);
map.addChild(s);
}
map_holder.addChild(map);
}
public function handleHotSpotClick(e:MouseEvent):void{
mx.controls.Alert.show(e.target.toString());
}
override protected function
updateDisplayList(uw:Number,uh:Number):void{
super.updateDisplayList(uw,uh);
if(map==null)return;
map.width=image_to_map.width;
map.height=image_to_map.height;
}
]]>
</mx:Script>
<mx:Image id="image_to_map" source="{bg_image}" width="100%"
height="100%" maintainAspectRatio="false" />
<mx:UIComponent id="map_holder" alpha=".5" />
</mx:Canvas>
Hope that gets you going :)
cheers,
sakri
On 13 Mar 2007 03:52:54 -0700, simonvanherweghe <[EMAIL PROTECTED]>
wrote:
Hi,
I can't find any working simple solution for this in flex, so I would
like to create it myself.
What I want is to dynamically load an image and (for example) an xml
file with the coördinates of the clickable regions in the image.
It should be resizable: when the image resizes, the clickable regions
must stay on their correct places
For now, I can load an image and add a shape into the image control, it
should be clickable, that works fine. But the resizing doesn't work...
The image control doesn't resize its children automatically (I don't
expect that also...)
Using something like constraints isn't available.
Is there any way to fix this? Without going over all the children
elements on a resize event manually?
I also tried to place the image in a canvas (backgroundImage), so I
could use the constraint options, but the canvas doesn't care about the
aspect ratio. There isn't an 'maintainAspectRatio' like the Image
control.
Any help/advice on this?
Thanks
