|
|
> Méthodologie : Réaliser un préchargement simple
1. Commencer par placer la commande stop(); sur la première image clé de votre animation.
2. Placez un texte sur la scène qui indique "Chargement en cours"
3. Placez le script ci-dessous sur la première image clé de votre animation (à la suite du stop();)
stop();
total = _root.getBytesTotal();
_root.onEnterFrame = function() {
charge = _root.getBytesLoaded();
part = charge/total;
if (part == 1) {
delete _root.onEnterFrame;
gotoAndStop(2);
}
};Explications :
1. Nous stockons dans une première variable le poids total de l'animation. Nous avons d'ailleurs utilisé ce même nom ("total") pour nommer la variable.
2. A partir de cet instant, pour effectuer en boucle votre test de chargement de l'animation, vous devez utiliser le gestionnaire onEnterFrame. Nous l'associons ici à la scène (_root). Précisons que vous n'êtes pas obligés de cibler la scène (_root) comme c'est le cas dans notre exemple, vous pouvez tout autant cibler une occurrence si vous précharger une animation dans un clip.
3. Dans une variable intitulée charge, nous stockons le nombre d'octets chargés de l'animation.
4. Un test vérifie alors si la part chargée de l'animation correspond au poids total de l'animation. Si c'est le cas, on renvoie alors la tête de lecture sur une autre image de l'animation (on pourrait aussi simplement lancer la lecture de l'animation avec la commande play()) et on arrête l'exécution bouclée du gestionnaire.
Avec cette première méthode, on constate qu'aucune indication nous précise l'état du chargement. On ne sait pas s'il faut attendre 10 secondes ou 2 minutes. Il faudrait voir un pourcentage s'incrémenter ou une animation dont la progression (agrandissement, déplacement, rotation) évoluerait sur un axe, une échelle, un repère. Suivez alors la méthodologie N°2.
> Méthodologie N°2 : Réaliser un préchargement avec une animation proportionnelle
1. Commencer par placer la commande stop(); sur la première image clé de votre animation.
2. Placez un texte dynamique sur la scène dont le nom de variable est affichage
3. Placez un clip sur la scène, nommez son occurrence : ex. barre
4. Placez le script ci-dessous sur la première image clé de votre animation (à la suite du stop();)
stop();
total = _root.getBytesTotal();
_root.onEnterFrame = function() {
charge = _root.getBytesLoaded();
part = Math.ceil((charge/total)*100);
affichage = part+" %";
barre._xscale = part;
if (part == 100) {
delete _root.onEnterFrame;
gotoAndStop(2);
}
};N.B. : Il est très important de régler le point d'alignement de votre clip sur l'un de ses 4 côtés. Pour notre exemple, il est nécessaire de le placer à gauche.
Avec cette deuxième méthode, vous pouvez constatez que nous ajoutons simplement un clip et un texte dynamique qui nous informent de l'état de chargement de l'animation.
La calcul de la variable part est arrondi grâce à la fonction Math.ceil().
Précisons tout de même que la cadence de votre animation fait varier le rythme de rafraîchissement de l' affichage de votre texte dynamique et de l'animation de votre clip).
Remarque : Avant tout, précisons ce que nous entendons par "transformer" une occurrence. Nous voulons parler de mise à l'échelle, de rotation et de symétrie (pourquoi pas de transparence également).
A présent, voyons tout de suite comment il est possible de réaliser une interpolation de mouvement sans faire appel à plusieurs images de la timeline. C'est très simple, nous avons besoin de répéter en boucle le fait de déplacer une occurrence d'un ou plusieurs pixels. Vous devez donc utiliser le gestionnaire d'évènement onEnterFrame.
_root.onEnterFrame = function() {
sat._x++;
sat._y = 85;
};
Dans notre exemple, une occurrence intitulée "sat" se trouve sur la scène, elle est déplacée de 1 pixel par 1 pixel de façon continue. Ce script (ci-dessus) est placé sur l'image clé. Pour plus de détails sur les gestionnaires, consultez la partie consacrée à cet effet. Nous pourrions tout autant remplacer la propriété _x par _xscale (échelle horizontale), _rotation, _width(largeur en pixels), etc. Dans notre exemple, nous avons précisé une deuxième ligne d'instruction qui n'est pas nécessaire. Il s'agit juste d'expliquer aux développeurs novices le fonctionnements des propriétés de Flash (Cf. Exemple ci-dessous).
Remarque : Si vous deviez effectuer un déplacement en diagonale et non plus uniquement sur les axes horizontal ou vertical, vous utiliseriez le script suivant :
Explications : L'exemple ci-dessus aborde deux techniques de déplacement d'occurrence par le code, différentes de la première animation (ci-dessus, mouvement de gauche à droite) .
Balle N° 1 (balle de gauche) : Elle se déplace d'un pas qui correspond à un 10% de la distance à parcourir (distpx correspond au nombre de pixels qui séparent la position de l'occurrence à déplacer de sa position en x (horizontale) finale).
balle1._x += distpx*(0.1);
balle1._y += distpy*(0.1);
Balle N°2 : Elle se déplace de façon régulière mais il faut calculer au préalable un coefficient qui change le pas horizontal. En effet, si la distance horizontale est la même que la distance verticale, pas de problème de coef. Si la distance horizontale à parcourir est 2 fois plus grande que la verticale, le pas en x (pas horizontal) doit être 2 fois plus grand (pasx correspond à la direction que doit prendre l'occurrence : +1 pixel ou -1 pixel).
balle2._x += pasx*coef;
balle2._y += pasy;
Dans les deux cas, il faut exécuter ces instructions dans des boucles et annuler ces dernières si les occurrences sont arrivées à destination. Voici donc le code complet des deux déplacements :
Balle 1 :
destx = 400;
desty = 25;
balle1.onEnterFrame = function() {
distpx = destx-balle1._x;
distpy = desty-balle1._y;
balle1._x += distpx*(0.1);
balle1._y += distpy*(0.1);
if (Math.abs(distpx)<1) {
delete balle1.onEnterFrame;
}
};
Balle 2 :
destx = 400;
desty = 25;
pasx = (destx>balle2._x ? 1 : -1);
pasy = (desty>balle2._y ? 1 : -1);
coef = Math.abs(destx-balle2._x)/Math.abs(desty-balle2._y);
balle2.onEnterFrame = function() {
balle2._x += pasx*coef;
balle2._y += pasy;
if (destx-balle2._x<3) {
balle2._x = destx;
balle2._y = desty;
delete balle2.onEnterFrame;
}
};
Dans certains cas, vous aurez besoin de réaliser des interpolations de mouvements avec des trajectoires circulaires ou ondulantes. Il devient alors difficile de réaliser un tel mouvement sans passer par les interpolations accompagnées d'un guide de mouvement. Et pourtant, c'est réalisable grâce aux fonctions sinus et cosinus de l'objet Math en ActionScript. Le plus difficile reste de trouver les paramètres à utiliser avec ces deux fonctions. Nous allons tenter de vous expliquer le principe. Commençons par cet exemple :
Nous avons pour la plupart d'entre nous de mauvais souvenir de nos cours de Math de 3e car ils étaient pour le moins abstraits.
2 + 3 ?
La réponse vous vient automatiquement à l'esprit car le signe "+" vous parle depuis votre plus tendre enfance. La soustraction est un peu plus compliqué et la division, n'en parlons pas. Et pourtant, les quatres opérations de base, _ = x et ÷ restent des calculs simples à comprendre avec des valeurs simples.
cos(3) ? ou sin(3) ?
Et voilà, vous vous bloquez ! Nous vous l'avons dit, nous allons vous expliquer les cosinus et sinus. Reprenons. Ne cherchez pas à calculer le résultat, seul le résultat nous intéresse, pas sa technique de calcul. Mais à quoi sert ce résultat ? Petit retour en arrière, à l'école, nous utilisions soit une calculette pour effectuer ce calcul, soit une "table" (un document plié en trois parties) présentant un tableau des différents résultats de calculs de cosinus et sinus. Nous allons utiliser les fonctions Math.cos() et/ou Math.sin() pour obtenir le résultat.
Quelque soit la valeur que vous préciserez entre les parenthèses, paramètre nécessaire pour ce calcul, vous obtiendrez toujours une valeur comprise entre -1 et 1. Et alors ? Et bien en faisant varier de façon régulière ce fameux paramètre nécessaire pour le calcul du cosinus ou du sinus, on peut obtenir d'autres valeurs. Quel intérêt ? Obtenir des valeurs qui représenteront un intervalle régulier cyclique. Quelles sont les valeurs que vous obtenez entre -1 et 1. Non, il n'y as pas que le 0.
-1, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 0.9, 0.8
cos(O)...........................................................cos(1.7)...............................................cos(3.14) .........
Dans l'exemple ci-dessus, nous démontrons qu'avec l'augmentation régulière d'une valeur (0 -> 1.7 -> 3.14 -> etc...) à placer dans le calcul du cosinus, on obtient toujours les mêmes valeurs (1 -> 0 -> -1 -> 0 -> 1 -> 0 -> -1). Si nous multiplions le résultat obtenu par 60 (par exemple), nous obtiendrons donc des valeurs comprises entre -60 à 60. Nous pourrions donc utiliser le résultat pour régler la position verticale d'une occurrence. C'est ce qui se passe dans l'exemple ci-dessous. Si vous regardez le code de l'animation ci-dessous, vous observerez que la valeur 85 a été ajoutée à la ligne d'instruction. C'est tout simplement pour définir l'axe horizontale à partir duquel on va retirer 60 ou ajouter 60 pixels.
_root.onEnterFrame = function() {
i += 0.1;
//Balle qui progresse vers la droite
sat._x++;
sat._y = 85+(Math.sin(i)*60);
//Balle de gauche
sat2._y = 85+(Math.sin(i)*60);
};
Avec une même valeur, (ex. 3), le calcul de cosinus et de sinus donnent 2 résultats différents. Regardons simplement la liste des valeurs ci-dessous présentées dans un tableau, elles sont croissantes et régulières. Paralellement, les résultats des calculs de sinus et cosinus (qui utilisent ces valeurs) sont cycliques.
Valeurs :
0
0,2
0,4
0,6
0,8
1
1,2
1,4
Cosinus :
1
0,9801
0,9211
0,8253
0,6967
0,5403
0,3624
0,17
Sinus :
0
0,1987
0,3894
0,5646
0,7174
0,8415
0,932
0,9854
Valeurs :
1,6
1,8
2
2,2
2,4
2,6
2,8
3
3,2
Cosinus :
-0,0292
-0,2272
-0,4161
-0,5885
-0,7374
-0,8569
-0,9422
-0,99
-0,9983
Sinus :
0,9996
0,9738
0,9093
0,8085
0,6755
0,5155
0,335
0,1411
-0,0584
Valeurs :
3,4
3,6
3,8
4
4,2
4,4
4,6
4,8
Cosinus :
-0,9668
-0,8968
-0,791
-0,6536
-0,4903
-0,3073
-0,1122
0,0875
Sinus :
-0,2555
-0,4425
-0,6119
-0,7568
-0,8716
-0,9516
-0,9937
-0,9962
Si nous combinons donc le calcul d'un sinus et celui d'un cosinus avec la même valeur, en les utilisant pour définir la position d'une occurrence sur la scène, nous obtenons des positions successives qui formeront un mouvement circulaire. N'oublions pas que nous multiplions le calcul des sinus et cosinus par un chiffre plus grand pour obtenir des valeurs plus grande. C'est ce qu'on appelle le rayon (60 pixels dans l'exemple ci-dessous).
_root.onEnterFrame = function() {
i += 0.1;
sat._x = 180+(Math.cos(i)*60);
sat._y = 85+(Math.sin(i)*60);
};
L'exemple ci-dessous nous démontre que la position d'une occurrence qui tourne est relative aux valeurs obtenues avec les calculs sinus et cosinus d'une même valeur.
Dans les anciennes versions de Flash, il était impossible de charger une image pour la placer dans un swf comme peut le faire une page HTML avec une image. Le lien vers un fichier externe à partir d'un swf était impossible. Il fallait donc transformer les images en swf et charger ainsi les swf comme des images. Aujourd'hui, avec Flash 6 (MX), le lien est possible. Un est exemple vous est proposé à l'adresse suivante : www.yazo.net/marine2. Il s'agit d'un diaporama qui comprend plus de 200 photos. Il serait en effet inimaginable que toutes les photos soient intégrées au swf pour 2 raisons. La première et la plus importante, le poids. Le swf pèserait plusieurs megaoctets, ce qui entraîinerait un preload interminable. La deuxième raison est liée à la mise à jour d'une telle animation. Il serait très difficile et surtout fastidieux de devoir modifier le code et le contenu de la bibliothèque de l'animation dès qu'un ajout de photo doit être effectué.
Vous devez utiliser les commandse loadMovie() ou loadMovieNum(). Pour commencer, vous devez faire la différence entre ces deux commandes qui proposent de techniques de travail différentes.
loadMovie() : Vous devez placer un clip sur la scène et nommer son occurrence. Vous chargez alors votre image jpeg en lieu et place du clip.
cadre.loadMovie("http://www.yazo.net/img1.jpg");
ou
loadMovie("http://www.yazo.net/img1.jpg","cadre");
loadMovieNum() : Vous chargez simplement votre image jpeg sur la scène ou sur un autre niveau.
loadMovieNum("http://www.yazo.net/img1.jpg",1);
Le chiffre 1 (dernier paramètre) de cette dernière ligne d'instruction permet de définir le niveau (plan) de chargement (la scène se situe au niveau 0).
Lorsque vous devez réaliser un diaporama, vous avez tout intérêt à charger vos images avec la commande loadMovie(). L'exemple ci-dessous vous démontre que des images qui se trouvent dans un dossier sur un serveur ou sur votre machine peuvent être placées dans un swf sans qu'elles aient été préalablement importées dans la bibliothèque de l'animation.
> Méthodologie : Charger une image sur la scène à la place d'un clip
1. Placez 3 images au format jpeg dans le même dossier que votre animation (ou dans un sous-dossier) ou sur un serveur
2 . Créez un clip
3 . Placez le 3 fois sur la scène
4 . Nommez les 3 occurrences obtenues (ex. : cadre1, cadre2, cadre3)
5 . Placez le script ci-dessous sur l'image clé de la timelinecadre1.loadMovie("http://www.yazo.net/img1.jpg");
cadre2.loadMovie("http://www.yazo.net/img2.jpg");
cadre3.loadMovie("http://www.yazo.net/img3.jpg");
Nous avons choisi de charger automatiquement les images au démarrage (puisque le code se trouve sur la première image clé de la timeline) mais nous aurions tout autant pu placer ces 3 lignes d'instructions dans un gestionnaire associé à l'occurrence d'un bouton. Pour faire vos essais, vous pouvez utiliser les mêmes adresses que celles que nous avons utilisé.
Attention : Lorsque vous placez un clip sur la scène, vous ne devez surtout pas le redimensionner (sauf si cela est voulu) car cela changerait la taille de votre image une fois importée.
Nous allons à présent réaliser un diaporama avec un image sur la scène qui va changer pour laisser sa place à une autre lorsqu'on clique sur 2 boutons ("image suivante", "image précédente").
> Méthodologie : Réaliser un diaporama
1. Placez 1 clip sur la scène
2. Nommez l'occurrence obtenue (ex. : cadre)
3. Placez deux boutons sur la scène
4. Placez le script ci-dessous sur l'image clé 1 de la timelineimage = 1;
cadre.loadMovie("http://www.yazo.net/img1.jpg");5. Placez les scripts ci-dessous sur les boutons "image précédente" et "image suivante"
on (press) {
image--
if (image<=0) image=5
cadre.loadMovie("http://www.yazo.net/img"+image+".jpg");
}on (press) {
image++
if (image>=6) image=1
cadre.loadMovie("http://www.yazo.net/img"+image+".jpg");
}
Explications : Le principe du diaporama est de visualiser des images les unes après les autres. Pour simplifier la réalisation d'un diaporama est ne pas avoir recours au PHP ni aux listes, il vous suffit de préfixer toutes vos images avec le même nom (ex. img1.jpg, img2.jpg, img3.jpg, img4.jpg, etc). Le premier script (celui que se trouve sur l'image clé) consiste à initialiser une variable et charger la première image. Nous allons incrémenter la valeur de cette variable afin d'obtenir des chiffres qui se suivent. 1 puis 2 puis 3, etc. Il nne nous reste plus qu'à concaténer la chaîne de caractères "img" avec notre variable et concatener à nouveau le résultat avec la chaine de caractères ".jpg". Nous obtenons ainsi le suite de noms de fichiers énumérés ci-dessus. Dans notre exemple, nous avons précisé un chemin différent car les images se trouvent sur le serveur de Yazo.net. Si vos images se trouvent dans le même dossier que votre swf, voici la bonne ligne d'instruction.
cadre.loadMovie("img"+image+".jpg");
A chaque clic sur les boutons "Image suivante" et "Image précédente", la variable augment ou diminue mais nous devons surveiller la valeur qu'elle prend. Dans notre exemple, nous possédons 5 images, c'est pourquoi nous ajoutons une ligne d'instruction dans chaque script qui permet de boucler sur les images. Lorsque vous demandez à voir l'image 6, il vous donne la 1.
Il est parfois intéressant de tracer soit même ses propres tracés (ouverts et/ou fermés) en ActionScript sans que vous développiez pour autant une animation basée sur la réalisation de dessins ou que vous soyez un expert en programmation. Vous allez être surpris par la simplicité et la logique de développement d'une telle technique. Les tracés dynamiques présentent l'avantage d'alléger les animations. En effet, pour les formes qu'il est possible de réaliser en ActionScript, il n'est donc pas nécessaire de les importer et cela réduit donc le poids de l'animation. Vous pouvez tracer une droite, une courbe, une forme ouverte composée de droites et/ou courbes, une formes fermée, une forme avec ou sans contour, remplie ou vide. Les tracés dynamiques permettent donc de réaliser de nombreux tracés de natures différentes mais aussi les graphiques de représentation de
> Méthodologie : Tracer une droite sur la scène
1. Placez le script ci-dessous sur l'image clé
_root.createEmptyMovieClip("forme1", 1);
forme1.lineStyle(3, 0xDFD398, 100);
forme1.moveTo(60, 130);
forme1.lineTo(100, 30);
> Méthodologie : Tracer une courbe sur la scène
1. Placez le script ci-dessous sur l'image clé
_root.createEmptyMovieClip("forme1", 1);
forme1.lineStyle(3, 0xDFD398, 100);
forme1.moveTo(50, 150);
forme1.curveTo(100,100,150,150);
> Méthodologie : Tracer une forme fermée sur la scène
Il s'agit de la même technique que celle que nous venons d'aborder ci-dessus, vous devez simplement ajouter d'autres droites, les unes derrière les autres. Le coordonnées de la dernière droite, doivent être les mêmes que le point de départ (moveTo()).
1. Placez le script ci-dessous sur l'image clé
_root.createEmptyMovieClip("forme1", 1);
forme1.lineStyle(3, 0xDFD398, 100);
forme1.moveTo(60, 130);
forme1.lineTo(100, 30);
forme1.lineTo(140, 130);
forme1.lineTo(60, 130);
Lorsque vous définissez une droite ou une courbe, il est indispensable que vous définissiez un style de trait avec la méthode lineStyle(paramètre A, paramètre B, paramètre C).
- A : Epaisseur du trait exprimée en pixels
- B : Couleur (définie en hexa) du trait
- C : Transparence de la couleur du trait
Si vous créez une forme (2 traits au minimum qui n'ont pas le même angle d'inclinaison ou une courbe) et non plus un simple trait, vous pouvez alors la remplir. Dans ce dernier cas, vous n'êtes plus obligés de lui appliquer un contour (vous pouvez bien sûr cumuler les deux).
Comme nous vous l'expliquions ci-dessus, une forme peut être visible sur la scène grâce à son épaisseur/couleur de contour mais vous pouvez aussi la remplir. Pour se faire, la technique est très simple. Vous devez "englober" vos lignes d'instructions par les deux méthodes beginFill() et endFill(). Un exemple vous est présenté parmi toux ceux qui suivent.
Voici quelques exemples qui reprennent non seulement ce que nous venons de développer mais qui utilisent également d'autres techniques complémentaires.
Formes basiques : Création d'une forme vide, pleine sans contour et pleine avec contour.
Tracer une courbe avec curveTo() ou lieu de lineTo() :
Animer un tracé.
Utilisation des tracés dynamiques dans une boucle.
Utilisation des tracés dynamiques en récupérant des coordonnées dans une liste.
Animation qui a servi à réaliser le swf ci-dessus.
Téléchargez un dernier -
- Homer se dessine seul -
Vous aurez parfois besoin de placer un texte sur la scène en cours d'animation. Effectivement, vous ne savez peut-être pas à l'avance quelle sera la position dun texte à venir ou le nombre d'exemplaires. De nombreux cas vous conduiront à placer un texte un cours d'animation, de ce fait, il vous faut une technique. Vous pourriez prévoir un symbole de type clip qui contient du texte (dynamique) et le placer avec attachMovie() mais cela s'avérerait un mauvais choix dans la plupart des cas. Il ne vous reste plus qu'à utiliser la fonction createTextField().
> Méthodologie : Création dynamique d'un texte sur la scène
1. ...
2. ...> Méthodologie : Mise en forme dynamique d'un texte sur la scène
1. ...
2. ...
Si vous souhaitez lire votre timeline (ou celle d'un clip) dans le sens inverse, vous pouvez alors utiliser le script ci-dessous.
> Méthodologie : Inverser la lecture de latimeline...
1. Réalisez une animation (interpolation ou succession d'images) sur la timeline (ou dans un clip)
2. Placez 2 boutons sur la scène (pas sur le même calque que l'interpolation si vous en avez une)
3. Placez les scripts ci-dessous sur les 2 boutons qui se trouvent sur la scèneSur le bouton qui indique un sens de lecture normal :
on (press) {
_root.onEnterFrame = function() {
nextFrame();
};
}Sur le bouton qui indique un sens de lecture inversé :
on (press) {
_root.onEnterFrame = function() {
prevFrame();
};
}
Attention : Ne tapez pas previousFrame() mais prevFrame().
