[FLASH MX2004] Simuler le traçage d'une ligne en AS, mais...

**thaisno** · 26/12/2004, 21h53

Bonsoir à tous,
Simuler le traçage d'une ligne en AS, mais comme on le ferait avec un crayon .

Problème : :shock: si je trace une ligne en actionScript, celle-ci est dessinée "plus vite que son ombre"...

Ce que je souhaiterais faire

c'est que cette ligne se dessine en 1 ou 2 secondes comme on le ferait avec
une régle et un crayon à la main.

Dans l'anim que je suis en train de mettre au point,

dans un 1° temps, une main avec son crayon, et une équerre se déplacent
vers un point de départ, puis :o dans un 2° temps, simule le déplacement vertical du traçage d'un trait, mais le trait se trouve dessiné
aussitôt l'action lancée

... et la main termine son mouvement mais

décalée et trop tard...

Sur un calque action j'ai donc positionné le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
MovieClip.prototype.transfo=function(p,d,a,t){ 
//p=valeur "_x" ou "_y" de monclip à déplacer, d=point de départ déplacement, 
//a=pt arrivé, t=temps du déplacement
	   clearInterval(this["inter"+p]) 
   var x=0 
   var i=10					//vitesse de déplacement du clip "equerre"
   var ref=this 
   this["inter"+p]=setInterval(function(){ 
      ref[p]=(a-d)/(t)*(x+=i/1000)+d; 
      updateAfterEvent(); 
      if(x>=t){ 
         clearInterval(ref["inter"+p]); 
         this[p]=a; 
      } 
   },i) 
}

Sur un bouton le code suivant qui au 1° clic (if) déplace dans un premier temps le brasDroit et l'équerre
et au 2° clic, (else) trace une ligne "instantanément" (c'est elle que j'aimerais voir se tracer à une vitesse
égale au déplacement du bras qui tient le crayon ), et déplace le bras sur l'axe y dans une vitesse normale...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
on (press) {
	if (trait1 != 4) {
			varJ=50
			trace ("coucou4")
			brasD_clp.transfo("_x",varJ+varKtremie/10,varJ+varMreculee/10,1,Math.sin)
			brasD_clp.transfo("_y",varJ+varLcage/10,varJ+varLcage/20,1,Math.sin)
			equerre.transfo("_x",varJ+varKtremie/10+10,varJ+varMreculee/10,1,Math.sin)
 
			trait1=4;
 
		} else  {
			moveTo (varJ+varMreculee/10,varJ+varLcage/20);
			lineStyle(2,0xFF0000,80); 
			lineTo (varJ+varMreculee/10,varJ+varLcage/10);
			brasD_clp.transfo("_y",varJ+varLcage/20,varJ+varLcage/10,1,Math.sin)
			gotoAndStop(11);
		}
}

Voilà j'espère être assez clair.

.. C'est sans doute au niveau de lineTo qu'il y a quelque chose à faire, mais quoi ???

Merci d'avance pour votre aide

...
@+Thaisno

**bolo** · 27/12/2004, 13h34

comme ca
http://www.developpez.net/forums/viewtopic.php?t=275854

**thaisno** · 27/12/2004, 14h05

comme ca
http://www.developpez.net/forums/viewtopic.php?t=275854

Pas mal du tout,

le principe est là, je vais essayer cet après midi d'adapter celà pour 1 seule ligne...

Si j'y arrive pas je te refais signe...

Et si j'y arrive je te refais signe

comme d'hab.

Merci, et @+ Thaisno

**bolo** · 27/12/2004, 14h20

au lieux de mettre 4 points tu ne mets que 2 points

**thaisno** · 27/12/2004, 14h47

Voilà, j'ai regardé celà de plus prés et celà donne ceci code ci-dessous pour 1 ligne

, en effet il suffit de ne donner que 2 points, surtout en ne mettant pas de virgules après le second

.
Pour garder une trace explicite du code j'ai ajouté après les // des notes,
mais il y a des zones que je suis incapable de comprendre

... et j'aimerais bien essayer de comprendre... est-ce que tu peux m'expliquer "please"...???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//Créer en AS dessiner une ligne progressivement.txt
point  = [ 
 {x:0, y:0}, 	//xA et yA, du point de départ 
 {x:100, y:100} 	//xB et yB, du point de d'arrivée 
] ; 
 
//var nbr:Number = 4; 
var speed:Number = 1/30; 		//vitesse du dessin de la ligne
var position:Number = 0; 		// ?????
var ptCourant:Number = 0 ; 		// ?????
 
calculePoints (ptCourant) ; 	//var xA:Number, yA:Number, xB:Number, yB:Number; 
 
// Dessine la ligne 				
this.lineStyle(0, 0xFF0000, 100); //type de ligne, couleur, transparence
this.moveTo(xA, yA); 			  //déplace le crayon au point de départ xA, yA
 
