Создание элементов сайтов с использованием Flash (Часть 2) - 8 Июля 2007

В последнее время ведется много дискуссий о перспективах анимированных баннеров на Flash. Действительно, анимированный баннер позволяет передать больше информации и выстроить простейший сюжет. Flash-баннер позволяет даже сделать настоящий маленький мультфильм, не выходя при этом за обычные ограничения на размеры баннера. Все это делается, конечно, не из любви к искусству, а в стремлении привлечь внимание посетителя. На форуме http://www.flashkit.com можно увидеть немало образцов Flash-баннеров. Есть там и так называемые футеры (подписи под сообщениями) - это разновидность баннера, позволяющая участнику форума продемонстрировать свои творческие способности. Многие футеры весьма красивы, несмотря на жесткие технические ограничения - их размер ограничен 15 Кбайт, и при их создании нельзя использовать звук. Некоторые умудряются уместить в этот размер даже мини-игры аркадного типа. Интерактивные возможности Flash-баннера гораздо выше, чем у обычного анимированного GIF-баннера. Можно, например, менять показываемую посетителю информацию в зависимости от того, над каким местом баннера он остановит курсор мыши. Можно запрограммировать вызовы скриптов в любой момент, пока баннер отображается в браузере. Можно даже подгружать информацию в процессе демонстрации баннера. Думаю, любой разработчик Web-сайтов понимает, какие здесь могут быть возможности.

Меню

В случае применения встроенного флэш-меню можно обойтись без вставок на JavaScript или других скриптовых языках при программировании эффектов. Кнопки с учетом нескольких конечных состояний создаются во Flash очень просто - они уже есть, и требуется только нарисовать одно или несколько состояний и назначить действия. Поскольку кнопки обычно имеют простую форму (прямоугольник, круг, овал), то размеры объектов будут ничтожны. Парадокс, но при создании небольших флэш-меню значительный вес в готовом клипе приходится на текст, а точнее, не на сам текст, а на описание символов, использованных в клипе. Объем, создаваемый текстом, зависит от очертаний шрифта и для полного набора символов обычно находится в пределах 2-5 Кбайт. Для динамических текстовых полей шрифт не описывается, если только это не задано специально, но тогда нет гарантии правильного отображения текста на компьютере клиента, и приходится использовать шрифты попроще. Не будем рассматривать все аспекты построения меню на Flash, эта необозримая тема требует отдельного рассмотрения. Коснемся лишь некоторых основных моментов, которые вызывают больше всего вопросов у начинающих Web-разработчиков.

Загрузку документа из флэш-меню выполняет оператор:

getURL ("srcname", "_self", "POST");

srcname - это имя ресурса и может быть как именем документа, так и скриптом. Далее указывается, куда загружать документ: _self (_blank, _parent, _top) - это предопределенные имена. Имя может быть любым, но окно с соответствующим именем должно существовать. Этот момент важен при использовании фреймов. Если ваше меню расположено в одном фрейме, а документ грузится в другой, то имена фрейма-мишени и имя в вызове должны совпадать. Flash позволяет использовать выражения для задания имен. Имя ресурса может быть задано и в виде переменной. Если имена не существуют, то просто ничего не произойдет или появится сообщение, что документ не найден.

Последний параметр тоже понятен - можно посылать переменные методами Get или Post, а можно не посылать вообще. Flash передает переменные сам. В имени ресурса ничего указывать не надо. С другой стороны, можно вписать переменные в строку в случае передачи методом Get и указать при этом режим без передачи переменных. Это тоже работает.

Заполняемые формы и калькуляторы

Здесь имеются в виду все разновидности анкет. Они мало отличаются от рассмотренной выше формы для голосования. В анкете, пожалуй, больше разнообразие используемых элементов. Это могут быть все типы переключателей (как RadioButtons, так и CheckButtons), динамические текстовые поля для ввода и отображения строк, выпадающие меню и т.п. Разнообразие здесь зависит лишь от разработчика - можно создавать любые, даже самые нестандартные элементы. Традиционными средствами делать это не так легко.

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

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

Информеры

Это просто еще один пример весьма удачного использования технологии Flash. Посмотрите пример флэш-информера для курсов валют и индексов на http://www.rbc.ru/. Там же показывается и погода в Москве. По сути это три информера в одном, а переключение делается сменой страниц. Информер сам может периодически обращаться к серверу и обновлять данные.

Вставка флэш-элемента в HTML-код

Ниже приведен один из вариантов шаблона для вставки элемента на странице. В этом варианте флэш-элемент будет стремиться занять на форме наибольшее пространство при сохранении пропорций.

