Conception de listes élaborée avec Flash Catalyst CS5 by BETRAINED

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

TABLE DES MATIERES Conception d'une liste de données élaborée (Part.1)!

1- Réalisation de l'interface graphique

2- Réalisation d'un composant personnalisé

3- Réalisation d'un composant Barre de défilement verticale

4- Réalisation d'un composant Liste de données

5- Gestion des éléments d'un composant Liste de données

6- Création du Panneau de défilement

7- En conclusion...

Conception d'une liste de données élaborée (Part.2)!

1- Conception du composant principal

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

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

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

5- Animation du projet à l'ouverture

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Conception d'une liste de données élaborée (Part.1) Objectif: Il s'agit ici d'incorporer dans un projet Adobe Flash CATALYST CS5 une liste de vignettes associées chacune d'elles avec un Titre, un Descriptif et un élément de lien (“En savoir plus”)… Le tout combiné avec une barre de défilement verticale permettant de parcourir verticalement parlant la liste de vignettes (Tester l'animation ci-dessus) Voici les sources de cet exercice: Cliquez ici...

1- Réalisation de l'interface graphique Créons un nouveau projet de 450×400 pixels avec un fond noir (#000000) et importons l'image qui fera office d'arrière-plan dans notre projet.

Nous utiliserons ici cette image fond_projet.png:

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Réduisons maintenant son opacité à 50%. cela nous permettra de combiner cette illustration et le fond noir du projet.

Ajoutons un rectangle avec une taille inférieure à celle du projet, sans contour et avec un dégradé à 90°, un gris clair et un autre un peu plus foncé. Enfin, réduire son opacité à 40%.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Ajoutons un filtre de type ombre portée avec les paramètres suivants:

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

2- Réalisation d'un composant personnalisé Sélectionnons ce rectangle et transformons-le en Composant personnalisé/générique grace à la boite de dialogue noire.

Double clic sur ce nouveau composant afin d'en modifier le contenu. Ajoutons une image en l'important dans la scène. Elle illustrera le haut de notre liste de vignettes.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

… et choisissons cette image :

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

3- Réalisation d'un composant Barre de défilement verticale Dessinons deux rectangles, l'un avec un aplat gris et contour blanc, l'autre sans contour et avec un fond en dégradé. Le 1er sera utilisé comme vignette et l'autre comme piste de notre composant.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Sélectionnons maintenant ces deux éléments et transformons-les en barre de défilement verticale.

Cliquons ensuite sur modifier des parties afin de définir les zones de notre Barre de défilement.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Voici la vignette

Et la piste

A l'aide du fil d'Ariane en haut à gauche, retournons un niveau au-dessus.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

4- Réalisation d'un composant Liste de données Insérons maintenant une nouvelle image qui sera l'illustration de la fiche que nous allons réaliser…

Ainsi que 3 zones de texte servant à décrire l'image…

Sélectionnons le tout, textes+image, afin de réaliser le composant de type liste de données.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Double clic sur le composant obtenu pour finaliser le paramétrage, et déterminer que ces objets sélectionnés deviennent un élément répété.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

5- Gestion des éléments d'un composant Liste de données Ce composant comme la plupart des objets dans Flash CATALYST possède son propre panneau propriété, mais également ici le panneau données en phase de conception. Le contenu de cette zone vous permet de constater qu'il a été créé autant de colonnes que d'éléments distincts sélectionnés avant la réalisation de ce composant.

Chacune des lignes correspond à un enregistrement de cette liste de données. Les zones de texte et image sont modifiables.

En bas de ce panneau, vous trouvons cette zone:

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

ajouter une ligne permet de rajouter un enregistrement. La corbeille au contraire vous autorise à supprimer la/les lignes en trop dans votre liste de données.

La mise à jour des images s'effectue par un clic sur la vignette. Il fait apparaitre la boite de dialogue sélectionner une ressources (Images, vidéo, son…). Si l'image est présente dans cette liste, sélectionnez-là, et cliquez sur OK. Dans le cas contraire, cliquez sur importer et sélectionnez le média souhaité.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Astuce: Quand vous importez par Fichier/Importer/images… plusieurs images en même temps, celles-ci ne s'incorporent pas directement dans scène de votre projet, mais dans la bibliothèque. Cela évite par exemple de faire usage du bouton importer lors de la gestion des images d'une liste de données

Retournons maintenant au niveau inférieur (Ici CustomComponent1)

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

6- Création du Panneau de défilement Ce Panneau de défilement est tout simplement l'association entre la liste de données et la barre de défilement verticale que nous venons de créer précédemment. Sélectionnons-les et choisissons panneau de défilement dans la boite de dialogue.

Double cliquons sur le composant obtenu…

… et définissons la liste de données comme étant le contenu de défilement.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Nous constatons alors que la liste de données qui dépassait de notre projet, s'ajuste à la hauteur de la barre de défilement verticale à droite. Reste éventuellement à ajuster la taille et le positionnement de cet élément dans la scène.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

7- En conclusion... Une nouvelle fois, et cela sera très souvent le cas dans Flash CATALYST, nous vous invitons à générer un package de bibliothèque afin de pouvoir réutiliser sur un nouveau projet cette liste de données intégrée elle-même dans un composant personnalisé/ générique.

Et enfin, comme vous l'aurez constaté, toute modification d'un composant, quel qu'il soit, se fera par un double clic sur ce composant. La suite à donner à cet exercice serait de réaliser une interaction sur chaque élément de cette liste afin d'afficher une fiche détaillée en popup (1). Une contrainte cependant à la mise en place de cette “Interaction” : l'impossibilité de faire coexister “Interaction et “liste de données” associée à un “Panneau de défilement”

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Conception d'une liste de données élaborée (Part.2) 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 les sources de cet exercice: Cliquez ici...

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:

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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

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

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

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

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Toujours sur ce même état Dessus, supprimons 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é.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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”

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

3- Réalisation du composant Personnalisé/Générique (Grandes Images) Revenons au niveau immédiatement supérieur à 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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

Renommons le 1er état de cet élément en l'appelant etat0. Dupliquons cet état avec le bouton du même nom.

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

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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

… supprimons l'image existante

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

… 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 comportant 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:

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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:

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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).

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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.

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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

Comme ci-dessous:

… avec les paramètres suivants:

Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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 !… Auteur: Laurent BRIERE - contact@betrained.fr - www.info-betrained.fr - Tel: 02 48 02 05 39

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