Develop et Overs App Bruke Google AJAX API og JSON
4
Del
Del
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil du lære hvordan du bruker Google AJAX API med Actionscript 3 for å skape en hyggelig ser overs søknad. Nyt
Trinn 1: Kort oversikt
Ved hjelp av noen av de flash.net klasser, en streng som kommuniserer med Google AJAX API, og JSON klasse (en del av as3corelib) vil vi skape en overs program i Flash CS5
Trinn 2:. Dokumentinnstillinger
Launch Flash og opprette et nytt dokument. Satt scenen størrelse til 600x300px og bildefrekvensen til 24fps
Trinn 3:. Interface
Dette er grensesnittet vi ' ll bruk, en gradient bakgrunn, en tittel eller logo, en inngang Textfield og en info-knappen; det er også to paneler som vil være usynlig ved første og aktivert i løpet av programmet. La oss få bygningen
Trinn 4:. Bakgrunn
Velg rektangelverktøyet (R) og lage en 600x300 rektangel og fyll den med denne radial gradient: # DFE0E4 til # BDC1C8, senter det på scenen
Trinn 5: Tittel. /logo
Bruk rektangel Primitive Tool for å lage en 100x40px rektangel, fyll den med # 595E64 og endre hjørne radius til 12.
For å legge til Google-logoen kan du bruke Catull Font hvis du har det, eller bare legge til teksten med en annen skrift.
Det er en liten detalj i mange elementer av grensesnittet, er dette letter tekst effekt. Å skape det bare kopiere teksten (CMD + D) endre farge til # 212325 og flytte den 1px opp, høyreklikk den mørkere tekst og velger Ordne > Flytt bakover Nå la oss legge til tekst til venstre, bruker dette formatet. Lucida Grande Regelmessig 11pt # 595E64. Igjen, bruk letter effekt og plassere teksten som vises i bildet Lag en 1px linje ved hjelp av rektangelverktøyet og fylle det med # 595E64, kopiere den, endre fargen til # ECF1FE, og flytte den 1px ned. Du kan gruppere (CMD + G) linjene til bedre manipulering Med rektangel Primitive Tool, lage en 250x24px # 595E64 og 7 som hjørneradius. Sentrere form og tilsett boktrykk effekt. Du kan legge til en søkeikonet også, som en detalj. Til slutt, bruker du Tekst Tool (T) for å opprette en Input tekstfeltet med dette formatet: Helvetica Bold, 13pt, #EEEEEE. Juster Textfield til bakgrunnen Velg Oval Tool (O), tegne en 15x15 px oval og fylle det med # 919397. Bruk tekstverktøyet til å legge en kursiv i Konverter formene til en knapp og gi den navnet infoButton Åpne Components Panel (CMD + F7) og dra en ComboBox til scenen, kopiere den og legge den til i en 160x127px avrundet rektangel fylt med # 41464A Navngi comboboxes til # 595E64. Legg statisk tekstfelt for å merke komponenter og panelet. fromBox Hotell og intoBox Husk å sjekke den posisjonen du satt i panelet, som det vil være animerte fra startpunktet til scenen, i denne demoen y Resultatene panel vil bli brukt til å vise den oversatte teksten Lag en 600x170px. rektangel med gradient fyll og legge et dynamisk tekstfeltet som heter txt Konverter form og Textfield til MovieClip og name it panel Dette full den grafiske delen Vi vil bruke en XML-fil som inneholder de språkene som er tilgjengelige via Google Trans For å få disse språkene vi trenger en nettleser som kan se kildekoden (helst moderne nettleser gjør det), gå til Google Trans nettsted og gjøre kildekoden synlig. Gå til delen vist i følgende bilde og starte kopieringen. Alternativt kopiere dataene som er vist nedenfor, men vær oppmerksom på at denne listen kan bli oppdatert fra tid til annen. Anmeldelser <? xml version = "1.0" >? < alternativene > < alternativet value = "" > Detect language < /option > < alternativet value = "no" > Norsk < /option > < opsjonsverdi = "af" > Afrikaans < /option > < alternativet value = "kvadrat" > albansk < /option > < alternativet value = "ar" > arabisk < /option > < alternativet value = "hy" > armensk ALPHA < /option > < alternativet value = "az" > aserbajdsjanske ALPHA < /option > < alternativet value = "eu" > Basque ALPHA < /option > < alternativet value = "være" > Belarusian < /option > < alternativet value = "bg" > bulgarsk < /option > < alternativet value = "ca" > Catalan < /option > < alternativet value = "no-CN" > Chinese < /option > < alternativet value = "hr" > Kroa < /option > < alternativet value = "cs" > Czech < /option > < alternativet value = "da" > danske < /option > < opsjonsverdi = "nl" > Dutch < /option > < alternativet value = "no" > Norsk < /option > < alternativet value = "et" > Estonian < /option > < alternativet value = "tl" > Filipino < /option > < alternativet value = "fi" > finsk < /option > < alternativet value = "fr" > French < /option > < alternativet value = "gl" > galiciske < /option > < alternativet value = "ka" > Georgian ALPHA < /option > < alternativet value = "de" > tysk < /option > < alternativet value = "el" > Greek < /option > < alternativ value = "ht" > Haitian Creole ALPHA < /option > < alternativet value = "iw" > hebraisk < /option > < alternativet value = "Hei" > Hindi < /option > < alternativet value = " hu "> ungarske < /option > < alternativet value =" er "> Icelandic < /option > < alternativet value =" id "> indonesisk < /option > < alternativet value =" ga "> Irish < /option > < alternativet value = "det" > Italian < /option > < alternativet value = "ja" > japansk < /option > < alternativet value = "ko" > Korean < /option > < alternativet value = "lv" > latvisk < /option > < alternativet value = "lt" > litauisk < /option > < alternativet value = "mk" > makedonske < /option > < alternativet value = " ms "> Malay < /option > < alternativet value =" mt "> Maltese < /option > < alternativet value =" nei "> Norsk < /option > < alternativet value =" fa "> Persian < /option > < alternativet value = "pl" > Polish < /option > < alternativet value = "pt" > portugisisk < /option > < alternativet value = "ro" > rumensk < /option > < alternativet value = "ru" > Russian < /option > < alternativet value = "sr" > Serbian < /option > < alternativet value = "sk" > Slovak < /option > < alternativet value = " sl "> Slovenian < /option > < alternativet value =" es "> spansk < /option > < alternativet value =" sw "> Swahili < /option > < alternativet value =" sv "> Swedish < /option > < alternativet value = "th" > Thai < /option > < alternativet value = "tr" > Tyrkisk < /option > < alternativet value = "no" > ukrainske < /option > < alternativet value = "ur" > Urdu ALPHA < /option > < alternativet value = "vi" > Vietnamese < /option > < alternativet value = "CY" > Welsh < /option > < opsjonsverdi = "yi" > Yiddish < /option > < /opsjoner > Lim inn teksten i XML redaktør og lagre den som Languages.xml Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre den som Main.as Pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts, anbefales du kalle de starter med en liten bokstav og bruke intercaps for etterfølgende ord for eksempel: myClasses I dette eksempelet bruker vi en enkelt klasse, så det er ikke egentlig en. må opprette et klasser mappe JSON (Javascript Object Notation) er et lett datautvekslingsformatet. Det er lett for mennesker å lese og skrive. Det er lett for maskiner å analysere og generere. JSON.org JSON klassen vil være nødvendig for å dekode server respons, kan du få det som en del av den as3corelib på sitt nedlastingssiden Dette er de klassene vi trenger å importere for klassen vår til å fungere, import Her erklærer vi klassen med klasse strekker Dette er de variablene vi vil bruke, lese kommentarene i koden for å finne ut mer om dem Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse. . Denne koden er den første som skal utføres når du gjør en forekomst av et objekt eller kjører ved hjelp av Document Class Denne funksjonen laster XML vedtatt i src Etter at XML er fullastet, bruker vi XML omgang å konvertere dataene til en gyldig XML objekt og etter det vi kaller setComboBoxData () Denne koden looper gjennom verdiene i XML-filen, setter hele språket navn som ComboBox etiketten og verdi < . br> parameter som ComboBox verdi Den legger også de tilsvarende hendelsen lyttere å registrere endringen av språket Når språket i ComboBox endres, vi sjekker hvilken komponent ble endret (fra eller til) og endre den tilsvarende variabel, på denne måten når sette () Som standard språket panelet hidden.The følgende funksjon utføres når brukeren klikker på infoButton Kjernen funksjon. . For å utføre oversettelses Google gir oss en AJAX API at vi trenger å ringe for å deretter motta den oversatte teksten Dette er strengen vi bruker: http://ajax.googleapis.com /ajax/services/language/translate?v=1.0&q= "+ searchTerms.text +" & langpair = "+ srcLang +" | "+ destLang Etter at q = Denne funksjonen er utført etter en KEY_UP hendelse Når serveren svarer med den oversatte teksten vi kaller denne funksjonen. Som serveren ikke svarer i klartekst, er det på tide å bruke JSON klassen vi lastet ned fra as3CoreLib Du lurer kanskje på hvorfor vi brukte en matrise for å lagre serveren streng, er fordi JSON streng mottatt fra serveren inneholder dette atskilte typer data, og du kan se den i følgende streng: {"responseData": {"translatedText": "Dette er teksten oversatt"}, "responseDetails": null, "responseStatus": 200} Som vi er bare interessert i den oversatte teksten, må vi konvertere JSON data i en matrise og deretter få verdien av eiendommen translatedText Vi er ferdige med klassen, for å bruke det, bare gå tilbake til FLA-fil og legge til Hoved Det kan være en veldig fin touch til å bruke en oversetter i programmet uten å forlate det, prøve å implementere det i din egen app. Takk for at du leser denne opplæringen, jeg håper du har funnet det nyttig! Anmeldelser
Trinn 6:. Separator
Trinn 7:. Oversett Textfield Bakgrunn
Trinn 8:. Info Button
og sentrere dem.
.
Trinn 9: Språk Panel
og konvertere alt til en enkelt MovieClip. Sett MovieClip forekomstnavnet til languagePanel
.
er -14
Trinn 10:. Resultater Panel
.
.
Trinn 11:.. XML
. Ikke glem å legge til < alternativer > < /opsjoner > tags på henholdsvis begynnelsen og slutten, på denne måten kan vi få full språknavnet med xml.children () [elementNumber] og forkortelsen verdi ved hjelp xml.children () [elementNumber]. @ verdi. Se Dru Kepple tutorial på XML i AS3 for mer informasjon
Trinn 12:. New Action Class
i klassen din mappe
Trinn 13:. Package
. Det er også vanlig å nevne dem ved hjelp av selskapets hjemmeside: com.mycompany.classesType.myClass
pakken {
Trinn 14:. JSON
Trinn 15:. Import direktiv
direktivet gjør eksternt definerte klasser og pakker tilgjengelig i koden
import flash.display.Sprite;. import flash.events.KeyboardEvent, import flash.net.URLLoader, import flash.net.URLRequest; import flash.events.Event; import com.adobe.serialization.json.JSON, import fl.transitions.Tween, import fl.transitions.easing.Back, import fl.transitions.easing.Strong, import fl.data.DataProvider; import flash.events.MouseEvent;
Trinn 16: Erklærer og Forleng Class
definisjon søkeord fulgt av navn som vi ønsker for klassen, husk at du må lagre filen med dette navnet.
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i klassen vår
public class Hoved strekker Sprite {
Trinn 17:. Variabler
privat Var srcLang. String = ""; //kildespråket, er standard Autodetectprivate Var destLang: String = "det"; //standardmålet språk, italianprivate Var tween: Tween; //håndterer animationprivate Var xmlLoader: URLLoader; private Var språk: XML; //vil lagre XML-fil av languagesprivate Var dp: dataprovider = new dataprovider (); //lagrer en rekke språk å passere til ComboBox
Trinn 18: Constructor
offentlig funksjon main (): void {LoadXML ("Languages.xml"); languagePanel.intoBox.prompt = "italiensk"; //Sett ComboBoxen standard etiketten til "italiensk" som er standardmålet språket searchTerms.addEventListener (KeyboardEvent.KEY_UP, oversette); //Den sette funksjonen vil bli kjørt hver tast opp infoButton.addEventListener (MouseEvent.MOUSE_UP, selectLanguage); //Legger lytteren til infobutton å kalle språket panel}
Trinn 19: Load XML
parameter (som var kalt i konstruktøren). Det legger en lytter å utføre parseXML ()
funksjon når lasten er fullført
privat funksjon LoadXML (src: String):. Void {xmlLoader = new URLLoader (ny URLRequest (src)); xmlLoader.addEventListener (Event.COMPLETE, parseXML);}
Trinn 20: Handle XML
funksjon
privat funksjon parseXML (e: Hendelses): void {språk = new XML (e.target.data);. setComboBoxData ();}
Trinn 21: Set ComboBox data
privat funksjon setComboBoxData (): void {for (var i: int = 0; i <. .; languages.children () lengde (); i ++) {dp.addItem ({label: languages.children () [i], verdi:. languages.children () [i] @ value}); //Sett tilhørende Combobox- verdier} languagePanel.fromBox.dataProvider = dp; //Sett dataleverandøren til komponenten languagePanel.intoBox.dataProvider = dp; languagePanel.fromBox.addEventListener (Event.CHANGE, comboBoxChange); //Endre lyttere languagePanel.intoBox.addEventListener (Event.CHANGE, comboBoxChange);}
Trinn 22: Oppdage Combobox Endringer
funksjonen er utført vil det automatisk bruke de nye verdiene.
privat funksjon comboBoxChange (e: Hendelses): void {if (e.target.name == "fromBox") {srcLang = e.target.selectedItem.value; } Else {destLang = e.target.selectedItem.value; }}
Trinn 23: Show Språk Panel
, viser det eller skjuler språket panel
privat funksjon selectLanguage (e: MouseEvent):. void {if (languagePanel.y == -14) //hvis panelet er synlig {tween = new Tween (languagePanel, "y", Back .easeIn, languagePanel.y, -134, 0,3, true); //gjøre det usynlige} else //hvis gjemt {tween = new Tween (languagePanel, "y", Back.easeOut, languagePanel.y, -14, 0.3 , ekte); //vise det}}
Trinn 24: Trans
sikt må vi inkludere teksten vi ønsker å oversette;. etter langpair
parameter, forkortelsen av språkene vi bruker adskilt med en "|" tegn For å automatisere denne prosessen vi bruker variabler deklarert før . i klassen
privat funksjon sette (e: KeyboardEvent):. void {if (searchTerms.length = 0!) {var URLLoader: URLLoader = new URLLoader (ny URLRequest ("http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=" + searchTerms.text + "& langpair =" + srcLang + "|" + destLang )); urlLoader.addEventListener (Event.COMPLETE, displayTranslation); //kaller displayTranslation funksjon etter at serveren svarer} if (languagePanel.y == -14) //skjuler språket panelet hvis synlig {tween = new Tween (languagePanel "y", Back.easeIn, languagePanel.y, -134, 0,3, true); }}
Trinn 25: Visning Oversettelse
privat funksjon displayTranslation (e: Hendelses):. Void {var oversettelse: String = "[" + e.target .data + "]"; //serverrespons Var json: Array = JSON.decode (oversettelse) som Array; //dekode JSON streng og lagre det som en aray tween = new Tween (panel, "y", Strong.easeOut, panel.y, 140,1, true); //få opp sette panel panel.txt.text = json [0] .responseData.translatedText; //vise den oversatte teksten i tekstfeltet}
fra denne matrisen
Trinn 26:. Dokument Klasse
til Class
feltet i Egenskaper
Panel.
Konklusjon