Accessing det samme Saved Data med separat Flash og Javascript Apps
Del
Del
4
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil jeg vise deg hvordan du kan få tilgang til de samme lagrede data i separate Flash og Javascript-programmer, ved å lagre den i HTML5 localstorage og bruke ExternalInterface å nå den med AS3. Vi vil skape den samme app på både Javascript og Flash for å vise at det er plattform agnostiker
Trinn 1:. Undersøke Lokal lagring
Lokal lagring er en spennende del av HTML5 som tillater deg å gjøre nettleseren side lagring som er vedvarende, noe som betyr at det varer mellom nettleserøkter. Det forsvinner bare når brukeren sletter sin nettleser cache.
Det er en veldig enkel API for å bruke, ved hjelp av enkle nøkkelverdipar å lagre data, og kan brukes på flere ulike måter. En måte er å bruke localStorage.setItem ("nøkkelen", "verdi"), og localStorage.getItem ('key'). En annen måte er å bruke Object Notation: localstorage [key] = verdi å sette en verdi, og Verdidata = localstorage [key] for å hente den. Og om ikke det var nok, er det likevel en tredje vei - Dot Notation: localStorage.key = verdi å sette den, og Verdidata = localStorage.key å hente den.
Jeg velger for tredje vei i denne opplæringen, men hvis du foretrekker en av de andre måtene du kan endre koden og bør det fungere helt fint. Lokal lagring har noen andre metoder, men disse er de eneste to metodene vi trenger. En å sette en verdi og en til å hente denne verdien
Trinn 2: Sette opp Javascript-prosjektet
Vi vil skape Javascript app først. Du bør utvikle både denne og Flash-prosjektet på en live server, ellers vil du støte på problemer. Jeg bruker WAMP på min maskin som en lokal hosting miljø.
Lag en mappe for å lagre prosjektet i. Innenfor denne mappen oppretter to nye mapper. Nevn en av dem "js" og de andre "stiler".
Innenfor "stiler" -mappen lage en ny fil og gi den navnet "style.css", og innenfor "js" -mappen opprette en ny fil og gi den navnet "externalinterface.js". Til slutt, ved roten av prosjektmappen opprette en ny fil og navngi den "index.html"
Trinn 3:. Indeksen HTML Page
Skriv inn følgende kode i "index.html" filen du opprettet i trinn over
. <! DOCTYPE html > < html > < head > < title > Lokal lagring med ekstern Interface < /title > < link rel = "stylesheet "type =" text /css "href =" stiler /style.css "/> < script type =" text /javascript "src =" js /externalinterface.js "> < /script > < /head > < body > < div id = "wrapper" > < div id = "scorewrapper" > < p id = "scorediv" > < /p > < p id = "randomscorediv" > Tilfeldig Score er: < /p > < knappen type = "button" id = "scorebtn" > Generer Score < /knapp > < /div > < /div > < /body > < /html >
Her har vi satt opp strukturen i vår "index.html" filen. Vi inkludere "style.css" og "externalinterface.js" vi opprettet i trinnet over. Den scorediv vil bli oppdatert når vi oppnår en ny rekord, og randomscorediv vil bli oppdatert hver gang vi generere et nytt score (klikk på knappen for å generere en tilfeldig score)
Trinn 4.: style.css
Angi følgende innenfor "style.css" du opprettet i trinn over
#wrapper {width:. 400px; høyde: 400px; margin: 0 auto; } #scorewrapper {width: 400px; høyde: 200px; background-color: #FFFFFF;} # randomscorediv {visibility: hidden;} body {background: # f2f2f2; text-align: center; padding: 20px;}
Her har vi satt appen til å være sentrert på siden, sette bakgrunnsfarge på scorewrapper div, og sette randomscorediv å først være skjult (usynlig). Når vi klikker på knappen vil vi sette randomscorediv til synlig
Trinn 5:. Window.onload
Tast inn følgende kode innenfor "externalinterface.js" du opprettet i trinn ovenfor
window.onload = function () {alert ("Window Loaded");}.
Når du trenger å knytte til elementer på websiden din, bør du sørge for at vinduet har lastet først. Siden vi trenger å knytte til knappen, bruker vi window.onload funksjon levert av Javascript. Her er vi bare dukker opp et varsel med ordene "Window Loaded". Hvis du tester siden du bør se det fungerer
Trinn 6:. SetScore ()
I dette trinnet vil vi kode setScore () funksjon som i utgangspunktet setter ledelse til 0. Skriv inn følgende kode innenfor "externalinterface.js"
window.onload = function () {funksjon setScore () {if {localStorage.score = 0. (localStorage.score!); }}}
Her sjekker vi om localStorage.score eksisterer, og hvis det ikke vi initial verdien til 0. Når brukeren først kjører app, eller etter at de klare sine cache, vil denne verdien ikke eksisterer - så vi trenger for å lage det.
Nå kaller denne funksjonen umiddelbart etter at du har opprettet den, og test ved å sette den i et varsel.
window.onload = function () {funksjon setScore () {if ( localStorage.score) {localStorage.score = 0!; }} SetScore (); alert (localStorage.score);}
Trinn 7: getScore ()
Vi har en måte å sette vår score, nå trenger vi en måte å hente den. Det er hva getScore () -funksjonen vil oppnå. Skriv inn følgende under setScore () -funksjonen du opprettet i trinn over
funksjon getScore () {if (localStorage.score) {return (localStorage.score.); }}
Her sjekker vi at localStorage.score ikke eksisterer, og hvis det gjør vi bare returnere verdien det holder. Fjern varsling fra forrige trinn, og legge til følgende varsling under getScore () -funksjonen
funksjon getScore () {if (localStorage.score) {return (localStorage.score.); }} alert (getScore ());}
Hvis du tester nå skal du se varselet igjen viser score på "0"
Trinn 8:. updateScore ()
< p> Nå som vi har en måte å sette og få våre score, trenger vi en måte å oppdatere den. Det er akkurat hva den updateScore () -funksjonen oppnår. Legg til følgende under getScore () -funksjonen du opprettet i trinnet ovenfor.
Funksjon updateScore (newScore) {if (localStorage.score) {localStorage.score = newScore}}
Her kan vi passere som en parameter en newScore; vi deretter sette localStorage.score lik denne verdien. Fjern varselet fra forrige trinn, deretter til følgende under updateScore () -funksjonen du nettopp opprettet
funksjon updateScore (newScore) {if (localStorage.score) {localStorage.score = newScore.; }} updateScore (10); alert (getScore ());
Hvis du tester nå, bør du se "10" blir varslet, siden på linje 6 vi oppdatert ledelse til 10.
Trinn 9: showScore ()
Nå som vi har alle våre metoder på plass for å manipulere resultatet, la oss få det viser. Skriv inn følgende under updateScore () -funksjonen du opprettet i trinn over
funksjon showScore () {var scoreText = document.getElementById ('scorediv.'); scoreText.innerHTML = "Nåværende High Score er" + getScore ();}.
Her får vi en referanse til scorediv, og endre sin innerhtml eiendommen for å vise den aktuelle stillingen
Ring denne funksjonen umiddelbart etter du opprette den
funksjon showScore () {var scoreText = document.getElementById ('scorediv.'); scoreText.innerHTML = "Nåværende High Score er" + getScore ();} showScore ();
Hvis du tester siden nå skal du se ordene "Current High Score er 10"
Vi vil kjøre en funksjon når brukeren klikker på knappen. Legg til følgende under showScore () knappen du opprettet i trinn over
Var scoreBtn = document.getElementById ('scorebtn');. ScoreBtn.addEventListener ("klikk", getRandomScore, false);
Her får vi en referanse til den knappen som vi ga ID scorebtn. Vi deretter legge en EventListener av typen klikk, som kaller getRandomScore () funksjon som vi vil skape i neste trinn
Trinn 11:. GetRandomScore ()
getRandomScore () Funksjonen er der logikken i dette programmet finner sted. Legg til følgende under linjen scoreBtn.addEventListener ("klikk", getRandomScore, false); du skrev inn i trinn over
funksjon getRandomScore () {var randScoreText = document.getElementById ('randomscorediv.'); randScoreText.style.visibility = 'synlig'; Var randScore = Math.floor (Math.random () * 200 000); Var currentScore = Number (getScore ()); randScoreText.innerHTML = "Random Score er" + randScore; if (randScore > currentScore) {alert ("Ny rekord !!"); updateScore (randScore); showScore (); }}
Her må vi først få en henvisning til randomscorediv og sette den til å være synlig. Vi deretter generere et tilfeldig poengsum ved å ringe Math.floor (Math.random () * 200 000), noe som skaper et tall mellom 0 og 200.000. Vi bruker vår getScore () -funksjonen til å sette variabelen currentScore (pass på at vi kastet det til et nummer), og sett innerhtml av randScoreText til randScore.
Til slutt sjekker vi om randScore er større enn currentScore, og hvis det er vi viser et varsel ("Ny rekord !!") og deretter oppdatere localStorage.score ved å ringe vår updateScore () metoden og bestått i randomScore. Deretter bruker vi showScore () for å vise den nye stillingen
Dette avslutter Javascript-program -. Du kan teste det her. I neste trinn vil vi starte devloping Flash-versjonen
Trinn 12:.. Sette opp Flash Prosjekt
I dette trinnet vil vi sette opp Flash prosjektet
Lag en mappe for å lagre prosjektfiler i. Nå i denne mappen oppretter du en mappe som heter "js", og i løpet av denne Legg til følgende til "index.html" filen du opprettet i trinnet ovenfor Her har vi satt opp vår "index.html" filen. Vi inkluderer "externalinterface.js" vi opprettet i trinnet over, og legge inn SWF-fil inne i objektet tag. Hvis du valgte å navngi FLA noe annet, er det viktig å plassere den riktige verdien for SWF eventuelt Legg til følgende til "externalinterface.js" du opprettet i trinn over Dette er de samme funksjonene vi brukte i Javascript-program, så jeg vil ikke forklare dem her. Det er viktig å merke seg at jeg fjernet window.onload, men I dette trinnet vi vil sette opp brukergrensesnittet for FLA du opprettet i trinnene ovenfor Velg tekstverktøyet, og kontroller at følgende egenskaper er satt under "Tegn" panel Nå drar en Textfield ut på scenen og gi den følgende egenskaper Gi det forekomstnavnet "currentScore_txt" og sørge for at den er satt til "Classic Text" og "Dynamic Text" hhv. Nå drar et annet Textfield på scenen og gi den følgende egenskaper Gi det forekomstnavnet "randomScore_text" Gå til Components panelet, og dra en knapp på scenen.. (Du kan komme til Components panelet ved å gå til Vindu > Komponenter eller bare ved å trykke CTRL + F7.) Gi knappen følgende egenskaper Gi det forekomstnavnet "scorebtn" Innenfor "komponenter Parametere" panel, endre etiketten til "Generer Score". Velg rektangelverktøyet og gi den en fyllfarge fra "#CCCCCC" og ingen slag. Nå dra et rektangel ut på scenen. Klikk for å velge rektangel og gi den følgende egenskaper Nå, høyreklikk på rektangelet og velg "Konverter til Symbol"; gi den navnet "boks på skjermen". Dobbelklikk på rektangelet for å gå inn i redigeringsmodus. Åpne Components panelet og dra en knapp inn i denne MovieClip. . Gi Button følgende egenskaper Gi det forekomstnavnet "alertBox_btn", og endre etiketten for å lese "OK". Dra en Textfield inn i MovieClip og gi den følgende egenskaper. Skriv inn ordene "New High Score !! " inn i Textfield, deretter lukke dette MovieClip Opprett en ny Actionscript-fil og lagre den som "Main.as". Deretter tilbake i FLA, satt Hoved å være dokument Class Legg til følgende innenfor "Main.as" filen du opprettet i trinnet ovenfor Her er vi importerer klassene vi trenger, og koden vår konstruktør funksjons De ADDED_TO_STAGE arrangementet går når filmen har fullastet. Her den kaller en setup-funksjon, som vi vil skape neste Legg til følgende under Main () Konstruktør funksjon Hvis du tester nå vil du se at "MOVIE KLAR" spores i utgangspanelet Du har kanskje lagt merke til Alert Box vi laget ble vist når filmen først starter; la oss skjule det. Skriv inn følgende i setup () -funksjonen Her kan vi sette boks på skjermen for å ikke være synlig.. Gå videre og teste filmen I dette trinnet vil vi bruke External Interface klassen å ringe vår setScore () funksjon som vi satt opp i Javascript-kode. Skriv inn følgende under setup () -funksjonen du opprettet i trinnene ovenfor Her bruker vi samtalen () metoden i. ExternalInterface klasse å kjøre setScore () funksjon som er i vår Javascript-kode. Anropet () metoden tar som en parameter navnet på Javascript-funksjon for å kunne brukes (som en streng). Hvis vi hadde parametere i vår setScore () -funksjonen, ville vi ha tatt dem her også. Vi ønsker denne funksjonen til å kjøre når filmen først starter, så legg det til setup () -funksjonen. Anmeldelser private setup-funksjonen (e: Hendelses): void {alertBox.visible = false; setScore ();} I dette trinnet vil vi få resultatet til å vise i vår Flash movie. Javascript vil sende ledelse til Flash, og å gjøre dette vi vil bruke det eksterne grensesnittet metoden addCallback () for å gjøre funksjonen tilgjengelig for det. Legg til følgende i setup () -funksjonen. addCallback tar to parametre: navnet på en funksjon som du ønsker å gjøre tilgjengelig via Javascript (som en streng), og en AS3 funksjon som denne samtalen vil bli koblet til (som en AS3 funksjon tilbakeringing). Her ønsker vi å gjøre AS3 getScore () -funksjonen tilgjengelig for vår Javascript-kode første; for enkelhets skyld vi gi den navnet getScore () når tilgjengelig via Javascript også. Vi vil nå kode dette getScore () AS3 funksjon. Legg til følgende under setScore () -funksjonen du opprettet i trinn over Her har vi satt opp vår getScore () -funksjonen. Siden vi vil motta en streng tilbake fra Javascript, setter vi parameter som en streng, og vi tilbake et heltall. Inne i denne funksjonen vi satt opp en variabel kalt theScore og kastet den til en int; vi så tilbake theScore I dette trinnet gjør vi den nåværende poengsum vises i Flash movie. Skriv inn følgende under getScore () -funksjonen du opprettet i trinn over Nå kan du legge til følgende i setup () -funksjonen Hvis du tester filmen nå, bør du se poengsummen blir vist Vi trenger en måte å legge til. noen lyttere til våre knapper, slik at når brukeren klikker på dem de gjør noe. Legg til følgende under showScore () metoden du opprettet i trinn over Legg følgende uthevet linje i setup () -funksjonen Her har vi satt opp vår scorebtn å kalle en AS3 funksjon kalt getRandomScore (), og vi setter opp alertBox_btn som er innenfor boks på skjermen for å ringe en AS3 funksjon kalt hideAlertBox (). Deretter vil vi legge disse funksjonene Legg til følgende under addButtonListeners () -funksjonen du nettopp opprettet Vi vil avslutte getRandomScore () -funksjonen i neste trinn. Alt vi gjør i hideAlertBox () funksjonen er satt på boks på skjermen for å ikke være synlig. Vi vil være å gjøre den synlig når brukeren får en ny rekord I dette trinnet vil vi kode getRandomScore () -funksjonen, hvor - akkurat som i Javascript-program vi gjort - hele app logikk foregår. Legg til følgende i getRandomScore () kroppen du opprettet i trinn over Dette fungerer på en svært lik måte til Javascript-versjonen. Vi først generere et tall mellom 0 og 200.000. Da får vi den nåværende poengsum ved hjelp ExternalInterface.call ("getScore"). Vi setter randomScore_text å lese ut tilfeldig poengsum. Til slutt vi sjekke om randScore er større enn currentScore, og hvis det er vi viser den Alert Box, oppdatere score i lokal lagring ved hjelp ExternalInterface.call ("updateScore", randScore), og ringe vår showScore () metode for å vise den nye poengsum. Sjekk ut demoen. Vi har brukt External Interface for å få tilgang til lokal lagring API fra HTML5. Jeg håper du har funnet denne opplæringen nyttig og takk for lesing!
mappen oppretter du en fil og endre navn til "externalinterface.js". Ved roten av prosjektmappen lage en fil som heter "index.html". Til slutt, opprette en ny Flash Prosjekt og lagre den i rotkatalogen, og pass på at du kaller det "externalInterface.fla". . Gi den en hvit bakgrunn, og sette størrelsen til 400x200px
Trinn 13: Sette opp Index Page
. <! DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> < html xmlns =" http://www.w3.org/1999/xhtml "> < head > < meta http-equiv =" Content-Type "content =" text /html; charset = utf-8 "/> < title > Tuts + Premium: Demo < /title > < style > body {background: # f2f2f2; text-align: center; padding: 20px} < /style > < script type = "text /javascript" src = "js /externalinterface.js" > < /script > < /head > < body > < objekt classid = " CLSID: d27cdb6e-ae6d-11cf-96b8-444553540000 "kodebase =" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 "width =" 400 "height =" 200 "id =" externalInterface "align =" middle "> < param name = "allowScriptAccess" value = "samedomain" /> < param name = "allowFullScreen" value = "false" /> < param name = "movie" value = "externalInterface.swf" /> < param name = "kvalitet" value = "high" /> < param name = "bgcolor" value = "# ffffff" /> < embed src = "externalInterface.swf" kvalitet = "high" bgcolor = "# ffffff" width = "400" height = "200" name = "externalInterface" align = "middle" allowScriptAccess = "samedomain" allowFullScreen = "false "type =" application /x-shockwave-flash "pluginspage =" http://www.macromedia.com/go/getflashplayer "/> < /object > < /body > < /html >
Step. 14: Klar externalinterface.js
funksjon setScore () {if (localStorage.score!) {localStorage.score = 0.; }} funksjon getScore () {if (localStorage.score) {return localStorage.score; }} funksjon updateScore (newScore) {localStorage.score = newScore}
Trinn 15:. Sette opp FLA
Farge:.. Svart
Størrelse: . 16pt
X: 102.00
Y: 14,00
< li> W: 210.00
H: 25.25
X:. 102.00
Y: 49.00
W: 210.00
H: 25.25
X: 150,00 <. br>
Y: 110.00
W: 100,00
H:. 22.00
X:. 118.00
Y: 50.00
W: 173,00
H: 82.00
X: 37.00
Y: 52.00
W: 100,00
H: 22.00
< li> X: 29.00
Y: 10.00
W: 131,00
H: 22.00
Trinn 16:. Main.as
Trinn 17:. Pakke og Import
pakke {import flash.display.Sprite.; import flash.events. *; import flash.external.ExternalInterface; public class Hoved strekker Sprite {offentlig funksjon main () {}}}
Trinn 18:. ADDED_TO_STAGE
< . p> Legg til følgende i main ()
offentlig funksjon main () {addEventListener (Event.ADDED_TO_STAGE, setup);}
Trinn 19:. Oppsettet () Funksjon
. privat funksjon oppsett (e: Hendelses): void {trace ("MOVIE KLAR"); }
Trinn 20:. Skjule Alert Box
privat funksjon oppsett (e: Hendelses): void {alertBox.visible = false;}
Trinn 21:. SetScore ()
privat funksjon setScore (): void {ExternalInterface.call ("setScore");}
Trinn 22: getScore ()
privat funksjon oppsett (e: Hendelses): void {alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore);}
privat funksjon getScore (score: String): int {var theScore. Int = int (score); returnere theScore;}
Trinn 23:. showScore ()
privat funksjon showScore (): void {currentScore_txt.text = "Nåværende High Score er:" + ExternalInterface.call ("getScore");}. < p> Her setter vi currentScore_txt.text å vise den aktuelle stillingen. Vi bruker ExternalInterface.call ("getScore") for å ringe getScore funksjon i Javascript-kode, som i sin tur utløser getScore () -funksjonen i vår Actionscript-kode. Husk, dette returnerer poengsum
privat funksjon oppsett (e: Hendelses):.. Void {alertBox.visible = false; ExternalInterface.addCallback ("getScore", getScore); setScore (); showScore ();}
Trinn 24: addButtonListeners ()
privat funksjons addButtonListeners (): void {scorebtn.addEventListener (MouseEvent.CLICK, getRandomScore);. alertBox.alertBox_btn.addEventListener (MouseEvent.CLICK, hideAlertBox);}
privat funksjon oppsett (e: Hendelses):. void {alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); showScore (); addButtonListeners ();}
privat funksjon getRandomScore (e: MouseEvent):.. Void {} privat funksjon hideAlertBox (e: Hendelses): void {alertBox.visible = false;}
Trinn 25:. GetRandomScore ()
privat funksjon getRandomScore (e: MouseEvent): void {var randScore. Int = Math.floor (Math.random () * 200 000); Var currentScore: int = ExternalInterface.call ("getScore"); randomScore_text.text = "Random Score er:" + randScore.toString (); if (randScore > currentScore) {alertBox.visible = true; ExternalInterface.call ("updateScore", randScore); showScore (); }}
Konklusjon