Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_interactions_sur_les_pages

Projet basique : interaction sur les pages

Le but de cette activité est de vous montrer comment mettre en oeuvre des interactions propres à une page.

Le concept de base est de comment associer du code (une Classe) à un élément gérant de façon autonome certaines interactions.

Pour des raisons techniques, la mise en oeuvre se fera en spécifiant la Classe de base associée à un symbole portant les éléments interactifs.

Rappel sur Classe de base : Vous avez déjà utilisé le concept d'héritage pour donner un comportement commun à tous les boutons animés. Relire le début de ce TP.

Raison de l'usage de la Classe de base

Dans les activités précédentes, vous avez généralement associé une Classe à un symbole en réalisant les réglages suivants :

  • Cocher l'option : exporter pour ActionScript.
  • Remplir le champ “Classe” avec un nom qualifié de Classe (nom du paquet suivi du nom de la Classe).
  • Écrire un fichier de Classe placé dans des dossiers correspondant aux noms de paquets.

Pour simplifier (grandement) la mise en place du projet, les différents fichiers “FLA” (application et pages) utilisent le même code source (situé à la racine du projet avec “application.fla”). Or, cela pose un problème :

  • Quand Flash IDE compile une Classe associée à un symbole :
    • Il compile le fichier de Classe (”.as”).
    • Puis “modifie” la Classe pour y inclure les graphismes mis en place sur la scène.
      • C'est cette version modifiée qui est utilisée.
  • Quand Flash IDE compile une Classe qui n'est pas associée à un symbole graphique :
    • Rien de spécial, cette Classe est compilé et ne comporte pas de graphismes (hors ceux faits par programmation).

Le problème est que si on associe une Classe à un symbole placé sur une Page :

  • Quand on compile la page :
    • Flash IDE modifie la Classe compilée pour inclure le graphisme.
  • Quand on compile l'application :
    • Fash IDE (re-)compile la Classe (associé à un symbole dans une page).
      • Mais ne la modifie par pour inclure les graphismes.
  • Quand on utilise la Classe dans l'application, on utilise la nouvelle : sans les graphismes !

La solution serait que quand on compile l'application, le code d'une Classe associé à un symbole graphique sur une page, ne soit pas visible du compilateur :

  • C'est lourd à mettre en oeuvre pour un petit projet :
    • Pour chaque page, il faut ajouter un chemin de compilation qui contiendra le code qui lui est propre.
  • On peut contourner le problème et au passage mettre le doigt sur une problématique plus générale.
    • En utilisant la Classe de base, celle-ci n'est pas modifiée pour recevoir des graphismes.
      • On peut la re-compiler sans que cela pose problème.
    • Cette démarche devient systématique quand on compile un projet avec le SDK de Flex.
      • Les graphismes sont produits par Flash IDE. On les exporte sous forme de SWC. Les Classes du graphisme doivent être nécessairement distinctes de celles du code.

Les explications précédentes peuvent vous semblez incompréhensibles. Mais il est bon que vous ayez conscience du problème même si vous vous contentez de suivre les consignes.

Pour conclure, retenez ceci :

  • Il est normal de définir deux noms de Classe si l'on associe du Code à du graphisme :
    • Un pour les graphismes crée par Flash IDE.
    • Un autre distinct pour le code.
      • Qui peut être alors compilé séparément.
  • Pour réunir le code et le graphisme, on peut utiliser une relation d'héritage entre les Classes (“extends”) :
    • Si le code hérite du graphisme, on nommera les Classes :
      • MaClass pour le code.
      • MaClass_design pour le graphisme (exporté par Flash IDE).
      • La relation sera : MaClass extends MaClass_design
    • Si le Graphisme utilise le code (en hérite), on nommera les Classes :
      • MaClass_base pour le code.
      • MaClass pour le graphisme.
      • On spécifia à Flash IDE les deux Classes dans les options du symbole :
        • Classe : MaClass
        • Classe de base : MaClass_base

Pour la suite du TP, nous allons utiliser la seconde méthode (déjà vue pour les boutons animés).

Description de l'exemple

Pour illustrer la mise en place d'une interaction on va mettre en place une “frise” qui défile quand on survole ses bords gauche ou droit.
L'extension Adobe Flash est nécessaire pour afficher ce contenu.

Les éléments nécessaires seront mis en place dans un symbole :

  • un masque ne révélant qu'une partie du contenu.
  • contenu un symbole contenant le graphisme de la “frise” (il dépasse le masque en largeur).
  • boutonGauche et boutonDroite des boutons transparents qui lorsqu'ils seront survolés, feront défiler la “frise” dans la direction souhaitée.

