[FLASH 8] Dessiner carré de manière progressive

Version imprimable

06/12/2006, 09h31
Alex35

[FLASH 8] Dessiner carré de manière progressive

Bonjour,
je ne suis pas tres doué en action script, mais je m'y mets serieusement car la partie graphique de flash et surtout le lien entre cette partie graphique et l'action script est assez flou...(du moins pour wam...)
Bref, il est donc possible de tout faire grace a l'action script? Si j'ai bien tout compris...
Donc pour commencer a "coder" j'aimerai juste savoir la technique pour dessiner un carré (quatre traits blancs) au centre d'une animation qui fait 1000 px sur 75 px, la carrré lui doit en faire 50 sur 50.
Wala d'avance merci!
Ensuite j'aurais plein d'autres choses a vous demander concernant l'action script....:lol: Mais chaque chose en son temps!
06/12/2006, 09h33
jean philippe

salut
tu devrais commencer par lire l'aide à lineTo() et moveTo()
06/12/2006, 09h45
Alex35

merci

c'est bon j'ai réussi a avoir mon carré!
Code:

1 2 3 4 5 6 7 this.createEmptyMovieClip("moncarré", 1); moncarré.lineStyle(1,0xFFFFFF,100); moncarré.moveTo(475,15); moncarré.lineTo(525,15); moncarré.lineTo(525,65); moncarré.lineTo(475,65); moncarré.lineTo(475,15);
mais si je veux que ce soit d'abord les traits du haut du et du bas qui apparraissent mais petit a petit , puis les traits dur le coté, petit a petit pour former mon carré?

j'ai testé cela mais c'est trop rapide et donc le carré est la mais pas d'effet de tracage des traits!
Code:

1 2 3 4 5 6 7 8 var i:Number; this.createEmptyMovieClip("moncarré", 1); moncarré.lineStyle(1,0xFFFFFF,100); moncarré.moveTo(475,15); for (i=475;i<=525;i++){moncarré.lineTo(i,15);} for (i=15;i<=65;i++){moncarré.lineTo(525,i);} for (i=525;i>=475;i--){moncarré.lineTo(i,65);} for (i=65;i>=15;i--){moncarré.lineTo(475,15);}

j'ai trouvé la classe "tween" qui apparemment repondrait le mieux a ce que je cherche, par contre pour afficher un point, qui deviendrait une ligne je n'ai pas trouvé sur quoi agir!
Code:

1 2 3 4 5 this.createEmptyMovieClip("trait_haut", 1); trait_haut.lineStyle(1,0xFFFFFF,100); trait_haut.moveTo(475,15); trait_haut.lineTo(525,15); var myTween:Tween = new Tween(trait_haut, "_width", Regular.easeInOut, 2, 50, 4);

06/12/2006, 11h11
dom_dev
bonjour,

c'est obligé que ça aille trop vite avec une instruction "for" ça c'est la vitesse du processeur comme échelle, utilise plutôt quelque chose comme ça:
Code:

1 2 3 4 5 6 7 8 9 i=475; onEnterFrame = function(){ moncarré.lineTo(i,15); if(i>=525){ delete this.onEnterFrame; } i++ }
nota : onEnterFrame c'est la cadence de l'animation 12 fois par seconde par exemple...
;)

bon, bah j'obtiens cela, mais malheuresement je n'ai que le trait du bas qui s'affiche...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var h:Number;
var b:Number;
this.createEmptyMovieClip("trait_haut", 1);
this.createEmptyMovieClip("trait_bas", 1);
trait_haut.lineStyle(1,0xFFFFFF,100);
trait_bas.lineStyle(1,0xFFFFFF,100);
trait_haut.moveTo(475,15);
trait_bas.moveTo(525,65);
h=475;
b=525;
onEnterFrame = function(){
     trait_haut.lineTo(h,15);
	 trait_bas.lineTo(b,65);
     if(h<=525){
          h++;
     }else{delete this.onEnterFrame;}
	 if(b>=475){
		 	 b--;
	 }else{delete this.onEnterFrame;}
 
}

06/12/2006, 12h02
freegreg
Tu as créé tes 2 traits au même niveau : Le second écrase donc le 1er
Code:

1 2 this.createEmptyMovieClip("trait_haut", 1); this.createEmptyMovieClip("trait_bas", 2);
Ps : Merci d'indiquer la version de flash que tu utilises
06/12/2006, 12h06
Alex35

yes merci!
et j'utilise flash 8!

et sinon pour augmenter la vitesse de tracage de mes traits? c'est le frame rate mais si je le passe par exemple a 30 y a des risques lorsque mon anim sera sur le net a savoir ralentissement lague...
06/12/2006, 12h49
dom_dev

pour la vitesse rien ne t'empeche d'incrémenter les indices plus rapidement...
tu peux tester :

indice += 3;
// au lieu de indice++;

