Special zoom feature...

I cannot get my head around this one...I want to create a feature that zooms in on the map...and the selected booth is centered in the main viewing window...what I have come up with right now only works really crappy...the more times you click on an exhibitor in the list, the closer to the center the map comes...can anyone help me out?

www.expocadvr.com/new/default.html

code:

---

	function listClick(boothArr:Array)

	{

		//trace(boothArr);

		//_root.scaleTo(120);



		/*for(var i=0; i<boothArr.length; i++)

		{

			var myPoint:Object = {x:booths[booth].xValue, y:booths[booth].yValue};

			var booth:Number = boothArr[i];

			//trace(.globalToLocal());

			//trace(.globalToLocal());

			_root.target._visible = true;

			_root.target.localToGlobal(myPoint);



			_root.target._x = booths[booth].xValue.localToGlobal();

			_root.target._y = booths[booth].yValue.localToGlobal();

		}*/

				

		for(var i=0; i<boothArr.length; i++)

		{

			var booth:Number = boothArr[i];

			

			var myPoint:Object = {x:0, y:0};

			var myPoint2:Object = {x:0, y:0};



			//var myPointX:Object = {x:0, y:0};

			//var myPointXX:Object = {x:0, y:0};

		

			_root.container.localToGlobal(myPoint);

			_root.hitAreaMain.localToGlobal(myPoint2);

						

			//booths[booth].localToGlobal(myPointX);

			//_root.container.localToGlobal(myPointXX);

			

			var centerMapX:Number;

			var centerMapY:Number;

			

			var centerWinX:Number;

			var centerWinY:Number;

			

			var offsetX:Number;

			var offsetY:Number;

			

			var boothX:Number;

			var boothY:Number;

			

			var moveX:Number;

			var moveY:Number;

			

			var distX:Number;

			var distY:Number;

			

			distX = ((_root.container._width/2) - booths[booth].xValue)*_root.theScale;

			distY = ((_root.container._width/2) - booths[booth].yValue)*_root.theScale;

			

			offsetX = myPoint2.x - myPoint.x - _root.zoomChangeX;

			offsetY = myPoint2.y - myPoint.y - _root.zoomChangeY;

			

			trace(distX + " " + distY);

			

			/*

			centerMapX = (myPoint2.x+((_root.container._width/2)*_root.theScale))+offsetX;

			centerMapY = (myPoint2.y+((_root.container._height/2)*_root.theScale))+offsetY;

			*/

			centerWinX = myPoint2.x + (_root.hitAreaMain._width/2);

			centerWinY = myPoint2.y + (_root.hitAreaMain._height/2);

			

			boothX = (booths[booth].xValue*_root.theScale)+myPoint2.x;

			boothY = (booths[booth].yValue*_root.theScale)+myPoint2.y;



			

			//trace(centerMapX + " " + centerMapY + " " + centerWinX + " " + centerWinY);

			

			//trace(boothX + " " + boothY);

			

			moveX = (distX + offsetX);

			moveY = (distY + offsetY);



			trace(moveX + " " + moveY);

		

			//trace(_root.container._width + " " + _root.container._height);

			//trace(myPoint.x + " " + myPoint.y);

			//trace(booths[booth]);

			//trace(booths[booth] + " " + myPointX.y);

			//trace(booths[booth].xValue + " " + booths[booth].yValue);

		

			//tempX = (myPoint2.x - myPoint.x)+(_root.hitAreaMain._width/2);

			//tempY = (myPoint2.y - myPoint.y)+(_root.hitAreaMain._height/2);

			//moveX = tempX - boothX - (booths[booth].boothWidth/2);

			//moveY = tempY - boothY - (booths[booth].boothHeight/2);



			_root.checkBounds(moveX, moveY, 0, 0);

		}

	}

---

this function is called when an item in the list is clicked...

Ok some more info on this issue...maybe there is an easier way to go about this...

There is an MC on the stage called CAD_mc...inside this CAD_mc is an MC called container....within the container the booths are drawn...Each booth has an X/Y coordinate that is relative to the container...so the booth coordinates that are stored are useless in the scope of the stage...how can I translate the booth x/y coordinates to the stage so I can easily work with them...I have tried doing localToGlobal, but I cannot get the correct values returned...I am confirming the coordinates by tracing the mouse position when I click the booth that is supposed to get highlighted and zoomed in on when the corresponding exhibitor is clicked in the list...any1 help?

OK! I have it somewhat working...but it works only if I am using a scale factor of 100 or less...otherwise you have to keep clicking the exhibitor in the list until it centers the booth finally after like 5 clicks...i want to have it work the same way for all zooms...because each booth will have a zoom scale factor based on its size...please help!!!

code:

---

	function listClick(boothArr:Array)

	{

		_root.scaleTo(100);

				

		for(var i=0; i<boothArr.length; i++)

		{

			var booth:Number = boothArr[i];

			

			var myPoint:Object = {x:0, y:0};

			var myPoint2:Object = {x:0, y:0};

		

			_root.container.localToGlobal(myPoint);

			_root.hitAreaMain.localToGlobal(myPoint2);

			

			var thisScale;

			var temp;



			var centerWinX:Number;

			var centerWinY:Number;

			

			var boothX:Number;

			var boothY:Number;

			

			var moveX:Number;

			var moveY:Number;



			centerWinX = myPoint2.x + (_root.hitAreaMain._width/2);

			centerWinY = myPoint2.y + (_root.hitAreaMain._height/2);

						

			boothX = ((booths[booth].xValue*(_root.zoomMain._xscale/100))+myPoint.x);

			boothY = ((booths[booth].yValue*(_root.zoomMain._xscale/100))+myPoint.y);



			moveX = (centerWinX - boothX);

			moveY = (centerWinY - boothY);



			trace("Scale : " + _root.zoomMain._xscale/100);

			trace("Center X: " + centerWinX + " Center Y: " + centerWinY);

			trace("Booth X: " + boothX + " Booth Y: " + boothY);

			trace("Move X: " + moveX + " Move Y: " + moveY);



			_root.checkBounds(moveX, moveY, 0, 0);

		}

	}

---

How do you zoom on a booth? if i click on the list it just gets bigger. w/o any tween

gparis

You would click the an exhibitor in the exhibitor list on the left...the map should zoom to some level, and then center the booth in the middle of the viewable map area...

Doesn't do it. Neither on Mac or Windows firefox. That's why i'm asking... is there a specific file i'm supposed to open?

gparis

Ok try this link...each show should work the same way...

http://www.expocadvr.com/new/default.html

when you click an exhibitor the map will zoom and pan to have the booth in the center...but not quite there...if you click again, it will be closer...and so on and so forth...the previous link had the zoom set at 100 so that problem was avoided...but the zoom will change based on the size of the booth...so this cannot be the solution...

Paul

there's no tweening. It just jumps to some coordinates (which doesn't seem consistent effectively) and scales to 300% or so. That's what i'm supposed to see?

gparis

yes no tween...just a straight jump...but as you can see if you keep clicking the same exhibitor over and over...the map keeps recentering until the booth is in the center of the map...

Did you use debug movie and check if any vars return undefined?

Also I think you should make one small .fla for debug purpose only with one big mc (or more if needed) and a couple of small mock-up booth + your reduced boothArr array. Just to test that zoom feature block of code.

gparis