TUTORIELS 
Récupérer le contenu d'un fichier texte en Flash

Page 1 | 2 | 3

Rendre Flash dynamique en intégrant des variables chargées depuis un fichier texte externe.
 (3 octobre 2002)
 

Avec Flash 5
Parce que l'on a associé chaque champ à un nom de variable, le champ est modifié à chaque fois que l'on change sa variable. Le code est donc simple: il suffit de charger le fichier texte, et Flash se chargera de répartir le contenu selon les variables:

(première image-clé du claque "scripts")
// chargement du fichier sur la scène princpale
loadVariablesNum("article_f5.txt", 0);

loadVariablesNum() est une fonction qui importe des données extèrieures et définit les valeurs des variables dans un niveau. Tout est donc pris en charge par Flash. Par contre, il nous faut réaliser nous-même les boutons de défilement...

Pour ce faire, nous allons créer deux boutons, un pour chaque type de défilement. A l'aide des outils de dessin de Flash, créez une simple flêche sur le côté de votre champ "texte". Sélectionnez-la avec l'outil Flèche, et transformez-la en symbole (ctrl-F8 ou le menu Insertion / Convertir en symbole...). Nommez-le "fleche" et choisissez la comportement "Bouton". Après validation, votre dessin en encadré d'un trait bleu: c'est une occurence du symbole stocké dans la bibliothèque (ctrl-L ou pomme-L). Double-cliquez sur le symbole de la bibliothèque, vous êtes basculé sur la scène de ce bouton.
Le scénario d'un bouton est particulier: il ne possède que quatre images, qui représentent le quatre "états" graphique du bouton: Haut (état normal), Dessus (lorsque le curseur de la souris est au-dessus du bouton), Abaissé (lorsque l'utilisateur clique sur le bouton) et Cliquable (pas un état: c'est la zone cliquable du bouton). Chacune des ses image-clé peut avoir un aspect graphique unique, et même contenir des sous-animations, d'autres boutons...
Pour l'heure, nous allons rester au plus simple. L'état Haut contient déjà votre dessin de flêche. Etant donné que c'est la seule image clé su scénario, ce dessin s'applique au reste des autres états: la flêche ne changera pas d'aspects pendant un survol ou un clic, et la zone cliquable correspond à la zone de votre dessin où il n'y a pas de vide.
Revenez sur la scène principale. Etant donné que notre bouton est un symbole, nous pouvons nous en servir pour créer deux occurences, la seconde étant une rotaton à 180° de la première, afin d'en inverser le sens. Glissez donc une seconde occurence du symbole "fleche" sur la scène, du coté inverse de votre première flêche. En le gardant sélectionné, ouvrez le panneau Transformation (ctrl-T ou pomme-T) et entrez "180" dans le champ Pivoter. Validez, votre flêche a un tout autre sens...

Nous allons maintenant passer à la programmation du défilement, qui restera lui aussi très basique:

(sur l'occurence de la flêche dirigée vers le haut)
on (press) {
  texte.scroll = texte.scroll -1;
  // ou texte.scroll--;
}

(sur l'occurence de la flêche dirigée vers le bas)
on (press) {
  texte.scroll = texte.scroll +1
  // ou texte.scroll++;
}

Nous introduisons ici le gestionnaire d'évènements on(), qui gère tous les évènements utilisateurs, à la souris comme au clavier. Avec press, on demande au gestionnaire on() de surveiller les évènements souris, et plus particulièrement lorsque le bouton (gauche) de la souris est enfoncé alors que le curseur se trouve au-dessus du bouton Flash.
Si l'évènement survient, on augmente ou diminue la valeur de la propriété scroll du champ "texte". scroll définit l'endroit où le champ texte commence à afficher le contenu de la variable à laquelle il est associé. La diminuer ou l'augmenter fait donc défiler le texte dans un sens ou dans un autre...

Voilà pour nos champs dynamique avec gestion du défilement sous Flash 5. C'est très basique: il manque une barre de défilement par exemple. Mais cela nous permet de vous faire aborder certaines particularités de Flash.

Page 1 | 2 | 3

 
[ Xavier Borderie JDNet
 
Accueil | Haut de page