Accueil | Tutoriaux

Tutoriaux : Tracé d'un texte manuscrit
 

1. Introduction
 
Vous êtes comme moi : vous aimez Ben (mais non pas Ben-Hur !) je parle de l'artiste Ben dont les oeuvres sont reproduites un peu partout (t-shirt, vaisselle, panneaux publicitaires,...) : on peut même voir ses oeuvres dans les musées d'art moderne ! Vous voulez vous inspirer de cet artiste et créer une animation flash qui permet d'écrire en "live" un message écrit à la main... Bref vous voulez réaliser une animation semblable à celle qui se trouve juste en dessous de ce texte laborieux qui est censé décrire une animation que j'ai bien du mal à décrire : ce n'est pas pour rien que j'ai fait des études de maths ! Le meilleur moyen de se rendre compte de ce que ce tutoriel vous propose de réaliser est sûrement d'enlever vos yeux de ce texte insipide et de poser votre regard sur l'animation ci-dessous... ;-)
 
 
La glissière vous permet de faire varier la vitesse avec laquelle le texte est écrit. Le bouton en bas à droite permet de revoir l'animation sans modifier la vitesse. En quelques mots je vous explique la technique utilisée : à l'aide des outils de dessin vous tracez à l'intérieur d'un clip une ligne. Cette ligne sera utilisée comme un guide de mouvement pour gérer le déplacement d'un clip que nous nommerons "point". Ensuite nous déposons sur la scène une occurrence de cette ligne et avec un peu de code ActionScript nous récupérerons à chaque image les coordonnées du clip "point" pour tracer dynamiquement la trajectoire suivie par le clip "point".
 
2. Dans la bibliothèque
 
- Ouvrez le logiciel Flash et créez un nouveau document. Définissez les dimensions de l'animation : 400 pixels de largeur et 400 pixels de hauteur.

- Dans le menu "modification", sélectionnez "document" et choisissez le noir comme couleur d'arrière-plan.

- Dans le panneau "propriétés du document", définissez la cadence de l'animation à 30 images par seconde.

Pour une fois, la bibliothèque n'est pas totalement vide... Je vais essayer d'être le plus clair possible !

- Dans la bibliothèque, créez un nouveau clip, nommez le "monPoint". Au centre de ce clip placez un cercle rouge de 5 pixels de diamètre.

- Dans la bibliothèque, créez un nouveau clip, nommez le "monGuide". Avec l'outil crayon, tracez une ligne continue. Vous pouvez utilisez les options qui se trouvent en bas du panneau (redresser, lisser et encre) pour modifier l'allure de votre tracé. Si votre objectif est d'obtenir un texte manuscrit je vous conseille d'acheter une tablette graphique afin d'obtenir un tracé souple et arrondi. Faites un clic droit sur le calque contenant votre ligne et dans le panneau "propriétés du calque" sélectionnez le type "guide". A l'image n°300 de ce calque, faîtes un clic droit et sélectionnez la commande "insérer une image".

- Créez sous le calque précédent un nouveau calque. Dans le panneau propriétés de ce calque sélectionnez le type "guidé". Dans l'image n°1 de ce calque placez une occurrence du clip "monPoint". Dans le panneau "propriétés", nommez cette occurrence "point". Dans le menu "affichage", sélectionnez "accrochage" puis "accrochage aux objets". Placez le clip point à la première extrémité du guide de mouvement. A l'image n°300 de ce calque, faîtes un clic droit et sélectionnez "insérer une image clé". Sélectionnez le clip "point" qui se trouve sur cette image et placez le avec précision à la deuxième extrémité du guide de mouvement.

- Entre les images n°1 et n°300, faîtes un clic droit et sélectionnez "créer une interpolation de mouvement".

- Sur votre timeline, déplacez la tête de lecture de l'animation : le clip "point" devrait se déplacer en suivant la trajectoire définie par la ligne qui se trouve dans le calque guide...

- Créez dans la bibliothèque, un bouton quelconque qui nous permettra de relancer l'animation.
 
3. Sur la scène principale
 
- Sur la scène principale, placez une occurrence du clip "monGuide". Dans le panneau "propriétés" nommez cette occurrence "guide".
- Sur la scène principale, placez une occurrence de votre bouton et dans le panneau "propriétés" nommez cette occurrence "playAgain". Un clic sur ce bouton, nous permettra (avec un peu de code bien entendu) de revoir l'animation.
 
