Hey all - I have an old player that sort of does the Photoshop navigator /
current doc thing -- a smaller example of an image is shown with a larger
image, and when the larger image scales UP there's a box that scales down on
the navigator image that shows you what part of the zoom you're in.
I had this working in F3 with mx components and basically having a slider scale
a matrix.transform, the navigator getting the inverse of the transform; it was
working great. I've since dropped the mx:Canvas scale I was doing for a spark
Group (thinking it's going to migrate to an iPad app in the future) -- and now
images aren't scaling correctly. Originally if an image was loaded in that
wasn't the exact height/width, the image would be letterboxed with the largest
direction being pinned to the sides. When I letterbox the image and try to
scale the group holding it in the spark version it doesn't work properly. When
the scaling works, the image isn't letterboxed and so the navigator and zoomed
in image don't appear the same.
Here's the Flex 3 version (partial):
<mx:Canvas width="100%" height="100%" id="bigBox">
<mx:Canvas id="big" width="100%" height="100%" >
<mx:Image x="0" y="0" id="bigImage" width="100%"
height="100%" scaleContent="true" horizontalAlign="center" />
</mx:Canvas>
<mx:Button right="10" bottom="19" styleName="creativityLogo"/>
</mx:Canvas>
and the function for it:
public function zoomChange(e:SliderEvent):void{
currentScale =
Number(Number(e.value).toFixed(2));
var scaleBig:Matrix = new Matrix();
scaleBig.scale(e.value, e.value);
var scaleSmall:Matrix = scaleBig.clone();
scaleSmall.invert();
big.transform.matrix = scaleBig;
box.transform.matrix = scaleSmall;
borderBox.transform.matrix=
box.transform.matrix.clone();
if(e.value>1){box.mouseEnabled;
box.buttonMode=true};
}
and for the Flex 4.6 version:
<s:SkinnableContainer width="100%" height="100%">
<s:Group id="imgLargeGroup" width="100%" height="100%"
left="0" top="0" right="0" bottom="0"
resizeMode="scale" >
<s:Image id="imgLarge" width="100%" height="100%"
scaleMode="letterbox"
smoothingQuality="high"
horizontalCenter="0" verticalCenter="0"
verticalAlign="middle"
top="0" left="0" right="0" bottom="0" />
</s:Group>
</s:SkinnableContainer>
and the function for it:
public function reactToZoomSlider$Change(ev:Event):void{
var sliderVal:Number = view.zoomSlider.value;
maskOutline.visible = (sliderVal > 1);
currentScale = Number(Number(sliderVal).toFixed(2));
var scaleBig:Matrix = new Matrix();
scaleBig.scale(sliderVal, sliderVal);
var scaleSmall:Matrix = scaleBig.clone();
scaleSmall.invert();
//large.content.matrix = scaleBig;
//large.transform.matrix = scaleBig;
view.imgLargeGroup.transform.matrix = scaleBig;
trace(view.imgLargeGroup.transform.matrix);
mask.transform.matrix = maskOutline.transform.matrix =
scaleSmall;
//large.scaleX = view.zoomSlider.value; large.scaleY =
view.zoomSlider.value;
}
Garry Schafer
grimmwerks
[email protected]
portfolio: www.grimmwerks.com/
