Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Conception d'une liste de données élaborée (Part.2) - Une galerie d'images

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

Objectif: Nous allons réaliser dans cet exercice une petite galerie d'images s'affichant sous forme de vignette, animer au survol de la vignette une bande colorée et un texte. Le clic sur cette vignette nous permettra enfin de visualiser une image d'une taille plus importante. Nous traiterons à nouveau des Listes de données associées à une Interaction spécifique destinée aux listes de données.

Voici ce que nous aurons à la fin de ce tutoriel:

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

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


Si vous n'avez pas suivi la 1ere partie consacrée aux Listes de données Flash CATALYST, Cliquez ici pour visualiser ce tutoriel...



1- Conception du composant principal

Afin de gagner un peu de temps de Conception de l'environnement graphique de ce projet, ouvrez dans les sources le fichier Liste_motion_suite_debut.fxp

Voici le détail des éléments de la palette des calques:

Sélectionnons maintenant tout le contenu, excepté le calque flèche

Transformons ces éléments en Composant personnalisé/générique

Pour pouvoir vous y retrouver vous avez tout intérêt à renommer à chaque fois que vous le pouvez les objets et composants que vous créez. Allez pour cela dans la palette Bibliothèque et double cliquez sur le titre du nouveau composant. Nommez-le et validez par Entrée.



2- Réalisation de la Liste de données (Vignettes)

Double cliquons sur le composant Générique nouvellement créé et sélectionnons maintenant la vignette, Le Titre de l'image et enfin le bandeau rouge

Sélectionnons à nouveau ces mêmes éléments et choisissons de les définir comme des Elément répété.

Nous obtenons notre Liste de données visible dans le panneau Données en phase de conception en bas de l'écran. Si besoin, ajustez la taille de cette liste afin de voir 4 vignettes et choisissez la bonne position.

Mettons à jour les vignettes en cliquant sur l'image du panneau Donnée en phase de conception. La liste des images (Grandes et vignettes) est la résultante d'un import de sources externes par la commande Fichier / Importer / Images.

Rappel: quand vous décidez d'importer plus d'une image, Flash CATALYST n'insère pas celle-ci dans votre scène, mais bel et bien et directement dans la Bibliothèque du projet.

Sélectionnons la vignette dans la boite de dialogue et cliquons sur OK. Renouvelez cette manipulation jusqu'à la mise à jour complète de toutes vos vignettes.

Double cliquons ensuite sur cette liste, dans la scène, et passons à l'animation des éléments de cette liste. Trois états, Normal qui est l'état initial, Dessus au survol de l'objet, et enfin Sélectionné après le clic sur l'objet.

Faisons disparaître le Titre de l'image de l'état Normal en cliquant sur l'oeil qui lui est associé dans la palette des calques.

Encore dans l'état Normal, réduisons la taille du bandeau rouge afin de le cacher derrière la vignette.

Dans l'état Dessus, faisons disparaitre le rectangle de mise en évidence automatiquement créé par Flash CATALYST, qui est là pour afficher au survol un léger masque coloré et montrant que nous sommes sur un objet réactif au passage de la souris.

Sur l'état Sélectionné au contraire, nous allons conserver ce rectangle, tout en réduisant sa hauteur et en accentuant l'effet d'arrondi grâce au panneau Propriété.

Dans le panneau Scénario, sélectionnez ces transitions d'état…

… et appliquons à cette sélection une transition régulière (la même pour tous et en une seul fois!).

Rappel: Flash CATALYST créé automatiquement des effets lors de transformation(s) sur des objets et les insère dans la Timeline du panneau Scénario. Ex: supprimer ou masquer un objet d'un état à l'autre, entraîne un fondu d'entrée et un fondu de sortie sur la Timeline. Idem pour le redimensionnement, comme c'est le cas notamment pour le bandeau rouge de notre liste de données.

Etat “Normal” vers “Dessus”

Etat “Dessus” vers “Normal”

Etat “Sélectionné” vers “Normal”

