Делаем кнопки
Всякий, кто хоть немного полазал по интернету, наверняка встречался с нажимающимися кнопками на веб-страницах. Нажатие кнопки имитируется так: при подведении курсора браузер показывает нам вместо исходного рисунка с изображением кнопки некий другой, изображающий кнопку в утопленном или подсвеченном виде. При щелчке мышкой показывается третий рисунок, при уходе курсора с рисунка - четвертый (или снова первый). Достигается такая замена рисунков средствами языка сценариев JavaScript, но изучать это язык нас не заставят: достаточно того, что его знает ImageReady. Программа создаст сценарий нажатия кнопки (скрипт, как часто говорят) и поместит в html-файл. А вы потом просмотрите в браузере, как она это делает: как и при создании карты ссылок, в окне браузера будет показан весь html код. Ну и конечно, можно будет скопировать соответствующий фрагмент кода и перенести его на страничку, которую вы хотели бы оснастить кнопкой. Итак, загружаем в программу некий рисуночек, который будет у нас кнопкой или иным нажимающимся элементом веб-страницы. В том же ImageReady есть очень неплохие возможности для рисования кнопок. Так, на главной панели вы найдете инструменты для рисования овалов (с клавишей Shift — кругов), прямоугольников (с шифтом - квадратов), скругленных прямоугольников и т. п. При выборе этих инструментов на настроечной панели прямо под строкой меню будет скромненький списочек Style, в котором вы сможете выбрать один из нескольких десятков стилей, и тогда будете рисовать уже не абстрактные фигуры, а сразу вполне прилично выглядящие кнопки: плоские и объемные, металлические, стеклянные, деревянные, пластмассовые. А если добавить к этому возможность создавать надписи произвольных размеров и под любыми углами, а также возможность соединять эти надписи с этими кнопками... Короче говоря, возможности есть. Важно только, чтобы на рисунке, из которого мы будем делать кнопку, не оставалось ничего лишнего — только сама эта кнопочка. Во-первых, желательно бы обрезать рисунок по размерам этой кнопки (может быть, оставив небольшие поля), а во-вторых, все, что не есть кнопка, хорошо бы выделить и удалить (Del) или сделать прозрачным, как говорилось в прошлой главе. Все лишнее убрали? Открываем палитру Web Content (веб-содержимое), щелкаем по треугольничку в ее правом верхнем углу, чтобы открыть меню этой панели (рис. 12.39). Выбираем команду New Rollover State (новое состояние кнопки), потом еще раз, и еще - столько, сколько состояний будет у нашей кнопки. ... После этого в панели Web Cpontent появляются новые строки. Каждая строка соответствует одному из состояний кнопки: • Over - это рисунок, который браузер показывает, когда курсор находится над кнопкой; • Out - это рисунок, который показывается, когда курсор уходит от кнопки; • Down — кнопка мышки нажата; • Selected - в этом состоянии кнопка остается после щелчка мышкой'. В принципе, мы не обязаны создавать все состояния кнопки. Можно, как на нашем рисунке, обойтись всего двумя кнопками: Over и Down. Вместе с исходным изображением их будет три: 1) курсор гуляет где-то в стороне от нашей кнопки, 2) курсор проходит над кнопкой и 3) кнопка нажимается. Хорошо, скажете вы, есть у нас три состояния, размещенные одно над другим, в три слоя. Но рисунки там совершенно одинаковые, щелкай - не щелкай, все одно и то же! Как сделать их разными? Надо выбирать поочередно строки в палитре Web Content и изменять рисунки. Правда, особой свободы тут не дают: если вы попробуете что-то просто подрисовать на рисунке карандашиком или кисточкой, поменяете на нем цвета или измените яркость и контраст, вы заметите, что одновременно меняются рисунки и всех остальных состояний. А нам надо, чтобы они стали разными! Что же делать? Пользоваться только тем, чем нам разрешено пользоваться в этой ситуации. Во-первых, мы имеем право сдвинуть любое из состояний кнопки относительно исходного, выбрав инструмент Move (двигай) на главной кнопочной палитре. Когда при подведении мышки кнопочка на веб-странице как бы сдвигается чуть вниз и в сторону, а при щелчке - еще чуть-чуть, это воспринимается именно как нажатие кнопки. Ну и во-вторых, можно применить один из десяти графических спецэффектов, список которых вы найдете, щелкнув по кнопке Add Layer Style в нижней части палитры слоев Layers. С их помощью мы сможем создать на рисунке два вида тени - направленную вовне (Drop Shadow) и внутрь рисунка (Inner Shadow), два вида свечения краев - внешнее (Outer Glow) и внутреннее (Inner Glow), скосы краев и рельеф (Bevel and Emboss2), имитацию атласной поверхности (Satin), наложить на рисунок цвет (Color Overlay), цветовые переходы (Gradient Overlay) и узор (Pattern Overlay), а также обвести рисунок линией контура (Stroke). Я не буду останавливаться на том, как работают эти спецэффекты. Это обширная тема, достаточно подробно изложенная в главе «Стиль слоя» «Самоучителя компьютерной графики и звука» - там все и прочтете. Я только хочу пояснить, почему предлагал удалить из рисунка все не относящееся к самой кнопке. Дело в том, что эффекты, связанные с обработкой краев (тени, свечения, обводка, скосы и т. п.) выполняются именно с краями видимой части рисунка. Если есть кнопка и есть прозрачные участки (откуда все удалено), то программе понятно, где у кнопки края. А если прозрачных участков нет, то эффект применяется к рисунку в целом. Тень будет отбрасывать не сама кнопка, а рисунок в целом, скосы краев возникнут не на кнопке, а по краям рисунка... Короче, чушь полная. Ну хорошо, обработали спецэффектами слои (состояния кнопки), сдвинули их относительно оригинала или сделали и то и другое вместе - теперь надо посмотреть, как все это работает. ... Для этого не обязательно даже запускать браузер: программа позволяет протестировать работу кнопок прямо тут, на рисунке. Стоит лишь выбрать инструмент Preview Document и поводить мышкой над рисунком, пощелкать кнопкой. При каждом действии мышкой в панели Web Content будет выделяться то состояние, которое в настоящий момент показывается. Если вы где-то ошиблись, таким способом вы увидите, где именно - какой из слоев выглядит не правильно. Не забудьте пекле просмотра отжать кнопку Preview Document, а то она не вам даст выполнять никакие другие действия. Ненужное состояние можно удалить, утащив соответствующую строку мышкой на маленькую кнопку-корзинку в правом нижнем углу панели Web Content (вот такую: Щ). Можно также создать копию состояния, притащив строку на кнопку Create Rollover State (такую: gi). Например, мы сначала создали только одно состояние Over, отредактировали рисунок таким образом, чтобы при подведении мышки кнопка вела себя каким-то симпатичным образом. Для состояния Down остается лишь подправить чуть-чуть предыдущую обработку. Чтобы не начинать все оформление сначала, мы и создадим копию состояния, и ее уже будем доделы вать. Наконец-то наша кнопка работает правильно. Как теперь задать адрес, по которому она будет отправлять посетителя сайта? Надо вызвать палитру Slice и ввести адрес в строке URL. Тут же можно заполнить и знакомые нам строки Target и Alt. В итоге - сохраняете файл как веб-страничку (Save Optimized или Save Optimized As) и наслаждаетесь основами JavaScript, нимало не задумываясь над тем, в чем эти основы состоят. Мел»: | циферблат_01 » Status tor Message Другой вариант. У вас есть большая картинка, но вы хотите сделать кнопкой только часть ее, а остальное оставить как есть - просто картинкой. Как все это организовать? В три шага. Сначала выделяете рамочкой «кнопочную» часть рисунка и нажимаете комбинацию CtrlShift-J, если хотите вырезать кнопку из рисунка, или Ctrl-J, если хотите сделать кнопку из копии и просто положить поверх основного рисунка. Выделенная часть изображения отделится от исходного изображения и окажется в новом слое, лежащем поверх него. Если вы посмотрите на панель слоев (Layers), то увидите, что там появилась новая строка - Layer 1, Layer 2 и т. п. Далее: щелкаете по этой строке мышкой (выбрана наша копия в новом слое) и выбираете в меню палитры Web Content команду Create Layer-Based Rollover (создать кнопку из слоя). А все остальное делается аналогично: создаются состояния, редактируются и т. п. ... Обратите внимание: для части рисунка, которую мы разместили на отдельном слое, можно задавать степень прозрачности в окошечке Opacity, которую вы найдете в правом верхнем углу палитры слоев. Кроме того, щелкнув по кнопке-глазку, которая имеется в каждой строке этой палитры, вы можете этот слой временно спрятать, а повторным щелчком - снова достать. Так вы сможете, к примеру, определить, скопировалась ваша кнопка или вырезалась из основного рисунка. Вообще работа со слоями составляет один из важнейших моментов обработки изображений в графическом редакторе Adobe Photoshop, но это тоже слишком длинный разговор, чтобы заводить его вот так, промежду прочим. Следующий вопрос. А что, так и придется делать кнопки по одной штучке и кусками перетаскивать в код страницы? Хотелось бы, знаете ли, сделать сразу все нужные кнопки и получить единый скрпит для них всех. Тем более что мы с вами не разбирались с устройством языка сценариев и не знаем, как одинаковые куски кода будут друг с другом взаимодействовать, оказавшись на одной странице. Что-то подсказывает (интуиция, наверное?), что плохо будут взаимодействовать. Как же получить сразу единый работоспособный код? Да в общем-то так же, как и в предыдущем примере. Помещаем каждый из рисунков на отдельном слое. (Если просто скопировать рисунок или его часть и вставить в Фотошопе, то он автоматически окажется в новом слое.) Теперь, поочередно выбирая слои, преобразуем каждый из них в кнопку командой Create Layer-Based Rollover (создать кнопку на основе слоя). Для каждой кнопки по отдельности оформляем состояния. Каждой кнопке назначаем свой адрес перехода. Проверяем. Сохраняем. Или открываем в веб-редакторе... Вот примерно таким макаром. Программа ImageReady обучена еще некоторым важным вещам. Например, в ней можно создать анимацию и сохранить в анимированном файле формата GIF, который понимают все без исключения браузеры, или формата Macromedia Flash, который понятен большинству браузеров (некоторым - при наличии специального плагина). Об этом читайте в главе «Создание анимации в программе Adobe ImageReady» в «Самоучителе компьютерной графики и звука».