CorelDRAW. Создание ролловера

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImage(pic, overpic) {
if (document.images && (preloadFlag == true)) {
document.src = overpic;
}
}

var preloadFlag = false;
function preloadImages() {
frame = new Array();
a = preloadImages.arguments;

if (document.images) {
for (i=0; iShow Rollovers (Окно=>Показать ролловеры ) и Window=>Show Styles (Окно=>Показать стили).

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

Вначале попытаемся создать самую простую анимированную кнопку, у которой ее состояния будут ассоциироваться с предварительно созданными в Photoshop слоями. Желающие подробнее ознакомиться с данным аспектом, могут заглянуть на следующие сайты: http://www.uwplatt.edu/~web/wtc/rollover.html , http://www.planetphotoshop.com/smith12.html и http://webschool.narod.ru/prof/photoshop/tools/rollover/ . Предположим, что создаваемая нами кнопка должна реагировать лишь на нажатие мыши — в этом случае вокруг нее будет появляться черный ободок. На все остальные события реакция будет отсутствовать.

Откройте Photoshop и создайте на белом фоне новый файл в формате RGB. Нарисуйте предполагаемую кнопку — сделать это удобнее всего с помощью прямоугольника или эллипса фиксированного размера. Расположите кнопку по центру. Появится слой Shape1 . Растеризуйте его, нажав на имени слоя правую кнопку и выбрав команду Rasterize Layer (Растеризация слоя). Сделайте копию слоя и на копии сформируйте вокруг кнопки рамку с помощью команды Select=>Modify=>Border (Выделение=>Модифицировать=>Граница) с шириной границы в 1 пиксел.

Перейдите в программу ImageReady Make Frames From Layers Animation. Окно Animation примет такой вид, как на рис. 1.

Рис. 1. Исходное состояние окна Animation

Удалите в окне Animation кадр, соответствующий фоновому слою. Среди оставшихся кадров выделите первый кадр, активизируйте палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние). В окне Rollovers появится состояние Over State . Измените тип состояния с Over State на Down State , нажав на имени состояния правую кнопку мыши и выбрав команду Set State=>Down (Установить состояние=>Down) — рис. 2. Окно Animation будет таким, как на рис. 3.

Рис. 2. Выбор команды Set State=>Down

Рис. 3. Окно Rollovers после создания состояния Down State

Теперь нужно отрегулировать состояние видимости слоев в соответствии с рис. 4 и 5.

Рис. 4. Окно Layers для состояния Normal

Рис. 5. Окно Layers для состояния Down State

Теперь нужно удалить последний кадр в окне Animation для состояния Normal — в итоге в каждом из состояний останется по одному кадру. После этого Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов, и перейдите в окно браузера. В открывшемся окне вы увидите не только работающую кнопку, но и информацию о графическом файле кнопки и HTML-код (рис. 6).

Рис. 6. Окно браузера с rollover-элементом

File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html) — HTML-код и графика, Images Only (*.gif) — только графика, HTML Only (*.html) — только HTML-код. В дальнейшем это позволит воспользоваться кнопкой. В данном примере был выбран вариант HTML and Images (*.html) и получены файл button1.html и серия графических изображений в папке images.

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

Откройте Photoshop и создайте на черном фоне новый файл в формате RGB. Напечатайте нужный текст (рис. 7), например, белым цветом и сделайте две копии текстового слоя. На первой копии (впоследствии она будет соответствовать наведенному состоянию) перекрасьте текст одним цветом, а на второй (она будет соответствовать нажатому состоянию) — в другой (рис. 8). Перед перекрашиванием каждый слой должен быть растеризован, для чего нужно нажать на имени слоя правую кнопку и выбрать команду Rasterize Layer (Растеризация слоя). Затем на копии тестовых слоев можно наложить какие-нибудь эффекты — в данном варианте применено размытие по Гауссу Filter=>Blur=>Gaussian Blur (Фильтр=>Размытие=>Размытие по Гауссу) с радиусом размытия в 1,5 пиксела.

Рис. 7. Исходный текст

Рис. 8. Окно Layers

Перейдите в программу ImageReady и создайте кадры на основе слоев, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation . Окно Animation примет вид, как показано на рис. 9.

Рис. 9. Исходное состояние окна Animation

Теперь в окне Animation выделите кадр, соответствующий наведенному состоянию, перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние). Активизируйте в палитре Rollovers состояние Normal, вернитесь в палитру Animation и сделайте активным кадр, соответствующий нажатому состоянию. Вновь перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние). Обратите внимание, что внешний вид палитры Animation напрямую зависит от состояния, выбранного в палитре Rollovers . Например, состоянию Over State в данном примере будут соответствовать такое окно Animation , как на рис. 10, состоянию Down State — как на рис. 11, а состоянию Normal — как на рис. 12.

