Monday, 2 March 2009

Scale images with buttons

This Flash tutorial will teach you how to scales images using button. This effect is common in shopping website where the item for sale is enlarged or shrunk. This tutorial will require some knowledge of basic buttons. I have used a free stock image of an elephant which is available at: www.sxc.hu


Scale images with buttons

Step 1

Open a new Flash document and select an appropriate stage size.
Import the image you wish to use onto the stage by selecting File > Import > Import to stage then select the image and click ok.


Step 2

Convert your image into a symbol by pressing F8.
Select an appropriate name, check movie clip and choose the centre as the registration point and click ok.



The centre registration point is used because it allows the image to be enlarged or shrunk from the centre.


Step 3

Create your buttons on the stage or alternatively you can use the built in buttons. I have created two buttons, one plus and one minus. For more information on how to create button check out the basic button tutorial.




Step 4

Using the selection tool (v) select the buttons and the movie clip and give them instance names eg plus_btn, minus_btn, and elephant_mc.




Step 5

On the timeline insert a new layer called “Actions” then right click on the first frame and select Actions. And add the following code. This code uses the _xscale and _yscale to increase the image size by desired amount.

1.    plus_mc.onRelease = function() {
2. elephant_mc._xscale += 20;
3. elephant_mc._yscale += 20;
4. };

5. minus_mc.onRelease = function() {
6. elephant_mc._xscale -= 20;
7. elephant_mc._yscale -= 20;
8. };

**Line 1-4 Increases the elephant image in the x and y direction by 20% when the button is pressed.

Line 5-8 Decease the elephant image in the x and y direction by 20% when the button is pressed.


You may have noticed that there is no limit to the size increase or decrease of the images. To solve this you can use the following code. This code limits the maximum and minimum image sizes.
plus_mc.onRelease = function() {
if (elephant_mc._xscale == 200 && elephant_mc._yscale ==200) {
elephant_mc.enabled = false;
}
else {
elephant_mc._xscale += 20;
elephant_mc._yscale += 20;
}
};
minus_mc.onRelease = function() {
if (elephant_mc._xscale == 20 && elephant_mc._yscale == 20) {
elephant_mc.enabled = false;
} else {
elephant_mc._xscale -= 20;
elephant_mc._yscale -= 20;
}
};

Step 6

Test your movie clip ctrl + enter.



You should now be able to scale images with buttons. Feel free to contact me for any questions or comments.

2 comments:

El Gran Pachango 31 May 2009 at 06:29  

Hi, I tried this code with Flash 8...but for some reason I can't see to get the size limit right. I mean, I can set the limit to shrink the images, but I can't stop augmenting the size. =(

iliketo 31 May 2009 at 10:27  

@El Gran Pachango

Take a look at the second part of the code. It limits the maximum and minimum image sizes.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP