Динамический Flash: PHP

Фильм Flash

Разобравшись с дизайном кнопки, которая теперь готова к использованию, можно приступить к построению фильма Flash для нашего приложения. Начнем с графической оболочки и затем перейдем к рассмотрению ActionScript.

1. Если вы еще редактируете компонент кнопки, вернитесь на главное рабочее место. Приложение будет иметь только один кадр, поэтому не стоит слишком сильно беспокоиться за временную шкалу, но для ясности я разделил фильм на четыре слоя: Actions, Buttons, Textfields и Background.

   Используйте слой Background для создания любых графических объектов, нужных в приложении. Можете, например, поэкспериментировать с несколькими значениями цвета, упомянутыми ранее в этом параграфе.
2. В слое Textfields добавьте текстовые поля input, в которые пользователем будет вводиться информация. Так как мы работаем с простой формой обратной связи, рабочее место выглядит примерно так.
   

   
   

   Эти текстовые поля имеют имена инстансов name_txt, email_txt, subject_txt и message_txt, работающих поочередно сверху вниз. Я также добавил дополнительное текстовое поле внизу рабочего места для отображения текста состояния. Я присвоил ему имя инстанса status_txt и связал его с переменной statusText, так как она больше всего подходит для установки содержимого текстового поля вне компонента кнопки.
3. В слое Buttons перетащите два инстанса компонента FSimpleButton из Library на рабочее место и дайте им имена инстансов resetBtn и submitBtn. Они будут служить кнопками для сброса и подтверждения формы, и их параметры необходимо установить следующим образом.
   

   
   
   

   
   

   В следующем шаге мы создадим функции resetForm и submitForm. Этим мы закончим создание части фильма, не требующей применения кода. Сверьте ваше рабочее место с рисунком вверху следующей страницы, чтобы убедиться в правильности ваших действий.

   Результат вашей работы может отличаться от этой иллюстрации, так как я добавил текущий просмотр в компонент кнопки, о котором вам не говорил. Он обновляет заголовок, меняя его на тот, который указан в параметрах компонента. Если вы хотите сами разобраться в этом, обратитесь к "Компоненты" , в которой имеется подробное руководство по созданию текущих просмотров для компонентов. В противном случае, откройте файл livePreview.fla на компакт-диске.

   

   
   

   Разобравшись с графическими элементами нашего приложения, мы переключаем наше внимание на код ActionScript в слое Actions. Здесь как раз будет выполняться вся основная работа, начиная от отправки введенных пользователем данных сценарию PHP, и заканчивая созданием и отображением окна сообщения, показанного на первой иллюстрации приложения.
4. Сначала нужно добавить небольшое расширение к объекту loadVars. Оно позволит очищать все переменные объекта, чтобы форма могла подтверждаться более, чем один раз, без возможности "сохранения" какой-либо информации с момента предыдущего подтверждения.

   loadVars.prototype.clear = function() { 
     for (element in this) {
       if (typeof(this[element]) != "function") {
         delete this[element]; 
       } 
     }
   };

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

   Как вы можете видеть, мы используем цикл for:in для прохождения через каждый элемент объекта loadVars и удаляем все, что не является функцией. Необходимо проверять, что удаляемый нами объект не является функцией, так как управляющий элемент onLoad и метод clear будут включены в обрабатываемые элементы.
5. Далее мы имеем дело с двумя функциями-утилитами, которые можно использовать для установки и заполнения текстом текстового поля status_text.

   // Set status text
   setStatus = function(statusText) {
     _root.status_txt.text = statusText;
   };
   
   // Fetch status text 
   getStatus = function() {
     return __root.status__txt.text;
   };

   Для обозначения присутствия в текстовом поле фокуса ввода мы используем некоторые управляющие элементы событий нового объекта TextField, изменяющие цвет фона текстового поля при размещении в нем и удалении фокуса ввода. Это также позволяет устанавливать текст состояния.
6. Далее мы непосредственно установим управляющие элементы onSetFocus и onKillFocus для каждого текстового поля, однако сейчас мы просто создадим сами функции.

   // Focus handler for form fields 
   setFocusHandler = function () {
     // Set status text
     setStatus(this.statusText);
   
     // Highlight field
     this.backgroundColor = 0xCACED5;
   };
7. Функция setFocusHandler будет вызываться каждый раз при получении текстовым полем фокуса ввода. Она устанавливает текст состояния на параметр statusText (с которым мы разберемся позднее) текстового поля, вызвавшего управляющий элемент события, и изменяет цвет фона текстового поля на более темный.

   // Kill Focus handler for form fields 
   killFocusHandler = function() {
     // Clear status
     setStatus("");
   
     // Lose field highlight 
     this.backgroundColor = 0xDEE0E4;
   };

   killFocusHandler вызывается каждый раз при потере полем фокуса ввода. Эта функция очищает текст состояния и устанавливает цвет фона обратно на исходный.

   Теперь рассмотрим проблему, возникающую при необдуманном нажатии пользователями различных кнопок. Например, не следует нажимать кнопку Reset, если форма уже является пустой, также следует предотвратить нажатие клавиши Submit до тех пор, пока пользователем не будут заполнены все поля формы. Вместо создания функций кнопки, которые будут проверять, что необходимые условия выполнены, перед продолжением работы, мы реализуем активацию/деактивацию кнопок в зависимости от состояния формы. Для этого применим еще один управляющий элемент события TextField: onChanged.
8. Как и в случае с рассмотренными выше управляющими элементами событий, мы установим управляющий элемент onChanged для каждого текстового поля несколько позже, а здесь просто определим саму функцию.

   // Changed handler for form fields 
   changedHandler = function() {
     var submitCheck = true;
     var resetCheck = false;
   
     for (var count = 0; count < textFields.length; count++) { 
       if (_root [textFields[count]].length == 0) {
         submitCheck = false; 
       } else {
         resetCheck = true; 
       } 
     }
   
     if (submitCheck) {
       submitBtn.enable(); 
     } else {
       submitBtn.disable(); 
     }
   
     if (resetCheck) {
       resetBtn.enable(); 
     } else {
       resetBtn.disable(); 
     }
   };

   Этот код требует некоторого доверия с вашей стороны, так как он ссылается на массив textFields, который еще не создан. На данный момент достаточно сказать, что он содержит имена инстансов каждого из текстовых полей ввода данных. Вышеуказанный код обрабатывает циклом каждое из текстовых полей и проверяет, был ли введен какой-либо текст. Если обнаруживается пустое текстовое поле, кнопка Submit выключается, а если встречается непустое текстовое поле, активируется кнопка Reset.

   Обратите внимание, что здесь используется параметр length самого объекта TextField для определения того, были ли введены какие-либо данные. Согласно Macromedia, здесь получается тот же результат, что и при использовании TextField.text.length, однако наш вариант на самом деле работает немного быстрее. Он также требует меньше нажатий клавиш, поэтому здесь все только в выигрыше!
9. Теперь нужно создать функцию для выключения формы. Она будет использоваться при подтверждении формы, чтобы пользователь не мог произвести случайные и необдуманные действия с текстовыми полями или кнопками.

   // Function to disable form fields and buttons 
   disableForm = function() {
     // Disable all form fields
     for(var count = 0; count < textFields.length; count++) {
       _root [textFields[count]].selectable = false; 
       _root [textFields[count]].border = false; 
     }
   
     // Disable submit and reset buttons 
     submitBtn.disable(); 
     resetBtn.disable();
   };

   Установив параметр selectable для каждого текстового поля на значение false, мы предотвращаем размещение в них фокуса ввода. Мы также удаляем границу текстового поля, которая является визуальным обозначением активности поля, а также делаем недоступными кнопки.