all groups > flash actionscript > june 2005 >
You're in the

flash actionscript

group:

How do I use AS to zoom in on an image, based on where the user clicked?



How do I use AS to zoom in on an image, based on where the user clicked? B.Sewall
6/20/2005 11:54:05 PM
flash actionscript: Say I have an image of a product. I want the user to be able to see the
details of the product. So, wherever they click on the image, it will zoom in
centered on wherever the user clicked. How would I do that?

Thanks!
Re: How do I use AS to zoom in on an image, based on where the user clicked? NSurveyor
6/20/2005 11:59:17 PM
http://macromedia.com/cfusion/webforums/forum/messageview.cfm?catid=288&threadid
=1011118&highlight_key=y&keyword1=zoom

In one part of the code, I used:

this._xscale *= 2;
this._yscale *= 3;

Just change 2 and 3 to the scaling rate you want. If you don't want to
distort, make sure you use the same number, not different ones. So, if you used:

this._xscale *= 2;
this._yscale *= 2;

Then, the image will double in size on click.
Re: How do I use AS to zoom in on an image, based on where the user clicked? B.Sewall
6/21/2005 12:00:00 AM
Re: How do I use AS to zoom in on an image, based on where the user clicked? B.Sewall
6/21/2005 12:14:45 AM
Thanks. That is a good start.

Re: How do I use AS to zoom in on an image, based on where the user clicked? NSurveyor
6/21/2005 12:58:53 AM
Try this code:

dir = -1;
toBeXScale = originalXScale = image._xscale
toBeYScale = originalYScale = image._yscale
originalX = image._x;
originalY = image._y;
image.onPress = function() {
dir*=-1;
if(dir==1){
real_x = this._xmouse;
real_y = this._ymouse;
//
over_x = real_x*this._xscale/100;
over_y = real_y*this._yscale/100;
//
toBeXScale = this._xscale*1.5;
toBeYScale = this._yscale*1.5;
}else{
toBeXScale = originalXScale;
toBeYScale = originalYScale;
}
};
function scaleIt(image) {
if (image._xscale != toBeXScale) {
image._xscale += dir;
}
if (image._yscale != toBeYScale) {
image._yscale += dir;
}
scaledOver_x = real_x*image._xscale/100;
scaledOver_y = real_y*image._yscale/100;
image._x = originalX+over_x-scaledOver_x;
image._y = originalY+over_y-scaledOver_y;

};
setInterval(scaleIt,10,image);
Re: How do I use AS to zoom in on an image, based on where the user clicked? NSurveyor
6/21/2005 1:06:13 AM
Actually, that code is a bit flawed... Try this:

//:Settings:
scaleSize = 1.5;
speed = 1;
//:End:
dir = -1;
toBeXScale = originalXScale = image._xscale
toBeYScale = originalYScale = image._yscale
originalX = image._x;
originalY = image._y;
image.onPress = function() {
dir*=-1;
if(dir==1){
real_x = this._xmouse;
real_y = this._ymouse;
//
over_x = real_x*this._xscale/100;
over_y = real_y*this._yscale/100;
//
toBeXScale = this._xscale*scaleSize;
toBeYScale = this._yscale*scaleSize;
}else{
toBeXScale = originalXScale;
toBeYScale = originalYScale;
}
};
function scaleIt(image) {
if (Math.abs(image._xscale-toBeXScale)>1) {
image._xscale += dir;
}else{
image._xscale = toBeXScale;
}
if (Math.abs(image._yscale-toBeYScale)>1) {
image._yscale += dir;
}else{
image._yscale = toBeYScale;
}
scaledOver_x = real_x*image._xscale/100;
scaledOver_y = real_y*image._yscale/100;
image._x = originalX+over_x-scaledOver_x;
image._y = originalY+over_y-scaledOver_y;
};
setInterval(scaleIt,speed,image);
Re: How do I use AS to zoom in on an image, based on where the user clicked? NSurveyor
6/21/2005 8:32:11 PM
Re: How do I use AS to zoom in on an image, based on where the user clicked? go mama go
7/6/2005 6:18:05 PM
is there anyway you could post the fla file? this is what I've been searching
for, i think.
I'm not that great with action script, and I've wasted 1/2 day looking for a
great zoom feature....
thanks
:D
Re: How do I use AS to zoom in on an image, based on where the user clicked? NSurveyor
7/7/2005 12:19:10 AM
To get my code working:

Convert your image into a movieclip (Modify > Convert to Symbol or Insert >
Convert to Symbol depending on what version of Flash you are using). Then
click on your movieclip, open the properties panel, and give it the instance
name, image (type in image where it says <Instance Name>). Then, click on the
frame that your movieclip is in, open the actions panel (Windows > Actions F9),
and paste in the following code:

//:Settings:
scaleSize = 1.5;
speed = 1;
//:End:
dir = -1;
toBeXScale = originalXScale = image._xscale
toBeYScale = originalYScale = image._yscale
originalX = image._x;
originalY = image._y;
image.onPress = function() {
dir*=-1;
if(dir==1){
real_x = this._xmouse;
real_y = this._ymouse;
//
over_x = real_x*this._xscale/100;
over_y = real_y*this._yscale/100;
//
toBeXScale = this._xscale*scaleSize;
toBeYScale = this._yscale*scaleSize;
}else{
toBeXScale = originalXScale;
toBeYScale = originalYScale;
}
};
function scaleIt(image) {
if (Math.abs(image._xscale-toBeXScale)>1) {
image._xscale += dir;
}else{
image._xscale = toBeXScale;
}
if (Math.abs(image._yscale-toBeYScale)>1) {
image._yscale += dir;
}else{
image._yscale = toBeYScale;
}
scaledOver_x = real_x*image._xscale/100;
scaledOver_y = real_y*image._yscale/100;
image._x = originalX+over_x-scaledOver_x;
image._y = originalY+over_y-scaledOver_y;
};
setInterval(scaleIt,speed,image);

If you cannot get it to work, I'd be glad to send you the fla.
Re: How do I use AS to zoom in on an image, based on where the user clicked? sarova
8/5/2005 7:59:01 PM
That is absolutely awesome! Got it to work the first time. Now here's a
question:
My zoomed movie clip has some buttons in it. How can I keep these buttons
working too?

Many thanks for the superzoomer!
Re: How do I use AS to zoom in on an image, based on where the user clicked? sarova
8/6/2005 6:50:04 PM
Re: How do I use AS to zoom in on an image, based on where the user clicked? NSurveyor
8/6/2005 6:55:25 PM
AddThis Social Bookmark Button