Самоучитель Illustrator CS 2004



         

8.2. Работа с форматом SVG - часть 2


Рис. 8.14. Исходная фигура

Создание интерактивного SVG несет в себе элементы программирования, поэтому всем объектам необходимо дать имена, чтобы потом их использовать.

Выделите крест и откройте палитру Layers (Слои). Развернув единственный слой, найдите этот объект и переименуйте его в cross.

ВНИМАНИЕ

В именах при сохранении интерактивного SVG нельзя использовать пробелы и подчеркивания. Поэтому даже Layer 1 необходимо переименовать в Layerl.

Для переименования дважды щелкните левой кнопкой мыши на объекте и измените имя в открывшемся окне (рис. 8.15).

Рис. 8.15. Окно свойств объекта

Далее сгруппируйте (Ctrl+G) крест с кругом и аналогичным способом переименуйте Group в all.

Так как работать мы будем с JavaScript-процедурами, необходимо подключить файл с описанием этих процедур. Этот файл вы можете найти по адресу http://wnk.biz или написать сами, если уверенно владеете JavaScript.

Чтобы выполнить подключение файла, воспользуйтесь палитрой SVG Interactivity (SVG-интерактивность): Window > SVG Interactivity (Окно > SVG-Интерактивность). Щелкните на кнопке в виде стрелки на палитре и выберите в открывшемся меню JavaScript Files (рис. 8.16).

Рис. 8.16. Окно подключения JavaScript-файла

Щелкните на кнопке Add (Добавить) и найдите файл events.js на жестком диске.

После этого можно приступать непосредственно к заданию интерактивности. Это делается методами объектно-ориентированного программирования, через события и атрибуты к ним. Если вы занимались программированием хотя бы на любительском уровне, то вам все будет очень просто и знакомо.

  • 1. В Event (Событие) палитры SVG Interactivity (SVG-интерактивность) выберите событие onmouseover и впишите в строке JavaScript: eLemStrokeWidth(evt, 'all', '2.5'). Это значит, что когда мышь будет находиться над фигурой, толщина обводки станет равна 2,5 пиксела.
  • 2. Мы не станем комментировать значение следующих строк, так как это имеет отношение к программированию на JavaScript. Далее выберите onmouseout и впишите: elemStrokeWidth (evt, 'all', '1).



  • Содержание  Назад  Вперед