ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание Flash-меню. Символ Кнопка

Создание Flash-меню

Меню и кнопки управления прочно вошли в состав сайтов, в которых важную роль играет интерактивность. Кнопки, выделяясь своим видом, так и просятся чтобы на них нажали. Благодаря Flash технологиям стало возможно то, чего нельзя добиться с помощью динамичного HTML или JavaScript. Рассмотрим на примере интерактивного меню, создание динамичных Flash-кнопок.

Символ Кнопка (Button)

Создадим интерактивное меню состоящее из кнопок. Для этого откроем файл, где ранее были нарисованы кнопки или нарисуем новые. Как это сделать мы рассматривали на странице Создание кнопок. Принципы работы с инструментами рисования и операции над объектами. Прямоугольные кнопки.

Для кнопки Flash-разработчики предусмотрели отдельный символ типа Кнопка (Button), который создается по тому же принципу, что и любой другой Flash-символ.

И так создаем образец кнопки.

Образец кнопки

А теперь преобразуем образец в символ. Для этого выделим созданный образец кнопки и нажмем клавишу <F8>. В появившемся диалоговом окне Преобразовать в символ введем название, как указано на рисунке и выберем тип Кнопка.

Символ Образец

А теперь остановимся на принципе работы кнопки.

Кнопка — эти один из четырех типов Flash-символов. Для создания Flash-симола выделим кнопку и нажмем комбинацию клавиш <Ctrl>+<F8>. В появившемся диалоговом окне Создать символ выбираем пункт Кнопка. Диалоговое окно Создать символ также можно вызвать через меню Вставить > Новый символ.

Создать символ

После нажатия ОК на панели Timeline (Монтажная линейка) появится начинка кнопки, содержащая четыре кадра с заголовками Вверх, Прохождений, Вниз, Попаданий.

Перетянем на сцену Главная символ Образец.

Панель монтажная линейк а с символом Кнопка

Рассмотрим состояния кнопки, отображаемые на панели Timeline (Монтажная линейка), которые являются реакцией на действия мыши.

  • Вверх — показывает состояние кнопки, когда курсор находится вне ее;
  • Прохождений —курсор мыши наведен на кнопку;
  • Вниз — отражает состояние кнопки, когда по ней производится щелчек левой кнопкой мыши;
  • Попаданий —определяет область в клипе, которая будет реагировать на действие мыши. Эта область не отображается в клипе.

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

Отредактирем основные состояния кнопки.

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

Теперь создадим надпись на кнопке. С помощью инструмента Текст (кнопка Т) напишем слово Главная. Выделим его и преобразуем в символ типа Графика.Зачем это нужно сделать будет изложено дальше. Установим символ на кнопку.

Символ типа графика

Прохождений — отмечаем курсором мыши состояние Прохождение и нажимаем клавишу <F6>. В кадре под заголовком Прохождение появилась такае же жирная точка. что и в Вверх, а на сцене изображение кнопки с предыдущего кадра. Давайте изменим изображение. Выделим заливку кнопки и на панели Свойства из выпадающего списка Цвет выберем пункт Тон и изменем цвет заливки. Затем выделим текст и также изменим цвет надписи.

Замена цвета кнопки

Вниз — нажмем клавишу <F6> на кадре Вниз. Изменим цвет кнопки на однородный и поменяем также цвет текста.

Состояние кнопки Вниз

Попаданий — нажмем клавишу <F6> в соответствующем кадре и удалим изображение кнопки. На ее месте, с помощью инструмента Прямоугольник, создадим фигуру, определяющую область, чувствительную к действиям мыши. Размер прямоугольника должен немного превышать размер кнопки.

Состояние кнопки Попаданий

Дублирование символов

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

Откроем панель Библиотека, выделим пункт Главная и нажмем правую кнопку мыши. В появившемся контекстном меню выберем пункт Дублировать.

Контекстное меню символа на панели Библиотека

Дублировать символ

В диалоговом окне Дублировать символ необходимо ввести имя новой кнопки, в нашем случае Новости.

Примечание. На основе одного типа символа, можно сделать символы другого типа Фрагмент ролика или Графика. Четыре состояния кнопки отобразяться на панели Timeline как четыре последовательных ключевых кадра.

После того как была нажата кнопка ОК и на панели Библиотека появился новый символ Новости, нам необходимо его открыть, чтобы изменить название.

Открыв. мы окажемся в точной копии только что созданного символа. Теперь нам придется произвести замену слова Главная на слово Новости для всех состояний кнопки.

Для этого сделаем следующее. выделим символ Графика с текстом и переместим внимание на панель Свойства, где найдем кнопку Замена.

Панель Свойства

Нажмем кнопку Замена. Появится диалоговое окно Заменить символ.

Заменить символ

Для замены символа нажмем на пиктограмму Дублировать символ. Появится диалоговое окно дублировать символ. Заменяем имя символа на новости и нажимаем ОК.

Дублировать символ

Заменить символ

На панели Библиотека появится новый символа пипа Графика новости. Щелкнем дважды по нему левой кнопкой мыши. На сцене появится слово Главная, заменим его на слово Новости, используя инструмент Текст (Т).

Откроем символ типа кнопка Новости и произведем замену слов на каждом кадре символа.

Две кнопки у нас готовы. Создадим таким же образом еще несколько кнопок О себе, Услуги, Контакты