Outils pour utilisateurs

Outils du site


cours2010:multimedia:visionneuse

Visionneuse (un peu de POO)

Les exemples de ce TP sont basés sur un projet organisé en dossier et utilisant des paquets (package). Voir Structuration d'un projet. Il n'est pas obligatoire de suivre cette organisation. Ce sera facultatif lors de l'épreuve finale.

Je vous conseille de partir de vos travaux précédents. Vous pourrez essayer chez vous d'organiser le projet avec des dossiers et paquets. Partir des fichiers fournis par moi ne vous apportera aucune aide pour faire vous-même une telle organisation ; je ne les fournis qu'à titre d'exemple.

Le but du TP est la mise en place d'une galerie d'image (visionneuse).

Vous pouvez télécharger des images d'exemple et un fichier XML. Ces fichiers sont à placer AVEC votre SWF.

Travail préalable

Dans un premier temps, l'on va associer une Classe à une page.

  • Faire une Classe Page1 (basé sur MovieClip) dans FlashDevelop
  • Associer le Symbole “Page1” a cette Classe.
  • Mettre un simple trace(“dans Page1”); dans le constructeur.
  • Optionnel : faire de “Page1” la page créée par défaut pour faciliter les tests.

Le code gérant la visionneuse sera placé dans cette Classe.

Objectifs

Le but est de mettre en place le modèle suivant :

  • Affichage est la Classe permettant d'afficher les images.
    • La méthode affiche réalise l'affichage d'une image fourni sous forme d'URL (URLRequest).
      • Elle est public, car appelé par les vignettes.
    • La propriété loader référence une instance de la Classe Loader qui sert à afficher des images (chargé à l'exécution).
      • Elle est private, car seule la Classe Affichage a besoin d'y accéder.
  • Vignette est la Classe gérant les vignettes.
    • Elle a les propriétés suivantes :
      • affichage de type Affichage : où afficher les images.
      • urlImage de type URLRequest : le chemin de l'image à afficher.
      • Les propriétés seront public dans un premier temps pour permettre d'ajuster les propriétés de chaque instance (afficher des images différentes).
    • La méthode changeImage sera appelée suite à un clic sur la vignette.
      • Son travail consiste à demander à l'affichage (affichage) d'afficher l'image pointée par l'URL (urlImage).
      • Comme d'habitude pour un gestionnaire d'événement, il sera private.

Mise en place de base

Le code sera progressivement modifié pour atteindre l'objectif.

  • Les mécanismes de base.
  • La généralisation du code pour pouvoir créer les éléments dynamiquement (par le code).
  • Le chargement des paramètres par un fichier externe (XML).

Suivre chaque étape et les tester pour avoir une bonne compréhension de l'activité.

La Classe Affichage

On va mettre en place l'élément qui affiche les images.

Le Symbole Affichage

  • Sur la “Page 1” : faire une simple forme qui figure l'emplacement ou sera affiché les images (celles fournies ont une taille de 100×75).
  • Convertir en Symbole nommé “Affichage” cette forme et l'associer à la Classe Affichage.
  • Nommez l'occurrence de Affichage, affichage.
    • Ne pas oublier d'ajouter la déclaration de la propriété correspondante dans la Classe Page1.
      • Le type de cette propriété sera Affichage

Tester l'instance d'Affichage

Écrire le code de la Classe Affichage :

  • Une propriété loader de type Loader.
  • Dans le constructeur :
    • Crée l'instance de Loader (qui servira à charger les images).
    • L'ajouter à l'affichage (addChild).
  • Écrire la méthode affiche(url:URLRequest) (qui est public).
    • Elle demande simplement à l'instance de Loader pointé par la propriété loader de charger l'image correspondant à l'URL passée en paramètre.

Faire un simple test :

  • Dans le constructeur de Page1, demandez à affichage de charge (méthode affiche) une image (fourni sous la forme de URLRequest).

La Classe Vignette

La page comportera plusieurs Vignette (instance de).

Dans un premier temps l'on fera un Symbole différent pour chaque vignette.

Le code de la Classe Vignette

La Classe Vignette sera utilisée comme Classe de base des différents Symboles (chaque vignette aura une image différente).

Cela suppose de créer en premier le fichier de la Classe Vignette.

  • Les propriétés :
    • affichage de type Affichage : où afficher les images.
    • urlImage de type URLRequest : le chemin de l'image à afficher.
  • Dans le constructeur :
    • Fixer les propriétés qui font qu'elles se comporteront comme des Boutons.
    • Mettre en place le gestionnaire d'événement (CLICK).
  • Dans le gestionnaire d'événement :
    • Demander à l'affichage d'afficher l'image (correspondant à l'URL).

Les Vignettes

La démarche la plus simple consiste à placer les images des vignettes sur la “Page 1” (un simple glissé déplacer).

Il n'est pas utile de les placer toutes. 3 vignettes sont suffisantes. Plus tard l'on va les créer par le code.

  • Convertir chaque image en Symbole.

  • L'exporter pour ActionScript.
    • Spécifier la Classe de base Vignette. Tous les Symboles de vignettes et leurs instances utilisent le même code (Vignette).

  • Spécifier le nom d'instance.
    • Ne pas oublier la déclaration correspondante dans la Classe Page1.

Tester les vignettes

