Разработка приложения-переводчика с использованием API Google AJAX и JSON

В этом руководстве вы узнаете, как использовать API Google AJAX с ActionScript 3 для создания привлекательного приложения-переводчика. Наслаждайтесь!

Шаг 1: Краткий обзор

Используя некоторые из классов flash.net , String которая взаимодействует с Google AJAX API , и класс JSON (часть as3corelib ), мы создадим приложение-переводчик во Flash CS5.

Шаг 2: Настройки документа

Запустите Flash и создайте новый документ. Установите размер сцены 600x300px и частоту кадров 24 кадров в секунду.

Шаг 3: Интерфейс

Это интерфейс, который мы будем использовать, градиентный фон, заголовок или логотип, поле ввода TextField и кнопка Info; Есть также две панели, которые сначала будут невидимы и активированы в течение приложения. Давай начнем строить.

Шаг 4: Фон

Выберите инструмент Rectangle Tool (R) и создайте прямоугольник 600×300 и залейте его этим радиальным градиентом: от # DFE0E4 до # BDC1C8, отцентрируйте его на сцене.

Шаг 5: Заголовок / Логотип

Используйте Rectangle Primitive Tool, чтобы создать прямоугольник размером 100×40 пикселей, заполните его # 595E64 и измените радиус угла на 12.

Чтобы добавить логотип Google, вы можете использовать шрифт Catull, если он у вас есть, или просто добавить текст с другой гарнитурой.

Во многих элементах интерфейса есть небольшая деталь, это эффект высокой печати. Чтобы создать его, просто скопируйте текст (CMD + D), измените его цвет на # 212325 и переместите его на 1 пиксель вверх, затем щелкните правой кнопкой мыши более темный текст и выберите « Упорядочить»> «Отправить назад» .

Теперь давайте добавим текст слева, используйте этот формат: Lucida Grande Regular 11pt # 595E64. Опять же, используйте эффект высокой печати и расположите текст, как показано на рисунке.

Шаг 6: Разделитель

Создайте линию размером 1 пиксель, используя инструмент «Прямоугольник», и заполните ее # 595E64, продублируйте ее, измените цвет на # ECF1FE и переместите на 1 пиксель вниз. Вы можете сгруппировать (CMD + G) линии для лучшего манипулирования.

Шаг 7: Переведите фон TextField

С помощью инструмента Rectangle Primitive Tool создайте 250x24px, # 595E64 и 7 в качестве углового радиуса. Центрируйте фигуру и добавьте эффект высокой печати.

Вы также можете добавить значок поиска, как деталь.

Наконец, используйте Text Tool (T), чтобы создать поле ввода текста в следующем формате: Helvetica Bold, 13pt, #EEEEEE. Совместите TextField с фоном.

Шаг 8: кнопка информации

Выберите инструмент Oval Tool (O), нарисуйте овал размером 15×15 пикселей и заполните его # 919397. Используйте инструмент «Текст», чтобы добавить курсив и центрировать их.

Преобразуйте фигуры в кнопку и назовите ее infoButton .

Шаг 9: Языковая панель

Откройте панель «Компоненты» (CMD + F7) и перетащите ComboBox на сцену, продублируйте его и добавьте к прямоугольнику с закругленными углами 160×127 пикселей, заполненному от # 41464A до # 595E64.

Добавьте статические текстовые поля для маркировки компонентов и панели.

Назовите ComboBox от fromBox и intoBox и преобразуйте все в один мувиклип. Установите имя экземпляра MovieClip на languagePanel .

Обязательно проверьте положение, заданное для панели, так как она будет анимирована от начальной точки к сцене, в этой демонстрации -14.

Шаг 10: Панель результатов

Панель результатов будет использоваться для отображения переведенного текста.

Создайте прямоугольник размером 600×170 пикселей, используя градиентную заливку, и добавьте динамическое текстовое поле с именем txt .

Преобразуйте фигуру и TextField в MovieClip и назовите его панелью .

Это завершает графическую часть.

Шаг 11: XML

Мы будем использовать XML-файл, содержащий языки, доступные через Google Translate.

Чтобы получить эти языки, нам понадобится интернет-браузер, который может видеть исходный код (это делает любой современный браузер), перейти на сайт Google Translate и сделать исходный код видимым. Перейдите к части, показанной на следующем изображении, и начните копирование.

В качестве альтернативы, скопируйте данные, показанные ниже, хотя имейте в виду, что этот список может время от времени обновляться.

