Flash vers javascript

Version imprimable

Bonjour à tous,

Le pb est le suivant : j'ai récupéré une anim flash assez bien faite qui lorsque vous sélectionnez une couleur vous donne la valeur hexa de celle-ci.
J'utilise l'interface flash.external qui est la solution la plus souple (en terme de typage même si ici on passe cherche juste à passer une string) pour passer une variable de Flash à la page contenante HTML via Javascript.

Le pb c'est que je n'arrive pas à récupérer cette variable flash.

Je pense que côté action script, ça doit être correct en revanche côté JS ça ne peut pas fonctionner mais je ne sais pas comment l'écrire :
La déclaration de la fonction RecupCouleurFlash(laVariableFlash) me semble conforme aux tutos que j'ai pu voir sur le net mais comment faire appel à cette fonction (sur un événement onclick par exemple) afin de récupérer cette fameuse variable que je pourrais afficher dans une zone de texte ou le cas échéant dans une popup ???

Voici le code :
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 import flash.external.*; this.createEmptyMovieClip("nCouleur", 6); [... ...] this.nCouleur.beginFill(this.couleurFinal);this.nCouleur.lineTo(-5, 0);this.nCouleur.lineTo(-5, 30);this.nCouleur.lineTo(-65, 30);this.nCouleur.lineTo(-65, 0);this.nCouleur.endFill();tSortie.text = "#"+this.getHEXA(); [... ...] // ICI JE FAIT APPEL A LA FONCTION CALL POUR PASSER LA VALEUR // tSORTIE.TEXT /////////////////////////////////////////////////////////////////////// ExternalInterface.call("RecupCouleurFlash", tSortie.text)}; ////////////////////////////////////////////////////////////////////// function CP_melange(f, d, p) { // f pour FOND // d pour DESSUS // p pour POSITION ou POURCENTAGE var eR = d[0]-f[0]; var eG = d[1]-f[1]; var eB = d[2]-f[2]; var R = eR*p/100+f[0]; var G = eG*p/100+f[1]; var B = eB*p/100+f[2]; R = Math.round(R); G = Math.round(G); B = Math.round(B); return [R, G, B]; } [... ...]
La c'est le code de ma page HTML :
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 <body> <h1>TEST</h1> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0','width','195','height','106','src','scripts/Colorpicker','quality','high','pluginspage','http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash','movie','scripts/Colorpicker' ); //end AC code function RecupCouleurFlash(couleur) { alert("Voici la couleur " + couleur); } </script> <noscript> // APPEL A A FONCTION QUI FAIT UN ALERT SUR LA VALEUR RECUPERE DE // FLASH <object onclick="RecupCouleurFlash()" /////////// classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="195" height="106"> <param name="movie" value="scripts/Colorpicker.swf"> <param name=quality value=high> <embed src="scripts/Colorpicker.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="195" height="106"> </embed> </object> </noscript> </body>

Bonjour, L'appel à la fonction javascript :
Code:

1 2 3 ExternalInterface.call(nom de la fonction javascript, paramètre à transmettre à javascript) ExternalInterface.call("sayHello", "browser")
Exemple fonction javascript
Code:

1 2 3 4 5 6 <script> function sayHello(name) { alert(">> Hello " + name + "."); return ">> Hi Flash."; } </script>
A mon avis tu as 2 erreurs dans ton script, lorsque tu cliques sur une couleur, tu dois déclencher un évènement :
Code:

1 2 3 // appel sur un onRelease ExternalInterface.call("RecupCouleurFlash", tSortie.text)};
De plus tu devrais utiliser swfobject pour intégrer ton animation flash dans ta page html.

De plus :
Code:

1 2 3 <object onclick="RecupCouleurFlash()" .... </object>
Je ne suis pas sur que cette fonctionnalité soit appropriée pour intégrer ton flash, penche toi sur swfobject.

09/10/2007, 21h30
popovitch130
J'ai bien noté les corrections à faire cependant, j'ai toujours un soucis pour faire appel à ma fonction javascript dans mon code HTML ... Je crée un bouton
Code:

1 2 3 <label> <input type="submit" name="button" id="button" value="Envoyer" onClick="?????????(???)"/> </label>

[suite]

Bon ok, j'ai compris qu'en fait la fonction Javascript doit être appelé par la fonction flash.external.externalinterface.call
Comme je ne connais pas grand chose à l'AS, j'ai repéré les onRelease du code en y insérant ma fonction externalInterface.Call(couleur.text).
Ceci étant, mon code fait tout sauf mon alert("couleur") voyez plutôt :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
 
