В этой статье мы разберем, как сделать простую контактную веб форму, которую посетители вашего сайта смогут использовать для отправки сообщений прямо со страницы сайта. Скрипт будет написан на ActionScript 3.0 и будет использовать PHP скрипт для отправки сообщения на ваш e-mail. Данная статья не требует от вас знания PHP, так как скрипт прост и может быть применен без каких либо изменений.

Наша статья будет разделена на следующие секции:
1. Подготовка внешних компонентов.
2. Создание графического интерфейса во Flash.
3. Написание скрипта.

Подготовка внешних компонентов.

Flash клип сам по себе не может отправлять e-mail сообщения. Для этого нам нужно использовать серверный скрипт на PHP или ASP. Здесь мы будем использовать PHP скрипт. Создайте новую папку для вашего проекта и в ней, используя любой подходящий редактор (Notepad++, Dreamweaver или, на худой конец Блокнот) создайте пустой PHP файл и назовите его mail.php.

Этот файл предназначен для получения нашего сообщения от SWF клипа, который мы сделаем позже и посылать эти данные на e-mail адрес, который мы ему укажем. Просто скопируйте и вставте в ваш пустой PHP файл следующий код:

CODE:

Вам необходимо заменить значение переменной $to тем e-mail адресом, на который вы хотите получать сообщения с данной контактной формы.

Создание графического интерфейса для нашей формы.

Создайте новый FLA файл во Flash в формате AS3. Сохраните его под именем ContactMovie.fla в папке вашего проекта, где вы сохранили PHP файл.

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

1. Текстовое поле ввода для e-mail адреса отправителя.
2. Текстовое поле ввода для имени отправителя.
3. Большое текстовое поле для текста сообщения.
4. Кнопку "Отправить".

Мы будем использовать готовые встроенные во Flash компоненты. Откройте панель Компоненты (Components) меню Окно - >Компоненты (Window -> Components) и перетащите экземпляр компонента TextInput в рабочую область. Вам нужно слегка изменить его размер, чтобы он выглядел как на рисунке внизу.

Теперь, когда наше поле ввода уже находится в рабочей области, мы должны присвоить ему имя экземпляра (Instance name), для того, чтобы мы могли обращаться к нему из ActionScript. Пока ваше поле ввода все еще выделено, зайдите в инспектор свойств (Properties Inspector) и введите имя экземпляра (Instance name) как email_txt.

Повторим тот же самый процесс и создадим поле ввода для имени отправителя сообщения, после создания экземпляра компонента присвойте ему Instance name как name_txt.

Далее, для большого текстового поля для текста сообщения нам нужно перетащить в рабочую область компонент TextArea и присвоить ему Instance name message_txt.

Последний компонент, который нам нужен - кнопка "Отправить", просто перетащите компонент Button в рабочую область и присвойте ему Instance name submit_btn.

Наша кнопка еще не полностью готова, как вы могли заметить, нам нужно изменить лейбл, стобы на кнопке было написано "Отправить". Чтобы это сделать, зайдите в Component Inspector (Window -> Component Inspector) и установите свойство Label кнопки как Отправить.

В результате у вас должно получиться примерно вот так:

Используя инструмент TextTool напишите названия к нашим с вами текстовым полям, как это показано на рисунке внизу:

Ну, вот, теперь, когда все наши графические элементы готовы, пора перейти к написанию скрипта, который вдохнет, так-сказать жизнь в наше творение. Скрипт будет собирать информацию, введенную в форму, помещать ее в экземпляр класса URLVariables Class и затем отсылать ее PHP скрипту, используя класс URLLoader Class.

Обработчик событий для кнопки

Первый шаг в написании кода для нашей контакт формы это установить слушатель событий для нашей кнопки, код будет запускаться при клике на кнопке. Чтобы сделать это, нам нужно зарегистрировать слушатель событий для кнопки для события CLICK (клик мыши), сделать это очень просто, если вы знаете основы обработки событий в ActionScript. Мы собираемся создать функцию с названием sendMessage(), кликните правой кнопкой мыши единственный кадр на временной линии, выберете из выпадающего меню Actions (действия), чтобы открыть панель Actions и впишите туде следующее:

CODE:

 
  
  submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
  function sendMessage(e:MouseEvent):void{
  
  }
  
  

Функция слушателя событий sendMessage() будет запущена во время клика на нашей кнопке. Теперь нам нужно опредилить, что будет происходить дальше.

Сбор текстовой информации

Для того, чтобы отправить наше сообщение PHP скрипту, нам нужно перевести его в правильный формат. Существует несколько форматов доступных для отправления данных через экземпляр URLVariables Class. Тот, что мы будем использовать здесь - URLLoader Class весьма легок в применении. Мы начнем с того, что создадим экземпляр данного класса:

CODE:

  
  submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
	function sendMessage(e:MouseEvent):void{
		var my_vars:URLVariables = new URLVariables();
	}
  
  

Теперь, когда, наши текстовые данные будут помещены в экземпляр URLVariables Class, нам нужно отправить эти переменные PHP скрипту на обработку, используя URLLoader Class.

Отправка данных PHP скрипту

Сообщение между нашими SWF и PHP файлами будет осуществляться через URLLoader Class и URLRequest Class классы. Нам нужно начать работать с URLRequest Class так как это тот формат, в который должен быть сконфигурирован URLLoader Class. Здесь мы должны определить URL нашего PHP скрипта:

CODE:

  
  submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
	function sendMessage(e:MouseEvent):void{
		var my_vars:URLVariables = new URLVariables();
		my_vars.senderName = name_txt.text;
		my_vars.senderEmail = email_txt.text;
		my_vars.senderMsg = message_txt.text; 

		var my_url:URLRequest = new URLRequest("mail.php");

	}
  
  

Также нам нужно прописать метод коммуникации с сервером. Для этого мы используем метод POST:

CODE:

  
  submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
	function sendMessage(e:MouseEvent):void{
		var my_vars:URLVariables = new URLVariables();
		my_vars.senderName = name_txt.text;
		my_vars.senderEmail = email_txt.text;
		my_vars.senderMsg = message_txt.text; 

		var my_url:URLRequest = new URLRequest("mail.php");
		my_url.method = URLRequestMethod.POST;

	}
  
  

Теперь подошла очередь поместить во внутрь наши переменные:

CODE:

  
 submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
	function sendMessage(e:MouseEvent):void{
		var my_vars:URLVariables = new URLVariables();
		my_vars.senderName = name_txt.text;
		my_vars.senderEmail = email_txt.text;
		my_vars.senderMsg = message_txt.text; 

		var my_url:URLRequest = new URLRequest("mail.php");
		my_url.method = URLRequestMethod.POST;
		my_url.data = my_vars;

	} 
  
  

Наш URLRequest теперь готов, и нам нужно создать экземпляр URLLoader Class:

CODE:

 
 submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
	function sendMessage(e:MouseEvent):void{
		var my_vars:URLVariables = new URLVariables();
		my_vars.senderName = name_txt.text;
		my_vars.senderEmail = email_txt.text;
		my_vars.senderMsg = message_txt.text; 

		var my_url:URLRequest = new URLRequest("mail.php");
		my_url.method = URLRequestMethod.POST;
		my_url.data = my_vars;

		var my_loader:URLLoader = new URLLoader();

	}
 
 

Теперь мы можем информировать данный экземпляр, что данные будут отправлены в формате URLVariables Class и затем загрузить наш URLRequest:

CODE:

 
 submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
	function sendMessage(e:MouseEvent):void{
		var my_vars:URLVariables = new URLVariables();
		my_vars.senderName = name_txt.text;
		my_vars.senderEmail = email_txt.text;
		my_vars.senderMsg = message_txt.text; 

		var my_url:URLRequest = new URLRequest("mail.php");
		my_url.method = URLRequestMethod.POST;
		my_url.data = my_vars;

		var my_loader:URLLoader = new URLLoader();
		my_loader.dataFormat = URLLoaderDataFormat.VARIABLES;
		my_loader.load(my_url);

	}
 
 

Ну, вот, почти и все! Теперь ваша форма обратной связи готова к использованию, если посетитель заполнит поля и кликнет на кнопке "Отправить", сообщение будет отослано, но прерд тем как закончить нашу с вами работу, нам нужно добавить сообщение для пользователя, что его послание успешно отправлено.

CODE:

  
  submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
	function sendMessage(e:MouseEvent):void{
		var my_vars:URLVariables = new URLVariables();
		my_vars.senderName = name_txt.text;
		my_vars.senderEmail = email_txt.text;
		my_vars.senderMsg = message_txt.text; 

		var my_url:URLRequest = new URLRequest("mail.php");
		my_url.method = URLRequestMethod.POST;
		my_url.data = my_vars;

		var my_loader:URLLoader = new URLLoader();
		my_loader.dataFormat = URLLoaderDataFormat.VARIABLES;
		my_loader.load(my_url);

		name_txt.text = "";
		email_txt.text = "";
		message_txt.text = "Message Sent";

	}
  
  

Ну, вот и все. Можете проверить ваш SWF, но вы должны понимать, что работать, то есть отправлять сообщения ваша форма может только, если она располагается на сервере, так как PHP - язык серверный.
Надеемся что данный урок будет вам полезен.

Скачать исходники к уроку можно здесь

Перевод с английского языка: Солнцев А.

Оригинал статьи на английском языке:   www.republicofcode.com

Комментарии ВКонтакте