Рис. 10. Внешний вид окна Animation для состояния Over State

Рис. 11. Внешний вид окна Animation для состояния Down State

Рис. 12. Внешний вид окна Animation для состояния Normal

Активизируйте состояние Normal в палитре Rollovers и удалите в палитре Animation все кадры, кроме того, который должен соответствовать состоянию Normal (рис. 13).

Рис. 13. Окно Animation для состояния Normal после удаления кадров

Скорректируйте видимость слоев для каждого из состояний в соответствии с рис. 14, 15 и 16.

Рис. 14. Окно Layers для состояния Normal

Рис. 15. Окно Layers для состояния Over State

Рис. 16. Окно Layers для состояния Down State

После этого изменится и внешний вид окна Animation для каждого из состояний (рис. 17, 18 и 19).

Рис. 17. Окончательный вид окна Animation для состояния Normal

Рис. 18. Окончательный вид окна Animation для состояния Over State

Рис. 19. Окончательный вид окна Animation для состояния Down State

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 20).

Рис. 20. Окно браузера с rollover-элементом

File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html); Images Only (*.gif); HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button2.html

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

Откройте ImageReady и создайте новый файл подходящих размеров и на белом фоне — в данном примере размер «холста» составляет 150x150 пикселов. Выберите нужный цвет для переднего плана, например коричневый. Цвет должен соответствовать будущему стилю кнопки.

Нарисуйте кнопку и расположите ее по центру (рис. 21). Исходное изображение будет соответствовать состоянию Normal в палитре Rollovers (рис. 22).

Рис. 21. Исходное изображение

Рис. 22. Исходное состояние окна Rollovers

Теперь нужно на основе состояния Normal кнопки создать наведенное и нажатое состояния кнопки. Самое простое — выбрать стиль, автоматически предполагающий три состояния кнопки, например стиль Wood 3-state Rollover (рис. 23). Подобные стили в палитре стилей обозначены в верхнем левом углу значком черного треугольника (рис. 24).

Рис. 23. Окно Rollovers после выбора стиля Wood 3-state Rollover

Рис. 24. Палитра Styles

После этого кнопка готова к предварительному просмотру. Чтобы посмотреть кнопку в работающем виде, в окне браузера щелкните на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов (рис. 25).

Рис. 25. Окно браузера с анимированной кнопкой

