J’espère que vous êtes bien assis parce que dans ce
tutorial nous allons carrément décoller. Je vais reprendre
un flash de Pavel Kaluzhny sur le rendu 3D de texte.
Le tutorial étant conséquent, nous l'avons scindé
en deux parties. Vous trouverez l'intégralité de celui-ci
dans sa version imprimable, ainsi que toutes les sources dans l'archive
disponible en téléchargement.
Et maintenant en route !
Effet de texte 3D
Cet effet va créer l’illusion d’un texte en 3 dimensions
recouvrant une surface animée. Par exemple, nous appliquerons un
mouvement de fluidité, ondulation ou rotation.
La scène principale contient un movieclip intitulé 3D text
avec pour instance : Text3D. Text3D contient un movieclip intitulé
3DChar (instance Char) qui lui-même contient un clip nommé
char (instance C). C contient un champ de texte dynamique auquel on a
attribué la variable c.
Voici un petit schéma :
Code
Nous commencerons avec ce code placé en frame 1 sur la scène
1 :
Ici rien de particulier. C’est à vous de personnaliser
le texte.
Maintenant nous placerons le code suivant sur Text3D :
Script :
onClipEvent (load) {
VPf = 260; // distance allant de la caméra au texte transformé
(point de vue)
centerx = 160;
centery = 120; // x et y : coordonnées du centre de l’image
sur l’écran
sclx = 20;
scly = 20;
pnt = new Object();
pnt1 = new Object();
pnt2 = new Object();
// points 3D temporaires (propriétés des objets this
x,y,z)
Char._visible = 0;
_xscale = 200;
_yscale = 200;
function FsF (u, v, p) {
p.x = (u - 8)*10;
p.y = (4-v)*7 + Math.cos(Math.sqrt((u-8)*(u-8)+(13-v)*(13-v))/2+timer/4)*18;
p.z = (v-4)*10;
}
/*Cette fonction détermine la forme 3D. Elle prend les coordonnées
(u,v) de la forme du champ de texte et retourne le point p dans
l’espace 3D*/
function Prf (p) {
p.x = centerx + p.x * VPf / (VPf - p.z);
p.y = centery - p.y * VPf / (VPf - p.z);
}
/*Cette fonction projette le point p (x,y,z) sur le plan Oxy à
partir du point de vue (0,0, VPf) et retourne le résultat
: p(x,y)*/
function SetText ( str ) {
for ( i=0; this["C"+i]._visible != undefined; i++ ) {
removeMovieClip ("C"+i);
}
x = 0;
y = 0;
num = 0;
for ( i=0; i<str.length; i++ ) {
ch = substring(str, i+1, 1);
if ( ord(ch) > 0x20 ) {
duplicateMovieClip ("Char", "C"+num, num);
this["C"+num].u = x;
this["C"+num].v = y;
this["C"+num].C.c = ch;
this["C"+num]._visible = 0;
num++;
x++;
} else if ( ch == " " ) {
x++;
}
if ( ord(ch) < 0x20 ) {
y+=1.5;
x = 0;
}
}
needUpdate = 1;
}
/* La fonction SetText crée ou actualise les symboles. Au
départ elle détruit tous les anciens objets et ensuite
duplique de nouveaux clips de Char. Les variables x et y sont les
coordonnées u et v dans la l’espace du champ de texte
*/
C._rotation = phy * (-180) / Math.PI;
_xscale = sx * 100 / 24;
_yscale = sy * 100 / 24;
_rotation = alpha * (-180) / Math.PI;
_x = px;
_y = py;
}
clr = new Color(_target);
}/* SetPos change les paramètres de clip (_rotation,_xscale,_yscale,_x,_y)
Aussi px et py sont les coordonnées d’écran
(coin haut-gauche) */
A suivre
Afin de mieux comprendre toute cette usine à texte, je vous
invite à bien étudier les explications et schémas
qui se trouvent dans la suite de tutorial. Vous y trouverez également
plusieurs exemples. Voir
la suite...
