Опубликован: 07.11.2006 | Доступ: свободный | Студентов: 3400 / 338 | Оценка: 3.94 / 3.71 | Длительность: 37:11:00
Лекция 17:

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

  1. Далее необходимо создать функции resetForm и submitForm, упомянутые ранее.
    // Function to reset form to initial state 
    resetForm = function() {
      // Clear status text
      setStatus("");
      _global.oldStatusText = "";
    
      // Clear and enable textfields
      for(var count = 0; count < textFields.length; count++) {
        _root[textFields[count]].selectable = true;
        _root[textFields[count]].border = true;
        _root[textFields[count]].text = "";
      }
    
      // Disable buttons 
      resetBtn.disable(); 
      submitBtn.disable();
    };

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

  2. Перейдем к функции submitForm.
    // Function to submit form data to the server 
    submitForm = function() {
      // Disable form fields & buttons
      disableForm();
    
      // Clear dataHandler data... 
      dataHandler.clear();
    
      // Load data into dataHandler...
      for (var count = 0; count < textFields.length; count++) {
      dataHandler[textFields[count]] = __root[textFields[count]].text;
      }
    
      // Send data to PHP script and set status text
      dataHandler.sendAndLoad("simplemailer.php", dataHandler, "POST") ;
      setStatus("Contacting server...please wait!");
    };

    Здесь мы сначала делаем форму недоступной с помощью функции, созданной ранее, далее удаляем все данные из объекта dataHandler (являющийся инстансом loadVars, который мы создадим позже) с использованием нового метода clear, рассмотренного в самом начале этой лекции. После этого нужно переместить все данные из различных текстовых полей в объект dataHandler перед использованием метода sendAndLoad для задействования нашего PHP-сценария и отправкой данных с помощью метода POST. Наконец, устанавливаем текст состояния для информирования пользователя о происходящем.

    Осталась последняя функция. Перед тем, как вы начнете прыгать до потолка от радости, хочу сообщить вам, что эта функция несколько больше, чем рассмотренные до сих пор. Тем не менее, в ней нет ничего того, что не было рассмотрено в книге до данного момента, поэтому все будет в порядке! Назначением функции является информирование пользователя об успешном или неуспешном завершении процедуры sendAndLoad. Эта функциональность реализуется при помощи средств рисования API, возможности динамического создания фильмов и текстовых полей, а также компонента кнопки.

  3. Создадим фильм для окна сообщения.
    // Popup message box function 
    messageBox = function(message) {
      var maxWidth = 200;
      var msgBox_mc = _root.createEmptyMovieClip("msgBox_mc", 0);

    Обратите внимание, что мы добавили параметр message для функции, который будет текстом, отображаемым в окне сообщения. Также определили другую переменную maxWidth, которая используется для определения ширины окна сообщения (высота определяется количеством текста) и которая может быть изменена по вашему желанию.

  4. Далее нужно создать текстовое поле для непосредственного отображения текста, а также установить его параметры.
    msgBox_mc.createTextField("body_txt", 1, 5, 5, maxWidth - 10, 10);
    msgBox_mc.body_txt.multiline = true;
    msgBox_mc.body_txt.autoSize = true;
    msgBox_mc.body_txt.wordWrap = true;
    msgBox_mc.body_txt.selectable = false;
    msgBox_mc.body_txt.textColor = 0x676767;
    msgBox_mc.body_txt.text = message;

    Мы присвоили новому текстовому полю 5-пиксельную границу от края нашего фильма и установили начальную высоту на значение 10. Затем мы настроили текстовое поле таким образом, что оно расширяться вертикально в зависимости от количества находящегося в нем текста.

  5. Теперь создаем объект TextFormat, чтобы можно было указывать цвет шрифта и размер текстового поля.
    var format = new TextFormat(); 
    format.align = "left";
    format.font = "_sans";
    format.size = 10;
    
    msgBox_mc.body_txt.setTextFormat(format);
    
    var currentHeight = msgBox_mc.body_txt.textHeight + 10;

    После этого можно определить высоту текстового поля с помощью параметра textHeight. Он будет также определить место размещения кнопки и место рисования границы окна сообщения с учетом 5-пиксельной линии по краям фильма.

  6. Следующим шагом является непосредственное добавление инстанса компонента кнопки.
    var closeBtn = msgBox_mc.attachMovie("FSimpleButton", "closeBtn", 0);
    closeBtn._x = (maxWidth - closeBtn._width) / 2;
    closeBtn._y = currentHeight;
    closeBtn.captionText = "Close";
    closeBtn.showHand = false;
    closeBtn.captionColor = 0x676769;
    closeBtn.init();
    closeBtn.onRelease = function() {
      resetForm();
      this._parent.removeMovieClip();
    };

    Кнопка отцентрирована горизонтально и настроена на очистку фильма окна сообщения после отпускания кнопки.

  7. Приступим к рисованию границ и заполнению фильма с окном сообщения. Введем высоту кнопки, прибавив к ней толщину границы в 5 пикселей, в нашу переменную currentHeight для определения полной высоты фильма.
    currentHeight += closeBtn._height + 5;
  8. После этого размещаем фильм окна сообщения так, чтобы он был выровнен по центру рабочего места и был прорисован.
    msgBox_mc._x = (Stage.width - maxWidth) / 2; 
      msgBox_mc._y = (Stage.height - currentHeight) / 2;
    
      msgBox_mc.moveTo(0, currentHeight); 
      msgBox_mc.lineStyle(1, 0xF5F6F8, 100); 
        msgBox_mc.beginFill(0xEBECF0, 75);
      msgBox_mc.lineTo(0, 0); 
    
      msgBox_mc.lineTo(maxWidth, 0); 
      msgBox_mc.lineStyle(1, 0xC2C2C4, 100); 
      msgBox_mc.lineTo(maxWidth, currentHeight); 
      msgBox_mc.lineTo(0, currentHeight);
    
      msgBox_mc.endFill();
    };

    С помощью рисования API рисуем рельефную границу вокруг фильма и закрашиваем ее светло-зеленым цветом с интенсивностью 75%. Создание функции messageBox завершено.

  9. Все необходимые функции созданы. Теперь нужно создать объект dataHandler и установить его управляющий элемент события onLoad на вызов функции messageBox, которую мы только что создали с использованием разных сообщений, в зависимости от успешного или неуспешного завершения процедуры.
    // Create data handler and set onLoad event handler 
    dataHandler = new LoadVars(); 
    dataHandler.onLoad = function(success) { 
      if (success) {
        messageBox("Your data has been mailed by the server. Thank
        Кyou for your feedback, and someone will be in touch with 
        Кyou shortly regarding your query");
      } else {
        messageBox ("You data was not able to be sent due to a
        Кproblem on the server. Please try again later!");
      } 
    }
  10. Теперь осталось только создать массив textFields и связанные с ним строки состояния и инициализировать текстовые поля.
    // Array of textfield names and status strings
    textFields = new Array("name_txt", "email_txt", 
      "subject_txt", "message_txt");
    
    statusStrings = new Array("Enter your name here", 
    "You should enter your email
    Кaddress here", "This is the subject of your email",
    "Enter Кthe main body of your message here");
    
    // For each textfield
    for (count = 0; count < textFields.length; count++) {
      // Set properties
      textField_txt = this [textFields[count]];
      textField_txt.border = true;
      textField_txt.borderColor = 0xB1B1B1;
      textField_txt.background = true;
      textField_txt.backgroundColor = 0xDEE0E4;
      textField_txt.onSetFocus = setFocusHandler;
      textField_txt.onKillFocus = killFocusHandler;
      textField_txt.onChanged = changedHandler;
      textField_txt.statusText = statusStrings[count]; 
    }

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

  11. Я чуть не забыл кое-что. Изначально обе кнопки доступны, и нам это совершенно не нужно. В данном случае мы воспользуемся простым вызовом функции changedHandler.
    // Set initial button states and halt movie 
    changedHandler(); 
    stop ();

    Вот и все. Мы рассмотрели весь код ActionScript, необходимый для создания и выполнения нашего приложения. Запустив его, вы увидите результат ваших стараний во всей красе. Подтверждение формы на данном этапе генерирует сообщение об ошибке, так как сценарий PHP еще не существует. Также обратите внимание на то, что при тестировании приложения внутри среды разработки Flash окно сообщения не будет появляться в центре фильма. Это по той причине, что в среде разработки объект Stage представляет собой все окно тестирования, и поэтому код позиционирования в функции messageBox игнорируется. Если вы протестируете приложение в браузере, все будет работать, как положено!

Игорь Хан
Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

Александр Коргапольцев
Александр Коргапольцев

объект созданый мной упорно не желает оставлять след(единственное что добился, так это то что шарик резво гоняется за курсором) функция duplicateMovieClip остаётся не активной, т.е. следа от объекта не остаётся, но если я тоже самый код вбиваю в учебный файл всё работает, не могу понять где я ошибаюсь и почему в документе созданном заново, не работает код начиная от функции duplicateMovieClip?