Zooming in flex and the originX originY...

Hi

I have an image. It's source comes from fla, and is a movie clip with children nested in it.

I am assigning an eventlistener so when I click on one of the nested movie clips, I want to zoom where I clicked.

I tried using the example source code which demonstrate zooming:

?

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;

%26lt;mx:Application

xmlns:mx=http://www.adobe.com/2006/mxml backgroundAlpha=''0''%26gt;

%26lt;mx:Zoom

id=''zoomIn'' zoomWidthTo=''1'' zoomHeightTo=''1'' /%26gt;

%26lt;mx:Zoom

id=''zoomOut'' zoomWidthTo=''.5'' zoomHeightTo=''.5'' /%26gt;

%26lt;mx:Panel

title=''Zoom Demo'' width=''100%'' height=''100%'' horizontalAlign=''center''%26gt;

%26lt;mx:Label

text=''Mouse over the image to enlarge it''/%26gt;

%26lt;mx:Canvas

id=''canvas'' width=''100%'' height=''100%''%26gt;

%26lt;mx:Image id=''img'' x=''{canvas.width/2 - img.width/2}'' y=''{canvas.height/2 - img.height/2}''

source=''@Embed('../assets/some_jpg_file.jpg')'' scaleX=''.5'' scaleY=''.5''

rollOverEffect=''

zoomIn'' rollOutEffect=''zoomOut''/%26gt;

%26lt;/mx:Canvas%26gt;

%26lt;/mx:Panel%26gt;

%26lt;/mx:Application%26gt;

This works OK but zooms from the center. I thought if I change the originX originY parametes to the x,y location of where I clicked, I will

be able to zoom to that point. But that does not work correctly.

Has any one used the originX originY parametes before ???

Thanks

Elisheva

Zooming in flex and the originX originY...

Hi,

are you sure that you set correct values for originX and originY? It should be coordinates in canvas not global coordinates of click event.

Zooming in flex and the originX originY...

Tnx for a quick reply.....I tried that...go a head and give it a try yourself. The code is there. I am not sure what the role of the originX and Y, or why

they dont act the way I hoped they would...

Elisheva

Your problem is not about the originX and originY error functioning.

You have a data binding in a x,y position of img. (x=''{canvas.width/2 - img.width/2}'' y=''{canvas.height/2 - img.height/2}'')

So any moving and zooming of it will be centered in a result view. Try to set fixed values and you'll see.

Not sure ....

Even when I set these values ''hardcoded'' still does nt do much.

Lets say I want to zoom where I click. I take off the rollover rollout effects and instead I put:

click=''zoomClick(event)''

and:

private

function zoomClick(event:Event):void

{

var z:Zoom = new Zoom();

z.zoomWidthTo=1;

z.zoomHeightTo=1;

z.target = canvas;

z.play();

}

It does not zoom where I want it. It zooms, as you say, to the x and y defined in the image declaration.

How can I zoom, to the mouseposition or some other dynamic location ?.

Elisheva

function zoomClick(event:Event):void

{

var z:Zoom = new Zoom();

z.zoomWidthTo=1;

z.zoomHeightTo=1;

z.target = canvas;

z.originX = event.localX;

z.originY = event.localY;

z.play();

}

Looks much better now...Tnx

Should the x and y in the image declaration be set to 0 ? or should they be dynamic. and if so. what values ?

buy make up