Le mouvement d'un objet

Un point-clé pour les animations : la possibilité de programmer un mouvement

Voici un exemple simple, qui explique le principe de la mise en mouvement d'une bille (déplacer le point rouge du curseur).

La bille est un MovieClip, qui possède, comme tous les MovieClips, les propriétés _x et _y (abscisse et ordonnée en pixels, comptées depuis le coin en haut à gauche, et respectivement vers la droite et vers le bas).

Le curseur est un autre MovieClip, à qui on a donné la propriété _index.

Le script d'action d'image est tout simplement : bille1._x+=curseur1._index/10

La propriété _x de la bille est utilisée ici en écriture, et la propriété _index du curseur est utilisée en lecture. Il y a dialogue entre ces deux objets.

Une propriété fonctionne dans les deux sens : lecture et écriture.

Ouvrir le fichier bille1.fla.

On remarque que la timeline possède seulement 2 images, et que cela suffit pour entretenir le mouvement. En effet, l'animation est lue en boucle, et à chaque passage de la tête de lecture sur l'image 1, où est écrit le script, la position de la bille s'incrémente de la valeur donnée par le curseur. Celui-ci donne donc la vitesse instantanée de la bille. Une seule image ne suffirait pas, car alors le film resterait figé sur cette image.

Remarque : on peut supprimer l'image 2 (Insertion/Supprimer les images), et remplacer le script par celui-ci :
this.onEnterFrame = function() {
bille1._x += curseur1._index/10;
};
L'instruction this.onEnterFrame force la tête de lecture à repasser sur l'image 1, qui boucle donc sur elle même.

Vous pouvez maintenant modifier le fichier : ajouter une deuxième instruction, pour la propriété _y (panneau Actions), placer un deuxième curseur, une deuxième bille, une troisième (les prendre dans la bibliothèque et les poser sur la scène), etc...

Pour visualiser l'animation, appeler le menu Contrôle/Tester l'animation ou taper Ctrl+Entrée
Ne pas oublier de nommer chaque occurrence de MovieClip déposée sur la scène, sinon les instructions ne seront pas exécutées, puisqu'elles ne seront reçues par personne !

Un exercice pour terminer : dans le fichier pendule.fla, le pendule possède une propriété _angle, qui détermine la rotation, exprimée en degrés. Essayer de piloter le pendule avec le curseur, ou bien de lui donner une oscillation sinusoïdale.

Les calculs utilisant des fonctions autres que les 4 opérations se font en appelant l'objet Math ; exemple : pendule._angle=60*Math.cos(t)
Si vous n'y êtes pas parvenu, ouvrez le fichier pendule1.fla



retour au menu         suite : réaliser un curseur

avez-vous des commentaires ?