Июн 05 2017

Проектируем Flash сайт! Главная цель интернет ресурса

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

Содержание:

Корректная работа вэб-ресурса

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

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

Первое знакомство с Flash-ресурсом

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

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

Ради интереса проведите небольшой эксперимент. Из своих знакомых сформируйте контрольную группу по двум следующим условиям.

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

Теперь каждому человеку задайте такой вопрос: «У тебя на машине, установлен Flash Player, версии не ниже шестой?». Можно поспорить, что вы не получите ни единого определенного ответа. В противном случае, в подборе контрольной группы вы не проявили должного усердия.

Теперь можно понять, какое смятение испытывает большинство пользователей на пороге Hash-сайта при чтении его системных требований. И это целиком нормально — большинству людей не интересно, какими технологиями они пользуются, сидя за компьютером. Для них ПК — всего лишь рабочий инструмент, и не важно, как он устроен и как работает. К тому же, если пользователь понимает, что его компьютер не соответствует прочтенным на стартовой странице требованиям, значит, имеет смысл предполагать, что этого человека здесь не ждут. В результате посетитель закроет окно браузера, больше на этот сайт не зайдет!

Положим, ситуацию можно попытаться исправить, в двух предложениях объяснить:

  • Где просмотреть версию вэб-браузера;
  • Как поменять видеорежим.

Но в 99 из 100 случаев пользователь и пальцем не шевельнет, чтобы поменять привычный для себя вэб-браузер на более подходящий или покопаться в системных настройках ради одного сайта. А узнать, установлен ли компонент Flash Player и какая у него версия, даже для опытного пользователя часто бывает весьма затруднительным.

Правильно проектируем Flash сайт

Автоматический вход

Многие разработчики забывают, что главная задача начальной страницы — убедить посетителя в том:

  • Он попал на нужный сайт;
  • Будет интересно и полезно взглянуть на его содержимое.

Это единственная мысль, которая должна обременять сознание человека на этапе принятия решения — двигаться дальше или закрыть окно браузера. Чем больше непонятной информации пользователь прочтет в этот момент, тем больше он будет раздражаться, склоняться ко второму варианту ответа.

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

Говоря о видеорежиме, нужно помнить, что сейчас уже не устанавливают разрешение мониторов ниже 800×600 пикселей при глубине цвета меньше 16 бит. Эти значения должны определять основные параметры будущего Flash-ресурса. На вэб-браузер и его версию вообще не стоит обращать внимание — сейчас поддержка Flash является обязательной для большинства программ.

А вот знать, установлен ли у пользователя Flash Player и какая у него версия, действительно важно. Это можно определить автоматически с помощью соответствующего сценария, включенного в код стартовой страницы.

Посетителя вашего сайта нужно побеспокоить техническими проблемами лишь в том случае, когда Flash Player не обнаружен или номер его версии ниже требуемого. Тогда нужно уведомить о необходимости перехода на сайт компании для установки необходимого программного компонента. Если же система полностью удовлетворяет требованиям сайта, запуск Flash-ролика для пользователя должен пройти абсолютно прозрачно.

Этап загрузки данных

Следующее уязвимое место любого Flash-ресурса — его загрузка. Если при открытии HTML-страницы допускается отображение в произвольном порядке ее составляющих:

  • Графических элементов;
  • Текста;
  • Форм заполнения и т. д.

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

Чтобы процесс загрузки все же не был утомительным, необходимо создать специальный предзагрузчик, запускающий воспроизведение Flash-ролика лишь после того, как он полностью загрузился на компьютер пользователя. Для этого на языке: Action-Script необходимо организовать условный цикл, который должен выполняться до тех пор, пока не будет получен последний байт Flash-сайта. В качестве условия этого цикла можно использовать отношение величин, возвращаемых методами getBytes-Loaded() и getBytesTotal().

  • Первый метод определяет, сколько байт пользователь уже загрузил.
  • Второй указывает, какой объем в байтах занимает загружаемый ролик.

Отношение getBytesLoaded () /getBytes Total () определит степень загрузки Flash-контента. Если оно меньше единицы, то сайт еще не загружен. Если отношение стало равно единице — сайт готов к своей демонстрации.

Схематично вышеописанный цикл должен выглядеть так:

если (getBytesLoaded()/getBytesTotal() = 1)
то
начать демонстрацию
иначе
вернуться к проверке условия

