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

Система навигации – один из главных компонентов любого сайта. Это может быть меню, разворачивающийся список, просто ссылки. Многие выбирают меню и сразу встаёт вопрос, а как его делать и с помощью чего. Сегодня мы попытаемся сделать меню с помощью программы Macromedia Flash. Версия может быть любой (желательно выше 6-ой).
Для начала нужно для себя уточнить несколько моментов: много ли пунктов будет, вертикальное или горизонтальное расположение меню, простое или сложное меню, можно ли будет добавлять пункты автоматически, какие эффекты будем использовать. То есть представить себе будущее меню. Самое главное при создании любого программного продукта (а меню, даже самое простейшее, таковым и является) - ясно представлять себе конечный результат. Для примера возьмём простое горизонтальное меню, с 5-ю пунктами, без автоматического добавления новых элементов, с изменением цвета при наведении.
Пожалуй, приступим. Цель ясна.
1. Откройте программу Macromedia Flash. Создайте новый документ с любыми размерами.

2. Так как мы будем создавать достаточно простое меню, то за основу возьмём прямоугольник. Нарисуйте прямоугольник, выделите его и нажмите на правую кнопку. В контекстном меню выберите пункт Convert to Symbol (Преобразовать в символ). В открывшемся диалоговом окне выберите MovieClip (Ролик) и нажмите OK.

3. Мы создали клип, в котором будет кнопка и то, что будет отображаться, если пользователь уже находится в этом разделе. Для создания кнопки опять выделите прямоугольник и проделайте действия, описанные в предыдущем пункте. Только вместо MovieClip (Ролик), выберите Button (Кнопка). Открываем кнопку двойным щелчком и видим 4 кадра – Up (Вверх), Over (Над), Down (Вниз), Hit (Нажатие). Каждый кадр отображается при определённых действиях. Первый – когда курсор не над кнопкой, Второй – когда пользователь наводит мышь на кнопку, Третий – когда нажимаешь на кнопку и последний – область нажатия кнопки.

4. Немного о дизайне кнопки. Если вы решили использовать свой дизайн кнопки, то пропустите этот пункт. Как один из вариантов, могу предложить сделать её в оттенках серого. Сама по себе кнопка – светлая, при наведении становится темнее, при нажатии ещё темнее. Поэтому первый кадр – цвет кнопки #EAEAEA (выделите кнопку и введите этот код в панели цветового микшера (Color Mixer)). Второй кадр - #D9D9D9, третий - #BBBBBB. Четвёртый кадр можете сделать любого цвета (он всё равно не отображается). Чтобы меню выглядело профессиональнее, во второй кадр нужно добавить трёхмерности. Для этого создайте второй слой в этом мувиклипе. Выделите второй кадр первого слоя (он должен быть нижним). Выберите Правая кнопка – Copy Frames (скопировать кадры). И во втором слое, 2-й кадр, выберите Правая кнопка – Paste Frames (вставить кадры). В верхнем слое выделите второй кадр и сделайте его заметно темнее (например, #999999). Затем, не снимая выделения, выберите в главном меню пункт Modify (Изменить) – Shape (Форма) – Soften Fill Edges (Смягчить грани заливки). В открывшемся окне введите Distance (расстояние) – 4 px, Number of Steps (Количество шагов) – 4. Direction (Направление) – Insert (Вставить). Теперь опять выделите центр прямоугольника во втором слое – самую большую его часть – и удалите. Осталось только окантовка из 4 линий различной прозрачности. Именно она и создаёт трёхмерность.

5. Продолжим делать меню. Скопируйте второй кадр (выберите Правая кнопка – Copy Frames (скопировать кадры)) и выйдете из этого мувиклипа в родительский. Создайте в нём второй кадр (пустой) и вставьте кадр, который скопировали (Правая кнопка – Paste Frames (вставить кадры)). Создайте новый слой и назовите его AS. В первом кадре нового слоя в панели Actions (Действия) введите stop();.

6. Выйдите на главную сцену. Мы видим на рабочем поле всего лишь один прямоугольник, то есть один пункт меню. Так как у нас их должно быть 5, то скопируйте его и вставьте рядом (если это горизонтальное меню) или вниз (если это вертикальное) с помощью комбинаций ctrl+C и ctrl+V. Они могут лежать в одном слое. Назовём его Buttons. Теперь у нас на рабочем поле 5 прямоугольников, которые являются клипами. Выделите первый и введите в поле Instance name (Имя копии) – btn1. Поле находится на панели Properties (Свойства) внизу окна (если оно не открыто - откройте его). То же самое проделайте с остальными клипами, только меняя имя каждого btn2, btn3, btn4, btn5 – вот что должно получиться у вас.

7. Войдите в любой из этих мувиклипов двойным нажатием левой кнопки мыши. Выделите прямоугольник, который является кнопкой, в первом кадре и откройте панель Actions (Действия), переведите её в экспертный режим (стрелка на верху панели или надпись Script Assist). Введите туда следующий код:

