can't get zoom control to work

[Navarone]

I am havng trouble integrating a zoom control to my scrollpane. I think the problem is the Loader but I am not sure. If I press to zoom in the image dissappears. Zoom out doesn't do any thing.

var myScrollPane:mx.containers.ScrollPane;
myScrollPane.contentPath = 'Holder_mc';
///////////////////////////////////////////////////////////////////
_root.myZoom = 1;
this.zoom_out.onPress = function() {
_root.myZoom = _root.myZoom/2;
myScrollPane.refreshPane();
myScrollPane.content.scaleX *= _root.myZoom;
myScrollPane.content.scaleY *= _root.myZoom;
};
this.zoom_in.onPress = function() {
_root.myZoom = _root.myZoom/0.5;
myScrollPane.refreshPane();
myScrollPane.content.scaleX *= _root.myZoom;
myScrollPane.content.scaleY *= _root.myZoom;
};
//////////////////////////////////////////////////////////////////
MyPicVars = new LoadVars();
MyPicVars.load("Dadphotos.txt");
MyPicVars.onLoad = function(success) {
if (success) {
var t_mc:MovieClip;
Rc = this["DLc"];
//trace(Rc);
for (i=0; i<=Rc-1; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
t_mc.i = i;
t_mc.location = this["pic"+i];
t_mc.onRelease = function() {
//load image into pictures scroll pane
trace(this.location);
//trace(mx.containers.ScrollPane.version);
//myScrollPane.content.myLoader.contentPath = "K:/Dons_FlashToolBox/pictureViewer/Dadphotos/Dad3CsA.jpg";
myScrollPane.content.myLoader.contentPath = "Dadphotos/"+this.location;
myScrollPane.redraw(true);
};
thumbs.redraw(true);
}
} else {
trace("not loaded");
}
};

[sleekdigital]

First, myScrollPane.content is a movieclip inside of a component, not a component itself... therefore you need to use the movieclip properties _xscale and _yscale instead of component properties scaleX and scaleY.

Second, ( think I've mentioned this to you several times) for what you are doing you should be calling the scrollpane's invalidate method ... not refreshPane and not redraw(true). redraw(true) will work, but you are needlessly redrawing the component every frame instead of only redrawing when things change.

[Navarone]

So refreshpane and redraw force the object to be redrawn every frame, but what if I am only in one frame? Invalidate forces the changes on the next frame, I don't have a next frame? I guess I am confused about the terms "every frame" and "next frame". :confused:

MM help files indicate that the invalidate method is mostly used for "custom" components. Since I am using MM components(I don't consider them custom), I figured redraw and refreshpane was the correct choice. If ultimately your saying the invalidate method will help free up resources, then I should switch. :)

Now back to the zoom thing. You're saying even though I am using a Loader component, because it's inside a movieclip, then I should be using the movieclip _xscale and _yscale, correct? If so, can I just swap out the Xscale and Yscale for the movieclip properties, or will the code not work then if I do that?

[tarafenton]

I believe that I have done something similuar and I found this code on the live docs comments section of the scroll pane. Hopefully it is useful to you too.

//refreshs the scroll bars in the pane
_level1.scroller.refreshPane();
var vPos:Number = _level1.scroller.vPosition;
_level1.scroller.onComplete();
_level1.scroller.vPosition = vPos;
var hPos:Number = _level1.scroller.hPosition;
_level1.scroller.onComplete();
_level1.scroller.hPosition = hPos;

[jsebrech]

So refreshpane and redraw force the object to be redrawn every frame, but what if I am only in one frame? Invalidate forces the changes on the next frame, I don't have a next frame? I guess I am confused about the terms "every frame" and "next frame". :confused:

Confusing use of wording from macromedia. There are two distinct meanings of every frame. In your timeline, you have frames succeeding each other in order of time. However, if you stop on one of those frames, every so many times a second it will refresh the frame. At this point you get an onEnterFrame event.

So, redrawing on every frame in this context means redrawing as often as your frame rate of your flash movie is set.

[sleekdigital]

So refreshpane and redraw force the object to be redrawn every frame,

I said redraw(true) does this, not refreshpane(). Refreshpane reloads content in the pane, but does not update the scrollbars of the pane. Another user already explained the "every frame" issue.

MM help files indicate that the invalidate method is mostly used for "custom" components.

Not sure why MM says that ... seems silly to me. Maybe there is a more correct way to update the scroll bar position when content changes, but invalidate() has always worked for me.

Now back to the zoom thing. You're saying even though I am using a Loader component, because it's inside a movieclip, then I should be using the movieclip _xscale and _yscale, correct? If so, can I just swap out the Xscale and Yscale for the movieclip properties, or will the code not work then if I do that?

As far as I can tell from your code, it looks like you have a Loader IN your content (myScrollPane.content.myLoader), but the content itself is a movieclip. If you want to scale the loader using the component properties then reference the loader, not the content.

[Navarone]

Ok, I read thru the loader class help files in Flash and I have been trying to get this to work. I can zoom out, but I can't zoom back in.

_root.myZoom = 1;
this.zoom_out.onPress = function() {
_root.myZoom = _root.myZoom/2;
//myScrollPane.refreshPane();
myScrollPane.invalidate ()
myScrollPane.content.myLoader.scaleX *= _root.myZoom;
myScrollPane.content.myLoader.scaleY *= _root.myZoom;
};
this.zoom_in.onPress = function() {
_root.myZoom = _root.myZoom/0.5;
//myScrollPane.refreshPane();
myScrollPane.invalidate ()
myScrollPane.content.myLoader.scaleX *= _root.myZoom;
myScrollPane.content.myLoader.scaleY *= _root.myZoom;
};

[sleekdigital]

_root.myZoom = _root.myZoom/0.5

Wouldn't you want to multiply or add something here?? Dividing by .5 might work for awhile, but once myZoom gets below .5 its going to get messed up.

[Navarone]

well your probably right, but any number greater than that, then both the zoom in and zoom out will "zoom out". I actually found this code doing a google search, But I''l be darned if I can find it again.

What does the * do next to the scaleX, and scaleY? It's multipying somthing?

[Navarone]

ok, here is what was going on with this zoom in and out. Initially, myZoom is set to a value of 1. If you zoom in, the value of myZoom = 2. If you tried to zoom out myZoom became 1 again and the image remained in previously zoomed state because scaleX and scaleY won't do anything if the value of myZoom is 1. The reverse was true if you zoomed out first then tried to zoom in. I simply had to add a short if statement to catch this. Now it is working fine.

myZoom = 1;
this.zoom_in.onPress = function() {
myZoom = myZoom/0.5;
if (myZoom=1) {
myZoom = 2;
}
pictures.content.myLoader.scaleX *= myZoom;
pictures.content.myLoader.scaleY *= myZoom;
trace("in "+myZoom);
pictures.invalidate();
};
this.zoom_out.onPress = function() {
myZoom = myZoom/2;
if (myZoom=1) {
myZoom = 0.5;
}
pictures.content.myLoader.scaleX *= myZoom;
pictures.content.myLoader.scaleY *= myZoom;
trace("out "+myZoom);
pictures.invalidate();
};

[jsebrech]

Just multiply your scale by a constant. Like this:
this.zoom_out.onPress = function() {
myScrollPane.invalidate ()
myScrollPane.content.myLoader.scaleX /= 1.5;
myScrollPane.content.myLoader.scaleY /= 1.5;
};
this.zoom_in.onPress = function() {
myScrollPane.invalidate ()
myScrollPane.content.myLoader.scaleX *= 1.5;
myScrollPane.content.myLoader.scaleY *= 1.5;
};

[Navarone]

Hey thanks, thats even better. ;) How do I calculate the percentage of zoom any idea? :)

[jsebrech]

scaleX is 100 by default. So, you get the zoom factor by dividing it by 100.

[Navarone]

So check me on this and see if I am right. If I zoom in with just 1 click that would be zooming in 1.5 times or 150/100 or 66.66% correct? :)

[jsebrech]

You would be making the scale 150 instead of 100, so (150 - 100) / 100 = 50% increase.

I've found that multiplying and dividing by a constant scale factor creates credible zoom behavior. Be careful of how deeply you zoom in though. Very high scale factors lead to artifacts and flash bugs.

[Navarone]

Thanks, I plan on putting a threshold on my zoom buttons, so that the user can only zoom in so far or zoom out.

One thing I noticed using my zoom functions, if I load another image into the scroll pane, whatever zoom you left off on, is still there when the new image loads. I imagine there is a method to resize everything back to a 1:1 ratio.

[jsebrech]

Just make scalex and scaley both 100 again.

[Navarone]

Thanks, I ultimately figured that out. ;)