Title
Description
Body <p>I wasn't quite sure how to go about drawing a rounded corner rectangle, but a quick search revealed a number of ways to do this. One method involves developing a movie clip method called <a href="http://e-articles.info/e/a/title/How-to-draw-a-rectangle-with-rounded-corners/">drawRectangle</a>, detailing the calculations necessary to draw the circle programatically with ActionScript. <a href="http://www.flasherdot.org/T/03_SquaresRoundedRectangles_AS3.htm">Another method</a> involves using the <code>flash.display.Shape</code> classes available with Flash CS3 and with the Flex 3 SDK. Another example can be found in the <a href="http://books.google.com/books?id=Qlia0Bq-ZmoC&pg=PA188&lpg=PA188&dq=actionscript+3+draw+rounded+corner+rectangle&source=web&ots=RY516f2y4m&sig=w-ZOSpdqGt1y3Ze0ZxUDsRW6-Ac&hl=en&sa=X&oi=book_result&resnum=7&ct=result#PPA188,M1">ActionScript 3.0 Cookbook</a>. For more in-depth information about the classes, consult the <a href="http://livedocs.adobe.com/flex/3/langref/flash/display/Graphics.html">Adobe Flex 3 Language Reference</a></p> <h3>Rounded Corner Rectangle</h3> <p>So the easy part is creating the rounded corner rectangle.</p> <pre>package { import flash.display.*; public class RoundedRectangle extends Sprite { public function RoundedRectangle () { var rect:Sprite = new Sprite(); var rectX:Number = 20; var rectY:Number = 20; var rectW:Number = 360; var rectH:Number = 240; var cornerDiameter:Number = 24; var rectEllipseW:Number = 120; var rectEllipseH:Number = 240; var fillColor:uint = 0xFFFFFF; var alpha:Number = 1; rect.graphics.beginFill(fillColor, alpha); rect.graphics.drawRoundRect(rectX, rectY, rectW, rectH, cornerDiameter); rect.graphics.endFill(); addChild(rect); } } }</pre> <p>I used variables to clarify the required parameters. To simplify this code, remove the variables and use literal values for the class method parameters.</p> <pre>package { import flash.display.*; public class RoundedRectangle extends Sprite { public function RoundedRectangle () { var rect:Sprite = new Sprite(); rect.graphics.beginFill(0xFFFFFF, 1); rect.graphics.drawRoundRect(20, 20, 360, 240, 24); rect.graphics.endFill(); addChild(rect); } } }</pre> <h3>Gradient Fill</h3> <p>Gradient fills are little more complex because they require some knowledge of the transformation matrix. Luka Maras offers an in-depth tutorial on <a href="http://www.lukamaras.com/tutorials/actionscript/creating-gradient-fills-with-actionscript.html">creating gradient fills</a>. However, the method used in the Adobe Flex 3 Language Reference uses the <code>matrix.createGradiantBox</code> method, which has this signature:</p> <pre>public function createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void</pre> <p>So the code for a rounded rectangle with a gradient fill from grey to white at 90 degrees goes something like this:</p> <pre>package { import flash.display.*; import flash.events.*; import flash.geom.* public class RoundRectGradFill extends Sprite { public function RoundRectGradFill () { var viewImage:Sprite = new Sprite(); var fillType:String = GradientType.LINEAR; var colors:Array = [0xFFFFFF, 0x999999]; var alphas:Array = [1, 1]; var ratios:Array = [0, 255]; var matrix:Matrix = new Matrix(); var gradWidth:Number = 360; var gradHeight:Number = 240; var gradRotation:Number = 90 / 180 * Math.PI; // rotation expressed in radians var gradOffsetX:Number = 0; var gradOffsetY:Number = 0; matrix.createGradientBox(gradWidth, gradHeight, gradRotation, gradOffsetX, gradOffsetY); var spreadMethod:String = SpreadMethod.PAD; viewImage.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod); viewImage.graphics.drawRoundRect(0, 0, 360, 240, 36); viewImage.graphics.endFill(); addChild(viewImage); } } }</pre>
Section Tutorials Contact Journal About Home
Category Applications Design History Ideas Technology
Tags
Date
DesignProjectX | The digital sandbox of Stephen Bau