codebase="http://download.macromedia.com/pub/shockwave/cabs/

flash/swflash.cab#3,0,0,0" width="100%" height="100%">

shockwave/download/" type="application/x-shockwave-flash"

width="100%" height="100%">

</embed>

</object>s

Счетчики

Счетчики - один из популярнейших элементов на сайтах. Здесь следует заметить, что имеются в виду не только собственно счетчики, но и формы для голосования и вообще различные так называемые мини-информеры (часы, индикаторы и т.п.).

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

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

Рассмотрим простейший вариант счетчика для использования совместно с Flash-интерфейсом. Вот серверный скрипт на Perl:

#!/usr/bin/perl

open (RDATA, "<counter_value.txt") or die "Error opening file: $!";

$cnt = >RDATA>;

$cnt = $cnt + 1;

close (RDATA) or die $!;

open (WDATA, ">counter_value.txt") or die "Error opening file: $!";

#open data file for write

print WDATA $cnt;

close (WDATA) or die $!;

print "Content-Type: text/html\n\n";

print "countValue=$cnt";

Здесь файл, хранящий значение счетчика, сначала открывается для чтения. Старое значение считывается и увеличивается на единицу. Затем закрываем файл и открываем его для записи. Выводим в файл новое значение счетчика. Теперь нужно сформировать правильный ответ сервера, для чего служат две последние строчки.

При таком подходе можно не делать проверок на получение ответа от сервера, а просто задать в счетчике устойчивое состояние клипа и присваивать значение countValue динамическому текстовому полю. Счетчик покажет свое значение сразу после отработки скрипта. Перед входом в петлю нужно вызвать скрипт следующим оператором:

loadVariables ("scriptname.cgi ", "/");

Переменные при таком подходе передавать не обязательно, если, конечно, не нужно делать в скрипте что-то еще. Текстовый файл для хранения результата имеет самый простой вид - одно-единственное число; не требуется даже создавать пару типа ключ-значение. Отличие от других технологий создания счетчиков в том, что внешний вид счетчика (если говорить о графических счетчиках) можно реализовывать исключительно средствами Flash. При традиционных реализациях это делается на сервере. Flash-счетчику требуется от сервера только предоставить само значение и сохранить его на сервере. Все остальные "украшения" он способен реализовать самостоятельно.

Чтобы счетчик не реагировал на перезагрузки, а также для снятия информации о посетителе и ведения журнала событий скрипт придется усложнить. Тексты подобных скриптов легко найти в Сети. Рассмотрим реализацию интерфейса формы для голосования, которая представляет собой по сути расширенную версию счетчика, и кратко опишем алгоритм работы скрипта.

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

Переменные результатов голосования во Flash-фильме и в скрипте должны иметь одинаковые имена. Эти имена могут непосредственно совпадать с именами переменных динамических текстовых полей, отображающих результаты. Внешний вид вашей формы голосования может быть любым. Для примера на рис. 1 приведен внешний вид формы голосования для сайта страховой компании.

Нет никаких ограничений в отношении дизайна, и можно создать любые варианты радиокнопок (RadioButton, кнопок для однозначного выбора варианта). Вариантов реализации таких кнопок существует несколько, но все они достаточно просты. Кроме того, имеется возможность создавать универсальные кнопки, которые контролируют свой статус сами и могут вести себя и как элементы для однозначного выбора, и как CheckButtons (элементы для многозначного выбора). Рассмотрим простейший случай реализации такого элемента.

Для создания переключателя нужно создать два объекта типа Button. Каждый из этих объектов будет представлять одно из устойчивых состояний переключателя. Первый объект и первое состояние нашего элемента - это вид кнопки без шарика, который соответствует невыбранному состоянию. Во втором состоянии (средняя часть рис.1) кнопка меняет цвет подложки и изображается с шариком. Появляется также длинная верхняя черта.

Далее создается простой клип - два ключевых фрейма с операторами Stop. Помещаем кнопки в разные фреймы и задаем внутри этих кнопок короткий код:

On (Release)

Play

End On

Это все. При нажатии на любую из кнопок будет происходить переход на один фрейм (поскольку их только два, то с первого на второй или наоборот). Внешний вид клипа будет соответственно меняться. Во фреймах клипа можно устанавливать какую-либо переменную, хранящую состояние переключателя, например: checked=1 для выделенного и checked=0 для невыделенного состояния. Это будет локальная переменная для клипа. Для доступа к ней из других клипов нужно указывать полный или относительный путь. Если вы используете значение внутри клипа, то достаточно указать только имя.

