Share
In deze zelfstudie laat ik u zien hoe u toegang kunt krijgen tot dezelfde opgeslagen gegevens in afzonderlijke Flash- en JavaScript-apps door deze op te slaan in HTML5 LocalStorage en ExternalInterface te gebruiken om deze met AS3 te bereiken. We zullen dezelfde app maken in zowel JavaScript als Flash om aan te tonen dat het platformonafhankelijk is.
Lokale opslag is een opwindend onderdeel van HTML5, waarmee u opslagruimte op de browser kunt maken die persistent is, wat betekent dat het duurt tussen browsersessies. Het verdwijnt alleen als de gebruiker zijn browsercache wist.
Het is een zeer eenvoudige API om te gebruiken, met behulp van eenvoudige sleutel / waarde-paren om gegevens op te slaan, en kan op een paar verschillende manieren worden gebruikt. Een manier is om te gebruiken localStorage.setItem ( 'key', 'waarde'), en localStorage.getItem ( 'key'). Een andere manier is Objectnotatie gebruiken: localStorage [key] = waarde om een waarde in te stellen, en theValue = localStorage [key] om het op te halen. En als dat nog niet genoeg was, is er nog een derde weg - Dot Notation: localStorage.key = waarde om het in te stellen, en theValue = localStorage.key om het op te halen.
Ik kies voor de derde weg in deze tutorial, maar als je de voorkeur geeft aan een van de andere manieren waarop je de code kunt aanpassen, zou het prima moeten werken. Lokale opslag heeft nog enkele andere methoden, maar dit zijn de enige twee methoden die we nodig hebben: één om een waarde in te stellen en één om die waarde op te halen.
We zullen eerst de JavaScript-app maken. Je zou dit en het Flash-project op een live server moeten ontwikkelen, anders kom je problemen tegen. Ik gebruik WAMP op mijn computer als een lokale hostingomgeving.
Maak een map om uw project in op te slaan. Maak binnen deze map twee nieuwe mappen. Noem een van hen "js" en de andere "stijlen".
Maak binnen de map "styles" een nieuw bestand met de naam "style.css" en maak binnen de map "js" een nieuw bestand met de naam "externalinterface.js". Eindelijk, maak aan de basis van uw projectmap een nieuw bestand aan en noem het "index.html".
Voer de volgende code in in het bestand "index.html" dat u in de bovenstaande stap hebt gemaakt.
Lokale opslag met externe interface Willekeurige score is:
Hier stellen we de structuur in van ons "index.html" -bestand. We nemen de 'style.css' en de 'externalinterface.js' op die we in de bovenstaande stap hebben gemaakt. De scorediv wordt bijgewerkt wanneer we een nieuwe hoge score behalen, en de randomscorediv wordt telkens bijgewerkt als we een nieuwe score genereren (klik op de knop om een willekeurige score te genereren).
Voer het volgende in in het "style.css" dat u in de bovenstaande stap hebt gemaakt.
#wrapper width: 400px; Hoogte: 400px; marge: 0 auto; #scorewrapper width: 400px; Hoogte: 200px; background-color: #FFFFFF; #randomscorediv visibility: hidden; body background: # f2f2f2; text-align: center; opvulling: 20px;
Hier stellen we de app in om gecentreerd te worden op de pagina, stel de Achtergrond kleur van de scorewrapper div, en zet de randomscorediv aanvankelijk zijn verborgen (onzichtbaar). Als we op de knop klikken, stellen we de randomscorediv zichtbaar.
Voer de volgende code in bij het 'externalinterface.js' dat u in de bovenstaande stap heeft gemaakt.
Accentsconagua
window.onload = function () alert ("Window Loaded"); Wanneer u elementen op uw webpagina moet koppelen, moet u ervoor zorgen dat het venster als eerste is geladen. Omdat we de knoop moeten gebruiken, gebruiken we de window.onload functie geboden door JavaScript. Hier duiken we gewoon een waarschuwing op met de woorden "Window Loaded". Als u de pagina test, zou u moeten zien dat deze werkt.
In deze stap zullen we de code coderen setScore () functie die in eerste instantie de score instelt op 0. Voer de volgende code in de "externalinterface.js" in.
window.onload = function () function setScore () if (! localStorage.score) localStorage.score = 0;
Hier controleren we of het localStorage.score bestaat, en als dit niet het geval is, initialiseren we de waarde tot 0. Wanneer de gebruiker de app voor het eerst uitvoert of nadat de cache is leeggemaakt, zou deze waarde niet bestaan. We moeten deze dus maken.
Bel nu deze functie onmiddellijk nadat u deze hebt gemaakt en test door deze in een melding te plaatsen.
window.onload = function () function setScore () if (! localStorage.score) localStorage.score = 0; setScore (); alert (localStorage.score);
We hebben een manier om onze score te bepalen, nu hebben we een manier nodig om het op te halen. Dat is wat de getScore () functie zal volbrengen. Voer het volgende in onder setScore () functie die u in de bovenstaande stap hebt gemaakt.
functie getScore () if (localStorage.score) return (localStorage.score);
Hier controleren we dat localStorage.score bestaat, en als dat het geval is, geven we gewoon de waarde terug die het bevat. Verwijder de waarschuwing uit de vorige stap en voeg de volgende waarschuwing toe onder de getScore () functie.
functie getScore () if (localStorage.score) return (localStorage.score); alert (getScore ());
Als je nu test, zou je de waarschuwing opnieuw moeten zien en de score van "0" laten zien.
Nu we een manier hebben om onze score in te stellen en te behalen, hebben we een manier nodig om deze bij te werken. Dat is precies wat de updateScore () functie bereikt. Voeg het volgende toe onder de getScore () functie die u in de bovenstaande stap hebt gemaakt.
function updateScore (newScore) if (localStorage.score) localStorage.score = newScore
Hier passeren we als een parameter een NewsCore; we zetten dan de localStorage.score gelijk aan deze waarde. Verwijder de waarschuwing uit de vorige stap en voeg dan het volgende toe onder updateScore () functie die u zojuist hebt gemaakt.
function updateScore (newScore) if (localStorage.score) localStorage.score = newScore; updateScore (10); alert (getScore ());
Als je nu test, zou je "10" moeten zien worden gewaarschuwd, omdat we op regel 6 de score hebben geüpdatet naar 10.
Nu we al onze methoden hebben gebruikt om de score te manipuleren, laten we het laten zien. Voer het volgende in onder updateScore () functie die u in de bovenstaande stap hebt gemaakt.
function showScore () var scoreText = document.getElementById ('scorediv'); scoreText.innerHTML = "Huidige hoge score is" + getScore (); Hier krijgen we een verwijzing naar de scorediv, en verander zijn innerHTML eigenschap om de huidige score te tonen.
Roep deze functie meteen aan nadat u deze hebt gemaakt.
function showScore () var scoreText = document.getElementById ('scorediv'); scoreText.innerHTML = "Huidige hoge score is" + getScore (); showScore (); Als u nu de pagina test, ziet u de woorden "Huidige hoge score is 10".
We willen een functie uitvoeren wanneer de gebruiker op de knop klikt. Voeg het volgende toe onder de showScore () knop die u in de bovenstaande stap hebt gemaakt.
var scoreBtn = document.getElementById ('scorebtn'); scoreBtn.addEventListener ( 'klik', getRandomScore, false); Hier krijgen we een verwijzing naar de knop die we de ID hebben gegeven scorebtn. We voegen vervolgens een EventListener van het type toe Klik, welke de getRandomScore () functie die we in de volgende stap zullen maken.
De getRandomScore () functie is waar de logica van deze toepassing plaatsvindt. Voeg het volgende toe onder de regel scoreBtn.addEventListener ( 'klik', getRandomScore, false); je hebt de bovenstaande stap ingevoerd.
function getRandomScore () var randScoreText = document.getElementById ('randomscorediv'); randScoreText.style.visibility = 'zichtbaar'; var randScore = Math.floor (Math.random () * 200000); var currentScore = Number (getScore ()); randScoreText.innerHTML = "Willekeurige score is" + randScore; if (randScore> currentScore) alert ("Nieuwe hoge score !!"); updateScore (randScore); showScore (); Hier krijgen we eerst een verwijzing naar de randomscorediv en stel het in om zichtbaar te zijn. We genereren vervolgens een willekeurige score door te bellen Math.floor (Math.random () * 200000), waarmee een getal tussen 0 en 200.000 wordt gemaakt. We gebruiken onze getScore () functie om de variabele in te stellen huidige score (zorg ervoor dat we het op een getal plaatsen) en stel de innerHTML van de randScoreText naar de randScore.
Ten slotte controleren we of randScore is groter dan huidige score, en als het is, laten we het zien alert ("Nieuwe hoge score !!") en werk dan het localStorage.score door onze te bellen updateScore () methode en doorgeven in de randomScore. We gebruiken dan showScore () om de nieuwe score te tonen.
Dit concludeert de JavaScript-toepassing - u kunt deze hier testen. In de volgende stap zullen we beginnen met het ontwikkelen van de Flash-versie.
In deze stap zullen we het Flash-project opzetten.
Maak een map om uw projectbestanden in op te slaan. Maak nu in deze map een map met de naam "js" en daarbinnen deze map maak een bestand aan en noem het "externalinterface.js". Plaats een bestand met de naam "index.html" in de hoofdmap van uw projectmap. Maak ten slotte een nieuw Flash-project en sla het op in de hoofdmap, zorg ervoor dat u het "externalInterface.fla" noemt. Geef het een witte achtergrond en stel de grootte in op 400x200 px.
Voeg het volgende toe aan het bestand "index.html" dat u in de bovenstaande stap hebt gemaakt.
Tuts + Premium: demo
Hier stellen we ons "index.html" -bestand in. We nemen de 'externalinterface.js' op die we in de bovenstaande stap hebben gemaakt, en insluiten het SWF-bestand in de voorwerp label. Als u beslist om uw FLA iets anders te noemen, is het belangrijk om waar nodig de juiste waarde voor de SWF te plaatsen.
Voeg het volgende toe aan de "externalinterface.js" die u in de bovenstaande stap hebt gemaakt.
functie setScore () if (! localStorage.score) localStorage.score = 0; functie getScore () if (localStorage.score) return localStorage.score; functie updateScore (nieuwe score) localStorage.score = newScore
Dit zijn dezelfde functies die we in de JavaScript-toepassing hebben gebruikt, dus ik zal ze hier niet uitleggen. Het is belangrijk op te merken dat ik de window.onload, echter.
In deze stap zullen we de gebruikersinterface instellen voor de FLA die u in de bovenstaande stappen hebt gemaakt.
Selecteer het gereedschap Tekst en zorg ervoor dat de volgende eigenschappen zijn ingesteld onder het paneel "Teken".
Sleep nu een TextField naar het podium en geef het de volgende eigenschappen.
Geef het de instantienaam "currentScore_txt" en zorg ervoor dat het type respectievelijk is ingesteld op "Klassieke tekst" en "Dynamische tekst".
Sleep nu een ander TextField naar het werkgebied en geef het de volgende eigenschappen.
Geef het de instantienaam "randomScore_text".
Ga naar het deelvenster Componenten en sleep een knop naar het werkgebied. (U kunt naar het deelvenster Componenten gaan door naar Venster> Onderdelen te gaan of door op CTRL + F7 te drukken.)
Geef de knop de volgende eigenschappen.
Geef het de instantienaam "scorebtn".
Wijzig het label in het venster "Componentenparameters" in "Score genereren".
Selecteer het gereedschap Rechthoek en geef het een vulkleur van "#CCCCCC" en geen streek.
Versleep nu een rechthoek op het podium. Klik om de rechthoek te selecteren en geef het de volgende eigenschappen.
Klik nu met de rechtermuisknop op de rechthoek en kies "Converteren naar symbool"; geef het de naam "alertBox".
Dubbelklik op de rechthoek om naar de bewerkmodus te gaan. Open het paneel Componenten en sleep een knop naar deze MovieClip. Geef de Button de volgende eigenschappen.
Geef het de instantienaam "alertBox_btn" en wijzig het label in "OK".
Sleep een TextField naar de MovieClip en geef het de volgende eigenschappen.
Typ de woorden "Nieuwe hoge score !!" in het TextField en sluit vervolgens deze MovieClip.
Maak een nieuw ActionScript-bestand en sla het op als "Main.as". Stel vervolgens in de FLA Main in als de documentklasse.
Voeg het volgende toe aan het bestand "Main.as" dat u in de bovenstaande stap hebt gemaakt.
pakket import flash.display.Sprite; import flash.events. *; import flash.external.ExternalInterface; public class Hoofd breidt uit openbare functie Main ()
Hier importeren we de klassen die we nodig hebben en coderen we onze constructorfunctie.
Voeg het volgende toe Hoofd().
public function Main () addEventListener (Event.ADDED_TO_STAGE, setup);
De ADDED_TO_STAGE gebeurtenis wordt uitgevoerd wanneer de film volledig is geladen. Hier roept het een opstelling functie, die we vervolgens zullen creëren.
Voeg het volgende toe onder de Hoofd() constructorfunctie.
persoonlijke functie-instelling (e: Event): void trace ("MOVIE READY"); Als u nu test, ziet u dat "MOVIE READY" in het uitvoerpaneel wordt gevolgd.
U hebt misschien gemerkt dat de waarschuwingsbox die we hebben gemaakt, werd weergegeven toen de film voor het eerst startte; laten we het verbergen. Voer het volgende in het opstelling() functie.
persoonlijke functie-instelling (e: Event): void alertBox.visible = false;
Hier stellen we de alertbox zo in dat deze niet zichtbaar is. Ga je gang en test de film.
In deze stap gebruiken we de klasse External Interface om ons te bellen setScore () functie die we in de JavaScript-code hebben ingesteld. Voer het volgende in onder opstelling() functie die u in de bovenstaande stappen hebt gemaakt.
private function setScore (): void ExternalInterface.call ("setScore"); Hier gebruiken we de () aanroepen methode van de klasse ExternalInterface om de setScore () functie die in onze JavaScript-code staat. De () aanroepen methode neemt als een parameter de naam van de JavaScript-functie die moet worden uitgevoerd (als een tekenreeks). Als we parameters hadden in onze setScore () functie, we zouden ze hier ook hebben opgenomen.
We willen dat deze functie wordt uitgevoerd wanneer de film voor het eerst wordt gestart, dus voeg deze toe aan de opstelling() functie.
persoonlijke functie-instelling (e: Event): void alertBox.visible = false; setScore ();
In deze stap krijgen we de score te zien in onze Flash-film. JavaScript stuurt de score naar Flash, en hiervoor gebruiken we de methode External Interface addCallback () om de functie toegankelijk te maken.
Voeg het volgende toe binnen de opstelling() functie.
persoonlijke functie-instelling (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); De addCallback neemt twee parameters in beslag: de naam van een functie die u via JavaScript (als een tekenreeks) toegankelijk wilt maken, en een AS3-functie waarmee deze oproep wordt gekoppeld (als een AS3-functie-callback). Hier willen we de AS3 maken getScore () functie eerst beschikbaar voor onze JavaScript-code; voor de eenvoud geven we het de naam getScore () ook toegankelijk via JavaScript.
We zullen dit nu coderen getScore () AS3-functie. Voeg het volgende toe onder de setScore () functie die u in de bovenstaande stap hebt gemaakt.
persoonlijke functie getScore (score: String): int var theScore: int = int (score); retourneer deScore;
Hier hebben we onze getScore () functie. Omdat we een string ontvangen van de JavaScript-code, stellen we de parameter in als een tekenreeks en retourneren we een geheel getal. Binnen deze functie stellen we een variabele in met de naam de score en gooi het naar een int; we keren dan terug de score.
In deze stap maken we de huidige score weer in de Flash-film. Voer het volgende in onder getScore () functie die u in de bovenstaande stap hebt gemaakt.
private function showScore (): void currentScore_txt.text = "Huidige hoge score is:" + ExternalInterface.call ("getScore"); Hier hebben we de currentScore_txt.text om de huidige score weer te geven. We gebruiken ExternalInterface.call ( "getScore") om de. te bellen getScore functie in de JavaScript-code, die op zijn beurt de getScore () functie in onze ActionScript-code. Vergeet niet dat dit de score retourneert.
Voeg nu het volgende toe binnen de opstelling() functie.
persoonlijke functie-instelling (e: Event): void alertBox.visible = false; ExternalInterface.addCallback ("getScore", getScore); setScore (); showScore (); Als u de film nu test, ziet u de score die wordt weergegeven.
We hebben een manier nodig om enkele luisteraars toe te voegen aan onze knoppen, zodat wanneer de gebruiker erop klikt ze iets doen. Voeg het volgende toe onder de showScore () methode die u in de bovenstaande stap hebt gemaakt.
private function addButtonListeners (): void scorebtn.addEventListener (MouseEvent.CLICK, getRandomScore); alertBox.alertBox_btn.addEventListener (MouseEvent.CLICK, hideAlertBox);
Voeg de volgende gemarkeerde regel toe binnen de opstelling() functie.
persoonlijke functie-instelling (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); showScore (); addButtonListeners (); Hier hebben we onze scorebtn om een AS3-functie met de naam te noemen getRandomScore (), en we hebben de alertBox_btn dat is binnen de Alertbox om een AS3-functie met de naam te noemen hideAlertBox (). Vervolgens zullen we deze functies toevoegen.
Voeg het volgende toe onder de addButtonListeners () functie die u zojuist hebt gemaakt.
persoonlijke functie getRandomScore (e: MouseEvent): void private function hideAlertBox (e: Event): void alertBox.visible = false;
We zullen het voltooien getRandomScore () functie in de volgende stap. Alles wat we doen in de hideAlertBox () functie is ingesteld op Alertbox om niet zichtbaar te zijn. We zullen het zichtbaar maken wanneer de gebruiker een nieuwe hoge score krijgt.
In deze stap zullen we de code coderen getRandomScore () functie, waarbij - net als in de JavaScript-toepassing die we hebben gemaakt - alle logica van de app plaatsvindt. Voeg het volgende toe binnen de getRandomScore () lichaam dat je in de bovenstaande stap hebt gemaakt.
private functie getRandomScore (e: MouseEvent): void var randScore: int = Math.floor (Math.random () * 200000); var currentScore: int = ExternalInterface.call ("getScore"); randomScore_text.text = "Willekeurige score is:" + randScore.toString (); if (randScore> currentScore) alertBox.visible = true; ExternalInterface.call ( "updateScore", randScore); showScore (); Dit werkt op een vergelijkbare manier als de JavaScript-versie. We genereren eerst een getal tussen 0 en 200.000. Dan krijgen we de huidige score door te gebruiken ExternalInterface.call ( "getScore"). We gaan zitten randomScore_text om de willekeurige score voor te lezen. Ten slotte controleren we of randScore is groter dan huidige score, en als dat het geval is, laten we de waarschuwingsbox zien, werk de score in Lokale opslag bij met behulp van ExternalInterface.call ( "updateScore", randScore), en bel onze showScore () methode om de nieuwe score te tonen.
Bekijk de demo.
We hebben externe interface gebruikt om toegang te krijgen tot de lokale opslag-API vanuit HTML5. Ik hoop dat je deze tutorial nuttig hebt gevonden en bedankt voor het lezen!
