ActionScript 3: Переход между элементами графического интерфейса (текстовыми полями, кнопками) с помощью сочетания клавиш

Некоторые, наверное, замечали (и возможно пользовались этим), что во многих программах существует возможность перехода между элементами графического интерфейса при помощи нажатия заданной комбинации клавиш. Обычно это бывает клавиша alt или ctrl и какая-то заданная буква для элемента. Например, если зажать клавишу alt в программе, где есть главное верхнее меню, то элементы этого меню изменятся — в названиях будет подчеркнута какая-то одна буква. Попробуйте проделать это в программе AdobeFlash, при нажатии и удержании клавиши alt верхнее меню изменится, и некоторые буквы будут подчеркнуты. Если не отпускать alt и нажать, например, клавишу «F» , то раскроется меню «file» , то же самое касается других элементов меню.

Главное меню программы AdobeFlash, при нажатой клавише alt выделяются буквы в названиях элементов меню, которые можно использовать для быстрого запуска

Примечание. Подобная техника быстрого перехода нажатием комбинации клавиш существует в HTML, для назначения элементу используется атрибут AccessKey. В других языка программирования также имеется возможность назначения элементам графического интерфейса клавиш быстрого доступа.

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

Давайте рассмотрим такой пример. Предположим, есть некоторое приложение, где три текстовых поля, и мы хотим переходить между ними при помощи заданных комбинаций клавиш. Так как, в AdobeFlash не предусмотрено возможности задавать быстрые клавиши для элементов интерфейса, то мы создадим такое поведение при помощи кода ActionScript 3. Как основную клавишу будем использовать ctrl и клавишу соответствующей буквы, которая будет присутствовать в описании текстового поля.

Примечание. Обычно в качестве основной клавиши используется alt, но так как она уже задействована во флэш-плеере, в котором будет воспроизводиться наше приложение, нужно применить клавишу ctrl. Также не стоит проверять работу приложения в режиме разработки, так как клавиша Ctrl может быть зарезервирована для каких-либо действий программы AdobeFlash, лучше проверять уже готовое swf-приложение.

Давайте создадим новый документ actionscript 3 и разместим на нем три текстовых поля для надписей и три текстовых поля для ввода данных.

Три текстовых поля для надписей и три текстовых поля для ввода данных в AdobeFlash

Так как, мы уже решили, что основной клавишей будет ctrl, то нужно добавить для нее переменную, чтобы отслеживать ее нажатие.

var ctrlKey: Boolean;

Для отслеживания нажатия клавиши ctrl нужно добавить два прослушивателя для нажатия и для события отжатия.

stage.addEventListener(KeyboardEvent.KEY_DOWN, on_keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, on_keyUp);

Теперь создадим две функции-обработчика для этих прослушивателей:

function on_keyDown(e:KeyboardEvent):void{
  if (e.ctrlKey){   
    ctrlKey = true;
  }
}

function on_keyUp(e:KeyboardEvent):void{
  if (!e.ctrlKey){   
    ctrlKey = false;
  }
  if (ctrlKey && e.keyCode == Keyboard.B){	
    stage.focus = textinput1;
  }
  if (ctrlKey && e.keyCode == Keyboard.H){
    stage.focus = textinput2;
  }
  if (ctrlKey && e.keyCode == Keyboard.C){	
    stage.focus = textinput3;
  }
}

В первой функции происходит проверка нажатия клавиши ctrl, если она нажата, то переменной присваивается значение true.

Во второй функции также происходит проверка нажатия клавиши ctrl, если она не нажата, то переменная ctrlKey принимает значение false. Дальше проверяется, нажата ли комбинация клавиш, если да, то соответствующее текстовое поле становится активным.

Запустите и протестируйте приложение, зажмите клавишу ctrl и клавиши «р» «с» «и», обратите внимание, что происходит переход между полями ввода текста. Но в этом примере есть небольшая ошибка, бывает, что при переходе из одного текстового поля в другое печатается текст, например, если вместо клавиши ctrl использовать клавишу shift. Чтобы этого не происходило нужно создать обработчик, который будет обрабатываться при вводе текста.

function on_textfield_input(e:TextEvent):void{
  if (ctrlKey){
    e.preventDefault();
  }
}

Метод preventDefault() будет перехватывать события ввода текста, если нажата клавиша ctrl. Добавьте слушатель события для каждого текстового поля ввода.

