Flash vers javascript

**popovitch130** · 07/10/2007, 16h49

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 :

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

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

**The_Pretender** · 09/10/2007, 06h59

Bonjour, L'appel � la fonction javascript :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Exemple fonction javascript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**popovitch130** · 09/10/2007, 21h30

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**popovitch130** · 12/10/2007, 14h10

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 :

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

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

**popovitch130** · 16/10/2007, 14h41

Il y a des param�tres de s�cu � changer voir source ci-dessous

Flash vers javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager