Tracer un rectangle progressivement en AS

**Al3x** · 17/10/2006, 15h09

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...

Alors je voudrais quelques conseils pour réaliser ceci !

Merci d'avance

**jpboogie** · 17/10/2006, 15h56

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 :

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
 
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 :

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
 
 
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 ......

**Al3x** · 17/10/2006, 16h06

Merci je vais essayer ca !!!

**Al3x** · 17/10/2006, 16h26

J'ai l'erreur suivante à la compilation :

Code :

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

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

**CR_Gio** · 18/10/2006, 03h45

Salut,

Super mon truc va peut etre servire a quelqu'un

Tu connais ca :

Code :

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

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

)

Je te propose d'essayer un de mes autre truc en version 0.0.0.0.0.0.0.0.1

vas sur cette page pour compliler ou essayer le script que je te propose. (J'ais mi un exemple)

Code :

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

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

)

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

**Al3x** · 18/10/2006, 10h07

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 :

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
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++;
 
 
}

**CR_Gio** · 18/10/2006, 10h59

tu a une ligne a adapté :

Code :

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

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 :

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

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 ....

**Al3x** · 18/10/2006, 15h31

Merci bcp ca marche !!!

**Al3x** · 18/10/2006, 16h01

Cerise sur la gateau :

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

Merci encore !

**jean philippe** · 18/10/2006, 16h36

utilise un setInterval()

**Al3x** · 18/10/2006, 16h51

Envoyé par jean philippe

utilise un setInterval()

C'est ce que j'ai essayé mais je galere avec les onEnterFrame

**jean philippe** · 18/10/2006, 17h29

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

**Al3x** · 18/10/2006, 17h43

Envoyé par jean philippe

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

C'est bien pour ca que je galère

**CR_Gio** · 18/10/2006, 20h41

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

**jean philippe** · 18/10/2006, 20h46

sinon avec setInterval() ça fait ça :

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
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);

**Al3x** · 27/10/2006, 10h23

Merci tout fonctionne nickel !

Tracer un rectangle progressivement en AS

Flash

Discussions similaires

Partager

Partager