[F8] Zooming to center, not registration point

[catcherintherye]

I'm sure this topic has come up quite a bit, but despite looking through old posts I'm still having problems zooming to the center of the viewable area rather than zooming to the registration point.

I have a horizontal slider bar that incorporates the following control to set the zoom level on a map:

handle.onPress = function() {
	this.startDrag(false, 0, 0, 92, 0);
	
};
handle.onRelease = function() {
	this.stopDrag();
};
handle.onEnterFrame = function() {
	_level0.Map.targetWidth = (this._x*20)+1133; //20 is zoom multiplier, 1113 is the original width
	_level0.Map.targetHeight = (this._x*20)+976 //20 is zoom multiplier, 976 is the original height

};

The above works fine and zooms smoothly, but it zooms to the registration point (obviously).

Is there an easy formula that incorporates the above script and sets the x and y formula according to the zoom level? I know it's been suggested to place the whole map into a new MC and set the new MC registration point to the center, but because of the complexities of the map MC I'd rather change the x and y values on the fly.

Any help would be deeply appreciated! Thanks!

[madzigian]

why don't you use the _xscale and _yscale properties?.... and increase _xscale to 120 and _yscale to 120 (i.e 20% larger)

[catcherintherye]

Why don't I use the _xscale and _yscale properties for the zoom in general? Or "Why don't you use it, because then you won't have the registration point problem?"

The code I use works fine, and does a smooth scroll based on the location of the slider handle.

Here's more of the code (sorry I left it out!)

_level0.Map.targetWidth = _level0.Map._width;
_level0.Map.targetHeight = _level0.Map._height;
	setProperty("slider/handle", _x, 0);
_level0.Map.onEnterFrame = function() {
	var speed = 5;
	this._width += (this.targetWidth-this._width)/speed;
	this._height += (this.targetHeight-this._height)/speed;
};

Will the _xscale and _yscale usage fit into a script that will change the virtual registration point to the center of the viewable area?

Thanks for your help, and please let me know any suggestions you may have!

[madzigian]

i wouldn't suggest using the _width and _height to adjust the scale of a clip, especially if you plan to scale it back down to actual size... from what you posted above it looks as though you never end the resizing process either...

anyway... you can change a 'virtual registration point' as you call it (i.e center an mc with top-left reg) using the following....

mc._x = Math.round((Stage.width-mc._width)/2);
mc._y = Math.round((Stage.height-mc._height)/2);

[catcherintherye]

Thanks! I'll give it a shot. And you're right... It's a never-ending resize! I'll stick a stopping point in there, as well.

[madzigian]

yea.. just stick an check like this in there :

 if (this._width > targetWidth-1 && this._width < targetWidth+1){
this._width = targetWidth;
delete this.onEnterFrame;
}

but you need to verify the targetHeight too.. don't forget..

[catcherintherye]

Zoom centering works great!

BUT the code is conflicting with my drag function (Doh!)

Here's the code I'm using to smoothly zoom-in, including your "stopping" script:

_level0.Map.targetWidth = _level0.Map._width;
_level0.Map.targetHeight = _level0.Map._height;
	setProperty("slider/handle", _x, 0);
_level0.Map.onEnterFrame = function() {
	var speed = 5;
	this._width += (this.targetWidth-this._width)/speed;
	this._height += (this.targetHeight-this._height)/speed;
	_level0.Map._x = Math.round((Stage.width-_level0.Map._width)/2);
	_level0.Map._y = Math.round((Stage.height-_level0.Map._height)/2);
};
 if (this._width > targetWidth-1 && this._width < targetWidth+1){
this._width = targetWidth;
delete this.onEnterFrame;
}

And here's the code I use in the MC to drag the map:

on (press) {
	startDrag(getProperty(_x, _y));
}
on (release) {
	stopDrag();
}

I think the zoom code x and y variables are conflicting with my drag x and y variables. Currently, I can't drag the map (but the zoom works like a charm!)

Thanks for all your help! Any ideas?

[madzigian]

ok.. i'll take a look..

umm.. wasn't setProperty() deprecated?..... you can just use mc.property = value

oh.. i see the problem.. hang on...

[madzigian]

var targetWidth:Number = _level0.Map._width;
var targetHeight:Number = _level0.Map._height;


