yoann nussbaumer

Avant que vous commenciez, voici quelques astuces pour travailler avec le template de skin Flash fourni par Adobe:

• En général, vous aurez certainement meilleur temps à créer vos morceaux de skin à la même taille que ceux fournis dans le template. Si vous les faites plus grands ou plus petits, vous devrez peut-être éditer la scale-9 grid (pour les parties qui le nécessitent).
• Le fichier CSS fourni suppose que les fichiers et symboles exportés auront des noms spécifiques, aussi vous devriez éviter de changer les noms des symboles dans le fichier Flash. (Renommer les différents objets dans un symbole ne pose pas de problèmes.)
• Pour les éléments qui ont du texte, comme les boutons, vous ne pouvez pas gérer les attributs de texte (position, couleur, taille, police, etc.) depuis le fichier de skin, c’est pourquoi le texte n’est pas affiché dans le modèle de skin. La section sur la modification des styles décrira plus tard comment spécifier les attributs du texte en utilisant les CSS.
• Le skin par défaut Halo Aeon est à moitié transparent, aussi il prends un peu de la couleur de fond du conteneur. C’est pourquoi les éléments semblent grisés dans le template fourni. Vous pouvez suivre une stratégie similaire pour votre skin ou les rendre simplement opaques.
• En raison de la façon de Flex 2 de gérer les scrollbars, vous devrez vous assurer que chacun des symboles dans les différents états est décalé d’un pixel vers la droite du point de référence, comme dans le fichier d’exemple.

1. Téléchargez le fichier de skin d’exemple

Téléchargez le fichier flex_skins_flash.zip et dézippez le dossier sur votre ordinateur. Vous devez obtenir un seul dossier nommé flex_skins_flash. Si vous voulez, vous pouvez travailler sur une copie de ce dossier, en laissant l’original sans modifications, au cas où vous souhaiteriez créer différentes skins par la suite.

2. Éditez les différents composants du skin

Démarrez Flash et ouvrez le fichier flex_skins.fla depuis votre répertoire de travail. Vous verrez tous les skins pour les composants Flex 2 sur la scène. Chacun d’entre eux est une instance d’un symbole de la bibliothèque de Flash.

Pour éditer l’un des composants du fichier:

1. Double-cliquez sur le composant pour l’éditer sur place. (Vous pouvez également trouver et ouvrir le symbole depuis la bibliothèque de Flash.)
2. Modifiez les dessins existants, ou supprimez tout et dessinez les votre.
3. Quand vous avez fini d’éditer un élément du skin, double-cliquez en dehors de la zone du symbole, ou cliquez sur le bouton de retour dans la zone supérieure gauche de la fenêtre du document (au dessus de la timeline).

Quand vous éditez un symbole, faîtes attention au point de référence (le signe + dans le coin supérieur gauche de votre symbole). Flex alignera toujours le point de référence avec le coin supérieur gauche du composant, c’est pourquoi vous devez vous assurer que le coin supérieur gauche de votre dessin a le signe + (sauf pour les éléments de scrollbar, qui doivent être décalés d’un pixel vers la droit comme mentionné plus haut).

Si la forme des élements des skins que vous créez est très différente du dessin de base (par exemple si vos coins sont plus arrondis, ou si vous avez fait vos skins plus grandes) vous devrez certainement éditer la scale-9 grid.

Pour faire cela, suivez les étapes suivantes:

1. Faites un clic droit sur l’élément de votre skin sur la scène, et choisissez « Modifier ». Cela vous ouvrira une vue juste avec le symbole que vous avez choisi.
   • Si vous ne voyez pas les lignes en pointillés, c’est que le symbole ne requiert pas une scale-9 grid. C’est un composant Flex qui n’est jamais redimensionné.
   • Si vous voyez les lignes en pointillés, elles représentent la scale-9 grid. En utilisant l’outil pointeur, déplacez les lignes pour spécifier les différentes parties qui doivent s’étirer et dans quelles directions, comme cela a été décrit dans la section dédiée à l’étirement des composants Flex. Par exemple, si vous avez des coins arrondis, assurez vous qu’ils sont entièrement contenus dans les quarts de cercle faisant les coins de la scale-9 grid.
2. Quand vous avez ajusté la grille, cliquez sur le bouton retour dans le coin supérieur droit de la fenêtre du document pour retourner sur la scène principale.

3. Exportez le fichier de skin

Quand vous avez fini d’éditer tous les symboles et les scale-9 grids, l’export est très simple: choisissez juste Fichier > Publier. Cela créera automatiquement un fichier flex_skins.swf dans le même répertoire. Ce fichier et le fichier flex_skins.css fourni sont tout ce dont vous avez besoin pour personnaliser l’apparence d’une application Flex.

Une fois que vous avez publié le fichier de skin, vous pouvez passer à l’étape suivante, la modification des styles CSS.

S: Ce billet fait partie d’une suite d’articles sur le thème Créer un skin pour une application Flex avec Flash, Photoshop, Fireworks, ou Illustrator, traduit de l’article d’Adobe : Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator.