Astuce comment communiquer entre Flash et JavaScript / Code

le sable

, qui ont <em>identifiant</em> propriétés afin que nous puissions y accéder à partir du fichier SWF.</li> </ul> <p>Votre code HTML devrait apparaître comme ci-dessous:</p> <img src="//accentsconagua.com/img/images_27_3/quick-tip-how-to-communicate-between-flash-and-javascript_3.jpg"> <p>Une fois le code remplacé, chargez le fichier sur votre serveur Web pour pouvoir commencer à utiliser le code ActionScript..</p> <hr> <h2> Étape 4: Configurer une classe de document</h2> <p>Créez une classe de document pour votre fichier Flash; appelez-le Main.as. Si vous n'êtes pas familier avec les classes de document, lisez ce petit conseil..</p> <pre> package import flash.display.MovieClip; Classe publique Main étend MovieClip fonction publique Main () </pre> <hr> <h2> Étape 5: appel des fonctions JavaScript à partir de Flash</h2> <p>La première chose que nous ferons avec ExternalInterface est d'appeler une fonction JavaScript qui modifiera la couleur d'arrière-plan de notre page Web. Attachez donc un écouteur d'événement à notre composant ColorPicker. Lorsque la couleur change, il envoie la valeur hexadécimale à une fonction JavaScript appelée receiveColor ():</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; classe publique Main étend MovieClip fonction publique Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange);  fonction publique colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue); // appelle receiveColor (event.target.hexValue) dans le javascript</pre> <p>Nous devons maintenant écrire cette fonction receiveColor (). Dans la tête de notre document HTML, nous commençons le javascript en définissant cette fonction. Il prend simplement la valeur qui lui est envoyée par Flash et modifie la couleur de fond.</p> <pre> <script type="text/javascript"> function receiveColor(value)  document.bgColor = "#" + value;  </script></pre> <p>Mettez ça juste après <head> dans votre fichier HTML. Si tout va bien, lorsque vous exécutez la page HTML dans un navigateur et modifiez la couleur dans ColorPicker, la couleur d'arrière-plan de la page Web doit être modifiée..</p> <hr> <h2> Étape 6: Appel de fonctions ActionScript à partir de JavaScript</h2> <p>L'exemple suivant consistera à envoyer des données de JavaScript à Flash. Dans le document HTML, collez le code suivant dans le champe <script>tag que vous avez ajouté à la dernière étape: </p> <pre> window.onload = function () var expéditeur = document.getElementById ("expéditeur"); // getElementById trouve un élément en fonction de sa propriété "id" sender.onclick = function () var ta = document.getElementById ("textArea"); document ['externalInterface']. receiveText (ta.value); ta.value = ""; ; ;</pre> <p>Voici ce que cela fait: une fois le document chargé, nous obtenons le bouton "expéditeur" et lui attachons un écouteur d'événement. Lorsque le bouton "expéditeur" est cliqué, il appellera la fonction receiveText () dans Flash que nous allons configurer maintenant.</p> <p>De retour dans Flash, nous demandons à ExternalInterface d’enregistrer la fonction ActionScript afin qu’elle puisse être appelée à partir de JavaScript. Ensuite, nous configurons notre fonction receiveText ():</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; classe publique Main étend MovieClip fonction publique Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); // permet à JavaScript d'accéder à la fonction receiveText ().  fonction publique colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  // c'est la nouvelle fonction receiveText function function receiveText (value: String): void jsText.text = valeur; </pre> <p>(Les nouvelles lignes sont 5, 9 et 16-19.)</p> <hr> <h2> Étape 7: Appel des alertes JavaScript, des confirmations et des invites à partir d'ActionScript</h2> <p>Nous pouvons également appeler des alertes très facilement depuis ActionScript. Ici, nous demandons simplement à ExternalInterface d’appeler une "invite". Nous pouvons également utiliser ExternalInterface pour transmettre des paramètres à des fonctions. Ici, nous disons à la fonction 'prompt' de demander à l'utilisateur son nom. Lorsque notre utilisateur entre l'information, elle est renvoyée dans le champ de texte 'promptText'.</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; classe publique Main étend MovieClip fonction publique Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); // active promptClick () lorsque vous cliquez sur le bouton d'invite public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  fonction publique receiveText (value: String): void jsText.text = valeur;  // fonction à appeler lorsque vous cliquez sur le bouton d'invite. Va demander le nom de l'utilisateur en utilisant une invite JS. fonction publique promptClick (event: MouseEvent): void promptText.text = "Vous avez dit que votre nom était:" + ExternalInterface.call ("prompt", "Quel est votre nom?"); </pre> <p>(Les nouvelles lignes sont 10 et 21-24.)</p> <hr> <h2> Étape 8: appel des fonctions JavaScript anonymes</h2> <p>Une autre chose que nous pouvons faire est d'écrire nos propres fonctions JavaScript sous forme de chaînes, puis de les appeler à partir de ExternalInterface. Ici, nous créons une fonction JavaScript qui reçoit un paramètre. Nous prenons ce paramètre et attribuons sa valeur à l'attribut innerHTML de notre div 'textChange' dans le document HTML. Vous remarquerez qu'il n'y a pas de fonction JavaScript externe appelée - tout est contenu dans le code ActionScript..</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; classe publique Main étend MovieClip fonction publique Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // rend changeClick () exécuté lorsque le bouton de modification est cliqué public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  fonction publique receiveText (value: String): void jsText.text = valeur;  public function promptClick (event: MouseEvent): void promptText.text = "Vous avez dit que votre nom était:" + ExternalInterface.call ("prompt", "Quel est votre nom?");  // modifie le texte à l'intérieur du code HTML afin qu'il corresponde au champ de texte de la fonction publique Flash. fonction function clickClick (event: MouseEvent): void ExternalInterface.call ("function (param) document.getElementById ('textChange'). innerHTML = param;" , changeText.text); changeText.text = ""; </pre> <p>(Les nouvelles lignes sont 11 et 26-30.)</p> <hr> <h2> Étape 9: appel des fonctions JavaScript et ActionScript anonymes</h2> <p>Enfin, nous pouvons appeler des fonctions anonymes des deux côtés. Dans la fonction "anonyme", nous enregistrons une fonction ActionScript anonyme avec ExternalInterface. La fonction remplit du texte, puis lance une minuterie. Ensuite, nous appelons une fonction JavaScript anonyme. Cette fonction indique à la fenêtre que, lorsqu'elle a été redimensionnée, elle doit rappeler notre fonction ActionScript anonyme..</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; classe publique Main étend MovieClip fonction publique Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // crée une nouvelle minuterie avec une coche d'une seconde et ajoute un écouteur d'événement var timer: Timer = new Timer (1000); timer.addEventListener (TimerEvent.TIMER, onTimer); anonyme(); // configuration des fonctions anonymes fonction publique colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  fonction publique receiveText (value: String): void jsText.text = valeur;  public function promptClick (event: MouseEvent): void promptText.text = "Vous avez dit que votre nom était:" + ExternalInterface.call ("prompt", "Quel est votre nom?");  fonction publique changeClick (event: MouseEvent): void ExternalInterface.call ("function (param) document.getElementById ('textChange'). innerHTML = param;", changeText.text); changeText.text = "";  // efface le texte après une seconde, la fonction publique onTimer (event: TimerEvent): void resizeText.text = ""; timer.stop ();  public function anonymous (): void // voir comment nous définissons une fonction dans une autre fonction? ExternalInterface.addCallback ("anon", function () resizeText.text = "La fenêtre a été redimensionnée."; Timer.start ();); // idem s'applique ici ExternalInterface.call ("function () window.onresize = function () document ['externalInterface']. anon ();;"); </pre> <p>(Les nouvelles lignes sont 13-17 et 37-52.)</p> <hr> <h2>Conclusion</h2> <p>ExternalInterface est une classe extrêmement puissante et utile. Avec lui, vous pouvez recevoir des valeurs et des événements, tous en dehors du fichier SWF. Amusez-vous avec et merci pour la lecture!</p>

<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>

</div>

</div>
</div>

</div>

<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/webdesign/quick-tip-how-to-consistently-render-typefaces-cross-browser.html">Astuce comment restituer de manière cohérente des polices de caractères sur plusieurs navigateurs</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_4/quick-tip-how-to-consistently-render-typefaces-cross-browser.png');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/gamedevelopment/quick-tip-how-to-code-a-simple-character-name-generator.html">Petite astuce Comment coder un générateur de nom de caractère simple</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/quick-tip-how-to-code-a-simple-character-name-generator.png');"></div>
					
        
	</div>
</div>

<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
			</div>
	</div>
</footer>

</div>
</div>

function toggleModal() {
						modal.classList.toggle("show-modal");
			}

function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>

</body>
</html>

Astuce comment communiquer entre Flash et JavaScript

Étape 1: Configuration du document Flash

Étape 2: Configuration de l'interface utilisateur Flash

Étape 3: Configurer l'interface utilisateur HTML