{"id":194,"date":"2009-02-18T00:00:04","date_gmt":"2009-02-18T07:00:04","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=803"},"modified":"2009-02-18T00:00:04","modified_gmt":"2009-02-18T07:00:04","slug":"dial-ui-record-scratch-etc","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=194","title":{"rendered":"Dial UI, Record Scratch etc&#8230;"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar angOffset:Number = 0;\r\nvar percent:Number  = 0;\r\n\r\nvar dial:Sprite = Sprite(addChild(new Sprite()));\r\nwith(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0);\r\ndial.x = stage.stageWidth \/ 2;\r\ndial.y = stage.stageHeight \/ 2;\r\n\r\ndial.addEventListener(MouseEvent.MOUSE_DOWN, onDialDown);\r\nstage.addEventListener(MouseEvent.MOUSE_UP, onStageUp);\r\nfunction onDialDown(evt:MouseEvent):void {\r\n\tcalcOffset();\r\n\tdial.addEventListener(Event.ENTER_FRAME, onRotateDial);\r\n}\r\n\r\nfunction calcOffset():void {\r\n\tangOffset = Math.atan2(mouseY - dial.y, mouseX - dial.x) \/ Math.PI * 180 - dial.rotation;\r\n}\r\n\r\nfunction onRotateDial(evt:Event):void {\r\n\tdial.rotation =  Math.atan2(mouseY - dial.y, mouseX - dial.x) \/ Math.PI * 180 - angOffset;\r\n\tpercent = dial.rotation;\r\n\tif (percent &lt; 0){\r\n\t\tpercent += 360;\r\n\t}\r\n\tpercent \/= 360;\r\n\t\/\/ range 0 - 1\r\n\ttrace(percent);\r\n}\r\n\r\nfunction onStageUp(evt:Event):void {\r\n\tdial.removeEventListener(Event.ENTER_FRAME, onRotateDial);\r\n}\r\n<\/pre>\n<p>The above shows the meat of what you need to create some  kind of dial UI&#8230; this would also work well if you need to create an interactive turntable (record scratching etc&#8230;).<\/p>\n<p>Everytime I needed to create dials for UI, the client wanted left -> right mouse motion rather than a circular&#8230; like what you see in <a href=\"http:\/\/www.propellerheads.se\/products\/reason\/\" target=\"blank\">Reason.<\/a> Someone recently asked me how to do a circular motion style dial and this is the technique I came up with.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>var angOffset:Number = 0; var percent:Number = 0; var dial:Sprite = Sprite(addChild(new Sprite())); with(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0); dial.x = stage.stageWidth \/ 2; dial.y = stage.stageHeight \/ 2; dial.addEventListener(MouseEvent.MOUSE_DOWN, onDialDown); stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp); function onDialDown(evt:MouseEvent):void { calcOffset(); dial.addEventListener(Event.ENTER_FRAME, onRotateDial); } function calcOffset():void { angOffset = Math.atan2(mouseY &#8211; dial.y, mouseX &#8211; dial.x) \/ Math.PI * 180 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[98],"tags":[3,4],"class_list":["post-194","post","type-post","status-publish","format-standard","hentry","category-ui","tag-actionscript","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=194"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/194\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}