{"id":426,"date":"2008-08-06T09:00:01","date_gmt":"2008-08-06T08:00:01","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=426"},"modified":"2012-06-22T23:30:58","modified_gmt":"2012-06-22T22:30:58","slug":"shape-2-array-jsfl","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2008\/08\/06\/shape-2-array-jsfl\/","title":{"rendered":"Shape 2 Array jsfl"},"content":{"rendered":"

For a project of mine: Custmm Grumm<\/a> I needed to change a shape into an array, you could say that I needed to change a Illustrator\/vector file into code.<\/p>\n

As far as I know there is no other method then the one I created here with jsfl.<\/p>\n

To make this happen I imported the .AI file (Illustrator) to the stage.
\n\"Flash<\/a><\/p>\n

This JSFL files has some restrictions, you can read it in the comments:<\/p>\n

\nthis script only works under certain conditions:
\n– everything that is selected must be shapes, if not, this doesn’t work (select all and ctrl+b (break))
\n– every shape has to be in a different layer, otherwise the script see it as one shape\n<\/p><\/blockquote>\n

The result of this jsfl is not always what you expect…
\nsometimes geometric shapes like squares\/rectangles\/triangles are all f#$%ed-up (it looks like curves are made to opposite corners)
\nI have no solution for that in this jsfl (in the code), it seems that Flash ‘reads’ the shape wrong (or in the wrong order)…
\nBut you could try: \t<\/p>\n
    \n
  • I used the straighten tool which worked in one case, but not in the other <\/li>\n
  • rotated a square 90 degrees <\/li>\n
  • both solutions<\/li>\n<\/ul>\n<\/div>\n

    I’m not making an install file, so if you want to try this script you need to copy it in the correct directory (I’m sorry for the OsX users: I have no idea, but if you do, place a comment)
    \nWindows (on my computer): <\/strong> C:\\Documents and Settings\\[here you name]<\/strong>\\Local Settings\\Application Data\\Adobe\\Flash CS3\\en\\Configuration\\Commands<\/p>\n

    here is the JSFL (if you need to give it a name; I have a suggestion: “[mck] shape2array 2.jsfl”)<\/p>\n

    \r\n\/**\r\n*\r\n* this script only works under certain conditions:\r\n*\t\t- everything that is selected must be shapes, if not, this doesn't work (select all and ctrl+b (break))\r\n* \t\t- every shape has to be in a different layer, otherwise the script see it as one shape \r\n*\r\n* The result of this jsfl is not always what you expect...\r\n* \t\tsometimes geometric shapes like squares\/rectangles\/triangles are all f#$%ed-up (it looks like curves are made to opposite corners)\r\n* \t\tI have no solution for that in this jsfl (in the code), it seems that Flash 'reads' the shape wrong (or in the wrong order)... \r\n*\t\tBut you could try: \t- I used the straighten tool which worked in one case, but not in the other \r\n*\t\t\t\t\t\t- rotated a square 90 degrees \r\n*\t\t\t\t\t\t- both solutions \r\n*\r\n*\r\n* \r\n* based upon \t\thttp:\/\/ericlin2.tripod.com\/bugwire\/bugwiret.html\r\n* and\t\t\thttp:\/\/livedocs.adobe.com\/flash\/9.0\/main\/wwhelp\/wwhimpl\/common\/html\/wwhelp.htm?context=LiveDocs_Parts&file=00003869.html\r\n*\r\n* <pre>\r\n*  ____                   _      ____\r\n* |  __| _ __ ___    ___ | | __ |__  |\r\n* | |   | '_ ` _ \\  \/ __|| |\/ \/    | |\r\n* | |   | | | | | || (__ |   <     | |\r\n* | |__ |_| |_| |_| \\___||_|\\_\\  __| |\r\n* |____|                        |____|\r\n*\r\n* <\/pre>\r\n*\r\n*\r\n* @author\t\t\tMatthijs C. Kamstra [mck]\r\n* @version\t\t1.1\r\n* @since\t\t\t10:00 5-5-2008\r\n*\r\n* Changelog:\r\n* \t\tv1.1 [2008-05-09] - test movie after use of this jsfl\r\n* \t\tv1.0 [2008-05-05] - Initial release\r\n*\r\n*\r\n*\/\r\nvar currentVersion = '1.1';\r\n\r\nfl.trace ('[mck] shape2Array :: version ' + currentVersion);\r\n\r\n\/\/ with a shape selected\r\nvar ptArray = [];\r\nvar doneEdge = [];\r\nvar exportString = 'var shapeArrayz:Array = new Array ();\\n';\r\nvar selectionNumber = 0;\r\n\r\n\/\/ fl.trace("\/\/ start ---------------------------");\r\nfunction isDrawn(id) {\r\n\tfor (var k = 0; k<doneEdge.length; k++) {\r\n\t\tif (doneEdge[k] == id) {\r\n\t\t\treturn true;\r\n\t\t}\r\n\t}\r\n\treturn false;\r\n}\r\n\r\n\r\nsel = fl.getDocumentDOM().selection;\r\nfor (var n = 0; n < sel.length; n++) {\r\n\r\n\texportString += 'shapeArrayz['+n+'] = [';\r\n\tselectionNumber = sel.length;\r\n\t\r\n\tvar elt = sel[n];\r\n\tif (elt.elementType != 'shape') {\r\n\t\tcontinue;\r\n\t}\r\n\telt.beginEdit();\r\n\tfor (i=0; i<elt.contours.length; i++) {\r\n\t\tvar cont = elt.contours[i];\r\n\t\tvar he = cont.getHalfEdge();\r\n\t\tvar startId = he.id;\r\n\t\tvar id = 0;\r\n\t\twhile (id != startId) {\r\n\t\t\tvar ed = he.getEdge();\r\n\t\t\tif (!isDrawn(ed.id)) {\r\n\t\t\t\tdoneEdge.push(ed.id);\r\n\t\t\t\tfor (var j = 0; j<3; j++) {\r\n\t\t\t\t\tvar pt = ed.getControl(j);\r\n\t\t\t\t\tptArray.push(pt.x, pt.y , j);\r\n\t\t\t\t\texportString += '[' + pt.x + ',' + pt.y + ',' + j + '] , ';\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\the = he.getNext();\r\n\t\t\tid = he.id;\r\n\t\t}\r\n\t}\r\n\telt.endEdit();\r\n\texportString += '];\\n';\r\n}\r\n\/\/ fl.trace(ptArray);\r\n\/\/ fl.trace("\/\/ end ---------------------------");\r\n\r\n\r\n\/\/ I'm a lazy bastard, so paste the code in the as layer\r\n\/\/ create or place code in 'as' layer\r\nvar tl = fl.getDocumentDOM().getTimeline();\r\nif (tl.findLayerIndex("as") == undefined){\r\n\ttl.addNewLayer('as', 'normal' , true); \r\n} else {\r\n\ttl.currentLayer = tl.findLayerIndex("as")[0];\r\n}\r\ntl.layers[tl.currentLayer].frames[0].actionScript = exportString.split('] , ];').join(']];') + "\\n";\r\n\r\n\/\/ The following example tests the movie for the current document:\r\nfl.getDocumentDOM().testMovie(); \/\/ if you don't want to export to swf after the jsfl is ready, comment this line\r\n\r\n\r\n\/\/ end jsfl\r\n<\/pre>\n
    It will create a layer named ‘as’ where the array will be placed that will look something like this:<\/p>\n
    \r\nvar shapeArrayz:Array = new Array ();\r\nshapeArrayz[0] = [[20.05,169.5,0] , [62.425,169.5,1] , [104.8,169.5,2] , [104.8,169.5,0] , [104.8,211.85,1] , [104.8,254.2,2] , [104.8,254.2,0] , [62.425,254.2,1] , [20.05,254.2,2] , [20.05,254.2,0] , [20.05,211.85,1] , [20.05,169.5,2]];\r\nshapeArrayz[1] = [[189.55,0,0] , [189.55,42.35,1] , [189.55,84.7,2] , [189.55,84.7,0] , [147.175,84.7,1] , [104.8,84.7,2] , [104.8,84.7,0] , [104.8,42.35,1] , [104.8,0,2] , [104.8,0,0] , [147.175,0,1] , [189.55,0,2]];\r\nshapeArrayz[2] = [[189.55,169.45,0] , [231.9,169.45,1] , [274.25,169.45,2] , [274.25,169.45,0] , [274.25,211.8,1] , [274.25,254.15,2] , [274.25,254.15,0] , [231.9,254.15,1] , [189.55,254.15,2] , [189.55,254.15,0] , [189.55,211.8,1] , [189.55,169.45,2]];\r\nshapeArrayz[3] = [[189.55,84.7,0] , [189.55,127.075,1] , [189.55,169.45,2] , [189.55,169.45,0] , [147.175,169.45,1] , [104.8,169.45,2] , [104.8,169.45,0] , [104.8,127.075,1] , [104.8,84.7,2] , [104.8,84.7,0] , [147.175,84.7,1] , [189.55,84.7,2]];\r\nshapeArrayz[4] = [[104.8,169.45,0] , [147.175,169.45,1] , [189.55,169.45,2] , [189.55,169.45,0] , [189.55,211.8,1] , [189.55,254.15,2] , [189.55,254.15,0] , [147.175,254.15,1] , [104.8,254.15,2] , [104.8,254.15,0] , [104.8,211.8,1] , [104.8,169.45,2]];\r\nshapeArrayz[5] = [[104.8,338.95,0] , [104.8,296.55,1] , [104.8,254.15,2] , [104.8,254.15,0] , [147.175,254.15,1] , [189.55,254.15,2] , [189.55,254.15,0] , [189.55,296.55,1] , [189.55,338.95,2] , [189.55,338.95,0] , [147.175,338.95,1] , [104.8,338.95,2]];\r\nshapeArrayz[6] = [[274.25,169.5,0] , [284.275,179.5,1] , [294.3,189.5,2] , [294.3,189.5,0] , [294.3,211.9,1] , [294.3,234.3,2] , [294.3,234.3,0] , [294.275,234.3,1] , [294.25,234.3,2] , [294.25,234.3,0] , [284.325,244.25,1] , [274.4,254.2,2] , [274.4,254.2,0] , [274.325,254.2,1] , [274.25,254.2,2] , [274.25,254.2,0] , [274.25,211.85,1] , [274.25,169.5,2]];\r\nshapeArrayz[7] = [[0.1,189.45,0] , [10.1,179.45,1] , [20.1,169.45,2] , [20.15,254.2,0] , [20.125,211.825,1] , [20.1,169.45,2] , [20.15,254.2,0] , [20.1,254.2,1] , [20.05,254.2,2] , [20.05,254.2,0] , [10.025,244.2,1] , [0,234.2,2] , [0,234.2,0] , [0.05,211.825,1] , [0.1,189.45,2]];\r\nshapeArrayz[8] = [[124.85,359,0] , [114.825,349,1] , [104.8,339,2] , [189.55,338.85,0] , [147.175,338.925,1] , [104.8,339,2] , [189.55,338.85,0] , [189.55,338.925,1] , [189.55,339,2] , [189.55,339,0] , [179.6,349.05,1] , [169.65,359.1,2] , [169.65,359.1,0] , [147.25,359.05,1] , [124.85,359,2]];\r\nshapeArrayz[9] = [[274.25,254.15,0] , [274.25,254.2,1] , [274.25,254.25,2] , [274.25,254.25,0] , [264.3,264.275,1] , [254.35,274.3,2] , [254.35,274.3,0] , [231.975,274.3,1] , [209.6,274.3,2] , [209.6,274.3,0] , [199.575,264.25,1] , [189.55,254.2,2] , [189.55,254.2,0] , [231.9,254.175,1] , [274.25,254.15,2]];\r\nshapeArrayz[10] = [[104.8,254.15,0] , [104.8,254.2,1] , [104.8,254.25,2] , [104.8,254.25,0] , [94.85,264.275,1] , [84.9,274.3,2] , [84.9,274.3,0] , [62.525,274.3,1] , [40.15,274.3,2] , [40.15,274.3,0] , [30.125,264.25,1] , [20.1,254.2,2] , [20.1,254.2,0] , [62.45,254.175,1] , [104.8,254.15,2]];\r\nshapeArrayz[11] = [[189.6,169.5,0] , [199.625,159.475,1] , [209.65,149.45,2] , [209.65,149.45,0] , [232.025,149.45,1] , [254.4,149.45,2] , [254.4,149.45,0] , [254.4,149.475,1] , [254.4,149.5,2] , [254.4,149.5,0] , [264.325,159.475,1] , [274.25,169.45,2] , [274.25,169.45,0] , [274.25,169.5,1] , [274.25,169.55,2] , [189.6,169.5,0] , [231.925,169.525,1] , [274.25,169.55,2]];\r\nshapeArrayz[12] = [[20.15,169.5,0] , [30.175,159.475,1] , [40.2,149.45,2] , [40.2,149.45,0] , [62.55,149.45,1] , [84.9,149.45,2] , [84.9,149.45,0] , [84.9,149.475,1] , [84.9,149.5,2] , [84.9,149.5,0] , [94.85,159.475,1] , [104.8,169.45,2] , [104.8,169.45,0] , [104.8,169.5,1] , [104.8,169.55,2] , [20.15,169.5,0] , [62.475,169.525,1] , [104.8,169.55,2]];\r\n\r\n<\/pre>\n
    And if you need some help to convert this Array into a Flash generated shape ?
    \nhere is some code that could help you (AS3):<\/p>\n
    \r\n\/\/ draw the new extracted image\r\nfunction drawArray (_arr:Array) {\r\n\t\/\/ trace ("drawArray ");\r\n\tvar _shape:Shape = new Shape();\r\n\t_shape.graphics.lineStyle (1, 0x333333, 1);\r\n\t_shape.graphics.beginFill (0xcccccc);\r\n\t_shape.graphics.moveTo (_arr[0][0], _arr[0][1]); \/\/ starting point\r\n\tfor (var i=1; i<=_arr.length; i+=3) {\r\n\t\t_shape.graphics.curveTo (_arr[i][0], _arr[i][1] , _arr[i+1][0], _arr[i+1][1]);\r\n\t\t\/\/ _shape.graphics.lineTo (_arr[i+1][0], _arr[i+1][1]);\r\n\t}\r\n\t_shape.graphics.endFill ();\r\n\tthis.drawContainer_mc.addChild (_shape);\r\n}\r\n\r\n\/\/ jumpstart everything\r\nfunction init (){\t\r\n\tfor (var j=0; j<shapeArrayz.length; j++) {\r\n\t\t\/\/ trace(shapeArrayz[j])\r\n\t\tdrawArray (shapeArrayz[j]);\r\n\t}\r\n}\r\ninit ();\r\n<\/pre>\n
    have fun \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
    For a project of mine: Custmm Grumm I needed to change a shape into an array, you could say that I needed to change a Illustrator\/vector file into code. As far as I know there is no other method then the one I created here with jsfl. To make this happen I imported the .AI […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,21,3],"tags":[162,408,148,398,164,95,29,163,161,160],"class_list":["post-426","post","type-post","status-publish","format-standard","hentry","category-as3","category-extending-flash","category-flash","tag-array","tag-as3","tag-custmm-grumm","tag-flash","tag-flash-9","tag-illustrator","tag-jsfl","tag-shape","tag-shapes","tag-vector"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t