Статьи

Flash’s Hidden Gems: Компонент NumericStepper

Февраль 6, 2019

Возможно, один из самых простых компонентов, которые можно пропустить во Flash MX 2004, находится в разделе «Компоненты пользовательского интерфейса » на панели «Компоненты» и носит неинтересное имя NumericStepper.

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

Давайте посмотрим на пример. Вся динамика фильма, изображенного ниже, контролируется экземплярами NumericStepper.

1386_4

NumericStepper является чрезвычайно ценным компонентом, но по своей сути он предназначен для постепенного увеличения или уменьшения последовательности чисел. Есть несколько свойств компонента, которые мы можем получить и установить. Эти чрезвычайно полезные свойства, которые мы рассмотрим в этой статье, следующие:

  • minimum : минимальное значение компонента
  • maximum : максимальное значение компонента

    • nextValue : следующее добавочное значение компонента (только для чтения)

  • previousValue : предыдущее добавочное значение компонента (только для чтения)
  • stepSize : значение инкрементного изменения для компонента
  • value : текущее выбранное значение компонента

Потенциальные возможности использования компонента NumericStepper включают:

  • используется в качестве элементов формы для облегчения быстрого выбора числовых значений
  • используется в качестве элементов выбора даты (месяцы, годы и т. д.)
  • используется в экспериментальных приложениях для контроля сложных значений

Основное различие между компонентами NumericStepper и ComboBox, помимо методов, свойств и событий, заключается в простоте использования.

Хотя вы можете добиться аналогичных эффектов с помощью компонента ComboBox, компонент NumericStepper позволяет быстро увеличивать или уменьшать выделение с помощью стрелок «вверх» и «вниз» или клавиш «вверх» и «вниз» на клавиатуре. Используя ComboBox, вам нужно щелкнуть ComboBox, подождать, пока он отобразит параметры, затем выбрать нужное значение из выпадающего списка.

Решение NumericStepper, очевидно, намного быстрее, чем ComboBox, и его возможности позволяют легко и эффективно внедрять и использовать NumericStepper в некоторых уникальных приложениях.

Основы числового степпера

1386_1

Чтобы почувствовать этот компонент, давайте добавим на сцену один экземпляр NumericStepper. Затем мы заполним некоторые динамические текстовые поля парой свойств компонента NumericStepper.

Исходный FLA-файл для этого примера называется NumericStepperBasics.fla и может быть найден в архиве загружаемого кода этой статьи .

Установка сцены
  1. Начните с создания нового документа Flash. Примите настройки ширины, высоты и частоты кадров по умолчанию.

  2. Переименуйте слой по умолчанию Actions и добавьте еще один слой под ним, который называется Components. Перетащите экземпляр компонента NumericStepper из раздела «Компоненты пользовательского интерфейса» на панели «Компоненты» в первый кадр слоя «Компоненты». Назовите экземпляр StepperMain .

  3. Выберите экземпляр компонента NumericStepper и добавьте следующие значения в Инспекторе свойств: maximum:100 , minimum:0 ; stepSize:5 , value:10 .

    4. Примечание. Здесь мы добавили значения свойств компонента с помощью инспектора свойств, но мы также можем добавить эти значения программно с помощью ActionScript, если захотим (подробнее об этом позже).

  4. Создайте два динамических текстовых поля одно над другим. Назовите экземпляры previousTextBox и nextTextBox .

    Когда мы щелкаем компонент NumericStepper, эти текстовые поля будут заполнены next и previous значениями компонента. Мы добавим ActionScript, который достигнет этого через мгновение.

  5. При необходимости добавьте соответствующие метки к компоненту и текстовым полям, как показано на скриншоте выше.

Давайте двигаться дальше. Теперь мы добавим ActionScript, который позволяет нам видеть компонент в действии…

Добавление ActionScript
  1. Выбрав первый кадр слоя Actions, добавьте следующий код на панели Actions: 
    2.  var palletteArray = new Array();  palleteArray = ["0x7FAAD4", "0xFFDF7F"];  function setTheme() {  _global.style.setStyle("themeColor", palleteArray[0]);  _global.style.setStyle("backgroundColor", palleteArray[1]);  _global.style.setStyle("fontSize", 11);  _global.style.setStyle("fontWeight", "bold");  _global.style.setStyle("color", palleteArray[0]);  }  setTheme(); // Called at startup   var stepsListener = new Object();  stepsListener.change = function() {  populateTextBoxes();  };  stepperMain.addEventListener("change", stepsListener);   function populateTextBoxes() {  if ((stepperMain.value<stepperMain.maximum) && (stepperMain.value>stepperMain.minimum)) {    nextTextBox.text = stepperMain.nextValue;    previousTextBox.text = stepperMain.previousValue;  }  }

    Первое, что мы здесь делаем, — это создание нового массива palletteArray , который заполняется парой цветовых кодов, которые мы выбрали для нашего интерфейса: красивый пастельный желтый ( #7FAAD4 ) и дополнительный синий ( #FFDF7F ).

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

    Затем у нас есть функция setTheme() , которая вызывается при запуске. Он устанавливает тему для компонента NumericStepper (или любого другого компонента Flash MX 2004 на сцене) с palletteArray массива palletteArray мы установили ранее.

    Затем мы создаем новый объект listener который прослушивает изменение значения компонента NumericStepper. При обнаружении изменения вызывается функция populateTextBoxes() . Он nextValue свойства nextValue и previousValue компонента в соответствующие динамические текстовые поля.

  2. Сохраните документ Flash в выбранном вами месте и просмотрите свою работу во Flash.

    Как видите, нажатие на экземпляр NumericStepper увеличивает или уменьшает значения компонента и помещает next и previous значения в динамические текстовые области.

    Этот пример дал нам хорошее простое введение в компонент. Теперь мы можем опираться на эти основы, создавая более сложные творения для использования в ваших проектах.

Выбор даты

1386_3

Исходный FLA-файл для этого примера — NumericStepperDates.fla .

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

Установка сцены

Мы будем использовать тот же основной код, который мы использовали в предыдущем примере, и будем использовать его для получения другого результата; также в этом примере мы будем заполнять компонент NumericStepper с помощью ActionScript, а не жестко кодировать его содержимое с помощью инспектора свойств.

  1. Создайте новый документ Flash со свойствами по умолчанию и переименуйте слой по умолчанию Actions . Под ним добавьте еще один слой под названием Components .

  2. Перетащите 2 экземпляра компонента NumericStepper из раздела «Компоненты пользовательского интерфейса» на панели «Компоненты» в первый кадр слоя «Компоненты». Назовите экземпляры StepperYear и StepperMonth .

  3. Добавьте соответствующие текстовые метки над каждым компонентом (например, выберите год, выберите месяц).

Добавление ActionScript

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

  1. Выберите первый кадр слоя « Actions » и добавьте следующий код на панель «Действия»:

    2. Примечание. Код, выделенный жирным шрифтом, изменился по сравнению с предыдущим примером. 

     var monthArray = new Array();  monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];   var palletteArray = new Array();  palleteArray = ["0x7FAAD4", "0xFFDF7F"];  function setTheme() {  _global.style.setStyle("themeColor", palleteArray[0]);  _global.style.setStyle("backgroundColor", palleteArray[1]);  _global.style.setStyle("fontSize", 11);  _global.style.setStyle("fontWeight", "bold");  _global.style.setStyle("color", palleteArray[0]);  }  setTheme();   var stepsListener = new Object();  stepsListener.change = function() {  pushDate();  };  stepperYear.addEventListener("change", stepsListener);  stepperMonth.addEventListener("change", stepsListener);   function pushDate() {  trace("The selected year is: "+stepperYear.value+    "; the selected Month is: "+monthArray[stepperMonth.value-1]);  }  function populateYearStepper() {  var now = new Date();  stepperYear.minimum = now.getUTCFullYear();  stepperYear.maximum = now.getUTCFullYear()+10;  stepperYear.stepSize = 1;  stepperYear.value = now.getUTCFullYear();  }  populateYearStepper();  function populateMonthStepper() {  var now = new Date();  stepperMonth.minimum = 1;  stepperMonth.maximum = 12;  stepperMonth.stepSize = 1;  stepperMonth.value = now.getUTCMonth()+1;  }  populateMonthStepper();

    Первоначально мы создаем новый массив с именем monthArray , который содержит названия месяцев года; мы будем использовать это позже в этом примере, чтобы получить названия месяцев из функции pushDate() .

    Обратите внимание, что в этом примере мы связываем оба экземпляра компонента с одним и тем же объектом listener . Всякий раз, когда значение любого экземпляра изменяется, pushDate() функция pushDate() . 

     stepperYear.addEventListener("change", stepsListener);  stepperMonth.addEventListener("change", stepsListener);

    В этом примере у нас есть две функции ( populateYearStepper() и populateMonthStepper() ), обе из которых вызываются при запуске. Они динамически заполняют stepperYear и stepperMonth NumericStepper соответственно.

    Функция populateYearStepper() создает новый объект date , а затем stepSize свойства minimum , maximum , stepSize и value в stepperYear компонента stepperYear используя различные итерации метода getUTCFullYear() . Это создает minimum значение, которое является текущим годом, и maximum значение, которое является текущим годом плюс 10. Он устанавливает размер шага равным 1, а начальное значение экземпляра NumericStepper — текущим годом.

    Аналогичный процесс происходит с функцией stepperMonth populateMonthStepper() , которая заполняет экземпляр stepperMonth номерами месяцев (1-12). Затем он устанавливает начальное значение на текущий месяц, используя следующий код: 

     now.getUTCMonth()+1

    Метод getUTCMonth() возвращает целое число от 0 до 11, указывающее значение месяца в объекте Date (январь будет отображаться как 0, декабрь — как 11 и т. Д.). Мы добавляем 1 к этому, чтобы получить число, которое мы хотим отобразить в NumericStepper.

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

    Год достаточно прост для отслеживания, поскольку мы можем легко получить значение экземпляра stepperYear NumericStepper с помощью stepperYear.value. , Но чтобы преобразовать значение месяца с нуля в имя месяца, нам нужно посмотреть его позицию в массиве monthArray мы инициировали ранее. 

     trace("The selected year is: "+stepperYear.value+  "; the selected Month is: "+monthArray[stepperMonth.value-1]);
  2. Сохраните ваш документ Flash и предварительно просмотрите свою работу.

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

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

Экспериментальный контроль

Как мы уже упоминали, еще одно интересное применение компонента NumericStepper — использовать его в качестве элемента управления для экспериментальных эффектов, таких как показано на скриншоте в начале этого урока.

В этом примере мы будем использовать компонент динамически для создания нескольких динамических итераций текстовых полей с помощью createEmptyMovieClip() и createTextField() .

Свойство value экземпляра NumericStepper извлекается и используется для итерации цикла, который создает серию текстовых полей. При каждом последующем изменении значения компонента экран перерисовывается с количеством текстовых полей, отражающих значение в компоненте.

1386_2

Исходный FLA-файл для этого примера называется NumericStepperDynamicText.fla и может быть найден в архиве кода для этой статьи.

Примечание: архив кода включает в себя еще один пример этого FLA, в котором динамические создания размещаются случайным образом на сцене. Файл называется NumericStepperDynamicRandomText.fla

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

Установка сцены
  1. Создайте новый документ Flash со свойствами по умолчанию и переименуйте слой по умолчанию Actions . Добавьте под ним слой под названием Components .

  2. Перетащите экземпляр компонента NumericStepper из раздела «Компоненты пользовательского интерфейса» на панели «Компоненты» в первый кадр слоя «Компоненты». Назовите экземпляр StepperMain .

  3. Выбрав экземпляр компонента NumericStepper, добавьте следующие значения в Инспекторе свойств: maximum:100 , minimum:0 ; stepSize:5 , value:10 .

    С точки зрения настройки, это все, что нам нужно сделать. Остальная часть примера управляется с помощью ActionScript.