_root.onEnterFrame = function() { // ?????
  var x:Number, y:Number ; 
  position+=speed ; 
  if (position > 1-speed) { 
    x = xB ; 
    y = yB ; 
    if (++ptCourant < point.length) { 
    } 
    else delete this.onEnterFrame ; 
    calculePoints (ptCourant) ; 
    position = 0 ; 
  } 
  else { 
    x = barycentre(xA, xB, position); 
    y= barycentre(yA, yB, position); 
  } 
  this.lineTo(x,y); 
} 
//// 
function  barycentre(a:Number,b:Number,t:Number):Number { // ?????
  return (1 - t)*a + t*b; 
} ; 
function calculePoints (a:Number) { //fonction qui affecte les valeurs à chaque point
    xA = point[a].x ; 
    yA = point[a].y ; 
    xB = point[a+1].x ; 
    yB = point[a+1].y ; 
} ;

Merci d'avance et @+ Tahisno

**bolo** · 27/12/2004, 15h36

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var position:Number = 0;       // ?????

c la position du point

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var ptCourant:Number = 0 ;       // ?????

on commance par le point 0

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function  barycentre(a:Number,b:Number,t:Number):Number { // ?????

tu ne comprends pas quoi la

c la fonction barycentre ce de la physique

Qu'est qu'un segment [AB] ? Réponse : c'est l'ensemble des barycentres des points A et B affectés respectivement des masses (1-t) et t lorsque t varie entre 0 et 1 !

**thaisno** · 27/12/2004, 15h51

c la fonction barycentre ce de la physique

je viens de voir çà avec ma fille qui est en 1°S... bon disons que... je passe c'est pas grave...

Merci pour tes réponses...c'est sympa.

l'essentiel c'est que celà fonctionne.

Allez @+ Thaisno

**thaisno** · 28/12/2004, 07h47

bonjour,

l'essentiel c'est que celà fonctionne

Je crois que j'ai dit une grosse bétise hier

... car celà fonctionne si l'on part du point 0 mais sinon

ça Mer........
Par contre j'ai continué mes recherches

et je suis tombé la dessus sur un autre forum... et là c'est OK

: Simuler le tacer d'une ligne en AS...

Pour tracer des lignes horizontales :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
MovieClip.prototype.traceHorizontale = function(initx, endx, posy, vitesse, precision, sens) { 
   if (!x) { 
      sens ? x = initx : x = endx; 
      this.moveTo(x, posy); 
      this.lineStyle(1, 0x000000, 100); 
   } 
   sens ? cond = (x<endx) : cond = (x>inix); 
   if (cond) { 
      for (i=0; i<vitesse; i++) { 
         sens ? x += (1/precision) : x -= (1/precision); 
         this.lineTo(x, posy); 
      } 
   } 
}; 
 
_root.createEmptyMovieClip("courbe", 0); 
_root.courbe._x = _root.courbe._y = 0; 
_root.courbe.onEnterFrame = function() { 
   _root.courbe.traceHorizontale(0, 200, 100, 100, 20, 1); 
};

et pour tracer des lignes verticales :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
MovieClip.prototype.traceVerticale2 = function(inity, endy, posx, vitesse, precision, sens) { 
   if (!y) { 
      sens ? y = inity : y = endy; 
      this.moveTo(posx, y); 
      this.lineStyle(1, 0x000000, 100); 
   } 
   sens ? cond = (y<endy) : cond = (y>iniy); 
   if (cond) { 
      for (i=0; i<vitesse; i++) { 
       sens ? y += (1/precision) : y -= (1/precision); 
         this.lineTo(posx, y); 
      } 
   } 
}; 
 
_root.createEmptyMovieClip("courbe", 0); 
_root.courbe._x = _root.courbe._y = 0; 
_root.courbe.onEnterFrame = function() { 
   _root.courbe.traceVerticale2(0, 200, 100, 100, 10, 1); 
};

Voilà quelque chose qui devrait en aider pas mal dont moi le premier !

Allez @+ Thaisno

**bolo** · 28/12/2004, 12h51

Je crois que j'ai dit une grosse bétise hier Embarassed ... car celà fonctionne si l'on part du point 0 mais sinon Nono ça Mer........

je comprends pas ta reflexion
ca marche pour n'importe quelle coordonnées du points

**thaisno** · 01/01/2005, 17h16

Bonjour, et bonne année à tous...

je comprends pas ta reflexion

Si tu reprends mon message du : thaisno Posté le: Lun Déc 27, 2004 14:47
Tu copies le code

et tu le testes en changeant les valeurs du 1° point x,y comme ci dessous, puis tu testes l'animation, tu verras qu'il fait bien le trait attendu

... mais... en plus un trait qui repart au point x0,y0

... c'est pour celà que je dit que ca M.....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
//Créer en AS dessiner une ligne progressivement.txt 
point  = [ 
 {x:500, y:250},    //xA et yA, du point de départ 
 {x:100, y:100}    //xB et yB, du point de d'arrivée 
] ;

@+Thaisno

[FLASH MX2004] Simuler le traçage d'une ligne en AS, mais...

Flash

Discussions similaires

Partager

Partager