Флэш переключатель страниц

Флэш переключатель страниц для сайтов

Идея сделать флэш переключатель страниц возникла у меня, когда я приступил к созданию своего сайта ruben-lachonov.ucoz.ru для размещение книги "Мой род". Книга достаточно объемная, более 60 страниц, и мне хотелось сделать работу с этой книгой более комфортной. Меня всегда раздражало отсутствие указателей в поисковых системах - сколько еще осталось просмотреть рисунков, записей, страниц. Еще, что меня не устраивало, так это слабое очертание на многих сайтах номера текущей позиции или страницы, причем иногда надо очень пристально приглядеться, чтобы понять, куда же следует нажать. Итак, я еще не зная, что получится, приступил. Те, кто читал или просматривал книгу на сайте, уже понимают о чем речь. Но я сейчас немного расскажу, как я до этого дошел. Сначала я сделал переключатель со стрелками.

Мне показалось, что я проблему решил. Работало это так. На центральном табло всегда высвечивался номер текущей страницы. Когда вы подводили курсор к стрелке, то в полях конечных значений высвечивались заданный в html страничке значения макс. и мин.

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

Причем скорость изменения номера запрашиваемой страницы увеличивается при удержании курсора. Как только стрелка будет отпущена, номер будет зафиксирован. Если надо показать именно эту страницу, то следует нажать на кнопку "Показать страницу".

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

Первый шаг был сделан. Было понятно, какие параметры надо передать во флэш модуль, и что следует получить от него.

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

Когда у меня образовалось "окошко", времени всегда не хватает, я решил переделать флэш переключатель и пришел ко второму варианту с элементами анимации.

Все поле я разбил на три части: стопка бумаг прочитанных, текущая страница и стопка нечитанных страниц.

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

Сейчас модуль в демонстрационном режиме и не будет производить переход на какую-либо другую страницу. Поэтому можно щелкать - последствий не будет. Дойдите до последней или первой страницы, чтобы увидеть конечные индикаторы.

При отпускании кнопки мышки над той или иной стопкой, или при нажатии клавиши Ввод (Enter), модуль выдаст запрос браузеру для перехода на другую страницу.

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

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

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

Самое удивительно, для тех кто понимает, что общий размер модуля с двумя кнопками оказался около 7 Килобайт!

Теперь, как это работает.

1. Необходимо упорядочить названия переключаемых файлов таким образом, чтобы они отличались цифрами в конце имени. Например:

mytest_01.html

mytest_02.html

mytest_03.html

mytest_04.html

и так далее ...

2. В каждой из этих страниц прописать swf модуль. Посмотрите здесь советы http://designformasters.info/posts/flash-embed-with-swfobject-2/.
У нас это должно выглядеть примерно так:

<param name="expressinstall" value="../scripts/expressInstall.swf">


<object type="application/x-shockwave-flash" data="switchpage.swf" width="152" height="42">

<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="15.0.0.0">

<param name="expressinstall" value="../scripts/expressInstall.swf">

<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>

</object>

</object>

Красный цвет - параметры и название модуля которые автоматически прописываются редактором (dreamweaver) при включении модуля в html страницу.
Синий цвет - не обязательное использование. Если титул оставить, как в нашем примере, то при наведении курсора в поле модуля будет всплывать название (титул). Если титул удалить, то никакая надпись всплывать не будет.

Проверьте какое имя присвоено SWF модулю (выделено в первой строке синим цветом, у нас FlashID). Проверьте через поиск на страничке не вписан ли скрипт для модуля:
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>

Малиновый цвет - удалить, если такое вдруг впишет редактор. Удалите или весь скрипт, если прописана только одна строка, или только строку swfobject.registerObject("FlashID");

Строки, которые предают параметры из HTML страницы, выделены особо. Рассмотрим переменные, входящие в эту строку (константы - кому как нравится):

str_delta=5 - смещение нумерации страниц. Не всегда удается пронумеровать страницы так как хочется. Я с этим столкнулся на ucoz, когда они сами индексируют файлы и первые номера, как правило, оказываются заняты.
Параметр str_delta позволят обойти это неудобство. Так, если ваш первый файл имеет номер 21, а на самом деле это страница номер 1, следует написать str_delta=20. Если нет необходимости, то этот параметр можно не указывать. По умолчанию он равен 0.

str_min=1 - минимальный номер страницы рассматриваемого документа. Этот параметр можно не указывать, по умолчанию будет установлено =1.

str_max= 13 - последний номер страницы рассматриваемого документа.

str_crnt=7 - номер текущей страницы.

str_link=../../mytest_ - имя (путь) файла без индексных цифр. Расширение файла (.html) установится автоматически.

Может быть, например, и такой вариант str_link=http://mysite/my_doc/mytest_

str_download=my_flash.zip - путь к файлу, загружаемого при нажатии на кнопку.

Практически для одного документа (книги) вам следует один раз передать значения всех параметров, а потом передавать значение только текущей страницы str_crnt, если вы умеете это делать, то еще проще это реализовать, используя, например, фрэймы или им подобные модули.

В нашем примере параметры передаются в каждой раскрываемой страничке html.

Ну вот, кажется и все. Для начинающих программировать флэш, это может быть примером для передачи данных из html в swf модуль.