Accueil | Tutoriaux

Tutoriaux : Créer un texte qui s'affiche lettre par lettre
 

1. Introduction
 

Dans ce tutoriel, vous apprendrez à programmer l'apparition d'un texte qui s'écrira lettre par lettre. Effet que l'on appelle communément "texte machine". Le bouton vert ci-contre vous permet de réinialiser l'animation.

De nombreux effets de texte sont réalisables à l'aide la fonction substr() qui permet de manipuler les chaînes de caractères.
 
2. Sur la scène principale
 

Sur la scène principale, placez un champ de texte dynamique et multiligne dont la largeur et la hauteur dépendront de la longueur du texte que vous désirez afficher. Dans le panneau "propriétés" du champ de texte, sélectionnez l'option "aligner à gauche" et nommez cette occurrence "affichage". Centrez cette zone de texte horizontalement et verticalement dans la scène principale.

Tout ce que vous venez de faire manuellement, aurait pu être réalisé à l'aide d'ActionScript mais je pense qu'il vaut mieux ne pas compliquer les choses inutilement.
 
3. Le code et l'animation obtenue
 
Dans le panneau "action" de l'image clé n°1, placez le code suivant pour obtenir l'animation ci-dessous.
  
texte0 = "La variable texte0 contient la phrase qui doit s'écrire lettre par lettre
dans le champ de texte dynamique et multiligne qui s'appelle affichage. Pour
comprendre comment cet effet a été réalisé et en inventer d'autres plus personnels,
il faut lire la documentation relative à la fonction String.substr().";
 
blancs = "                 ";
texte0 += blancs;
longueur = texte0.length;
n = 0;
 
onEnterFrame = function() {
if(n != longueur) {
var texte1 = texte0.substr(0, n) 
affichage.text = texte1;
n++;
} 
else {n = 0;}
}
 

 

Si vous voulez que votre texte ne s'écrive qu'une seule fois, il suffit de remplacer la ligne de code :

else {n = 0;}

par :

else {delete this.onEnterFrame;}
 
4. Le code avec ses commentaires
 
Il suffit de lire ce que contient la variable texte0 pour comprendre à quoi elle sert...
texte0 = "La variable texte0 contient la phrase qui doit s'écrire lettre par lettre dans le champ de texte dynamique et multiligne qui s'appelle affichage. Pour comprendre comment cet effet a été réalisé et en inventer d'autres plus personnels, il faut lire la documentation relative à la fonction String.substr().";
 
La variable "blancs" est une chaîne de caractères composée de simples espaces. Plus le nombre d'espaces est grand plus le temps d'attente avant le relancement de l'animation est grand.
blancs = "                           ";
 
On ajoute les espaces blancs à la fin de la chaîne de caractères qui s'appelle "texte0".
texte0 += blancs;
 
La variable "longueur" permet de connaître le nombre de caractères qui se trouvent dans la chaîne "texte0".
longueur = texte0.length;
 
La valeur du paramètre "n" est initialisée à zéro. Ce paramètre permettra de connaître combien de caractères sont affichés à chaque instant de l'animation.
n = 0;
 
Création d'une fonction qui sera appelée à chaque image.
onEnterFrame = function() {
 
On teste si la valeur de "n" est différente de celle de "longueur". Si c'est le cas, c'est à dire si tous les caractères de la chaîne "texte0" ne sont pas encore affichés, on exécute les instructions qui se trouvent entre les accolades.
if(n != longueur) {
 
On crée une variable "texte1" qui est une sous-chaîne de "texte0" composée des "n" premiers caractères.
var texte1 = texte0.substr(0, n)
 
On place la chaîne de caractères "texte1" dans le champ de texte qui s'appelle "affichage".
affichage.text = texte1;
 
On majore "n" de une unité.
n++;
 
fin du bloc d'instructions exécutées si la condition ("n" est différent de "longueur") est vraie.
}
 
Si la condition ("n" est différent de "longueur") est fausse, c'est à dire si tous les caractères de la chaîne "texte0" sont affichés, on donne à "n" la valeur zéro et l'animation recommence.
else {n = 0;}
 
Fin de la fonction appelée à chaque image.
}
 
5. Une variante...
 
Il suffit de faire quelques modifications du code précédent pour permettre à l'internaute de taper un texte qui s'affichera ensuite lettre par lettre.
 
 
6. Une seconde variante... totalement inutile !
 
La fonction substr() permet toutes les fantaisies comme écrire par exemple un texte à l'envers ce qui facilite la compréhension des plus longs textes !
 
 
Accueil | Tutoriaux