Share
In deze zelfstudie leert u hoe u de Google AJAX API met ActionScript 3 kunt gebruiken om een mooie vertaaltoepassing te maken. Genieten!
Sommige van de gebruiken flash.net klassen, a Draad die communiceert met de Google AJAX API en de JSON-klasse (onderdeel van de as3corelib) we zullen een tolk applicatie maken in Flash CS5.
Start Flash en maak een nieuw document. Stel de stage in op 600x300 px en de framesnelheid op 24 fps.
Dit is de interface die we zullen gebruiken, een gradient-achtergrond, een titel of logo, een Input TextField en een Info-knop; er zijn ook twee panelen die eerst onzichtbaar zijn en in de loop van de app worden geactiveerd. Laten we bouwen.
Selecteer het gereedschap Rechthoek (R) en maak een rechthoek van 600x300 en vul deze met dit radiale verloop: # DFE0E4 tot # BDC1C8, centreer het op het podium.
Gebruik het Primitive Tool Rechthoek om een rechthoek van 100x40px te maken, vul deze met # 595E64 en verander de hoekradius in 12.
Als je het Google-logo wilt toevoegen, kun je het Catull-lettertype gebruiken als je het hebt of alleen de tekst toevoegen met een ander lettertype.
Er zit een klein detail in veel elementen van de interface, dit is het letterpress-teksteffect. Als u het wilt maken, dupliceert u de tekst (CMD + D), wijzigt u de kleur in # 212325 en verplaatst u deze 1px omhoog, klikt u met de rechtermuisknop op de donkere tekst en selecteert u Schikken> Naar achteren verzenden.
Laten we nu de tekst aan de linkerkant toevoegen, gebruik dit formaat: Lucida Grande Regular 11pt # 595E64. Gebruik opnieuw het letterpress-effect en plaats de tekst zoals in de afbeelding wordt getoond.
Maak een 1px-lijn met behulp van het gereedschap Rechthoek en vul het met # 595E64, dupliceer het, verander de kleur naar # ECF1FE en verplaats het 1px omlaag. U kunt de lijnen groeperen (CMD + G) voor een betere manipulatie.
Maak met het Primect-gereedschap Rechthoek een 250x24px, # 595E64 en 7 als hoekradius. Centreer de vorm en voeg het letterpress-effect toe.
U kunt ook een zoekpictogram als detail toevoegen.
Gebruik ten slotte de Text Tool (T) om een invoertekstveld te maken met dit formaat: Helvetica Bold, 13pt, #EEEEEE. Lijn het TextField uit met de achtergrond.
Selecteer het gereedschap Ovaal (O), teken een ovaal van 15x15 px en vul het met # 919397. Gebruik het tekstgereedschap om een cursief toe te voegen ik en centreer hen.
Converteer de vormen naar een knop en noem die infoButton.
Open het Componentenpaneel (CMD + F7) en sleep een ComboBox naar het werkgebied, dupliceer het en voeg het toe aan een afgeronde rechthoek van 160x127px gevuld met # 41464A tot # 595E64.
Voeg statische tekstvelden toe om de componenten en het paneel van een label te voorzien.
Geef de ComboBoxes een naam fromBox en intoBox en converteer alles naar een enkele MovieClip. Stel de naam van de MovieClip-instantie in op languagePanel.
Zorg ervoor dat je de positie controleert die je op het paneel hebt ingesteld, want deze wordt geanimeerd van het beginpunt naar het podium, in deze demo Y is -14.
Het resultatenvenster wordt gebruikt om de vertaalde tekst weer te geven.
Maak een rechthoek van 600x170px met behulp van de verloopvulling en voeg een dynamisch tekstveld met de naam tekst.
Converteer de vorm en het TextField naar MovieClip en noem deze paneel.
Hiermee is het grafische gedeelte voltooid.
We gebruiken een XML-bestand met de beschikbare talen via Google Translate.
Om deze talen te krijgen, hebben we een internetbrowser nodig die de broncode kan zien (elke moderne browser doet dat), ga naar de Google Translate-site en maak de broncode zichtbaar. Ga naar het gedeelte dat in de volgende afbeelding wordt weergegeven en begin met kopiëren.
U kunt ook de onderstaande gegevens kopiëren, maar houd er rekening mee dat deze lijst van tijd tot tijd kan worden bijgewerkt.
Plak de tekst in uw XML-editor en sla deze op als Languages.xml. Vergeet niet om de. Toe te voegen xml.children () [elementNumber] en de afkortingwaarde gebruiken xml.children () [elementNumber]. @ waarde. Zie Dru Kepple's tutorial over XML in AS3 voor meer informatie.
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Met het sleutelwoord van het pakket kunt u uw code indelen in groepen die kunnen worden geïmporteerd door andere scripts, u wordt aangeraden deze te benoemen beginnend met een kleine letter en intercaps te gebruiken voor volgende woorden, bijvoorbeeld: mijn lessen. Het is ook gebruikelijk om ze een naam te geven via de website van uw bedrijf: com.mycompany.classesType.myClass.
In dit voorbeeld gebruiken we een enkele klasse, dus het is niet echt nodig om een klassenmap te maken.
pakket
JSON (JavaScript Object Notation) is een lichtgewicht data-uitwisselingsformaat. Het is gemakkelijk voor mensen om te lezen en te schrijven. Het is gemakkelijk voor machines om te analyseren en te genereren.
JSON.org
De JSON-klasse is nodig om het antwoord van de server te decoderen, je kunt het krijgen als onderdeel van de as3corelib op de downloadpagina.
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
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;
Hier verklaren we de klas met behulp van de klasse definitie sleutelwoord gevolgd door de naam die we voor de klas willen, onthoud dat je het bestand met deze naam moet opslaan.
De strekt keyword definieert een klasse die een subklasse van een andere klasse is. De subklasse erft alle methoden, eigenschappen en functies, op die manier kunnen we ze in onze klasse gebruiken.
public class Main breidt uit
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten te komen.
private var srcLang: String = ""; // de brontaal, standaard is Autodetect private var destLang: String = "it"; // standaard doeltaal, italiaans private var tween: Tween; // behandelt animatie privé var xmlLoader: URLLoader; privé-var-talen: XML; // zal het XML-bestand van de talen private var dp opslaan: DataProvider = new DataProvider (); // slaat een reeks talen op die moeten worden doorgegeven aan de comboBox
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse. Deze code is de eerste die wordt uitgevoerd wanneer u een instantie van een object maakt of met behulp van de documentklasse uitvoert.
Accentsconagua
public function Main (): void loadXML ("Languages.xml"); languagePanel.intoBox.prompt = "Italiaans"; // Stel het combobox-standaardlabel in op "italian" wat de standaardbestemmingstaal is searchTerms.addEventListener (KeyboardEvent.KEY_UP, translate); // De vertaalfunctie wordt elke key-up infoButton.addEventListener (MouseEvent.MOUSE_UP, selectLanguage) uitgevoerd; // Voegt de luisteraar toe aan de infobutton om het taalpaneel te bellen Deze functie laadt de XML die is doorgegeven in de src parameter (die in de constructor is aangeroepen). Het voegt een luisteraar toe om de parseXML () functie wanneer de belasting is voltooid.
private function loadXML (src: String): void xmlLoader = new URLLoader (new URLRequest (src)); xmlLoader.addEventListener (Event.COMPLETE, parseXML);
Nadat de XML volledig is geladen, gebruiken we de XML-instantie om de gegevens naar een geldig XML-object te converteren en daarna bellen we met de setComboBoxData () functie.
private function parseXML (e: Event): void languages = new XML (e.target.data); setComboBoxData ();
Deze code doorloopt de waarden in het XML-bestand, stelt de volledige taalnaam in als het ComboBox-label en de waarde parameter als de ComboBox-waarde.
Het voegt ook de overeenkomstige gebeurtenislisteners toe om de taalverandering te detecteren.
persoonlijke functiesetComboBoxData (): void for (var i: int = 0; i < languages.children().length(); i++) dp.addItem(label: languages.children()[i], value: languages.children()[i].@value); //Set corresponding combobox values languagePanel.fromBox.dataProvider = dp; //Set the data provider to the component languagePanel.intoBox.dataProvider = dp; languagePanel.fromBox.addEventListener(Event.CHANGE, comboBoxChange);//Change listeners languagePanel.intoBox.addEventListener(Event.CHANGE, comboBoxChange);
Wanneer de taal in de ComboBox wordt gewijzigd, controleren we welk onderdeel is gewijzigd (van of naar) en verandert de bijbehorende variabele, op deze manier wanneer de vertalen() functie wordt uitgevoerd, worden de nieuwe waarden automatisch gebruikt.
private function comboBoxChange (e: Event): void if (e.target.name == "fromBox") srcLang = e.target.selectedItem.value; else destLang = e.target.selectedItem.value;
Het taalpaneel is standaard verborgen. De volgende functie wordt uitgevoerd wanneer de gebruiker klikt in de infoButton, het toont of verbergt het taalpaneel.
private function selectLanguage (e: MouseEvent): void if (languagePanel.y == -14) // als het paneel zichtbaar is tween = nieuwe Tween (languagePanel, "y", Back.easeIn, languagePanel.y, -134 , 0.3, true); // make it onvisible else // if hidden tween = new Tween (languagePanel, "y", Back.easeOut, languagePanel.y, -14, 0.3, true); //laat het zien
De kernfunctie. Voor de vertaling geeft Google ons een AJAX-API die we moeten bellen om de vertaalde tekst te ontvangen.
Dit is de string die we gebruiken:
http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q= "+ searchTerms.text +" & langpair = "+ srcLang +" | "+ destLang
Na de q = termijn moeten we de tekst opnemen die we willen vertalen; na de langpair parameter, de afkorting van de talen die we gebruiken, gescheiden door een "|" karakter. Om dit proces te automatiseren, gebruiken we de variabelen die eerder in de klas zijn gedeclareerd.
Deze functie wordt uitgevoerd na a KEY_UP evenement.
private function translate (e: KeyboardEvent): void if (searchTerms.length! = 0) var urlLoader: URLLoader = new URLLoader (new URLRequest ("http://ajax.googleapis.com/ajax/services/language/translate ? v = 1.0 & q = "+ searchTerms.text +" & langpair = "+ srcLang +" | "+ destLang)); urlLoader.addEventListener (Event.COMPLETE, displayTranslation); // roept de functie displayTranslation aan nadat de server reageert if (languagePanel.y == -14) // verbergt het taalpaneel indien zichtbaar tween = nieuwe Tween (languagePanel, "y", Back.easeIn, languagePanel.y, - 134, 0,3, waar); Wanneer de server antwoordt met de vertaalde tekst, noemen we deze functie. Omdat de server niet reageert in platte tekst, is het tijd om de JSON-klasse te gebruiken die we hebben gedownload van de as3CoreLib.
private function displayTranslation (e: Event): void var translation: String = "[" + e.target.data + "]"; // de serverreactie var json: Array = JSON.decode (vertaling) als Array; // decodeer de JSON-reeks en sla deze op als een aray tween = nieuwe Tween (paneel, "y", Strong.easeOut, panel.y, 140,1, true); // breng het vertaalpaneel aan paneel.txt.text = json [0] .responseData.translatedText; // geef de vertaalde tekst weer in het tekstveld
U vraagt zich waarschijnlijk af waarom we een array hebben gebruikt om de serverreeks op te slaan, dit komt omdat de JSON-string die van de server wordt ontvangen, gescheiden soorten gegevens bevat, u kunt deze zien in de volgende tekenreeks:
"responseData": "vertaalTekst": "dit is de tekst vertaald", "responseDetails": null, "responseStatus": 200
Omdat we alleen geïnteresseerd zijn in de vertaalde tekst, moeten we de JSON-gegevens omzetten in een array en vervolgens de waarde van de eigenschap krijgen translatedText van die reeks.
We zijn klaar met de klasse, om het te gebruiken, ga gewoon terug naar het FLA-bestand en voeg toe Hoofd naar de Klasse veld in de eigenschappen Paneel.
Het kan een hele leuke toevoeging zijn om een vertaler in je applicatie te gebruiken zonder hem te verlaten, probeer hem in je eigen app te implementeren.
Bedankt voor het lezen van deze tutorial. Ik hoop dat je het nuttig hebt gevonden!
