Angry Native JSON Parsing in Flash
Posted in Flash by theFlashBlog on the 05-13-2011Update: in order to view the example you will need the latest version of the incubator installed.
We just pushed a new version of the Flash Player Incubator live on the Adobe Labs site. Among the new features is native JSON parsing making it a first-class citizen in Flash. See the example below where I am loading an Angry Birds JSON file and sprite sheet allowing you to click through and see the sprites. These come from the new Chrome version of the game. The code is below that and you can see that parsing JSON is basically just one line of code and is very fast. Example makes use of Keith’s MinimalComps.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | package { import com.bit101.components.List; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; import flash.geom.Rectangle; import flash.net.URLLoader; import flash.net.URLRequest; [SWF(width="680", height="200", backgroundColor="#CCCCCC")] public class sdfsdf extends Sprite { [Embed(source="INGAME_BIRDS_PIGS.png")] private var sheet:Class; private var loader:URLLoader; private var list:List; public var bmd:BitmapData; private var items:Array = new Array(); private var canvas:Bitmap; public function sdfsdf() { list = new List(this, 10, 10); list.addEventListener(Event.SELECT, itemClicked); list.width = 200; list.height = 180; bmd = new sheet().bitmapData; canvas = new Bitmap(new BitmapData(400, 400, true, 0xCCCCCC)); canvas.x = 400; canvas.y = 50; addChild(canvas); loader = new URLLoader( new URLRequest("INGAME_BIRDS_PIGS.json")); loader.addEventListener(Event.COMPLETE, onLoaded); } protected function itemClicked(event:Event):void { var item:Object = items[list.selectedIndex]; canvas.bitmapData = new BitmapData(400, 400, true, 0xCCCCCC); canvas.bitmapData.copyPixels(bmd, new Rectangle(item.x, item.y, item.width, item.height), new Point(0, 0)); } protected function onLoaded(event:Event):void { var pigs:Object = JSON.parse(loader.data); for each(var pig:Object in pigs) { try { if(pig.id != null) { list.addItem(pig.id); items.push(pig); } } catch(e:Error) { } } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | { "image": "INGAME_BIRDS_PIGS.png", "spriteCount": 89, "sprite_0": { "id": "BIRD_BLACK_1", "x": 799, "y": 1, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_1": { "id": "BIRD_BLACK_2", "x": 134, "y": 802, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_2": { "id": "BIRD_BLACK_BLINK", "x": 457, "y": 368, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_3": { "id": "BIRD_BLACK_FLYING", "x": 526, "y": 368, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_4": { "id": "BIRD_BLACK_FLYING_YELL", "x": 595, "y": 368, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_5": { "id": "BIRD_BLACK_SPECIAL", "x": 664, "y": 368, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_6": { "id": "BIRD_BLACK_SPECIAL_2", "x": 733, "y": 368, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_7": { "id": "BIRD_BLACK_SPECIAL_3", "x": 356, "y": 470, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_8": { "id": "BIRD_BLACK_YELL", "x": 356, "y": 561, "width": 67, "height": 89, "pivotx": 33, "pivoty": 44 }, "sprite_9": { "id": "BIRD_BLUE_1", "x": 822, "y": 260, "width": 32, "height": 31, "pivotx": 16, "pivoty": 15 }, "sprite_10": { "id": "BIRD_BLUE_2", "x": 822, "y": 293, "width": 32, "height": 31, "pivotx": 16, "pivoty": 15 }, "sprite_11": { "id": "BIRD_BLUE_BLINK", "x": 822, "y": 326, "width": 32, "height": 31, "pivotx": 16, "pivoty": 15 }, "sprite_12": { "id": "BIRD_BLUE_FLYING", "x": 494, "y": 830, "width": 32, "height": 31, "pivotx": 16, "pivoty": 15 }, "sprite_13": { "id": "BIRD_BLUE_FLYING_YELL", "x": 494, "y": 863, "width": 32, "height": 31, "pivotx": 16, "pivoty": 15 }, "sprite_14": { "id": "BIRD_BLUE_YELL", "x": 820, "y": 608, "width": 32, "height": 31, "pivotx": 16, "pivoty": 15 }, "sprite_15": { "id": "BIRD_RED_1", "x": 81, "y": 818, "width": 49, "height": 47, "pivotx": 24, "pivoty": 23 }, "sprite_16": { "id": "BIRD_RED_2", "x": 203, "y": 802, "width": 49, "height": 47, "pivotx": 24, "pivoty": 23 }, "sprite_17": { "id": "BIRD_RED_BLINK", "x": 802, "y": 368, "width": 49, "height": 47, "pivotx": 24, "pivoty": 23 }, "sprite_18": { "id": "BIRD_RED_FLYING", "x": 802, "y": 417, "width": 49, "height": 47, "pivotx": 24, "pivoty": 23 }, "sprite_19": { "id": "BIRD_RED_FLYING_YELL", "x": 690, "y": 730, "width": 49, "height": 47, "pivotx": 24, "pivoty": 23 }, "sprite_20": { "id": "BIRD_RED_YELL", "x": 690, "y": 779, "width": 49, "height": 47, "pivotx": 24, "pivoty": 23 }, "sprite_21": { "id": "BIRD_WHITE_1", "x": 134, "y": 370, "width": 86, "height": 106, "pivotx": 43, "pivoty": 53 }, "sprite_22": { "id": "BIRD_WHITE_2", "x": 134, "y": 478, "width": 86, "height": 106, "pivotx": 43, "pivoty": 53 }, "sprite_23": { "id": "BIRD_WHITE_BLINK", "x": 134, "y": 586, "width": 86, "height": 106, "pivotx": 43, "pivoty": 53 }, "sprite_24": { "id": "BIRD_WHITE_FLYING", "x": 134, "y": 694, "width": 86, "height": 106, "pivotx": 43, "pivoty": 53 }, "sprite_25": { "id": "BIRD_WHITE_FLYING_YELL", "x": 255, "y": 260, "width": 86, "height": 106, "pivotx": 43, "pivoty": 53 }, "sprite_26": { "id": "BIRD_WHITE_SPECIAL", "x": 343, "y": 260, "width": 86, "height": 106, "pivotx": 43, "pivoty": 53 }, "sprite_27": { "id": "BIRD_WHITE_YELL", "x": 431, "y": 260, "width": 86, "height": 106, "pivotx": 43, "pivoty": 53 }, "sprite_28": { "id": "BIRD_YELLOW_1", "x": 799, "y": 92, "width": 67, "height": 54, "pivotx": 33, "pivoty": 27 }, "sprite_29": { "id": "BIRD_YELLOW_2", "x": 356, "y": 652, "width": 67, "height": 54, "pivotx": 33, "pivoty": 27 }, "sprite_30": { "id": "BIRD_YELLOW_BLINK", "x": 356, "y": 708, "width": 67, "height": 54, "pivotx": 33, "pivoty": 27 }, "sprite_31": { "id": "BIRD_YELLOW_FLYING", "x": 356, "y": 764, "width": 67, "height": 54, "pivotx": 33, "pivoty": 27 }, "sprite_32": { "id": "BIRD_YELLOW_FLYING_YELL", "x": 356, "y": 820, "width": 67, "height": 54, "pivotx": 33, "pivoty": 27 }, "sprite_33": { "id": "BIRD_YELLOW_SPECIAL", "x": 425, "y": 830, "width": 67, "height": 54, "pivotx": 33, "pivoty": 27 }, "sprite_34": { "id": "BIRD_YELLOW_YELL", "x": 770, "y": 650, "width": 67, "height": 54, "pivotx": 33, "pivoty": 27 }, "sprite_35": { "id": "PIG_BASIC_BIG_01", "x": 519, "y": 260, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_36": { "id": "PIG_BASIC_BIG_01_BLINK", "x": 620, "y": 260, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_37": { "id": "PIG_BASIC_BIG_01_SMILE", "x": 721, "y": 260, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_38": { "id": "PIG_BASIC_BIG_02", "x": 255, "y": 368, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_39": { "id": "PIG_BASIC_BIG_02_BLINK", "x": 255, "y": 470, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_40": { "id": "PIG_BASIC_BIG_02_SMILE", "x": 255, "y": 572, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_41": { "id": "PIG_BASIC_BIG_03", "x": 255, "y": 674, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_42": { "id": "PIG_BASIC_BIG_03_BLINK", "x": 255, "y": 776, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_43": { "id": "PIG_BASIC_BIG_03_SMILE", "x": 356, "y": 368, "width": 99, "height": 100, "pivotx": 49, "pivoty": 50 }, "sprite_44": { "id": "PIG_BASIC_MEDIUM_01", "x": 1, "y": 818, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_45": { "id": "PIG_BASIC_MEDIUM_01_BLINK", "x": 740, "y": 560, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_46": { "id": "PIG_BASIC_MEDIUM_01_SMILE", "x": 530, "y": 650, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_47": { "id": "PIG_BASIC_MEDIUM_02", "x": 530, "y": 730, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_48": { "id": "PIG_BASIC_MEDIUM_02_BLINK", "x": 530, "y": 810, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_49": { "id": "PIG_BASIC_MEDIUM_02_SMILE", "x": 610, "y": 650, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_50": { "id": "PIG_BASIC_MEDIUM_03", "x": 610, "y": 730, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_51": { "id": "PIG_BASIC_MEDIUM_03_BLINK", "x": 610, "y": 810, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_52": { "id": "PIG_BASIC_MEDIUM_03_SMILE", "x": 690, "y": 650, "width": 78, "height": 78, "pivotx": 39, "pivoty": 39 }, "sprite_53": { "id": "PIG_BASIC_SMALL_01", "x": 203, "y": 851, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_54": { "id": "PIG_BASIC_SMALL_01_BLINK", "x": 820, "y": 560, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_55": { "id": "PIG_BASIC_SMALL_01_SMILE", "x": 690, "y": 828, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_56": { "id": "PIG_BASIC_SMALL_02", "x": 741, "y": 730, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_57": { "id": "PIG_BASIC_SMALL_02_BLINK", "x": 790, "y": 730, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_58": { "id": "PIG_BASIC_SMALL_02_SMILE", "x": 741, "y": 778, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_59": { "id": "PIG_BASIC_SMALL_03", "x": 741, "y": 826, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_60": { "id": "PIG_BASIC_SMALL_03_BLINK", "x": 790, "y": 778, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_61": { "id": "PIG_BASIC_SMALL_03_SMILE", "x": 790, "y": 826, "width": 47, "height": 46, "pivotx": 23, "pivoty": 23 }, "sprite_62": { "id": "PIG_HELMET_01", "x": 425, "y": 470, "width": 103, "height": 88, "pivotx": 51, "pivoty": 43 }, "sprite_63": { "id": "PIG_HELMET_01_BLINK", "x": 530, "y": 470, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_64": { "id": "PIG_HELMET_01_SMILE", "x": 635, "y": 470, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_65": { "id": "PIG_HELMET_02", "x": 740, "y": 470, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_66": { "id": "PIG_HELMET_02_BLINK", "x": 425, "y": 560, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_67": { "id": "PIG_HELMET_02_SMILE", "x": 425, "y": 650, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_68": { "id": "PIG_HELMET_03", "x": 425, "y": 740, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_69": { "id": "PIG_HELMET_03_BLINK", "x": 530, "y": 560, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_70": { "id": "PIG_HELMET_03_SMILE", "x": 635, "y": 560, "width": 103, "height": 88, "pivotx": 51, "pivoty": 44 }, "sprite_71": { "id": "PIG_KING_01", "x": 1, "y": 1, "width": 131, "height": 147, "pivotx": 66, "pivoty": 72 }, "sprite_72": { "id": "PIG_KING_01_BLINK", "x": 134, "y": 1, "width": 131, "height": 147, "pivotx": 66, "pivoty": 72 }, "sprite_73": { "id": "PIG_KING_01_SMILE", "x": 267, "y": 1, "width": 131, "height": 147, "pivotx": 66, "pivoty": 72 }, "sprite_74": { "id": "PIG_KING_02", "x": 400, "y": 1, "width": 131, "height": 147, "pivotx": 65, "pivoty": 73 }, "sprite_75": { "id": "PIG_KING_02_BLINK", "x": 533, "y": 1, "width": 131, "height": 147, "pivotx": 65, "pivoty": 73 }, "sprite_76": { "id": "PIG_KING_02_SMILE", "x": 666, "y": 1, "width": 131, "height": 147, "pivotx": 65, "pivoty": 73 }, "sprite_77": { "id": "PIG_KING_03", "x": 1, "y": 150, "width": 131, "height": 147, "pivotx": 65, "pivoty": 77 }, "sprite_78": { "id": "PIG_KING_03_BLINK", "x": 1, "y": 299, "width": 131, "height": 147, "pivotx": 65, "pivoty": 77 }, "sprite_79": { "id": "PIG_KING_03_SMILE", "x": 1, "y": 448, "width": 131, "height": 147, "pivotx": 65, "pivoty": 77 }, "sprite_80": { "id": "PIG_MUSTACHE_01", "x": 1, "y": 708, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_81": { "id": "PIG_MUSTACHE_01_BLINK", "x": 134, "y": 150, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_82": { "id": "PIG_MUSTACHE_01_SMILE", "x": 255, "y": 150, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_83": { "id": "PIG_MUSTACHE_02", "x": 376, "y": 150, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_84": { "id": "PIG_MUSTACHE_02_BLINK", "x": 497, "y": 150, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_85": { "id": "PIG_MUSTACHE_02_SMILE", "x": 618, "y": 150, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_86": { "id": "PIG_MUSTACHE_03", "x": 739, "y": 150, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_87": { "id": "PIG_MUSTACHE_03_BLINK", "x": 1, "y": 597, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 }, "sprite_88": { "id": "PIG_MUSTACHE_03_SMILE", "x": 134, "y": 260, "width": 119, "height": 108, "pivotx": 59, "pivoty": 54 } } |
Responses to “Angry Native JSON Parsing in Flash”