MZero #7 [сентябрь 2004]
Меню
  Главная
  Авторам
  Разделы
  Команда MZero
  Клуб ICQ
HiTech
  В Канаде хотят запретить дышать алкоголем .
  Пять машин и технологий готовы изменить наш мир.
  Плавающие ботинки превращают людей в водомерок.
Моддинг
  СветоНожки для компа своими руками.
  Светильник из шариковой ручки.
  Светильник из шариковой ручки 2.
Mobile
  Проба КПК Fujitsu-Siemens Pocket-LOOX 420.
  "Мобильное телевидение" .
  Электробабло-2. Теперь в телефонной трубке.
Windows
  Как создать загрузочную дискету в Windows NT/2000?
  Microsoft разработала защищенную Windows XP .
Пингвин'zzz
  Пингвинодизайн: Стань крутым *nix-дизайнером!
  Bluetooth и Linux на примере Nokia 7650.
  Проблемы русификации в Linux.
Delphi
  Создание графического интерфейса пользователя средствами Win32 API .
  Создание плагинов к Winamp.
Интернет - программинг
  Анатомия межсайтового скриптинга.
  Flash-навигатор.
  PHP Inside #0 [Журнал для начинающи и проффесионалов].
Web - desigN
  Книги по web-дизайну.
  Четыре правила профессионального дизайна. Часть I .
  Четыре правила профессионального дизайна. Часть II .
  Четыре правила профессионального дизайна. Часть III .
  Четыре правила профессионального дизайна. Часть IV .
Жизнь в сети
  И на Google есть пятна.
  МАСЯНЯ IS BACK!!!
Софт
  WebSubmitter— на пути к известности.
  Управляем цифровой фотографией.
  Оживление цвета.
Чтиво
  Пауло Коэльо - Алхимик.
  С любовью Алиса.
Games
  Sacred (Князь тьмы).
  The Matrix Online.
  Far Cry.
  Cheats.
Интервью
  Что нового у ReGet?
  С разработчиками файлового менеджера Фрегат.
  С хакером, взломавшим Lenta.ru
Музыка
  Моя музыка существует отдельно от меня.
  Осёл-меломан.
  Outkast.
Стиль
  Гламурная девушка.
  Женская мода. Осень: твид, плащи, метал и космический шик.
  Стильная одежда для маленьких модников.
Здоровье
  Как правильно загорать.
Это мы смотрим...
  Тупичок Гоблина - Ночной дозор.
  Россия наносит ответный удар, сняв свой первый блокбастер.
Наука
  Спутник сфотографировал эльфов и фей.
  Переведи меня!
Pick up
  Как познакомиться с девушкой.
  "15 никогда" для использования в общении со слабым полом. (смешно)
www.mzero.by.ru
Интернет - программинг

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

От простого к... меню

В сильно-сильно упрощенном виде любой сайтец представляет собой набор соответствующим образом представленной информации и средств ее потребления. Как правило, эта самая инфа разбита на некоторые разделы по тематике, временному и другим факторам. Само собой, пользователь хочет иметь быстрый доступ к любому разделу. И дизайнер (а вернее сказать, не только он один...) ему в этом помогает, пичкая паги множеством пимпочек. Эти пимпы при нажатии хватают инетчика за... мышку и тащат его к какой-то инфе. Это есть гуд, ибо удобно и полезно. А полезно это тем, что когда эти ссылочки красиво выглядят и красиво стоят на странице, пользователь брызгает ферментами от счастья :). Ряд кнопок, выстроенных в каком-то определенном порядке, принято именовать термином "меню". Во Flash'e сие реализуется так.

