Yeah the other reply makes sense and what you want to do is avoid
scaling the image and setting scaleContent. Instead, think of the map
as having a constant size and doing all of your layout in a single
fixed size canvas.
So it'll be something like this:
Application
ViewStack
Canvas resize=setScale() width=100% height=100%
id=sizeDeterminer
!-- treat the two canvases below as one component... in fact, roll
them into a separate mxml file --
Canvas
id=scalableCanvas
scaleX={myMeasuredScaleX}
scaleY={myMeasuredScaleY}
Canvas
id=mapCanvas
width=400
height=300
Map/
Lines/
Button/
/Canvas
/Canvas
!-- end the map component --
/Canvas
then
mx:Script
[Bindable]
public var myMeasuredScaleX:Number;
[Bindable]
public var myMeasuredScaleY:Number;
private function setScale():void
{
//figure out how big the area you have to work in is, then make
//a scale factor out of it by comparing it to the natural size
//of your map component (400x300 in this case) - this is all
//hardcoded and nasty but it should get you started. Don't rely on
//asking mapCanvas for its width and height, because it will give
//you the value post-scale. you want a constant value so you can
//build the scale factor yourself.
var factor:Number = sizeDeterminer.width/400;
myMeasuredScaleX = myMeasuredScaleY = factor;
}
/mx:Script
Now I haven't run this and there are likely typos - but it shows how
you can do this. Again, the idea is that your map part and all its sub
parts are laid out absolutely in a fixed size canvas. Then there's a
canvas above that which we scale. Then above that is the canvas that
is the actual child of the ViewStack. If anyone sees errors (and I'm
sure they are there) please point them out.
Cheers,
-b
--- In flexcoders@yahoogroups.com, stldvd [EMAIL PROTECTED] wrote:
Hi Ben --
Here's what I have:
Application
BaseContainer, which extends VBox and contains a viewstack
(each of the maps is a canvas in the viewstack)
So then for each map itself I've got this:
mx:Canvas xmlns:mx=http://www.adobe.com/2006/mxml;
mx:Image
width=100%
height=100%
source=com/alandalus/assets/images/wideMap.jpg
scaleContent=true
maintainAspectRatio=true/
mx:Image
id=line
source=com/alandalus/assets/images/5line100percent.png
alpha=.5/
mx:Button icon=@Embed
(source='com/alandalus/assets/images/history.jpg')
x=255
y=373
width=42
useHandCursor=true
buttonMode=true
mouseOver=line.alpha=1
mouseOut=line.alpha=.5
click=playMP3() toolTip=Click to Play Audio/
/mx:Canvas
Thanks,
David
--- In flexcoders@yahoogroups.com, Ben Throop ben@ wrote:
Hey David...
How are things currently laid out and in what container? If I knew
that I could make a more accurate suggestion... but what I will say
is
that if you treat the entire map as a single component, then having
the entire thing scale may be more effective than what appears to be
there, which is the map image, and then the icons on top of it, all
in
a container at the same level. So if you have something like this
Application
|
Canvas
||
| Map Image
Map Icons
What you'd rather have is
Application
|
Canvas
|
Map Component (this is what you'd scale)
||
|Map Image
Map Icons
So how is it set up now?
-b
--- In flexcoders@yahoogroups.com, stldvd stldvd@ wrote:
I forgot to say that I've tried scaleContent=true for the child
images. That doesn't seem to work either.
Anyone?
--- In flexcoders@yahoogroups.com, stldvd stldvd@ wrote:
Hi All,
I'm working on some interactive maps (just one so far) at
http://www.brighttext.com/afropop/alandalus.html
I need to be able to position precisely some icons and arrows,
so
I've
got the parent container as a canvas -- I can use absolute
layout
and
position the child images using x and y properties.
The problem is that the child images won't scale with the
parent.
If
you resize the browser you'll see what I mean.
How does one precisely position images in such a way that they
will
scale with their parent container?
Thanks,
David
