La construction d’une interface sur la scène
CHAPITRE 6
161
Pour obtenir une courbe, vous devez définir un point de départ et un point d’arrivée (nommés
respectivement A et B sur la figure 6-9), puis préciser la direction de la courbure (D, D1,
D2 et D3).
Premier constat : en fonction de la position du point D (appelé point directeur), la courbe
change d’apparence. Vous devez simplement comprendre que plus ce point est éloigné du
segment qui relie les points A et B, plus l’amplitude de la courbe est importante (comparez,
sur la figure 6-9 les courbes avec les lettres D et D1).
Deuxième constat : pour préciser la direction de la courbe, vous devez rapprocher ou
éloigner ce même point D de A ou B. Comparez les trois courbes qui possèdent les lettres
D, D2 et D3. La courbe qui possède une courbure penchant vers la gauche a obligatoirement son point D2 qui se trouve lui-même plutôt vers la gauche (par rapport au point D).
L’éloignement du point directeur et sa position par rapport aux points A et B suffisent à
définir la courbure d’un segment. Comment va-t-on pouvoir à présent traduire cette logique
en ActionScript ? En utilisant la méthode curveTo().
var courbe:Shape = new Shape();
courbe.graphics.lineStyle(1,0,1);
courbe.graphics.moveTo(100,100);
courbe.graphics.curveTo(150,75,200,100);
addChild(courbe);
Cette méthode possède quatre paramètres. Voici deux lignes d’instructions, basées sur la
figure 6-9, pour vous aider à en comprendre la logique.
courbe.graphics.moveTo(A.x,A.y);
courbe.graphics.curveTo(D.x,D.y,B.x,B.y);
La méthode moveTo() fonctionne de la même façon que nous l’avons vu pour tracer une
droite. En revanche, la méthode curveTo() possède, en quelque sorte, deux points. Les
deux premières valeurs définissent les coordonnées x et y du point directeur, alors que les
deux dernières définissent le point d’arrivée de la courbe.
Tracer un carré ou un rectangle
Fichier de référence : Chapitre6/trace2.fla
Comme nous l’évoquions précédemment, pour tracer un rectangle ou un carré, il n’est
plus nécessaire de faire appel à plusieurs reprises à la méthode lineTo(), pour tracer une
série de droites consécutives formant un quadrilatère. Il vous suffit tout simplement
d’utiliser la méthode drawRect().
Remarque
Aidez-vous du fichier tracebeziers.fla pour mettre en pratique les explications ci-dessous. Manipulez
le point D de la figure 6-9 avec l’outil flèche blanche. Cliquez préalablement sur le point A pour faire apparaître la ligne directrice (définie par le segment allant du point A à D).
CHAPITRE 6
161
Pour obtenir une courbe, vous devez définir un point de départ et un point d’arrivée (nommés
respectivement A et B sur la figure 6-9), puis préciser la direction de la courbure (D, D1,
D2 et D3).
Premier constat : en fonction de la position du point D (appelé point directeur), la courbe
change d’apparence. Vous devez simplement comprendre que plus ce point est éloigné du
segment qui relie les points A et B, plus l’amplitude de la courbe est importante (comparez,
sur la figure 6-9 les courbes avec les lettres D et D1).
Deuxième constat : pour préciser la direction de la courbe, vous devez rapprocher ou
éloigner ce même point D de A ou B. Comparez les trois courbes qui possèdent les lettres
D, D2 et D3. La courbe qui possède une courbure penchant vers la gauche a obligatoirement son point D2 qui se trouve lui-même plutôt vers la gauche (par rapport au point D).
L’éloignement du point directeur et sa position par rapport aux points A et B suffisent à
définir la courbure d’un segment. Comment va-t-on pouvoir à présent traduire cette logique
en ActionScript ? En utilisant la méthode curveTo().
var courbe:Shape = new Shape();
courbe.graphics.lineStyle(1,0,1);
courbe.graphics.moveTo(100,100);
courbe.graphics.curveTo(150,75,200,100);
addChild(courbe);
Cette méthode possède quatre paramètres. Voici deux lignes d’instructions, basées sur la
figure 6-9, pour vous aider à en comprendre la logique.
courbe.graphics.moveTo(A.x,A.y);
courbe.graphics.curveTo(D.x,D.y,B.x,B.y);
La méthode moveTo() fonctionne de la même façon que nous l’avons vu pour tracer une
droite. En revanche, la méthode curveTo() possède, en quelque sorte, deux points. Les
deux premières valeurs définissent les coordonnées x et y du point directeur, alors que les
deux dernières définissent le point d’arrivée de la courbe.
Tracer un carré ou un rectangle
Fichier de référence : Chapitre6/trace2.fla
Comme nous l’évoquions précédemment, pour tracer un rectangle ou un carré, il n’est
plus nécessaire de faire appel à plusieurs reprises à la méthode lineTo(), pour tracer une
série de droites consécutives formant un quadrilatère. Il vous suffit tout simplement
d’utiliser la méthode drawRect().
Remarque
Aidez-vous du fichier tracebeziers.fla pour mettre en pratique les explications ci-dessous. Manipulez
le point D de la figure 6-9 avec l’outil flèche blanche. Cliquez préalablement sur le point A pour faire apparaître la ligne directrice (définie par le segment allant du point A à D).