Как известно, технология Flash появилась на свет, дабы облегчить бремя современного дизайнера, запихнув и текст, и графу в один файл, и чтобы значительно сократить размер этого файла. Значительность эта достигается несколькими путями, как то: векторная графика, символы, отношение к тексту не как к графе и прочее... Для начала воспользуемся такой фишкой, как символы. В случае, когда пункты меню, т.е. кнопки, выглядят одинаково (за исключением текста на них), зачем платить больше?.. Я хотел сказать, зачем делать для каждой ссылки отдельный символ? Ведь это обходится элементарно за счет запихивания кнопки с динамическим текстовым полем в мувик. Т.е. тебе достаточно просто заглянуть в панель "Параметры текста" и, ментально не напрягаясь, подвигать руками, как я говорю :). Ряд этих кнопок выносится на сцену. Посредством ActionScript каждому такому клипу дается название, ну то есть подпись на кнопку и собственно ссылка. Можно было бы вообще извратиться по полной программе и изначально оставить лишь один пункт меню, а потом его дублировать старым добрым "duplicateMovieClip" с последующим присвоением названий, но, так устроен наш мир, размер флешки от этого хоть и незначительно, но увеличится :(. Проверял неоднократно.

Чтобы этот край темы стал совсем ясен, приведу пример. Во Flash'е рисуем прямоугольник, поверх него текстовое поле. В Параметрах текста ставим "Dynamic Text" и имя переменной "t". Важно также не забыть убрать возможность выделения текста, иначе выглядеть будет не очень приятно.

Выделяем все и конвертируем для начала в кнопку. Даем этой кнопке наряд:

on (press) {
  getURL(myurl)
}

А потом эту кнопку - еще и в клип. Клип выносим на сцену N раз и, не забывая делать глоточки холодненького пивка, даем всем копиям имена (пусть это будут "c1", "c2"..."cn"). В первом кадре сцены пишем:

c1.t="О моей заднице";
//задаем название кнопки
c1.myurl=http://ilich.fly.to;
//задаем url
c2.t="О задницах моих преподов";
c2.myurl=http://www.mesi.ru;
c3.t="О задницах моих сослуживцев";
c3.myurl=http://www.winfo.org;
// ну и так далее до N
stop();

И все вдруг стало понятным и легким! Мувики уже есть. Теперь переменным внутри них присвоены некоторые значения, которые впоследствии ставятся в динамические текстовые поля. И кнопочки меню стали полностью кликабельными. Согласен, гемор, но при большом количестве граф и анимации в кнопках сей механизм здорово экономит место. Поверь мне на слово, как старому извращенцу :).

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

От темы к теме

Для реализации просмотра текста прежде всего нужно текстовое поле. Да не простое, а динамическое и опять же без возможности выделения текста. Сделай это поле на отдельном слое под кнопками и дай ему (полю) банальное имя "text". Теперь надо выделить на каждый раздел по столько кадров, сколько нужно для анимации перехода к разделу (если ее нет, то дочитай до конца и сделай :)), начиная с третьего. Растягивай кадр с "text" на все эти кадры. Кадр с нашими пунктами меню перетащи на отдельный самый высокий слой и растягивай на тот же объем, что и "text". Сделано это для того, чтобы меню было доступно и во время просмотра очередного раздела, и при этом нам не приходилось бы заново тащить из библиотеки символы кнопок - и этих хватит. Это ж мувики, а значит, мы можем ими манипулировать из ActionScript абсолютно без спазмов. Теперь слушай сюда. Нам надо изменить скриптец для кнопки пункта меню:

on (press) {
  _root.text="";
  if (_root.f==false) {
    _root.loadVariables("texts.txt");
    _root.f=true;
    //грузим тексты
  };
  for (i=1;i<=N;i++) {
    _root["c"+i]._x=0-_root["c"+i]._width-10;
    //выносим мувики
  }
  _root.gotoAndPlay(myurl)
  //идем на дело
}

Хе-хе. Ща все объясню.

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

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

