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: utilisation des flèches pour se déplacer, Clic sur la carte pour la recentrer dans le composant.

Voici ce que nous allons réaliser:

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:

Nous allons ici pixeliser l'image, puis choisir d'utiliser une Compression à 90% de l'image et la Convertir en image liée.

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.

Transformons-la en composant personnalisé.

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.

Voici le résultat final de ces déplacements:

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.

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é !

Pour preuve le panneau propriété ci-dessous :

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…

… que nous pouvons aligner

Dans la palette des calques voici ce que nous obtenons :

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.

Transformons ces triangles en bouton.

En choisissant de paramétrer un curseur en forme de main au survol de ces boutons une fois le projet publié.

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.

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.

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.

Notre “Image carte” est positionnée comme ceci en X et Y :

Notons ces coordonnées (1). Sélectionnons la carte…

… et affectons lui une séquence d'action de type déplacer

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 !