import flash.external.*;
 
this.createEmptyMovieClip("nCouleur",6);
this.createEmptyMovieClip("aCouleur",7);
this.createEmptyMovieClip("degra3",2);
this.Couleur = [255, 0, 0];
CP_creationCarre = function () {
	this.createEmptyMovieClip("MASK",0);
	this.MASK.beginFill(0xFFFFFF);
	this.MASK.lineTo(100,0);
	this.MASK.lineTo(100,100);
	this.MASK.lineTo(0,100);
	this.MASK.lineTo(0,0);
	this.endFill();
	curseur.setMask(this.MASK);
	degrade.onRollOver = function() {
		this.useHandCursor = false;
	};
	degrade.onPress = function() {
		Mouse.hide();
		curseur.startDrag(true,0,0,100,100);
		duplicateMovieClip(curseur, "curseur2", 10);
		curseur2._x = curseur._x;
		curseur2._y = curseur._y;
		curseur2._alpha /= 2;
		curseur._x = _xmouse;
		curseur._y = _ymouse;
		curseur.onEnterFrame = function() {
			var couleur1 = CP_getCouleur1(this._x);
			this._parent.Couleur = CP_melange(couleur1, [128, 128, 128], this._y);
			this._parent.CP_creationRectangle();
		};
	};
	degrade.onRelease = degrade.onReleaseOutside=function () {
		delete curseur.onEnterFrame;
		Mouse.show();
		curseur.stopDrag();
		this._parent.aCouleur.clear();
		this._parent.aCouleur.clear();
		this._parent.aCouleur.moveTo(-65,30);
		this._parent.aCouleur.beginFill(this._parent.couleurFinal);
		this._parent.aCouleur.lineTo(-5,30);
		this._parent.aCouleur.lineTo(-5,60);
		this._parent.aCouleur.lineTo(-65,60);
		this._parent.aCouleur.lineTo(-65,30);
		this._parent.aCouleur.endFill();
		removeMovieClip("curseur2");
		ExternalInterface.call("RecupCouleur", tSortie.text);
	};
	this.CP_creationRectangle();
};
CP_creationRectangle = function () {
	this.degra3.clear();
	var c = RGBtoHEXA(this.Couleur[0], this.Couleur[1], this.Couleur[2]);
	this.degra3.lineStyle(1,0x000000);
	this.degra3.beginGradientFill("linear",[0xFFFFFF, c, 0x000000],[100, 100, 100],[0, 0xFF/2, 0xFF],{matrixType:"box", w:15, h:100, x:0, y:0, r:Math.PI/2});
	this.degra3.moveTo(105,0);
	this.degra3.lineTo(123,0);
	this.degra3.lineTo(123,100);
	this.degra3.lineTo(105,100);
	this.degra3.lineTo(105,0);
	this.degra3.endFill();
	this.degra3.onRollOver = function() {
		this.useHandCursor = false;
	};
	this.degra3.onPress = function() {
		Mouse.hide();
		Fleche.startDrag(true,125,0,125,100);
		duplicateMovieClip(Fleche, "Fleche2", 10);
		Fleche2._x = Fleche._x;
		Fleche2._y = Fleche._y;
		Fleche2._alpha /= 2;
		Fleche._y = this._ymouse;
		Fleche.onEnterFrame = function() {
			this._parent.CP_couleurSortie();
		};
	};
	this.degra3.onRelease = this.degra3.onReleaseOutside=function () {
		delete Fleche.onEnterFrame;
		this._parent.aCouleur.clear();
		this._parent.aCouleur.clear();
		this._parent.aCouleur.moveTo(-65,30);
		this._parent.aCouleur.beginFill(this._parent.couleurFinal);
		this._parent.aCouleur.lineTo(-5,30);
		this._parent.aCouleur.lineTo(-5,60);
		this._parent.aCouleur.lineTo(-65,60);
		this._parent.aCouleur.lineTo(-65,30);
		this._parent.aCouleur.endFill();
		removeMovieClip("Fleche2");
		Mouse.show();
		Fleche.stopDrag();
		ExternalInterface.call("RecupCouleur", tSortie.text);
	};
	this.CP_couleurSortie();
};
CP_couleurSortie = function () {
	if (Fleche._y>50) {
		var blackAndWhite = [0, 0, 0];
	} else {
		var blackAndWhite = [255, 255, 255];
	}
	this.cF1 = CP_melange(this.Couleur, blackAndWhite, Math.abs((Fleche._y-50)*2));
	this.couleurFinal = RGBtoHEXA(cF1[0], cF1[1], cF1[2]);
	this.nCouleur.clear();
	this.nCouleur.moveTo(-65,0);
	this.nCouleur.beginFill(this.couleurFinal);
	this.nCouleur.lineTo(-5,0);
	this.nCouleur.lineTo(-5,30);
	this.nCouleur.lineTo(-65,30);
	this.nCouleur.lineTo(-65,0);
	this.nCouleur.endFill();
	tSortie.text = "#"+this.getHEXA();
};
function CP_melange(f, d, p) {// f pour FOND
	// d pour DESSUS
	// p pour POSITION ou POURCENTAGE
	var eR = d[0]-f[0];
	var eG = d[1]-f[1];
	var eB = d[2]-f[2];
	var R = eR*p/100+f[0];
	var G = eG*p/100+f[1];
	var B = eB*p/100+f[2];
	R = Math.round(R);
	G = Math.round(G);
	B = Math.round(B);
	return [R, G, B];
}
function CP_getCouleur1(x) {
	var a = 255;// x est donné entre 0 et 100. Il nous le faut entre 0 et 1530
	x *= 1530/100;// D'abord on traite le ROUGE
	if (x<a || x>=5*a) {
		var R = 255;
	} else if (x>=a && x<2*a) {
		var R = 2*a-x;
	} else if (x>=2*a && x<4*a) {
		var R = 0;
	} else if (x>=4*a && x<5*a) {
		var R = x-4*a;
	}
	// Puis le VERT 
	if (x<a) {
		var G = x;
	} else if (x>=a && x<3*a) {
		var G = 255;
	} else if (x>=3*a && x<4*a) {
		var G = 4*a-x;
	} else if (x>=4*a) {
		var G = 0;
	}
	// Et enfin le BLEU 
	if (x<2*a) {
		var B = 0;
	} else if (x>=2*a && x<3*a) {
		var B = x-2*a;
	} else if (x>=3*a && x<5*a) {
		var B = 255;
	} else if (x>=5*a) {
		var B = 6*a-x;
	}
	// On arrondit tout ça, valeure ENTIERE uniquement pour le RGB 
	R = Math.round(R);
	G = Math.round(G);
	B = Math.round(B);// On retourne la valeure Hexa (sans le 0x ou le # devant)
	return [R, G, B];
}
function HEXAtoRGB(HEXA) {
	var caractere = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
	HEXA = HEXA.split("");
	for (var i = 0; i<HEXA.length; i++) {
		for (var j = 0; j<caractere.length; j++) {
			if (HEXA[i] == caractere[j]) {
				HEXA[i] = j;// En gros, si on a F, tu mets 15 à la place, et ainsi de suite...
				break;// Stop la seconde boucle "for" !
			}
		}
	}
	var R = HEXA[0]*16+HEXA[1];
	var G = HEXA[2]*16+HEXA[3];
	var B = HEXA[4]*16+HEXA[5];
	return {R:R, G:G, B:B};
}
function RGBtoHEXA(R, G, B) {
	return (R*Math.pow(16, 4)+G*Math.pow(16, 2)+B);
}
getHEXA = function () {
	var caractere = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
	var R1 = caractere[Math.floor(cF1[0]/16)];
	var R2 = caractere[cF1[0]%16];
	var G1 = caractere[Math.floor(cF1[1]/16)];
	var G2 = caractere[cF1[1]%16];
	var B1 = caractere[Math.floor(cF1[2]/16)];
	var B2 = caractere[cF1[2]%16];
	return (R1+R2+G1+G2+B1+B2);
};
this.CP_creationCarre();

pour la page HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script language="javascript">
function RecupCouleur(couleur) {alert(couleur);}
</script>
 
 
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','195','height','106','src','COLORPICKER/ColorpickerMX','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','COLORPICKER/ColorpickerMX' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="195" height="106">
  <param name="movie" value="COLORPICKER/ColorpickerMX.swf" />
  <param name="quality" value="high" />
  <embed src="COLORPICKER/ColorpickerMX.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="195" height="106"></embed>
</object></noscript>
 
</body>
</html>

16/10/2007, 14h41
popovitch130

Il y a des paramètres de sécu à changer voir source ci-dessous