I'm trying to resize images to fit in a canvas. Works great.
Now I also want the user to be able to zoom/resize the images using a
slider, allowing them to resize to (at least) 100%, but I can't figure
out how to set the image(s) to their original 100% size.
Here's my functions, which get called by user click.
First I switch state, to make the images visible, then I call
switchImage, that get the image url's from the repeaterItem.
Set the source of bigLeft + bigRight
Set the width of the images to half of the canvas. (the images are
pages from a magazine, left and right)
For debugging purpose I put the width into a label.
At the bottom of this post, is the HSlider "zoom" which are used by
the zoomChange function.
How could I make this work, OR, how could I make 2 buttons [Fit to
window] [Real size].
I can't figure out how to set the image back to the real size 100%.
Thanks for any help and pointers.
Mark
click="{this.currentState='spreadView'};switchImage(event.currentTarget.getRepeaterItem())"
public function switchImage(repeaterItem:Object):void {
// Resize the Div1 Tab
div1.width = 0;
thumbbar.height = 0;
// Get the sources
bigLeft.source = repeaterItem.images.imgHigh_left ;
bigRight.source = repeaterItem.images.imgHigh_right ;
// lets try to images to half of canvas size
//bigLeft.width = (main.width / 2)-25;
//bigRight.width = (main.width / 2)-25;
leftWidth.text = String( bigLeft.width )
zoom.visible=true;
}
public function init():void {
div1.width = 250;
thumbbar.height = 120;
zoom.visible=false;
}
public function zoomChange():void {
var stdWidth:uint = .7; //just a value I'm guessing
bigLeft.width=uint(stdWidth*zoom.value/100);
bigRight.width=uint(stdWidth*zoom.value/100);
zoomlevel.text = String( stdWidth*zoom.value/100 );
}
<mx:HSlider id="zoom" width="300" height="50"
minimum="10" maximum="100" value="100"
change="zoomChange()"
labels="['zoom : 10%','zoom : 100%']"
styleName="myHSlider"
allowTrackClick="true"
liveDragging="true"
alpha="1" tickLength="10" tickColor="#000000"
showTrackHighlight="true" trackColors="#ff0000,#ccff33"
visible="false"
/>