Rask Tips Slik kommuniserer du mellom Flash og JavaScript / Kode

s og

, som har <em>id</em> egenskaper slik at vi kan få tilgang til dem fra SWF.</li> </ul> <p>HTML-en din skal vises som følger:</p> <img src="//accentsconagua.com/img/images_27_3/quick-tip-how-to-communicate-between-flash-and-javascript_3.jpg"> <p>Når koden er erstattet, last opp filen til webserveren din, så vi kan komme i gang med ActionScript.</p> <hr> <h2> Trinn 4: Konfigurer en dokumentklasse</h2> <p>Opprett en dokumentklasse for Flash-filen din; kaller det Main.as. Hvis du ikke er kjent med dokumentklasser, les dette hurtigtipset.</p> <pre> pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip offentlig funksjon Main () </pre> <hr> <h2> Trinn 5: Kaller JavaScript-funksjoner fra Flash</h2> <p>Det første vi gjør med ExternalInterface er å ringe en JavaScript-funksjon som vil endre bakgrunnsfargen på nettsiden vår. Så fest en hendelseslytter til vår ColorPicker-komponent. Når fargen endres, vil den sende hex-verdien til en javascript-funksjon kalt receiveColor ():</p> <pre> pakke import fl.events.ColorPickerEvent; importer flash.display.MovieClip; importer flash.external.ExternalInterface; offentlig klasse Main utvider MovieClip offentlig funksjon Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange);  offentlig funksjon colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue); // kall mottarColor (event.target.hexValue) i javascript</pre> <p>Nå må vi skrive denne receiveColor () -funksjonen. I hodet til vårt HTML-dokument starter vi javascript ved å definere denne funksjonen. Det tar bare verdien som sendes til den fra Flash, og endrer bakgrunnsfargen.</p> <pre> <script type="text/javascript"> function receiveColor(value)  document.bgColor = "#" + value;  </script></pre> <p>Sett det rett etterpå <head> i HTML-filen din. Hvis alt er bra, når du kjører HTML-siden i en nettleser og endrer fargen i ColorPicker, bør den endre bakgrunnsfargen på nettsiden.</p> <hr> <h2> Trinn 6: Kaller ActionScript-funksjoner fra JavaScript</h2> <p>Det neste eksemplet vil være å sende data fra JavaScript til Flash. I HTML-dokumentet, lim inn følgende kode ie <script>tag deg lagt til i det siste trinnet: </p> <pre> window.onload = function () var sender = document.getElementById ("sender"); // getElementById finner et element i henhold til "id" -egenskapen sender.onclick = function () var ta = document.getElementById ("textArea"); Dokumentet [ 'externalInterface'] receiveText (ta.value.); ta.value = ""; ; ;</pre> <p>Her er hva dette gjør: Etter at dokumentet er lastet, får vi avsenderknappen og legger til en hendelselytter. Når "avsender" -knappen er klikket, vil den ringe funksjonen receiveText () i Flash som vi skal konfigurere nå.</p> <p>Tilbake i Flash, forteller vi ExternalInterface å registrere ActionScript-funksjonen slik at den kan hentes fra JavaScript. Deretter setter vi opp receiveText () -funksjonen vår:</p> <pre> pakke import fl.events.ColorPickerEvent; importer flash.display.MovieClip; importer flash.external.ExternalInterface; offentlig klasse Main utvider MovieClip offentlig funksjon Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); // tillater JavaScript for å få tilgang til receiveText () -funksjonen.  offentlig funksjon colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  // Dette er den nye ReceiveText-funksjonen offentlige funksjonen ReceiveText (verdi: String): void jsText.text = value; </pre> <p>(Nye linjer er 5, 9 og 16-19.)</p> <hr> <h2> Trinn 7: Ringer JavaScript-varsler, bekrefter og ber om fra ActionScript</h2> <p>Vi kan også ringe varsler veldig enkelt fra ActionScript. Her forteller vi bare ExternalInterface å ringe en "prompt". Vi kan også bruke ExternalInterface til å sende parametere til funksjoner. Her forteller vi "prompt" -funksjonen å spørre brukeren sitt navn. Når brukeren kommer inn i informasjonen, blir den sendt tilbake til tekstfeltet "promptText".</p> <pre> pakke import fl.events.ColorPickerEvent; importer flash.display.MovieClip; importer flash.external.ExternalInterface; offentlig klasse Main utvider MovieClip offentlig funksjon Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); // gjør promptClick () kjør når du trykker på hurtigknappen offentlig funksjon colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  offentlig funksjon receiveText (verdi: streng): void jsText.text = value;  // funksjon som skal ringes når du trykker på hurtigknappen. Vil be om brukerens navn ved hjelp av en JS-prompt. public function promptClick (event: MouseEvent): void promptText.text = "Du sa at navnet ditt er:" + ExternalInterface.call ("prompt", "Hva er ditt navn?"); </pre> <p>(Nye linjer er 10 og 21-24.)</p> <hr> <h2> Trinn 8: Kaller anonyme JavaScript-funksjoner</h2> <p>En annen ting vi kan gjøre er å skrive våre egne JavaScript-funksjoner som strenge, og ring dem fra ExternalInterface. Her oppretter vi en JavaScript-funksjon som mottar en parameter. Vi tar denne parameteren og tildeler verdien til innerHTML-attributtet til vår "textChange" div i HTML-dokumentet. Du vil legge merke til at det ikke er noen eksterne JavaScript-funksjoner som kalles - det er alt inkludert i ActionScript.</p> <pre> pakke import fl.events.ColorPickerEvent; importer flash.display.MovieClip; importer flash.external.ExternalInterface; offentlig klasse Main utvider MovieClip offentlig funksjon Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // gjør endringClick () løp når endringsknappen klikkes offentlig funksjon colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  offentlig funksjon receiveText (verdi: streng): void jsText.text = value;  public function promptClick (event: MouseEvent): void promptText.text = "Du sa at navnet ditt er:" + ExternalInterface.call ("prompt", "Hva er navnet ditt?");  // endrer tekst inne i HTML for å matche tekstfelt inni Flash offentlig funksjon endringClick (event: MouseEvent): void ExternalInterface.call ("funksjon (param) document.getElementById ('textChange'). innerHTML = param;" , changeText.text); changeText.text = ""; </pre> <p>(Nye linjer er 11 og 26-30.)</p> <hr> <h2> Trinn 9: Kaller anonyme JavaScript- og ActionScript-funksjoner</h2> <p>Til slutt kan vi ringe anonyme funksjoner på begge sider. I "anonym" -funksjonen registrerer vi en anonym ActionScript-funksjon med ExternalInterface. Funksjonen fyller i litt tekst, så starter en timer. Deretter kaller vi en anonym JavaScript-funksjon. Denne funksjonen forteller vinduet, når det er blitt endret, må det ringe tilbake til vår anonyme ActionScript-funksjon.</p> <pre> pakke import fl.events.ColorPickerEvent; importer flash.display.MovieClip; importer flash.external.ExternalInterface; offentlig klasse Main utvider MovieClip offentlig funksjon Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // Opprett en ny timer med et sekunders kryss, og legg til en hendelseslytter var var timer: Timer = Ny Timer (1000); timer.addEventListener (TimerEvent.TIMER, onTimer); anonym(); // sette opp de anonyme funksjonene] offentlig funksjon colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  offentlig funksjon receiveText (verdi: streng): void jsText.text = value;  public function promptClick (event: MouseEvent): void promptText.text = "Du sa at navnet ditt er:" + ExternalInterface.call ("prompt", "Hva er navnet ditt?");  offentlig funksjon endringClick (event: MouseEvent): void ExternalInterface.call ("funksjon (param) document.getElementById ('textChange'). innerHTML = param;", changeText.text); changeText.text = "";  // slette teksten etter ett sekund har gått offentlig funksjon onTimer (event: TimerEvent): void resizeText.text = ""; timer.stop ();  offentlig funksjon anonym (): void // se hvordan vi definerer en funksjon i en annen funksjon? ExternalInterface.addCallback ("anon", funksjon () resizeText.text = "Vinduet har blitt endret."; Timer.start ();); // samme gjelder her ExternalInterface.call ("funksjon () window.onresize = function () document ['externalInterface']. anon ();;"); </pre> <p>(Nye linjer er 13-17 og 37-52.)</p> <hr> <h2>Konklusjon</h2> <p>ExternalInterface er en ekstremt kraftig og nyttig klasse. Med det kan du motta verdier og hendelser, alle utenfor SWF. Ha det gøy med det og takk for å lese!</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">Rask Tips Hvordan Gjenværende Gjenværende Tverrsnitt Gjenspeiler</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">Rask Tips Slik kodes du en enkel tegnnavngenerator</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av.
			</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>

Rask Tips Slik kommuniserer du mellom Flash og JavaScript

Trinn 1: Sett opp Flash-dokumentet

Trinn 2: Sett opp Flash-brukergrensesnittet

Trinn 3: Konfigurer HTML-brukergrensesnittet