Snelle tip hoe te communiceren tussen Flash en JavaScript / Code

s en

, die hebben <em>ID kaart</em> eigenschappen, zodat we ze kunnen openen via de SWF.</li> </ul> <p>Uw HTML zou er als volgt uit moeten zien:</p> <img src="//accentsconagua.com/img/images_27_3/quick-tip-how-to-communicate-between-flash-and-javascript_3.jpg"> <p>Wanneer de code is vervangen, uploadt u het bestand naar uw webserver, zodat we aan de slag kunnen met ActionScript.</p> <hr> <h2> Stap 4: Stel een documentklasse in</h2> <p>Maak een documentklasse voor uw Flash-bestand; noem het Main.as. Als u niet bekend bent met documentklassen, leest u deze snelle tip.</p> <pre> pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main () </pre> <hr> <h2> Stap 5: JavaScript-functies aanroepen vanuit Flash</h2> <p>Het eerste dat we doen met de ExternalInterface is een JavaScript-functie aanroepen die de achtergrondkleur van onze webpagina zal veranderen. Voeg dus een gebeurtenislistener toe aan onze ColorPicker-component. Wanneer de kleur verandert, wordt de hex-waarde naar een javascript-functie met de naam receiveColor () verzonden:</p> <pre> pakket import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main breidt MovieClip public function Main () uit cp.addEventListener (ColorPickerEvent.CHANGE, colorChange);  openbare functie colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue); // roept receiveColor (event.target.hexValue) aan in javascript</pre> <p>Nu moeten we deze receiveColor () -functie schrijven. In het begin van ons HTML-document starten we het javascript door deze functie te definiëren. Het neemt eenvoudig de waarde die Flash van hem heeft ontvangen en verandert de achtergrondkleur.</p> <pre> <script type="text/javascript"> function receiveColor(value)  document.bgColor = "#" + value;  </script></pre> <p>Zet dat meteen na <head> in uw HTML-bestand. Als het goed is, wanneer u de HTML-pagina in een browser uitvoert en de kleur in de ColorPicker wijzigt, moet dit de achtergrondkleur van de webpagina wijzigen.</p> <hr> <h2> Stap 6: ActionScript-functies aanroepen vanuit JavaScript</h2> <p>Het volgende voorbeeld is om gegevens van JavaScript naar Flash te verzenden. Plak de volgende code in het HTML-document in dee <script>tag die je in de laatste stap hebt toegevoegd: </p> <pre> window.onload = function () var sender = document.getElementById ("afzender"); // getElementById vindt een element volgens de eigenschap "id" sender.onclick = function () var ta = document.getElementById ("textArea"); document [ 'ExternalInterface'] receiveText (ta.value).; ta.value = ""; ; ;</pre> <p>Dit is wat dit doet: nadat het document is geladen, krijgen we de knop 'afzender' en koppelen we er een gebeurtenislistener aan. Wanneer op de knop 'afzender' wordt geklikt, wordt de functie receiveText () in Flash aangeroepen die we nu instellen.</p> <p>Terug in Flash vertellen we de ExternalInterface om de ActionScript-functie te registreren, zodat deze kan worden aangeroepen vanuit JavaScript. Vervolgens stellen we onze receiveText () -functie in:</p> <pre> pakket import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main breidt MovieClip public function Main () uit cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); // geeft JavaScript toegang tot de functie receiveText ().  openbare functie colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  // dit is de nieuwe receiveText-functie public function receiveText (value: String): void jsText.text = value; </pre> <p>(Nieuwe regels zijn 5, 9 en 16-19.)</p> <hr> <h2> Stap 7: JavaScript-meldingen, bevestigingen en prompts bellen vanuit ActionScript</h2> <p>We kunnen ook meldingen heel gemakkelijk vanuit ActionScript bellen. Hier vertellen we de ExternalInterface eenvoudigweg om een 'prompt' te bellen. We kunnen de ExternalInterface ook gebruiken om parameters door te geven aan functies. Hier vertellen we de 'prompt'-functie om de gebruiker zijn of haar naam te vragen. Wanneer onze gebruiker de info invoert, wordt deze teruggegeven aan het tekstvak 'promptText'.</p> <pre> pakket import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main breidt MovieClip public function Main () uit cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); // zorgt ervoor dat promptClick () wordt uitgevoerd wanneer op de promptknop wordt geklikt public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  public function receiveText (value: String): void jsText.text = value;  // functie die moet worden aangeroepen wanneer op de promptknop wordt geklikt. Zal om de gebruikersnaam vragen met behulp van een JS-prompt. public function promptClick (event: MouseEvent): void promptText.text = "U zei dat uw naam is:" + ExternalInterface.call ("prompt", "Wat is uw naam?"); </pre> <p>(Nieuwe regels zijn 10 en 21-24.)</p> <hr> <h2> Stap 8: Anonieme JavaScript-functies oproepen</h2> <p>Een ander ding dat we kunnen doen is onze eigen JavaScript-functies als strings schrijven en ze dan van de ExternalInterface bellen. Hier maken we een JavaScript-functie die een parameter ontvangt. We nemen die parameter en kennen de waarde toe aan het kenmerk innerHTML van onze divine 'textChange' in het HTML-document. U zult merken dat er geen externe JavaScript-functies worden aangeroepen - het is allemaal vervat in de ActionScript-code.</p> <pre> pakket import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main breidt MovieClip public function Main () uit cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // zorgt ervoor dat changeClick () wordt uitgevoerd wanneer op de knop change wordt geklikt public function colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  public function receiveText (value: String): void jsText.text = value;  openbare functie promptClick (event: MouseEvent): void promptText.text = "U zei dat uw naam is:" + ExternalInterface.call ("prompt", "Wat is uw naam?");  // wijzigt tekst binnen de HTML om overeen te komen met het tekstveld binnen Flash public function changeClick (event: MouseEvent): void ExternalInterface.call ("function (param) document.getElementById ('textChange'). innerHTMLHTML = param;" , changeText.text); changeText.text = ""; </pre> <p>(Nieuwe regels zijn 11 en 26-30.)</p> <hr> <h2> Stap 9: Anonieme JavaScript- en ActionScript-functies aanroepen</h2> <p>Ten slotte kunnen we aan beide zijden anonieme functies aanroepen. In de functie 'anoniem' registreren we een anonieme ActionScript-functie met de ExternalInterface. De functie vult wat tekst in en start vervolgens een timer. Vervolgens bellen we een anonieme JavaScript-functie. Deze functie vertelt het venster dat, wanneer het is aangepast, moet terugbellen naar onze anonieme ActionScript-functie.</p> <pre> pakket import fl.events.ColorPickerEvent; import flash.display.MovieClip; import flash.external.ExternalInterface; public class Main breidt MovieClip public function Main () uit cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // maak een nieuwe timer aan met een tik van een seconde en voeg een gebeurtenislistener var timer toe: Timer = new Timer (1000); timer.addEventListener (TimerEvent.TIMER, onTimer); anoniem(); // de anonieme functies instellen openbare functie colorChange (event: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  public function receiveText (value: String): void jsText.text = value;  openbare functie promptClick (event: MouseEvent): void promptText.text = "U zei dat uw naam is:" + ExternalInterface.call ("prompt", "Wat is uw naam?");  openbare functie changeClick (event: MouseEvent): void ExternalInterface.call ("function (param) document.getElementById ('textChange'). innerHTML = param;", changeText.text); changeText.text = "";  // wis de tekst na een seconde voorbij de openbare functie onTimer (event: TimerEvent): void resizeText.text = ""; timer.stop ();  public function anonymous (): void // zie je hoe we een functie binnen een andere functie definiëren? ExternalInterface.addCallback ("anon", function () resizeText.text = "Het formaat van het venster is gewijzigd."; Timer.start ();); // hetzelfde geldt hier ExternalInterface.call ("function () window.onresize = function () document ['externalInterface']. anon ();;"); </pre> <p>(Nieuwe regels zijn 13-17 en 37-52.)</p> <hr> <h2>Conclusie</h2> <p>De ExternalInterface is een extreem krachtige en nuttige klasse. Hiermee kunt u waarden en gebeurtenissen ontvangen, allemaal buiten de SWF. Veel plezier ermee en bedankt voor het lezen!</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">Snelle tip consistente weergave van lettertypen 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">Snelle tip hoe een eenvoudige tekennaamgenerator te coderen</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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
			</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>

Snelle tip hoe te communiceren tussen Flash en JavaScript

Stap 1: Stel het Flash-document in

Stap 2: Stel de Flash-gebruikersinterface in

Stap 3: Stel de HTML UI in