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- Réalisation de l'environnement graphique"
3
2- Mise en place des interactions"
10
3- Gestion et optimisation de la bibliothèque"
14
4- Utilisation des composants de votre bibliothèque dans la scène"
15
5- Effets de transition"
18
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
Composant: Menu à onglets et ouverture d'un panneau de contenu Objectif: Concevoir un système de navigation (Menu) sous la forme d'onglets ouvrant eux-mêmes par un clic souris un panneau de contenu (Texte, image, vidéo…). Cet exercice a pour but de vous apprendre à réaliser ce type de composant et surtout de le ré-exploiter autant de fois que nécessaire dans le même document par duplication ou bien dans un autre projet Flash CATALYST en exportant la source de travail sous forme de Package de bibliothèque. Voici les sources de cet exercice: Cliquez ici...
1- Réalisation de l'environnement graphique Créons un nouveau projet de 500×250 pixels. Ajoutons dans la scène un rectangle par exemple de cette taille :
A nouveau un rectangle, plus petit, au sommet du plus grand avec une zone de texte.
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
Sélectionnons les deux derniers éléments pour les transformer en composant Bouton.
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
La zone de texte devient alors le Libellé de ce bouton, ce qui permet, ou permettra plus tard, à la sélection du composant Bouton de modifier rapidement le texte via son panneau propriétés/aspect.
Voici cette zone de paramétrage :
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
Ajoutons une zone de texte et intégrons du faux-texte à l'intérieur.
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
Sélectionnons ensuite tous les objets de la scène et créons un composant générique/ personnalisé.
Tous les composants de ce type ne possèdent initialement qu'un seul état (State1).
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
Dupliquons cet état pour avoir un état en position ferme et un état en position ouvert. Pour personnaliser le nom d'un état, faites un double clic sur le titre de cet état. Attention : il vous est impossible d'utiliser des caractères accentués (é, è, à…) et des espaces. Tout manquement à ces règles vous sera indiqué par un texte rouge.
Pour nous aider à nous repérer et à positionner ce panneau correctement dans les deux états, ouvert et fermé, posons des repères sur la scène que l'on ira chercher dans les règles horizontale et verticale.
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
Sélectionnons maintenant les objets de l'état ouvert et déplaçons-les comme indiqué cidessous.
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- Mise en place des interactions Cliquons sur le composant Bouton et dans le panneau Interaction, déclarons le passage de l'état ouvert vers l'état ferme, ainsi que le retour de ferme à ouvert par une 2e interaction sur ce même bouton.
Voici maintenant nos deux interactions déclarées.
Dans le panneau Scénario, vous allons choisir de suite les deux Transitions d'état • ferme > ouvert (Clic) • ouvert > ferme (Touche “Majuscule” + Clic) … et définir une transition régulière pour animer nos objets. Flash CATALYST aura systématiquement pris en compte toutes les modifications apportées d'un état de notre composant à l'autre en les retranscrivant en effet(s). Un élément absent sur un premier état et présent sur l'autre déclenche un effet fondu entrée et fondu sortie, des dimensions différentes, un effet de redimensionnement, une déplacement pour des objets ayant des coordonnées X et Y différentes dans le panneau Propriétés.
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 maintenant un clic droit sur le composant principal pour désactiver Redimensionner les limites du composant automatiquement.
Ce qui nous importe ici est : •
Sur ferme de ne voir le composant qu'à partir de l'onglet (Titre du panneau) et pas la partie basse du composant. • Sur ouvert, de voir le haut du panneau une fois déployé Pour ce faire, déplaçons les petits curseurs en forme de mire
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
Pour l'état ferme
Pour l'état ouvert
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
Enfin, et pour que cela fonctionne correctement, il ne faut pas oublier, à nouveau par un clic droit, d'Ecrêter selon les limites du composant, ce qui aura pour conséquence de choisir dorénavant nos petites mires comme des limites de recadrage et d'affichage des éléments du composant.
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
3- Gestion et optimisation de la bibliothèque Ouvrons maintenant le panneau bibliothèque.Renommons les composants comme cidessous :
Nous obtenons deux types de composant, • Le bouton déclencheur (Titre de l'onglet) • Le composant générique qui lui-même contient le bouton déclencheur. Donner des noms explicites à vos composants vous permet de vous y “retrouver”, surtout si vous avez un nombre conséquent de composants dans votre projet, mais aussi et surtout vous permettant de “mettre un nom” plus facilement sur le composant que vous êtes en train de modifier (Double clic sur ce composant). Vous verrez alors dans le fil d'Ariane en haut à gauche de votre fenêtre Flash CATALYST le nom de celui-ci s'afficher en clair.
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- Utilisation des composants de votre bibliothèque dans la scène Si votre projet devait contenir par exemple une série de 3 onglets, il ne faut absolument pas glisser à 3 reprises le composant sur la scène. Si vous faites ce choix, en modifiant l'un de ces composants, par exemple en modifiant le libellé de l'onglet, vous vous apercevrez que ce titre sera alors le même sur les 3 onglets. Il va falloir au contraire Dupliquer autant de fois que nécessaire le composant générique (ici PanneauOnglet).
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
Vous remarquerez en le faisant que tout(s) composant(s) inclu(s) dans un composant principal (Ici BoutonDeclencheur) se duplique automatiquement sans que vous ayez besoin de le faire.
Une fois les éléments dupliqués, faites-les glisser sur la scène.
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
Personnalisons enfin ces panneaux. Un 1er double clic sur le composant, la sélection du composant BoutonDeclencheur et dans le panneau Propriétés, modifions le Libellé.
Attention de ne pas oublier également de faire cette personnalisation dans tous les états : ici ferme et ouvert.
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
5- Effets de transition Reste à définir les effets d'animation dans les Transitions d'état. Allons pour cela dans le panneau Scénario. Sélectionnons toutes les Transitions d'état et choisissons Transitions régulières.
En adaptant dans la Timeline le moment où l'effet démarre et où il stoppe.
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
Testons maintenant le projet dans Fichier/exécuter le projet. Limites de Flash CATALYST CS5: il est techniquement impossible dans cette version CS5 d'arriver dans les Interactions à demander, au moment où l'on ouvre le panneau de notre menu à onglet, de fermer en même temps le ou les autres panneaux déjà ouverts. Cela provient du fait que l'on ne puisse pas pour le moement dans un Composant générique/ personnalisé interagir sur le contenu et/ou les états d'un autre composant. Au moment où nous écrivons ces lignes une Preview Release de Catalyst, nom de code PANINI, le permet toutefois ! 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