Forums Développement Multimédia

Aller au contenu

- - - - -

flash 8 et as2 : faire une pointe de fleche en bout d'un trait

CODE

36 réponses à ce sujet

#1 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 08 February 2016 - 00:53 AM

Bonjour
J'ai réalisé un flash qui permet aux utilisateurs de dessiner. Mon problème est le suivant : lorsque la souris est enfoncée, c'est le début de mon trait. l'utilisateur dessine alors puis il relâche la souris pour arrêter le trait. Comment faire pour qu'une pointe de flèche apparaisse au bout du trait lorsque la souris est lâchée? ou mieux encore, est-il possible que la pointe de flèche suive le mouvement de la souris lorsque le trait est en train de grandir?
Merci pour votre aise!
Guietfa

#2 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 08 February 2016 - 11:55 AM

Salut.

Beaucoup te diront qu'aujourd'hui c'est l'AS3, mais en cherchant dans mes archives, tu peux t'inspirer de ceci :


flch.onEnterFrame = function () {
this._x += (_xmouse - this._x) / 20;
this._y += (_ymouse - this._y) / 20;
this._rotation = (Math.atan2(this._y - _ymouse,this._x - _xmouse))*180/Math.PI;
};
 

Fichier(s) joint(s)



#3 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 08 February 2016 - 16:06 PM

Merci beaucoup pour ta réponse Jano mais je ne vois pas comment bien adapter cela à ma demande. Ce qui est chouette, c'est que du coup, la flèche suit bien la souris mais le problème c'est que lorsque l'utilisateur va lâcher sa souris, la flèche va disparaitre. Or moi, je veut qu'une pointe se forme sur cette extrémité.
J'ai téléchargé ton .fla mais ma version de flash ne le reconnait pas (flash 8). Je sais bien qu'on est rendu à AS3 mais ma version de flash ne le connait pas et je ne peux pas trop acheter une nouvelle version.

#4 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6997 messages

Posté 08 February 2016 - 18:42 PM

Bonjour,

Fais une flèche que tu place sous la souris pendant que tu dessine, puis quand on relâche le bouton copie cette flèche à la dernière position connue de la souris, dans le dernier sens connu.

En algo je verrais un truc du genre :

quand on clique pour dessiner
créer une nouvelle instance d'un clip "fleche"
le positionner à la position de la souris
enregistrer la position actuelle de la souris

quand on bouge la souris avec le bouton enfoncé
repositionne la flèche à la position de la souris
oriente la flèche grâce à la dernière position de la souris et sa nouvelle position
enregistre la nouvelle position de la souris

quand on relâche le bouton de la souris
copie l'instance de la flèche sur la scène à la dernière position de la souris et avec sa dernière orientation


Reste plus qu'à mettre ça sous forme de code, et là, l'AS2 est un peu loin pour moi, mais Jano pourra sans doute t'en dire plus.

#5 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 08 February 2016 - 19:17 PM

Salut M Spi.

Mes souvenirs d'AS2 sont loin également mais j'ai pondu un truc vite fait.
Oui je sais, les _root ne sont pas les bienvenus...

guietfa je n'ai plus Flach 8 mais essaie ce code :


flch._visible = false;
_root.createEmptyMovieClip("ligne_mc", 1);
_root.ligne_mc.lineStyle(1, "0x000000" , 100);
dessin = new Object();
dessin.onMouseDown = function() {
_root.ligne_mc.lineStyle(1, "0x000000" , 100);
_root.ligne_mc.moveTo(_xmouse , _ymouse)
_root.onEnterFrame = function() {
  _root.ligne_mc.lineTo(_xmouse  , _ymouse);
  _root.flch._x += ((_xmouse - _root.flch._x) / 2);
  _root.flch._y += ((_ymouse - _root.flch._y) / 2);
  _root.flch._rotation = (Math.atan2(_root.flch._y - _ymouse,_root.flch._x - _xmouse))*180/Math.PI;
  _root.flch._visible = true;
};
};
dessin.onMouseUp = function() {
delete _root.onEnterFrame;
};
Mouse.addListener(dessin);

 

