Иллюстрированный самоучитель по WEB-графике

Раскрывающееся меню


Без меню не обходится практически ни одна Web-страница. Есть несколько способов создания меню в Flash. Рассмотрим один из них. У нас будет главная кнопка. Наведение на нее указателя мыши раскроет ряд других кнопок, составляющих подменю. Если щелкнуть на кнопке подменю, то выполнится некоторое действие, например, переход на Web-страницу по указанному URL-адресу. Если указатель мыши окажется за пределами кнопок подменю, то они исчезнут, а главная кнопка останется.

Рис. 610. Пример раскрывающегося меню

Сначала рассмотрим план реализации нашего меню:

  • 1. Создать главную кнопку и разместить ее в кадре1. Добавить к этому кадру действие Stop.

  • 2. Добавить к главной кнопке (не кадру !) действие перехода к другому кадру, например, кадру 5.

  • 3. В кадре 5 разместить главную кнопку и кнопки подменю. Таким образом, щелкнув на главной кнопке в кадре 1, мы перейдем в кадр 5, содержащий раскрытое меню.

  • 4. Добавить к каждой кнопке подменю их собственные действия — переходы по некоторму URL-адресу.

  • 5. В кадре 5 создать еще одну кнопку без всяких украшений. Сделать ее невидимой. Ее активная область (Hit) должна охватывать все рабочее поле за исключением области, занятой главной кнопкой и кнопками подменю. Добавить к этой кнопке действие перехода к кадру 1, если указатель мыши находится над ней (т. е. если указатель мыши вышел за область кнопок меню).

    • Теперь перейдем к алгоритму реализации нашего плана. Начнем с создания четырех слоев (Insert>Layer):

  • 1. Для хранения действий кадров. Назовем его Actions (Действия).

  • 2. Для главной кнопки меню. Назовем его Main (Главная).

  • 3. Для кнопок подменю. Назовем его Submenu (Подменю).



  • 4. Для остальной части рабочей области. Назовем его Other (Остальная).

    • Далее поступайте следующим образом:

  • 1. В слое Actions создайте ключевые кадры 1 и 5. Добавьте к этим кадрам действие Stop.

  • 2. В слое Main создайте ключевой кадр 5.

  • 3. В слое Main выделите кадр 1. Создайте новый символ типа Button (Кнопка). Нарисуйте кнопку. Экземпляры этого символа мы используем и для кнопок подменю.




  • 4. Щелкните на кадре Over и нажмите клавишу <F6>, чтобы вставить ключевой кадр. Нарисуйте кнопку для состояния Over. Обычно это просто модификация изображения для состояния Up.


  • 5. Щелкните на кадре Down и нажмите клавишу <F6>. Нарисуйте изображение кнопки для этого состояния.


  • 6. Выполните команду Edit>Edit Movie (Редактировать>Редактировать Мультфильм), чтобы покинуть временную шкалу кнопки и вернуться к главной временной шкале (шкале сцены).


  • 7. Откройте окно библиотеки (Window>Library). Перетащите из него экземпляр символа кнопки на рабочее поле, например, в левый верхний угол.


  • 8. Откройте окно Object Actions (Window>Actions) и выберите действие Go To (Перейти к). В поле Туре (Тип) установите значение Frame Number (Номер кадра), а в поле Frame (Кадр) введите значение 5. Выделите первую строку программного кода и установите флажок Roll Over (Переместить над) и снимите флажок Release (Отпустить). В результате при пересечении указателем мыши главной кнопки произойдет переход к кадру 5, в котором будут находиться кнопки подменю.


  • 9. Создайте на кнопке какой-нибудь текст.


  • 10. Сохраните полученный результат (File>Save).


  • 11. В слое Submenu выделите кадр 5 и нажмите клавишу <F6>, чтобы он стал ключевым. Перетащите экземпляр своей кнопки из окна библиотеки непосредственно под первую кнопку. Перетащите еще один экземпляр кнопки под вторую. Сделайте это столько раз, сколько вам нужно. Если хотите, можете воспользоваться панелью Align (Выравнивание). Добавьте к кнопкам текстовые надписи.


  • 12. Добавьте к кнопкам подменю какие-нибудь действия, например, Get URL или Go To and Play.


  • 13. В слое Other выделите кадр 5 и нажмите клавишу <F6>, чтобы он стал ключевым.


  • 14. Нарисуйте прямоугольник, немного перекрывающий рабочее поле. Цвет заливки выберите заметно отличающимся от цвета кнопок.


  • 15. Выберите другой цвет заливки, отличающийся от цвета большого прямоугольника и цвета кнопок. Нарисуйте прямоугольник, охватывающий все кнопки. Выделите только этот прямоугольник и нажмите клавишу <Delete>. В предыдущей главе мы уже описывали, что происходит в этом случае. В результате у вас получится большой прямоугольник, который закрывает все, кроме кнопок.


  • 16. Преобразуйте большой прямоугольник в символ типа Button.


  • 17. Выполните команду Edit>Edit Symbols(Редактировать>Редактировать символы).


  • 18. Выделите кадр Hit и нажмите клавишу <F6>, чтобы сделать его ключевым.


  • 19. Выделите кадр Up и нажмите клавишу <Delete>.


  • 20. Выполните команду Edit>Edit Movie (Редактировать>Редактировать мультфильм). Теперь большой прямоугольник будет отображаться прозрачным голубым цветом. Выделите его и выполните команду Window>Actions (Окно>Действия), чтобы открыть окно Object Actions (Действия объекта). Выберите действие On Mouse Event (По событию мыши). Установите флажок Roll Over и снимите флажок Release. Добавьте действие Go To, оставив значение параметра по умолчанию, т. е. 1.



    • Содержание раздела