|
FLASH: Элементы WEB интерфейса.
Зачастую сайт делается для всеобщего посещения, но некоторые функции хотелось бы дать возможность использовать только избранным.
Возможно, это будет специальное сообщение для своих друзей или ограничение доступа к некоторым страницам.
Дизайн странички.
Для примера не будем придумывать ничего навороченного – сляпаем нечто типовое, дабы не выделяться.
Создадим фон в виде зала для показа модной одежды. На заднике укажем автора моделей и год, в данном случае это Пако Гробани 2008 г. На подиум поставим героя нашего сайта. Декорируем стену слева символом скандального гламура в виде рисунка Пэрис Хилтон и фон готов.
Сверху проекта, нарисуем прямоугольник более темного цвета, для выделения названия сайта, меню и формы входа на сайт.
В верхнем левом углу я расположил логитип в виде куба с надписью Glamur и тором вращающимся вокруг куба. Вы можете использовать любой свой рисунок или анимацию.
Справа я расположил надпись – Сайт гламурного Саши - название сайта. Обратите внимание что тип текста должен быть статическим. Для отделения названия от фона я добавил тексту эффект отбрасывания тени.
Форма аутентификации для сайта.
Функция реализованная данной формой очень проста – надо проверить логин и пароль и в соответствии с правилами написать пользователю секретное сообщение. Если бы сайт использовал хостинг с PHP, то проверку делал бы скрипт расположенный на сервере. А если хостинг обычный – народовский?
Вот в этой ситуации нам и поможет FLASH.
Не забудьте нажать кнопку Show border around text, чтобы отображать рамку вокруг текстового поля.
Введите в проект две области для ввода логина и пароля. Назначьте переменной var имена login для поля Логин и pass для поля Пароль.
Если поставить Auto kern то то что вводится в поле ввода обрамляется в html теги
Например вводим логин – Вася будет отображаться как:
<TEXTFORMAT LEADING="2"> <P ALIGN="LEFT"> <FONT FACE="Arial Cyr" SIZE="16" COLOR="#000000" LETTERSPACING="0" KERNING="0">Вася</FONT></P></TEXTFORMAT>
Справа от полей ввода логина и пароля нарисуем кнопку.
Я нарисовал обычный треугольник и покрасил его для разных полей в разные цвета
Up – так выглядит кнопка по умолчанию
Over – цвет ощутимо светлеет при попадание курсора на кнопку
Down – и становится красной при нажатии
Hit – закрашенная область ограничивает область воздействия на кнопку. Цвет в этой области значения не имеет.
Выделите кнопку на проекте и назначьте ей следующий скрипт.
on(release) {
// для отображения русских букв в кодировке Windows, иначе текст писать в UTF-8
System.useCodepage = true;
//Создаем переменную
myLoadVars = new LoadVars();
//Проверка загрузки данных
myLoadVars.onLoad = function() {
//Если загрузка данных прошла то выполняем код
//Проверка Логина и пароля введенных пользователем с логином и паролем из текстового файла.
if (_root.login == myLoadVars.log and _root.pass == myLoadVars.password)
{
//Назначаем переменной динамического текста сообщение для пользователя
memo = myLoadVars.MemoText;
}
else
{
//В противном случае сообщение по умолчанию
|
|
memo = myLoadVars.memoAll;
}
}
//Задаем имя текстового файла откуда возьмем данные
myLoadVars.load("passWin.txt");
}
|
Ниже создадим динамическое поле текста.
Назначим переменной var имя memo.
Поскольку Auto kern не нажата, на слой ниже надо создать New Sinbol – Graphik в виде квадрата.
Сделайте его полупрозрачным.
И назначьте фильтр для эффекта вдавливания.
Осталось немного – создать текстовый файл с данными.
Данные должны быть написаны в определенном формате.
Имя переменной=Значение переменной& Имя переменной=Значение переменной&
И так далее.
& - знак разделения переменных.
Поскольку в скрипте обработки нажатия мы написали - System.useCodepage = true; мы можем использовать кодировку windows. Если не писать эту строку, то кодировка должна быть в формате UTF-8.
Согласно этому текстовому файлу логин – Вася, пароль – 123.
Введите эти данные и посмотрите сообщение.
Конечно, данные не зашифрованы и продвинутый пользователь может скачать текстовый файл и прочитать всю необходимую информацию. Но для этого он как минимум должен знать его имя.
Но над методом шифрования записей Ии их дешифровки вы займетесь на досуге.
Также вы можете доработать скрипт, чтобы можно было определять более чем одного пользователя.
Блок отображения баннеров.
Функция обычно востребованная на сайтах, у админов которых очень много друзей, но совершенно нет места для показа баннеров. На FLASH можно написать блок отображающий несколько баннеров из заданного списка, динамически меняющийся при отображении страниц. Единственное требование, чтобы баннеры имели одинаковый размер.
Эту функцию мы решим с помощью двух слоев. На одном слое создадим клип в который будем загружать картинки баннеров, а на втором – выше первого, создадим кнопку, нажимая по которой будем переходить по ссылке.
Для отображения баннера достаточно создать пустой клип, но для удобства позиционирования создайте прямоугольник по размеру баннера 88х31 пиксель с привязкой к центру клипа в верхнем левом углу. Именно так будут загружаться рисунки баннеров. Чтобы код корректно работал его надо расположить на слое баннера, а не привязывать к клипу.
Баннер назовите ban.
Теперь собственно скрипт управления.
baner = new Array ("ban1.gif", "ban2.gif", "ban3.jpg", "ban4.gif", "ban5.jpg", "ban6.gif", "ban7.gif", "ban8.gif" );
banerLink = new Array ("1.htm", "2.htm", "3.htm", "4.htm", "5.htm", "6.htm", "7.htm", "8.htm" );
function randomBaner () {
randomNumber = random (baner.length);
loadMovie (baner[randomNumber], "_root.ban");
}
randomBaner();
//Повтор действия в милисекундах - 1000 = 1 сек
setInterval(randomBaner, 10000); |
Сначала мы формируем массив данных. Переменная массива baner содержит названия картинок клипов. Имейте в виду, что картинки должны находиться в одной директории с флешь анимацией. Еще интересен тот факт, что загрузка анимированных Gif будет производиться только по первому кадру, без анимации.
В переменной массива banerLink хранятся ссылки, на которые будет отправлять клик на баннер. Будьте внимательны,
|
не ошибитесь со ссылками.
Ниже мы создаем функцию randomBaner() которая подсчитывает количество элементов массива и случайным образом выбирает число в диапазоне от нуля до максимального числа баннеров.
Первый вызов функции randomBaner() мы делаем вручную. А каждый последовательный через заданный интервал setInterval(randomBaner, 10000), интервал задан в миллисекундах.
Теперь каждые 10 секунд на главной странице сайте меняется баннер и соответствующая ссылка.
Чтобы нажатие на баннер срабатывало необходимо создать кнопку. Кнопка будет невидима и расположена над слоем отображения баннера. Соответственно у нее будет стоять ключевой кадр на области Hit – где будет залитый прямоугольник по форме баннера.
Назначим кнопке следующий скрипт:
on (release) {
dynamicURL= banerLink[randomNumber];
getURL( dynamicURL );
}
|
Кнопка срабатывает по отжатию левой кнопки мыши над активной областью кнопки. Единственной особенностью является преобразование элемента массива в переменную dynamicURL= banerLink[randomNumber]. Обратите внимание, что переменные полученные в слое баннера доступны в слое кнопки. Далее следует переход на заданную страницу.
Меню сайта.
Даже самый простой проект содержит несколько страниц.
Добавим в наш учебный проект еще одну страницу, чтобы на ее примере понять принципы создания меню.
Нам нужна кнопка, на которой мы будем писать меню.
Без особых изысков нарисуем, нечто напоминающее капсулу в профиль и добавим пятиконечную звезду слева. Кнопки расположим на одном слое, а надписи на кнопках на слое выше.
Создание кнопки мы уже рассмотрели выше, отличия только в рисунке.
Расположим в линию пять кнопок. Надпишем первую и пятую кнопки.
Для первого кадра назначаем скрипт: stop();
Чтобы меню не листалось с первого до последнего кадра.
Каждой кнопке назначим похожий скритп с одним отличием в номере страниц.
on (press) {
gotoAndStop(5);
} |
Смысл назначенного скрипта – при нажатии перейти на страницу 5 и остановиться. Меняя номер страницы в скобках, мы задаем переход на другую страницу. Для первой кнопки это будет первый кадр, для второй кнопки - второй кадр, и так далее.
Создайте слой скрипт и задайте ключевой кадр для каждого из пяти кадров.
Задайте для каждого кадра скрипт со значением:
memo="Кадр 4";
Это тест для переменной, который будет отображаться в главном поле сайта. Естественно, вы можете написать свой текст.
Форма отправки писем
Форма отправки писем проста. Цель состоит в том, чтобы сформировать поля письма и переправить их в почтовый клиент посетителя. Проверку на правильность заполнения в этой простой форме мы не делаем.
Чтобы сформировать нужные поля создайте следующие статические надписи
Введите e-mail - назначьте в свойствах поля ввода var – email
Введите ваше имя - назначьте в свойствах поля ввода var – name
Тема сообщения - назначьте в свойствах поля ввода var – topic
Для сообщения создайте многострочную переменную Input Text и назначьте в свойствах поля ввода var – message.
Внизу формы напишите – Отправить и добавьте кнопку созданную ранее.
Добавьте кнопки эффект небольшого наклона.
Кнопке отправки назначаем следующий скрипт:
on (press) {
getURL("mailto:"+name+"<"+email+ ">"+"?subject="+topic+"&body="+message);
}
|
Выполните тестовую анимацию. Заполните все поля и нажмите на зеленый треугольник. После этого откроется ваша почтовая программа и если у вас несколько почтовых ящиков, появится поле выбора ящика. Выбрав ящик вы увидите готовое письмо с заполненными полями.
vassago
|
