|
Читайте также: |
Формы являются традиционным элементом интерактивности, позволяющим вести диалог с пользователем, передавать информацию удаленному серверу, где она будет специальным образом обработана.
Формы имеют множество применений:
◊ анкеты;
◊ бланки заказов;
◊ интерфейсы поисковых систем;
◊ гостевые книги;
◊ опросы;
◊ тесты и т.д.
Например, с помощью формы можно собрать информацию о посетителях сайта, их именах и адресах, а затем отправить эти сведения на сервер, где специализированное приложение обработает их и сохранит в файле электронной почты, базы данных или электронных таблиц.
Работа формы обеспечивается двумя компонентами Flash:
1. Основными элементами:
◊ текстовыми полями;
◊ кнопками и др.
2. Механизмом обрабатывающим переданную информацию. Последний реализуется либо сценарием на клиенте, либо приложением на сервере. Такие приложения называются CGI-скриптами (CGI -Common Gateways Interface (Общепринятый интерфейс шлюзов)). Формы передают информацию CGI-скриптам в виде пар: имя переменной=значение. Имена переменных должны задаваться латинскими буквами. Значения переменных воспринимаются обработчиком как строки, даже если они содержат цифры. Мы познакомимся только с приемами создания и отправки формы на сервер, не касаясь обработки полученной информации CGI-скриптом.
Задание. Создайте форму (анкету) для заполнения. Проект «Интерактивная регистрация»
Создадим простую форму-анкету для регистрации посетителя сайта с проверкой интерактивности пользователя.
Форма будет состоять из заголовка; статических текстовых полей с надписями, указывающими пользователю, какие сведения следует ввести; заполняемых текстовых полей для ввода информации; кнопки отправки на сервер введенных сведений; кнопки отправки письма по электронной почте; кнопки очистки формы.
1. Откройте Flash.
2. Создайте новый документ.
3. Сохраните файл в своей папке под именем Form.
4. Назовите слой информация.
5. Создайте надписи, указывающие посетителю сайта, какие сведения он должен ввести в заполняемые текстовые поля, т. е. в этом слое создайте столбец следующих статических полей:
◊ Регистрация пользователя – заголовок формы.
◊ Имя.
◊ Фамилия.
◊ Год рождения.
◊ E-mail.
6. Создайте заполняемые текстовые поля справа от соответствующих статических полей (InputText), кроме строки заголовка, ограничьте их рамкой.
7. Вызовите панель Properties (Свойства). В текстовом окне Instance, задайте имена соответствующим текстовым полям Input. Чтобы в именах удобно было ориентироваться, присвойте текстовым полям понятные русские имена, записанные латинскими буквами.
◊ Imya_txt
◊ Familya_txt
◊ GodRojdenya_txt
◊ email_txt
8. Для поля Imya_txt на панели Properties (Свойства) в поле ввода Maximum characters (Максимальное количество символов) введите 15. Таким образом, мы ограничим допустимое для ввода в это поле количество символов.
9. Для поля Familya_txt на панели Properties (Свойства) в поле ввода Maximum characters (Максимальное количество символов) введите 15. Таким образом, мы ограничим допустимое для ввода в это поле количество символов.
10. Для поля GodRojdenya_txt установите в поле ввода Maximum characters (Максимальное количество символов) введите 4. Таким образом, мы ограничим допустимое для ввода в это поле количество символов.
Так как год рождения состоит из цифр, то в файл окончательного фильма следует для данного текстового поля включить только информацию об оконтуривании цифр. Для этого на панели Properties нажмите кнопку Character (Символ). Установите переключатель на Specify Ranges (Специальные диапазоны) и в окне выберите Numerals[0..9], команду позволяющую вводить в окно Input, только цифры.
11. Для поля email_txt установите Maximum characters (Максимальное количество символов) – 20. Таким образом, мы ограничим допустимое для ввода в это поле количество символов.
12. Для поля url_txt установите Maximum characters (Максимальное количество символов) – 200. Таким образом, мы ограничим допустимое для ввода в это поле количество символов.
13. Создайте 3 кнопки:
◊ Регистрация
◊ Послать письмо
◊ Очистка
Воспользуйтесь встроенной библиотекой кнопок. Выберите Window – Other Panels – Common Libraries – Buttons.
В появившемся окне вы можете открыть любую папку и выбрать шаблон кнопки.
По желанию вы можете ее отредактировать.
14. Для кнопки, помеченной надписью Регистрация напишите скрипт, который позволял бы, после нажатия на эту кнопку, информацию, введенную в форму, отправлять на сервер.
Для этого:
◊ Выделите нужную кнопку.
◊ Вызовите панель Actions (F9).
◊ Нажмите кнопку (+).
◊ Выберите команду Global Functions (Основные функции) – Movie Clip Control – on.
◊ В появившемся подменю выберите команду release двойным щелчком.
◊ Далее выберите Global Functions (Основные функции) – Browser…– getURL.
Формат команды getURL:
getURL(адрес [, “окно” [, “метод”]])
Последние два параметра являются необязательными:
Окно – параметр, который позволяет указать в каком окне или фрейме следует открыть документ.
_self – то же окно, в котором находится фильм.
_blank – новое окно.
_parent – родительский фрейм по отношению к текущему.
_top – фрейм высшего уровня.
Метод – параметр, который позволяет выбрать способ передачи значений переменных формы серверу: Don't send (He посылать), Send using GET (Послать методом GET) или Send using POST (Послать методом POST). При установленном по умолчанию значении Don't send (He посылать) переменные не передаются, и оператор getURL используется для загрузки в окно браузера Web-документа или другого Интернет-ресурса.
При выборе метода Send using GET (Послать методом GET) все переменные формы и их значения присоединяются к адресу URL и становятся его частью. Причем передаются только те переменные, которые определены в том клипе или слое, в котором находится кнопка или кадр с оператором getURL. Так как длина URL ограничена, этот метод может использоваться только при малом количестве переменных.
При выборе метода Send using POST (Послать методом POST) переменные посылаются отдельным заголовком, поэтому он может использоваться для пересылки длинных строк.
15. Напишите
on (release) {getURL("http://triumf.ru","","GET");
}
16. Протестируйте. Если бы мы указали правильный URL-адрес программы, обрабатывающей форму, то данные формы были бы переданы по указанному адресу и CGI-скрипт выполнил бы их обработку.
17. Оператор getURL имеет множество применений. Например, чтобы посетитель сайта имел возможность отправить автору сайта сообщение по электронной почте, нужно прикрепить к кнопке код, в котором оператор getURL имеет аргумент mailto: с адресом автора.
Для кнопки Послать письмо напишите следующий скрипт.
on (release) {getURL("mailto: ivanov@postman.ru");
}
Когда посетитель сайта нажмет такую кнопку, на его машине будет запущена почтовая программа и откроется окно создания нового сообщения для отправки по указанному адресу.
18. Протестируйте работы соответствующей кнопки.
19. Напишите скрипт для очистки формы.
on (release) {
Imya_txt.text="";
Familya_txt.text="";
GodRojdenya_txt.text="";
email_txt.text="";
}
20. Напишите действие для первого кадра первой сцены:
stop();
21. Измените скрипт для кнопки Регистрация таким образом, чтобы при нажатии на эту кнопку проверялось, заполнены обязательные поля или нет, если нет, то отсылать к сцене 2 на другой кадр по метке, где будет выведено сообщение об этом. На этом же кадре поместить кнопку Попытайся снова. Иначе, если поля формы все заполнены, отсылать на сцену 3 по метке, где должно выводится сообщение о регистрации, в динамическом поле должно отображаться приветствие к конкретному человеку, и форма должна пересылаться на сервер.
22. Для этого создайте 2-ую сцену (Insert – Scene).
23. На этой сцене:
◊ В первом кадре установите метку Ошибка.
◊ Создайте статические текстовые поля со следующей информацией:
Вы заполнили не все обязательные поля.
Попытайтесь сделать это снова.
◊ Вставьте кнопку из встроенной библиотеки.
◊ Задайте для данной кнопки следующее действие:
on (release) {gotoAndStop("Scene 1",1);
}
24. Далее создайте 3-ую сцену (Insert – Scene).
25. На этой сцене:
◊ В первом кадре установите метку Регистрация.
◊ Создайте статические текстовые поля со следующей информацией:
Вы зарегистрированы.
Благодарим Вас.
◊ Вставьте кнопку из встроенной библиотеки.
◊ Задайте для данной кнопки следующее действие:
on (release) {gotoAndStop("Scene 1",1);
}
◊ Ниже создайте динамическое поле и в поле Var напишите privet.
◊ Вернитесь на сцену 1. Щелкните по 1 полю Input – Imya_txt. На панели Свойства этому же текстовому полю присвойте имя переменной в окне Var – x.
◊ Аналогичную операцию проделайте для 2 поля Input – Familya_txt. На панели Свойства этому же текстовому полю присвойте имя переменной в окне Var – y.
◊ Вернитесь на сцену 3.
◊ Выделите первый кадр с меткой Регистрация напишите скрипт:
privet=x+chr(32)+y;
Замечание:
Функция chr(Номер) – задает определенный символ согласно таблице кодов ASCII.
Здесь Номер это целое число, соответствующее определенному символу.
32 соответствует пробелу.
26. Перейдите на сцену 2.
27. Выделите кнопку Регистрация.
28. Измените скрипт следующим образом, чтобы проверялось, заполнены или не заполнены текстовые поля, и появлялась реакция на это.
on (release) {
if ((Imya_txt.text == null || Imya_txt.text == "") or (Familya_txt.text == null || Familya_txt.text == "")){
gotoAndStop("Scene 2","Ошибка");
}
else {
gotoAndStop("Scene 3","Регистрация");
getURL("http://triumph.ru","","GET");
}
}
Замечание:
Функция Имя текстового поля .text – указывает на текущий текст в текстовом поле.
Например, my_txt.text.
В написанном выше скрипте есть логический оператор | | (логическое Или), который вставляется в скрипт либо с клавиатуры, либо при помощи панели Action: (+) – Operators (Операторы) – Logical Operators – ||.
Логическое Или можно задавать при помощи слова or (или).
Другие логические операторы:
&& (логическое И), который вставляется в скрипт либо с клавиатуры, либо при помощи панели Action: (+) – Operators (Операторы) – Logical Operators – &&.
Логическое И можно задавать при помощи слова and (и).
! (логическое отрицание) вставляется в скрипт аналогично. Можно заменить слово not (не).
29. Сохраните файл.
30. Протестируйте регистрационную форму.
Дата добавления: 2015-07-26; просмотров: 64 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Копирование текстовых полей input and dynamic | | | Глава 1 |