{"id":176,"date":"2008-01-02T18:35:31","date_gmt":"2008-01-02T23:35:31","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2008\/01\/02\/flash-rotation-bug\/"},"modified":"2009-08-14T16:33:37","modified_gmt":"2009-08-14T21:33:37","slug":"flash-rotation-bug","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/01\/02\/flash-rotation-bug\/","title":{"rendered":"Flash Rotation Bug (with Fix)"},"content":{"rendered":"<p>I recently ran into a nasty &#8220;little&#8221; bug in Flash that happened to eat up a &#8220;big&#8221; chunk of my time.  I&#8217;m surprised I haven&#8217;t heard more about this particular bug since the conditions which cause it would seem fairly common.<\/p>\n<p>Let&#8217;s say you&#8217;re using an onEnterFrame event to count frames as they pass with code like this:<\/p>\n<div class=\"codecolorer-container actionscript default\" style=\"overflow:auto;white-space:nowrap;width:100%;\"><div class=\"actionscript codecolorer\"><span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"kw2\">var<\/span> count = <span class=\"nu0\">0<\/span>;<br \/>\n<span class=\"kw3\">onEnterFrame<\/span> = <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; count++;<br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><\/div><\/div>\n<p>Now let&#8217;s suppose we want to rotate an arrow 1 degree every time a frame passes.  We could write code like the following:<!--more--><\/p>\n<div class=\"codecolorer-container actionscript default\" style=\"overflow:auto;white-space:nowrap;width:100%;\"><div class=\"actionscript codecolorer\"><span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"kw2\">var<\/span> count = <span class=\"nu0\">0<\/span>;<br \/>\n<span class=\"kw3\">onEnterFrame<\/span> = <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; count++;<br \/>\n&nbsp; &nbsp; Arrow.<span class=\"kw3\">_rotation<\/span> = count;<br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><\/div><\/div>\n<p>That code works fine up to a point but for some reason, after 91 full rotations Flash no longer correctly positions the arrow.  Flash reports the correct angle of rotation but <strong>the arrow will be placed 16 degrees behind where Flash ~claims~ it to be<\/strong>!<\/p>\n<p>To better isolate the exact moment where things go wrong I have changed the onEnterFrame event to an onMouseDown event and set the counter to start at 91 full rotations (91 X 360 = 32,760).  Click the SWF file below 9 times to see the error reproduced at 32,768 and press any key to reset.<\/p>\n\n<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\n\t\t\tid=\"fm_rotationbug_01_470940521\"\n\t\t\tclass=\"flashmovie\"\n\t\t\twidth=\"500\"\n\t\t\theight=\"100\">\n\t<param name=\"movie\" value=\"\/blog\/wp-content\/uploads\/2008\/01\/rotationbug_01.swf\" \/>\n\t<!--[if !IE]>-->\n\t<object\ttype=\"application\/x-shockwave-flash\"\n\t\t\tdata=\"\/blog\/wp-content\/uploads\/2008\/01\/rotationbug_01.swf\"\n\t\t\tname=\"fm_rotationbug_01_470940521\"\n\t\t\twidth=\"500\"\n\t\t\theight=\"100\">\n\t<!--<![endif]-->\n\t\t\n\t<!--[if !IE]>-->\n\t<\/object>\n\t<!--<![endif]-->\n<\/object>\n<p>Once the arrow reaches 32,768 degrees of rotation, the arrow graphic jumps back from 8 degrees to -8 degrees even though it's rotation is correctly reported as 8 degrees.  From this point on, the arrow graphic will always be 16 degrees behind where it is supposed to be.<\/p>\n<p>If you continue the process the errors accumulate and the arrow gets further and further out of sync.  In the following file I add 361 to count (rather than 1) to accelerate the process.<\/p>\n\n<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\n\t\t\tid=\"fm_rotationbug_02_92853080\"\n\t\t\tclass=\"flashmovie\"\n\t\t\twidth=\"500\"\n\t\t\theight=\"500\">\n\t<param name=\"movie\" value=\"\/blog\/wp-content\/uploads\/2008\/01\/rotationbug_02.swf\" \/>\n\t<!--[if !IE]>-->\n\t<object\ttype=\"application\/x-shockwave-flash\"\n\t\t\tdata=\"\/blog\/wp-content\/uploads\/2008\/01\/rotationbug_02.swf\"\n\t\t\tname=\"fm_rotationbug_02_92853080\"\n\t\t\twidth=\"500\"\n\t\t\theight=\"500\">\n\t<!--<![endif]-->\n\t\t\n\t<!--[if !IE]>-->\n\t<\/object>\n\t<!--<![endif]-->\n<\/object>\n<p>As you can see, even though I'm setting the green arrow to match the black arrow's rotation, the two definitely do <strong>not<\/strong> coincide.  Of the two, the green arrow is the one that is properly positioned.<\/p>\n<p>You can reproduce this bug with code similar to the following:<\/p>\n<div class=\"codecolorer-container actionscript default\" style=\"overflow:auto;white-space:nowrap;width:100%;\"><div class=\"actionscript codecolorer\"><span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"kw2\">var<\/span> count = <span class=\"nu0\">0<\/span>;<br \/>\n<span class=\"kw3\">onEnterFrame<\/span> = <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; count += <span class=\"nu0\">361<\/span>;<br \/>\n&nbsp; &nbsp; BlackArrow.<span class=\"kw3\">_rotation<\/span> = count;<br \/>\n&nbsp; &nbsp; GreenArrow.<span class=\"kw3\">_rotation<\/span> = BlackArrow.<span class=\"kw3\">_rotation<\/span>;<br \/>\n&nbsp; &nbsp; Display.<span class=\"kw3\">text<\/span> = <span class=\"st0\">&quot;Count = &quot;<\/span>+count;<br \/>\n&nbsp; &nbsp; Display.<span class=\"kw3\">text<\/span> += <span class=\"st0\">&quot;<span class=\"es0\">\\n<\/span>Arrow._rotation = &quot;<\/span>+Arrow.<span class=\"kw3\">_rotation<\/span>;<br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><\/div><\/div>\n<p><strong>WorkAround Solution:<\/strong> Fortunately there's a simple fix for this Flash bug.  Rather than letting Flash convert 32,768 degrees of rotation to 8 degrees, do it yourself and make sure it gets done right.  Use the modulo operator to guarantee that the arrow is really where Flash tells you it is by setting the black arrow's rotation with code like this:<\/p>\n<div class=\"codecolorer-container actionscript default\" style=\"overflow:auto;white-space:nowrap;width:100%;\"><div class=\"actionscript codecolorer\"><span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\nBlackArrow.<span class=\"kw3\">_rotation<\/span> = count <span class=\"sy0\">%<\/span>360;<br \/>\n<span class=\"co1\">\/\/<\/span><br \/>\n<span class=\"co1\">\/\/<\/span><\/div><\/div>\n<p>I hope this tip saves you some time and frustration.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Documents a Flash ActionScript bug which occurs when an object is rotated more than 32,768 degrees.  A suitable workaround is also provided.<\/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,49],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-bug"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/176","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=176"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/176\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}