После этого нужно сохранить файл, применив команду File=>Save Optimized (Файл=> button3.html и серия графических изображений в папке images.

С более сложными и оригинальными примерами создания кнопок на основе имеющихся стилей вы можете ознакомиться на следующих сайтах: http://www.metamorephosis.com/ir3tutorial1.html и http://www.gurusnetwork.com/tutorials/photoshop/irrollovers1.html . Рассмотрим один из примеров подробнее.

Откройте ImageReady и создайте новый файл размером 150x150 пикселов на белом фоне, выберите нужный цвет для переднего плана, например коричневый, как в данном примере. Нарисуйте кнопку и расположите ее по центру (рис. 26).

Рис. 26. Исходное изображение

Чтобы сделать кнопку более привлекательной, наложите на нее подходящий стиль, например стиль Floating Plastic , как в этом случае (рис. 27).

Рис. 27. Внешний вид кнопки после наложения стиля Floating Plastic

Внесите небольшие изменения в настройках отбрасываемой тени, воспользовавшись командой Layer=>Layer Styles=>Drop Shadow (Слой=>Стили слоя=>Отбросить тень). Появится окно настройки тени, в котором следует изменить параметр Opacity (Непрозрачность) до значения 50% и установить Distance (Дистанция) равной 10 (рис. 28). Вид кнопки представлен на рис. 29.

Рис. 28. Окно настройки параметров Drop Shadow

Рис. 29. Внешний вид кнопки после корректировки параметров Drop Shadow

Теперь на основе состояния Normal кнопки нужно создать наведенное и нажатое состояния кнопки. Для этого в палитре Rollovers дважды щелкните на кнопке Create Rollover state (Создать ролловер-состояние) — в итоге в окне Rollovers появится три состояния кнопки (рис. 30).

Рис. 30. Окно Rollovers после генерации наведенного и нажатого состояний кнопки

После этого потребуется наложить подходящие стили на два новых состояния кнопки. Выберите вначале состояние Over State (Наведенное состояние) и кликните на стиль Button Up . Затем выберите состояние Down State (Нажатое состояние) и кликните на стиль Button Down (рис. 31, 32 и 33).

Рис. 31. Нормальное состояние кнопки

Рис. 32. Наведенное состояние кнопки

Рис. 33. Нажатое состояние кнопки

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 34).

Рис. 34. Окно браузера с анимированной кнопкой

После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html), Images Only (*.gif), HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button4.html и серия графических изображений в папке images.

Кроме того, в данном случае дополнительно сохраните файл кнопки в формате psd с помощью команды File=>Save Optimized (Файл=>Сохранить с оптимизацией) — он понадобится нам в следующем разделе.

Очень интересный пример формирования оригинального дизайна кнопки за счет наложения на нее узоров приводится на сайте http://www.metamorephosis.com/ir3tutorial2.html . С ним и ознакомимся.

Откройте в ImageReady сохраненный в предыдущем разделе в формате psd файл и выберите в палитре Rollovers состояние Down State (Нажатое состояние). Перейдите в меню Layer=>Layer Style=>Pattern Overlay (Слой=>Стиль слоя=>Наложить узор). В появившейся палитре Pattern Overlay выберите стрелку, которая находится справа от окна просмотра узоров, и выберите узор Intricate Surface или любой другой по вашему усмотрению (рис. 35).

Рис. 35. Выбор узора в палитре Pattern Overlay

После этого кликните на каждом из двух других состояний кнопки и повторите команду Layer=>Layer Style=>Pattern Overlay (Слой=>Стиль слоя=>Наложить узор). Вновь выбирать данный узор вам не придется, поскольку он сразу же окажется наложенным на данное состояние кнопки. В итоге, например, в состоянии Normal кнопка будет выглядеть примерно так, как на рис. 36.

Рис. 36. Внешний вид кнопки после наложения узора (состояние Normal)

Сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html), Images Only (*.gif), HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button5.html и серия графических изображений в папке images.

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

Откройте Photoshop и создайте на черном фоне новый файл в формате RGB. Напечатайте нужный текст (рис. 37). На новом слое создайте изображение, которое планируете перемещать. В данном примере (рис. 38) изображение было скопировано из вспомогательного файла bullet.gif (он заимствован с сайта http://brat2.film.ru/). В итоге в случае видимости обоих слоев изображение будет напоминать рис. 39; вид окна слоев представлен на рис. 40.

Рис. 37. Исходный текст

Рис. 38. Вспомогательная картинка из файла bullet.gif

Рис. 39. Исходный текст с наложенным дополнительным слоем

Рис. 40. Окно Layers

Перейдите в программу ImageReady и создайте кадры на основе слоев, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation . Окно Animation примет такой вид, как на рис. 41.

Рис. 41. Исходное состояние окна Animation

В окне Animation выделите кадр, соответствующий наведенному состоянию (в данном примере это последний кадр), перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние) — будет создано состояние Over State . Активизируйте состояние Normal и удалите лишний кадр, соответствующий наведенному состоянию «кадр с пулей», в результате чего останется один кадр (рис. 42).

