{"id":837,"date":"2008-09-13T08:00:35","date_gmt":"2008-09-13T12:00:35","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=837"},"modified":"2022-05-29T08:23:34","modified_gmt":"2022-05-29T12:23:34","slug":"tutorial-how-to-draw-simple-shapes-in-as3","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-how-to-draw-simple-shapes-in-as3\/","title":{"rendered":"Tutorial: How to Draw Simple Shapes in AS3"},"content":{"rendered":"<p>Hey guys, today we&#8217;re going to learn something fun and exciting! That is, drawing shapes in ActionScript 3.0. I&#8217;ve actually covered a little bit of this in my platform tutorial, but I want to make it the focus of this tutorial. So, let&#8217;s get started shall we?<\/p>\n<p>First of all, we&#8217;re going to create a new flash file. Then, we&#8217;ll name &#8220;Layer 1&#8221; to &#8220;actions&#8221; because that will be the only layer that we&#8217;ll need to use today.<\/p>\n<h3>Drawing Circles<\/h3>\n<p>In order to draw a circle, we have to place the following code into the first frame:<\/p>\n<pre lang=\"actionscript\">\r\n\/\/defining a new variable that will be the circle\r\nvar newCircle:Shape = new Shape();\r\n\/\/now we begin adding a fill to the variable\r\n\/\/this will make the circle red\r\nnewCircle.graphics.beginFill(0xFF0000);\r\n\/\/now we call a function that will draw the circle\r\n\/\/the first value (100) is the x value\r\n\/\/the second value (100) is the y value\r\n\/\/and the third value(50), is the radius\r\n\/\/the x and y values count for the center of the circle,\r\n\/\/now the left corner like you'd usually see\r\nnewCircle.graphics.drawCircle(100,100,50);\r\n\/\/this function just tells actionscript that we're done\r\n\/\/using this red fill\r\nnewCircle.graphics.endFill();\r\n\/\/adding the circle to the stage\r\naddChild(newCircle);\r\n<\/pre>\n<p>I really commented out this one so hopefully you can understand what this code does. This will just draw a red circle that is 50 pixels in radius, 50 pixels from left and top of the stage. Without the comments, it only takes 5 lines, so it isn&#8217;t too complicated.<\/p>\n<h4>End Product<\/h4>\n<p> (I made the stage a bit smaller)<br \/>\n<center><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"200\" height=\"200\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"src\" value=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/shapes-as3\/circle.swf\" \/><embed type=\"application\/x-shockwave-flash\" width=\"200\" height=\"200\" src=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/shapes-as3\/circle.swf\"><\/embed><\/object><\/center><\/p>\n<h3>Drawing Rectangles\/Squares<\/h3>\n<p>Drawing a rectangle or square is very similar to the circle, except with a different function called. Here&#8217;s the commented code for doing so:<\/p>\n<pre lang=\"actionscript\">\r\nvar newRect:Shape = new Shape();\r\nnewRect.graphics.beginFill(0xFF0000);\r\n\/\/now we call a function that will draw the square\r\n\/\/the first value (50) is the x value\r\n\/\/the second value (50) is the y value\r\n\/\/the third value (100), is the width\r\n\/\/and the final value (100), is the height\r\nnewRect.graphics.drawRect(50,50,100,100);\r\nnewRect.graphics.endFill();\r\naddChild(newRect);\r\n<\/pre>\n<p>I just commented the new stuff that was added in.<\/p>\n<h4>The End Product<\/h4>\n<p><center><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"200\" height=\"200\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"src\" value=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/shapes-as3\/rect.swf\" \/><embed type=\"application\/x-shockwave-flash\" width=\"200\" height=\"200\" src=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/shapes-as3\/rect.swf\"><\/embed><\/object><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey guys, today we&#8217;re going to learn something fun and exciting! That is, drawing shapes in ActionScript 3.0. I&#8217;ve actually covered a little bit of this in my platform tutorial, but I want to make it the focus of this tutorial. So, let&#8217;s get started shall we? First of all, we&#8217;re going to create a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,8,65,4],"tags":[25,8,201,202,200],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/837"}],"collection":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=837"}],"version-history":[{"count":4,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/837\/revisions"}],"predecessor-version":[{"id":841,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/837\/revisions\/841"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=837"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}