slider.handle._x = 0;


_level0.Map.onEnterFrame = function() {
	
	var speed:Number = 5;
	
	this._width += (targetWidth-this._width)/speed;
	this._height += (targetHeight-this._height)/speed;
	this._x = Math.round((Stage.width-this._width)/2);
	this._y = Math.round((Stage.height-this._height)/2);
	
	// check width....
	if (this._width>targetWidth-1 && this._width<targetWidth+1) {
		this._width = targetWidth;
	}
	
	// check height....
	if (this._height>targetHeight-1 && this._height<targetHeight+1) {
		this._height = targetHeight;
	}
	
	// if both ok... then delete the enterframe loop
	if (this._width == targetWidth && this._height == targetHeight) {
		delete this.onEnterFrame;
	}
};

your problem is that your 'if' check wasn't contained in the onEnterFrame function..... so when it executed the delete this.onEnterFrame line.. it referenced your main timeline... stopping everything

[catcherintherye]

Thanks.

Now I can drag the map, but the zoom doesn't work. I'm wondering if it's justifying the statement below at the get-go, and deleting the onEnterFrame zoom function before it gets a chance to be used:

if (this._width == targetWidth && this._height == targetHeight) {
delete this.onEnterFrame;

Since _width and _height_ equals targetWidth and targetHeight at the start of the function, it's jumping right out of the onEnterFrame function before it gets a chance to zoom.

[madzigian]

oops.... sorry.. lack of sleep. change this

var targetWidth:Number = _level0.Map._width;
var targetHeight:Number = _level0.Map._height;

back to what you originally had:

_level0.Map.targetWidth = _level0.Map._width;
_level0.Map.targetHeight = _level0.Map._height;

and then in the onEnterFrame handler, change all the instances of 'targetWidth' back to 'this.targetWidth' and do the same for instance of targetHeight.....

it should all work fine then.

Sorry....I'm so used to writing code MY way.. it's just habit sometimes... and from lack of sleep i didn't even realize that i declared the variables as their current value... my bad.. sorry. i need a nap

[catcherintherye]

Thanks again for your help.

I made the changes, and used the following code:

_level0.Map.targetWidth = _level0.Map._width;
_level0.Map.targetHeight = _level0.Map._height;


slider.handle._x = 0;


_level0.Map.onEnterFrame = function() {
	
	var speed:Number = 5;
	
	this._width += (this.targetWidth-this._width)/speed;
	this._height += (this.targetHeight-this._height)/speed;
	this._x = Math.round((Stage.width-this._width)/2);
	this._y = Math.round((Stage.height-this._height)/2);
	
	// check width....
	if (this._width>this.targetWidth-1 && this._width<this.targetWidth+1) {
		this._width = this.targetWidth;
	}
	
	// check height....
	if (this._height>this.targetHeight-1 && this._height<this.targetHeight+1) {
		this._height = this.targetHeight;
	}
	
	// if both ok... then delete the enterframe loop
	if (this._width == this.targetWidth && this._height == this.targetHeight) {
		delete this.onEnterFrame;
	}
};

The zooming works great, but I still can't drag the map.

I really appreciate your help, and if you can take another quick glance at the code it would be greatly appreciated.

PS: I was just playing around with it, with different zoom levels, then all of a suddden the drag worked but the slider handle was useless.

[madzigian]

i was going to say either post your FLA or the code for the slider... but it sounds like you worked it all out. (or not?....)

[catcherintherye]

Didn't sort it out yet... Can I email you the FLA file?

Here's the code for the slider:

handle.onPress = function() {
	this.startDrag(false, 0, 0, 92, 0);
};
handle.onRelease = function() {
	this.stopDrag();
};
handle.onEnterFrame = function() {
	_level0.Map.targetWidth = (this._x*10)+1133;
	_level0.Map.targetHeight = (this._x*10)+976;
};

I think its conflicting with this code in the Map.onEnterFrame function:

      this._x = Math.round((Stage.width-this._width)/2);
	this._y = Math.round((Stage.height-this._height)/2);

The 2 lines of code above seem to be setting the map x and y coordinates to a fixed location (Stage.width-this._width)/2 and Stage.height-this._height)/2) and overriding the drag x and y.