Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
TUTORIELS
BETRAINED
Plus dʼinformations sur www.info-betrained.fr BEtrained Centre de formation continue agréé
PAO / Bureautique / Internet Expertise Filemaker Pro Expertise CMS JOOMLA! Intégration HTML / CSS
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
TABLE DES MATIERES 1- Concevoir les éléments sources dans Illustrator CS5!
3
2- Intégration des éléments Illustrator CS5 dans Flash CATALYST CS5!
6
3- Réalisation des composants Curseurs!
9
4- Gestion des composants dans la bibliothèque!
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
12
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
Conception d'un composant "Curseur"(1) à partir d'Adobe Illustrator CS5 Objectif: Nous allons apprendre à concevoir des composants de type “Curseurs”. Ces objets graphiques seront préparés dans Adobe Illustrator CS5, exportés et finalisés en tant que composants Adobe Flash CATALYST CS5. But final: réaliser une “Bibliothèque” de composants réutilisables dans d'autres projets Flash CATALYST (1) Un curseur est aussi appelé barre de défilement et permet de visualiser un contenu, texte ou image, qui ne serait pas lisible de suite en totalité et que l'on découvrirai au fur et mesure que l'on fait glisser ce fameux curseur. 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.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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)
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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…
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
…et maintenant la piste
Voici le résultat final une fois que nous avons converti l'ensemble des éléments de notre projet.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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.
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
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 !… Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39
Tutoriels BEtrained - Adobe Flash CATALYST CS5 - Tous droits réservés - Reproduction interdite
TUTORIELS
BETRAINED
Plus dʼinformations sur www.info-betrained.fr BEtrained Centre de formation continue agréé
PAO / Bureautique / Internet Expertise Filemaker Pro Expertise CMS JOOMLA! Intégration HTML / CSS
Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39