Share
In questo tutorial ti mostrerò come accedere agli stessi dati salvati in app Flash e JavaScript separate, memorizzandole in HTML5 LocalStorage e usando ExternalInterface per raggiungerlo con AS3. Creeremo la stessa app sia in JavaScript che in Flash per dimostrare che è indipendente dalla piattaforma.
L'archiviazione locale è una parte eccitante di HTML5 che ti consente di effettuare l'archiviazione laterale del browser che è persistente, il che significa che dura tra le sessioni del browser. Scompare solo quando l'utente cancella la cache del browser.
Si tratta di un'API molto semplice da utilizzare, che utilizza coppie di valori-chiave per archiviare dati e può essere utilizzata in diversi modi. Un modo è da usare localStorage.setItem ( 'chiave', 'valore'), e localStorage.getItem ( 'chiave'). Un altro modo è usare la notazione dell'oggetto: localStorage [chiave] = valore per impostare un valore, e theValue = localStorage [chiave] per recuperarlo. E, se ciò non bastasse, c'è ancora un terzo modo - Dot Notation: localStorage.key = valore per impostarlo, e theValue = localStorage.key per recuperarlo.
Sto optando per la terza via in questo tutorial, ma se preferisci uno degli altri modi in cui puoi modificare il codice, dovrebbe funzionare bene. L'archiviazione locale ha pochi altri metodi, ma questi sono gli unici due metodi di cui abbiamo bisogno: uno per impostare un valore e uno per recuperare quel valore.
Creeremo prima l'app JavaScript. Dovresti sviluppare sia questo sia il progetto Flash su un server live, altrimenti ti imbatterai in problemi. Sto usando WAMP sulla mia macchina come un ambiente di hosting locale.
Crea una cartella in cui archiviare il tuo progetto. All'interno di questa cartella crea due nuove cartelle. Assegna un nome a "js" e agli altri "stili".
All'interno della cartella "styles" crea un nuovo file e chiamalo "style.css", e all'interno della cartella "js" crea un nuovo file e chiamalo "externalinterface.js". Infine, nella radice della cartella del progetto, crea un nuovo file e chiamalo "index.html".
Inserisci il seguente codice all'interno del file "index.html" creato nel passaggio precedente.
Storage locale con interfaccia esterna Il punteggio casuale è:
Qui impostiamo la struttura del nostro file "index.html". Includiamo "style.css" e "externalinterface.js" che abbiamo creato nel passaggio precedente. Il scorediv sarà aggiornato quando raggiungiamo un nuovo punteggio elevato e il randomscorediv verrà aggiornato ogni volta che generiamo un nuovo punteggio (fai clic sul pulsante per generare un punteggio casuale).
Inserisci quanto segue all'interno di "style.css" che hai creato nel passaggio precedente.
# wrapper width: 400px; altezza: 400px; margine: 0 auto; #scorewrapper width: 400px; height: 200px; background-color: #FFFFFF; #randomscorediv visibility: hidden; body background: # f2f2f2; allineamento del testo: centro; imbottitura: 20px;
Qui impostiamo l'app per essere centrata nella pagina, imposta il colore di sfondo del scorewrapper div e imposta il randomscorediv inizialmente essere nascosto (invisibile). Quando clicchiamo sul pulsante, imposteremo il randomscorediv a visibile.
Inserisci il seguente codice all'interno di "externalinterface.js" che hai creato nel passaggio precedente.
Accentsconagua
window.onload = function () alert ("Finestra caricata"); Ogni volta che devi legare elementi alla tua pagina web, assicurati che la finestra sia stata caricata per prima. Dal momento che abbiamo bisogno di legare il pulsante, usiamo il window.onload funzione fornita da JavaScript. Qui stiamo spuntando un avviso con la scritta "Finestra caricata". Se testate la pagina dovreste vedere che funziona.
In questo passaggio verrà codificato il codice setScore () funzione che imposta inizialmente il punteggio su 0. Immettere il seguente codice all'interno di "externalinterface.js".
window.onload = function () function setScore () if (! localStorage.score) localStorage.score = 0;
Qui controlliamo se il localStorage.score esiste, e se non lo fa inizializziamo il suo valore a 0. Quando l'utente esegue prima l'app, o dopo aver cancellato la cache, questo valore non esisterebbe - quindi dobbiamo crearlo.
Ora chiama questa funzione immediatamente dopo averla creata e prova inserendola in un avviso.
window.onload = function () function setScore () if (! localStorage.score) localStorage.score = 0; setScore (); alert (localStorage.score);
Abbiamo un modo per impostare il nostro punteggio, ora abbiamo bisogno di un modo per recuperarlo. Questo è ciò che getScore () la funzione si realizzerà. Inserisci il seguente sotto il setScore () funzione creata nel passaggio precedente.
function getScore () if (localStorage.score) return (localStorage.score);
Qui lo controlliamo localStorage.score esiste, e se lo fa, restituiamo semplicemente il valore che detiene. Rimuovi l'avviso dal passaggio precedente e aggiungi il seguente avviso sotto il getScore () funzione.
function getScore () if (localStorage.score) return (localStorage.score); alert (getScore ());
Se fai il test ora dovresti vedere di nuovo l'avviso mostrando il punteggio "0".
Ora che abbiamo un modo per impostare e ottenere il nostro punteggio, abbiamo bisogno di un modo per aggiornarlo. Questo è esattamente ciò che il updateScore () la funzione raggiunge. Aggiungi il seguente sotto il getScore () funzione creata nel passaggio precedente.
function updateScore (newScore) if (localStorage.score) localStorage.score = newScore
Qui passiamo come parametro a NewsCore; abbiamo quindi impostato il localStorage.score uguale a questo valore. Rimuovi l'avviso dal passaggio precedente, quindi aggiungi quanto segue sotto updateScore () funzione appena creata.
function updateScore (newScore) if (localStorage.score) localStorage.score = newScore; updateScore (10); alert (getScore ());
Se esegui il test adesso, dovresti vedere "10" in allerta, dato che sulla linea 6 abbiamo aggiornato il punteggio a 10.
Ora che abbiamo tutti i nostri metodi per manipolare il punteggio, mostriamolo. Inserisci il seguente sotto il updateScore () funzione creata nel passaggio precedente.
function showScore () var scoreText = document.getElementById ('scoringiv'); scoreText.innerHTML = "L'attuale punteggio alto è" + getScore (); Qui otteniamo un riferimento al scorediv, e altera il suo innerHTML proprietà per mostrare il punteggio corrente.
Chiama questa funzione immediatamente dopo averla creata.
function showScore () var scoreText = document.getElementById ('scoringiv'); scoreText.innerHTML = "L'attuale punteggio alto è" + getScore (); showScore (); Se testate la pagina ora dovreste vedere le parole "L'attuale punteggio alto è 10".
Vogliamo eseguire una funzione quando l'utente fa clic sul pulsante. Aggiungi il seguente sotto il showScore () pulsante che hai creato nel passaggio precedente.
var scoreBtn = document.getElementById ('scorebtn'); scoreBtn.addEventListener ( 'click', getRandomScore, false); Qui otteniamo un riferimento al pulsante che abbiamo dato all'ID scorebtn. Quindi aggiungiamo un EventListener di tipo clic, che chiama il getRandomScore () funzione che creeremo nel passaggio successivo.
Il getRandomScore () la funzione è dove si svolge la logica di questa applicazione. Aggiungi il seguente sotto la linea scoreBtn.addEventListener ( 'click', getRandomScore, false); sei entrato nel passo sopra.
function getRandomScore () var randScoreText = document.getElementById ('randomscorediv'); randScoreText.style.visibility = 'visibile'; var randScore = Math.floor (Math.random () * 200000); var currentScore = Number (getScore ()); randScoreText.innerHTML = "Punteggio casuale è" + randScore; if (randScore> currentScore) alert ("Nuovo punteggio alto !!"); updateScore (randScore); showScore (); Qui, per prima cosa otteniamo un riferimento al randomscorediv e impostarlo per essere visibile. Quindi generiamo un punteggio casuale chiamando Math.floor (Math.random () * 200000), che crea un numero compreso tra 0 e 200.000. Usiamo il nostro getScore () funzione per impostare la variabile currentScore (assicurandoci di lanciarlo su un numero), e impostare il innerHTML del randScoreText al randScore.
Infine controlliamo se randScore è più grande di currentScore, e se è mostriamo un avviso ("Nuovo punteggio alto !!") e quindi aggiornare il localStorage.score chiamando il nostro updateScore () metodo e passando nel randomScore. Quindi usiamo showScore () per mostrare il nuovo punteggio.
Questo conclude l'applicazione JavaScript - puoi testarla qui. Nel prossimo passaggio inizieremo a sviluppare la versione di Flash.
In questo passaggio configureremo il progetto Flash.
Creare una cartella in cui archiviare i file del progetto. Ora all'interno di questa cartella creare una cartella denominata "js" e all'interno Questo cartella crea un file e chiamalo "externalinterface.js". Alla radice della cartella del progetto crea un file denominato "index.html". Infine, crea un nuovo progetto Flash e salvalo nella cartella principale, assicurandoti di chiamarlo "externalInterface.fla". Dagli uno sfondo bianco e imposta la dimensione a 400x200px.
Aggiungi quanto segue al file "index.html" che hai creato nel passaggio precedente.
Tuts + Premium: Demo
Qui impostiamo il nostro file "index.html". Includiamo "externalinterface.js" che abbiamo creato nel passaggio precedente e incorporiamo il file SWF all'interno di oggetto etichetta. Se hai deciso di nominare il tuo FLA in modo diverso, è importante posizionare il valore corretto per il file SWF laddove applicabile.
Aggiungi quanto segue al "externalinterface.js" che hai creato nel passaggio precedente.
function setScore () if (! localStorage.score) localStorage.score = 0; function getScore () if (localStorage.score) return localStorage.score; function updateScore (newScore) localStorage.score = newScore
Queste sono le stesse funzioni che abbiamo usato nell'applicazione JavaScript, quindi non le spiegherò qui. È importante notare che ho rimosso il window.onload, però.
In questo passaggio configureremo l'interfaccia utente per il FLA che hai creato nei passaggi precedenti.
Seleziona lo strumento Testo e assicurati che le seguenti proprietà siano impostate nel pannello "Carattere".
Ora trascina un TextField sullo stage e assegnagli le seguenti proprietà.
Dagli il nome dell'istanza "currentScore_txt" e assicurati che il tipo sia impostato rispettivamente su "Testo classico" e "Testo dinamico".
Ora trascina un altro campo di testo sullo stage e assegnagli le seguenti proprietà.
Dagli il nome di istanza "randomScore_text".
Vai al pannello Componenti e trascina un pulsante sul palco. (Puoi accedere al pannello Componenti andando su Finestra> Componenti o semplicemente premendo CTRL + F7.)
Dare al pulsante le seguenti proprietà.
Dagli il nome dell'istanza "scorebtn".
All'interno del pannello "Parametri componenti", cambia l'etichetta in "Genera punteggio".
Seleziona lo strumento Rettangolo e assegnagli un colore di riempimento di "#CCCCCC" e nessun tratto.
Ora trascina un rettangolo sul palco. Fare clic per selezionare il rettangolo e assegnare le seguenti proprietà.
Ora, fai clic con il tasto destro sul rettangolo e scegli "Converti in simbolo"; dargli il nome "alertBox".
Fare doppio clic sul rettangolo per passare alla modalità di modifica. Apri il pannello Componenti e trascina un pulsante in questa Movie Clip. Dare al pulsante le seguenti proprietà.
Dagli il nome di istanza "alertBox_btn", e cambia l'etichetta per leggere "OK".
Trascina un campo di testo nella MovieClip e assegnagli le seguenti proprietà.
Digita le parole "Nuovo punteggio alto !!" nel TextField, quindi chiudi questo Movie Clip.
Creare un nuovo file ActionScript e salvarlo come "Main.as". Quindi, di nuovo nel tuo FLA, imposta Main come Classe documento.
Aggiungi quanto segue all'interno del file "Main.as" creato nel passaggio precedente.
pacchetto import flash.display.Sprite; import flash.events. *; import flash.external.ExternalInterface; public class Main extends Sprite public function Main ()
Qui importiamo le classi di cui abbiamo bisogno e codifichiamo la nostra funzione di costruzione.
Aggiungi il seguente all'interno Principale().
funzione pubblica Main () addEventListener (Event.ADDED_TO_STAGE, setup);
Il ADDED_TO_STAGE l'evento viene eseguito quando il film è completamente caricato. Qui chiama a impostare funzione, che creeremo in seguito.
Aggiungi il seguente sotto il Principale() funzione di costruzione.
setup di funzione privata (e: Event): void trace ("MOVIE READY"); Se esegui il test ora vedrai che "MOVIE READY" viene tracciato nel pannello di output.
Potresti aver notato che la casella di avviso che abbiamo creato è stata visualizzata all'avvio del film; nascondiamolo Inserisci il seguente all'interno del impostare() funzione.
setup di funzione privata (e: Event): void alertBox.visible = false;
Qui impostiamo la casella di avviso in modo che non sia visibile. Vai avanti e prova il film.
In questo passaggio useremo la classe External Interface per chiamare il nostro setScore () funzione che abbiamo impostato nel codice JavaScript. Inserisci il seguente sotto il impostare() funzione che hai creato nei passaggi precedenti.
private function setScore (): void ExternalInterface.call ("setScore"); Qui usiamo il chiamata() metodo della classe ExternalInterface per eseguire il setScore () funzione che è nel nostro codice JavaScript. Il chiamata() il metodo accetta come parametro il nome della funzione JavaScript da eseguire (come stringa). Se avessimo parametri nel nostro setScore () funzione, li avremmo inclusi anche qui.
Vogliamo che questa funzione venga eseguita all'avvio del film, quindi aggiungilo al impostare() funzione.
setup di funzione privata (e: Event): void alertBox.visible = false; setScore ();
In questo passaggio otterremo il punteggio da mostrare nel nostro filmato Flash. Il JavaScript invierà il punteggio a Flash e per farlo useremo il metodo dell'interfaccia esterna addCallback () per rendere la funzione accessibile ad esso.
Aggiungi il seguente all'interno del impostare() funzione.
setup di funzione privata (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); Il addCallback prende due parametri: il nome di una funzione che si desidera rendere accessibile tramite JavaScript (come stringa) e una funzione AS3 a cui questa chiamata sarà collegata (come una funzione di richiamata della funzione AS3). Qui vogliamo fare l'AS3 getScore () funzione disponibile per il nostro codice JavaScript prima; per semplicità, gli diamo il nome getScore () quando si accede tramite JavaScript pure.
Ora lo codificheremo getScore () Funzione AS3. Aggiungi il seguente sotto il setScore () funzione creata nel passaggio precedente.
funzione privata getScore (punteggio: Stringa): int var theScore: int = int (punteggio); restituire theScore;
Qui impostiamo il nostro getScore () funzione. Dal momento che riceveremo una stringa dal JavaScript, imposteremo il parametro come stringa e restituiremo un intero. All'interno di questa funzione impostiamo una variabile chiamata il punteggio e lanciarlo a un int; allora torniamo il punteggio.
In questo passaggio facciamo visualizzare il punteggio corrente nel filmato Flash. Inserisci il seguente sotto il getScore () funzione creata nel passaggio precedente.
private function showScore (): void currentScore_txt.text = "Il punteggio più alto attuale è:" + ExternalInterface.call ("getScore"); Qui impostiamo il currentScore_txt.text per visualizzare il punteggio corrente. Noi usiamo ExternalInterface.call ( "getScore") chiamare il getScore funzione nel codice JavaScript, che a sua volta attiva il getScore () funzione nel nostro codice ActionScript. Ricorda, questo restituisce il punteggio.
Ora aggiungi il seguente all'interno del impostare() funzione.
setup di funzione privata (e: Event): void alertBox.visible = false; ExternalInterface.addCallback ("getScore", getScore); setScore (); showScore (); Se testate il film ora, dovreste vedere il punteggio mostrato.
Abbiamo bisogno di un modo per aggiungere alcuni ascoltatori ai nostri pulsanti, in modo che quando l'utente fa clic su di essi, fanno qualcosa. Aggiungi il seguente sotto il showScore () metodo che hai creato nel passaggio precedente.
funzione privata addButtonListeners (): void scorebtn.addEventListener (MouseEvent.CLICK, getRandomScore); alertBox.alertBox_btn.addEventListener (MouseEvent.CLICK, hideAlertBox);
Aggiungi la seguente linea evidenziata all'interno del impostare() funzione.
setup di funzione privata (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); showScore (); addButtonListeners (); Qui impostiamo il nostro scorebtn chiamare una funzione AS3 chiamata getRandomScore (), e abbiamo impostato il alertBox_btn questo è dentro il alertbox chiamare una funzione AS3 chiamata hideAlertBox (). Successivamente aggiungeremo queste funzioni.
Aggiungi il seguente sotto il addButtonListeners () funzione appena creata.
funzione privata getRandomScore (e: MouseEvent): void funzione privata hideAlertBox (e: Event): void alertBox.visible = false;
Finiremo il getRandomScore () funzione nel passaggio successivo. Tutto ciò che facciamo nel hideAlertBox () la funzione è impostata su alertbox non essere visibile Lo renderemo visibile quando l'utente ottiene un nuovo punteggio elevato.
In questo passaggio verrà codificato il codice getRandomScore () funzione, in cui, proprio come nell'applicazione JavaScript che abbiamo creato, si verifica tutta la logica dell'app. Aggiungi il seguente all'interno del getRandomScore () corpo che hai creato nel passaggio sopra.
funzione privata getRandomScore (e: MouseEvent): void var randScore: int = Math.floor (Math.random () * 200000); var currentScore: int = ExternalInterface.call ("getScore"); randomScore_text.text = "Punteggio casuale è:" + randScore.toString (); if (randScore> currentScore) alertBox.visible = true; ExternalInterface.call ( "updateScore", randScore); showScore (); Funziona in modo molto simile alla versione JavaScript. Per prima cosa generiamo un numero compreso tra 0 e 200.000. Quindi otteniamo il punteggio corrente usando ExternalInterface.call ( "getScore"). Prepariamo randomScore_text leggere il punteggio casuale. Infine controlliamo se randScore è più grande di currentScore, e se è mostriamo la Alert Box, aggiorna il punteggio in Local Storage usando ExternalInterface.call ( "updateScore", randScore), e chiama il nostro showScore () metodo per mostrare il nuovo punteggio.
Guarda la demo.
Abbiamo utilizzato l'interfaccia esterna per accedere all'API di archiviazione locale da HTML5. Spero tu abbia trovato questo tutorial utile e grazie per la lettura!