Рис. 42. Конечное состояние окна Animation для состояния Normal

Активизируйте состояние Over State , перейдите в палитру Animation и создайте дублирующий кадр, щелкнув на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation . Немного переместите на созданном кадре пулю вправо (рис. 43).

Рис. 43. Внешний вид окна Animation для состояния Over State

При активном втором кадре создайте промежуточные кадры, щелкнув на кнопке Tweens animation frames (Связать кадры) в палитре Animation при установках, представленных на рис. 44. Палитра Animation для состояния Over State показана на рис. 45.

Рис. 44. Окно настройки команды Tween

Рис. 45. Конечное состояние окна Animation для состояния Over State

Отрегулируйте состояние видимости слоев для каждого из состояний: в состоянии Normal должны быть видны фон и текстовый слой, а в состоянии Over State — фон и слой с пулей.

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 46).

Рис. 46. Окно браузера с rollover-элементом

После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html), Images Only (*.gif), HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл button6.html и серия графических изображений в папке images.

Ролловер-эффектом называют изменение состояния (формы, положения) объекта при наведении на него курсора. В этой статье мы научимся создавать такой эффект в Pano2VR на простом примере с дверью. При наведении курсора на дверь, она будет принимать открытое состояние, а в случае покидания курсора - закрытое. Для этого нам понадобятся 2 сферические панорамы, снятые с одной точки и имеющие отличия в одной и той же области изображения. Примеры панорам показаны на рис.1 и рис. 2. Я сделал одну панораму с закрытой дверью, которая будет использоваться как основная, вторую сделал с открытой дверью. От второй панорамы будет использован небольшой участок.

Рисунок 1. Вариант панорамы с закрытой входной дверью.

Рисунок 2. Вариант панорамы с открытой входной дверью.

Загрузим второй вариант в Pano2VR и с помощью инструмента Корректор извлечем участок изображения, где находится дверь.

Рисунок 3. Извлечение участка изображения.

Угол обзора (FoV) делаем минимально возможным (рис. 4) чтобы не брать лишние детали и не получить в результате файл большого размера. При необходимости изменяем параметры Pan и Tilt.

Рисунок 4. Установка параметров вида для извлечения участка изображения.

После извлечения корректировки загружаем первый вариант панорамы и установив те же параметры извлекаем корректировку. В результате имеем 2 файла изображения, с которыми будем работать дальше.

Рисунок 5. Совмещение извлеченных корректировок.

Обе корректировки могут неидеально совпадать. Где-то могут быть не нужные блики. В данном случае отражения в окнах на обоих изображениях немного различаются, а также присутствует отличие по тону. При последовательной смене изображений это заметно (рис. 5). Для устранения этого артефакта выполним следующие действия.

Откроем графический редактор, например Adobe Photoshop и загрузим в него как слои оба файла корректировок. Расположим вторую корректировку выше первой.

Рисунок 6. Корректировки, загруженные в Adobe Photoshop.

К верхнему слою добавим маску и черной кистью с минимальной жесткостью зарисуем все, кроме открытой двери. Чтобы лучше видеть закрашиваемую область, нижний слой можно отключить (рис. 7).

Рисунок 7. Добавление маски к слою.

Включим все слои и выполним сведение пункт меню Слои -> Выполнить сведение. Сохраняем полученный результат. Это изображение будем использовать в дальнейшем.

Создаем новый проект и загружаем в него первый вариант панорамы. Затем экспортируем в формат Flash или HTML5 (рис. 8).

Рисунок 8. Экспорт в HTML5.

В появившемся окне в секции «Шаблон контроллера и оформления» выбираем файл оформления (.ggsk) и нажимаем на кнопку Редактировать.

