Tracer un rectangle progressivement en AS

Version imprimable

17/10/2006, 15h09
Al3x

Tracer un rectangle progressivement en AS

Bonjour

Je cherche sous flash 8 à tracer un rectangle de facon progressive,

c-a-d comme un tracé de crayon : une ligne qui grandit puis une autre perpendiculaire, ainsi de suite pour former un rectangle.
Tout ca par l'actionscript afin que la taille soit facilement paramètrable

J'ai pas mal fouillé sur le web mais sans succès... :oops:

Alors je voudrais quelques conseils pour réaliser ceci !

Merci d'avance

Salut,

Voilà qui devrait faire l'affaire. Je ne l'ai pas inventé, c'est quelque chose qui était sur le CD avec mon bouquin ActionScript.

1 - une classe LineDrawer (fichier .as)

Code:

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
 
import mx.utils.Delegate;
import mx.events.EventDispatcher;
class LineDrawer extends MovieClipContainer {
  private var _x0:Number;
  private var _y0:Number;
  private var _x1:Number;
  private var _y1:Number;
  private var _framesTotal:Number;
  private var _frameCount:Number;
  public var addEventListener:Function;
  public var removeEventListener:Function;
  private var dispatchEvent:Function;
  public function LineDrawer(parent:MovieClip) {
    super(parent);
    EventDispatcher.initialize(this);
  }
  public function drawLine(thickness:Number, color:Number, x0:Number, y0:Number, x1:Number, y1:Number, frames:Number):Void {
    _target.lineStyle(thickness, color);
    _target.moveTo(x0, y0);
    _target.onEnterFrame = Delegate.create(this, draw);
    _x0 = x0;
    _y0 = y0;
    _x1 = x1;
    _y1 = y1;
    _frameCount = 0;
    _framesTotal = frames;
  }
  private function draw():Void {
    _frameCount++;
    var x:Number = _frameCount * (_x1 - _x0) / _framesTotal + _x0;
    var y:Number = _frameCount * (_y1 - _y0) / _framesTotal + _y0;
    _target.lineTo(x, y);
    if(_frameCount == _framesTotal) {
      delete _target.onEnterFrame;
      dispatchEvent({type: "complete", target: this});
    }
  }
}

2- dans ton .fla

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
var lineDrawer:LineDrawer = new LineDrawer(this);
var lineSegments:Array = [[100, 100], [200, 100], [200, 200], [100, 200], [100, 100]];
var index:Number = 0;
lineDrawer.addEventListener("complete", drawNext);
drawNext();
function drawNext():Void {
  if(lineSegments[index + 1] == undefined) {
    return;
  }
  var vertex0:Array = lineSegments[index];
  var vertex1:Array = lineSegments[index + 1];
  lineDrawer.drawLine(1, 0x000000, vertex0[0], vertex0[1], vertex1[0], vertex1[1], 10);
  index++;
}
 
C'est ce que tu voulais ? :D Il y a peut être mieux et plus simple, mais comme je ne sais pas faire et que ça fonctionne comme ça ......

17/10/2006, 16h06
Al3x

Merci je vais essayer ca !!!

J'ai l'erreur suivante à la compilation :

Code:

1
2
3
4
Ligne 3 : Impossible de charger la classe ou l'interface 'MovieClipContainer'.
     class LineDrawer extends MovieClipContainer {
 
Total des erreurs ActionScript : 1 	 Erreurs signalées : 1

18/10/2006, 03h45
CR_Gio

Salut,

Super mon truc va peut etre servire a quelqu'un :)

Tu connais ca :

Code:

http://devasco.perso.cegetel.net/appliTrace/appliTrace.html

Dans cette page, clique sur "afficher l'aide" et suis le petit tutoriel qu'est fait.
Voial! maintenat, tu sais comment générer les coordonnées de tes point

Erff j'ais plus flash sous la main.... c'est pas grave : CR_Gio a plus d'un tour dans son sac ( Hé!! je suis en forme aujourd'hui moi lol :mouarf: )

Je te propose d'essayer un de mes autre truc en version 0.0.0.0.0.0.0.0.1 :aie: vas sur cette page pour compliler ou essayer le script que je te propose. (J'ais mi un exemple)

Code:

http://devasco.perso.cegetel.net/flashOnLine/

Pour compiler, click sur fichier>compiler dans la barre d'outil de l'interface.

Une nouvelle s'affiche l'animation alors crée.

Bon j'ai arreter ce truc car un browser c'est pas fait pour et ca peu freezer =/ ... J'ais tester ce truc sur IE6, FF1.5 et konqueror ( si ca passe sous konqueror, ca passe partout :mrgreen: )

