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

Наш компонент использует новую возможность Flash MX для реализации "кнопочных" действий, и в этом непосредственную роль играют метки кадров _up, _over и _down. Также возможно добавление кадра _hit для определения области щелчка для кнопки, однако здесь эта возможность не используется.

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

#initclip 1

// Constructor 
FSimpleButton = function(){
  // Initialise component
  this.init();
};

// Inherit from MovieClip object 
FSimpleButton.prototype = new MovieClip();
// Register component class
Object.registerClass("FSimpleButton", FSimpleButton);

Весь этот код почти в точности повторяет реализацию компонента Tool Tip в лекции 4. Не будем больше на этом останавливаться. Если вам что-то непонятно, обратитесь к лекции 4.

// Initialise component
FSimpleButton.prototype.init = function(){
  // Set caption text and color
  this.caption_txt.text = this.captionText;
  this.caption_txt.textColor = this.captionColor;

  // Setup cursor and disable tabbing 
  this.useHandCursor = this.showHand; 
  this.tabEnabled = false;

  // Set event handlers
  this.onRollOut = this.myRollOut;
  this.onRollOver = this.myRollOver;
  this.onPress = this.myPress;
  this.onRelease = this.myRelease;
  this.onDragOut = this.myDragOut;
  this.onDragOver = this.myDragOver;
  this.onReleaseOutside = this.myReleaseOutside;
};

Здесь мы устанавливаем текст и цвет текста для текстового поля caption_txt. Использованные для этого переменные находятся среди параметров, установленных в предыдущем шаге.

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

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

FSimpleButton.prototype.myRollOut = function() {
  this._parent [this.statusVar] = _global.oldStatusText; 
};

FSimpleButton.prototype.myRollOver = function() {
  _global.oldStatusText = this._parent[this.statusVar]; 
  this._parent[this.statusVar] = this.statusText;
};

Переменная состояния указывается в виде еще одного параметра компонента, как и непосредственный текст состояния. Мы используем глобальную переменную oldStatusText для хранения и получения предыдущего текста состояния. Причина этому станет ясна, когда мы перейдем к работе над фильмом Flash.

FSimpleButton.prototype.myPress = function() {
};

FSimpleButton.prototype.myRelease = function() {
  // Execute callback
  this._parent[this.clickHandler](this); 
};

Управляющий элемент onRelease, вероятно, наиболее важный элемент управления во всем компоненте. Это элемент управления, вызывающий функцию, указанную в параметре компонента clickHandler.

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

FSimpleButton.prototype.myDragOut = function() { 
  this.gotoAndStop("_up");
};

Я использовал его для устранения одного небольшого препятствия при реализации работы кнопок во Flash. В наиболее распространенных операционных системах, когда вы удерживаете кнопку мыши в момент нахождения указателя над кнопкой, и затем перетаскиваете указатель за пределы кнопки и отпускаете ее, это действие не воспринимается как нажатие кнопки. Однако во Flash кнопка останется в "нажатом" состоянии _down. Чтобы обойти эту особенность, я реализовал возврат кнопки в кадр _up при перетаскивании мыши за пределы области кнопки. Вам решать, применят этот способ здесь или нет, однако я бы на вашем месте не отказывался от этого дополнения.

FSimpleButton.prototype.myDragOver = function() { 
};

FSimpleButton.prototype.myReleaseOutside = function() {
};

FSimpleButton.prototype.disable = function() {
  this.caption_txt.textColor = this.captionDisabledColor; 
  this.gotoAndStop("disabled");
  this.enabled = false;
};

Из этого кода видно, что здесь мы всего лишь меняем цвет текста метки на текст, указанный в параметре компонента captionDisabledColor, переходя к кадру выключения и выключая компонент. При выключенном компоненте события не будут обрабатываться, и компонент будет оставаться в указанном кадре.

FSimpleButton.prototype.enable = function() { 
  this.enabled = true; 
  this.gotoAndStop("_up");
  this.caption_txt.textColor = this.captionColor;
};

Метод enable просто обращает изменения, сделанные в методе disable, включая кнопку, перемещая ее обратно в кадр _up и заново устанавливая цвет текста метки.

// Public: isEnabled
FSimpleButton.prototype.isEnabled = function() { 
  return this.enabled;
};

#endinitclip 

stop();

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

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

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

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

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

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

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

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

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

// Set status text
setStatus = function(statusText) {
  _root.status_txt.text = statusText;
};

// Fetch status text 
getStatus = function() {
  return __root.status__txt.text;
};

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

// Focus handler for form fields 
setFocusHandler = function () {
  // Set status text
  setStatus(this.statusText);

  // Highlight field
  this.backgroundColor = 0xCACED5;
};

// Kill Focus handler for form fields 
killFocusHandler = function() {
  // Clear status
  setStatus("");

  // Lose field highlight 
  this.backgroundColor = 0xDEE0E4;
};

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