Перетаскиванием добавим изображение, которое было получено в Photoshop. Для удобства отсчета координат установим позицию в x:0, y:0. Дадим компоненту имя «door_opened».

На панели инструментов активируем кнопку и на холсте создаем новую метку активной зоны. Дадим компоненту имя «hs_door». Позицию установим в центр изображения. Так как размеры изображения 695x695 пикселей, то центр находится в позиции x:348, y:348 (рис. 10). Включим свойство Cursor-Hand, чтобы при наведении курсор принимал вид руки-указателя.

Рисунок 10. Свойства позиции хотспота.

В группе «Хотспот шаблон» (рис. 11) включаем свойство 3D дисторсия и задаем значение свойству 3D дистанция, которое вычисляется по формуле: 3Dдист=Ширина панорамы / 2 / Pi. 3Dдист=6000 / 2 / 3,1415 = 954,9.

Рисунок 11. Группа «Хотспот шаблон».

Сделаем компонент «door_opened» вложенным в элемент «hs_door» (рис. 12)

Рисунок 12. Компоненты оформления.

Нужно сделать так, чтобы изображение, скрытое изначально, показывалось при наведении курсора на активную зону. Для плавности показа будем использовать свойство «Прозрачность» вместо свойства «Отображение». Установим прозрачность компонента «door_opened» в 0 (рис. 13).

Рисунок 13. Группа «Внешний вид». Свойства компонента «door_opened».

Так как компонент «door_opened» полностью прозрачен, он не может реагировать на наведение курсором. Поэтому добавим прямоугольник поверх изображения. Размеры прямоугольника подбираем таким образом, чтобы он вписывался в габариты закрытой двери (рис.14). Компоненту дадим имя «rectangle».

Рисунок 14. Контекстное меню панорамы с добавленными пунктами.

В этом уроке мы рассмотрим создание простой анимированной кнопки - ролловера. Графические ссылки на Web-страницах значительно лучше воспринимаются, если они меняют свой вид при наведении на них мыши и при щелчке мышью. В CorelDRAW создание таких объектов автоматизировано.

Ролловеры являются интерактивными объектами, которые изменяются при нажатии или наведении на них указателя. Для создания ролловера необходимо добавить следующие состояния ролловера:

Норма : состояние кнопки по умолчанию, при котором для кнопки не выполняются никакие действия мышью.

Наведение : состояние кнопки при наведении на нее указателя мыши

Нажатие : состояние кнопки при ее нажатии

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

Внешне ничего не изменится, но теперь вместо нескольких объектов в документе имеется нажимаемая кнопка в обычном состоянии, о чем говорит надпись в строке состояния Rollover [ОБЫЧНОЕ].

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

После перехода в режим редактирования мы должны создать рисунки для двух других положений кнопки. Выберите в списке, расположенном в левой части панели Интернет , вариант СВЕРХУ . Мы перешли к редактированию кнопки, когда на нее установлен указатель мыши. Закрасим текст черным цветом. Так будет выглядеть кнопка при прохождении над ней указателя мыши.

Теперь выберите в списке вариантов рисунка значение СНИЗУ . Теперь осталось нарисовать нажатую кнопку. В качестве заготовки предлагается первый вариант. Нижний прямоугольник переместите выше и правей. Теперь кнопка выглядит нажатой.

Нажмите кнопку Завершить редактирование ролловера , чтобы закончить редактирование кнопки и вернуться в обычный режим работы редактора.

Теперь можно посмотреть, что у нас получилось. Нажмите кнопку Прямой предварительный просмотр ролловера и посмотрите как будет работать анимация.

Установите указатель мыши на созданной вами кнопке, и рисунок на ней изменится. Нажмите кнопку мыши, и не отпускайте ее. Пока вы нажимаете кнопку мыши, на созданной кнопке нарисован третий рисунок. Отпустите кнопку мыши и отведите указатель мыши в сторону. На кнопке вновь появится начальный рисунок.

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

На экране появится диалог, в котором настраивается формат, расположение, имя HTML-документа (в закладке Таблица).