Share
Dans ce didacticiel, vous apprendrez à utiliser l'API Google AJAX avec ActionScript 3 pour créer une belle application de traduction. Prendre plaisir!
En utilisant certains des flash.net cours, un Chaîne qui communique avec l'API Google AJAX et la classe JSON (faisant partie de as3corelib), nous allons créer une application de traduction dans Flash CS5.
Lancez Flash et créez un nouveau document. Définissez la taille de la scène sur 600x300px et la cadence sur 24 images par seconde.
C'est l'interface que nous allons utiliser, un fond dégradé, un titre ou un logo, un champ TextField d'entrée et un bouton Info; il y a aussi deux panneaux qui seront d'abord invisibles et activés au cours de l'application. Construisons.
Sélectionnez l'outil Rectangle (R), créez un rectangle de 600 x 300 et remplissez-le avec le dégradé radial suivant: # DFE0E4 à # BDC1C8, centrez-le sur la scène..
Utilisez l'outil Rectangle Primitive pour créer un rectangle de 100 x 40 pixels, remplissez-le avec le # 595E64 et modifiez le rayon du coin en 12..
Pour ajouter le logo Google, vous pouvez utiliser la police Catull si vous en avez un ou simplement ajouter le texte avec un autre caractère..
Il y a un peu de détail dans de nombreux éléments de l'interface, c'est l'effet de texte en typographie. Pour le créer, il suffit de dupliquer le texte (CMD + D), de changer sa couleur en # 212325 et de le déplacer d'un pixel vers le haut, puis de cliquer avec le bouton droit de la souris sur le texte plus sombre et de sélectionner Organiser> Renvoyer.
Ajoutons maintenant le texte à gauche, utilisez ce format: Lucida Grande Regular 11pt # 595E64. Encore une fois, utilisez l’effet typographique et positionnez le texte comme indiqué sur l’image..
Créez une ligne 1px à l'aide de l'outil Rectangle et remplissez-la avec # 595E64, dupliquez-la, changez la couleur en # ECF1FE et déplacez-la d'une pixel vers le bas. Vous pouvez grouper (CMD + G) les lignes pour une meilleure manipulation.
Avec l'outil Primitive Rectangle, créez un rayon d'angle de 250x24px, n ° 595E64 et 7. Centrer la forme et ajouter l'effet typographique.
Vous pouvez aussi ajouter une icône de recherche, en tant que détail.
Enfin, utilisez l'outil Texte (T) pour créer un champ de saisie de texte au format suivant: Helvetica Bold, 13pt, #EEEEEE. Aligner le TextField à l'arrière-plan.
Sélectionnez l'outil Ovale (O), dessinez un ovale de 15x15 px et remplissez-le avec le code # 919397. Utilisez l'outil Texte pour ajouter un italique je et les centrer.
Convertir les formes en un bouton et nommez-le infoButton.
Ouvrez le panneau Composants (CMD + F7) et faites glisser une zone de liste déroulante sur la scène, dupliquez-la et ajoutez-la à un rectangle arrondi de 160x127 pixels rempli des lettres # 41464A à # 595E64..
Ajouter des champs de texte statiques pour étiqueter les composants et le panneau.
Nommez les ComboBoxes fromBox et intoBox et convertir tout en un seul MovieClip. Définissez le nom de l'occurrence de MovieClip sur languagePanel.
Assurez-vous de vérifier la position que vous avez définie dans le panneau, car elle sera animée du point de départ à la scène dans cette démo. y est -14.
Le panneau de résultats sera utilisé pour afficher le texte traduit.
Créez un rectangle de 600 x 170 pixels en utilisant le remplissage en dégradé et ajoutez un champ de texte dynamique nommé SMS.
Convertissez la forme et TextField en MovieClip et nommez-le panneau.
Ceci termine la partie graphique.
Nous utiliserons un fichier XML contenant les langues disponibles via Google Translate..
Pour obtenir ces langues, nous avons besoin d’un navigateur Internet capable de voir le code source (comme tout navigateur moderne le fait), d’accéder au site Google Translate et de rendre le code source visible. Aller à la partie montrée dans l'image suivante et commencer à copier.
Vous pouvez également copier les données indiquées ci-dessous, mais sachez que cette liste peut être mise à jour de temps à autre..
Collez le texte dans votre éditeur XML et enregistrez-le sous. Langues.xml. N'oubliez pas d'ajouter le xml.children () [elementNumber] et la valeur d'abréviation en utilisant xml.children () [numéroÉlément]. @ valeur. Voir le tutoriel de Dru Kepple sur XML dans AS3 pour plus d'informations..
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Le mot clé package vous permet d'organiser votre code en groupes pouvant être importés par d'autres scripts. Il est recommandé de les nommer en commençant par une lettre minuscule et d'utiliser des interconnexions pour les mots suivants, par exemple: mes classes. Il est également courant de les nommer sur le site Web de votre entreprise: com.mycompany.classesType.myClass.
Dans cet exemple, nous utilisons une seule classe. Il n'est donc pas nécessaire de créer un dossier de classes..
paquet
JSON (JavaScript Object Notation) est un format d'échange de données léger. Il est facile pour les humains de lire et d'écrire. Il est facile pour les machines d’analyser et de générer.
JSON.org
La classe JSON sera nécessaire pour décoder la réponse du serveur, vous pouvez l'obtenir dans as3corelib sur sa page de téléchargement..
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
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; importer fl.data.DataProvider; import flash.events.MouseEvent;
Ici, nous déclarons la classe en utilisant le classe mot-clé de définition suivi du nom que nous voulons pour la classe, rappelez-vous que vous devez enregistrer le fichier en utilisant ce nom.
le s'étend mot-clé définit une classe qui est une sous-classe d'une autre classe. La sous-classe hérite de toutes les méthodes, propriétés et fonctions, ainsi nous pouvons les utiliser dans notre classe.
public class Main étend Sprite
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet.
private srcLang var: String = ""; // la langue source, la valeur par défaut est Autodetect private var destLang: String = "it"; // langue de destination par défaut, italian private var tween: Tween; // gère l'animation privée var xmlLoader: URLLoader; langues var privées: XML; // va stocker le fichier XML des langues privées var dp: DataProvider = new DataProvider (); // stocke un tableau de langues à transmettre à la comboBox
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe de document..
Accentsconagua
fonction publique Main (): void loadXML ("Languages.xml"); languagePanel.intoBox.prompt = "Italien"; // Définit le libellé par défaut de la liste déroulante sur "italian", qui est la langue de destination par défaut searchTerms.addEventListener (KeyboardEvent.KEY_UP, translate); // La fonction de traduction sera exécutée à chaque touche jusqu'à infoButton.addEventListener (MouseEvent.MOUSE_UP, selectLanguage); // Ajoute le listener à l'infobutton pour appeler le panneau de langue Cette fonction charge le XML passé dans le fichier src paramètre (appelé dans le constructeur). Il ajoute un auditeur pour exécuter le parseXML () fonctionne lorsque la charge est terminée.
fonction privée loadXML (src: String): void xmlLoader = new URLLoader (new URLRequest (src)); xmlLoader.addEventListener (Event.COMPLETE, parseXML);
Une fois le fichier XML entièrement chargé, nous utilisons l’instance XML pour convertir les données en un objet XML valide. setComboBoxData () une fonction.
fonction privée parseXML (e: Event): void languages = new XML (e.target.data); setComboBoxData ();
Ce code parcourt les valeurs du fichier XML, définit le nom complet de la langue comme libellé ComboBox et le valeur paramètre en tant que valeur ComboBox.
Il ajoute également les écouteurs d'événements correspondants pour détecter le changement de langue..
fonction privée setComboBoxData (): void pour (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);
Lorsque la langue de la ComboBox est modifiée, nous vérifions quel composant a été changé (de ou vers) et modifions la variable correspondante, de cette manière lorsque Traduire() la fonction est exécutée, elle utilisera automatiquement les nouvelles valeurs.
fonction privée comboBoxChange (e: Event): void if (e.target.name == "fromBox") srcLang = e.target.selectedItem.value; else destLang = e.target.selectedItem.value;
Par défaut, le panneau de langue est masqué. La fonction suivante est exécutée lorsque l’utilisateur clique sur le bouton infoButton, il montre ou cache le panneau de langue.
fonction privée selectLanguage (e: MouseEvent): void if (languagePanel.y == -14) // si le panneau est visible tween = new Tween (languagePanel, "y", Back.easeIn, languagePanel.y, -134 , 0.3, true); // le rend invisible else // si caché tween = new Tween (languagePanel, "y", Back.easeOut, languagePanel.y, -14, 0.3, true); //montre le
La fonction principale. Pour effectuer la traduction, Google nous fournit une API AJAX que nous devons appeler pour recevoir ensuite le texte traduit..
C'est la chaîne que nous utilisons:
http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q= "+ searchTerms.text +" & langpair = "+ srcLang +" | "+ destLang
Après le q = terme, nous devons inclure le texte que nous voulons traduire; après le Langpair paramètre, l'abréviation des langues que nous utilisons, séparées par un "|" personnage. Pour automatiser ce processus, nous utilisons les variables déclarées auparavant dans la classe..
Cette fonction est exécutée après un KEY_UP un événement.
fonction privée translate (e: KeyboardEvent): void if (searchTerms.length! = 0) var urlLoader: URLLoader = nouvelle URLLoader (nouvelle URLRequest ("http://ajax.googleapis.com/ajax/services/language/translate ? v = 1.0 & q = "+ searchTerms.text +" & langpair = "+ srcLang +" | "+ destLang)); urlLoader.addEventListener (Event.COMPLETE, displayTranslation); // appelle la fonction displayTranslation après la réponse du serveur if (languagePanel.y == -14) // masque le panneau de langue s'il est visible tween = new Tween (languagePanel, "y", Back.easeIn, languagePanel.y, - 134, 0,3, vrai); Lorsque le serveur répond avec le texte traduit, nous appelons cette fonction. Comme le serveur ne répond pas en texte brut, il est temps d'utiliser la classe JSON que nous avons téléchargée à partir de as3CoreLib..
fonction privée displayTranslation (e: Event): void var translation: String = "[" + e.target.data + "]"; // la réponse du serveur var json: Array = JSON.decode (translation) en tant que Array; // décode la chaîne JSON et la stocke sous la forme d'une aray tween = new Tween (panel, "y", Strong.easeOut, panel.y, 140,1, true); // affiche le panneau de traduction panel.txt.text = json [0] .responseData.translatedText; // affiche le texte traduit dans le champ de texte
Vous vous demandez probablement pourquoi nous avons utilisé un tableau pour stocker la chaîne de serveur, car la chaîne JSON reçue du serveur contient des types de données séparés, vous pouvez le voir dans la chaîne suivante:
"responseData": "translateText": "il s'agit du texte traduit", "responseDetails": null, "responseStatus": 200
Comme nous ne sommes intéressés que par le texte traduit, nous devons convertir les données JSON en un tableau, puis obtenir la valeur de la propriété. texte traduit de ce tableau.
Nous en avons terminé avec la classe. Pour l'utiliser, il suffit de revenir au fichier FLA et d'ajouter Principale au Classe champ dans le Propriétés Panneau.
Il pourrait être très agréable d'utiliser un traducteur dans votre application sans le quitter. Essayez de le mettre en œuvre dans votre propre application..
Merci d'avoir lu ce tutoriel, j'espère que vous l'avez trouvé utile!