on(release){ //Следующий код будет выполняться при нажатии на кнопку
bt=this._name; //Проверяем имя кнопки
btr=bt.charAt(3);//Отделяем изменяемую часть в названиях мувиклипов на главной сцене от неизменяемой btn.
btr1=Number(btr);//переводим её в числовой вид
switch(btr1){
case 1:
getURL("index.html","_blank");//Если это 1-я кнопка
break;
case 2:
getURL("index.html","_blank");//Если это 2-я кнопка
break;
case 3:
getURL("index.html","_blank");//Если это 3-я кнопка
break;
case 4:
getURL("index.html","_blank");//Если это 4-я кнопка
break;
case 5:
getURL("index.html","_blank");//Если это 5-я кнопка
break;
}
}

Стоит немного рассказать о функции getURL("index.html","_blank"); Эта функция позволяет открывать другую web-страницу. Вместо "index.html" введите свой адрес странички (абсолютный с http:// или относительный) тоже в кавычках. "_blank" – в каком окне будет открываться страница. Варианты: _blank – в новом окне
_self – в этом же окне
_parent – в этом же фрейме
_top – поверх всех фреймов.

8. Теперь у нас меню реагирует на нажатие левой кнопки мыши и меняется при наведении. Пока нет текста, поэтому создадим новый слой на главной сцене. Назовём его Texts. Создайте текстовое поле и растяните его над первой кнопкой. Шрифт можете выбрать любой. но для уменьшения размера файла советую выбрать один из встроенных: _sans, _serif, _typewriter. Расположение текста выберите центральное. Текстовое поле растяните над кнопкой по всей длине (чтобы текст был ровно посередине кнопки). Введите название кнопки. Затем скопируйте текстовое поле 4 раза и разместите копии над остальными прямоугольниками, меняя текст. Основная работа закончена. Поэтому выделите на главной сцене все мувиклипы и введите координаты на панели Properties (Свойства) X: 0.0, Y: 0.0. Кликните по любому свободному месту в документе и в панели Properties (Свойства) измените размеры документа. Рядом с Size (размерами документа) есть кнопка с указанием размеров. При нажатии откроется диалоговое окно. В нём в поле Match (подгонка) выберите Contents (Содержание) и нажмите OK. Теперь размеры документа точно соответствуют размерам меню.

9. Меню, в принципе, готово. Осталось только сделать так, чтобы в разделе, где находится меню, на кнопку этого раздела нельзя было нажать, а также, чтобы она каким-то образом выделялась. Для этого у нас есть второй кадр любого мувиклипа, что находятся на главной сцене. Создадим переменную, которую будем изменять из браузера (в следующем пункте, я объясню как это сделать). Переменную назовём btname, но нигде её объявлять не будем. На главной сцене создайте новый слой Action Script, который будет выше всех остальных слоёв. В первый кадр этого слоя вставьте следующий код:
_root["btn"+btname].gotoAndStop(2);//Этим кодом мы переходим на второй кадр того мувиклипа, который указан в переменной btname.

10. Теперь остаётся опубликовать документ в виде html. Для этого выберите в главном меню File (Файл) – Publish Settings (Общие настройки). На главной закладке Formats (Форматы) отметьте галочкой (если ещё не отметили) HTML (.html). Нажмите Publish (Публиковать). Сохраните документ под именем menu, например. Выйдите из программы Macromedia Flash и откройте файл menu.html. Вы видите меню, которое мы с вами делали в течение 10 пунктов. Выберите Правая кнопка – Просмотр HTML-кода (View Source). Вы увидите следующий код:

Выделенные элементы изменены в соответствии с вашими параметрами меню. 8,0,0,0, может быть 6 или 7 – это зависит от того, какой версией программы Macromedia Flash вы пользовались.
600 и 80 – это размеры вашего меню.
menu.swf?btname=1 – этот пункт особенно важен, так как именно он изменяет, какая кнопка уже нажата, то есть в каком разделе находится меню. Если 1 – то первая кнопка нажата, если 2 – то вторая, и так далее.
Не забудьте, указать тоже самое и в теге embed (для других браузеров, кроме IE).
Таким образом, всего лишь за 10 пунктов вы создали простое меню с помощью Flash’а. Вы можете сделать его вертикальным, для этого нужно просто по-другому разместить мувиклипы на главной сцене или изменить дизайн. С помощью этого меню вы можете подсказывать пользователю сайта в каком разделе он находится.

У вас должно было получиться примерно такое меню. Если что-то не получилось или есть ошибки, пройдите ещё раз через все пункты создания меню. Дизайн вы сможете разнообразить настолько, насколько хватит фантазии.
Конечно, это одно из простейших Flash-меню, но, только научившись делать такие меню, можно переходить к более сложным вариантам.

Заработок в нете

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

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

Сообщений 1 страница 1 из 1

Поделиться12007-08-08 23:48:09