Drawing, Skinning and Degrafa This presentation covers drawing, skinning and the use of Degrafa to make things easier. Understanding the basics of drawing and skinning will help you understand the why? behind Degrafas existence. What is Degrafa? Short name for the Declarative Graphics Framework. Lets you draw without ActionScript. Degrafa doesn't do anything you can't do on your own with the graphics package. Because you can draw with Degrafa, you can also skin with Degrafa.

Drawing in ActionScript MovieClip vs Sprite vs Shape Sprite is like MovieClip without the timeline (and therefore, without the overhead) Shape can be drawn on like Sprite, but it is not a display object container and cannot hold children like Sprite. FlexSprite & FlexShape These extend Sprite and Shape respectively and override the toString() method to indicate the location of the object within the DisplayObject hierarchy. UIComponent Extends FlexSprite. Implements IUIComponent, IFlexDisplayObject.

More on ActionScript Drawing Draw in AS using flash.display.Graphics Contained in Sprite and Shape objects. Includes the properties and methods for drawing lines, fills, and shapes. Drawing in this manner can be quite tedious. See Example_01_BasicDrawing.mxml for an example of drawing using the Graphics class methods. See Example_02_DrawingApp.mxml for a dynamic drawing demo.

How does Degrafa make drawing easier? Degrafa gives you MXML tags to consolidate the ActionScript code snippets. Initially, it might seem that there is not much reduction in code size. The tags will help you organize your artwork and skins (easier to maintain). Binding within these tags makes this even more powerful. Basic Drawing If you are drawing, you need a surface and you need to declare strokes, fills and geometry groups. The Surface is a simple UIComponent extension that allows Degrafa objects to be added to it's display list. See Example_03_DegrafaBasicDrawing.mxml.

More Sophisticated Drawings with Degrafa Degrafa really shines when you want to get into complex shapes. AutoShapes (recently added) provides you with a nice library of default complex shapes. Combined with strokes and fills, you can get very fancy.

The Power of the Path: Using External Tools with Degrafa Can use Illustrator SVG data to create Degrafa drawings Draw the skin or artwork in Illustrator. Export the SVG data. Use the SVG data within the Degrafa tags to re-create the artwork. See Example_05_DegrafaCustomShapes.mxml.

SkinningSkinning Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images or SWF files (Graphical Skinning), or they can be class files that contain drawing methods that define vector images (Programmatic Skinning). Graphical Skinning Embed images in the Flex application (GIF, JPEG, PNG or SWF files containing symbols). Programmatic Skinning Extends one of the existing skin classes. Implement the required interfaces and write the rest yourself.

Graphical Skinning You can use image files or SWF symbols as skins Positives: Easy to understand and execute. Great if you know what you are doing with the CS3/CS4 Adobe applications (Flash, PhotoShop, Illustrator, Fireworks). Adobe provides templates at : Negatives: Increases file size if you embed these assets in your SWFs. Welcome to the world of Scale-Nine slicing. (not really negative) See Example_06_SimpleGraphicalSkin.mxml

Programmatic Skinning by Implementing You can create a UIComponent that implements the required interface. Which interface you implement depends upon what you are trying to create. (ie Does it need a border? Does it need to reflect states?) You can implement: mx.core.IProgrammaticSkin Ensures that any implementing class has an accessible name property, which is used to determine the state of the skin. mx.core.IBorder Ensures interface ensures that any implementing class has an accessible borderMetrics property.

Programmatic Skinning by Extending You can extend: mx.skins.ProgrammaticSkin Simple and lightweight. Used for simple graphics without borders (ie small rectangle that indicates the selected date in DateChooser component). mx.skins.Border Extends mx.skins.ProgrammaticSkin. Used to skin controls that have borders (ie Buttons). Adds borderMetrics which communicates the dimensions of the border being drawn to other classes. mx.skins.RectangularBorder Extends Border. Adds support for background images. See Example_07_SimpleProgrammaticSkin.mxml.

Degrafa and Skinning If you create a programmatic skin by using the drawing API, then you can also create the same skin using Degrafa. Degrafa artwork versus Degrafa skins: Skins need to use updateDisplayList() and other lifecycle methods to make runtime adjustments. Skins do not use the surface. Skins are instances of GraphicProgrammaticSkin, GraphicBorderSkin or GraphicRectangularBorderSkin (extend the corresponding Flex skin classes) (do you see a pattern? Degrafa just gives you tags instead of AS classes) See Example_08_SimpleDegrafaSkin.mxml.

Degrafa and Stateful Skinning Components communicate with their skins using the name of their state. (ie upSkin, overSkin) Degrafa can respond to these state names and update its structure and design accordingly. See Example_09_StatefulDegrafaSkin.mxml.

Degrafa Custom Skins using External Tools Just like we created artwork using SVG path data, we can also create skins using this method. You can use the Path or Polygon Degrafa tags with the SVG data to build skins. See Example_10_CustomDegrafaSkin.mxml.

Degrafa Skinning with CSS Degrafa also provides the CSSSkin class which lets you skin components without creating a new Degrafa skin class. You can declare the CSSSkin class in your stylesheet and then specify the customizations using CSS notation. See Example_11_CSSDegrafaSkin.mxml.

Degrafas Impact on Flex 4 The idea of describing skins using tags has heavily influenced the design of the upcoming release of Flex 4 (Gumbo). FXG syntax looks very similar to Degrafa syntax. Adobe has brought the Degrafa team onboard. Degrafa and FXG will eventually either merge or Degrafa will extend FXGs functionality.

Thats all folks! The End