tutoriaux flash et actionscript

Tutoriaux : Placer un texte sur le périmètre d'un cercle

1. Introduction

Ce tutoriel vous présentera une technique qui permet de placer un texte (facilement modifiable) sur le périmètre d'un cercle en rotation autour de son centre. Observez l'animation ci-dessous, modifiez le texte puis cliquez sur le bouton OK.

2. Dans la bibliothèque et sur la scène principale

- Ouvrez le logiciel Flash et créez un nouveau document. Définissez les dimensions de l'animation : 300 pixels de largeur et 300 pixels de hauteur.
- Dans le panneau "propriétés du document", définissez la cadence de l'animation à 30 images par seconde.
- Dans la bibliothèque de l'animation (CtrL+L), cliquez sur le bouton qui se trouve en haut à droite du panneau puis sélectionnez "nouvelle police". Dans le champ "Nom" saisissez "maPoliceDeLettre" puis à l'aide du menu déroulant "Police" sélectionnez "Comic Sans MS". Cliquez sur le bouton "OK". Dans votre bibliothèque, faites un clic droit sur l'unique symbole qui s'y trouve et cliquez sur "liaison". Dans le panneau "propriétés de liaison", sélectionnez la case à cocher "exporter pour actionscript". Cette opération est particulièrement importante et vous permettra de faire des rotations sur des champs de texte dynamiques. Le nom "maPoliceDeLettre" est un identifiant de liaison : il permettra de faire référence dans le code à la police de lettre que nous avons incorporée dans notre bibliothèque.
- Sur la scène principale, il n'y a rien : nous placerons les différents clips dynamiquement à l'aide d'ActionScript.

3. Le code et l'animation obtenue

Dans la première image clé de la scène principale, placez le code suivant :

phrase = "Ceci est un texte qui tourne tout seul ! Merci www.zoneflash.net !";
phrase += " ";
nbr = phrase.length;
rayon = 100;
 
cx = 150;
cy = 150;
 
vitesse = 1;
 
this.createEmptyMovieClip("monClip", 0);
monClip._x = cx;
monClip._y = cy;
 
monFormat = new TextFormat();
monFormat.size = 10;
monFormat.font = "maPoliceDeLettre";
monFormat.color = "0xCC3300";
monFormat.align = "center";
 
for(var i = 0; i < nbr; i++) {
var angle = i*2*Math.PI/nbr;
var x = rayon*Math.cos(angle);
var y = rayon*Math.sin(angle);
var texte = monClip.createEmptyMovieClip("texte" + i, i);
texte._x = x;
texte._y = y;
texte.createTextField("champDeTexte", 0, - 10, -20, 20, 20);
texte.champDeTexte.border = false;
texte.champDeTexte.selectable = false;
texte.champDeTexte.embedFonts = true;
texte.champDeTexte.text = phrase.charAt(i);
texte.champDeTexte.setTextFormat(monFormat);
texte._rotation = 90 + angle/Math.PI*180;
}
 
monClip.onEnterFrame = function() {
this._rotation -= vitesse;
}

4. Le code avec ses commentaires

On crée une chaîne de caractères qui correspond au texte que nous voulons afficher sur le périmètre d'un cercle.

phrase = "Ceci est un texte qui tourne tout seul ! Merci www.zoneflash.net !";

Nous ajoutons un espace blanc à la fin de la chaîne de caractères de manière à insérer un espace entre la première et la dernière lettre du texte qui seront placées à proximité l'une de l'autre sur le cercle.

phrase += " ";

Nous calculons le nombre "nbr" de caractères qui figurent dans le texte que nous voulons disposer en cercle.

nbr = phrase.length;

Nous définissons le rayon du cercle sur lequel nous allons placer une à une les différentes lettres de notre phrase. Plus le texte est long plus le rayon du cercle doit être grand...

rayon = 100;

Nous définissons l'abscisse "cx" du centre du cercle.

cx = 150;

Nous définissons l'ordonnée "cy" du centre du cercle. Dans le cas présent le centre du cercle est confondu avec le centre de l'animation.

cy = 150;

Nous définissons la vitesse de rotation du cercle autour de son centre. Plus ce paramètre est grand, plus le cercle tournera vite. On peut imaginer de faire varier ce paramètre en fonction du temps écoulé ou de la position du curseur... En donnant une valeur négative au paramètre "vitesse", on modifie le sens de rotation du texte.

