Drawing, Skinning and Degrafa

1
(No Transcript)
2
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.

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

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

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

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

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

8
Skinning

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

9
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
• http//www.adobe.com/cfusion/entitlement/index.cfm
  ?eflex_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

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

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

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

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

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

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

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

17
Thats all folks!

• The End ?