{"id":129,"date":"2008-12-20T00:00:54","date_gmt":"2008-12-20T07:00:54","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=364"},"modified":"2008-12-20T00:00:54","modified_gmt":"2008-12-20T07:00:54","slug":"procedural-pattern-navigation","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=129","title":{"rendered":"Procedural Pattern &#8211; Navigation"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar currentBtn:MovieClip;\r\n\r\nvar nav:Sprite = new Sprite();\r\nnav.x = nav.y = 20;\r\naddChild(nav);\r\n\r\ncreateBtns();\r\n\r\nnav.addEventListener(MouseEvent.CLICK, onClickBtn);\r\n\r\nfunction createBtns():void{\r\n\tfor (var i:int = 0; i&lt;10; i++){\r\n\t\tvar btn:MovieClip = new MovieClip();\r\n\t\twith(btn.graphics) beginFill(0x666666), drawRect(-10,-10,20,20);\r\n\t\tbtn.x = i * (btn.width + 10);\r\n\t\tbtn.buttonMode = true;\r\n\t\tbtn.num = i;\r\n\t\tbtn.alpha = .5;\r\n\t\tnav.addChild(btn);\r\n\t}\r\n}\r\n\r\nfunction onClickBtn(evt:MouseEvent):void {\r\n\t\/\/\r\n\t\/\/ this is the important part\r\n\t\/\/\r\n\tif (currentBtn){\r\n\t\tcurrentBtn.scaleX = currentBtn.scaleY = 1;\r\n\t\tcurrentBtn.alpha = .5;\r\n\t}\r\n\tcurrentBtn = MovieClip(evt.target);\r\n\tcurrentBtn.scaleX = currentBtn.scaleY = 1.3;\r\n\tcurrentBtn.alpha = 1;\r\n\ttrace(&quot;current button:&quot;, currentBtn.num);\r\n\t\/\/\r\n}\r\n<\/pre>\n<p>This code will create 10 boxes that represent buttons on a navigation. When you click a box it indicates that it is selected by scaling up and changing alpha. Simple enough&#8230; <\/p>\n<p>The term Procedural Pattern is just a spin on the idea of Design Patterns. I&#8217;ve come up with lots of small patterns to solve simple recurring problems over the years. Most of these relate to things like drawing programs, ecards and games.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>var currentBtn:MovieClip; var nav:Sprite = new Sprite(); nav.x = nav.y = 20; addChild(nav); createBtns(); nav.addEventListener(MouseEvent.CLICK, onClickBtn); function createBtns():void{ for (var i:int = 0; i&lt;10; i++){ var btn:MovieClip = new MovieClip(); with(btn.graphics) beginFill(0x666666), drawRect(-10,-10,20,20); btn.x = i * (btn.width + 10); btn.buttonMode = true; btn.num = i; btn.alpha = .5; nav.addChild(btn); } } function onClickBtn(evt:MouseEvent):void { [&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":[99,4,100],"class_list":["post-129","post","type-post","status-publish","format-standard","hentry","category-ui","tag-actionsnippet","tag-flash","tag-navigation"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/129","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=129"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/129\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}