{"id":183,"date":"2009-02-10T00:00:17","date_gmt":"2009-02-10T07:00:17","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=747"},"modified":"2009-02-10T00:00:17","modified_gmt":"2009-02-10T07:00:17","slug":"the-big-init-nesting-displayobjects","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=183","title":{"rendered":"The Big init() (nesting DisplayObjects)"},"content":{"rendered":"
\r\nfunction nest(top:DisplayObjectContainer, structure:Array):void{\r\n       var p:DisplayObjectContainer;\r\n\t   var key:String;\r\n       for (var i:int = 0; i<structure.length; i++){\r\n               if (structure[i] is DisplayObjectContainer){\r\n                    p = structure[i];\r\n\t\t\t\t\tif (!p.parent){\r\n                      top.addChild(p);\r\n\t\t\t\t\t}\r\n                    i++;\r\n                    if (structure[i] is Array){\r\n                               var child:DisplayObject;\r\n                               for (var j:int= 0; j<structure[i].length;  j++){\r\n                                       var val:* = structure[i][j];\r\n                                       if (val is DisplayObject){\r\n                                               child = val;\r\n                                               p.addChild(child);\r\n                                       }else{\r\n\t\t\t\t\t\t\t\t\t\t\t   for (key in val){\r\n\t\t\t\t\t\t\t\t\t\t\t\t  child[key] = val[key];   \r\n\t\t\t\t\t\t\t\t\t\t\t   }\r\n                                       }\r\n                               }\r\n                       }else{\r\n                               trace("error, expecting Array");\r\n\t\t\t\t\t\t\t   break;\r\n                       }\r\n               }else{\r\n                trace("error, expecting DisplayObjectContainer (Sprite or MovieClip)");\r\n\t\t\t\t\t   break;\r\n               }\r\n       }\r\n}\r\n\r\n\/\/ create some filler graphics\r\nvar window:Sprite = createWindow();\r\nwindow.x = 10;\r\nwindow.y = 10;\r\n\r\nvar c0:Sprite = createCircle();\r\nvar c1:Sprite = createCircle();\r\nvar c2:Sprite = createCircle();\r\nvar c3:Sprite = createCircle();\r\nvar c4:Sprite = createCircle(0xEFEFEF);\r\n\r\nvar box:Sprite = createBox(60, 50);\r\n\r\n\r\nvar txt:TextField = new TextField();\r\ntxt.text = "HI THERE";\r\n\r\n\/\/ test out the function....\r\nnest(this, [window, [ c0, {x:100, y:100, scaleX:.5, scaleY:.5},\r\n                                    c1, {x:120, y:100, scaleX:.6, scaleY:.6},\r\n                                    c2, {x:140, y:100, scaleX:.7, scaleY:.7},\r\n                                    c3, {x:160, y:100, scaleX:.8, scaleY:.8},\r\n\t\t\t\t\t\t\t\t    box, {x:10, y:10} ],\r\n\t                    box, [ txt, c4,{x :30, y:30} ] ]); \r\n\r\n\r\n\/\/ just some quick functions to create filler graphics\r\n\r\nfunction createBox(w:Number, h:Number):Sprite{\r\n\tvar s:Sprite = new Sprite();\r\n\twith(s.graphics) beginFill(0x666666), drawRect(0,0, w, h);\r\n\treturn s;\r\n}\r\nfunction createWindow():Sprite{\r\n       var s:Sprite = new Sprite();\r\n       with(s.graphics) beginFill(0xCCCCCC), drawRect(0,0,300,300);\r\n       return s;\r\n}\r\nfunction createCircle(col:uint = 0xFF0000):Sprite{\r\n       var s:Sprite = new Sprite();\r\n       with(s.graphics) beginFill(col), drawCircle(0,0,10);\r\n       return s;\r\n}\r\n<\/pre>\n
The above uses a function called nest(). nest() is sort of like a superAddChild() function… it is meant to do the same thing as addChild, but with any number of parents and children. <\/p>\n
I’m actually not very happy with this function, it was fun to write… but the 2D-Array\/Object format is kind of odd looking (see line 53). So for at least the next day or two I’m going to try and think of the best format for a function that could do any number of addChild() calls with any number of children or parents. I realized that I also want to be able to set the properties of any of the children… so one solution might be an xml argument… something like:<\/p>\n
\r\n<window>\r\n  <c0 x="100" y="100" \/>\r\n  <c1 x="200" y="100" \/>\r\n  <c2 x="300" y="100" \/>\r\n  <box x="400" y="100" alpha=".5">\r\n     <c3 x="10" y="10" \/>\r\n  <\/box>\r\n<\/window>\r\n<\/pre>\n
That’s easy enough to do…  it would be nice to think of something more minimalistic, but I think XML is much easier to read than JSON style Object syntax…<\/p>\n
It’s actually interesting to try and think of minimalistic ways to represent tree structures… check out this failed attempt:<\/p>\n
\r\np(window);\r\n__(c0, {x:100, y:100});\r\n__(c1, {x:100, y:100});\r\n__(c2, {x:100, y:100});\r\n\r\np(__(box, {x:100, y:100}));\r\n__(txt, c4, {x:30, y:30});\r\n<\/pre>\n
After writing the above… a few hours later I thought of this:<\/p>\n
\r\npropOrder("x", "y", "scaleX", "scaleY", "alpha");\r\n\r\nbigInit(this, [window, [info, 10, 10,\r\n                        about, 20, 10,\r\n                        contact, 30, 10,\r\n                        box, 40, 10, 2, 2, .5],\r\n                  box, [txt0, 10, 10 * off(),\r\n                        txt1, 10, 10 * off(),\r\n                        txt2, 10, 10 * off(),\r\n                        txt3, 10, 10 * off()],\r\n                  border]);\r\n<\/pre>\n
I think that’s pretty close to what I was imagining in terms of simplicity.. the off() function would return an incremental offset… so call it once and it’s 0, call it again and it’s 1 etc… still not completely happy with this, but it’s getting there…<\/p>\n
Any additional thoughts on this topic will be in tomorrows post I think.<\/p>\n","protected":false},"excerpt":{"rendered":"
function nest(top:DisplayObjectContainer, structure:Array):void{ var p:DisplayObjectContainer; var key:String; for (var i:int = 0; i<structure.length; i++){ if (structure[i] is DisplayObjectContainer){ p = structure[i]; if (!p.parent){ top.addChild(p); } i++; if (structure[i] is Array){ var child:DisplayObject; for (var j:int= 0; j<structure[i].length; j++){ var val:* = structure[i][j]; if (val is DisplayObject){ child = val; p.addChild(child); }else{ for (key in val){ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94],"tags":[3,4],"class_list":["post-183","post","type-post","status-publish","format-standard","hentry","category-misc","tag-actionscript","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/183","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=183"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/183\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}