textinput1.addEventListener(TextEvent.TEXT_INPUT, on_textfield_input);
textinput2.addEventListener(TextEvent.TEXT_INPUT, on_textfield_input);
textinput3.addEventListener(TextEvent.TEXT_INPUT, on_textfield_input);

Можете запустить приложение и проверить его работу, нажав клавиши ctrl + enter.

Давайте сделаем выделение определенных букв в каждом текстовом поле, которое описывает поле ввода текста. При нажатии на клавишу ctrl будет происходить изменение цвета букв для указания нужной комбинации клавиш.

Выделенные буквы в текстовых полях при нажатии клавиши ctrl в AdobeFlash

Для начала нужно присвоить имена текстовым полям, назовем их textfield1, textfield2 и textfield3. Для первого подсвечиваемая буква будет «И» , для второго — «р» и для третьего — «С».

В функцию on_keyDown(e:KeyboardEvent) добавим в условие проверки нажатия клавиши ctrl следующий код:

if (e.ctrlKey){   
  ctrlKey = true;
  var format1:TextFormat = new TextFormat();
  format1.color = 0xFF0000;
  textfield1.setTextFormat(format1, 0, 1);
  textfield2.setTextFormat(format1, 13, 14);
  textfield3.setTextFormat(format1, 0, 1);
}

Рассмотрим как работает код. Сначала создается переменная типа TextFormat для того, чтобы создать настройки цвета. Далее каждому текстовому полю устанавливается эти настройки для определенной буквы в тексте. Все это будет происходить при нажатой клавише ctrl. Чтобы вернуть первоначальный цвет букв для текстовых полей нужно написать следующий код в функцию on_keyUp(e:KeyboardEvent), в условие проверки нажатия клавиши ctrl:

if (!e.ctrlKey){   
  ctrlKey = false;  
  textfield1.textColor = 0xFFFFFF;
  textfield2.textColor = 0xFFFFFF;
  textfield3.textColor = 0xFFFFFF;
}

Этот код достаточно простой, каждому текстовому полю, свойству textColor, присваивается цвет белый в шестнадцатеричном значении.

Весь код с изменениями будет таким:

import flash.text.TextFormat;

var ctrlKey: Boolean;

stage.addEventListener(KeyboardEvent.KEY_DOWN, on_keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, on_keyUp);

textinput1.addEventListener(TextEvent.TEXT_INPUT, on_textfield_input);
textinput2.addEventListener(TextEvent.TEXT_INPUT, on_textfield_input);
textinput3.addEventListener(TextEvent.TEXT_INPUT, on_textfield_input);

function on_keyUp(e:KeyboardEvent):void{
	if (!e.ctrlKey){   
	  ctrlKey = false;
	  textfield1.textColor = 0xFFFFFF;
      textfield2.textColor = 0xFFFFFF;
      textfield3.textColor = 0xFFFFFF;
	}

	if (ctrlKey && e.keyCode == Keyboard.B){	
	   stage.focus = textinput1;
    }
	if (ctrlKey && e.keyCode == Keyboard.H){
	   stage.focus = textinput2;
    }
	if (ctrlKey && e.keyCode == Keyboard.C){	
	   stage.focus = textinput3;
    }
}

function on_keyDown(e:KeyboardEvent):void{
	if (e.ctrlKey){   
	  ctrlKey = true;
      var format1:TextFormat = new TextFormat();
      format1.color = 0xFF0000;
      textfield1.setTextFormat(format1, 0, 1);
      textfield2.setTextFormat(format1, 13, 14);
      textfield3.setTextFormat(format1, 0, 1);
	}
}

function on_textfield_input(e:TextEvent):void{
	if (ctrlKey){
	  e.preventDefault();
	}
}

Также пример (код ActionScript 3) использования комбинации клавиш для перехода между текстовыми полями можете скачать здесь.

Чтобы добавить статью в закладки — нажмите на значки внизу.

Автор: Jean Winters

Другие уроки AdobeFlash:

ActionScript 3: Обработка нажатия кнопок на клавиатуреActionScript 3: Обработка нажатия кнопок на клавиатуре


ActionScript 3: Рисование векторных объектов при помощи класса Graphics в AdobeFlashActionScript 3: Рисование векторных объектов при помощи класса Graphics в AdobeFlash


Комментировать

Почта не публикуется.Обязательные поля отмечены *