Fichier(s) joint(s)



#6 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6997 messages

Posté 08 February 2016 - 21:00 PM

+1 Jano ;) c'est l'idée.

#7 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 08 February 2016 - 21:35 PM

Voir le messageMonsieur Spi, le 08 February 2016 - 21:00 PM, dit :

+1 Jano ;) c'est l'idée.
Merci.

Cerise sur le gâteau :


flch._visible = false;
_root.createEmptyMovieClip("ligne_mc", 1000);
_root.ligne_mc.lineStyle(1, "0x000000" , 100);
dessin = new Object();
dessin.onMouseDown = function() {
_root.ligne_mc.lineStyle(1, "0x000000" , 100);
_root.ligne_mc.moveTo(_xmouse , _ymouse)
_root.onEnterFrame = function() {
  _root.ligne_mc.lineTo(_xmouse  , _ymouse);
  _root.flch._x += ((_xmouse - _root.flch._x) / 2);
  _root.flch._y += ((_ymouse - _root.flch._y) / 2);
  _root.flch._rotation = (Math.atan2(_root.flch._y - _ymouse,_root.flch._x - _xmouse))*180/Math.PI;
  _root.flch._visible = true;
};
};
a = 0;
dessin.onMouseUp = function() {
delete _root.onEnterFrame;
a++;
duplicateMovieClip(flch , "f"+a , a);
_root["f"+a]._x = _xmouse;
_root["f"+a]._y = _ymouse;
_root.flch._visible = false;
};
Mouse.addListener(dessin);

 

Fichier(s) joint(s)



#8 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 08 February 2016 - 22:43 PM

Génial!
Merci beaucoup! il me semble que c'est exactement ce que je cherche! vive internet, vive l'entre aide et vive Jano et spi!!!

#9 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 08 February 2016 - 22:49 PM

C'est chouette mais j

#10 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 08 February 2016 - 23:14 PM

