создание элементов сайтов с использованием flash

Заголовки и иллюстрации

Тем, кто использует для заголовков растровые картинки, возможно, придутся по вкусу аналогичные элементы, выполненные на Flash.

Преимущества здесь следующие: можно смело использовать градиенты без опасения увеличить размеры файла. Размеры заголовка будут, скорее всего, в несколько раз меньше аналогичного файла GIF или JPEG. Так, например, заголовок из одного-двух слов с двухцветным градиентным фоном занимает от 500 байт до 1 Кбайт и может быть растянут до любых разумных размеров. Чем больше физические размеры вашего заголовка на экране, тем существеннее выигрыш в трафике. Поскольку Flash сглаживает картинку при воспроизведении, то текст будет выглядеть, скорее всего, лучше аналога в формате GIF. Вполне уместны даже несложные анимации, однако это зависит от содержания материалов. Возможен вариант использования одного элемента для всех однотипных заголовков путем замены в нем текста. Проще всего это сделать, если меню переключения разделов и заголовок расположены в одном клипе, но допустимы и варианты управления из одного Flash-элемента другим.

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

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

Счетчики

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

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

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

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

#!/usr/bin/perl open (RDATA, "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/htmlnn"; print "countValue=$cnt";

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

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

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

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

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

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

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

Рис. 1. Форма для голосования на сайте страховой компании.

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

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

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