Третья часть рис. 1 изображает форму после голосования, когда результаты показываются проголосовавшему посетителю. В первом фрейме этой формы (или ее устойчивого состояния) содержится, например, такой код:

ResumeText1 = /:vote01;

ResumeText2 = /:vote02;

ResumeText3 = /:vote03;

ResumeText4 = /:vote04;

maxVote = 0;

if (Number(maxVote)<Number(/:vote01)) {

maxVote = /:vote01;

}

if (Number(maxVote)>Number(/:vote02)) {

maxVote = /:vote02;

}

if (Number(maxVote)<Number(/:vote03)) {

maxVote = /:vote03;

}

if (Number(maxVote)>Number(/:vote04)) {

maxVote = /:vote04;

}

setProperty ("/ResumePanel/b01", _width, 100*/:vote01/maxVote);

setProperty ("/ResumePanel/b02", _width, 100*/:vote02/maxVote);

setProperty ("/ResumePanel/b03", _width, 100*/:vote03/maxVote);

setProperty ("/ResumePanel/b04", _width, 100*/:vote04/maxVote);

Здесь вначале устанавливаются значения текстовых полей, показывающих число голосов по каждому пункту. Далее определяется максимальное значение голосов из всех четырех пунктов голосования. Последние четыре строки устанавливают размеры столбиков диаграммы. В данном случае указана цифра 100, так что столбики не могут превышать в длину 100 пикселов, но можно выставить любое значение.

Гостевые книги

Вариантов гостевых книг может быть масса. Серверная часть реализации практически не зависит от интерфейсной части, будь то стандартная HTML-форма или форма на Flash. Скрипт мы рассматривать не будем. Вы можете выбрать по вкусу любой на сайтах, где приведены исходные тексты скриптов на Perl.

Давайте определим, что должно быть в нашей Flash-форме для ввода нового сообщения. Это, очевидно, 2-3 поля для ввода данных о посетителе (имя, адрес электронной почты), текстовое окно для ввода сообщения и кнопка для принятия сообщения. Такой вариант интерфейса подходит и для случая автоматической отправки почты прямо из формы с помощью соответствующего несложного скрипта.

Все элементы находятся в основном слое, и никаких вспомогательных вычислений здесь не проводится. Поэтому можно просто привязать к кнопке "Отправить" вызов скрипта и переход на второе состояние формы (резюме).

on (release) {

loadVariables ("../send_to_guestbook.cgi", "/", "POST");

gotoAndStop (resume);

}

где resume - это метка фрейма.

Здесь вызывается скрипт с передачей переменных из основного слоя методом POST. При этом все переменные в форме записи ключ-значение (var1=7&var2="name") попадают в буфер стандартного ввода . Оттуда они извлекаются скриптом и обрабатываются в соответствии с вашей задачей.

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

Из состояния "Резюме" можно вернуться к вводу нового сообщения. Для этого достаточно разместить там кнопку с кодом:

on (release) {

gotoAndStop (enter_message);

}

где enter_message - метка основного состояния.

Плюс реализации на Flash еще и в том, что введенные посетителем данные в дальнейшем сохраняются. В традиционных методах реализации для сохранения значений полей в случае какой-либо ошибки при вводе требуется дополнительное кодирование.

Организовать проверку заполнения тех или иных полей формы и выдачу соответствующих сообщений об ошибках также несложно. Для этого создаются дополнительные устойчивые состояния формы. Несложно и реализовать просмотр введенных ранее сообщений. Для знакомых с традиционными средствами программирования, к примеру, JavaScript, здесь только один новый момент - работа с прокруткой текста в динамических текстовых полях. Для этого у динамического текстового поля есть свойства .maxscroll и .scroll. Устанавливая второе из них, можно прокручивать текст в окне. Первое просто показывает максимальное число строк текста. Это значение определяется при отрисовке поля по факту. Это важный момент, о котором необходимо помнить.

Баннеры

Меню

Загрузку документа из флэш-меню выполняет оператор:

getURL ("srcname", "_self", "POST");

Заполняемые формы и калькуляторы

Информеры

Вставка флэш-элемента в HTML-код

codebase="http://download.macromedia.com/pub/shockwave/cabs/

flash/swflash.cab#3,0,0,0" width="100%" height="100%">

shockwave/download/" type="application/x-shockwave-flash"

width="100%" height="100%">

</embed>

</object>s

Категория: Flash | Просмотров: 1173 | Добавил: VVS | Рейтинг: 0.0/0 |

Всего комментариев: 0

Поиск

Форма входа

Наш опрос

Друзья сайта

Статистика

Возраст