Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

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

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

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

Voici ce que nous allons réaliser:

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

Et 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:

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

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

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.

… et choisissons cette image :

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.

et

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.

Voici la vignette

Et la piste

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

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.

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

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:

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

Quand vous importez par Fichier/Importer/images… plusieurs images en même temps, celles-ci ne s'incorporent pas directement dans la 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.

Quand vous aurez terminé terminé la personnalisation de chaque enregistrement, n'oubliez pas de modifier la taille de la Liste de données pour que sa hauteur corresponde bien au nombre d'enregistrements:

Retournons maintenant au niveau inférieur (Ici CustomComponent1)

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.

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.

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”

A vous de jouer !…

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