{"id":376,"date":"2008-08-01T11:02:35","date_gmt":"2008-08-01T16:02:35","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=376"},"modified":"2009-08-15T11:49:35","modified_gmt":"2009-08-15T16:49:35","slug":"oval-tutorial","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/08\/01\/oval-tutorial\/","title":{"rendered":"How to Draw an Oval"},"content":{"rendered":"

\"\"<\/p>\n

Drawing an oval or ellipse is about as easy as drawing a circle with ActionScript<\/a>. When drawing a circle you only need one measurement for the circle’s radius but when drawing an oval you need to provide 2. One for the Width of the oval and one for its Height. But before I get too far ahead, let’s take a look at the basic circle drawing code used to draw a simple circle:<\/p>\n

\/\/<\/span>
\nfunction<\/span> drawCircle(<\/span>centerX, centerY, radius, sides)<\/span>{<\/span>
\n    this<\/span>.moveTo<\/span>(<\/span>centerX + radius,  centerY)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n        var<\/span> pointRatio = i\/<\/span>sides;
\n        var<\/span> radians = pointRatio *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n        var<\/span> xSteps = Math<\/span>.cos<\/span>(<\/span>radians)<\/span>;
\n        var<\/span> ySteps = Math<\/span>.sin<\/span>(<\/span>radians)<\/span>;
\n        var<\/span> pointX = centerX + xSteps *<\/span> radius;
\n        var<\/span> pointY = centerY + ySteps *<\/span> radius;
\n        this<\/span>.lineTo<\/span>(<\/span>pointX, pointY)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
\n\/\/<\/span>
\ndrawCircle(<\/span>250<\/span>, 250<\/span>, 200<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

The above code should be fairly familiar to you. If it’s not, please read the Basic Circle Drawing Tutorial<\/a> and then come back to this one.<\/p>\n

Changing the circle code to draw an oval is super simple, just provide an X radius and a Y radius then modify our “pointX” and “pointY” vars to use the new values. Take a look:<\/p>\n

\/\/<\/span>
\n\/\/ Change "radius" to "xRadius" and add "yRadius" argument.<\/span>
\nfunction<\/span> drawOval(<\/span>centerX, centerY, xRadius, yRadius, sides)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Change "radius" to "xRadius".<\/span>
\n    this<\/span>.moveTo<\/span>(<\/span>centerX + xRadius,  centerY)<\/span>;
\n    \/\/<\/span>
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n        var<\/span> pointRatio = i\/<\/span>sides;
\n        var<\/span> radians = pointRatio *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n        var<\/span> xSteps = Math<\/span>.cos<\/span>(<\/span>radians)<\/span>;
\n        var<\/span> ySteps = Math<\/span>.sin<\/span>(<\/span>radians)<\/span>;
\n        \/\/<\/span>
\n        \/\/ Change "radius" to "xRadius".<\/span>
\n        var<\/span> pointX = centerX + xSteps *<\/span> xRadius;
\n        \/\/<\/span>
\n        \/\/ Change "radius" to "yRadius".<\/span>
\n        var<\/span> pointY = centerY + ySteps *<\/span> yRadius;
\n        \/\/<\/span>
\n        this<\/span>.lineTo<\/span>(<\/span>pointX, pointY)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/         X,   Y,   W,   H, steps.<\/span>
\ndrawOval(<\/span>250<\/span>, 200<\/span>, 200<\/span>, 150<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

The preceding code creates the following SWF:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

And that's all there is to it. Getting from circles to ovals is as easy as... PI. \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"

This Flash ActionScript tutorial builds upon concepts found in my previous Basic Circle Drawing Tutorial<\/a> so you can draw an oval.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,45,37],"class_list":["post-376","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-draw","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}