Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Conception d'un composant "Curseur" (Slider) à partir d'Illustrator

Compatible Flash Catalyst CS5. Cliquer pour en savoir plus sur les compatibilités.Compatible Illustrator. Cliquer pour en savoir plus sur les compatibilités.Par BEtrained (Laurent BRIERE), le 03 novembre 2010

Objectif: Nous allons apprendre à concevoir des composants de type “Curseurs” (slider en anglais). Ces objets graphiques seront préparés dans Adobe Illustrator, exportés et finalisés en tant que composants Adobe Flash CATALYST.

But final: Réaliser une “Bibliothèque” de composants réutilisables dans d'autres projets Flash CATALYST

Voici les composants que nous allons réaliser:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Et voici les sources de cet exercice:
Cliquez ici...

1- Concevoir les éléments sources dans Illustrator CS5

Créons un nouveau projet dans Illustrator en choisissant le Pixel comme unité de mesure, par exemple 200×300, s'agissant ici de dimensions tout à fait arbitraires. Nous allons nous inspirer de formes graphiques déjà existantes. Pour cela ouvrons dans le panneau symboles la palette Boutons et barres Web que nous trouverons dans le menu optionnel de cette palette.

Une fois le choix des symboles effectué, nous allons les glisser sur le plan de travail et rompre le lien au symbole de manière à leur donner un statut d'élément graphique standard désolidarisé de la notion de symbole Illustrator.

Organisons ensuite ces éléments en les rangeant chacun dans son propre calque. Nous retrouverons cette même organisation dans Flash CATALYST CS5 lors de l'import d'éléments aussi bien Photoshop, qu'Illustrator.

Enregistrons maintenant le document Illustrator afin de conserver une éventuelle source de cette préparation si besoin.

Deux formats son envisageables ici, le standard AI mais également le format FXG véritable format d'échange entre Illustrator et Flash CATALYST ou encore Flash Builder.

2- Intégration des éléments Illustrator CS5 dans Flash CATALYST CS5

Créons maintenant un nouveau projet à partir non pas d'un projet vide mais à partir du fichier créé dans Illustrator CS5.

Les dimensions d'origine du document AI sont conservées. Cliquons sur OK en conservant les paramètres d'importation par défaut. (Nous aurions pu nous passer de récupérer les calques invisibles. Garder cette case active permettra de rattraper une erreur éventuelle lors de la préparation du projet dans Illustrator si vous aviez désactivé un ou plusieurs calques en oubliant de les ré-afficher avant l'enregistrement)

Comme nous nous y attendions, la structure et l'organisation des calques est identique à celle d'Illustrator. En ouvrant le 1er calque, nous nous apercevons tout de même que certains éléments mériteraient d'être regroupés, c'est ce que l'on qualifie dans Flash CATALYST d'optimisation des éléments graphiques

Sélectionnons les deux premiers groupes et dans la boite de dialogue cliquons sur choisir une commande et optimiser les graphiques vectoriels.

Ce travail d'optimisation est nécessaire, d'une part pour diminuer la taille de vos projets mais également pour simplifier le code généré par Flash CATALYST qui sera peut-être plus tard repris dans Flash Builder par un développeur.

Renommons ensuite ces éléments optimisés dans la palette des calques.

Faisons de même pour les autres objets. Astuce: vous pouvons également utiliser le clic droit directement dans la palette des calques pour effectuer ce travail d'optimisation comme le montre la figure ci-dessous.

Voici le résultat final:

3- Réalisation des composants Curseurs

Sélectionnons maintenant les deux premiers éléments du 1er calque et dans la boite de dialogue, choisissons convertir l'illustration en composant de type curseur horizontal.

Cliquez ensuite sur modifier des parties pour finaliser cette conversion en composant Curseur.

Nous allons ici indiquer à Flash CATALYST quels sont les différents éléments de cet objet Curseur.

La partie coulissante représentera la Vignette et l'axe, la piste. Cliquons tour à tour sur les objets et déterminons leur rôle à jouer.

La vignette

…et maintenant la piste

Voici le résultat final une fois que nous avons converti l'ensemble des éléments de notre projet.

4- Gestion des composants dans la bibliothèque

En ouvrant la palette Bibliothèque on peut constater que tous les éléments piste, vignette et Curseur s'y retrouvent, ainsi que les objets graphiques.

Dernière étape: nous allons exporter sous la forme d'un package de bibliothèque l'ensemble des éléments présents. Nous pourrons grace à cela réutiliser ces curseurs dans d'autres projets Flash CATALYST ou Flash Builder, sans pour cela à avoir à les créer à nouveau.

Choisissons maintenant l'emplacement de ce fichier FXPL

A vous de jouer !…