Поля пароля позволяют вам создать поле, подобное текстовому полю, в которое пользователи могут вводить. Однако поле пароля приводит к тому, что все отображается в виде звездочек (*), поэтому наблюдатели не могут видеть, что набирается.
В этом уроке мы создадим статический класс, который преобразует поле ввода TextField в поле пароля, похожее на iPhone.
Шаг 1: Краткий обзор
Мы будем использовать статический атрибут в ActionScript 3.0 для объявления класса, для которого не требуется создавать экземпляр, таким образом мы можем вызывать его методы без создания объекта с помощью оператора new .
Наш класс создаст Timer , который заменит символы целевого TextField на любой данный символ в указанное время.
Шаг 2: Начало
Откройте Flash и создайте новый файл Flash (ActionScript 3).
Установите размер сцены 600×300 и добавьте серый линейный фон (#EEEEEE, #DDDDDD).
Шаг 3: Интерфейс
Давайте добавим некоторые графические детали в наше приложение.
Выберите Rectangle Tool (R), создайте прямоугольник 600x50px и заполните его # 222222.
Создайте статическое TextField для добавления заголовка. Я использовал Helvetica Bold 21pt в качестве TextFormat.
Используйте инструмент Rectangle Primitive Tool, чтобы создать прямоугольник размером 200×30 пикселей (#AAAAAA) и измените радиус на 6,00. Дублируйте эту форму (Cmd + D), измените ее размер до 198x28px, измените его цвет на #EEEEEE и отцентрируйте его в предыдущей форме.
Добавьте текст для обозначения поля.
Это завершит графическую часть.
Шаг 4: Поле пароля
Мы создадим поле ввода TextField, которое мы будем использовать для получения ввода от пользователя и для указания цели в нашем классе маскирования паролей.
Выберите инструмент Text Tool (T) и поместите текстовое поле ввода в фон, который мы создали ранее. Установите его имя экземпляра в passField .
Шаг 5: ActionScript!
Создайте новый документ ActionScript и сохраните его как iPass.as . Это будет наш статический класс.
Шаг 6: Обязательные классы
Классы нам понадобятся. За конкретной информацией обращайтесь к справке по Flash (F1).
|
1
2
3
4
5
6
7
8
|
package classes
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.ui.Keyboard;
import flash.events.KeyboardEvent;
|
Шаг 7: Расширение класса
Мы собираемся использовать определенные методы и свойства Sprite, поэтому мы расширяем его с помощью класса Sprite.
|
1
2
|
public class iPass extends Sprite
{
|
Шаг 8: Переменные
Это переменные, которые мы будем использовать, объяснено в комментариях. Обратите внимание, что переменные объявлены как статические, чтобы иметь доступ без экземпляра.
|
1
2
3
4
|
public static var pass:String = «»;
public static var target:TextField;
private static var regExp:RegExp = /./g;
public static var timer:Timer = new Timer(1000);
|
Шаг 9: Основная функция
Это метод, который мы будем вызывать для использования класса.
|
1
2
3
4
5
|
public static function maskTextField(t:TextField):void //We need a parameter that will specify the target TextField
{
target = t;
addListeners();
}
|
Шаг 10: заменить функцию
Это функция, которая заменит символы в целевом поле.
|
1
2
3
4
5
|
private static function replaceOnTime(e:TimerEvent):void
{
target.text = target.text.replace(regExp, «•»);
timer.stop();
}
|
Шаг 11: Запустите таймер
Эта функция запускает таймер, когда целевое текстовое поле находится в фокусе и нажата кнопка.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
private static function startTimer(e:KeyboardEvent):void
{
/* If the timer is not running, start it, else, reset timer, replace all characters but last, and run timer again */
!timer.running ?
/* Filters valid keys, from a to Z */
for (var i:int = 65; i < 123; i++)
{
if (e.charCode == i)
{
pass += String.fromCharCode(i);
}
}
if (e.keyCode == Keyboard.BACKSPACE)
{
pass = pass.substring(0, pass.length — 1);
}
}
|
Шаг 12: Слушатели
Добавляет слушателей к объектам Timer и TextField.
|
1
2
3
4
5
|
private static function addListeners():void
{
timer.addEventListener(TimerEvent.TIMER, replaceOnTime);
target.addEventListener(KeyboardEvent.KEY_UP, startTimer);
}
|
Шаг 13: Основной класс
Этот класс вызовет статический класс iPass и передаст TextField на этапе в качестве параметра.
Создайте новый документ ActionScript и сохраните его как Main.as.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
package classes
{
import classes.iPass;
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main():void
{
iPass.maskTextField(passField);
}
/*private function getPassword():void
{
trace(iPass.pass);
}*/
}
}
|
Шаг 14: Класс документа
Вернитесь к файлу .Fla и в панели свойств добавьте classes.Main в поле Class, чтобы сделать его классом документов.
Вывод
Вы создали класс маски паролей и узнали, как создавать и использовать статический класс — экспериментируйте с его преимуществами!
Спасибо за прочтение!