Suggerimento rapido come comunicare tra Flash e JavaScript / Codice

s e

, che hanno <em>id</em> proprietà in modo che possiamo accedervi dal file SWF.</li> </ul> <p>Il tuo HTML dovrebbe apparire come di seguito:</p> <img src="//accentsconagua.com/img/images_27_3/quick-tip-how-to-communicate-between-flash-and-javascript_3.jpg"> <p>Quando il codice è stato sostituito, carica il file sul server web, in modo da poter iniziare con ActionScript.</p> <hr> <h2> Passaggio 4: impostare una classe di documenti</h2> <p>Crea una classe di documenti per il tuo file Flash; chiamalo Main.as. Se non hai familiarità con le classi di documenti, leggi questo suggerimento rapido.</p> <pre> package import flash.display.MovieClip; public class Main estende MovieClip public function Main () </pre> <hr> <h2> Passaggio 5: chiamata delle funzioni JavaScript da Flash</h2> <p>La prima cosa che faremo con ExternalInterface è chiamare una funzione JavaScript che cambierà il colore di sfondo della nostra pagina web. Quindi, collega un listener di eventi al nostro componente ColorPicker. Quando il colore cambia, invierà il valore esadecimale a una funzione javascript chiamata receiveColor ():</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main extends MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange);  public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue); // chiama receiveColor (event.target.hexValue) nella javascript</pre> <p>Ora dobbiamo scrivere questa funzione receiveColor (). Nella testa del nostro documento HTML, iniziamo il javascript definendo questa funzione. Prende semplicemente il valore inviato ad esso da Flash e cambia il colore di sfondo.</p> <pre> <script type="text/javascript"> function receiveColor(value)  document.bgColor = "#" + value;  </script></pre> <p>Mettilo subito dopo <head> nel tuo file HTML. Se tutto va bene, quando si esegue la pagina HTML in un browser e si cambia il colore in ColorPicker, dovrebbe cambiare il colore di sfondo della pagina Web.</p> <hr> <h2> Passaggio 6: chiamata alle funzioni ActionScript da JavaScript</h2> <p>Il prossimo esempio sarà quello di inviare dati da JavaScript a Flash. Nel documento HTML, incolla il seguente codice all'interno die <script>tag che hai aggiunto nell'ultimo passaggio: </p> <pre> window.onload = function () var sender = document.getElementById ("sender"); // getElementById trova un elemento in base alla sua proprietà "id" sender.onclick = function () var ta = document.getElementById ("textArea"); documento [ 'ExternalInterface'] receiveText (ta.value).; ta.value = ""; ; ;</pre> <p>Ecco cosa fa: dopo che il documento è stato caricato, otteniamo il pulsante 'mittente' e colleghiamo un listener di eventi ad esso. Quando viene cliccato il pulsante 'mittente', chiamerà la funzione receiveText () in Flash che verrà creata ora.</p> <p>Di nuovo in Flash, diciamo a ExternalInterface di registrare la funzione ActionScript in modo che possa essere richiamata da JavaScript. Quindi impostiamo la nostra funzione receiveText ():</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main extends MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); // consente a JavaScript di accedere alla funzione receiveText ().  public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  // questa è la nuova funzione receiveText public function receiveText (value: String): void jsText.text = value; </pre> <p>(Le nuove righe sono 5, 9 e 16-19.)</p> <hr> <h2> Passaggio 7: chiamata di avvisi JavaScript, conferma e prompt da ActionScript</h2> <p>Possiamo anche chiamare gli avvisi molto facilmente da ActionScript. Qui diciamo semplicemente a ExternalInterface di chiamare un 'prompt'. Possiamo anche usare ExternalInterface per passare i parametri alle funzioni. Qui diciamo alla funzione 'prompt' di chiedere all'utente il suo nome. Quando il nostro utente inserisce le informazioni, viene passato nuovamente al campo di testo "promptText".</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main extends MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); // rende promptClick () eseguito quando viene cliccato il pulsante prompt public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  public function receiveText (value: String): void jsText.text = value;  // funzione da chiamare quando si fa clic sul pulsante di richiesta. Chiederà il nome dell'utente utilizzando un prompt JS. public function promptClick (event: MouseEvent): void promptText.text = "Hai detto che il tuo nome è:" + ExternalInterface.call ("prompt", "Qual è il tuo nome?"); </pre> <p>(Le nuove righe sono 10 e 21-24.)</p> <hr> <h2> Passaggio 8: chiamata delle funzioni JavaScript anonime</h2> <p>Un'altra cosa che possiamo fare è scrivere le nostre funzioni JavaScript come stringhe, quindi chiamarle da ExternalInterface. Qui creiamo una funzione JavaScript che riceve un parametro. Prendiamo quel parametro e assegniamo il suo valore all'attributo innerHTML del nostro div "textChange" nel documento HTML. Noterai che non vengono chiamate funzioni JavaScript esterne, è tutto contenuto in ActionScript.</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main extends MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // rende changeClick () eseguito quando viene cliccato il pulsante change public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  public function receiveText (value: String): void jsText.text = value;  public function promptClick (event: MouseEvent): void promptText.text = "Hai detto che il tuo nome è:" + ExternalInterface.call ("prompt", "Qual è il tuo nome?");  // cambia il testo all'interno dell'HTML in modo che corrisponda al campo di testo all'interno della funzione pubblica Flash changeClick (event: MouseEvent): void ExternalInterface.call ("function (param) document.getElementById ('textChange'). innerHTML = param;" , changeText.text); changeText.text = ""; </pre> <p>(Le nuove righe sono 11 e 26-30.)</p> <hr> <h2> Passaggio 9: chiamata di JavaScript anonimo e funzioni ActionScript</h2> <p>Infine, possiamo chiamare funzioni anonime su entrambi i lati. Nella funzione "anonima", registriamo una funzione ActionScript anonima con ExternalInterface. La funzione compila del testo, quindi avvia un timer. Successivamente, chiamiamo una funzione JavaScript anonima. Questa funzione dice alla finestra, quando è stata ridimensionata, deve richiamare la nostra funzione ActionScript anonima.</p> <pre> package import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main extends MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // crea un nuovo timer con un secondo tick e aggiunge un timer di listener di eventi: Timer = new Timer (1000); timer.addEventListener (TimerEvent.TIMER, onTimer); anonimo(); // imposta le funzioni anonime public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  public function receiveText (value: String): void jsText.text = value;  public function promptClick (event: MouseEvent): void promptText.text = "Hai detto che il tuo nome è:" + ExternalInterface.call ("prompt", "Qual è il tuo nome?");  public function changeClick (event: MouseEvent): void ExternalInterface.call ("function (param) document.getElementById ('textChange'). innerHTML = param;", changeText.text); changeText.text = "";  // cancella il testo dopo che un secondo ha passato la funzione pubblica onTimer (event: TimerEvent): void resizeText.text = ""; timer.stop ();  public function anonymous (): void // guarda come stiamo definendo una funzione all'interno di un'altra funzione? ExternalInterface.addCallback ("anon", function () resizeText.text = "La finestra è stata ridimensionata."; Timer.start ();); // stesso si applica qui ExternalInterface.call ("function () window.onresize = function () document ['externalInterface']. anon ();;"); </pre> <p>(Le nuove righe sono 13-17 e 37-52.)</p> <hr> <h2>Conclusione</h2> <p>ExternalInterface è una classe estremamente potente e utile. Con esso, è possibile ricevere valori ed eventi, tutti all'esterno del file SWF. Divertiti con esso e grazie per la lettura!</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 class="h-alltags">
<a href="articles/code">Codice</a>
</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">Suggerimento rapido come renderizzare coerentemente i caratteri tipografici Cross-browser</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">Suggerimento rapido come codificare un semplice generatore di nomi di caratteri</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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero.
			</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>

Suggerimento rapido come comunicare tra Flash e JavaScript

Passaggio 1: impostare il documento Flash

Passaggio 2: configura l'interfaccia utente di Flash

Passaggio 3: imposta l'interfaccia utente HTML