Теперь рассмотрим проблему, возникающую при необдуманном нажатии пользователями различных кнопок. Например, не следует нажимать кнопку Reset, если форма уже является пустой, также следует предотвратить нажатие клавиши Submit до тех пор, пока пользователем не будут заполнены все поля формы. Вместо создания функций кнопки, которые будут проверять, что необходимые условия выполнены, перед продолжением работы, мы реализуем активацию/деактивацию кнопок в зависимости от состояния формы. Для этого применим еще один управляющий элемент события TextField: 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, однако наш вариант на самом деле работает немного быстрее. Он также требует меньше нажатий клавиш, поэтому здесь все только в выигрыше!

// 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, мы предотвращаем размещение в них фокуса ввода. Мы также удаляем границу текстового поля, которая является визуальным обозначением активности поля, а также делаем недоступными кнопки.

// 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 текстового поля происходит только тогда, когда пользователь изменяет значение, следовательно, нам необходимо настроить состояния кнопки вручную.

// 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, возможности динамического создания фильмов и текстовых полей, а также компонента кнопки.

// Popup message box function 
messageBox = function(message) {
  var maxWidth = 200;
  var msgBox_mc = _root.createEmptyMovieClip("msgBox_mc", 0);

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

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. Затем мы настроили текстовое поле таким образом, что оно расширяться вертикально в зависимости от количества находящегося в нем текста.

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-пиксельной линии по краям фильма.

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();
};

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

currentHeight += closeBtn._height + 5;

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 завершено.

// 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!");
  } 
}

// 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 для установки текста состояния.

// Set initial button states and halt movie 
changedHandler(); 
stop ();

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

<?php
// simplemailer.php
// Flash MX Studio - Steve Webster

// Set recipient for email 
$recipient = "you@yourisp.com";

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

Необходимо обработать небольшую особенность объекта loadVars. При использовании методов send и sendAndLoad управляющий элемент события onLoad и новый метод clear будут передаваться вместе с любыми другими данными в объект. Так как одной из целей создания этого приложения было обеспечение его максимальной гибкости в отношении числа поддерживаемых переменных, используем цикл для добавления каждой переменной, передаваемой из фильма Flash в тело сообщения электронной почты.

// Remove methods from data... 
unset($HTTP_POST_VARS["onLoad"]);
unset($HTTP_POST_VARS["clear"]);

Это реализуется с помощью функции unset для удаления соответствующих элементов массива HTTP_POST_VARS. Этот массив содержит все переменные, которые были переданы PHP-сценарию с помощью метода POST.

// Setup body text
$body = "The following information was submitted...\n\n";

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

// Add each key/value pair to the body text 
foreach($HTTP_POST_VARS as $key => $value) {
  $key = substr($key, 0, -4);
  $body .= "$key: $value\n";
}

Из кода видно, что мы использовали цикл foreach. Он аналогичен циклу for:in в ActionScript, который использовался в новом методе clear объекта loadVars. В примере выше, каждая итерация цикла считывает ключ (имя переменной) и значение следующего элемента массива, выбираемое и сохраняемое в переменных $key и $value, соответственно.

После этого мы используем функцию substr для отбрасывания расширения _txt, которое имеют в данный момент имена всех наших переменных. Это, на самом деле, необязательный шаг, однако указание расширения в электронной почте довольно бессмысленно, поэтому мы избавляемся от него. В PHP функция substr работает несколько иным образом, нежели ее аналог в ActionScript, так как здесь мы можем указывать отрицательное значение конечной точки подстроки. В данном случае, подстрока начинается из начального индекса и продолжается на протяжении n символов с конца исходной строки. В переводе на русский язык, эта строка кода будет звучать следующим образом.

Берем все символы в $key с позиции от 0 до 4 с конца строки и записываем результат в переменную $key.

После этого добавляем текущий ключ и значение в переменную $body и переходим к следующему элементу массива.

Далее нужно создать адресную строку From: для сообщения электронной почты. Мы реализуем указание имени отправителя в сообщении, получаемом адресатом. Это будет сделано не с помощью PHP, а с использованием прилагаемых деталей имени и адреса электронной почты. Правильный формат поля From: сообщения электронной почты таков.

"Name" <email@whatever.com>

// Set from address
$from = $HTTP_POST_VARS["name_txt"]  . " <" . 
  $HTTP_POST_VARS["email_txt"] . ">" ;

// Set subject for email
$subject = $HTTP_POST_VARS["subject_txt"];

// Send email
mail($recipient, $subject, $body, "From: $from");

?>

http://.../simplemailer.php?name_txt=Bobemail_txt=...

error_reporting (E_ALL ^ E_NOTICE);

Если вы обнаружите какие-либо ошибки, проверьте ваш сценарий и исправьте их. Если вы все еще не уверены в себе, просто скопируйте сценарий, находящийся на компакт-диске этой книги.