Rectangular scaling using the AS3

This, step by step, detailed action script lesson, will show you how to create a sprite with rounded corners and then scale it using the mouse cursor.







Example:



Step 1

Create a new flash document.Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 300 pixels. Select white color as background color.



Step 2

Call the current layer AS3. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 3

Select the first frame of layer AS3 and go to the AS3 panel (F9). Then, enter this code inside the actions panel:

//Lines 1 through 9 create a sprite, drawing vector assets, and positioning and adding the sprite to the display list.

var sp:Sprite = new Sprite();
with (sp.graphics) {
lineStyle(2, 0x1e587c, 1, true);
beginFill(0x3cc1f9, .5);
drawRoundRect(0, 0, 100, 50, 15);
endFill();
}
sp.x = sp.y = 20;
addChild(sp);

//Lines 11 and 12 create a rectangle and sets the scale9Grid property to the specified rectangle.

var slice9rect:Rectangle = new Rectangle(15, 15, 70, 20);
sp.scale9Grid = slice9rect;

//Remaining script settingthe width and height of the sprite to the mouse coordinates, minus any offset x and y values from the sprite location.

addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
function onLoop(evt:Event):void {
sp.width = Math.max(mouseX - sp.x, 20);
sp.height = Math.max(mouseY - sp.y, 20);
}

We're done!

Test your Movie (Ctrl+Enter) and enjoy!

Download example