FYI - here's the blog post about the ImageMap component:
http://dougmccune.com/blog/2007/03/13/imagemap-component-added-to-flexlib/
Doug
On 3/13/07, Doug McCune <[EMAIL PROTECTED]> wrote:
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
> > > >
> > > >
> > > >
> > >
> >
> >
>
>