4. Le code et l'animation obtenue
 
Dans la première image clé de la scène principale, placez le code suivant :
  
vitesse = 5;
distanceMin = 10;
 
initialiser = function () {
clearInterval(intervalle);
this.createEmptyMovieClip("trajectoire", 0);
trajectoire._x = guide._x;
trajectoire._y = guide._y;
trajectoire.clear();
trajectoire.lineStyle(3, "0xFFFFFF", 100);
guide.gotoAndStop(1);
oldx = guide.point._x;
oldy = guide.point._y;
trajectoire.moveTo(oldx, oldy);
guide.point._visible = false;
intervalle = setInterval(nextImage, vitesse);
};
 
nextImage = function () {
guide.nextFrame();
if (guide._currentframe == guide._totalframes) {clearInterval(intervalle);
} else {
var newx = guide.point._x;
var newy = guide.point._y;
var dx = newx-oldx;
var dy = newy-oldy;
var d = Math.sqrt(dx*dx+dy*dy);
if (d>distanceMin) {
trajectoire.moveTo(newx, newy);
} else {
trajectoire.lineTo(newx, newy);
}
oldx = newx;
oldy = newy;
}
};
 
initialiser();
 
playAgain.onPress = function() {
initialiser();
};
 
 

Comme mes explications sur la création du guide mouvement ne sont peut être pas très clairs et afin d'éviter de recevoir des dizaines de mails vindicatifs "merde Vincent tes tutoriaux ne fonctionnent pas !", je préfère mettre à votre disposition le fichier source que vous obtiendrez en cliquant sur l'icône suivante :

 
5. Le code avec ses commentaires
 
Nous définissons une constante de l'animation qui nous permet de définir la vitesse avec laquelle la ligne sera tracée.
vitesse = 5;
 
Nous créons une fonction qui initialisera l'animation. Cette fonction sera appelée au début de l'animation et après chaque clic sur le bouton "playAgain".
initialiser = function () {
 
On annule l'appel répétitif à la fonction "nextImage".
clearInterval(intervalle);
 
On crée sur la scène principale un clip vide nommé "trajectoire". C'est à l'intérieur de ce clip que nous utiliserons les fonctions moveTo et lineTo pour tracer notre texte "manuscrit".
this.createEmptyMovieClip("trajectoire", 0);
 
Nous plaçons le clip "trajectoire" aux coordonnées exactes du clip "guide".
trajectoire._x = guide._x;
trajectoire._y = guide._y;
 
Nous définissons dans le clip "trajectoire" un style de trait : taille = 3, couleur = blanc, transparence = 100 %.
trajectoire.lineStyle(3, "0xFFFFFF", 100);
 
On place la tête de lecture du clip "guide" sur la première image clé.
guide.gotoAndStop(1);
 
On place la pointe de notre stylo virtuel aux coordonnées du clip "point" qui se trouve à l'intérieur du clip "guide".
trajectoire.moveTo(guide.point._x, guide.point._y);
 
On rend invisible le clip "point" qui se trouve dans le clip "guide". Si vous remplacez "false" par "true", vous verrez le cercle rouge de 5 pixels de diamètre se déplacer le long du guide mouvement... cela peut être un effet recherché...
guide.point._visible = false;
 
On appelle de manière répétitive la fonction "nextImage" à des intervalles de temps réguliers. Le paramètre "vitesse" correspond au nombre de millisecondes séparant deux appels de la fonction "nextImage".
intervalle = setInterval(nextImage, vitesse);
 
Fin de la fonction "initialiser".
};
 
