|
Comme le titre ci-dessus l'indique, vous allez apprendre dans ce tutoriel à placer des clips sur une "grille". Nous allons créer une fonction qui s'appelle placer() et qui prend 8 arguments (xstart, ystart, nbrl, nbrc, v1x, v1y, v2x, v2y). Quelques explications s'imposent : xstart et ystart sont respectivement l'abscisse et l'ordonnée sur premier clip placé sur la scène (dans l'animation ci-contre vous pouvez faire varier ces deux paramètres en déplaçant à l'aide de votre souris le point qui se trouve en haut à gauche au chargement de la page). nbrl et nbrc représentent respectivement le nombre de lignes et le nombre de colonnes : dans l'animation ci-contre nbrl vaut 7 tandis que nbrc vaut 9. (v1x, v1y) sont les coordonnées du vecteur v1 représenté en noir dans l'animation ci-contre : vous pouvez modifiez ces 2 coordonnées en déplaçant l'extrémité du vecteur v1 avec votre souris. Par analogie, vous comprendrez facilement la définition des variables v2x et v2y et je vous laisse imaginer comment vous pouvez les faire varier... Dans les lignes suivantes vous trouverez la fonction placer() et quelques commentaires.
2. Rappels mathématiques
Parmi vous, ceux qui ont la chance de connaître les notions de vecteurs, de coordonnées et de bases comprendront facilement le principe de la fonction placer(). Nous allons faire varier un entier i entre 0 et nbrl - 1 et un entier j entre 0 et nbrc - 1, puis nous allons placer une occurrence de notre clip ayant pour coordonnées (i ; j) dans le repère d'origine (xstart ; ystart) et de base (v1 ; v2).
Survolez les points de la figure ci-contre pour comprendre ce charabia ! Pour placer le point de coordonnées (4 ; 2) on se déplace successivement de 4 "pas" parallèlement au vecteur v1 puis on se déplace de 2 "pas" parallèlement au vecteur v2.
|
|
|
| |
Imaginez que vous regardez à votre fenetre, et qu'un ballon passe dehors. Comment réaliser cette animation ? Pour le mouvement du ballon, pas de problème, il suffit de créer une interpolation de mouvement. Mais comment faire apparaitre ce ballon uniquement lorsqu'il doit etre visible. Pour ce faire, nous allons utiliser des masques. C'est un peu le principe du pochoir, à savoir un plan avec des trous grace auxquels on peut voir derrière.La seule différence est que, pour simplifier la démarche, flash foncionne dans le sens inverse, c'est à dire que l'on dessine la zone qui ne va pas etre masquée. Comme quand vous découpez votre pochoir, et bien la différence, c'est que vous gardez le morceau que vous avez découpé dans la feuille. Dans flash, on travaille pas avec des feuilles mais avec des calques. La notion de masques, pour ceux qui ne conaissent pas les logiciels de dessin, peut etre assez dur à assimiler, mais l'exemple qui suit est là pour vous aider à rendre concrete cette notion.
1==> Créez une nouvelle animation (CTRL N)
2==> Déssinez le mur de la pièce et le cadre représentant la fenetre, en veillant bien à ne pas mettre de remplissage sur les carreaux. vous devez obtenir quelque chose comme cela (en simplifié):
|
|
|
| |
Cette interpolation s'applique à peu près de la même manière que l'interpolation de mouvement. Elle permet cependant des choses complètement différentes. Sur l'animation précédente, imaginez que vous voulez que le rond qui se déplace change de forme et se transforme en carré alors qu'il continue son mouvement circulaire. C'est ce que nous allons faire maintenant.
1==> Ouvrez l'animation 3 ou téléchargez la ici ==> télécharger
2==> double cliquez sur le rond (qui est un symbole). Vous voyez qe vous entrez dans l'occurence (ou symbole) et que vous pouvez le modifier. Conséquence logique : puisque ce symbole, défini un seule fois dans la bibliothèque est utilisé dans toutes les images, si on le modifie, il est modifié dans toutes les images. Vous devez avoir ceci :
|
|
|
| |
Nous venons de voir l'animation mage par image. Cette méthode n'est pas sans inconvénients : le travail est long, minutieux, pas toujours avec de bons résultats ... L'interpolation de mouvement est une autre méthode de faire ce type de travail.
1==> Faites les trois premiers points du cours précédent ( animation image par image ).
2==> cliquez ensuite sur l'image 10, et appuyez sur F6 pour créer une nouvelle image clé. Votre barre d'animation doit alors ressembler à cela :
3==> vérifiez que vous êtes bien sur l'image 10 (la tete de lecture rouge doit se trouver sur le 10) et d"éplacez alors le rond en bas au centre de l'animation.
|
|
|
| |
1. Introduction
Mon goût pour le code me pousse souvent à ne rien mettre dans la bibliothèque de mes animations. Si j'ai besoin d'une forme géométrique, j'utilise ActionScript et quelques connaissances mathématiques pour tracer dynamiquement la forme voulue. Un visiteur de zoneflash m'a demandé d'écrire un tutoriel pour expliquer comment tracer une étoile. Dans un prochain tutoriel cette forme géométrique servira de masque et permettra de réaliser des transitions entre des photos. Observez l'animation ci-dessous : à l'aide des glissières pour pouvez faire varier les paramètres r1 et r2 qui représentent les rayons de deux cercles tandis que n représente le nombre de branches. Le bouton qui se trouve sous l'étoile permet de faire apparaître les deux cercles utilisés pour la construction de l'étoile.
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.
- Il n'y a rien dans la bibliothèque de l'animation et la scène principale et vide !
3. Le code et l'animation obtenue
Dans le panneau "action" de l'image clé n°1, placez le code ci-dessous.
MovieClip.prototype.tracerUneEtoile = function(r1, r2, n, c1, c2) {
var da = Math.PI/n;
this.lineStyle(0, c1, 100);
this.moveTo(r2, 0);
this.beginFill(c2, 100);
for(var i = 1; i < 2*n + 1; i++) {
var a = da*i;
var r = (i % 2 == 0) ? r2 : r1;
var x = r*Math.cos(a);
var y = r*Math.sin(a);
this.lineTo(x, y);
}
this.endFill();
}
this.createEmptyMovieClip("etoile", 0);
etoile._x = 150;
etoile._y = 150;
etoile.tracerUneEtoile(75, 140, 8, "0x336600", "0x66CC00");
|
|
|
| |
Introduction
Il s'agit d'apprendre dans ce tutoriel à tracer un secteur angulaire défini par un angle et un rayon. Pour cela nous détaillerons un prototype nommé intelligemment tracerUnSecteurAngulaire (y en a la dedans...). Dans un second temps, nous utiliserons ce prototype pour tracer une couronne. Malgré mes explications je ne suis pas certain d'avoir été clair : pour comprendre le sujet de ce tutoriel je vous conseille de regarder les animations ci-dessous... A quoi ces animations peuvent-elles bien servir ? En étudiant ce tutoriel vous saurez tracer des secteurs angulaires ce qui peut être utile pour tracer des diagrammes circulaires (les fameux "camemberts" du chapitre "statistiques" de troisième)... On voit également de nombreux sites qui utilisent des secteurs angulaires pour représenter l'avancement du chargement des actifs : photos, sons et animations...
Animation n°1 : tracer un secteur angulaire
Utilisez les glissières de cette animation pour faire varier l'angle et le rayon du secteur angulaire.
Animation n°2 : tracer une couronne
Pour tracer une couronne, il suffit de tracer deux secteurs angulaires de différents rayons et de différentes couleurs : le secteur de plus grand rayon en rouge et le secteur de plus petit rayon en blanc (au premier plan). Utilisez les glissières de cette animation pour faire varier l'angle, le rayon du grand secteur, le rapport entre les rayons des deux secteurs et l'opacité du petit secteur (en blanc).
Dans la bibliothèque et sur la scène
- Ouvrez flash et créez un nouveau document de 400 pixels de largeur et de 300 pixels de hauteur.
- Définissez la cadence de l'animation à 25 images par seconde.
- Il n'y a rien dans la bibliothèque de l'animation et la scène principale et vide.
|
|
|
| |
L'animation image par image est la méthode la plus lente pour produire une animation. Il faut réaliser chaque image qui va etre lue. Evidemment, lors d'un mouvement le nombre d'images à réaliser va vite etre très conséquent. Cette méthode trouve justement ses limites au niveau de la productivité.
Nous allons réaliser l'animation image par image d'un rond qui effectue une rotation sur le plan. Nous utiliserons la méthode image par image ce qui va nous permettre de mieux apprécier les fonctionnalités de flash par la suite.
1==>Allez sur fichier, nouveau. Une nouvelle animation s'ouvre.
2==> Prenez l'outil cercle et tracez un rond sur le coté gauche de votre animation, peu importe la couleur, du moment que le rond n'est pas trop gros. Faites un rond plus ou moins comme celui réalisé ci dessous :
|
|
|
| |
donne des informations quand à l'ocurence sélectionnée , son comportement (graphique, clip, bouton) et bien évidemment son nom !
donne les éffets appliqués à l'occurence, luminosité, teinte, alpha, avancés ..
cette palette nous renseigne sur l'image (ou frame), si elle a une etiquette, si elle est interpolée, et si c'est le cas, permet de paramétrer cette interpolation.
palette servant à paramétrer le son dans votre animation, elle permet el choix du son, les effets qui lui sont appliqués, la syncronisation, et le nombres de fois que le son sera joàué.
|
|
|
| |
palette qui donne des informations quand à la place occupée par le curseur de votre souris ...
palette définissant les parametres de transforamtion appliqués à un objet : angle de rotation, angle d'inclinaison ...
palette de parametrage des traits, on y donne l'épaisseur, le style, la couleur ...
cette palette donne la couleur du remplissage(pot de peinture) et son style, uni, ou dégradé, et si c'est le cas, de le paramétrer.
|
|
|
| |
la palete caractere permet de donner les parametres du texte que vous insérez, vous donnez alors la police, taille, le style, la couleur,l'espacement des lettres,le crénage (méthode qui donne une mailleure finition), le type, et le lien si il existe.
|
|
|
| |
le mixeur permet de choisir très facilement la couleur que l'on veut emplyer soit en remplissage soit en trait. On peut aussi paramétrer la transparence (alpha).
affiche la palette de couleur spécifique au fichier ouvert, le nuancier par défaut est celui des couleurs web (216).
|
|
|
| |
ceci est la barre d'outil de flash, c'est l'outil le plus important du logiciel.
outil fleche (V) et outil fleche sous sélectionner (A) sont sans nul doute les outils que vous utiliserez le . Il servent à saisir, sélectionner, déplacer ...
outil ligne (N)
outil lasso (L) : c'est un outil de sélection plus précis que la fleche.
outilo plume (P) : Pour dessiner des tracés précis formés de lignes droites ou de courbes lisses.
outil texte (T) : pour insérer du texte dans votre animation.
outil ovale (O) : sert à dessiner des ronds ou des ovales.
outil rectangle (R) sert à dessiner des carrés et des rectangles.
|
|
|
| |
| |