<?xml version=»1.0″?>
<options>
<option value=»»>Detect language</option>
<option value=»en»>English</option>
<option value=»af»>Afrikaans</option>
<option value=»sq»>Albanian</option>
<option value=»ar»>Arabic</option>
<option value=»hy»>Armenian ALPHA</option>
<option value=»az»>Azerbaijani ALPHA</option>
<option value=»eu»>Basque ALPHA</option>
<option value=»be»>Belarusian</option>
<option value=»bg»>Bulgarian</option>
<option value=»ca»>Catalan</option>
<option value=»zh-CN»>Chinese</option>
<option value=»hr»>Croatian</option>
<option value=»cs»>Czech</option>
<option value=»da»>Danish</option>
<option value=»nl»>Dutch</option>
<option value=»en»>English</option>
<option value=»et»>Estonian</option>
<option value=»tl»>Filipino</option>
<option value=»fi»>Finnish</option>
<option value=»fr»>French</option>
<option value=»gl»>Galician</option>
<option value=»ka»>Georgian ALPHA</option>
<option value=»de»>German</option>
<option value=»el»>Greek</option>
<option value=»ht»>Haitian Creole ALPHA</option>
<option value=»iw»>Hebrew</option>
<option value=»hi»>Hindi</option>
<option value=»hu»>Hungarian</option>
<option value=»is»>Icelandic</option>
<option value=»id»>Indonesian</option>
<option value=»ga»>Irish</option>
<option value=»it»>Italian</option>
<option value=»ja»>Japanese</option>
<option value=»ko»>Korean</option>
<option value=»lv»>Latvian</option>
<option value=»lt»>Lithuanian</option>
<option value=»mk»>Macedonian</option>
<option value=»ms»>Malay</option>
<option value=»mt»>Maltese</option>
<option value=»no»>Norwegian</option>
<option value=»fa»>Persian</option>
<option value=»pl»>Polish</option>
<option value=»pt»>Portuguese</option>
<option value=»ro»>Romanian</option>
<option value=»ru»>Russian</option>
<option value=»sr»>Serbian</option>
<option value=»sk»>Slovak</option>
<option value=»sl»>Slovenian</option>
<option value=»es»>Spanish</option>
<option value=»sw»>Swahili</option>
<option value=»sv»>Swedish</option>
<option value=»th»>Thai</option>
<option value=»tr»>Turkish</option>
<option value=»uk»>Ukrainian</option>
<option value=»ur»>Urdu ALPHA</option>
<option value=»vi»>Vietnamese</option>
<option value=»cy»>Welsh</option>
<option value=»yi»>Yiddish</option>
</options>

Вставьте текст в ваш XML-редактор и сохраните его как Languages.xml . Не забудьте добавить теги <options> </ options> в начале и конце соответственно, таким образом, мы можем получить полное имя языка с помощью xml.children()[elementNumber] и значение сокращения с помощью xml.children()[elementNumber].@value . См. Учебник Дрю Кеппла по XML в AS3 для получения дополнительной информации.

Шаг 12: Новый класс ActionScript

Создайте новый (Cmd + N) класс ActionScript 3.0 и сохраните его как Main.as в папке вашего класса.

Шаг 13: Пакет

Ключевое слово package позволяет вам организовать ваш код в группы, которые могут быть импортированы другими сценариями. Рекомендуется указывать их имена, начиная со строчной буквы, и использовать межстрочные буквы для следующих слов, например: myClasses . Также принято называть их, используя сайт вашей компании: com.mycompany.classesType.myClass .

В этом примере мы используем один класс, поэтому на самом деле нет необходимости создавать папку классов.

