Skinner une scrollbar

Une scrollbar est composée de plusieurs éléments, chacun étant skinnables par des éléments graphiques bitmap (png, gif...) ou vectoriel (swf, swc). Tous ces éléments peuvent avoir des états différents (survolé, cliqué...) également personnalisables.
Il existe des templates pour avoir la bonne structure des éléments:

• Pour Illustrator : flex_skins_illustrator.zip
• pour Photoshop : flex_skins_photoshop.zip
• pour Flash : flex_skins_flash.zip

• Utilisation d'un fichier swf comme skin.

Lors de la création de la scrollbar dans le logiciel d'image, toutes les parties ont été nommées. Il suffit donc de mettre en 'source' le nom du fichier et le nom donné à la partie en 'symbol'

 ScrollBar {
    downArrowUpSkin: Embed(source='scrollbarsSimple.swf', symbol='monNommage_downArrowUpSkin');
    downArrowOverSkin: Embed(source='scrollbarsSimple.swf', symbol='monNommage_downArrowOverSkin');
...}

• Utilisation d'un bitmap comme skin

C'est la même chose que pour un swf sauf que l'on n'utilise pas 'symbol'

 ScrollBar {
    downArrowUpSkin: Embed(source='downArrowUpSkin.gig');
    downArrowOverSkin: Embed(source='downArrowOverSkin.gif');
...}

Si un des éléments ne doit pas apparaitre, indiquer comme null sa Classreference 

ScrollBar {  thumbIcon: ClassReference(null); }

Le thumb n'a pas une taille fixe. Il s'adapte proportionnellement à la taille du contenu qu'il doit faire défiler. Certaines zones peuvent être déformées (des bords arrondis par exemple). Il convient alors d'utiliser le scale-9 grid ( "9-slice") pour délimiter les zones à ne pas toucher. Ici, la zone rouge sera la seule zone extensible. (Utilisable dans Flash et Illustrator).
Dans le cas d'un bitmap, ce découpage se fera directement dans Flex en passant par l'éditeur de style (Edit scale grid). Ce qui donnerai un code du style :

ScrollBar {
    thumbUpSkin: Embed(source="Thumb_up.gif",
    scaleGridLeft="10",
    scaleGridTop="4",
    scaleGridRight="4",
    scaleGridBottom="10");
     }

Malheureusement, malgré le gridScale un thumb se déforme toujours. Pour donner une taille fixe au thumb il faut taper de nombreuses lignes de code, aimablement fourni ici