[TUTO MX] Déplacer un objet - InfographiK

eRom · #1 (**permalink**) 18/12/2003, 22h00

Bonjour à tous,

Présentation
Alors un petit peu d'actionscript pour déplacer un objet sur notre scène Flash. Le tout sans faire d'interpolation manuelle, d'animation, ....

Dans ce tuto, nous allons voir la notion de prototype et voir comment les proto facilitent la vie...

Généralités
Dans notre exemple, on veut déplacer un clip (élément) en cliquant quelque part avec notre souris.
Graphiquement, on va créer un rectangle, assez grand (400x300) et en faire un MovieClip. Nommons son instance MCzone.
Deuxièmement, on créer un cercle, lui beaucoup plus petit, et on le transforme en MovieClip. On nomme son instance MCobjet.
Pour résumé on a 2 MovieClip :
- MCzone
- MCobjet

(Les fichiers sources seront bientot disponibles, ça sera plus facile avec les fichiers FLA).

ActionScript
On va donc créer 2 prototypes pour nos MovieClip.
Un prototype pour le faire bouger.
Un autre pour calculer son déplacement.

Pour la définition des prototypes, je vous laisse consulter l'aide de Flash.

ActionScript Code:

MovieClip.prototype.vitesse = function(prop, pos, force) {
      this&#91;"vitesse"+prop] = (pos-this[prop])/force;
      return this&#91;"vitesse"+prop];
};
 
MovieClip.prototype.mouvement = function(posX, posY, forceXY) {
     this.onEnterFrame = function() {
          this._x += this.vitesse("_x", posX, forceXY);
          this._y += this.vitesse("_y", posY, forceXY);
          delete this.enterFrame();
     };
};

Ensuite il ne nous reste plus qu'à faire bouger notre MCobjet en appelant sa métode mouvement.
Je veux faire bouger mon MCobjet sur mon MCzone, soit :

ActionScript Code:

MCzone.onPress = function(){
 this._parent.MCobjet.mouvement(this._xmouse, this._ymouse,5);
}

et voilà....quand on click sur MCzone, MCobjet va se déplacer vers le point de Click.

Code complet

ActionScript Code:

MovieClip.prototype.vitesse = function(prop, pos, force) {
 this&#91;"vitesse"+prop] = (pos-this[prop])/force;
 return this&#91;"vitesse"+prop];
};
 
MovieClip.prototype.mouvement = function(posX, posY, forceXY) {
 this.onEnterFrame = function() {
  this._x += this.vitesse("_x", posX, forceXY);
  this._y += this.vitesse("_y", posY, forceXY);
  delete this.enterFrame();
 };
};
 
 
MCzone.onPress = function(){
 this._parent.MCobjet.mouvement(this._xmouse, this._ymouse,5);
}

Bon code à tous

**JaH_LiveS** · #2 (**permalink**) 21/12/2003, 06h05

C gentil de mettre à jour mon vieux tuto créé pour flash 4

Sinon dis moa dc, tu es amateur ou est-ce ton job ?

Mus@shi · #3 (**permalink**) 21/12/2003, 11h09

héhé, moi qui comptais me mettre a flash , merci pour les tutos

Speed · #4 (**permalink**) 21/12/2003, 11h53

Citation:

Provient du message de JaH_LiveS
C gentil de mettre à jour mon vieux tuto créé pour flash 4

Sinon dis moa dc, tu es amateur ou est-ce ton job ?

Je pense que c'est son job.

Merci sa me sera très utile Erom.

eRom · #5 (**permalink**) 21/12/2003, 13h01

Bonjour à tous,

Effectivement c mon boulot depuis 5 ans....
J'ai commencé sur Flash 3 et depuis je suis les évolutions...
Mais maintenant je fais plus trop d'"anim" sur Flash, mais je fais plutot de vrai appli complète....faut dire que depuis Flash MX les fonctions sont devenues énormes.....

@+

P.S : aujourd'hui quand je regarde mes post, il y aun gros problème sur mes tutos !! les portion compris entre les balises code ont pété les plombs....tout est mélangé...il n'y a plus de mise en page....c'est dommage et rend difficile la lecture....
A voir donc...

**JaH_LiveS** · #6 (**permalink**) 22/12/2003, 00h02

Utilises donc la balise AS spécialement concue pour l'ActionScript au lieu de la balise CODE.

J'édite ton tut' de suite !

[EDIT] voilà c fait ! J'avais meme pas remarqué tellement je suis habitué à reprendre le taff de personnes qui codent n'importe comment.

En tt cas merci du coup de main apporté dans cette rubrique, que je vais mettre à jour avec une partie réservée à l'AS2 si tu poste des tutos MX2004. Je codais beaucoup sur Flash avant la version MX, mais beaucoup moins depuis... et là avec l'as2 ça me donne envie de me replonger grave dedans !! (va falloir que je m'achete du temps !

)

**Smike** · #7 (**permalink**) 08/01/2004, 15h19

Citation:

Provient du message de eRom
Bonjour à tous,

P.S : aujourd'hui quand je regarde mes post, il y aun gros problème sur mes tutos !! les portion compris entre les balises code ont pété les plombs....tout est mélangé...il n'y a plus de mise en page....c'est dommage et rend difficile la lecture....
A voir donc...

Je suis entrain de voir pour ça, pour garder la mise en page et avec les couleurs.

stoopx · #8 (**permalink**) 09/01/2004, 01h56

merci pour ces tutos flash, j'aimerais bien voir ce que donne ton travail e-rom sur les aplis completes.

eRom · #9 (**permalink**) 09/01/2004, 13h58

Bonjour à tous,

Pas la peine pour les balises et mise en page (cf. Tuto Xml Partie 3).
J'ai automatisé un process chez moi pour exporter mon code As et lui appliquer des styles CSS.
Donc plus simple, plus rapide, et mieux présenté = Meilleur compréhension pour tous !

Concernant mes appli dur dur devous les montrer pour l'instant.
Les droits de diffusion ne m'étant pas accordés....

De plus j'ajouterais que bcp de mes travaux sont à titre de recherche personnel. Dans des applications directement commerciales, on reste souvent plus sobre, plus simple.
Mais il est toujours bon de savoir en faire plus avec un soft....

Si je peux je vais essayer de trouverquelques trucs à vous montrer.....mais je vous préviens, ce n'est pas non plus du jamais vu...lol, même en bossant depuis plus de 5 ans, je ne fais que commencer....longue est la route qui mène à la perfection.....lol lol

Allez @+

**JaH_LiveS** · #10 (**permalink**) 09/01/2004, 14h59

Ok c noté mais on va sans doute ajouter les balises xml quand meme pour plus de compréhension sur les portions only XML !

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email