Flash

Étude de «scroll» ou le défilement Flash

Barre de défilement vertical avec texte dynamique - La composante (Flash UI) «scrollBar» et texte

Ajouter une barre de défilement à un texte est beaucoup plus simple depuis la version de Flash MX. En fait la barre est déjà réalisée, il suffit de la glisser et de l’accrocher à une instance de texte. Cette barre c’est la composante ou Flash UI «ScrollBar», disponible via l’onglet des composantes ou «components».

Attention : Contrairement aux versions précédentes, éviter le nom de variable et donner un nom d’instance au «Texte dynamique»

• Téléchargez l’exemple twTexteDefil2.zip

Création d’un élément texte et de la barre de défilement

1. Avec l’outil «A» dans la palette d’outils, glisser sur la scène la zone du texte et utiliser le carré en bas de cette zone pour définir l’espace visible du texte. Assurez-vous que l’outil «A» est bien sélectionné.
   
2. Ouvrez la fenêtre des propriétés [CTRL+F3]. Spécifier que votre texte est dynamique; «Dynamic Text» ou «Input text».
   
3. Sélectionnez multiligne ou «Multiline».
   
4. Il est très important de donner un nom d’instance (pas de nom de variable), par exemple «monTexte». C’est avec ce nom d’instance qu’il est possible d’attacher la barre de défilement.
5. Enfin, glisser la composante «ScrollBar» sur un des côtés de la zone du «Texte dynamique». La barre devrait s’attacher automatiquement (snaper) et ainsi prendre la bonne hauteur ou la bonne largeur. Donner lui le nom d’instance «oTexteBarre». Noter dans les propriétés de la composante le nom d’instance attachée, soit «monTexte».

Tout est en place, d’un côté le texte dynamique «monTexte» et de l’autre la barre de défilement «oTexteBarre». La seconde étape consiste à définir le texte et à réajuster la barre de défilement. Deux méthodes, la première plus simplement avec un texte interne. Et la deuxième méthode avec un texte externe.

Méthode A : Initialiser le texte dynamique interne
Sur l’action du cadre (frame action), initialisez la valeur du texte dynamique, l’instance «monTexte». Noter qu’il est possible de forcer un saut de ligne avec la barre oblique et un N (\n). Ensuite, il faut indiquer à la barre de défilement «oTexteBarre», la nouvelle longeur du texte avec la méthode «setScrollTarget». Code complet :

_root.monTexte = "Votre texte sur plusieurs lignes.\n\nPlusieurs paragraphe..."
oTexteBarre.setScrollTarget(monTexte);

Méthode B : Initialiser le texte dynamique externe
Pour ce faire, il faut évidement un texte externe avec un contenu encodé « URLEncoded ». Exemple du fichier «texte.txt»

Très important de mettre le texte et la composante dans un «movieClip». Pour ainsi avoir accès au comportement «on (load)». Avec ce code qui fait la lecture du texte externe pour le transférer dans l’élément dynamique «monTexte».

onClipEvent (load) {
  // Charge le texte externe
  oLoadText = new loadVars();
  oLoadText.load("Flash/texte.txt");
  // Exemple de fichier "texte.txt"
  // monTexte=La+rapidité+du+XML...
  oLoadText.onLoad = function (success){
    if (success){
      // Texte récupéré (this) et transféré dans
      // l’élément "Texte dynamique" (monTexte)
      monTexte.text = this.monTexte;
      if(monTexte.maxscroll>1) oTexteBarre._visible=true;
        // Enlève la barre de défilement si
        // Le texte n’est pas asser long.
        else oTexteBarre._visible=false;
    }
  }
}

Ce code sera exécuté une seule fois. Il charge le fichier texte. À la fin de l’opération, «onLoad» il transfert la variable obtenue «this.monTexte» dans l’instance «monTexte». Noter un petit ajout qui calcule, avec le nombre maximum de lignes, si l’affichage de l’objet «oTexteBarre» (la barre de défilement) est requis ou non. C’est tout, si le texte est asser long, la barre permettra de le faire défiler.

Attention, pour lire corectement un texte externe qui n’est pas encodé «unicode», ajouter ce «Codepage» sur le premier cadre (frame action).

system.useCodepage = 1;