Par contre, je me rends compte que si j’arrête ma souris puis que j'attends qq secondes avant de lâcher le bouton gauche, la pointe de la flèche a alors tendance à tourner. bizarre!! Pas moyen d'améliorer cela? (même si c'est déjà très bien!)

#11 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 08 February 2016 - 23:41 PM

En remplaçant l'Enterframe par onMouseMove par exemple.

flch._visible = false;
_root.createEmptyMovieClip("ligne_mc", 1000);
_root.ligne_mc.lineStyle(1, "0x000000" , 100);
dessin = new Object();
dessin.onMouseDown = function() {
_root.ligne_mc.lineStyle(1, "0x000000" , 100);
_root.ligne_mc.moveTo(_xmouse , _ymouse)
dessin.onMouseMove = function() {
  _root.ligne_mc.lineTo(_xmouse  , _ymouse);
  _root.flch._x += ((_xmouse - _root.flch._x) / 2);
  _root.flch._y += ((_ymouse - _root.flch._y) / 2);
  _root.flch._rotation = (Math.atan2(_root.flch._y - _ymouse,_root.flch._x - _xmouse))*180/Math.PI;
  _root.flch._visible = true;
};
};
a = 0;
dessin.onMouseUp = function() {
delete dessin.onMouseMove;
a++;
duplicateMovieClip(flch , "f"+a , a);
_root["f"+a]._x = _xmouse;
_root["f"+a]._y = _ymouse;
_root.flch._visible = false;
};
Mouse.addListener(dessin);

 

Fichier(s) joint(s)



#12 guietfa

  • Guests

Posté 09 February 2016 - 07:46 AM

Génial. Merci beaucoup mais des solutions amènent de nouveaux problèmes : sur mon animation, j'ai crée une gomme qui permet d’effacer une flèche en cas d'erreur. Ici, la gomme(qui consiste à appliquer un coup de crayon très large de la couleur de l'arrière plan) permet bien d'effacer le trait mais pas la pointe (normal, c'est un clip!) Y'a-t-il moyen que la pointe ne soit pas un clip mais un trait comme pour la ligne de la flèche?

#13 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 09 February 2016 - 08:06 AM

Autre problème qui apparaît: quand j'utilise ma gomme, les pointes de flèches continuent à apparaître. Quelle est la ligne de code que je dois insérer pour que la pointe ne soit plus tracée lorsque je n'utilise plus le crayon?

#14 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 09 February 2016 - 10:59 AM

Au lieu de faire createEmptyMovieClip, faire duplicateMovieClip ou attachMovie pour ensuite le supprimer avec removeMovieClip.

Voir la doc (aujourd'hui journée chargée, pas le temps de me pencher sur le développement du code).

#15 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 09 February 2016 - 11:37 AM

Pas de soucis! Merci beaucoup. Je tente de me dépatouiller et si ça ne marche pas, je te fais signe!
Bon courage pour cette journée chargée!

#16 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 09 February 2016 - 19:47 PM

Et bien pour être très honnête, je suis totalement paumé! si tu trouve un peu de temps...

#17 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 09 February 2016 - 23:07 PM

Ce qui serait bien c'est que tu mettes un peu de code pour voir comment tu procèdes car chacun pense et code différemment.
Ou mieux, joints le fla qu'on voit où se trouve le problème.

#18 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 00:27 AM

bonsoir. Je viens de voir ton message!
Voici mon fla de base, sans le code que tu m'as proposé.
En bas, 4 boutons : un pour la remise à zero
un pour déplacer les clips
un pour tracer les fleches
et un pour effacer les fleches avec une gomme.

Mes problemes : la gomme n'efface pas les pointes de fléches et quand je clique sur un bouton, une pointe de fleche apparait
Bonne nuit tout le monde

#19 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 00:32 AM

Oups...

Fichier(s) joint(s)



#20 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 10 February 2016 - 15:51 PM

Me revoilà.

Dans ton code, qu'il me semble reconnaître, tu l'as doublé.

Inutile de faire 2 fois Mouse.addListener et onMouseDown, il suffisait d'inclure le code dans celui existant.

J'ai modifié certains truc, un indice pour éviter de dessiner la flèche sur les boutons, une condition pour ne pas dessiner la flèche avec la gomme.

Par contre, je n'arrive pas à supprimer la flèche (clip) suite à l'action de la gomme.
Le problème est de reconnaître le bon clip pour supprimer le bon. Si quelqu'un trouve la méthode...

Je te joint le fla enregistré pour flash8 en espérant que tu puisses l'ouvrir.

Fichier(s) joint(s)



#21 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 17:33 PM

Génial ! Merci beaucoup! Pour ce qui est du code initial, tu as raison, je me suis largement inspiré d'un code trouvé sur le net!
Pour ce qui est de la flèche à effacer, j'ai bien une idée mais sans aucune compétence pour la réaliser : pourquoi ne pas demander de tracer deux traits au moment où on lâche la souris en sachant que ces deux traits ont pour origine l'endroit où on relâche la souris... C'est pourtant simple à dire non!!? lol

#22 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 10 February 2016 - 17:37 PM

Voir le messageguietfa, le 10 February 2016 - 17:33 PM, dit :

pourquoi ne pas demander de tracer deux traits au moment où on lâche la souris en sachant que ces deux traits ont pour origine l'endroit où on relâche la souris ? lol
Cela signifie que tu n'auras plus la flèche qui suis le crayon.
Tracer 2 traits ok mais suivant quel angle ?

#23 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 17:41 PM

petite remarque au sujet du code envoyé :
en ouvrant le flash, je clique sur l'outil flèche. je trace plusieurs flèches. ensuite je clique sur "Recommencer". puis à nouveau flèche ; à chaque nouvelle flèche que je trace, une ancienne pointe de flèche disparaît. Bizarre non?

#24 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 17:47 PM

Pour information, on m'a proposé une autre approche un peu différente mais en as3 donc inutilisable pour moi :
Voici le code :

  private function Fleche(x1:Number, y1:Number, x2:Number, y2:Number, effacer:Boolean, cancan:Graphics):void
  {
   var Norme:Number;
   var cX:Number;
   var cY:Number;
   var Arrow:Array = new Array();

   const ALength:Number = 10; //
   const AWidth:Number = 7; //longueur et largeur de la pointe

   Norme = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

   if (Norme == 0)
        return;
   cX = (x2 - x1) / Norme;
   cY = (y2 - y1) / Norme;
   Arrow[0] = new Point(x2 - cX * ALength + cY * AWidth, y2 - cY * ALength - cX * AWidth);
   Arrow[1] = new Point(x2 - cX * ALength - cY * AWidth, y2 - cY * ALength + cX * AWidth);

   with (cancan)
   {
        if (effacer)
         clear();
        lineStyle(1, 0);
        moveTo(x1, y1);
        lineTo(x2, y2);
        lineTo(Arrow[0].x, Arrow[0].y);
        moveTo(x2, y2);
        lineTo(Arrow[1].x, Arrow[1].y);
   }
  }
 

ce code ne me parle pas le du tout!!!! j'imagine que c'est plus clair pour toi

Fichier(s) joint(s)



#25 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 10 February 2016 - 17:49 PM

A chaque fois que tu crées une flèche on incrémente une variable a, ainsi chacune sont nommées f1, f2, f3...
Lorsque tu cliques sur recommencer, on réinitialise la variable a=0 donc lorsque tu crées à nouveau f1, l'ancienne est écrasée et donc disparait.

#26 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 17:50 PM

c'est l'idée que j'en avais

#27 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 17:54 PM

Comprends tu le code en as3 qui est écrit au dessus?

#28 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 10 February 2016 - 19:15 PM

Voir le messageJano 95, le 10 February 2016 - 17:37 PM, dit :

Cela signifie que tu n'auras plus la flèche qui suis le crayon.
Tracer 2 traits ok mais suivant quel angle ?
Si cette solution est simple à mettre en oeuvre je suis preneur même si du coup, ça perd en clarté.

#29 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 10 February 2016 - 23:55 PM

Voir le messageguietfa, le 10 February 2016 - 17:54 PM, dit :

Comprends tu le code en as3 qui est écrit au dessus?
Un peu, mais pas tout compris.

#30 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 11 February 2016 - 00:12 AM

peux tu m'expliquer comment dessiner la pointe de fleche quand je lache le btn de souris? pas grave si ca ne suis pas le mouvement de la souris!

#31 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 11 February 2016 - 10:51 AM

C'est cette partie que je n'arrive pas à comprendre, sinon je l'aurai déjà fait.

#32 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 11 February 2016 - 11:00 AM

OK. En tout cas, je tiens à vraiment te remercier pour ton aide précieuse.
Alors donc, ben euh ... Merci!

#33 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 11 February 2016 - 11:38 AM

Mais peut être que M Spi, s'il repasse par ici, pourra traduire le code en AS2 ou au moins l'expliquer.

Je suis en train de réfléchir comment trouver l'orientation de la flèche à dessiner au relâchement de la souris en fonction de la trajectoire suivie.

#34 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 11 February 2016 - 14:18 PM

J'ai pondu un truc (avec l'aide du code en AS3).
C'est pas le pied mais c'est un début.
Tout réside dans le calcul de la position des extrémités des flèche pour les dessiner.

Fichier(s) joint(s)



#35 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 11 February 2016 - 14:56 PM

J'ai trouvé la solution.

J'ai pas l'habitude de coder avec cette méthode qui fonctionnait déjà en AS2.

Fichier(s) joint(s)



#36 guietfa

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 11 February 2016 - 16:49 PM

GENIAL!!! tu es un dieu pour moi!merci beaucoup!
Et voici une petite amélioration de ce dernier code.Du coup, la flèche suit le tracé!
Jano95, encore merci pour ta patience et ta disponibilité!

Fichier joint  code bon.fla   407 Ko   37 téléchargement(s)

- Afficher le SWF -
Fichier joint  code bon.swf   48.46 Ko   35 téléchargement(s)

#37 Jano 95

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 4558 messages

Posté 11 February 2016 - 17:16 PM

Bah oui en combinant les 2 méthodes.

Bravo et merci d'avoir posté la solution finale.




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP