The document discusses the separation of appearance and functionality in components. It shows how components can have a skin that controls graphics, layout, animation, parts, and states, while the underlying component manages behavior, logic, and data. This allows the skin and look to be changed without affecting the underlying functionality. Samples of code are provided to demonstrate how states can be defined and skins can be created using graphics, layouts, and effects like gradients and how they will update based on the state of the component.

1. ®

2. Component / Skin
Graphics
Layout
Animation
Parts
States
Behavior
Logic
Data
®

3. Component Skin
Graphics
Behavior Layout
Logic Animation
Data Parts
States
Séparation complète de l’apparence et des fonctionnalités
®

4. 



®

5. 



®

6. Format FXG Design interactif Projet FXP Flash Builder 4
Prototypage Prototypage Format FXG
Maquette
®

7. <s:Rect y="141.5" x="268.5" height=”50" width=”50">
<s:fill>
<s:SolidColor color="#bf8f8f"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x4769C4" caps="none"
joints="miter" miterLimit="4" weight="1"/>
</s:stroke>
</s:Rect>
®

8. <fx:DesignLayer d:userLabel="Layer 1">
<s:Rect y="141.5" x="268.5" height="333" width="281">
<s:fill>
<s:SolidColor color="#bf8f8f"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x4769C4" caps="none"
joints="miter" miterLimit="4" weight="1"/>
</s:stroke>
</s:Rect>
</fx:DesignLayer>
®

9. <fx:DesignLayer d:userLabel="Layer 1">
<s:Rect y="-35.5" x="290.5" height="333" width="281">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x990000" alpha="1" ratio="0" />
<s:GradientEntry color="0xD5D5D5" alpha="1" ratio="1" />
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x4769C4" caps="none"
joints="miter" miterLimit="4" weight="1"/>
</s:stroke>
</s:Rect>
</fx:DesignLayer>
®

10. <s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<fx:DesignLayer d:userLabel="Layer 1">
<s:Rect y="-35.5" x="290.5" height="333" width="281">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x990000"
color.down=“0x77DD66” alpha="1" ratio="0" />
<s:GradientEntry color="0xD5D5D5" color.down=“0x1100DD”
alpha="1" ratio="1" />
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x4769C4" caps="none"
joints="miter" miterLimit="4" weight="1"/>
</s:stroke>
</s:Rect>
</fx:DesignLayer>
®

11. 


®

12. ®

13. ®

14. ®

15. ®

16. Questions ?
®