Добавление ActionScript
  1. Выберите первый кадр слоя Actions и добавьте следующий код на панели Actions: 
    2.  var palletteArray = new Array();  palleteArray = ["0x7FAAD4", "0xFFDF7F"];  function setTheme() {  _global.style.setStyle("themeColor", palleteArray[0]);  _global.style.setStyle("backgroundColor", palleteArray[1]);  _global.style.setStyle("fontSize", 11);  _global.style.setStyle("fontWeight", "bold");  _global.style.setStyle("color", palleteArray[0]);  }  setTheme();   var stepsListener = new Object();  stepsListener.change = function() {  removeDeadClips();  createTextBoxes();  };  stepperMain.addEventListener("change", stepsListener);   function createTextBoxes() {  if (stepperMain.value>stepperMain.minimum) {    var yPos = 30;    var yStart = stepperMain._y;    var yStep = 20;    var xStart = 150;    var textMC = _root.createEmptyMovieClip("textMC", 10);    for (var i=1; i<=stepperMain.value; i++) {      var field = textMC.createTextField("sampleText"+i, i, xStart, yStart+yPos, 200, 25);      field.multiline = true;      field.wordWrap = true;      field.border = false;      //Format Text      formatText(field, i);      var yPos += yStep;    }  }  }  createTextBoxes();   function formatText(field, number) {  var textFormatter = new TextFormat();  textFormatter.color = palleteArray[0];  textFormatter.bullet = false;  textFormatter.underline = false;  textFormatter.font = "_sans";  textFormatter.size = 12;  textFormatter.bold = true;  field.text = "Dynamic Text Creation #: "+number;  field.setTextFormat(textFormatter);  }   function removeDeadClips() {  for (z in _root) {    if (typeof (_root[z]) == "movieclip") {      _root[z].removeMovieClip();    }  }  }

    Как и прежде, мы настраиваем обработчик события изменения. На этот раз он запускает две функции ( removeDeadClips() и createTextBoxes() ) при изменении значения компонента NumericStepper.

    После setTheme() первой функцией, вызываемой при запуске, является createTextBoxes() , которая принимает начальное значение экземпляра stepperMain и создает пустой stepperMain movie clip . Затем он stepperMain.value цикл for, используя свойство stepperMain.value в качестве предельного значения.

    По мере того, как мы выполняем цикл for, серия текстовых полей создается и форматируется с помощью функции formatText() . Это устанавливает общие свойства текстового поля, включая цвет из массива palletteArray , и добавляет простой динамический текст.

    Когда значение экземпляра stepperMain NumericStepper изменяется, из обработчика событий removeDeadClips() функция removeDeadClips() . Он удаляет пустой movie clip мы создали для хранения текстовых полей.

    Примечание. Хотя на сцене динамически создается только один removeMovieClip() , и мы можем просто удалить его с помощью removeMovieClip() , я решил использовать функцию в этом примере. Этот подход дает дополнительные преимущества, заключающиеся в том, что если я Movie Clips позже создать несколько Movie Clips , я могу просто изменить функцию в соответствии со своими потребностями и указать ее на определенном уровне или на вложенном экземпляре Movie Clip .

    После очистки сцены мы createTextField() функцию createTextField() , чтобы создать пустой Movie Clip и динамические текстовые поля.

  2. Сохраните ваш документ Flash и предварительно просмотрите свою работу.

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

Только начало…

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

И когда вы создаете интересные приложения с использованием этого компонента, не стесняйтесь делиться ими с остальными членами сообщества SitePoint. Мы с нетерпением ждем встречи с вами!

35
Share: