Drawing Skinning and Degrafa This presentation covers drawing

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? ‣ ‣ Short name for the Declarative Graphics Framework. Lets you draw without Action. Script. 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 Action. Script • Movie. Clip vs Sprite vs Shape ‣ ‣ Sprite is like Movie. Clip 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. • Flex. Sprite & Flex. Shape ‣ • These extend Sprite and Shape respectively and override the to. String() method to indicate the location of the object within the Display. Object hierarchy. UIComponent ‣ ‣ Extends Flex. Sprite. Implements IUIComponent, IFlex. Display. Object.

More on Action. Script 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_Basic. Drawing. mxml for an example of drawing using the Graphics class methods. See Example_02_Drawing. App. mxml for a dynamic drawing demo.

How does Degrafa make drawing easier? • Degrafa gives you MXML tags to consolidate the Action. Script 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_Degrafa. Basic. Drawing. mxml.

More Sophisticated Drawings with Degrafa • Degrafa really shines when you want to get into complex shapes. • Auto. Shapes (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_Degrafa. Custom. Shapes. mxml.

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.

Graphical Skinning • You can use image files or SWF symbols as skins • Positives: ‣ ‣ ‣ Easy to understand execute. Great if you know what you are doing with the CS 3/CS 4 Adobe applications (Flash, Photo. Shop, 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_Simple. Graphical. Skin. 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. IProgrammatic. Skin ‣ ‣ 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 border. Metrics property.

Programmatic Skinning by Extending • You can extend: ‣ mx. skins. Programmatic. Skin ‣ ‣ ‣ mx. skins. Border ‣ ‣ Extends mx. skins. Programmatic. Skin. Used to skin controls that have borders (ie Buttons). Adds border. Metrics which communicates the dimensions of the border being drawn to other classes. mx. skins. Rectangular. Border ‣ ‣ ‣ Simple and lightweight. Used for simple graphics without borders (ie small rectangle that indicates the selected date in Date. Chooser component). Extends Border. Adds support for background images. See Example_07_Simple. Programmatic. Skin. 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 update. Display. List() and other lifecycle methods to make runtime adjustments. Skins do not use the surface. Skins are instances of Graphic. Programmatic. Skin, Graphic. Border. Skin or Graphic. Rectangular. Border. Skin (extend the corresponding Flex skin classes) (do you see a pattern? Degrafa just gives you tags instead of AS classes) See Example_08_Simple. Degrafa. Skin. mxml.

Degrafa and Stateful Skinning • Components communicate with their skins using the name of their state. (ie “up. Skin”, “over. Skin”) • Degrafa can respond to these state names and update its structure and design accordingly. • See Example_09_Stateful. Degrafa. Skin. 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_Custom. Degrafa. Skin. 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_CSSDegrafa. Skin. mxml.

Degrafa’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! • The End