Re: [flexcoders] scaling images flex3 vs flex4 problem - help?

2012-03-28 Thread grimmwerks
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):
> 
> 
>   
>height="100%"  scaleContent="true" horizontalAlign="center" />
>   
>   
>   
>   
> 
> 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:
> 
> 
>   left="0" top="0" right="0" bottom="0"  
> resizeMode="scale"  >
>scaleMode="letterbox"
>smoothingQuality="high"
>horizontalCenter="0" verticalCenter="0"
>verticalAlign="middle"
>top="0" left="0" right="0" bottom="0" />
>   
>   
> 
> 
> 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/
> 
> 
> 
> 
> 
> 
> 
> 

Garry Schafer
grimmwerks
[email protected]
portfolio: www.grimmwerks.com/







[flexcoders] scaling images flex3 vs flex4 problem - help?

2012-03-28 Thread grimmwerks
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):









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:








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/