Это цитата сообщения MissKcu Оригинальное сообщение

 

Создание вертикального меню.

На сегодняшнем уроке мы научимся создавать вот такое меню:

Создадим новый документ размерами 250 на 180 пикселей , Frame Rate = 30.  Цвет фона выберем, к примеру, такой #E8EDBD.

Создадим в основной сцене сразу 14 слоев.  В первом слое мы разместим рамку. В следующих  шести слоях мы расположим  мувиклипы, которые будут представлять собой анимацию текста и форм. В следующих шести слоях так называемые невидимые кнопки. И в последнем 14 слое мы будем писать код.

Итак, приступим.

1. Нажимаем Ctrl + F8, и создаем новый символ (Graphics), Выбираем инструмент линия (N), и в окне редактирования символа рисуем линию, длинно примерно 200 пикселей, и толщиной 1 пиксель. Методом копирования и вставки получаем примерно вот такую рамку:

[295x177]

2. Далее нам необходимо будет создать мувиклип, который будет представлять собой примерно следующее:

Каким образом это делается? Давайте подробно разберем на примере создания одного из шести таких мувиков.

а) рисуем инструментом «Прямоугольник» (R) графический символ без контура с заливкой вот такого цвета: #D11212.  Размеры примерно 2-3 пикселя в ширину, и 21 – в высоту.
б) конвертируем его в мувиклип.
Вот что он из себя представляет. Рисунок увеличен примерно в 4 раза.

3. Нажимаем Ctrl + F8, и создаем новый символ. В окне выберите Movie Clip. В окне редактирования этого нового мувиклипа, создадим три слоя. В первом мы разместим созданный нами в шаге 2 мувиклип, во втором будет размещаться мувиклип с текстом, и в третьем мувиклип со стрелками.

Теперь давайте разберем создание этого мувиклипа послойно:

В первом слое, как уже было сказано выше, у нас будет располагаться прямоугольник красного цвета. Его размеры  по ширине и координаты, будут плавно меняться  от первого кадра к 20-му. Привожу размеры и координаты покадрово, в виде таблицы:

ключевые кадры	1	18	19	20
координаты х координаты у	- 56 -0.9	43,3 -0.9	49,1 -0.9	55 -0.9
размеры	2,5 х 21	201х 21	213 х 21	224 х21
цвет/прозрачность	альфа = 0	альфа=94	None	None

Во втором слое будет располагаться мувиклип с текстом. Цвет текста: #0000FF

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

ключевые кадры	1	8	9	10	18	19	20
координаты х координаты у	18,2 0	8,1 0	6,6 0	5,2 0	15,6 0	16,9 0	18,2 0
цвет	None	Color 50%	Color 50%	Color 100%	Color 100%	Color 100%	Color 100%

В третьем слое будет располагаться мувиклип с черными стрелками.

Рисунок увеличен для наглядности в три раза.

Его можно будет нарисовать, используя инструмент Polygon (L), или воспользоваться графическими символами из шаблонов кнопок.

[251x82]

Размеры и цвет его изменяться не будут, а расположение по оси «Х» в каждом кадре будет различным. Смотри таблицу:

ключевые кадры	1	8	9	10	18	19	20
координаты х	-47,7	-38,3	-37	-35,6	-45,3	-46,5	-47,7

То есть в первом и 20 кадрах координаты будут одинаковыми.

Для лучшего понимания, как это выглядит, в конце урока я приведу ссылку на скачивание архива с исходником. Открыв его в отдельном окне, Вы всегда сможете сверить свои действия.

Таким же образом создаются остальные пять мувиклипов.

4. Теперь возвращаемся в основную сцену, и помещаем созданные нами мувиклипы на рабочее поле, присваивая им соответствующие имена на панели свойств. В моем примере это соответственно: Home, News, About, Lesson, Raznoe, Contact. Смотри рисунок ниже, применительно к мувиклипу, расположенному во втором слое.

[265x280]

5. Теперь поместим в первый кадр первого слоя, созданную нами в шаге первом рамку.

[305x220]

Подгоним с помощью инструмента Transform (Q), или используя одноименную панель,  размеры и координаты следующим образом. Смотри рисунок:

[214x145]

6. Теперь необходимо создать шесть невидимых кнопок. О том, как это делается подробно смотри, предыдущий урок.

Создаются такие кнопки очень просто: Нажимаете Ctrl + F8 и в открывшемся окне выбираете button. В окне редактирования кнопки первые три кадра (Up, Over, Down) делаете пустыми, а в четвертом кадре (Hit) рисуете инструментом «Прямоугольник» (R) вот такую примерно фигуру, с размерами 227 х 26,6 пикселей и цветом заливки #00FFFF

Помещаете каждую кнопку над мувиклипом, и пока кнопка выделена, на панели действий пишете такой код:

on (rollOver) { _root.mouse_over_Home = true; } on (rollOut) { _root.mouse_over_Home = fstartlse; } on (release) { getURL("http://www.username.ru/", ""); }

Соответственно  в третьей и шестой строке кода заменяете название кнопки на перечисленные в шаге четвертом. То есть,  к примеру, для кнопки «Об Авторе» это будет выглядеть так:

on (rollOver) { _root.mouse_over_About = true; } on (rollOut) { _root.mouse_over_About = fstartlse; } on (release) { getURL("http://www.username.ru/", ""); }

И так для всех кнопок.

7. И, наконец, последний шаг. Перемещаемся в последний слой (Action Layer), и пишем в первом кадре такой код:

_root.Home.onEnterFrame = function () { if (mouse_over_Home) { _root.Home.nextFrame(); } else { _root.Home.prevFrame(); } // end else if }; _root.About.onEnterFrame = function () { if (mouse_over_About) { _root.About.nextFrame(); } else { _root.About.prevFrame(); } // end else if }; _root.News.onEnterFrame = function () { if (mouse_over_News) { _root.News.nextFrame(); } else { _root.News.prevFrame(); } // end else if }; _root.Lesson.onEnterFrame = function () { if (mouse_over_Lesson) { _root.Lesson.nextFrame(); } else { _root.Lesson.prevFrame(); } // end else if }; _root.Raznoe.onEnterFrame = function () { if (mouse_over_Raznoe) { _root.Raznoe.nextFrame(); } else { _root.Raznoe.prevFrame(); } // end else if }; _root.Contact.onEnterFrame = function () { if (mouse_over_Contact) { _root.Contact.nextFrame(); } else { _root.Contact.prevFrame(); } // end else if };

Нажимаем Ctrl + Enter и смотрим, что у нас получилось.