Самое главное - тексты. В конечном кадре конкретной анимации должно стоять присваивание текстовому полю значения, соответствующего данному разделу. Т.е. переменной "text" присваивается собственно текст, содержащийся в данном разделе. Замечу, лишь только присваивается. А будет ли реально сам текст там набран - загадка. Фишка в том, что текст текстом, а килобайты он, гад, жрет только в путь! Что, естественно, ни тебе, ни твоему потенциальному посетителю на фиг не нужно. Поэтому мы чтиво сразу грузить не будем, а замутим его закачку лишь только при обращении, т.е. при клике по какой-нибудь кнопке раздела, что, собственно, и делается перед переходом к анимации посредством штучки "_root.loadVariables("texts.txt")". Причем загруз будем вести на основную сцену, т.е. в мувик "root", для легкости обращения. Для примера пусть переменные с текстами разделов имеют имена "text1", "text2"...

Кстати, об анимации. Как только я начал говорить про отдельную закачку текста, ты, наверняка, как продвинутый флешер, сразу все просек. И угадал! Прелоадер здесь нужен не меньше, чем на закачке основной флехи. Только здесь есть некоторые подводные камни. Например, то, что текстовик должен грузиться один раз. Это мы отслеживаем флажком "_root.f". Или то, что во избежание ошибок лучше было бы все кнопки на время анимации отрубить или хотя бы скрыть, например, утащив за экран. Скрытие кнопок происходит в цикле "for". Там горизонтальным координатам всех мувиков кнопок задается такое значение, что они оказываются далеко влево от края флешки.

У себя на сайте я вообще все сделал через ж...

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

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

Взад - вперед

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

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

Забацаем прокрутку так. На каждый раздел, где она должна быть, делается не один, как мы договаривались, а три конечных кадра. Сразу после анимации перехода или прелоадера действие переходит к первому конечному кадру, в котором текстовым полям присваиваются нужные значения. Там же, в этом самом кадре, стоит проверить, может быть у тебя текста достаточно мало и автокастрации не будет. Посмотри, на сколько символов рассчитан твой "text", отними от этого числа по символов пять на каждую строку текстового поля (на случай переноса слов) и смело сравнивай с длиной текста. Если текст меньше, не задумываясь, тащи кнопки прокрутки (предварительно вполне разумно засунутые в мувики по примеру пунктов меню) за край сцены. И в этом же кадре необходимо задать начальное значение для переменной, указывающей шаг прокрутки:

per=0;
//шаг
if (text1<=(7*(43-5))) {
  _root.button_up._x=0-_root.button_up._width-10;
  _root.button_down._x=0-_root.button_down._width-10;
  //проверяем длину текста и переносим кнопки
}
_root.text=text1
//присваиваем текст

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

_root.text.scroll=Number(_root.text.scroll)+per;

А в третьем - gotoAndPlay("text1f2"), и все. Последние два кадра, очевидно, работают в цикле, постоянно прокручивая текст. Но так как шаг равен нулю, мы этого пока не видим. И хорошо.

Кнопки прокрутки. Их должно быть как минимум две. Та, что прокручивает вверх, должна быть в мувике "button_up", та, что вниз - в "button_down". Как расположить их на экране, я полагаю, ты догадываешься. Для верхней пиши:

on (release, releaseOutside) {
  _root.per = 0;
}
on (press) {
  if (Number(_root.text.scroll)>1) {
    _root.per = -1;
  }
}

Для нижней:

on (release,releaseOutside) {
  _root.per=0
}
on (press) {
  if (Number(_root.text.scroll)<Number(_root.text.maxscroll)) {
    _root.per=1
  }
}

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

Теперь напряги память и вспомни, что еще нам надо было прокручивать. Правильно, мувик. Сделай два новых слоя над слоем с текстовым полем. И соверши над ними следующее надругательство: верхний из них надо сделать маскирующим для нижнего (залезь в свойства верхнего слоя, там все увидишь). Маскирующий слой должен содержать простой прямоугольник ровно над нашим основным текстовым полем. Получится такой эффект, будто мувик прокручивается в текстовом поле точно так же, как обычный текст других разделов. В нижний тащи мувик, подлежащий прокрутке, располагай его так, чтобы его верхний край совпадал с верхним краем основного текстового поля, и давай ему имя "mov_text2" (типа того раздел второй). В ситуации с мувиком скрипты меняются лишь только в первом и втором конечных кадрах анимации. В первом оставляем присвоение переменной "per" начального значения 0, проверку на высоту мувика и присвоение переменной "mov_y" значения начальной вертикальной координаты мувика:

