Thursday, September 15, 2011

Resize image using button in actionscript 3


The steps to design a "+" and "-" button to increase an image in actionscript 3.0
Here the button is not real button in AS3, it is a Movie Clip.
1) Click Adobe Flash CS3 Professional:
2) File->New ->ActionScript 3
3)  In layer 1,  import an image, draw a button using rectangular tool and duplicate it.
4) Create a new layer "text", type "+" and "-" in each button
5) Using selection tool (v), convert image and two buttons as "Movie Clip", and set
image instance name m_whale (click property), "+"button as m_plus, "-" button as m_minus
6) Create new layer " action",
press F9 to import following actionscript
m_plus.addEventListener(MouseEvent.CLICK, IncreaseSize);
m_minus.addEventListener(MouseEvent.CLICK, DecreaseSize);
function DecreaseSize(evt:MouseEvent){
    m_whale.scaleX -= 0.1;
    m_whale.scaleY -= 0.1;
}
function IncreaseSize(evt:MouseEvent){
    m_whale.scaleX += 0.1;
    m_whale.scaleY += 0.1;
}
4) Control + Test Movie (ctrl+enter) to test movie. Export movie to swf file.
5. The swf  is below


Note:
onRelease in As2 should be changed to ddEventListener(MouseEvent.CLICK, myfunc) in AS3, or you will get Flash Warning #1090.
In AS2:
m_plus.onRelease = function () {
//Do Something
}

In AS3: 
m_plus.addEventListener(MouseEvent.CLICK, IncreaseSize);
function IncreaseSize(evt:MouseEvent){
   //do something
}

No comments:

Post a Comment