Flash Site Design - zoom & scale images in Flash

Author

zoom & scale images in Flash

chico webforumsuser@macromedia.com

2004-01-30, 9:32 am

Can anyone point me to an good application that enables the viewer of a Flash site to scale and move around an image?

swingb13 webforumsuser@macromedia.com

2004-01-30, 2:31 pm

You don't really need an application that does that, you can build it yourself quite simply. Coincidentally I just posted a script yesterday that, with a simple tweak, will do just that. Refer to the thread 'Shrink to Fit' for more instructions on how to
prepare your .fla and here's the script modified to also allow drag and drop:

onLoad = function () {
pic._xscale = 25;
pic._yscale = 25;
};
//we've added a variable to check if the picture movie is 'full' (large) or not
full = false;
//this is a recursive function, basically that means this function does not fire until it's told to
function doScale() {
//here we check if full is false (our initial value), meaning it's not full screen
if (full == false) {
pic.onEnterFrame = function() {
if (pic._yscale<=100 && pic._xscale<=100) {
// 5 is the speed
pic._yscale += 5;
pic._xscale += 5;
//notice that we set the variable to true meaning that
//yes, it is full screen
full = true;
}
};
}
//now we reverse the function, same script but reducing the size
if (full == true) {
pic.onEnterFrame = function() {
if (pic._yscale>=25 && pic._xscale>=25) {
pic._yscale -= 5;
pic._xscale -= 5;
//we have now reset our movie clip to it's original 25%
//starting size and we're also resetting the value to false
full = false;
}
};
}
}
//now when we press the mouse we 'fire' our recursive function called doScale()
//**TIP: you don't have to say do in front of recursive functions, it just makes them easier to read
//at least I think so.
pic.onPress = function() {
doScale();
//startDrag has six parameters: Target (which in this case is 'this' but it could also be the
//name of your mc, lockcenter (which snaps the mouse to the center of the image), and
//left-top-right-bottom (which allows you to limit the _x and _y coordinates of the movie clip
startDrag(this);
};
pic.onRelease = function() {
stopDrag();
}

Follow the discussion in the 'Shrink to Fit' post, add these actions to your movie, see how it works, and then you should be able to tweak it to fit your specific needs. If you have more questions please respond to this thread.

Doug Richards
Team Macromedia Volunteer for Flash

Sprint Corporate Champions User Group Manager
Member AIGA

chico webforumsuser@macromedia.com

2004-02-02, 1:30 pm

Thanks for that. I would however link the viewer to be able to control the scaling and navigation by using control buttons. I am new to action-script and its been tens of years since I had to learn a language. I am working through the tutorials to see if
I can use your script and build this movie. Any help you can offer would be gratefully received. Thanks again.

swingb13 webforumsuser@macromedia.com

2004-02-02, 6:30 pm

These forums are a good place to start learning actionscript. If you're going to work in Flash I would highly recommend learning scripting as soon as possible. The best resource available is Colin Moock's Definitive Guide to Actionscript from O'Reilly.
Back to the question at hand, adding control buttons to our original script is simple enough. Currently the user would click the image to change the scale but with a simple tweak or two we can make it triggered by a button. Since we've already cre
ated our pic movie clip all we need to do know is create a button that controls the pic mc. Another approach to this would be adding a slider bar that allows the user to scale the image by dragging the bar to increase/reduce the image size. The slider bar
will take a lot more detailed coding so for now let's look at simply triggering the actions with two simple movie clips that are acting as buttons.

1.First, lock the layer that the pic movie clip is on.
2.Add another layer to your movie (you should now have three layers. Title them: Actions, Pic, and 3.Controls)
4.Draw a button shape on the Controls layer (for now just a simple box will work, later you can edit the movie to make it look better)
5.Select everything you've just drawn and make it into a movie clip (F8)
**TIP: You can use either a button object or a movie clip object. I prefer working with movie clips
because they are more flexible but it's really a matter of your preference.
6.Give the new button (movie clip) the instance name ScaleUp
7.Select the button on the stage and ALT+drag the instance to create a copy of ScaleUp. Give this new instance the name ScaleDown.

Now we're going to use the basic script we created for our first run with a few alterations, most notably we're going to remove the variable full since we no longer will need to check if the image is full scale or not. We're also going to break apart the
doScale function into to seperate recursive function, doScaleUp and doScaleDown. We will trigger each of these functions with our new buttons through onPress events. Additionally we will preserve the drag and drop capability already associated with the pi
c movie clip but make that functionality specific to our pic mc.

onLoad = function () {
pic._xscale = 25;
pic._yscale = 25;
};
//notice we've removed the full variable
//and here we seperate the original script into two parts
function doScaleUp() {
pic.onEnterFrame = function() {
if (pic._yscale<=100 && pic._xscale<=100) {
//**TIP: Currently the scale is set to increase to 100% once this function
//is triggered. As an alternative we could require the user to click each
// time they want to zoom the image larger, like this
// pic._yscale = pic._yscale+5;
//pic._xscale = pic._xscale+5;
//This method would increase the scale by only 5% every time the user
//presses the button.
// 5 is the speed
pic._yscale += 5;
pic._xscale += 5;
}
};
}
//and again we seperate our script into a new function 'doScaleDown' that we will trigger with
//the scaleDown button
function doScaleDown() {
if (full == true) {
pic.onEnterFrame = function() {
if (pic._yscale>=25 && pic._xscale>=25) {
pic._yscale -= 5;
pic._xscale -= 5;
}
};
}
}
//now with our two new buttons we trigger the functions
scaleUp.onPress = function() {
doScaleUp();
};
scaleDown.onPress = function() {
doScaleDown();
};
//and pic is still scalable and draggable
pic.onPress = function() {
startDrag(this);
};
pic.onRelease = function() {
stopDrag();
};

Keep in mind that currently this script is designed to function with a single image. When you move into creating your viewer you will have to make a decision on if you want to hard code the names of each movie clip for each function or if you want to work
with an array that stores the names, which you then reference dynamically. Since you're new to actionscript I would recommend that you make the effort to understand how array's work and how you can build your own. Array's can be a deep subject so rather
than going into an in-depth tutorial here I would recommend you read all the infomation available here at Macromedia.com on array's in Flash. Check out the developer center to get started. To give you a quick glimpse of their power try this:

Create another movie clip with a seperate image. Name this one picB (don't forget the instance name). Now add this to the top of your actions:

Names = [pic, picB];
//set the stage dimensions of all the objects in the array
for (i=0; i<=Names.length-1; i++) {
Names._xscale = 25;
Names._yscale = 25;
}

See how both movie clips are scaled down to 25% now? That's just a taste of how to work with array's. Good luck and post again if you have questions.

Doug Richards
Team Macromedia Volunteer for Flash

Sprint Corporate Champions User Group Manager
Member AIGA

chico webforumsuser@macromedia.com

2004-02-04, 10:30 am

Many thanks for that.