PS: merci de pas faire de lien en dur sur mon site (sinon google me le black list d'office)

Merci c'est exactement ce que je voulais !

mais au risque de paraitre lourd j'ai collé le code suivant dans une image de flash mais j'ai rien à la compilation :( (sur ton site ca marche nickel)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var X:Array=new Array(10.9,12.3,109.45,159.4,177.8,194.95,203.95,204.4,203.6,202.5,201.8,201.05,201.05,200.4,200.4,199.75,199.75,198.4,177.15,155.9,117,72.5,17.1);
var Y:Array=new Array(210.65,334.5,334.5,331.8,333.85,333.8,333.8,320.3,307.25,296.15,286.6,276.35,266.8,259.25,251.05,240.05,227.8,213.4,212.05,209.3,208.65,210,201.1);
 
var i:Number=new Number(1);
var ptLength:Number=new Number(X.length-1);
var my_mc:MovieClip=mc_root.createEmptyMovieClip("carre",mc_root.getNextHighestDepth());
 
 
my_mc.lineStyle(1, 0x000000, 100);
my_mc.moveTo(X[0],Y[0]);
my_mc.onEnterFrame=function(){
 
if(i==ptLength) delete this.onEnterFrame;
 
my_mc.lineTo(X[i],Y[i]);
i++;
 
 
}

tu a une ligne a adapté :

Code:

var my_mc:MovieClip=mc_root.createEmptyMovieClip("carre",mc_root.getNextHighestDepth());

Si tu a mi le code dans un clip, alors remplace mc_root par this

Ca devrai marché ....

Au pire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var X:Array=new Array(10.9,12.3,109.45,159.4,177.8,194.95,203.95,204.4,203.6,202.5,201.8,201.05,201.05,200.4,200.4,199.75,199.75,198.4,177.15,155.9,117,72.5,17.1);
var Y:Array=new Array(210.65,334.5,334.5,331.8,333.85,333.8,333.8,320.3,307.25,296.15,286.6,276.35,266.8,259.25,251.05,240.05,227.8,213.4,212.05,209.3,208.65,210,201.1);
 
var i:Number=new Number(1);
var ptLength:Number=new Number(X.length-1);
 
 
this.lineStyle(1, 0x000000, 100);
this.moveTo(X[0],Y[0]);
this.onEnterFrame=function(){
if(i==ptLength) delete this.onEnterFrame;
this.lineTo(X[i],Y[i]);
i++;		
}

Salutation ....

18/10/2006, 15h31
Al3x

:yaisse:

Merci bcp ca marche !!!

:lahola:
18/10/2006, 16h01
Al3x

Cerise sur la gateau :

serait il possible d'avoir le même code mais indépendant de la vitesse de l'animation ?

Merci encore !
18/10/2006, 16h36
jean philippe

utilise un setInterval()
18/10/2006, 16h51
Al3x

Citation:

Envoyé par jean philippe

utilise un setInterval()

C'est ce que j'ai essayé mais je galere avec les onEnterFrame
18/10/2006, 17h29
jean philippe

soit tu utilises Onenterframe , soit SetInterval() MAIS pas les deux :)
18/10/2006, 17h43
Al3x

Citation:

Envoyé par jean philippe

soit tu utilises Onenterframe , soit SetInterval() MAIS pas les deux :)

C'est bien pour ca que je galère :)
18/10/2006, 20h41
CR_Gio

bon ... on va pas se cassé la tete.
Pour augmenté la vitess, tu diminue le nombre de point,
pour diminuer la vitesse tu augmente le nombre de point

sinon avec setInterval() ça fait ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var vitesse = 50;
var X:Array = new Array(10.9, 12.3, 109.45, 159.4, 177.8, 194.95, 203.95, 204.4, 203.6, 202.5, 201.8, 201.05, 201.05, 200.4, 200.4, 199.75, 199.75, 198.4, 177.15, 155.9, 117, 72.5, 17.1);
var Y:Array = new Array(210.65, 334.5, 334.5, 331.8, 333.85, 333.8, 333.8, 320.3, 307.25, 296.15, 286.6, 276.35, 266.8, 259.25, 251.05, 240.05, 227.8, 213.4, 212.05, 209.3, 208.65, 210, 201.1);
var i:Number = new Number(1);
var ptLength:Number = new Number(X.length-1);
this.lineStyle(1, 0x000000, 100);
this.moveTo(X[0], Y[0]);
dessine = function () {
	if (i == ptLength) {
		clearInterval(intervalId);
	}
	this.lineTo(X[i], Y[i]);
	i++;
};
intervalId = setInterval(this, "dessine", vitesse);

27/10/2006, 10h23
Al3x

Merci tout fonctionne nickel !