{"id":1524,"date":"2010-04-13T16:18:28","date_gmt":"2010-04-13T15:18:28","guid":{"rendered":"http:\/\/flaven.fr\/?p=1524"},"modified":"2026-09-16T10:10:51","modified_gmt":"2026-09-16T08:10:51","slug":"flex-skins-theme-personnaliser-les-skins-sous-flex","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/04\/flex-skins-theme-personnaliser-les-skins-sous-flex\/","title":{"rendered":"Flex, Skins, Th\u00e8me – Personnaliser les skins sous Flex"},"content":{"rendered":"

\n
\n
\nOn ne rappelle jamais assez l’importance d’un webdesign soign\u00e9 et chaque jour nous devrions m\u00e9diter chez Hecube ou ailleurs cette phrase de Raymond Loewy La laideur se vend mal…<\/i>. Par ce premier article de cette s\u00e9rie consacr\u00e9e \u00e0 l’art du skinning<\/b> et du styling<\/b> sous Flex, on continue d’explorer l’art et la mani\u00e8re de personnaliser par des techniques simples la cr\u00e9ation d’applications sous Flex comme on le fait naturrelement pour de simples templates ou th\u00e8mes de CMS pour WordPress ou Drupal.<\/p>\n

Installer les composants n\u00e9cessaires<\/h4>\n

Il s’agit de tirer profit des capacit\u00e9s de Flash \u00e0 produire des skins pour le compte de Flex. En effet, il eut \u00e9t\u00e9 idiot de se couper du tr\u00e8s grand nombre de ressources graphiques, on parle tout aussi bien des individus (flasheurs) que des sources (fichiers) qui permettraient de personnaliser une application faite sous Flex.<\/p>\n

Cette possibilit\u00e9 d’importation est d’ailleurs \u00e0 l’ensemble de ce qui constitue la suite Adobe<\/code> Illustrator notamment. Tous les logiciels de la suite d\u00e9sormais Adobe peuvent \u00eatre des contributeurs graphiques \u00e0 la personnalisation de votre application sous Flex.<\/b><\/p>\n

Installation du composant n\u00e9cessaire sous Flash CS4 pour exporter pour Flex Builder 3<\/h4>\n

Le composante st \u00e0 t\u00e9l\u00e9charger sur le site de Adobe. D’autres composants sont disponibles \u00e0 cet endroit pour l’ensembles des programmes de la suite Adobe.
\n\"Flex,<\/p>\n

\"Flex,<\/p>\n

Source : Flex MX Skin Design Extensions & Flex Component Kit for Flash Professional downloads
\nhttp:\/\/www.adobe.com\/go\/flex3_cs3_swfkit<\/a><\/i><\/p>\n

Skinning & Styling : jouer avec la CSS<\/h4>\n

Voici la source du fichier Skinning_theming_1<\/b> qui va habiller notre toute premi\u00e8re application sous Flex.<\/p>\n

\"Flex,<\/p>\n

\"Flex,<\/p>\n

\"Flex,<\/p>\n

\"Flex,<\/p>\n

Le fichier source de l’application Skinning_theming_1.mxml<\/code><\/b><\/p>\n

\r\n\t<mx:Application\r\n\t    xmlns:mx="http:\/\/www.adobe.com\/2006\/mxml"\r\n\t    layout="vertical">\r\n\t    <mx:Style>\r\n\r\n\t    \/*\r\n\tUn extrait tir\u00e9 d'une CSS quelconque....\r\n\r\n\t    font-family: Helvetica, Arial, sans-serif;\r\n\t\tfont-size: 12px;\r\n\t\tfont-style:italic;\r\n\t    *\/\r\n\t    \/* font-family: 'Arial';\r\n\t            font-size: 20px;\r\n\t            font-weight: 'bold';\r\n\t            color: #FFFFFF;\r\n\t    *\/\r\n\t       .labelStyle {\r\n\t            font-family: Helvetica, Arial, sans-serif;\r\n\t            font-family: 'Verdana';\r\n\t            font-size: 40px;\r\n\t            font-weight: 'italic';\r\n\t            color: #ff6600;\r\n\r\n\t        }\r\n\t    <\/mx:Style>\r\n\r\n\t    <mx:Label text="Bienvenue sur social.hecube.net" styleName="labelStyle" \/>\r\n\t<\/mx:Application>\t\r\n\t\r\n\t\r\n<\/pre>\n
\r\n\t<mx:Application\r\n\t    xmlns:mx="http:\/\/www.adobe.com\/2006\/mxml"\r\n\t    layout="vertical" backgroundColor="#000000" >\r\n\t    <mx:Style>\r\n<\/pre>\n
Skinning & Styling : vers une CSS plus sophistiqu\u00e9e.<\/h4>\n
Dans un article precedent, on avait choisi la mise en forme \u00e0 l’aide d’un fichier .swc<\/code> d’un tableau associatif des pr\u00e9sidents am\u00e9ricains. On reprend les m\u00eames et on recommence afin de montrer la mise en forme extensible mis \u00e0 disposition sous Flex.<\/p>\n