I've created one of these components and added it to FlexLib. I'm going to
be blogging about it today, but if you want to check it out before I do the
post, here are the links.
Source:
http://flexlib.googlecode.com/svn/trunk/src/flexlib/controls/ImageMap.as
Documentation:
http://flexlib.googlecode.com/svn/trunk/docs/flexlib/controls/ImageMap.html
Example:
http://flexlib.googlecode.com/svn/trunk/examples/ImageMap/ImageMap_Sample.swf
Doug
On 13 Mar 2007 08:28:00 -0700, Sakri Rosenstrom <[EMAIL PROTECTED]>
wrote:
hmm... There has to be a better way..
I got it to work like this:
override protected function
updateDisplayList(uw:Number,uh:Number):void{
super.updateDisplayList(uw,uh);
if(map==null)return;
map.width=image_to_map.getExplicitOrMeasuredWidth
()*image_to_map.content.scaleX;
map.height=image_to_map.getExplicitOrMeasuredHeight
()*image_to_map.content.scaleY;
}
but it seems a bit *wonky*....
anybody else? some suggestion or recommendation??? How does the internal
code excecute? why are the properties you would normally use returning wrong
values (as simon pointed out?)
and why does scaleX and Y seem to work?
thanks,
sakri
On 13 Mar 2007 07:44:01 -0700, simonvanherweghe <[EMAIL PROTECTED]>
wrote:
>
> 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] <flexcomponents%40yahoogroups.com>,
> "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 <simon.vanherweghe
> @...>
> > 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
> > >
> > >
> > >
> >
>
>