В силу специфики воспроизведения Flash-контента, такой цикл нельзя создать в пределах одного кадра ролика с помощью конструкции while-do. Вместо этого нужно задействовать так называемый трехкадровый цикл — три последовательно расположенных на временной полосе кадра. Эти кадры должны воспроизводиться по кругу до тех пор, пока наше условие не окажется истинным.

  • Первый кадр цикла нужно оставить пустым, лишь определив для него метку (например, startLoader).
  • Во второй кадр нужно поместить сценарий, который должен анализировать степень загрузки Flash-ролика.

Код такого сценария должен выглядеть примерно так:

if (getBytesLoaded()/ getBytesTotal() ==1){
gotoAndPlay(«startPlay»);
}

Здесь при выполнении поставленного условия осуществляется переход к кадру, помеченному произвольной меткой (например. startPlay), с которого начинается воспроизведение основной части Flash-контента. Если же условие не выполняется, цикл нужно замкнуть. Для этого нужен третий кадр цикла, в который нужно поместить код gotoAndPlay(«startLoader»)

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

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

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

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

Для этого можно использовать то же отношение — get-BytesLoaded()/getBytesTotal(). Умножив эту величину на 100 и выделив из полученного числа, целую часть, мы узнаем, сколько процентов от общего объема Flash-ролика уже загружено. Связав это число с динамическим текстовым полем, мы сможем отобразить его для пользователя.

Задействовав фантазию, вместо простого числа пользователю можно показывать привлекательную шкалу, отображающую степень загрузки, применяя к процессу ее изменения всевозможные спецэффекты. Часто встречаются сайты, на которых во время загрузки основной части пользователь может сыграть в какую-нибудь простую игру — например, пятнашки. Все средства хороши для того, чтобы привлечь пользователя и заинтересовать его в том, что он увидит после загрузки сайта. Но следует помнить: объекты, отображающиеся во время загрузки, тоже должны загрузиться. А создание для предзагрузчика своего предзагрузчика — утопия.

Модульное построение сайта

Полностью решить проблему, связанную с длительным ожиданием полной загрузки сайта, иногда не может даже визуально привлекательный предзагрузчик. Для современных Flash-сайтов нормальным является объем в пять мегабайт и больше. Поэтому пользователь, вдоволь наигравшись в пятнашки и по оформлению шкалы загрузки оценив ваши недюжинные художественные таланты, вновь начнет поглядывать на кнопку закрытия окна браузера. Что делать? Если все еще преследуется цель, поставленная в начале статьи, ответ может быть один — не делать ничего.

Но если созданный сайт все-таки хочется сделать популярным местом в Интернете, нужно помнить, что самый верный способ уменьшения времени загрузки содержимого большого Flash-сайта. Это его разбиение на несколько смысловых частей, которые следует оформить в виде отдельных Flash-роликов. Иными словами, нужно действовать по аналогии с созданием вэб-сайта средствами языка HTML — разбить ресурс на «страницы», которые пользователь сможет загрузить в произвольном порядке (или не загружать некоторые из них вовсе).

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

Модульное построение Flash-сайтов, при котором отдельные разделы сайта подгружаются по мере необходимости, основывается на использовании метода load Movie (), в упрощенном виде имеющего такой вид: loadMovie («url», target); строка «url» должна содержать путь ролика, который нужно загрузить, относительно корня сайта. Параметр target указывает, куда этот ролик следует поместить. Это может быть либо объект, либо уровень основного Flash-ролика.

Например, код loadMovie («flashes/about.sw1», Jevel2) загрузит файл about.swf из папки flashes и поместит его на второй уровень основного ролика. А код loadMovie («flashes/news.swf», newsContainer); загрузит файл news.swf из той же папки и поместит его внутри объекта newsContainer, созданного в основном ролике. Таким образом, можно загружать и переключаться между разными разделами Flash-сайта без загрузки дополнительных HTML-страниц.

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

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

Начало положено

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

Конечно, основные постулаты изобразительного искусства действуют и во Flash-дизайне. Поэтому стоит прочесть несколько книг, посвященных данной теме. А потом — свободный полет фантазии и полное творческое раскрепощение. Только в таком состоянии человек способен творить действительно невероятные вещи как во Flash, так и в любой другой области.

Надеюсь, что пост, правильно проектируем Flash сайт, был полезен!