Friday, 26 December 2008

Increase/decrease image using mouse wheel

This Flash tutorial will teach you how to use the mouse wheel to increase/decrease the size of an image. This tutorial uses a mouse listener object to add actions to the mouse wheel. I used an action script 2.0 file and used a free stock image of sunflowers which is available at: www.sxc.hu

Increase/decrease image using mouse wheel

Step 1

Open a new Flash document and select an appropriate stage size.
Import your image into the library by selecting File > Import > Import to Library then select your image and click ok.
You could alternatively create your own objects using the basic shape in Flash, if you wish.


Step 2

Select Insert > New symbol a box should pop up. Give your symbol an appropriate name, check movie clip and click ok.
Now drag your image from the library onto the stage making sure the registration point is at the centre of the image. You image should something like below:




Step 3

On the timeline return to the original stage by selecting the back button or the scene 1 button.
Now drag the movie clip you just created from the library, onto the stage. And give your movie clip an instance name e.g. image_mc.




Step 4

On the timeline insert a new layer called “actions” then right click on the 1st frame and select Actions and add the following code:

1. var mouseListener:Object = new Object();
2. mouseListener.onMouseWheel = function(delta) {
3.
4. image_mc._xscale += delta;
5. image_mc._yscale += delta;

6. }
7. Mouse.addListener(mouseListener);

**Line 1, creates a listener object called mouseListener.

Line 2, creates an onMouseWheel listener. This monitors when the user rolls the mouse wheel. The parameter delta is optional, but indicate the number of lines that should be scrolled when the user roll the mouse wheel. I left this at the default value.

Line 4 – 5, the x and y scale of the movie clip object named image_mc increase/decrease every time the user rolls the mouse wheel.

Line 7, this basically registers a listening object, without this line of code nothing would happen. All listening objects that are registered to the mouseListener object get there methods invoke. For example adding the following code after line 6 will still work because the object is registered to the listener.

mouseListener.onMouseMove = function() {
image_mc._x = _xmouse;
image_mc._y = _ymouse;
};


Step 5

Test your movie Ctrl + enter. You use the mouse wheel to increase/decrease the size of the image. Note you have to click on the image before you can use the mouse wheel.




You can increase/decrease an image using the mouse. Feel free to contact me for any questions or comments.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP