close

Вход

Забыли?

вход по аккаунту

?

Использование прозрачных и невидимых кнопок

код для вставкиСкачать
Использование прозрачных и невидимых кнопок
Помните, что при наведении указателя на кнопку, она остается невидимой. Если вы сделаете кнопку без какой-либо графики для нажатого, отпущенного и состояния щелчка, кнопка будет прозрачной. Тем не менее, вы можете контролировать поведение невидимой кнопки во время нажатия на нее пользователем. Вы можете использовать прозрачные кнопки в Adobe Flash Professional CS5 так же, как используете горячие точки на изображениях в Adobe Dreamweaver CS5.
Создание кнопки
Первым шагом будет создание простой кнопки. Для этого:
1. Запустите Adobe Flash и создайте новый Flash документ (ActionScript 3.0).
2. Присвойте Слою 1 имя Графика.
3. Вставьте новый слой и назовите его Кнопка.
4. На слое Графика добавьте фотографию или картинку в рабочую область.
Документ на рис.1 содержит фотографию Сан-Франциско. Прозрачные кнопки можно поместить в разных местах фотографии. Пользователи смогут щелкать мышью по этим местам, чтобы получить информацию о предметах на фотографии. В этом упражнении вы создадите прозрачную кнопку, превращающую склон горы на фоне в активизируемую щелчком мыши область, ведущую к дополнительной информации. Рис.1 на стр.1. Фотография.
5. Перейдите на слой Кнопка.
6. Выберите инструмент Прямоугольник (Rectangle).
7. Выберите любой цвет заполнения.
8. Установите Цвет Обводки (Stroke Color) в режим Без Цвета (No Color).
9. Нарисуйте прямоугольник в той области картинки или фотографии, на которой вы хотите сделать кнопку (рис.2).
Рис.2 на стр.1. Прямоугольник, нарисованный поверх горы.
10. Выберите инструмент Стрелка (Selection).
11. Щелкните по прямоугольнику, чтобы выделить его.
12. Выберите команду меню Модификация ==> Преобразовать в символ (Modify ==> Convert To Symbol).
13. В диалоговом окне Преобразовать в символ (Convert To Symbol) введите имя кнопки в текстовом поле Имя (Name).
14. В меню Тип (Type) выберите значение Кнопка (Button).
15. Щелкните по кнопке ОК (ОК). Кнопка будет добавлена в библиотеку и сразу же появится над фотографией в рабочей области.
Придание прозрачности кнопке
Сейчас вы научитесь добавлять ключевой кадр во временную шкалу кадра щелчка и удалять кадр отпущенного состояния кнопки. Как результат, вы получите активную, но невидимую во флеш документе кнопку. Чтобы сделать кнопку прозрачной:
1. В рабочей области дважды щелкните по кнопке. Она откроется в режиме редактирования символа. Во временной шале будет выбран кадр кнопки в отпущенном состоянии (Up).
2. Добавьте ключевой кадр в кадр щелчка кнопки (Hit). 3. Выберите кадр отпущенного состояния кнопки (Up).
4. Нажмите клавишу Delete. Цветной прямоугольник, изображающий кнопку в кадре отпущенного состояния кнопки, будет удален из рабочей области. Кадр щелчка кнопки должен быть единственным кадром, содержащим цветной прямоугольник в рабочей области. Кадры отпущенного, нажатого и состояния наведения пусты, что и делает кнопку невидимой (рис.3).
Рис.3 на стр.2. Только в кадре щелчка по кнопке есть изображение.
5. В панели редактирования выберите Монтажный Кадр 1 (Scene 1). Сейчас кнопка прозрачна. Хотя вы все равно можете видеть ее в авторской среде (рис.4), кнопка будет невидима во время просмотра ролика. В этом примере кнопка представляет нам гору. Вы можете щелкнуть по ней и получить информацию об этой части фотографии.
Рис.4 на стр.2. Прозрачная кнопка на фотографии.
6. Сохраните файл.
Добавление сценариев ActionScript для перехода на сайт
Сейчас вы научитесь добавлять сценарии ActionScript к прозрачной кнопке, заставляющие Flash открывать новую веб страницу при нажатии на эту кнопку. Чтобы добавить сценарий ActionScript к кнопке:
1. Выделите ту кнопку, при нажатии которой будет открываться новая страница. В текстовом поле Назначить имя экземпляру (Instance Name) инспектора свойств присвойте экземпляру кнопки уникальное имя (рис.5).
Рис.5 на стр.3. Инспектор свойств кнопки.
В этом примере только один экземпляр невидимой кнопки в рабочей области (рис.4). Это экземпляр назван hills_button (рис.5) и располагается над горами, изображенными на фотографии.
2. В главной временной шкале ролика создайте новый слой и назовите его Действия (Actions).
3. Создайте ключевой кадр на слое Действия (Actions), который соотносится с ключевым кадром первого появления кнопки в рабочей области. Выделите этот ключевой кадр на слое Действия (Actions).
ПРИМЕЧАНИЕ
Если кнопка не появляется в этом кадре, Adobe Flash сгенерирует сообщение об ошибке, когда вы будете публиковать ролик, поскольку ActionScript, включаемый в этот кадр, будет ссылаться на объект, отсутствующий на рабочей области.
4. Выберите команду меню Окно ==> Действия (Window ==> Actions), чтобы отобразить панель инструментов Действия (Actions).
5. Если вы не видите панель сценария в панели Действий, щелкните по кнопке Помощник (Script Assist).
6. В наборе действий с левой стороны панели Действия (Actions) разверните категорию Flash.Events ==> EventDispatcher ==> Методы (Flash.Events ==> EventDispatcher ==> Methods). Дважды щелкните по значению AddEventListener. AddEventListener будет добавлен в панель сценариев панели инструментов (рис.6).
Рис.6 на стр.3. Метод AddEventListener в панели Действия (Actions).
7. Щелкните по предметному полю области сценариев панели Действия (Actions). Кнопка Вставить целевой путь (Insert A Target Path) станет активной.
8. Щелкните по кнопке Вставить целевой путь (Insert A Target Path). Откроется диалоговое окно Вставить целевой путь (Insert Target Path), как показано на рис.7.
Рис.7 на стр. 3. Диалоговое окно Вставить целевой путь (Insert Target Path).
9. Выберите опцию Относительный (Relative), выберите имя экземпляра вашей кнопки и щелкните кнопку ОК (ОК). 10. В наборе действий c левой стороны панели разверните категорию Flash.Events ==> MouseEven ==> Свойства (Flash.Events ==> MouseEvent ==> Properties). Найдите значение CLICK.
11. В панели сценариев выделите строку AddEventListener(), чтобы отобразить параметры этого метода. Затем щелкните по полю Тип (Type) области параметров.
12. В наборе действий дважды щелкните мышью по свойству CLICK. Помощник добавит это свойство в код в таком виде: MouseEvent.CLICK (рис.8).
Рис.8 на стр.4. Свойство CLICK в панели сценария.
13. В поле Слушатель (Listener) области параметров введите имя функции, которая будет выполняться при нажатии кнопки пользователем. Можно использовать любое имя, но убедитесь, что имя функции уникально и не содержит пробелов (например, openURL). Имя функции появится в панели сценария. Таким образом, вы присвоили функции имя, но вы ее еще не создали.
14. В наборе действий разверните Элементы Языка ==> Инструкции, ключевые слова и директивы ==> Ключевое слово определения (Language Elements ==> Statements, Keywords & Directives ==> Definition Keyword).
15. Дважды щелкните по Function в наборе действий. В панели сценария появится код создания функции.
16. В области параметров панели сценария введите имя функции в поле Имя (Name).
ПРИМЕЧАНИЕ
Имя функции должно быть точно таким же, какое вы ввели для функции AddEventListener. Имена функций чувствительны к регистру.
17. В области параметров панели сценария в поле Параметры (Parameters) введите event:MouseEvent (рис.9). В этом поле вы даете имя переменной (событию) и назначаете тип переменной (MouseEvent).
Рис.9 на стр.4. Параметры функции.
18. В наборе действий с левой стороны панели разверните категорию Flash.Net ==> Методы (Flash.Net ==> Methods).
19. Выделите строку функции в панели сценария дважды щелкните мышью по методу NavigateToURL в наборе действий. Метод будет добавлен к функции (рис.10).
Рис.10 на стр.4. Метод NavigateToURL в наборе действий.
20. В поле Запрос (Request) введите new URLRequest("http://www.adobe.com") (рис.11).
Рис.11 на стр.5. URL-адрес введен в поле Запрос (Request).
ПРИМЕЧАНИЕ
Адрес www.adobe.com замените на нужный вам веб-адрес.
21. Закройте панель Действия (Actions).
22. Сохраните документ.
23. Выберите команду меню Управление ==> Тестировать ролик ==> в Flash Professional (Control ==> Test Movie ==> In Flash Professional), чтобы протестировать кнопку. 24. Щелкните мышью по области созданной невидимой кнопки. Откроется окно браузера, и вы будете переадресованы на сайт, определенный кнопкой.
Больше информации об ActionScript ищите в главе "Использование ActionScript", "Начало работы с ActionScript" (в программе Flash выберите команду меню Справка ==> Справка Flash (Help ==> Flash Help))
Автор
Vasja
Vasja98   документов Отправить письмо
Документ
Категория
Другое
Просмотров
2 356
Размер файла
54 Кб
Теги
использование, прозрачных, кнопок, невидимый
1/--страниц
Пожаловаться на содержимое документа