Решение проблемы кнопок навигации браузера

В 2001 году произошло событие, вызвавшее невероятный резонанс в среде Web-разработчиков и довольно сильно повлиявшее на развитие Flash. Известный специалист в области usability (удобства использования) Якоб Нильсен опубликовал небольшую статью «Flash is bad on 99 %» («Flash плох на 99 %»). В ней он в пух и прах разгромил технологию Flash и разработчиков, использующих ее. Основная идея статьи заключалась в том, что в погоне за эффектами создатели Flash-сайтов забывают обо всем остальном. Заставка на 0,5 Мб, фоновый звук из трех аккордов, прыгающие кнопки и два предложения текста, написанного с ошибками, — вот что представлял тогда (а зачастую и сейчас) типичный Flash-сайт. Но не только непринятие основ usability флешерами вызвало гнев Нильсена. Существенные недостатки имелись в самой технологии, не позволяя в принципе создать Flash-сайт, который бы ни в чем не уступал своему HTML-аналогу. К наиболее важным из них он отнес следующие:

• отсутствие поддержки кнопок навигации браузера. Действительно, Flash-сайт — это просто SWF-фильм, встроенный в HTML-страницу. Его страницы являются или кадрами, или подгружаемыми по мере необходимости фильмами. Но рядовой пользователь не имеет об этом ни малейшего представления! Для него Flash-сайт ничем не отличается от обычного.


Поэтому если пользователь захочет перейти на уже просмотренную им страницу, то он нажмет в браузере кнопку Назад (Back). При этом он просто «вылетит», так как Flash-сайт, будучи цельным SWF- фильмом, полностью размещается на одной HTML-странице. Конечно, можно разместить каждую страницу Flash-сайта в отдельном HTML-документе. Но при этом будет утрачено одно из главных преимуществ таких сайтов — отсутствие необходимости полной перезагрузки страницы для обновления содержимого. Также при этом усложнится организация взаимодействия между страницами сайта и неизбежно возрастет его размер;

• браузеры для слепых не могли считывать Flash-содержимое. В нашей стране на это никто не обратил бы внимания, но в политкорректной США учитывают интересы всех групп граждан, поэтому Macromedia подверглась ожесточенной критике по этому поводу;

• поисковые машины не могли просматривать содержимое Flash-сайтов, отчего доступность
размещенной на них информации была куда ниже, чем в случае HTML-сайта. На данный момент все три приведенных недостатка исправлены. Еще весной 2003 года крупнейшая поисковая машина Google стала поддерживать поиск в текстовых полях SWF-файлов. Во Flash MX появилась возможность оптимизации фильма для просмотра голосовыми браузерами (кратко опишем ее уже в этой главе).


Главное же, что теперь можно так построить Flash-сайт, чтобы стала возможной навигация по нему при помощи кнопок Назад (Back) и Вперед (Forward) браузера. Поговорим о том, как это сделать.

Обычно страницы Flash-сайта — это кадры соответствующего SWF-фильма. Чтобы можно было запомнить, какие страницы посещал пользователь, у каждого такого кадра должен быть уникальный идентификатор. Называется он якорем кадра (Frame Anchor). Чтобы присвоить кадру якорь, нужно его выделить и ввести произвольное имя в поле Frame Инспектора Свойств, Затем вменю Label type необходимо выбрать пункт Anchor. При этом на кадре появится метка в виде желтого якоря, Как же браузер «узнает», кадр с каким якорем проигрывается? Как он «запоминает» очередность отображения кадров? Чтобы дать ответы на эти вопросы, создадим модель Flash-сайта.

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

2. Присвойте каждому кадру якорь. Пусть для определенности якорями будут «frame_1», «fraine_2», «frame_3».

3. Создайте кнопку, нажатие которой будет переводить вас к просмотру следующей страницы.


Назовите ее forward и поместите на первый и второй кадры. Затем на первый кадр «повесьте» следующий код:

forward.onPress=function():Void {
nextFrame();
};

4. Откройте окно Publish Settings и перейдите на закладку HTM L. В меню Template выберите пункт Flash with named anchors. Так как кадры фильма автоматически не должны проигрываться с сайтом, поставьте флажок Paused at start в меню Playback. Нажмите кнопку Publish.

Выполнив все описанные выше действия, вы получите HTML-документ со встроенным в него фильмом. Откройте этот документ в браузере и нажмите кнопку, отвечающую за переход на следующую страницу нашего «Flash-сайта». Обратите внимание, что после того, как второй кадр фильма отобразится, станет доступной кнопка Назад (Back) браузера. Нажав ее, вы вернетесь на первый кадр фильма. При этом активизируется кнопка Вперед (Forward), нажатие которой приведет к повторному отображению второго кадра. В общем навигация по помеченным якорями кадрам Flash-фильма осуществляется так, как если бы они являлись независимыми HTML-страницами. Замечательно!

Если вы хотя бы немного понимаете HTML, то разобраться в том, как была реализована поддержка кнопок навигации браузера, не составит особого труда. Для начала обратите внимание, что отображается в строке адреса браузера, когда, например, мы переходим на второй кадр. Вы увидите, что адрес страницы отличается от того, который отображался изначально:

• http://www.flash-sitc.ru/ (первоначальный адрес);

• http://www.flash-site.ru#frame_2 (адрес при переходе на второй кадр фильма). Отличается и заголовок страницы:

• Flash-сайт — Microsoft Internet Explorer (первоначальный заголовок);

• Flash-сайт — frame2 - Microsoft Internet Explorer (заголовок при переходе на второй кадр).

Строка #frame_2, присоединенная к URL страницы, — это идентификатор фрагмента. Такие идентификаторы применяются обычно для создания оглавлений больших документов. Когда браузеру передается U RL, в котором имеется идентификатор фрагмента, то он отображает страницу так, чтобы соответствующий фрагмент оказался в самом верху окна просмотра.

Присвоить фрагменту идентификатор очень просто. Обычно для этого используется тег <А> с атрибутом name. Например, чтобы создать ссылку на главу в книге, весь текст которой принадлежит одной HTML-странице, необходимо набрать приблизительно следующий код:

(a name="part_4" ) Четвертая глава (/a)



Можно создать ссылку просто на некоторую область в документе. Для этого нужно набрать что-то вроде (а name="label_1")(/a)

Интересно, на какие фрагменты ссылаются идентификаторы, прикрепляемые к LRL страницы, в случае нашего «сайта»? Хотя они имеют такое же написание, как и якоря кадров, они, естественно, не могут указывать непосредственно на кадры. Чтобы найти истину, проанализируем код страницы. Сразу же после тега в нем располагаются следующие строки:

(а name="frame_1")(/a)
(а name="frame_2")(/a)
(а name="frame_3")(/a)

Итак, URL. который адресует кадр Flash-сайта, реально просто ссылается на пустую закладку, размещенную на HTML-странице сразу же после фильма. Но как же тогда функционируют якори кадров? Вероятно, реализуется приблизительно следующий алгоритм. Когда пользователь переходит на кадр с меткой, плейер отправляет команду браузеру перейти на соответствующую закладку (это легко сделать благодаря тому, что плейер может обращаться к JavaScript или другим браузерным скриптам). Реально при этом никаких видимых изменений не происходит, так как все закладки указывают на область, непосредственно прилежащую к фильму. Зато браузер «запоминает», что подобный переход был произведен (один URL, но с разными идентификаторами фрагментов, воспринимается браузером как самостоятельные ссылки). Когда пользователь нажимает кнопку Назад (Back) или Вперед (Forward), браузер переходит на необходимую закладку, считав верхний элемент из нужного стека истории. Плейер перехватывает данные о том, на какую закладку был осуществлен переход. А так как идентификаторы закладок совпадают с именами якорей соответ ствующих кадров, то перевести проигрывающую головку на новый кадр не составит труда.

Как все просто и изящно... Почти гениально!

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

Например, если у вашего сайта три страницы, помеченные якорями «main», «photo» и «job», то в текст НТМ L-кода страницы вы должны ввести следующие элементы:

(а name="main")(/a)
(а name="photo")(/a)
(а name="job")(/a)

В случае браузеров Netscape плейер не может вызывать команды JavaScript непосредственно. Он может лишь активизировать функции и считывать возвращаемые ими значения. Поэтому, чтобы можно было реализовать поддержку якорей кадров для случая открытия страницы браузером Netscape, в ее текст нужно ввести функции JavaScript, которые бы позволили считывать и задавать LJRL отображаемого документа, а также его заголовок. Код этих функций предельно прост:



Данный код генерируется при публикации HTML-страницы из Flash, поэтому стремиться его запоминать не стоит. В принципе, ввиду слабой распространенности браузеров Netscape, им можно вообще «пожертвовать».

Якори кадров помогают решать одну из самых важных проблем Flash-usability, позволяя создавать сайты, тесно интегрированные с браузером. Flash-сайт, в котором имеется возможность навигации при помоши кнопок Назад (Back) и Вперед (Forward), для пользователя куда более удобен, чем тот, где такой возможности нет. Поэтому использование якорей кадров — это верный признак того, что сайт создавал профессиональный и ответственный разработчик.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Action Script на эту тему:
Взаимодействие с принтером
Взаимодействие со средой разработки
Взаимодействие со средствами чтения с экрана
Объект CustomActions
Определение размеров фильма и величины окна плейера