Share
În acest tutorial vă vom arăta cum să accesați aceleași date salvate în aplicații separate Flash și JavaScript, stocându-le în HTML5 LocalStorage și utilizând ExternalInterface pentru a ajunge la AS3. Vom crea aceeași aplicație atât în JavaScript, cât și în Flash, pentru a demonstra că aceasta este platformă agnostică.
Stocarea locală este o parte interesantă a HTML5 care vă permite să faceți stocarea laterală a browserului, care este persistentă, ceea ce înseamnă că durează între sesiunile de browser. Dispare doar când utilizatorul șterge memoria cache a browserului.
Este un API foarte ușor de utilizat, folosind perechi simple de chei-valoare pentru a stoca date și poate fi folosit în câteva moduri diferite. O modalitate este de a utiliza localStorage.setItem ( 'cheie', 'valoare'), și localStorage.getItem ( 'cheie'). O altă modalitate este de a utiliza notarea obiectelor: localStorage [key] = valoare pentru a seta o valoare, și theValue = localStorage [cheie] pentru ao prelua. Și dacă acest lucru nu este de ajuns, există încă oa treia cale - notația Dot: localStorage.key = valoare pentru ao seta, și Value = localStorage.key pentru ao prelua.
Aleg calea a treia în acest tutorial, dar dacă preferați unul din celelalte moduri, puteți modifica codul și ar trebui să funcționeze foarte bine. Depozitarea locală are alte câteva metode, dar acestea sunt singurele două metode de care avem nevoie: una pentru a seta o valoare și una pentru a extrage acea valoare.
Vom crea mai întâi aplicația JavaScript. Ar trebui să dezvoltați atât acest proiect cât și proiectul Flash pe un server live, altfel veți avea probleme. Folosesc WAMP pe mașina mea ca mediu de găzduire local.
Creați un dosar pentru stocarea proiectului dvs. În acest director creați două dosare noi. Denumiți unul dintre ei "js" și celelalte "stiluri".
În directorul "stiluri" creați un fișier nou și denumiți-l "style.css", iar în folderul "js" creați un fișier nou și numiți-l "externalinterface.js". În cele din urmă, la baza directorului proiectului creați un fișier nou și denumiți-l "index.html".
Introduceți următorul cod în fișierul "index.html" pe care l-ați creat în pasul de mai sus.
Depozitare locală cu interfață externă Scorul aleatoriu este:
Aici am creat structura fișierului nostru "index.html". Noi includem "style.css" și "externalinterface.js" pe care le-am creat în pasul de mai sus. scorediv va fi actualizat atunci când vom obține un nou punctaj ridicat, și randomscorediv va fi actualizată de fiecare dată când generăm un scor nou (faceți clic pe buton pentru a genera un scor aleatoriu).
Introduceți următoarele în "style.css" pe care l-ați creat în pasul de mai sus.
#wrapper width: 400px; height: 400px; marja: 0 auto; #scorewrapper lățime: 400px; height: 200px; culoare de fundal: #FFFFFF; #randomscorediv visibility: hidden; corp background: # f2f2f2; text-align: centru; padding: 20px;
Aici setăm ca aplicația să fie centrată în pagină, setați-o culoare de fundal din scorewrapper div, și setați randomscorediv pentru a fi inițial ascuns (invizibil). Când faceți clic pe butonul, vom seta randomscorediv la vizibil.
Introduceți următorul cod în "externalinterface.js" pe care l-ați creat în pasul de mai sus.
Accentsconagua
window.onload = function () alert ("Fereastra încărcată"); Ori de câte ori trebuie să legați elemente de pe pagina dvs. Web, trebuie să vă asigurați că fereastra sa încărcat mai întâi. Deoarece trebuie să legăm butonul, folosim window.onload funcție oferită de JavaScript. Aici apare doar o alertă cu cuvintele "Window Loaded". Dacă testați pagina trebuie să vedeți că funcționează.
În acest pas vom codifica setScore () funcția care stabilește inițial scorul la 0. Introduceți următorul cod în "externalinterface.js".
window.onload = function () functie setScore () if (! localStorage.score) localStorage.score = 0;
Aici verificăm dacă localStorage.score există și dacă nu inițiază valoarea lui la 0. Atunci când utilizatorul execută prima aplicație sau după ce șterge cache-ul, această valoare nu va exista - așa că trebuie să o creăm.
Acum apelați această funcție imediat după ce ați creat-o și testați-o punând-o într-o alertă.
window.onload = function () functie setScore () if (! localStorage.score) localStorage.score = 0; setScore (); alert (localStorage.score);
Avem o modalitate de a ne fixa scorul, acum avem nevoie de o modalitate de ao recupera. Asta este ceea ce getScore () funcția va realiza. Introduceți următoarele sub setScore () funcție creată în pasul de mai sus.
funcția getScore () if (localStorage.score) return (localStorage.score);
Aici verificăm asta localStorage.score există, și dacă ne întoarcem pur și simplu valoarea pe care o deține. Eliminați alerta din pasul anterior și adăugați următoarea avertizare sub getScore () funcţie.
funcția getScore () if (localStorage.score) return (localStorage.score); alertă (getScore ());
Dacă încercați acum, ar trebui să vedeți alerta din nou afișând scorul de "0".
Acum, că avem o modalitate de a stabili și de a obține scorul nostru, avem nevoie de o modalitate de ao actualiza. Asta este exact ceea ce updateScore () funcționează. Adăugați următoarele sub getScore () funcție creată în pasul de mai sus.
funcția updateScore (newScore) if (localStorage.score) localStorage.score = newScore
Aici trecem ca parametru a newScore; apoi am setat localStorage.score egală cu această valoare. Eliminați alerta din pasul anterior, apoi adăugați următoarele sub updateScore () pe care tocmai l-ați creat.
funcția updateScore (newScore) if (localStorage.score) localStorage.score = newScore; updateScore (10); alert (getScore ());
Dacă încercați acum, ar trebui să vedeți că "10" este alertat, deoarece pe linia 6 am actualizat scorul la 10.
Acum, că avem toate metodele noastre pentru a manipula scorul, hai să o arătăm. Introduceți următoarele sub updateScore () funcție creată în pasul de mai sus.
funcția showScore () var scoreText = document.getElementById ('scored'); scoreText.innerHTML = "Scorul curent este mare" + getScore (); Aici găsim o referință la scorediv, și modificați-o innerHTML proprietate pentru a afișa scorul curent.
Apelați această funcție imediat după ce ați creat-o.
funcția showScore () var scoreText = document.getElementById ('scored'); scoreText.innerHTML = "Scorul curent este mare" + getScore (); showScore (); Dacă testați pagina acum, ar trebui să vedeți cuvintele "Scorul curent ridicat este de 10".
Vrem să executați o funcție când utilizatorul face clic pe buton. Adăugați următoarele sub showScore () butonul creat în pasul de mai sus.
var scorBtn = document.getElementById ('scorebtn'); scoreBtn.addEventListener ( 'clic', getRandomScore, false); Aici găsim o referință la butonul pe care l-am dat ID-ul scorebtn. Apoi adăugăm un EventListener de tip clic, care cheamă getRandomScore () pe care o vom crea în etapa următoare.
getRandomScore () funcția este locul în care are loc logica acestei aplicații. Adăugați următoarele sub linie scoreBtn.addEventListener ( 'clic', getRandomScore, false); ați introdus în pasul de mai sus.
funcția getRandomScore () var randScoreText = document.getElementById ('randomscorediv'); randScoreText.style.visibility = 'vizibil'; var randScore = Math.floor (Math.random () * 200000); var actualScore = Număr (getScore ()); randScoreText.innerHTML = "Scorul aleatoriu este" + randScore; dacă (randScore> currentScore) alert ("New High Score !!"); updateScore (randScore); showScore (); Aici, mai întâi se face referire la randomscorediv și setați-l să fie vizibil. Apoi generăm un scor aleatoriu prin apelare Math.floor (Math.random () * 200000), care creează un număr între 0 și 200.000. Noi ne folosim getScore () pentru a seta variabila currentScore (asigurându-ne că am aruncat-o la un număr) și setați innerHTML din randScoreText la randScore.
În cele din urmă, verificăm dacă randScore este mai mare decât currentScore, și dacă arătăm un alertă ("Scor nou nou!") și apoi actualizați localStorage.score prin chemarea noastră updateScore () metoda și trecerea în randomScore. Apoi vom folosi showScore () pentru a arăta noul punctaj.
Aceasta conchide aplicația JavaScript - o puteți testa aici. În următorul pas vom începe să dezvelim versiunea Flash.
În acest pas vom configura proiectul Flash.
Creați un dosar pentru stocarea fișierelor de proiect. Acum, în interiorul acestui folder creați un folder numit "js" și în interiorul acestuia acest folder creați un fișier și denumiți-l "externalinterface.js". La rădăcina directorului dvs. de proiect creați un fișier numit "index.html". În cele din urmă, creați un nou proiect Flash și salvați-l în dosarul rădăcină, asigurându-vă că îl numiți "externalInterface.fla". Dați-i un fundal alb și setați dimensiunea la 400x200px.
Adăugați următoarele în fișierul "index.html" pe care l-ați creat în pasul de mai sus.
Tuts + Premium: Demo
Aici am creat fișierul "index.html". Am inclus "externalinterface.js" pe care l-am creat în pasul de mai sus și încorporăm fișierul SWF în interiorul obiect etichetă. Dacă ați decis să vă numiți FLA ceva diferit, este important să placați valoarea corectă pentru SWF, dacă este cazul.
Adăugați următoarele la "externalinterface.js" pe care l-ați creat în pasul de mai sus.
funcția setScore () if (! localStorage.score) localStorage.score = 0; funcția getScore () if (localStorage.score) return localStorage.score; function updateScore (newScore) localStorage.score = newScore
Acestea sunt aceleași funcții pe care le-am folosit în aplicația JavaScript, așa că nu le voi explica aici. Este important să rețineți că am eliminat window.onload, in orice caz.
În acest pas vom seta interfața utilizator pentru FLA pe care ați creat-o în pașii de mai sus.
Selectați instrumentul Text și asigurați-vă că următoarele setări sunt setate sub panoul "Caracter".
Acum trageți un TextField afară și dați-i următoarele proprietăți.
Dați-i numele de instanță "currentScore_txt" și asigurați-vă că tipul este setat la "Text clasic" și respectiv "Text dinamic".
Acum, glisați un alt TextField pe scenă și dați-i următoarele proprietăți.
Dă-i numele de instanță "randomScore_text".
Accesați panoul Components și trageți un buton pe scenă. (Puteți ajunge la panoul Componente accesând fereastra> Componente sau doar apăsând CTRL + F7.)
Dați butonul următoarele proprietăți.
Dați-i numele de instanță "scorebtn".
În panoul "Parametri componente", schimbați eticheta la "Generați scorul".
Selectați instrumentul Rectangular și dați-i o culoare de umplere a "#CCCCCC" și nici un accident vascular cerebral.
Acum, trageți un dreptunghi pe scenă. Faceți clic pentru a selecta dreptunghiul și a da următoarele proprietăți.
Acum, faceți clic dreapta pe dreptunghi și alegeți "Convert to Symbol"; da-i numele "alertBox".
Faceți dublu clic pe dreptunghi pentru a intra în modul de editare. Deschideți panoul Componente și trageți un buton în acest film. Dați Buttonului următoarele proprietăți.
Dați-i numele de instanță "alertBox_btn" și schimbați eticheta pentru a citi "OK".
Glisați un TextField în MovieClip și dați-i următoarele proprietăți.
Introduceți cuvintele "Scor nou nou!" în TextField, apoi închideți acest film.
Creați un nou fișier ActionScript și salvați-l ca "Main.as". Apoi, înapoi în FLA, setați Main pentru a fi Clasa de documente.
Adăugați următoarele în fișierul "Main.as" pe care l-ați creat în pasul de mai sus.
pachet import flash.display.Sprite; import flash.events. *; import flash.external.ExternalInterface; clasa publică principală se extinde Sprite funcția publică principală ()
Aici introducem clasele de care avem nevoie și codificăm funcția constructorului nostru.
Adăugați următoarele în cadrul Principal().
funcția publică principală () addEventListener (Event.ADDED_TO_STAGE, setup);
ADDED_TO_STAGE evenimentul rulează când filmul este încărcat complet. Aici numeste a înființat funcție, pe care o vom crea în continuare.
Adăugați următoarele sub Principal() constructor.
setarea funcției private (e: Eveniment): void trace ("MOVIE READY"); Dacă testați acum, veți vedea că "MOVIE READY" este urmărită în panoul de ieșire.
S-ar putea să fi observat că caseta de alertă pe care am creat-o era afișată când începe primul film; hai să o ascundem. Introduceți următoarele în cadrul înființat() funcţie.
setarea funcției private (e: Event): void alertBox.visible = false;
Aici setăm caseta de alertă să nu fie vizibilă. Continuați și testați filmul.
În acest pas vom folosi clasa de interfață externă pentru a ne contacta setScore () funcție pe care am creat-o în codul JavaScript. Introduceți următoarele sub înființat() funcția pe care ați creat-o în pașii de mai sus.
funcția privată setScore (): void ExternalInterface.call ("setScore"); Aici folosim apel() metoda din clasa ExternalInterface pentru a rula setScore () funcția care este în codul nostru JavaScript. apel() metoda ia ca parametru numele funcției JavaScript care rulează (ca șir). Dacă am avea parametri în nostru setScore () ne-ar fi inclus și aici.
Vrem ca această funcție să fie difuzată la prima pornire a filmului, deci adăugați-o la înființat() funcţie.
setarea funcției private (e: Event): void alertBox.visible = false; setScore ();
În acest pas vom obține scorul de afișat în filmul nostru Flash. JavaScript va trimite scorul la Flash și pentru aceasta vom folosi metoda interfeței externe addCallback () pentru a face funcția accesibilă.
Adăugați următoarele în cadrul înființat() funcţie.
setarea funcției private (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); addCallback are doi parametri: numele unei funcții pe care doriți să o faceți accesibilă prin JavaScript (ca șir) și o funcție AS3 la care va fi asociat acest apel (ca apel invers al funcției AS3). Aici vrem să facem AS3 getScore () funcția disponibilă mai întâi pentru codul nostru JavaScript; pentru simplitate, îi dăm numele getScore () când este accesat și prin JavaScript.
Vom codifica acum acest lucru getScore () Funcția AS3. Adăugați următoarele sub setScore () funcție creată în pasul de mai sus.
funcția privată getScore (scor: String): int var theScore: int = int (scor); returnaScore;
Aici ne-am înființat getScore () funcţie. Deoarece vom primi un șir de caractere înapoi de la JavaScript, am setat parametrul ca un șir și vom returna un număr întreg. În cadrul acestei funcții am creat o variabilă numită scorul și a aruncat-o într-un int; ne întoarcem apoi scorul.
În acest pas vom afișa scorul actual în filmul Flash. Introduceți următoarele sub getScore () funcție creată în pasul de mai sus.
funcția privată showScore (): void currentScore_txt.text = "Scorul curent ridicat este:" + ExternalInterface.call ("getScore"); Aici am setat currentScore_txt.text pentru a afișa scorul curent. Folosim ExternalInterface.call ( "getScore") pentru a apela getScore în codul JavaScript, care la rândul său declanșează getScore () în codul nostru ActionScript. Amintiți-vă, acest lucru returnează scorul.
Acum adăugați următoarele în cadrul înființat() funcţie.
setarea funcției private (e: Event): void alertBox.visible = false; ExternalInterface.addCallback ("getScore", getScore); setScore (); showScore (); Dacă încercați acum filmul, ar trebui să vedeți scorul afișat.
Avem nevoie de o modalitate de a adăuga niște ascultători butoanelor noastre, astfel încât atunci când utilizatorul face clic pe ele, fac ceva. Adăugați următoarele sub showScore () metoda creată în pasul de mai sus.
funcția privată addButtonListeners (): void scorebtn.addEventListener (MouseEvent.CLICK, getRandomScore); alertBox.alertBox_btn.addEventListener (MouseEvent.CLICK, hideAlertBox);
Adăugați următoarea linie evidențiată în înființat() funcţie.
setarea funcției private (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); showScore (); addButtonListeners (); Aici ne-am înființat scorebtn pentru a apela o funcție AS3 numită getRandomScore (), și am înființat alertBox_btn care este în interiorul alertbox pentru a apela o funcție AS3 numită hideAlertBox (). Apoi vom adăuga aceste funcții.
Adăugați următoarele sub addButtonListeners () pe care tocmai l-ați creat.
funcția privată getRandomScore (e: MouseEvent): void funcția privată hideAlertBox (e: Event): void alertBox.visible = false;
Vom termina getRandomScore () în etapa următoare. Tot ce facem în hideAlertBox () este setată funcția alertbox să nu fie vizibilă. Vom face acest lucru vizibil când utilizatorul primește un scor mare.
În acest pas vom codifica getRandomScore () funcția, unde - la fel ca în aplicația JavaScript pe care am făcut-o - are loc toată logica aplicației. Adăugați următoarele în cadrul getRandomScore () organismul pe care l-ați creat în pasul de mai sus.
funcția privată getRandomScore (e: MouseEvent): void var randScore: int = Math.floor (Math.random () * 200000); Var curentScore: int = ExternalInterface.call ("getScore"); randomScore_text.text = "Scorul aleatoriu este:" + randScore.toString (); dacă (randScore> currentScore) alertBox.visible = true; ExternalInterface.call ( "updateScore", randScore); showScore (); Aceasta funcționează într-un mod foarte asemănător versiunii JavaScript. Mai întâi generăm un număr între 0 și 200.000. Apoi vom obține scorul curent folosind ExternalInterface.call ( "getScore"). Noi am stabilit randomScore_text pentru a citi scorul aleatoriu. În cele din urmă, verificăm dacă randScore este mai mare decât currentScore, și dacă este afișat caseta Alert, actualizați scorul în Local Storage utilizând ExternalInterface.call ( "updateScore", randScore), și sunați-ne showScore () metodă pentru a afișa noul scor.
Check out demo-ul.
Am folosit Interfața externă pentru a accesa API-ul Local Storage din HTML5. Sper că ați găsit acest tutorial util și vă mulțumim pentru citire!