après il faut faire attention aux effets de bord sur le controle de fin de boucle

:roll:
06/12/2006, 13h22
jean philippe

pour controler la vitesse, mieux vaut utiliser un setInterval plutot que enterframe :)
06/12/2006, 14h18
Alex35

Citation:

Envoyé par jean philippe

pour controler la vitesse, mieux vaut utiliser un setInterval plutot que enterframe :)

oui je veux bien que tu me montres un tite exemple de setintervalles car faire indice=indice+3 rend l'animation saccadée(ce qui est logique)...
Je vais plutot cherecher du coté de setInterval

je dois avoir un probleme de logique avec setInterval car j'ai cela:

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
40
41
42
function Début()
{
var d:Number;
var g:Number;
var h:Number;
var b:Number;
this.createEmptyMovieClip("trait_haut", 1);
this.createEmptyMovieClip("trait_bas", 2);
this.createEmptyMovieClip("trait_droite", 3);
this.createEmptyMovieClip("trait_gauche", 4);
trait_haut.lineStyle(1,0xFFFFFF,100);
trait_bas.lineStyle(1,0xFFFFFF,100);
trait_droite.lineStyle(1,0xFFFFFF,100);
trait_gauche.lineStyle(1,0xFFFFFF,100);
trait_haut.moveTo(475,15);
trait_bas.moveTo(525,65);
trait_droite.moveTo(525,15);
trait_gauche.moveTo(475,65);
g=65;
d=15;
h=475;
b=525;
function Carré(){	
    trait_haut.lineTo(h,15); 
	if(h<525){
        h++;
     }else{clearInterval(intervalId);}
	 trait_bas.lineTo(b,65);
	 if(b>475){
		 b--;
	 }else{clearInterval(intervalId);}
     trait_gauche.lineTo(475,g);	
     if(g>15){
          g--;
     }else{clearInterval(intervalId);}
	 trait_droite.lineTo(525,d);
	 if(d<65){
		 d++;
	 }else{clearInterval(intervalId);}
}
intervalId = setInterval("Carré", 2);
}

mais rein en retour..

06/12/2006, 15h03
Alex35

intervalId = setInterval(Carré, 2);

sans guillemets!

Merci jean Phillipe!
06/12/2006, 15h09
freegreg

Résolu ? Pense à cliquer sur le bouton prévu à cet effet en bas de la page

J'ais retrouvé ca ...
Pour qui veux....

Code:

1
2
var my_form:RealTrace=new RealTrace(_root);
my_form.traceLine();

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
class RealTrace
{
	static var whatForm:Number=new Number(0);

	private var draw:MovieClip;
	private var i:Number;
	private var pointx:Array;
	private var pointy:Array;
	private var intervalID:Number;
	private var speed:Number;//vitesse de "rafraichissement"
	private var delta:Number;//pas d'incrementation : precission
	private var angle:Number;
	private var module:Number;
	private var raiseModule:Number;

	function RealTrace(mc:MovieClip)
	{
		i=0;
		speed=10;
		delta=1;
		pointx=new Array(200,300,350,300,200,100,50,100,200);
		pointy=new Array(350,300,200,100,50,100,200,300,350);
		
		
		draw=mc.createEmptyMovieClip("draw"+whatForm, mc.getNextHighestDepth());
		whatForm++;

// bug sous flash playeur 7 gnu/linux
//		draw.beginFill(0x443322, 100);
		draw.lineStyle(1, 0x00ff00, 100);
		draw.moveTo(pointx[0], pointy[0]);
	}

	function traceLine()
	{
		var p1x:Number=new Number(pointx[i]);
		var p1y:Number=new Number(pointy[i]);
		var p2x:Number=new Number(pointx[i+1]);
		var p2y:Number=new Number(pointy[i+1]);
		var px:Number=new Number(p2x-p1x);
		var py:Number=new Number(p2y-p1y);

		module=Math.sqrt(px*px+py*py);
		if(py==0)
			angle=Math.acos(px/module);
		else
			angle=Math.acos(px/module)*py/Math.abs(py);

		raiseModule=0;

		intervalID=setInterval(this, "raiseLine", speed);
		
	}

	function raiseLine()
	{
		raiseModule=raiseModule+delta;
		if(raiseModule>module)
		{
			i++;
			draw.lineTo(pointx[i],pointy[i]);
			clearInterval(intervalID);
			if(i<(pointx.length-1))
				traceLine();
// bug sous flash playeur 7 gnu/linux
/*			else
				draw.endFill();
*/
		}
		else
		{
			draw.lineTo(raiseModule*Math.cos(angle)+pointx[i],raiseModule*Math.sin(angle)+pointy[i]);
		}
	}
}

Cette "classe" n'était qu'un test!
Il y a bcp de modif a faire pour que le code soit propre/réutilisable quoi que pas tres long.
La fonction constructeur est totalement a revoir!