Snabbtips Kommunicera mellan Flash och JavaScript / Koda

s och

, vilket har <em>id</em> egenskaper så att vi kan komma åt dem från SWF.</li> </ul> <p>Din HTML ska visas enligt nedan:</p> <img src="//accentsconagua.com/img/images_27_3/quick-tip-how-to-communicate-between-flash-and-javascript_3.jpg"> <p>När koden har ersatts, ladda upp filen till din webbserver, så vi kan komma igång med ActionScript.</p> <hr> <h2> Steg 4: Ställ in en dokumentklass</h2> <p>Skapa en dokument klass för din Flash-fil; kalla det Main.as. Om du inte är bekant med dokumentklasser, läs den här snabba tipsen.</p> <pre> paket import flash.display.MovieClip; public class Main utökar MovieClip public function Main () </pre> <hr> <h2> Steg 5: Ringa JavaScript-funktioner från Flash</h2> <p>Det första vi gör med ExternalInterface är att kalla en JavaScript-funktion som kommer att ändra bakgrundsfärgen på vår webbsida. Så bifoga en händelselyttare till vår ColorPicker-komponent. När färgen ändras, skickar den hex-värdet till en javascript-funktion som kallas receiveColor ():</p> <pre> paket import fl.events.ColorPickerEvent; importera flash.display.MovieClip; importera flash.external.ExternalInterface; public class Main utökar MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange);  public function colorChange (händelse: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue); // call receiveColor (event.target.hexValue) i javascript</pre> <p>Nu måste vi skriva denna receiveColor () -funktion. I huvudet på vårt HTML-dokument startar vi javascript genom att definiera denna funktion. Det tar helt enkelt värdet som skickas till det från Flash och ändrar bakgrundsfärgen.</p> <pre> <script type="text/javascript"> function receiveColor(value)  document.bgColor = "#" + value;  </script></pre> <p>Sätt det direkt efter <head> i din HTML-fil. Om allt är bra, när du kör HTML-sidan i en webbläsare och ändra färgen i ColorPicker, bör den ändra bakgrundsfärgen på webbsidan.</p> <hr> <h2> Steg 6: Ringa ActionScript-funktioner från JavaScript</h2> <p>Nästa exempel kommer att vara att skicka data från JavaScript till Flash. I HTML-dokumentet klistrar du in följande kod inome <script>tagg du lagt till i det sista steget: </p> <pre> window.onload = function () var avsändare = document.getElementById ("avsändare"); // getElementById finner ett element enligt dess "id" -egenskap sender.onclick = function () var ta = document.getElementById ("textArea"); dokument [ 'External'] receiveText (ta.value).; ta.value = ""; ; ;</pre> <p>Så här gör du det här: När dokumentet är laddat får vi "avsändar" -knappen och bifogar en händelseloggare. När knappen "avsändare" är klickad, kommer den att ringa funktionen receiveText () i Flash som vi kommer att konfigurera nu.</p> <p>Tillbaka i Flash berättar vi om ExternalInterface att registrera ActionScript-funktionen så att den kan ringas från JavaScript. Då ställer vi upp funktionen receiveText ():</p> <pre> paket import fl.events.ColorPickerEvent; importera flash.display.MovieClip; importera flash.external.ExternalInterface; public class Main utökar MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); // tillåter JavaScript att komma åt funktionen receiveText ().  public function colorChange (händelse: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  // Detta är den nya ReceiveText-funktionen Public Function ReceiveText (värde: String): void jsText.text = value; </pre> <p>(Nya linjer är 5, 9 och 16-19.)</p> <hr> <h2> Steg 7: Ringer JavaScript-varningar, bekräftar och uppmanar från ActionScript</h2> <p>Vi kan också ringa varningar väldigt enkelt från ActionScript. Här berättar vi helt enkelt om ExternalInterface att kalla en "prompt". Vi kan också använda ExternalInterface för att skicka parametrar till funktioner. Här berättar vi om "prompt" -funktionen att fråga användaren sitt namn. När vår användare går in i informationen, skickas den tillbaka till textfältet "promptText".</p> <pre> paket import fl.events.ColorPickerEvent; importera flash.display.MovieClip; importera flash.external.ExternalInterface; public class Main utökar MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); // gör promptClick () köra när snabbknappen är klickad public function colorChange (händelse: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  allmän funktion receiveText (värde: String): void jsText.text = value;  // funktion som ska ringas när snabbknappen är klickad. Kommer att be om användarens namn med en JS-prompten. public function promptClick (händelse: MouseEvent): void promptText.text = "Du sa att ditt namn är:" + ExternalInterface.call ("prompt", "What is your name?"); </pre> <p>(Nya linjer är 10 och 21-24.)</p> <hr> <h2> Steg 8: Anonyma JavaScript-funktioner kallas</h2> <p>En annan sak vi kan göra är att skriva egna JavaScript-funktioner som strängar, kalla dem sedan från ExternalInterface. Här skapar vi en JavaScript-funktion som tar emot en parameter. Vi tar den parametern och tilldelar dess värde till innerHTML-attributet i vår "textChange" div i HTML-dokumentet. Du kommer märka att det inte finns några externa JavaScript-funktioner som heter - det finns alla i ActionScript.</p> <pre> paket import fl.events.ColorPickerEvent; importera flash.display.MovieClip; importera flash.external.ExternalInterface; public class Main utökar MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // gör förändringClick () kör när ändringsknapp är klickad public function colorChange (händelse: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  allmän funktion receiveText (värde: String): void jsText.text = value;  public function promptClick (händelse: MouseEvent): void promptText.text = "Du sa att ditt namn är:" + ExternalInterface.call ("prompt", "What is your name?");  // ändrar text i HTML-fältet för att matcha textfältet inuti Ändring av Flash-funktionen. Klick (händelse: MouseEvent): void ExternalInterface.call ("funktion (param) document.getElementById ('textChange'). innerHTML = param;" , changeText.text); changeText.text = ""; </pre> <p>(Nya rader är 11 och 26-30.)</p> <hr> <h2> Steg 9: Anropar anonyma JavaScript och ActionScript-funktioner</h2> <p>Slutligen kan vi kalla anonyma funktioner på båda sidor. I funktionen "anonym" registrerar vi en anonym ActionScript-funktion med ExternalInterface. Funktionen fyller i lite text och startar sedan en timer. Därefter kallar vi en anonym JavaScript-funktion. Den här funktionen berättar fönstret, när det har ändrats, måste det ringa tillbaka till vår anonyma ActionScript-funktion.</p> <pre> paket import fl.events.ColorPickerEvent; importera flash.display.MovieClip; importera flash.external.ExternalInterface; public class Main utökar MovieClip public function Main () cp.addEventListener (ColorPickerEvent.CHANGE, colorChange); ExternalInterface.addCallback ("receiveText", receiveText); prompt.addEventListener (MouseEvent.CLICK, promptClick); change.addEventListener (MouseEvent.CLICK, changeClick); // skapa en ny timer med en sekunds tick och lägg till en händelseloggare var timer: Timer = Ny Timer (1000); timer.addEventListener (TimerEvent.TIMER, onTimer); anonym(); // ställa in de anonyma funktionerna public function colorChange (händelse: ColorPickerEvent): void ExternalInterface.call ("receiveColor", event.target.hexValue);  allmän funktion receiveText (värde: String): void jsText.text = value;  public function promptClick (händelse: MouseEvent): void promptText.text = "Du sa att ditt namn är:" + ExternalInterface.call ("prompt", "What is your name?");  allmän funktionsk ChangeClick (event: MouseEvent): void ExternalInterface.call ("funktion (param) document.getElementById ('textChange'). innerHTML = param;", changeText.text); changeText.text = "";  // rensa texten efter en sekund har passerat den offentliga funktionen onTimer (händelse: TimerEvent): void resizeText.text = ""; timer.stop ();  allmän funktion anonym (): void // se hur vi definierar en funktion i en annan funktion? ExternalInterface.addCallback ("anon", funktion () resizeText.text = "Fönstret har ändrats."; Timer.start ();); // samma gäller här ExternalInterface.call ("function () window.onresize = function () document ['externalInterface']. anon ();;"); </pre> <p>(Nya linjer är 13-17 och 37-52.)</p> <hr> <h2>Slutsats</h2> <p>ExternalInterface är en extremt kraftfull och användbar klass. Med det kan du ta emot värden och händelser, alla utanför SWF. Ha kul med det och tack för att du läste!</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">Snabbtips hur man konsekvent återger typsnitt 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">Snabbtips Så här kodar du en enkel karaktärsgeneratorgenerator</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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la 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>

Snabbtips Kommunicera mellan Flash och JavaScript

Steg 1: Ställ in Flash-dokumentet

Steg 2: Ställ in Flash-gränssnittet

Steg 3: Ställ in HTML-gränssnittet