Trucsweb.com

Trucsweb.com

Flash

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

RDFFav

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».défilement verticale texte dynamique MX ScrollBar multiligne Dynamic Text Multiline composante Flash UI texte externe components snaper scrollable ascenceur setScrollTarget new loadVars() onLoad success Ticker twTDefil2 twTextDefil2Barre 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»

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. Texte DynamiqueOuvrez la fenêtre des propriétés [CTRL+F3]. Spécifier que votre texte est dynamique; «Dynamic Text» ou «Input text».
  3. MultiligneSé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».
Composantes

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;

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 7152 - Pages vues : 107924
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@