Drawing, Skinning and Degrafa

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


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 Degrafa’s existence. What is Degrafa? - PowerPoint PPT Presentation

Transcript of Drawing, Skinning and Degrafa

  • Drawing, Skinning and DegrafaThis 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 ActionScriptMovieClip vs Sprite vs ShapeSprite 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 & FlexShapeThese extend Sprite and Shape respectively and override the toString() method to indicate the location of the object within the DisplayObject hierarchy.UIComponentExtends FlexSprite.Implements IUIComponent, IFlexDisplayObject.

  • More on ActionScript DrawingDraw in AS using flash.display.GraphicsContained 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 DrawingIf 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 DegrafaDegrafa 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 DegrafaCan use Illustrator SVG data to create Degrafa drawingsDraw 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 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 SkinningEmbed images in the Flex application (GIF, JPEG, PNG or SWF files containing symbols).Programmatic SkinningExtends one of the existing skin classes.Implement the required interfaces and write the rest yourself.

  • Graphical SkinningYou can use image files or SWF symbols as skinsPositives: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 ImplementingYou 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.IProgrammaticSkinEnsures that any implementing class has an accessible name property, which is used to determine the state of the skin.mx.core.IBorderEnsures interface ensures that any implementing class has an accessible borderMetrics property.

  • Programmatic Skinning by ExtendingYou can extend:mx.skins.ProgrammaticSkinSimple and lightweight.Used for simple graphics without borders (ie small rectangle that indicates the selected date in DateChooser component).mx.skins.BorderExtends 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.RectangularBorderExtends Border.Adds support for background images.See Example_07_SimpleProgrammaticSkin.mxml.

  • Degrafa and SkinningIf 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 SkinningComponents 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 ToolsJust 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 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 4The 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