L'animation sera faite à chaque rafraîchissement (Event.ENTER_FRAME). On déplacera le contenu suivant x d'un “pas” mémorisé dans une variable privée _dx.

L'interaction se fera par le biais de trois gestionnaires d'événements qui modifieront le déplacement (_dx) :

  • vaADroite fixera le déplacement à une valeur positive.
  • vaAGauche fixera le déplacement à une valeur négative.
  • arret donnera au déplacement une valeur nulle (0).

Les gestionnaires d'événements seront mis en place de la façon suivante :

  • boutonGauche quand il est survolé, fera allez à droite (vaADroite).
  • boutonDroite quand il est survolé, fera allez à gauche (vaAGauche).
  • boutonGauche et boutonDroite quand on les quitte, arrêteront le déplacement (arret).

Différentes constantes contrôleront le comportement de l'interaction :

  • MINI : la valeur minimale du contenu suivant x.
  • MAXI : la valeur maximale du contenu suivant x.
  • STEP : la valeur utilisée à chaque rafraîchissement pour déplacer le contenu.

Remarque : ces constantes pourraient être changées en variable d'instance pour permettre d'utiliser la même Classe dans différents projets.

Mise en oeuvre

Code ActionScript

package src0.grZ0.unNom.projet 
{
    import flash.display.MovieClip;
    import flash.display.SimpleButton;
    import flash.events.MouseEvent;
    import flash.events.Event;
 
    public class Frise_base extends MovieClip
    {
        // déclaration des occurrences de la scène
        public var boutonGauche : SimpleButton;
        public var boutonDroite : SimpleButton;
        public var contenu : MovieClip;
 
        private static const MINI:Number = -800;
        private static const MAXI:Number = 0;
        private static const STEP:Number = 3;
 
        private var _dx:Number;
 
        public function Frise_base() 
        {
            _dx = 0;
            boutonGauche.addEventListener(MouseEvent.ROLL_OVER, vaADroite);
            boutonDroite.addEventListener(MouseEvent.ROLL_OVER, vaAGauche);
            boutonGauche.addEventListener(MouseEvent.ROLL_OUT, arret);
            boutonDroite.addEventListener(MouseEvent.ROLL_OUT, arret);
            addEventListener(Event.ENTER_FRAME, animContenu);
        }
 
        private function animContenu(e:Event):void
        {
            contenu.x += _dx;
            if (contenu.x < MINI) contenu.x = MINI;
            if (contenu.x > MAXI) contenu.x = MAXI;
        }
 
        private function arret(e:MouseEvent):void
        {
            _dx = 0;
        }
 
        private function vaADroite(e:MouseEvent):void
        {
            _dx = +STEP;
        }
 
        private function vaAGauche(e:MouseEvent):void
        {
            _dx = -STEP;
        }
    }
}

Graphismes

La mise en oeuvre des graphismes consiste en la réalisation suivante :

Je vous conseille de le faire de la façon suivante :

  • Tracer un rectangle représentant la zone visible (de couleur semi-transparente).
    • La convertir en symbole : “Frise”. Cela sera la base du composant. Le rectangle servira de masque.
  • Ajouter un calque sous le rectangle.
    • Placer dedans l'image.
    • La convertir en symbole.
    • Nommer l'occurrence : contenu.
  • Vous pouvez maintenant appliquer l'effet de masque au rectangle.
  • Ajouter un calque au-dessus : pour y placer les boutons.
    • Pour faire un bouton transparent :
      • Tracer une forme rectangulaire de couleur pleine (utilisé pour définir la zone sensible).
      • La transformer en symbole : choisir le type ”Bouton”.
        • Déplacer la forme en quatrième image-clef. Laisser les autres images-clefs vides.
      • Revenir à l'édition du symbole parent. Le bouton doit prendre une couleur bleue transparente.

  • Dupliquez l'occurrence pour avoir deux boutons.
    • Les nommer : boutonGauche et boutonDroite.

Liaison avec la Classe

Dans les propriétés du symbole :

  • spécifier la Classe : src0.grZ0.unNom.projet.Frise
  • spécifier la Classe de base : src0.grZ0.unNom.projet.Frise_base
    • Celle comportant le code.

cours2009/multimedia/projet_basique_interactions_sur_les_pages.txt · Dernière modification: 2010/05/19 22:00 (modification externe)