Yea, wonderful!, that's it, thanks! So placing them in a parent sprite, outside the image was the clue :-)
But there is one more little thing: When setting the image_to_map property 'maintainAspectRatio' on true, the sprites moves/scales incorrectly. I think it is because the image itself is scaled with the aspect ratio, but the image control isn't. Is there a way to get the exact image dimensions? Using image_to_map.content.width, you get the original file width of the image, not the current width Using image_to_map.width, you get the current width of the image control, not the image itself. right? --- In [email protected], "Sakri Rosenstrom" <[EMAIL PROTECTED]> wrote: > > 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 > > > > > > >
