От простого к... меню
В сильно-сильно упрощенном виде любой сайтец
представляет собой набор соответствующим образом
представленной информации и средств ее
потребления. Как правило, эта самая инфа разбита
на некоторые разделы по тематике, временному и
другим факторам. Само собой, пользователь хочет
иметь быстрый доступ к любому разделу. И
дизайнер (а вернее сказать, не только он
один...) ему в этом помогает, пичкая паги
множеством пимпочек. Эти пимпы при нажатии
хватают инетчика за... мышку и тащат его к
какой-то инфе. Это есть гуд, ибо удобно и
полезно. А полезно это тем, что когда эти
ссылочки красиво выглядят и красиво стоят на
странице, пользователь брызгает ферментами от
счастья :). Ряд кнопок, выстроенных в каком-то
определенном порядке, принято именовать термином
"меню". Во 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! |