{"id":156,"date":"2009-01-23T22:40:59","date_gmt":"2009-01-24T03:40:59","guid":{"rendered":"http:\/\/billdwhite.com\/?p=156"},"modified":"2009-01-23T22:40:59","modified_gmt":"2009-01-24T03:40:59","slug":"austin-flex-users-group-degrafa-presentation","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/","title":{"rendered":"Austin Flex User&#8217;s Group Degrafa Presentation"},"content":{"rendered":"<p>Here are the slides and the code from Austin Flex User&#8217;s Group Degrafa Presentation on January 22nd, 2009.  It is a little rough since  I put it together in about a day so please forgive any mistakes or typos.  Also, the code samples are VERY basic; they are designed to show straight-forward drawing capabilities using Degrafa and why it is so important to Flex developers.  \ud83d\ude42<\/p>\n<p><!--more--><\/p>\n<p><a href=\"\/wordpress\/wp-content\/downloads\/DegrafaPresentation\/DegrafaPresentation.ppt\">Download the slides here.<\/a><\/p>\n<p><a href=\"\/wordpress\/wp-content\/downloads\/DegrafaPresentation\/DegrafaPresentationSourceCode.zip\">Download the source code here.<\/a><br \/>\n<br \/>\nSlides Posting:<\/p>\n<div style=\"width: 425px; text-align: left;\"><a style=\"font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;\" title=\"Degrafa Overview\" href=\"http:\/\/www.slideshare.net\/billdwhite\/degrafa-overview-presentation?type=powerpoint\">Degrafa Overview<\/a><object width=\"425\" height=\"355\" data=\"http:\/\/static.slideshare.net\/swf\/ssplayer2.swf?doc=degrafa-1232765793334764-2&amp;stripped_title=degrafa-overview-presentation\" type=\"application\/x-shockwave-flash\"><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowScriptAccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/static.slideshare.net\/swf\/ssplayer2.swf?doc=degrafa-1232765793334764-2&amp;stripped_title=degrafa-overview-presentation\" \/><param name=\"allowfullscreen\" value=\"true\" \/><\/object><\/div>\n<div id=\"__ss_948320\" style=\"width: 425px; text-align: left;\">\n<div style=\"font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;\">View more <a style=\"text-decoration:underline;\" href=\"http:\/\/www.slideshare.net\/\">presentations<\/a> or <a style=\"text-decoration:underline;\" href=\"http:\/\/www.slideshare.net\/upload?type=powerpoint\">upload<\/a> your own. (tags: <a style=\"text-decoration:underline;\" href=\"http:\/\/slideshare.net\/tag\/degrafa\">degrafa<\/a> <a style=\"text-decoration:underline;\" href=\"http:\/\/slideshare.net\/tag\/flex\">flex<\/a>)<\/div>\n<\/div>\n<p>\nSource Code Posting:<\/p>\n<p>Example_01_BasicDrawing.mxml &#8211; Shows how we had to draw before Degrafa came along.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    xmlns:degrafa=\"http:\/\/www.degrafa.com\/2008\"\n    layout=\"absolute\"\n    initialize=\"onInit()\">\n\n    <mx:Script>\n        <![CDATA[\n            import com.degrafa.core.utils.ColorKeys;\n            import mx.core.UIComponent;\n            import mx.core.FlexSprite;\n\n            private function onInit():void\n            {\n                \/\/ Can draw using a Shape object\n                var shape:Shape = new Shape();\n                shape.graphics.beginFill(0x00FF00, 1.0);\n                shape.graphics.drawRect(50, 50, 50, 50);\n                shape.graphics.endFill();\n                rawChildren.addChild(shape);\n\n                \/\/ Can draw using a UIComponent\n                var myUIComponent:UIComponent = new UIComponent();\n                myUIComponent.graphics.beginFill(0x002200, 1.0);\n                myUIComponent.graphics.drawRect(50, 150, 65, 65);\n                myUIComponent.graphics.endFill();\n                addChild(myUIComponent);\n\n                \/\/ Can draw using a UIComponent and going line-by-line\n                var myUIComponent2:UIComponent = new UIComponent();\n                myUIComponent2.graphics.lineStyle(2, 0xDDDDDD,1, false);  \/\/ border style\n                myUIComponent2.graphics.beginFill(ColorKeys.BLUE, 1.0);\n                myUIComponent2.graphics.moveTo(50, 250);\n                myUIComponent2.graphics.lineTo(150, 250);\n                myUIComponent2.graphics.lineTo(150, 350);\n                myUIComponent2.graphics.lineTo(50, 350);\n                myUIComponent2.graphics.lineTo(50, 250);\n                myUIComponent2.graphics.endFill();\n                addChild(myUIComponent2);\n            }\n        ]]>\n    <\/mx:Script>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_02_DrawingApp.mxml &#8211; A demo draw application; again show how to draw before the advent of Degrafa.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    creationPolicy=\"all\"\n    addedToStage=\"onAddedToStage()\"\n    layout=\"absolute\">\n\n    <mx:Script>\n        <![CDATA[\n            import flash.display.Sprite;\n            import flash.events.MouseEvent;\n\n\n            private function onAddedToStage():void\n            {\n                initDrawingApp();\n            }\n\n\n\n            private function initDrawingApp():void\n            {\n                drawingCanvas.graphics.lineStyle(2);\n                drawingCanvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);\n                drawingCanvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);\n                drawingCanvas.addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);\n            }\n\n\n\n            private function onMouseDown(event:MouseEvent):void\n            {\n                drawingCanvas.graphics.moveTo(drawingCanvas.mouseX, drawingCanvas.mouseY);\n                drawingCanvas.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);\n            }\n\n\n\n            private function onMouseUp(event:MouseEvent):void\n            {\n                if (drawingCanvas.hasEventListener(MouseEvent.MOUSE_MOVE))\n                {\n                    drawingCanvas.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);\n                }\n            }\n\n\n\n            private function onMouseMove(event:MouseEvent):void\n            {\n                drawingCanvas.graphics.lineTo(drawingCanvas.mouseX, drawingCanvas.mouseY);\n            }\n\n\n\n            private function clearDrawing():void\n            {\n                drawingCanvas.graphics.clear();\n                drawingCanvas.graphics.lineStyle(2);\n            }\n\n\n        ]]>\n    <\/mx:Script>\n\n    <mx:Panel\n        id=\"drawingPanel\"\n        x=\"10\"\n        y=\"10\"\n        width=\"700\"\n        height=\"600\"\n        clipContent=\"true\">\n\n        <mx:Canvas\n            id=\"drawingCanvas\"\n            width=\"100%\"\n            height=\"100%\"\n            clipContent=\"true\"\n            doubleClickEnabled=\"true\"\n            doubleClick=\"clearDrawing()\" \/>\n\n    <\/mx:Panel>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_03_DegrafaBasicDrawing.mxml &#8211; Simple Drawing with Degrafa.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    xmlns:degrafa=\"http:\/\/www.degrafa.com\/2008\"\n    layout=\"absolute\">\n\n    <degrafa:Surface>\n\n        <degrafa:fills>\n\n            <degrafa:SolidFill\n                id=\"mySolidFill\"\n                color=\"0x00FF00\"\n                alpha=\"1\" \/>\n\n        <\/degrafa:fills>\n\n        <degrafa:GeometryGroup>\n\n            <degrafa:geometry>\n\n                <degrafa:RegularRectangle\n                    id=\"rectangle1\"\n                    x=\"10\"\n                    y=\"10\"\n                    width=\"50\"\n                    height=\"50\"\n                    fill=\"{mySolidFill}\" \/>\n\n            <\/degrafa:geometry>\n\n        <\/degrafa:GeometryGroup>\n\n    <\/degrafa:Surface>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_04_DegrafaComplexDrawing.mxml &#8211; Drawing more complex shapes with Degrafa.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    xmlns:degrafa=\"http:\/\/www.degrafa.com\/2008\"\n    layout=\"absolute\">\n    <mx:Script>\n        <![CDATA[\n            import com.degrafa.core.utils.ColorKeys;\n        ]]>\n    <\/mx:Script>\n\n    <degrafa:Surface>\n\n        <degrafa:strokes>\n\n            <degrafa:SolidStroke\n                id=\"mySolidStroke1\"\n                weight=\"2\"\n                color=\"{ColorKeys.CORNSILK}\"\n                alpha=\"1\" \/>\n\n        <\/degrafa:strokes>\n\n        <degrafa:fills>\n\n            <degrafa:SolidFill\n                id=\"mySolidFill\"\n                color=\"0x00FF00\"\n                alpha=\"1\" \/>\n\n            <degrafa:LinearGradientFill\n                id=\"myLinearGradientFill\">\n\n                <degrafa:GradientStop\n                    color=\"{ColorKeys.RED}\"\n                    alpha=\"1\"\n                    ratio=\".2\" \/>\n\n                <degrafa:GradientStop\n                    color=\"{ColorKeys.AQUA}\"\n                    alpha=\"1\"\n                    ratio=\".8\" \/>\n\n            <\/degrafa:LinearGradientFill>\n\n        <\/degrafa:fills>\n\n        <degrafa:GeometryGroup>\n\n            <degrafa:geometry>\n\n                <degrafa:RegularRectangle\n                    id=\"rectangle1\"\n                    x=\"10\"\n                    y=\"10\"\n                    width=\"50\"\n                    height=\"50\"\n                    fill=\"{mySolidFill}\" \/>\n\n                <!--\n                <degrafa:GearAutoShape\n                    id=\"gearShape1\"\n                    x=\"10\"\n                    y=\"100\"\n                    width=\"200\"\n                    height=\"200\"\n                    fill=\"{myLinearGradientFill}\" \/>\n\n                <degrafa:BurstAutoShape\n                    id=\"burstAutoShape1\"\n                    x=\"10\"\n                    y=\"400\"\n                    width=\"150\"\n                    height=\"175\"\n                    fill=\"{myLinearGradientFill}\" \/>\n\n                <degrafa:Path\n                    id=\"texasPath\"\n                    x=\"250\"\n                    y=\"10\"\n                    stroke=\"{mySolidStroke1}\"\n                    data=\"M 357.05332,333.3739 L 379.74411,334.45984 L 410.8368,335.60296 L 408.50219,359.05876 L 408.20543,377.21228 L 408.27357,379.29407 L 412.6174,383.1125 L 414.35405,383.93466 L 416.16326,384.18747 L 416.84913,382.93225 L 417.73945,383.79837 L 419.47609,384.2798 L 421.08086,383.54998 L 422.21956,383.95885 L 421.92279,387.364 L 426.19848,388.39501 L 428.8738,389.21718 L 432.82854,389.74256 L 435.02242,391.57154 L 438.27152,389.99537 L 441.05896,390.36028 L 443.09237,393.14772 L 444.16733,393.46868 L 444.00686,395.43395 L 447.09547,396.60124 L 449.86312,394.79644 L 451.37114,395.16136 L 453.72552,395.32184 L 454.15859,397.19478 L 458.79918,399.18423 L 461.45473,398.9798 L 463.4442,394.86459 L 463.78492,394.86459 L 464.92804,396.76172 L 469.3642,397.76853 L 472.7012,398.9798 L 475.99425,399.73382 L 478.14419,398.9798 L 478.99053,396.46496 L 482.69245,396.46496 L 484.58958,397.21896 L 487.654,395.64279 L 488.31569,395.64279 L 488.6806,396.76172 L 492.95629,396.76172 L 495.35904,395.5065 L 497.02754,395.80326 L 498.44324,397.67621 L 501.32299,399.34471 L 504.84467,400.41968 L 507.58814,401.83759 L 510.03484,403.45991 L 513.32788,402.56962 L 515.26897,403.55225 L 515.78008,413.69188 L 516.11532,423.39405 L 516.80118,432.92806 L 517.32658,436.97511 L 520.00191,441.57175 L 521.07687,445.63859 L 524.93927,451.92792 L 525.48884,454.80769 L 526.01424,455.8145 L 525.32836,463.31069 L 522.67723,467.69847 L 523.63568,470.55845 L 523.27076,473.0733 L 522.42442,480.38923 L 521.05268,483.10852 L 521.65692,487.49475 L 515.99204,489.07993 L 506.13075,493.60643 L 505.16079,495.54635 L 502.57422,497.48628 L 500.47264,498.94122 L 499.17935,499.74952 L 493.52124,505.08432 L 490.77301,507.18591 L 485.43821,510.41911 L 479.7801,512.84402 L 473.47534,516.23889 L 471.69708,517.69384 L 465.8773,521.25037 L 462.48243,521.89701 L 458.60258,527.39346 L 454.56107,527.71679 L 453.5911,529.65671 L 455.85435,531.59664 L 454.3994,537.09309 L 453.10612,541.61959 L 451.9745,545.49944 L 451.1662,550.02593 L 451.9745,552.45084 L 453.75276,559.40224 L 454.72273,565.54533 L 456.50099,568.29356 L 455.53103,569.74851 L 452.45948,571.68843 L 446.80136,567.80858 L 441.30491,566.67696 L 440.01162,567.16194 L 436.77841,566.5153 L 432.57524,563.44375 L 427.40211,562.31213 L 419.80406,558.91726 L 417.70248,555.0374 L 416.40919,548.57099 L 413.17599,546.63106 L 412.52934,544.36781 L 413.17599,543.72117 L 413.49931,540.3263 L 412.20602,539.67966 L 411.55938,538.7097 L 412.85266,534.34486 L 411.23606,532.08162 L 408.00285,530.78833 L 404.60798,526.4235 L 401.05145,519.79542 L 396.84828,517.20885 L 397.00994,515.26893 L 391.67514,502.98273 L 390.86684,498.77956 L 389.08858,496.83964 L 388.92692,495.38469 L 382.94548,490.0499 L 380.35891,486.97835 L 380.35891,485.84672 L 377.77234,483.74514 L 370.9826,482.61351 L 363.54622,481.96687 L 360.47467,479.70363 L 355.94818,481.48189 L 352.39165,482.93684 L 350.1284,486.17004 L 349.15844,489.88824 L 344.79361,496.03133 L 342.3687,498.45624 L 339.78213,497.48628 L 338.00387,496.35465 L 336.06394,495.70801 L 332.18409,493.44477 L 332.18409,492.79812 L 330.40583,490.8582 L 325.23269,488.75661 L 317.79631,480.99691 L 315.53306,476.30876 L 315.53306,468.22573 L 312.29985,461.75931 L 311.81487,459.01109 L 310.19827,458.04112 L 309.06664,455.93954 L 304.05517,453.83795 L 302.76189,452.22135 L 295.64882,444.29998 L 294.35554,441.06677 L 289.66738,438.80352 L 288.21243,434.43865 L 285.62584,431.52878 L 283.68593,431.04382 L 283.0367,426.36618 L 291.03857,427.05207 L 320.07356,429.79552 L 349.10864,431.39588 L 351.39487,407.61912 L 355.28142,352.0641 L 356.88181,333.31678 L 358.25355,333.34536 M 457.2302,567.32304 L 456.66439,560.20996 L 453.91615,553.01604 L 453.35033,545.98379 L 454.88611,537.73908 L 458.20017,530.86849 L 461.67587,525.45284 L 464.82827,521.89629 L 465.47491,522.13879 L 460.70591,528.76689 L 456.34107,535.31417 L 454.3203,541.94226 L 453.99698,547.11542 L 454.88611,553.25854 L 457.47269,560.45246 L 457.95767,565.6256 L 458.11933,567.08056 L 457.2302,567.32304 z\" \/>\n                -->\n            <\/degrafa:geometry>\n\n        <\/degrafa:GeometryGroup>\n\n    <\/degrafa:Surface>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_05_DegrafaCustomShapes.mxml &#8211; Shows how to take SVG path data from Illustrator and use it in Degrafa.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    xmlns:degrafa=\"http:\/\/www.degrafa.com\/2008\"\n    layout=\"absolute\">\n    <mx:Script>\n        <![CDATA[\n            import com.degrafa.core.utils.ColorKeys;\n        ]]>\n    <\/mx:Script>\n\n    <degrafa:Surface>\n\n        <degrafa:strokes>\n\n            <degrafa:SolidStroke\n                id=\"mySolidStroke\"\n                color=\"0x333333\"\n                weight=\"1\" \/>\n\n        <\/degrafa:strokes>\n\n        <degrafa:fills>\n\n            <degrafa:SolidFill\n                id=\"mySolidFill01\"\n                color=\"{ColorKeys.PURPLE}\"\n                alpha=\"1\" \/>\n\n            <degrafa:SolidFill\n                id=\"mySolidFill02\"\n                color=\"{ColorKeys.BLUE}\"\n                alpha=\"1\" \/>\n\n            <degrafa:LinearGradientFill\n                id=\"myLinearGradientFill\">\n\n                <degrafa:GradientStop\n                    color=\"{ColorKeys.RED}\"\n                    alpha=\"1\"\n                    ratio=\".2\" \/>\n\n                <degrafa:GradientStop\n                    color=\"{ColorKeys.AQUA}\"\n                    alpha=\"1\"\n                    ratio=\".8\" \/>\n\n            <\/degrafa:LinearGradientFill>\n\n        <\/degrafa:fills>\n\n        <degrafa:GeometryGroup>\n\n            <degrafa:geometry>\n\n                <degrafa:Path\n                    id=\"path1\"\n                    data=\"M0.112793 94.731L163.271 124.994 306.692 28.9414 285.64 127.625 306.692 278.942 0.112793 207.889\"\n                    fill=\"{mySolidFill01}\"\n                    stroke=\"{mySolidStroke}\" \/>\n\n\n                <degrafa:Path\n                    id=\"path2\"\n                    data=\"M31.6929 17.3628C36.9561 181.836 165.903 184.468 165.903 184.468L265.903 60.7837 333.009 100.916 272.482 0.257813\"\n                    fill=\"{mySolidFill02}\"\n                    stroke=\"{mySolidStroke}\" \/>\n\n\n            <\/degrafa:geometry>\n\n        <\/degrafa:GeometryGroup>\n\n    <\/degrafa:Surface>\n\n<\/mx:Application>\n<\/pre>\n<p>The next two samples show how skinning can be done without Degrafa (in an attempt to show why Degrafa makes skinning easier)<\/p>\n<p>Example_06_SimpleGraphicalSkin.mxml &#8211; Graphical skinning.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\">\n\n    <mx:Style>\n        Button\n        {\n            up-skin: Embed(\"\/assets\/pdf.png\");\n            over-skin: Embed(\"\/assets\/pdf_over.png\");\n            down-skin: Embed(\"\/assets\/pdf_down.png\");\n            disabled-skin: Embed(\"\/assets\/pdf_disabled.png\");\n        }\n    <\/mx:Style>\n\n    <mx:Button\n        id=\"pdfButton\"\n        label=\"PDF Button\"\/>\n\n    <mx:Button\n        id=\"pdfButton2\"\n        label=\"\" \/>\n\n    <mx:Button\n        id=\"pdfButton3\"\n        label=\"\"\n        enabled=\"false\"\/>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_07_SimpleProgrammaticSkin.mxml &#8211; Programmatic skinning.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    layout=\"absolute\">\n\n    <mx:Style>\n        CheckBox\n        {\n            up-icon: ClassReference(\"skins.CheckBoxAsArrowSkin\");\n            over-icon: ClassReference(\"skins.CheckBoxAsArrowSkin\");\n            down-icon: ClassReference(\"skins.CheckBoxAsArrowSkin\");\n            selected-up-icon: ClassReference(\"skins.CheckBoxAsArrowSkin\");\n            selected-down-icon: ClassReference(\"skins.CheckBoxAsArrowSkin\");\n            selected-over-icon: ClassReference(\"skins.CheckBoxAsArrowSkin\");\n        }\n        Button\n        {\n            corner-radius: 6;\n            background-color: \"0x00BFFF\";\n            background-alpha: 1.0;\n        }\n    <\/mx:Style>\n\n    <mx:Panel\n        x=\"10\"\n        y=\"10\"\n        width=\"450\"\n        height=\"348\"\n        layout=\"absolute\">\n\n        <mx:Button\n            id=\"test\"\n            x=\"53\"\n            y=\"118\"\n            width=\"200\"\n            height=\"150\"\n            skin=\"skins.CustomContainerBorderSkin\" \/>\n\n        <mx:CheckBox\n            x=\"131\"\n            y=\"44\"\n            height=\"27\" \/>\n\n    <\/mx:Panel>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_08_SimpleDegrafaSkin.mxml &#8211; A basic skin created with Degrafa.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    xmlns:degrafa=\"http:\/\/www.degrafa.com\/2008\"\n    backgroundGradientColors=\"[#333333, #666666]\"\n    layout=\"absolute\">\n\n    <mx:Style>\n\n        Application\n        {\n            background-color: \"#222222\";\n        }\n\n\n        Button\n        {\n            fill-colors: #222222,#222222;\n            border-color: #666666;\n            color: #CCCCCC;\n            corner-radius: 0;\n            \/*text-roll-over-color: #FFFFFF;*\/\n            highlight-alphas: 0,0;\n            border-alpha:  1;\n        }\n\n    <\/mx:Style>\n\n    <mx:Button\n        id=\"skinnedButton\"\n        top=\"100\"\n        horizontalCenter=\"0\"\n        label=\"A Simple Degrafa Skinned Button\"\n        skin=\"skins.SimpleDegrafaButtonSkin\"\n        height=\"36\"\n        fontSize=\"18\"\n        color=\"0x333333\"\n        fontFamily=\"Arial\"\n        fontWeight=\"bold\" \/>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_09_StatefulDegrafaSkin.mxml &#8211; A skin created with Degrafa that reacts to states.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    xmlns:degrafa=\"http:\/\/www.degrafa.com\/2008\"\n    backgroundGradientColors=\"[#333333, #666666]\"\n    layout=\"absolute\">\n\n    <mx:Style>\n\n        Application\n        {\n            background-color: \"#222222\";\n        }\n\n        Button\n        {\n            fill-colors: #222222,#222222;\n            border-color: #666666;\n            color: #CCCCCC;\n            corner-radius: 0;\n            text-roll-over-color: #FFFFFF;\n            highlight-alphas: 0,0;\n            border-alpha:  1;\n        }\n\n    <\/mx:Style>\n\n    <mx:Button\n        id=\"skinnedButton\"\n        top=\"100\"\n        horizontalCenter=\"0\"\n        label=\"Stateful Degrafa Skinned Button\"\n        skin=\"skins.StatefulDegrafaButtonSkin\"\n        height=\"36\"\n        fontSize=\"18\"\n        color=\"0x333333\"\n        fontFamily=\"Arial\"\n        fontWeight=\"bold\" \/>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_10_CustomDegrafaSkin.mxml &#8211; A skin created with Illustrator path data and Degrafa.<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application\n    xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\"\n    xmlns:degrafa=\"http:\/\/www.degrafa.com\/2008\"\n    backgroundGradientColors=\"[#333333, #666666]\"\n    layout=\"absolute\">\n\n    <mx:Style>\n\n        Application\n        {\n            background-color: \"#222222\";\n        }\n\n        Button\n        {\n            fill-colors: #222222,#222222;\n            border-color: #666666;\n            color: #CCCCCC;\n            corner-radius: 0;\n            text-roll-over-color: #FFFFFF;\n            highlight-alphas: 0,0;\n            border-alpha:  1;\n        }\n\n    <\/mx:Style>\n\n    <mx:Button\n        id=\"skinnedButton\"\n        top=\"100\"\n        horizontalCenter=\"0\"\n        label=\"Custom Skin\"\n        skin=\"skins.CustomDegrafaSkin\"\n        height=\"36\"\n        fontSize=\"18\"\n        color=\"0x333333\"\n        fontFamily=\"Arial\"\n        fontWeight=\"bold\" \/>\n\n<\/mx:Application>\n<\/pre>\n<p>Example_11_CSSDegrafaSkin.mxml &#8211; A skin created with the Degrafa CSSSkin class,<\/p>\n<pre line=\"1\" lang=\"actionscript\">\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<mx:Application xmlns:mx=\"http:\/\/www.adobe.com\/2006\/mxml\" layout=\"absolute\">\n\n    <mx:Style>\n        Application\n        {\n            borderSkin: ClassReference(\"com.degrafa.skins.CSSSkin\");\n\n            background-image: Embed(\"\/assets\/pdf.png\");\n            background-repeat: repeat;\n            background-position: center;\n            background-blend: normal;\n        }\n        VBox\n        {\n            borderSkin: ClassReference(\"com.degrafa.skins.CSSSkin\");\n\n            background-color: \"90deg #FFF0A5 #FFB03B\";\n            border-bottom-left-radius: 20;\n            border-bottom-right-radius: 10;\n            border-top-left-radius: 10;\n            border-top-right-radius: 0;\n            border-color: #222222;\n            border-width: \"2px 2px 2px 2px\";\n            border-alpha: 1;\n            padding-left: 5;\n            padding-right: 5;\n            padding-top: 5;\n            padding-bottom: 5;\n        }\n        Button\n        {\n            skin: ClassReference(\"com.degrafa.skins.CSSSkin\");\n\n            background-color: \"90deg #62ABCD #336699\";\n            border-bottom-left-radius: 8;\n            border-bottom-right-radius: 8;\n            border-top-left-radius: 8;\n            border-top-right-radius: 8;\n            border-color: #FFFFFF;\n            stroke-color: #FFFFFF;\n            border-thickness: 1;\n        }\n    <\/mx:Style>\n\n    <mx:VBox x=\"116\" y=\"119\" height=\"138\" width=\"228\">\n        <mx:Button label=\"Button\" width=\"150\" \/>\n        <mx:Button label=\"Button\" width=\"150\" \/>\n        <mx:Button label=\"Button\" width=\"150\" \/>\n    <\/mx:VBox>\n\n<\/mx:Application>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Here are the slides and the code from Austin Flex User&#8217;s Group Degrafa Presentation on January 22nd, 2009. It is a little rough since I put it together in about a day so please forgive any mistakes or typos. Also, the code samples are VERY basic; they are designed to show straight-forward drawing capabilities using\u2026 <span class=\"read-more\"><a href=\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,11,1],"tags":[],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-adobe-flex","category-openlaszlo","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Austin Flex User&#039;s Group Degrafa Presentation - Bill White<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Austin Flex User&#039;s Group Degrafa Presentation - Bill White\" \/>\n<meta property=\"og:description\" content=\"Here are the slides and the code from Austin Flex User&#8217;s Group Degrafa Presentation on January 22nd, 2009. It is a little rough since I put it together in about a day so please forgive any mistakes or typos. Also, the code samples are VERY basic; they are designed to show straight-forward drawing capabilities using\u2026 Read More &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\" \/>\n<meta property=\"og:site_name\" content=\"Bill White\" \/>\n<meta property=\"article:published_time\" content=\"2009-01-24T03:40:59+00:00\" \/>\n<meta name=\"author\" content=\"Bill White\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:site\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill White\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\"},\"author\":{\"name\":\"Bill White\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"headline\":\"Austin Flex User&#8217;s Group Degrafa Presentation\",\"datePublished\":\"2009-01-24T03:40:59+00:00\",\"dateModified\":\"2009-01-24T03:40:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\"},\"wordCount\":246,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"articleSection\":[\"Adobe Flex\",\"OpenLaszlo\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\",\"name\":\"Austin Flex User's Group Degrafa Presentation - Bill White\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\"},\"datePublished\":\"2009-01-24T03:40:59+00:00\",\"dateModified\":\"2009-01-24T03:40:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/billdwhite.com\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Austin Flex User&#8217;s Group Degrafa Presentation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/\",\"name\":\"Bill White's Blog\",\"description\":\"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc\",\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\",\"name\":\"Bill White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"caption\":\"Bill White\"},\"logo\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.billdwhite.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Austin Flex User's Group Degrafa Presentation - Bill White","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/","og_locale":"en_US","og_type":"article","og_title":"Austin Flex User's Group Degrafa Presentation - Bill White","og_description":"Here are the slides and the code from Austin Flex User&#8217;s Group Degrafa Presentation on January 22nd, 2009. It is a little rough since I put it together in about a day so please forgive any mistakes or typos. Also, the code samples are VERY basic; they are designed to show straight-forward drawing capabilities using\u2026 Read More &raquo;","og_url":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/","og_site_name":"Bill White","article_published_time":"2009-01-24T03:40:59+00:00","author":"Bill White","twitter_card":"summary_large_image","twitter_creator":"@bill_d_white","twitter_site":"@bill_d_white","twitter_misc":{"Written by":"Bill White","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#article","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/"},"author":{"name":"Bill White","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"headline":"Austin Flex User&#8217;s Group Degrafa Presentation","datePublished":"2009-01-24T03:40:59+00:00","dateModified":"2009-01-24T03:40:59+00:00","mainEntityOfPage":{"@id":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/"},"wordCount":246,"commentCount":0,"publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"articleSection":["Adobe Flex","OpenLaszlo"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/","url":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/","name":"Austin Flex User's Group Degrafa Presentation - Bill White","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/#website"},"datePublished":"2009-01-24T03:40:59+00:00","dateModified":"2009-01-24T03:40:59+00:00","breadcrumb":{"@id":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/billdwhite.com\/wordpress\/2009\/01\/23\/austin-flex-users-group-degrafa-presentation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/billdwhite.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Austin Flex User&#8217;s Group Degrafa Presentation"}]},{"@type":"WebSite","@id":"https:\/\/billdwhite.com\/wordpress\/#website","url":"https:\/\/billdwhite.com\/wordpress\/","name":"Bill White's Blog","description":"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc","publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314","name":"Bill White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","caption":"Bill White"},"logo":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.billdwhite.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":0,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"wp:attachment":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}