Supprimons les effets du Rectangle de mise en évidence sur cet etat Sélectionné en les sélectionnant dans la Timeline et en cliquant sur la Corbeille en bas.



3- Réalisation du composant Personnalisé/Générique (Grandes Images)

Revenons au niveau le plus haut du composant à l'aide du fil d'Ariane en haut de l'écran.

Sélectionnons cette grande image posée à droite de notre scène et transformons la en Composant personnalisé/générique.

Modifions ce nouveau composant en renommant son 1er état en l'appelant etat0. Dupliquons cet état avec le bouton du même nom.

Tous les états sont maintenant créés et renommés.

Sélectionnons l'état1 afin de modifier la grande image de cet état…

… supprimons l'image existante

… et remplaçons-la par le fichier grande2.png de la bibliothèque du projet. En lui affectant les coordonnées X=0 et Y=0, celle-ci viendra se positionner au même endroit que l'image précédente, ce qui est un comportement typique et avantageux des Composants personnalisés/génériques, qui fonctionnent comme de véritables Containers ou Boites.

Faisons de même pour les autres états de notre composant:

Dans le panneau Scénario, animons maintenant l'apparition et la disparition des grandes images en sélectionnant l'ensemble des transitions d'état

… et choisissons une transition régulière:



4- Mise en place des Interactions (Liste de données)

Revenons au niveau immédiatement supérieur au composant des grandes images et sélectionnons notre liste de données.

Ajoutons une Interaction un peu particulière: celle-ci a pour but de sélectionner l'état des grandes images qui correspond à l'illustration de la vignette sélectionnée dans la liste. Ceci est possible grâce au type d'Interaction A la sélection vers l'état voulu (Ici “Etat0”) à la Sélection d'un élément précis. Cette dernière valeur correspond au Numéro de ligne de l'enregistrement dans la liste de données.

Attention cette numérotation commence à 0 et non à 1 comme nous pourrions naturellement le croire.

Répétons cette opération autant de fois que nous possédons de vignettes.



5- Animation du projet à l'ouverture

Nous souhaitons cliquer sur un triangle rouge, en haut à droite de la scène, ce qui déclenchera l'apparition de la galerie d'une façon un peu particulière puisqu'elle va utiliser un effet de rotation 3D. Pour que notre effet soit réussi, nous avons besoin de “tricher” en ajoutant à l'objet à animer un rectangle invisible. Dessinons-le…

…et rendons-le transparent en réduisant son opacité à 0.

Regroupons maintenant ce rectangle et le composant principal (Nommé “ensemble” dans la palette des calques).

Créons maintenant le bouton en sélectionnant le triangle rouge et en le transformant en composant bouton.

Dupliquons l'état principal de notre projet et nommons-les comme ci-dessous. Le point sur le bandeau rouge du 1er état vous montre quel sera l'état choisi par Flash CATALYST pour le début de l'animation Flash une fois le projet final publié.

Occupons-nous de la transition de l'état ferme vers l'état ouvert en appliquant une interaction de type lire la transition vers l'état, ouvert, lorsque l'on se trouve dans l'état ferme.

Gardons le triangle rouge sélectionné pour nous occuper maintenant de l'effet de rotation 3D. Il ne s'agit pas ici d'une transition d'un état vers un autre mais d'une “séquence d'actions” (“Séquence” vous indiquant qu'il peut y avoir une ou plusieurs actions consécutives).

Important: le déclencheur de l'action sera le triangle mais l'action sera destinée au Composant principal, celui que nous voulons faire apparaître.

Sélectionnons donc pour ce faire le groupe, c'est à dire Composant principal + Rectangle transparent que nous avons précédemment groupés.

Ajoutons une action rotation 3D (Panneau Scénario en bas de l'écran).

Comme ci-dessous:

… avec les paramètres suivants:

Sélectionnez enfin bouton rouge et groupe

… et dans l'état ferme, glissez le tout en haut de la scène du projet afin que seul le bouton soit visible sur cet état.

Reste, dernière étape, à supprimer cette fois le bouton rouge sur l'état ouvert.

A vous de jouer !…