В этом кратком совете я покажу вам, как создать контактную форму, используя PHP и ActionScript 3. Мы узнаем, как передавать переменные из Flash в PHP и оповещать владельца, отправляя либо электронное письмо, либо SMS-сообщение.
Шаг 1: Настройка документа
Первое, что нужно сделать, это загрузить исходные файлы для этого урока. Так как этот урок — Быстрый совет, я пропущу шаги макета. Как только вы загрузите файлы, откройте файл contactForm.fla.
Формат SWF выглядит следующим образом:
Шаг 2: Класс документа
Создайте новый файл «ActionScript» и сохраните его в той же папке, что и «contactForm.fla». Дайте файлу имя ‘contatForm.as.’ Затем свяжите файл Flash и файл ActionScript вместе на панели «Свойства». Для более подробного ознакомления с настройкой класса Document ознакомьтесь с этим кратким руководством .
Шаг 3: Импорт
Вот операторы импорта, которые мы будем использовать для этого файла. Также мы создадим две глобальные переменные. Один из них — использовать для вложения файла, а другой — отслеживать, будем ли мы использовать этот файл или нет.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
package {
import fl.controls.ProgressBarMode;
import fl.controls.RadioButton;
import fl.controls.RadioButtonGroup;
import fl.controls.TextInput;
import fl.core.UIComponent;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.FocusEvent;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.external.ExternalInterface;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLVariables;
import flash.text.TextField;
public class contactForm extends Sprite
{
private var file:FileReference;
private var attachment:Boolean;
public function contactForm()
{
init();
}
}
}
|
Шаг 4: Начинаем кодировать
Первая функция, которую мы вызываем, это init() . Внутри функции мы устанавливаем метки для наших текстовых полей. Также мы создаем массив провайдеров сотовых телефонов. Так как я нахожусь в Соединенных Штатах, я использую только американских провайдеров. Прочтите эту статью в Википедии, которая поможет вам с поставщиками сотовых телефонов в вашей стране.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
private function init():void
{
var labelArray:Array = [[nameLabel, «From name:»], [subjectLabel, «Subject:»], [messageLabel, «Message:»], [emailLabel, «From email:»], [toLabel, «To name:»], [addyLabel, «To email:»]];
var textArray:Array = [nameText, subjectText, messageText, emailText, toText, addyText];
var len:int = labelArray.length;
attachment = false;
pBar.visible = false;
pBar.minimum = 0;
pBar.maximum = 100;
pBar.mode = ProgressBarMode.MANUAL;
combo.visible = false;
for(var i:int = 0; i<len; i++)
{
labelArray[i][0].dyText.text = labelArray[i][1];
labelArray[i][0].addEventListener(MouseEvent.CLICK, onLabel);
}
len = textArray.length;
for(i = 0; i<len; i++)
{
textArray[i].addEventListener(MouseEvent.ROLL_OVER, onText);
textArray[i].addEventListener(MouseEvent.ROLL_OUT, onText);
}
combo.addItem({label:»— Select a provider —«, data:»»});
var providers:Array = [[«Alltel», «message.alltel.com»], [«AT&T», «txt.att.net»], [«Boost Mobile», «myboostmobile.com»], [«Cricket Wireless», «sms.mycricket.com»], [«Nextel», «messaging.nextel.com»], [«Sprint», «messaging.sprintpcs.com»], [«T-Mobile», «tmomail.net»], [«Verizon», «vtext.com»], [«Virgin Mobile USA», «vmobl.com»]];
len = providers.length;
for(i = 0; i<len; i++)
{
combo.addItem({label:providers[i][0], data:providers[i][1]});
}
var group:RadioButtonGroup = new RadioButtonGroup(«ContactGroup»);
group.addEventListener(Event.CHANGE, onChange);
handleOffset(true);
sender.addEventListener(MouseEvent.CLICK, onClick);
attach.addEventListener(MouseEvent.CLICK, onAttach);
handleAddy();
}
|
Мы также настроили переключатели.
Шаг 5: Обработка вложения
Первое, о чем мы будем беспокоиться, это обработка приложения. Поскольку я использую Flash CS3, мы сделаем прикрепление по старинке. Когда нажата кнопка «присоединить», мы FileReference созданную нами переменную FileReference . Важно отметить, что переменная FileReference должна быть глобальной переменной (т.е. не специфичной только для одной функции), чтобы события запускались правильно.
Когда пользователь выберет файл для загрузки, мы сделаем индикатор выполнения видимым и послушаем события «progress» и «complete». Когда происходит событие «complete», мы отключаем кнопку «attach», устанавливаем для переменной attachment значение true и скрываем индикатор выполнения.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
private function onAttach(event:MouseEvent):void
{
file = new FileReference();
file.addEventListener(Event.SELECT, onSelect);
file.browse([new FileFilter(«Images (*.jpg, *.jpeg, *.gif, *.png)», «*.jpg;*.jpeg;*.gif;*.png»)]);
}
private function onSelect(event:Event):void
{
pBar.visible = true;
file.addEventListener(ProgressEvent.PROGRESS, onProgress);
file.addEventListener(Event.COMPLETE, onUpload);
file.upload(new URLRequest(«upload.php»), «file»);
}
private function onProgress(event:ProgressEvent):void
{
pBar.setProgress(int((event.bytesLoaded/event.bytesTotal) * 100), 100);
}
private function onUpload(event:Event):void
{
pBar.visible = false;
attach.enabled = false;
attachment = true;
}
|
Шаг 6: Загрузить документ
Переключение на PHP. Сначала создайте новый документ PHP и сохраните его как «upload.php». Теперь создайте каталог на вашем веб-сервере с именем «temp». Это будет папка, которую мы используем для хранения загруженного файла. Мы назначим это место переменной PHP под названием «папка». Затем мы используем суперглобальную переменную ‘$ _FILES’, чтобы получить имя загруженного файла. Затем мы создаем переменную, которая хранит временное имя файла, который мы только что загрузили. Наконец, мы перемещаем файл в наш каталог ‘temp’. Вы можете найти большое руководство по загрузке файлов с помощью PHP через Nettuts + .
|
1
2
3
4
5
6
7
8
|
<?php
$folder = ‘temp/’;
$file = $_FILES[‘file’][‘name’];
$temp = $_FILES[‘file’][‘tmp_name’];
move_uploaded_file($temp, $folder . $file);
?>
|
Шаг 7: Документ сообщения
Создайте новый PHP-документ и сохраните его как «message.php». В этом файле мы получим переменные из Flash. Первое, что мы делаем, это используем суперглобальную переменную $ _POST для установки всех полей электронной почты, таких как «to» и «from». Затем мы устанавливаем нашу переменную ‘headers’. В PHP мы используем ‘.’ вместо ‘+’ для объединения. В нашей переменной ‘headers’ вы заметите ‘. =’, Который работает так же, как ‘+ =’ в ActionScript. После каждого объединения мы добавляем две строки возврата. Это важно, и без этого наша электронная почта может не отправиться.
Наконец, после того, как все наши заголовки и поля готовы к работе, мы вызываем функцию «mail». Если письмо успешно, мы проверяем, был ли файл, связанный с письмом. Если переменная ‘file’ установлена, то мы просто удаляем этот файл с нашего сервера, используя функцию ‘unlink’.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<?php
$bool = $_POST[‘bool’];
$to = $_POST[‘to’] .
$address = $_POST[’email’];
$message = $_POST[‘message’];
$subject = $_POST[‘subject’];
$name = $_POST[‘name’];
$from = $_POST[‘from’];
$headers = «From: $from <$address>\r\n»;
$headers .= «Return-Path: $address\r\n»;
$headers .= «Reply-To: $address\r\n»;
$headers .= «X-Mailer: PHP » .
$headers .= «MIME-Version: 1.0\r\n»;
//FILE ATTACHMENT GOES HERE
$headers .= «Content-type: text/plain; charset=utf-8\r\n»;
if(mail($to, $subject, $message, $headers))
{
if(isset($file))
{
unlink($file);
}
echo 1;
}
else
{
echo 0;
}
?>
|
Шаг 8: Добавление вложения
Вот код, который мы используем для отправки вложения. Если вы хотите включить этот тип функциональности в свое приложение, просто вставьте этот код там, где написано: «НАСТРОЙКА ФАЙЛА ЗДЕСЬ». Первое, что мы делаем, это проверяем, была ли опубликована переменная ‘file’. Также мы проверяем, является ли переменная «bool» значением «true». Это проверит, чтобы убедиться, что пользователь не пытается отправить вложение в виде текстового сообщения. Хотя вы можете отправлять файлы в виде вложений на мобильные телефоны, максимальные размеры составляют всего около 640×480. Это потребовало бы некоторой дополнительной логики для изменения размера изображения и выходит за рамки этого Быстрого Подсказки. Не стесняйтесь попробовать это сами!
Вернемся к пути, мы создадим переменную ‘file’, которая приведет к расположению файла, который мы загрузили. Кроме того, после некоторой простой замены строки мы проверяем расширение файла. Наконец, мы изменяем нашу переменную ‘headers’, чтобы включить файл, а также всю информацию, которая необходима для его прикрепления.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
if(isset($_POST[‘file’]) && $bool === ‘true’)
{
$file = ‘temp/’ .
$ext = $_POST[‘ext’];
$name = str_replace($ext, », $_POST[‘file’]);
$ext = str_replace(‘.’, », $ext);
$attachment = chunk_split(base64_encode(file_get_contents($file)));
switch($ext)
{
case ‘jpg’ :
case ‘jpeg’ :
$ext = ‘image/jpeg’;
break;
case ‘gif’ :
$ext = ‘image/gif’;
break;
case ‘png’ :
$ext = ‘image/png’;
break;
}
$mime_boundary = md5(time());
$headers .= «Content-Type: multipart/mixed; boundary=\»$mime_boundary\»\r\n»;
$headers .= «—$mime_boundary\r\n»;
$headers .= «Content-Type: $ext; name=\»» . $name . «\»\r\n»;
$headers .= «Content-Transfer-Encoding: base64\r\n»;
$headers .= «Content-Disposition: attachment; filename=\»» . $_POST[‘file’] . «\»\r\n»;
$headers .= «\n»;
$headers .= $attachment .
$headers .= «—$mime_boundary\r\n»;
}
|
Шаг 9: Вернуться во Flash
Когда нажата кнопка «отправитель», мы вызываем функцию «onClick ()». Мы выполняем некоторую проверку, чтобы увидеть, является ли это электронное письмо или текстовое сообщение, которое пользователь пытается отправить. Если это текстовое сообщение, мы немного отформатируем номер телефона, проверим, выбрал ли пользователь провайдера, и убедимся, что номер действителен. После того, как мы проверили всю информацию пользователя, мы загрузим документ ‘message.php’, отправим в него все наши переменные и прослушаем событие ‘complete’.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
private function onClick(event:MouseEvent):void
{
var textArray:Array = [nameText, messageText, subjectText];
var len:int = textArray.length;
if(!emailRadio.selected)
{
addyText.text = addyText.text.replace(/[()-\s\.\+]/g, «»);
}
for(var i:int = 0; i<len; i++)
{
if(!handleString(textArray[i].text))
{
var errorMessage:String = «Please enter a » + textArray[i].name.replace(«Text», «»);
ExternalInterface.call(«alert», errorMessage);
return;
}
}
if(emailRadio.selected)
{
if(!handleEmail(emailText.text))
{
ExternalInterface.call(«alert», «Please enter a valid email address»);
return;
}
}
else
{
if(combo.selectedItem.data === «»)
{
ExternalInterface.call(«alert», «Please select a provider»);
return;
}
else if(!handleNumber(addyText.text))
{
ExternalInterface.call(«alert», «Please select a valid number»);
return;
}
}
var url:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest(«message.php»);
var vars:URLVariables = new URLVariables();
req.method = URLRequestMethod.POST;
if(attachment)
{
vars.file = file.name;
vars.ext = file.type;
}
vars.bool = emailRadio.selected;
vars.subject = subjectText.text;
vars.message = messageText.text;
vars.email = emailText.text;
vars.from = nameText.text;
vars.to = toText.text;
if(emailRadio.selected)
{
vars.toAddy = addyText.text;
}
else
{
vars.toAddy = addyText.text + «@» + combo.selectedItem.data;
}
req.data = vars;
url.addEventListener(Event.COMPLETE, onComplete);
url.load(req);
}
|
Шаг 10: обработчики событий
Когда вызывается событие complete, мы просто анализируем целое число, которое нам отправляет PHP. Наряду с событием complete ниже приведены остальные функции обработчика событий, используемые в этом проекте.
Функция onChange переключает видимость поля со списком, а также вызывает функцию handleAddy. Функция «onText» установит фокус текстового поля при нажатии на метку — как в HTML. Наконец, функция ‘onLabel’ будет обрабатывать выделение текстового поля, когда мышь перемещается над ним.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
private function onComplete(event:Event):void
{
var num:int = parseInt(event.target.data);
if(num)
{
ExternalInterface.call(«alert», «Message was sent»);
}
else
{
ExternalInterface.call(«alert», «There was an error»);
}
}
private function onChange(event:Event):void
{
switch(event.target.selection)
{
case emailRadio :
combo.visible = false;
attach.visible = true;
addyLabel.dyText.text = «To email:»;
handleOffset(false);
break;
case textRadio :
attachment = false;
combo.visible = true;
attach.visible = false;
addyLabel.dyText.text = «To number:»;
handleOffset(true);
break;
}
handleAddy();
}
private function onText(event:MouseEvent):void
{
switch(event.type)
{
case MouseEvent.ROLL_OVER :
event.target.drawFocus(true);
break;
case MouseEvent.ROLL_OUT :
event.target.drawFocus(false);
break;
}
}
private function onLabel(event:MouseEvent):void
{
var labelName:String = event.currentTarget.name.replace(«Label», «Text»);
var tf:UIComponent;
if(labelName === «messageText»)
{
tf = TextArea(this.getChildByName(labelName));
}
else
{
tf = TextInput(this.getChildByName(labelName));
}
switch(event.type)
{
case MouseEvent.ROLL_OVER :
tf.drawFocus(true);
break;
case MouseEvent.ROLL_OUT :
tf.drawFocus(false);
break;
case MouseEvent.CLICK :
tf.setFocus();
break;
}
}
private function onFocus(event:FocusEvent):void
{
event.target.text = «»;
}
|
Шаг 11: остальные функции
Это последние функции, которые будут обрабатывать проверку текстовых полей, чтобы убедиться, что они не пусты, а также обрабатывать смещение, вызванное выбором переключателя.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
private function handleOffset(bool:Boolean):void
{
var ch:Number = combo.height + 10;
switch(bool)
{
case true :
nameLabel.y += ch;
subjectLabel.y += ch;
messageText.y += ch;
messageLabel.y += ch;
subjectText.y += ch;
sender.y += ch;
nameText.y += ch;
rule.y += ch;
emailLabel.y += ch;
emailText.y += ch;
rule2.y += ch;
break;
case false :
messageText.y -= ch;
messageLabel.y -= ch;
subjectText.y -= ch;
subjectLabel.y -= ch;
sender.y -= ch;
nameLabel.y -= ch;
nameText.y -= ch;
rule.y -= ch;
emailLabel.y -= ch;
emailText.y -= ch;
rule2.y -= ch;
break;
}
}
private function handleString(string:String):Boolean
{
if(string.toLowerCase().search(/[a-z0-9]/g) != -1)
{
return true;
}
else
{
return false;
}
}
private function handleEmail(string:String):Boolean
{
//this RegExp is used to check whether the user entered a valid email address
var pattern:RegExp = /[a-z0-9!#$%&’*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&’*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
if(pattern.exec(string) != null)
{
return true;
}
else
{
return false;
}
}
private function handleNumber(string:String):Boolean
{
if(string.search(/[0-9]/) === -1)
{
return false;
}
else
{
//you may need to change this logic depending on the length of
//mobile phone numbers in your country
if(string.length < 11)
{
return false;
}
else
{
return true;
}
}
return false;
}
private function handleAddy():void
{
addyText.addEventListener(FocusEvent.FOCUS_IN, onFocus);
if(!emailRadio.selected)
{
addyLabel.text = «To email:»;
addyText.text = «»;
}
else
{
addyLabel.text = «To number:»;
addyText.text = «Starting with country code»;
}
}
|
Вывод
В этом кратком совете вы узнали, как использовать Flash и AS3 для отправки не только простых текстовых переменных, но и изображений — и не только по электронной почте, но и с помощью текстового сообщения SMS. Эти методы могут быть использованы различными способами. Продолжайте экспериментировать и не забудьте подписаться на канал Tuts + . Спасибо за прочтение!