per=0;
if (_root.mov_text2._height<=420) {
  _root.button_up._x=0-_root.button_up._width-10;
  _root.button_down._x=0-_root.button_down._width-10;
}
mov_y=_root.mov_text2._y;

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

if ((_root.mov_text2._y<=mov_y)and(_root.mov_text2._y>=(mov_y+_root.mov_text2._height-420))) {
  _root.mov_text2._y=_root.mov_text2._y-(per*10);
  if (_root.mov_text2._y<( mov_y+_root.mov_text2._height-420)) {
    _root.mov_text2._y= mov_y+_root.mov_text2._height-420;
  };
  if (_root.mov_text2._y>mov_y) {
    _root.mov_text2._y=mov_y;
  };
}

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

Мышиный навигатор

Экстремальное извращение - отсутствие кнопок :). А ведь это реально возможно и, что немаловажно, удобно, честное слово :). Суть метода в том, что экран виртуально (хотя можно это и графически показать) делится на зоны. Когда курсор попадает в какую-то определенную зону, происходит переход в нужный раздел сайта. Кнопки, в принципе-то, можно использовать и здесь. Только использоваться они будут не стандартно. Преимущественно юзаются тогда такие события кнопок, как "rollOver" и "rollOut", т.е. мышка НАД и НЕ НАД. Но, когда я сам этим занимался, я, как всегда, сделал все через... непросто, короче :). Я у некоторого мувика, который постоянно присутствовал во всех кадрах на сцене, на событие "mouseMove" поставил проверочку, которая, в зависимости от координат мыши, запускала тот или иной ролик, прокручивала тот же самый текст или посылала к какому-то другому разделу. Важно лишь отследить момент перехода в зону. Посмотри пример:

onClipEvent (mouseMove) {
  x=_root._xmouse;
  y=_root._ymouse;
  if (x>=_root._width/2) {
    if (f==1) {
      f=0;
      mov2.removeMovieClip();
      _root.attachMovie("C - MovieClip1", mov1, 1);
      _root.mov1._x=_root._width/2;
      _root.mov1._y=0;
      _root.mov1.play();
    }
  } else {
    if (f==0) {
      f=1;
      mov1.removeMovieClip();
      _root.attachMovie("C - MovieClip2", mov2 2);
      _root.mov2._x=0;
      _root.mov2_y=0;
      _root.mov2play();
    }
  }
}

Все очень легко.

Экран здесь делится вертикально ровно посередине. Изначально, т.е. когда неизвестно, где мыша, ничего на экране нет. Вернее даже так, если мышка в правой части экрана, то пока курсор не пересечет установленную границу, ничего не начнется ("f" по умолчанию равно нулю). Когда же мыша наконец начинает бегать из стороны в сторону, с каждым переходим через грань "f" меняется, и именно в момент изменения этого флажка заменяются и мувики. Проигрывается мувик с той стороны, с которой мышка :). Надеюсь, суть метода ты уловил.

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

И да пребудет с тобой Великий Flash!




наверх Автор: ilich [Спец. Xakep, №27] Источник: http://izone.kiev.ua/


Copyright by MZero
Копирование и использование данных материалов разрешается
только в случае указания на журнал "
MZero", как на источник получения информации.
При этом во всех ссылках обязательно явное указание адреса вэб-сайта
www.mzero.by.ru.
Журнал тестировался на IE 5.0/6.0; Opera; Mozilla; MYIE 2.0; Netscape