Hmm wondering if I can use a Scale effect instead and set it via the slider...
On Mar 28, 2012, at 1:10 PM, grimmwerks wrote:
>
>
> 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
> gr...@grimmwerks.com
> portfolio: www.grimmwerks.com/
>
>
>
>
>
>
>
>
Garry Schafer
grimmwerks
gr...@grimmwerks.com
portfolio: www.grimmwerks.com/
