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- Conception de l'interface graphique du projet"
3
2- Mise en place des éléments de navigation"
14
3- Mise en place des Interactions"
19
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
Navigation dans un composant personnalisé et optimisation des média Objectif: Nous allons ici voir comment se gère la taille des éléments d'un composant personnalisé/générique avec la notion de redimensionnement automatique ou d'écrêtage. Nous verrons également comment créer du mouvement dans la zone visible, et enfin comment optimiser le poids des illustrations de votre projet Flash CATALYST. Voici les sources de cet exercice: Cliquez ici...
1- Conception de l'interface graphique du projet Créons un projet de 400×400 pixels sur fond gris. Importons l'image qui servira de support à cette démonstration.
Choisir le fichier 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
Dès que vous importez des fichiers volumineux, et nous vous rappelons que dans la majeure partie des cas la publication des projets Flash CATALYST se faisant sur une page Web, Flash CATALYST vous met en garde sur le rapport Poids de l'image / Temps de chargement de votre projet une fois publié sur Internet. Il nous propose alors pour ce faire d'optimiser ces fichiers en les pixelisant
Une fois posée sur la scène du projet, sélectionnons cette carte. Dans la boite de dialogue flottante, cliquons sur Choisir une commande. Il nous propose alors de pixeliser, comprimer et convertir en image liée.
pixeliser va réduire de manière conséquente le poids de l'image. Pour preuve la comparaison faites dans la bibliothèque. Nous remarquons d'ailleurs que la pixelisation s'est faites sur une copie, préservant l'original. Nous obtenons 50% de réduction du poids.
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
Comprimer va appliquer un taux de compression à l'image, travail similaire que vous faites quand vous utilisez le format d'enregistrement JPEG pour des fichiers numériques.
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
Plus le taux est bas, plus le poids de l'image sera bas également, parfois, ATTENTION, au détriment de la qualité de l'image finale.
Nous avons ici appliqué successivement 70, 80 et 90% de compression ce qui nous permet à la fois de comparer les poids de fichier obtenu et la qualité du rendu après compression.
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
Convertir en image liée est un procédé qui parfois conservera les propriétés initiales du fichier image, en le considérant non pas comme un élément incorporé au fichier Flash CATALYST (.FXP) mais externe au projet. En publiant au final le projet en SWF par exemple, les images liées se trouveront rangées dans un dossier assets. Elles seront chargées non pas systématiquement au démarrage du projet, mais quand l'utilisateur demandera leur affichage dans la scène. Attention donc de ne pas oublier ce répertoire quand vous publiez votre animation sur un serveur distant en vue d'être consulté sur Internet.
Nous allons ici choisir d'utiliser une Compression à 90% de l'image et la Convertir en image liée. Nous remarquons également que les images liées sont caractérisées par ce picto un peu particulier dans la Bibliothèque.
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
Nous constatons, en réduisant dans le panneau Propriété l'opacité de la carte, qu'elle est bien plus grande que notre projet de 400×400 pixels.
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
Transformons-la en composant.
Par un clic droit sur ce nouveau composant, le terme Redimensionner les limites du composant automatiquement nous indique que le composant aura la taille de l'élément le plus grand en faisant partie (Ici la carte).
Cliquons sur ce terme pour désactiver cette fonction. Nous voyons apparaître des mires aux 4 extrémités de la carte. Attrapons ces symboles pour les recentrer sur la zone, plus petite, que nous souhaitons afficher.
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 de ces déplacements:
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 utiliser ces mires comme un moyen de recadrage de l'image, en masquant ce qui est à l'extérieur, en utilisant le clic droit, choisissons Ecrêter selon les limites 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
Et voilà le résultat en quitant le mode modification de ce composant. Attention : les zones invisibles ne sont pas détruites mais simplement masquées. Autre remarque importante : l'image affichant ici un peu moins de 400 pixels x 400 pixels fait toujours le même poids, même si elle n'est pas affichée dans sa totalité !
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 preuve le panneau propriété 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
2- Mise en place des éléments de navigation Retournons dans le composant et plaçons des repères sur la zone visible que nous irons chercher dans les règles horizontale et verticale par un cliqué/glissé dans la scène. Remarques: ces repères sont repositionnables. Pour les supprimer, faites-les à nouveau glisser dans la règle, horizontale, pour les repères horizontaux et inversement pour les repères verticaux.
Remettons l'opacité de la CARTE à 100% alors que nous l'avions baisée pour apercevoir notre scène par transparence. Dessinons 4 triangles…
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
… que nous pouvons aligner
Dans la palette des calques voici ce que nous obtenons :
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
Nous pouvons, mais ce n'est pas indispensable pour la suite, grouper les éléments de navigation pour les dissocier du rectangle blanc que nous mettrons en arrière de ces triangles.
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
Transformons ces triangles en 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
En choisissant de paramétrer un curseur en forme de main au survol de ces boutons une fois le projet publié.
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- Mise en place des Interactions Pour créer ces mouvements, nous n'allons pas utiliser de transition d'état mais des séquences d'action. Celles-ci nous permettrons de nous déplacer dans les 4 directions et nous re-positionner au centre de la carte. Sélectionnons la flèche de gauche, et dans le panneau interactions, lors du clic de lire la séquence d'action.
Cette action est destinée à la carte et non au bouton. Pour cela sélectionnons ensuite l'image dans le panneau calque.
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
Dans le panneau Scenario nous retrouvons le nom du bouton associé à Lors d'un clic. Ajoutons une action de type déplacer.
Déplaçons-nous de 100 en X.
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 tour à tour les flèches de droite, du haut et du bas pour, dans le panneau interaction, leur attribuer à elles aussi de lire une séquence d'action. Déplaçons-nous de -100 en X pour le bouton de droite
De -100 en Y pour le bouton du bas et de 100 en Y pour le bouton du haut.
Flash CATALYST ne sera pas capable de s'arrêter dans ces déplacements effectués avec les flèches aux limites de la carte. Pour mettre en évidence cette limite de carte, dessinons un rectangle rouge que nous mettrons en arrière-plan de la carte.
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
Notre “Image carte” est positionnée comme ceci en X et Y :
Notons ces coordonnées (1). Sélectionnons la carte…
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 affectons lui une séquence d'action de type déplacer
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
vers un emplacement spécifique en reprenant comme valeur celles que avons notées plus haut (1).
Le projet est terminé. Pensez à nommer vos composants dans la bibliothèque, toujours dans le but d'optimiser vos échanges avec d'autres utilisateurs et/ou développeurs Flash CATALYST/Flash BUILDER, et exporter sous forme de package de bibliothèques ces composants pour une utilisation ultérieure dans d'autres projet similaires à celui-ci. 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