Dans le constructeur de la Classe Page1, pour chaque vignette :

  • modifier la propriété affichage pour qu'elle pointe sur l' affichage (que la vignette sache ou son affiché les images).
  • modifier la propriété urlImage, un objet URLRequest qui spécifie l'URL de l'image à afficher.

Vous devez maintenant avoir des “boutons” qui affichent leurs images respectives dans le même affichage.

Chargement dynamique des vignettes

Le but est de n'avoir qu'un Symbole Vignette dont chaque instance chargera dynamiquement une image (de vignette) différente.

Le modèle devient le suivant :

Le code de chargement des images de Vignette

Comme pour la Classe Affichage on va ajouter la possibilité de charger dynamiquement l'image :

  • Ajouter la méthode afficheVignette(url:URLRequest) qui :
    • Créez une instance de Loader, puis avec cette instance :
      • Charger l'image (passé en paramètre).
      • L'ajouter à l'affichage.

Le Symbole (unique) Vignette

  • Comme pour Affichage, vous pouvez tracer une forme qui figure ou va s'afficher l'image de la vignette.
  • La transformer en Symbole et l'associer à Vignette (pas comme Classe de base, car l'on n'aura qu'un Symbole Vignette).

  • Permuter les occurrences des Symboles des différentes vignettes par l'unique Symbole Vignette (qui n’affiche aucune image pour l'instant).

Vous pouvez tester le code. Toutes les vignettes ont le même aspect. Mais elles font afficher une image différente dans affichage.

Spécifier dans le code les images de vignettes

Dans le constructeur de Page1 ajouter pour chaque vignette :

  • L'instruction de charger une image de vignettes différentes pour chaque vignette.

Vous pouvez maintenant tester que si l'on a qu'un Symbole Vignette, chaque instance affiche une image différente.

Création des vignettes par le code

Devoir créer manuellement les instances des vignettes oblige à éditer le fichier source (.fla) à chaque fois que l'on veut modifier ce qui est affiché par la galerie.

Création "manuelle" des instances de Vignette

Faire l'équivalent de placer des vignettes par le code prend la forme habituelle :

  • Créez l'instance par l'opérateur new.
  • L'ajouter à l'affichage par addChild.
  • Éventuellement, spécifier sa position (propriété x et y).

Modifier la Classe Page1 pour réaliser ces actions. Les propriétés associer permettant d'accéder aux instances de Vignette peuvent devenir des variables locales du constructeur de Vignette.

Utilisation d'un conteneur pour positionner les vignettes

Si vous avez testé les modifications précédentes, vous avez pu constater que les vignettes se positionnent relativement à l'origine de la page (“Page 1”).

On peut modifier les propriétés x et y de chaque instance de Vignette pour les positionner comme précédemment.

Mais c'est une mauvaise pratique que de mélanger les éléments de graphisme avec le code !

On va ajouter un conteneur (occurrence d'un Symbole) que l'on pourra positionner graphiquement. Les vignettes seront créées dans ce conteneur.

  • Faire un Symbole “Vignettes” (au pluriel, il contiendra la vignette).
    • Inutile de l'exporter pour ActionScript (il n'a qu'un but graphique).
  • Placer une occurrence de ce Symbole sur “Page 1”.
    • Nommez l'occurrence vignettes
    • Ajouter la déclaration correspondante à la Classe Page1.
  • Modifiez le code du constructeur de Page1 pour que les vignettes soient ajoutées dans vignettes (et non directement sur l'occurrence de Page1.
    • Plus simplement, ”addChild(…)” devient ”vignettes.addChild(…)”.

Passage de paramètres au constructeur de Vignette

Pour chaque instance de Vignette on effectue les actions suivantes :

  • Faire afficher l'image de vignette. (appel méthode afficheVignette).
  • Donner le chemin de l'image qui sera affichée (sur affichage).
  • Spécifier la propriété affichage (où afficher les images).

Ces actions étant obligatoires pour chaque vignette, il est plus correct de les faire exécuter par la Classe Vignette.

Le mieux est de faire cela dés la construction d'une Vignette (création d'instance).

La place idéale et dans le code du constructeur de Vignette. On lui passera donc les paramètres précédemment évoqués.

Au passage on peut passer en private les propriétés de Vignettes.

Maintenant les instances de Vignette sont créées avec des paramètres.

Cette modification n'est pas indispensable pour la suite. Elle permet de rendre les objets Vignette plus indépendants. On n'a plus besoin de savoir comment ils fonctionnent en interne. On se contente d'indiquer leurs paramètres à la création.

Chargement des paramètres par un ficher XML externe

Pour le chargement de données XML, on modifie le code de Page1 de la façon suivante :

  • Ajout d'une propriété xmlLoader de type URLLoader.
  • Création de cette instance de URLLoader dans le constructeur.
    • On lui passe comme paramètre l'URL du fichier XML.
  • On “écoute” sur xmlLoader l'événement Event.COMPLETE pour savoir quand les données ont fini d'être chargées.
  • Dans le gestionnaire d'événement :
    • On décode les données XML.
    • On boucle sur les données de chaque image.
      • Pour chaque image, on crée la vignette avec les paramètres adéquats.

Fin

cours2010/multimedia/visionneuse.txt · Dernière modification: 2011/05/16 22:00 (modification externe)