package
{

Шаг 14: JSON

JSON (JavaScript Object Notation) — это легкий формат обмена данными. Людям легко читать и писать. Машины легко разбираются и генерируются.

JSON.org

Класс JSON понадобится для декодирования ответа сервера, вы можете получить его как часть as3corelib на его странице загрузки .

Шаг 15: Директива об импорте

Это классы, которые нам нужно импортировать, чтобы наш класс работал, директива import делает внешние классы и пакеты доступными для вашего кода.

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;

Шаг 16: объявить и расширить класс

Здесь мы объявляем класс с помощью ключевого слова определения класса, за которым следует имя, которое мы хотим для класса, помните, что вы должны сохранить файл под этим именем.

Ключевое слово extends определяет класс, который является подклассом другого класса. Подкласс наследует все методы, свойства и функции, так что мы можем использовать их в нашем классе.

public class Main extends Sprite
{

Шаг 17: Переменные

Это переменные, которые мы будем использовать, прочитайте комментарии в коде, чтобы узнать о них больше.

private var srcLang:String = «»;
private var destLang:String = «it»;
private var tween:Tween;
private var xmlLoader:URLLoader;
private var languages:XML;
private var dp:DataProvider = new DataProvider();

Шаг 18: Конструктор

Конструктор — это функция, которая запускается, когда объект создается из класса. Этот код выполняется первым, когда вы создаете экземпляр объекта или запускаетесь с использованием класса документа.

public function Main():void
{
    loadXML(«Languages.xml»);
    languagePanel.intoBox.prompt = «Italian»;
    searchTerms.addEventListener(KeyboardEvent.KEY_UP, translate);
    infoButton.addEventListener(MouseEvent.MOUSE_UP, selectLanguage);
}

Шаг 19: Загрузите XML

Эта функция загружает XML, переданный в параметре src (который был вызван в конструкторе). Он добавляет слушателя для выполнения функции parseXML (), когда загрузка завершена.

private function loadXML(src:String):void
{
    xmlLoader = new URLLoader(new URLRequest(src));
    xmlLoader.addEventListener(Event.COMPLETE, parseXML);
}

Шаг 20. Обработка XML

После полной загрузки XML мы используем экземпляр XML для преобразования данных в допустимый объект XML, а после этого вызываем функцию setComboBoxData () .

private function parseXML(e:Event):void
{
    languages = new XML(e.target.data);
    setComboBoxData();
}

Шаг 21: Установите данные ComboBox

Этот код перебирает значения в файле XML, устанавливает полное имя языка в качестве метки ComboBox и параметр value в качестве значения ComboBox.

Он также добавляет соответствующие прослушиватели событий для обнаружения смены языка.

private function setComboBoxData():void
{
    for(var i:int = 0; i < languages.children().length(); i++)
    {
        dp.addItem({label: languages.children()[i], value: languages.children()[i].@value});
    }
             
    languagePanel.fromBox.dataProvider = dp;
    languagePanel.intoBox.dataProvider = dp;
             
    languagePanel.fromBox.addEventListener(Event.CHANGE, comboBoxChange);//Change listeners
    languagePanel.intoBox.addEventListener(Event.CHANGE, comboBoxChange);
}

Шаг 22: Обнаружение изменений в ComboBox

Когда язык в ComboBox изменяется, мы проверяем, какой компонент был изменен (из или в), и меняем соответствующую переменную, таким образом, когда функция translate () выполняется, она автоматически использует новые значения.

private function comboBoxChange(e:Event):void
{
    if(e.target.name == «fromBox»)
    {
        srcLang = e.target.selectedItem.value;
    }
    else
    {
        destLang = e.target.selectedItem.value;
    }
}

Шаг 23: Показать языковую панель

По умолчанию языковая панель скрыта. Следующая функция выполняется, когда пользователь нажимает на информационную кнопку , она отображает или скрывает языковую панель.

private function selectLanguage(e:MouseEvent):void
{
    if(languagePanel.y == -14) //if the panel is visible
    {
        tween = new Tween(languagePanel, «y», Back.easeIn, languagePanel.y, -134, 0.3, true);//make it invisible
    }
    else //if hidden
    {
        tween = new Tween(languagePanel, «y», Back.easeOut, languagePanel.y, -14, 0.3, true);
    }
}

Шаг 24: Переведите

Основная функция. Для выполнения перевода Google предоставляет нам AJAX API, к которому нам нужно обратиться, чтобы затем получить переведенный текст.

Это строка, которую мы используем:

http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=" + searchTerms.text + "&langpair=" + srcLang + "|" + destLang

После термина q = мы должны включить текст, который мы хотим перевести; после параметра langpair аббревиатура языков, которые мы используем, разделена знаком «|» персонаж. Для автоматизации этого процесса мы используем переменные, объявленные ранее в классе.

Эта функция выполняется после события KEY_UP .

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);
    }
             
    if(languagePanel.y == -14)//hides the language panel if visible
    {
        tween = new Tween(languagePanel, «y», Back.easeIn, languagePanel.y, -134, 0.3, true);
    }
}

Шаг 25: Показать перевод

Когда сервер отвечает переведенным текстом, мы вызываем эту функцию. Поскольку сервер не отвечает в виде простого текста, пришло время использовать класс JSON, который мы скачали с as3CoreLib.

private function displayTranslation(e:Event):void
{
    var translation:String = «[» + e.target.data + «]»;
    var json:Array = JSON.decode(translation) as Array;
 
    tween = new Tween(panel,»y»,Strong.easeOut,panel.y,140,1,true);
 
    panel.txt.text = json[0].responseData.translatedText;
}

Вы, вероятно, задаетесь вопросом, почему мы использовали массив для хранения строки сервера, потому что строка JSON, полученная от сервера, содержит отдельные типы данных, вы можете увидеть ее в следующей строке:

{"responseData": {"translatedText":"this is the text translated"}, "responseDetails": null, "responseStatus": 200}

Поскольку нас интересует только переведенный текст, мы должны преобразовать данные JSON в массив, а затем получить значение свойства translationText из этого массива.

Шаг 26: Класс документа

Мы закончили с классом, чтобы использовать его, просто вернитесь к FLA-файлу и добавьте Main в поле Class на панели свойств .

Вывод

Было бы очень приятно использовать Translator в вашем приложении, не покидая его, попробуйте реализовать его в своем приложении.

Спасибо за чтение этого урока, надеюсь, вы нашли его полезным!