Austin Flex User’s Group Degrafa Presentation

Here are the slides and the code from Austin Flex User’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. 🙂

Download the slides here.

Download the source code here.

Slides Posting:

Source Code Posting:

Example_01_BasicDrawing.mxml – Shows how we had to draw before Degrafa came along.

Example_02_DrawingApp.mxml – A demo draw application; again show how to draw before the advent of Degrafa.

Example_03_DegrafaBasicDrawing.mxml – Simple Drawing with Degrafa.

Example_04_DegrafaComplexDrawing.mxml – Drawing more complex shapes with Degrafa.

Example_05_DegrafaCustomShapes.mxml – Shows how to take SVG path data from Illustrator and use it in Degrafa.

The next two samples show how skinning can be done without Degrafa (in an attempt to show why Degrafa makes skinning easier)

Example_06_SimpleGraphicalSkin.mxml – Graphical skinning.

    
        Button
        {
            up-skin: Embed("/assets/pdf.png");
            over-skin: Embed("/assets/pdf_over.png");
            down-skin: Embed("/assets/pdf_down.png");
            disabled-skin: Embed("/assets/pdf_disabled.png");
        }
    

    

    

    

Example_07_SimpleProgrammaticSkin.mxml – Programmatic skinning.

    
        CheckBox
        {
            up-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            over-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            down-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            selected-up-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            selected-down-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            selected-over-icon: ClassReference("skins.CheckBoxAsArrowSkin");
        }
        Button
        {
            corner-radius: 6;
            background-color: "0x00BFFF";
            background-alpha: 1.0;
        }
    

    

        

        

    

Example_08_SimpleDegrafaSkin.mxml – A basic skin created with Degrafa.

    

        Application
        {
            background-color: "#222222";
        }


        Button
        {
            fill-colors: #222222,#222222;
            border-color: #666666;
            color: #CCCCCC;
            corner-radius: 0;
            /*text-roll-over-color: #FFFFFF;*/
            highlight-alphas: 0,0;
            border-alpha:  1;
        }

    

    

Example_09_StatefulDegrafaSkin.mxml – A skin created with Degrafa that reacts to states.

    

        Application
        {
            background-color: "#222222";
        }

        Button
        {
            fill-colors: #222222,#222222;
            border-color: #666666;
            color: #CCCCCC;
            corner-radius: 0;
            text-roll-over-color: #FFFFFF;
            highlight-alphas: 0,0;
            border-alpha:  1;
        }

    

    

Example_10_CustomDegrafaSkin.mxml – A skin created with Illustrator path data and Degrafa.

    

        Application
        {
            background-color: "#222222";
        }

        Button
        {
            fill-colors: #222222,#222222;
            border-color: #666666;
            color: #CCCCCC;
            corner-radius: 0;
            text-roll-over-color: #FFFFFF;
            highlight-alphas: 0,0;
            border-alpha:  1;
        }

    

    

Example_11_CSSDegrafaSkin.mxml – A skin created with the Degrafa CSSSkin class,

    
        Application
        {
            borderSkin: ClassReference("com.degrafa.skins.CSSSkin");

            background-image: Embed("/assets/pdf.png");
            background-repeat: repeat;
            background-position: center;
            background-blend: normal;
        }
        VBox
        {
            borderSkin: ClassReference("com.degrafa.skins.CSSSkin");

            background-color: "90deg #FFF0A5 #FFB03B";
            border-bottom-left-radius: 20;
            border-bottom-right-radius: 10;
            border-top-left-radius: 10;
            border-top-right-radius: 0;
            border-color: #222222;
            border-width: "2px 2px 2px 2px";
            border-alpha: 1;
            padding-left: 5;
            padding-right: 5;
            padding-top: 5;
            padding-bottom: 5;
        }
        Button
        {
            skin: ClassReference("com.degrafa.skins.CSSSkin");

            background-color: "90deg #62ABCD #336699";
            border-bottom-left-radius: 8;
            border-bottom-right-radius: 8;
            border-top-left-radius: 8;
            border-top-right-radius: 8;
            border-color: #FFFFFF;
            stroke-color: #FFFFFF;
            border-thickness: 1;
        }