vitesse = 1;

Nous plaçons sur la scène principale un clip vide que l'on nomme "monClip". C'est à l'intérieur de ce clip que nous placerons ultérieurement les différentes lettres de notre phrase.

this.createEmptyMovieClip("monClip", 0);

Nous définissons l'abscisse et l'ordonnée de "monClip" à l'aide des constantes "cx" et "cy".

monClip._x = cx;
monClip._y = cy;

Un peu plus bas dans ce script, nous allons créer des champs de texte dynamiques dont nous formaterons le contenu à l'aide d'un objet TextFormat.

monFormat = new TextFormat();

Nous définissons la taille des caractères.

monFormat.size = 10;

Nous définissons le nom de la police que nous allons utiliser pour remplir les champs de texte. "maPoliceDeLettre" est l'identifiant du symbole Font que nous avons placé dans la bibliothèque de l'animation.

monFormat.font = "maPoliceDeLettre";

Nous définissons la couleur des caractères.

monFormat.color = "0xCC3300";

Nous définissons le positionnement du texte à l'intérieur du champ de texte.

monFormat.align = "center";

Nous utilisons une boucle "for" pour placer une à une les "nbr" lettres qui composent notre phrase.

for(var i = 0; i < nbr; i++) {

Nous calculons un angle de rotation afin de placer la lettre n°i de notre phrase sur la circonférence du cercle. Cet angle est exprimé en radians.

var angle = i*2*Math.PI/nbr;

Nous calculons les coordonnées "x" et "y" de la lettre n°i de notre phrase. Il s'agit de trigonométrie !

var x = rayon*Math.cos(angle);
var y = rayon*Math.sin(angle);

A l'intérieur de "monClip" nous plaçons un clip vide.

var texte = monClip.createEmptyMovieClip("texte" + i, i);

Nous plaçons ce nouveau clip vide en utilisant les coordonnées calculées précédemment.

texte._x = x;
texte._y = y;

A l'intérieur de ce clip vide, nous plaçons un champ de texte que nous nommons "champDeTexte". Les différents paramètres fournis à la fonction "createTextField" permettent de définir le positionnement, la largeur et la hauteur du champ de texte. Pour plus de détails, je vous conseille d'aller lire la documentation de cette fonction dans le menu "aide" de Flash.

texte.createTextField("champDeTexte", 0, - 10, -20, 20, 20);

Cette ligne de code ne sert à rien car par défaut les champs de texte n'ont pas de bordure. Pourquoi ai-je tout de même placé cette ligne de code ? Et bien parce que lorsque vous concevrez vous-même des animations semblables à celle-ci vous aurez certainement besoin de voir à un moment ou à un autre les limites de votre champ de texte (afin de le placer avec précision par exemple) : si vous avez besoin de visualiser le positionnement de votre champ de texte, il vous suffit de remplacer "false" par "true".

texte.champDeTexte.border = false;

Les champs de texte ne doivent pas être sélectionnables.

texte.champDeTexte.selectable = false;

Ce champ de texte utilisera une police de lettres qui se trouve dans la bibliothèque de l'animation. Si nous utilisons les polices de périphérique dans cette animation, il nous sera impossible d'appliquer des rotations à nos champs de texte.

texte.champDeTexte.embedFonts = true;

Nous définissons le contenu de notre champ de texte qui sera égal à la lettre n°i de notre phrase.

texte.champDeTexte.text = phrase.charAt(i);

Nous formatons le contenu du champ de texte à l'aide l'objet "TextFormat" défini précédemment.

texte.champDeTexte.setTextFormat(monFormat);

Nous appliquons une rotation au clip contenant le champ de texte. Cet angle est exprimé en degrés.

texte._rotation = 90 + angle/Math.PI*180;

Fin de la boucle "for".

}

Nous définissons une fonction qui sera exécutée à chaque image de l'occurrence de "monClip". Cette fonction modifie la propriété _rotation de "monClip" qui tournera alors autour de son centre à vitesse constante.

monClip.onEnterFrame = function() {
this._rotation -= vitesse;
}

Accueil | Tutoriaux