Представьте, что вы пообещали своему клиенту, что у него будет идея меню, о которой вы ему рассказали позже сегодня, когда вы встретитесь. Вы открываете Flash и начинаете грубый, но отличный пример, который вы можете кодировать или расширить позже. В течение этого времени мы сосредоточимся на создании именно такого меню; максимально настраиваемый, без использования каких-либо классов, только параметры компонентов.
Разработка меню
Создайте новый файл ActionScript 3 Flash и установите размеры 960 x 70 пикселей. Меню будет отлично смотреться на HTML-шаблоне 960.gs для корпоративного сайта вашего клиента. Установите частоту кадров 25 кадров в секунду. Чтобы ускорить процесс, мы не будем использовать здесь Document Class; мы просто будем придерживаться Flash IDE.
Шаг 1: подготовьте кнопки
У нас будет пять основных кнопок с подменю, как на схеме ниже:
Создайте прямоугольник с размерами 192 х 40 пикселей. Я придумал ширину, разделив 960 на 5 кнопок. Раскрасьте его линейным градиентом следующими цветами:
Шаг 2: Главная кнопка
Нажмите «F8», чтобы превратить прямоугольник в мувиклип, и назовите его «button».
Шаг 3: Рамки кнопок
Дважды щелкните только что созданную кнопку и добавьте еще два кадра. Это будут состояния кнопки « вверх» и « вниз» . Мы будем использовать фрагмент ролика и добавлять к нему действия вместо кнопки, чтобы сделать кнопки подменю активными. Если бы вы использовали кнопку, нажатие на кнопку подменю вызовет щелчок на кнопке главного меню.
Шаг 4: Установите цвета штата
Для второго кадра (состояние «над» меню) измените цвета градиента, как на рисунке:
Сделайте то же самое для третьего кадра (состояние «вниз» меню) со следующими цветами:
Шаг 5: Текстовая метка
Переименуйте первый слой в «back», а над ним сделайте еще три слоя с именами «label», «bar» и «actions» соответственно.
Заблокируйте слой действий, затем на слое меток создайте новое динамическое текстовое поле с именем «label_txt». Это будет метка кнопки. Текст кнопки будет отличаться в зависимости от настройки мувиклипа на сцене. Для этого мы будем использовать параметры компонента, поэтому вместо пятикратного копирования кнопки мы можем повторно использовать компонент, и нам нужно будет только изменить переменную.
Шаг 6: Разделитель кнопок
С помощью инструмента «Линия» создайте две соседние линии следующих цветов и превратите их в один фрагмент ролика, называемый «полосой». Поместите этот мувиклип точно в 190 пикселей на оси x (используйте панель «Свойства»). Это будет разделитель кнопок, который добавит пространственное разделение между кнопками меню. Мы превращаем это в мувиклип, чтобы потом его можно было скрыть для последней кнопки.
Шаг 7: Определение компонента
Вернитесь на основную сцену и в библиотеке щелкните правой кнопкой мыши по мувиклипу и выберите «Определение компонента …»
Шаг 8: Параметры компонента
Добавьте следующие параметры компонента:
Эти параметры могут быть доступны в действиях фрагмента ролика как переменные. Мы будем использовать строку «textvar» для названия меню, логическое значение «hidebar» для скрытия разделителя и строку «подменю» в качестве имени ссылки для видеоклипа соответствующего подменю.
Шаг 9: Временная шкала Actionscript
Теперь вернитесь в мувиклип «button» и в слое действий нажмите «F9», чтобы открыть окно «Действия», затем введите следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
this.useHandCursor = true;
this.trackAsMenu = true;
this.stop();
if( this.textvar ){
label_txt.text = this.textvar;
}
if( this.hidebar ){
bar.visible = false;
}
label_txt.mouseEnabled = false;
var sb = false;
this.addEventListener( MouseEvent.ROLL_OVER, over );
this.addEventListener( MouseEvent.ROLL_OUT, out );
this.addEventListener( MouseEvent.MOUSE_DOWN, down );
this.addEventListener( MouseEvent.MOUSE_UP, up );
function over(e:MouseEvent){
gotoAndStop(2);
}
function out(e:MouseEvent ){
gotoAndPlay(1);
}
function down( e:MouseEvent ){
gotoAndStop(3);
}
function up( e:MouseEvent ){
gotoAndStop(2);
}
|
Позвольте мне объяснить код:
Мы устанавливаем свойство «useHandCursor» в true и «trackAsMenu» в true. Первая заставляет курсор превращаться в руку, когда над кнопкой, а вторая говорит мувиклипу вести себя как меню. Это гарантирует, что последующее событие над дочерними элементами не повлияет на основной фрагмент ролика.
Мы останавливаем временную шкалу, чтобы фактически иметь функциональность кнопок, и устанавливаем «mouseEnabled» в значение false для текстового поля «label_txt». Если мы этого не сделаем, текстовое поле получит события ROLL_OVER, и меню внезапно развернется. В основном это отключает интерактивность с помощью мыши для текстового поля.
Затем мы проверяем, установлена ли переменная «textvar», и если да, то присваиваем ее текстовому свойству text text . Довольно просто Мы делаем проверку, потому что можем оставить параметр пустым, и в этом случае мы получим ошибку.
Мы делаем ту же проверку со свойством hidebar. Если мы выберем истину, мы скроем бар клипа
Наконец, мы выполняем функции over , out , down и up и добавляем события в мувиклип, превращая его в кнопку. Важно использовать события «ROLL_OVER» и «ROLL_OUT» вместо событий «MOUSE_OVER». Я пробовал это с «MOUSE_OVER», и это было беспорядок, потому что «MOUSE_OVER» срабатывал каждый раз, когда мышь двигалась, создавая эффект мерцания.
Шаг 10: больше кнопок!
Мы готовы выполнить тест. Сотрите кнопку со сцены и снова добавьте ее из библиотеки в (0,0) px. Для параметра типа «textvar» Home :
Добавьте остальные кнопки с расстоянием между ними 192 пикселя, следующие значения «textvar» и установите «hidebar = true» для последней кнопки:
Мы можем проверить фильм, чтобы увидеть, как он работает до сих пор:
Большой! Подписи появляются, и кнопки реагируют на мышь.
Шаг 11: Создание подменю
Мы начнем создавать подменю. Это подменю будет дублироваться для каждого возможного подменю. Создайте прямоугольник 550 x 30, как на картинке, нажмите «F8» и назовите его «sbmenu1». Не забудьте проверить Экспорт для Actionscript и дать ему имя связи (Class) для «sbmenu1».
Шаг 12: Внутри подменю
Опять же, как в первом мувиклипе, создайте еще три слоя и назовите их «круг», «кнопки» и «действия».
Переместите прямоугольник на 30 пикселей по оси X. Мы будем использовать 30px для построения округления подменю.
Шаг 13: Округление круга
Создайте круг размером 60px (удерживая клавишу «Shift», вы получите идеальный круг, или вы можете использовать инструмент «Круг» и щелкнуть мышью по сцене, чтобы получить диалоговое окно с запросом точного размера), и расположить его в точке (-30, -30) px. , Нарисуйте вертикальную линию через (0,0) px, чтобы пересечь середину круга, выберите правую половину круга и удалите его, как на картинке ниже.
Удалите линию, затем, снова выделив полукруг, нажмите «F8» и превратите ее в графический символ. Будьте осторожны, чтобы выбрать правильную среднюю точку регистрации, так как мы хотим анимировать вращение круга от его центра.
Шаг 14: Обведите вокруг
Поверните изображение круга на 90 ° над кнопками, но перед этим используйте инструмент «Свободное преобразование», чтобы перетащить центральную точку вращения в центр круга, как на рисунке, и установите его положение равным 30 на оси x:
Создайте еще один кадр с «F6» после четырех кадров и поверните круг на четверть против часовой стрелки. Затем щелкните правой кнопкой мыши на временной шкале между кадрами и выберите «Создать анимацию движения».
Шаг 15: Подменю Tween
Заблокируйте другие слои и выберите «задний» слой. Переместите первый кадр одновременно с последним круговым кадром и продлите временную шкалу другим ключевым кадром («F6»), как на рисунке. Выберите первый кадр и измените размер прямоугольника на 5 пикселей, затем щелкните правой кнопкой мыши между ключевыми кадрами и выберите «Создать анимацию формы»:
Шаг 16: слой маски
Если вы переместите курсор воспроизведения, вы увидите анимацию подменю, но круг все еще виден. Создайте прямоугольник размером 30×30 пикселей на слое маски в точке (0,0) px, затем щелкните правой кнопкой мыши слой маски и выберите Mask:
В слое «Actions» создайте пустой кадр в том же кадре, в котором анимация завершится, нажмите «F9», чтобы открыть панель «Actions», и напишите «stop ();» команда, поэтому анимация меню не повторяется. Вы должны иметь хорошую анимацию подменю.
Шаг 17: Кнопки подменю
Создайте черный прямоугольник размером 130×30 пикселей и нажмите «F8», чтобы преобразовать его в новый символ. Назовите это menuubtn . На этот раз мы выберем Button в качестве типа. На самом деле мы делаем то же самое, что и вначале: создаем кнопку с тремя состояниями, затем оборачиваем ее в основной движущийся клип с текстовым полем метки внутри, которым мы будем управлять с помощью пользовательского параметра.
Шаг 18: новые кадры
Переместите прямоугольник на второй кадр ( поверх ) и продублируйте кадр. Вы можете создавать разные цвета для опрокидывания и спуска, но я сейчас спешу :). Когда вы вернетесь в подменю, выберите кнопку и снова нажмите «F8», чтобы превратить ее в видеоклип. Назовите это sub_btn . Вы заметите, что кнопка прозрачного синего цвета; это означает, что у него нет состояния «Вверх», это прозрачная кнопка.
Шаг 19: Метка кнопки
Как и раньше, введите мувиклип sub_btn и создайте еще два слоя: слой «label» и слой «actions». В слое метки создайте динамическое текстовое поле, установите выравнивание по центру, цвет по белому (этот текст будет черным) и назовите его «label_txt».
В слое действий вставьте следующий код действия:
|
1
2
3
|
stop();
this.label_txt.mouseEnabled = false;
this.label_txt.text = this.textvar;
|
Шаг 20: Пользовательские параметры
Щелкните правой кнопкой мыши на фрагменте видеоклипа, выберите «Определение компонента» и добавьте параметр «textvar»:
Шаг 21: Кнопки подменю
Теперь, когда мы создали пользовательскую кнопку, давайте создадим больше кнопок подменю и назовем их соответствующим образом:
Шаг 22: заставить его работать
Сейчас все хорошо, но подменю не появляется, говорите вы. Это потому, что нам нужно кодировать внешний вид подменю в функции over основной кнопки. Объявите новую переменную «sb», которая будет содержать наше подменю после строки «label_txt.mouseEnabled = false;»
|
1
|
var sb = false;
|
Замените последние два прослушивателя событий этим кодом:
|
1
2
3
4
|
if( !this.submenu ){
this.addEventListener( MouseEvent.MOUSE_DOWN, down );
this.addEventListener( MouseEvent.MOUSE_UP, up );
}
|
Это добавит слушателей «вниз» и «вверх» только тогда, когда кнопка не имеет подменю.
В функцию «over ()» добавьте этот фрагмент кода:
|
1
2
3
4
5
6
7
8
|
if( this.submenu !== » && !sb ){
var cn = getDefinitionByName( this.submenu );
sb = new cn();
sb.y = 40;
sb.x = ( this.offset )?
this.addChild( sb );
}
if( sb ){ sb.visible = true;
|
Позвольте мне объяснить код:
Мы проверяем, установлен ли параметр подменю; если так, то мы получаем ссылку на имя класса, используя «getDefinitionByName». Эта функция присваивает переменной «cn» тип класса. Это способ создания экземпляра класса из строкового имени. Если вы попытаетесь создать экземпляр строковой переменной с ключевым словом «new», это не сработает.
После того, как мы создали экземпляр подменю, мы установили его на 40 пикселей по оси Y, чтобы быть ниже кнопки, и добавили его в список отображения кнопки.
Наконец, мы снова проверяем, существует ли sb, и устанавливаем его видимым. Это связано с тем, что создание экземпляра происходит только один раз, но если мышь нажмет другую кнопку, будет вызвана функция out (), и мы скроем мувиклип sb. В следующий раз, когда он входит в кнопку, мувиклип уже существует, поэтому условие if пропускается, и мы его только показываем. Эта оптимизация делает наше меню быстрее, сокращая потребление памяти.
Шаг 23: попробуй
Мы готовы! Просто введите «sbmenu1», имя связывания второй кнопки, в качестве параметра подменю и протестируйте меню. Вы должны иметь хорошее меню. С этого момента вы можете настроить обработчики нажатий для кнопок, чтобы они делали то, что вы хотите.
Шаг 24: создайте второе подменю
Чтобы продемонстрировать возможности расширения, продублируйте видеоклип «sbmenu1» и переименуйте его в «sbmenu2». Мы добавим это к кнопке контакта.
Шаг 25: Готово
Я изменил кнопки на что-то другое, и поместил круг в нужное место, изменив анимацию.
Теперь все, что нам нужно сделать, это установить параметр подменю для кнопки контакта, и у нас будет отличное меню!
У нас есть хороший эскиз, чтобы показать нашему клиенту. Он будет рад использовать его для представления своей архитектурной компании и, возможно, предоставит мне скидку на мой новый дом 🙂
Мы достигли конца урока. Если вам понравилось, пожалуйста, прокомментируйте! Я пытался сделать это как можно более интуитивно понятным. Спасибо, что остаетесь до конца!