Nous créons une fonction qui s'appelle "nextImage" et comme vous l'avez lu dans les commentaires qui précèdent, cette fonction sera appelée de manière répétitive.
nextImage = function () {
 
On demande à la tête de lecture du clip "guide" de se déplacer à l'image suivante.
guide.nextFrame();
 
"guide._currentframe" est le numéro de l'image sur laquelle se trouve actuellement la tête de lecture du clip "guide". "guide._totalframes" est le nombre total d'images qui se trouvent dans la ligne de temps ("timeline" en anglais) du clip "guide". Avec ce "if" nous testons si la tête de lecture du clip "guide" se trouve sur la dernière image de sa timeline...
if (guide._currentframe == guide._totalframes) {
 
... dans ce cas on annule les appels répétitifs à la fonction "nextImage". L'animation est alors terminée.
clearInterval(intervalle);
 
... sinon (c'est à dire si la tête de lecture n'est pas sur la dernière image), on trace dans le clip "trajectoire" un segment dont les coordonnées de l'extrémité sont égales à celles du clip "point" situé à l'intérieur du clip "guide".
} else {
trajectoire.lineTo(guide.point._x, guide.point._y);
}
 
Fin de la fonction "nextImage".
};
 
On appelle la fonction "initialiser".
initialiser();
 
Un clic sur le bouton "playAgain" permet d'éxécuter la fonction "initialiser" qui "recharge" l'animation.
playAgain.onPress = function() {
initialiser();
};
 
6. Pour aller plus loin...
 
Voici un message que je viens de recevoir dans ma boîte mail (sûrement en guise de remerciement !) :

"T'es bien gentil mon grand, mais moi je veux que mon point se déplace le long d'une ligne discontinue et ton script ben c'est de la daube ! Regarde un peu ce que j'ai obtenu en essayant d'écrire une petite phrase !"
 
En pièce jointe j'ai trouvé une animation flash que vous pouvez voir sur cette page...
 
Comme je ne tiens pas compte de l'ingratitude des personnes qui piquent des bouts de script sur mon site sans prendre le temps de signer le livre d'or et bien j'ai amélioré le code précédent pour satisfaire mon correspondant ! Il suffit de faire quelques modifications relativement simples : avant de tracer un segment, il suffit de calculer la distance qui sépare deux positions successives du clip "point". Si cette distance est supérieure à 10 pixels et bien on déplace la pointe de notre stylo en utilisant la fonction "moveTo"...
 
7. Dans le cas d'une ligne discontinue
 
Cette fois votre guide de mouvement est composé de plusieurs "morceaux". Pour chaque morceau vous devez faire une interpolation de mouvement du clip "point" qui devra se déplacer d'une extrémité à l'autre. Dans le panneau action de l'image clé n°1, placez le code suivant :
  
vitesse = 5;
distanceMin = 10;
 
initialiser = function () {
clearInterval(intervalle);
this.createEmptyMovieClip("trajectoire", 0);
trajectoire._x = guide._x;
trajectoire._y = guide._y;
trajectoire.clear();
trajectoire.lineStyle(3, "0xFFFFFF", 100);
guide.gotoAndStop(1);
oldx = guide.point._x;
oldy = guide.point._y;
trajectoire.moveTo(oldx, oldy);
guide.point._visible = false;
intervalle = setInterval(nextImage, vitesse);
};
 
nextImage = function () {
guide.nextFrame();
if (guide._currentframe == guide._totalframes) {
clearInterval(intervalle);
} else {
var newx = guide.point._x;
var newy = guide.point._y;
var dx = newx-oldx;
var dy = newy-oldy;
var d = Math.sqrt(dx*dx+dy*dy);
if (d>distanceMin) {
trajectoire.moveTo(newx, newy);
} else {
trajectoire.lineTo(newx, newy);
}
oldx = newx;
oldy = newy;
}
};
 
initialiser();
 
playAgain.onPress = function() {
initialiser();
};
 
Et voici l'animation obtenue avec son fichier source !
 
8. Quelques brefs commentaires...
 
Les principales modifications du code se trouvent dans la fonction "nextImage" : oldx et oldy sont les coordonnées du clip "point" à l'image n et newx, newy sont les coordonnées du clip "point" à l'image n + 1. On calcule la distance d qui sépare les points de coordonnées (oldx, oldy) et (newx, newy). Si cette distance d est supérieure au paramètre "distanceMin" on déplace la pointe de notre stylo virtuel au point de coordonnées (newx, newy). Sinon on trace le segment joignant les deux points.

Dernière remarque : si vous voulez obtenir une animation plus rapide vous pouvez jouer avec le paramètre "vitesse" et/ou modifier la cadence de l'animation.
 
 
Accueil | Tutoriaux