Drawing, Skinning and DegrafaDrawing, Skinning and DegrafaDrawing, Skinning and DegrafaDrawing, 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 Degrafa’s 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 ActionScriptDrawing in ActionScriptDrawing in ActionScriptDrawing 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 DrawingMore on ActionScript DrawingMore on ActionScript DrawingMore 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?How does Degrafa make drawing easier?How does Degrafa make drawing easier?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 More Sophisticated Drawings with DegrafaDegrafaMore Sophisticated Drawings with More Sophisticated Drawings with DegrafaDegrafa

• 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 The Power of the Path: Using External Tools with DegrafaDegrafaThe Power of the Path: Using External Tools with The Power of the Path: Using External Tools with DegrafaDegrafa

• 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.

SkinningSkinningSkinningSkinning

• 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 SkinningGraphical SkinningGraphical SkinningGraphical 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 :

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins

• 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 Programmatic Skinning by ImplementingImplementingProgrammatic Skinning by Programmatic Skinning by ImplementingImplementing

• 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 ExtendingProgrammatic Skinning by ExtendingProgrammatic Skinning by ExtendingProgrammatic 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 SkinningDegrafa and SkinningDegrafa and SkinningDegrafa 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 SkinningDegrafa and Stateful SkinningDegrafa and Stateful SkinningDegrafa 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 Degrafa Custom Skins using External ToolsToolsDegrafa Custom Skins using External Degrafa Custom Skins using External ToolsTools

• 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 CSSDegrafa Skinning with CSSDegrafa Skinning with CSSDegrafa 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.

Degrafa’s Impact on Flex 4Degrafa’s Impact on Flex 4Degrafa’s Impact on Flex 4Degrafa’s 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 FXG’s functionality.

That’s all folks!That’s all folks!That’s all folks!That’s all folks!

• The End