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

 

Вращающееся меню.

На сегодняшнем уроке мы рассмотрим, как создается так называемое вращающееся меню. Итак приступим:

Открываем новый документ, и устанавливаем размеры сцены 621х256 пикселей. Вы можете задать другие размеры, но тогда пересчитайте размеры кнопок. Мы создадим  6 кнопок с размерами 100х250 пикселей с расстоянием между ними в 3 пиксела. Оставшаяся часть будет занята рамкой по периметру. Установим частоту 40 кадров в секунду, и выберите цвет фона #990000 (можно задать свои значения).Вот такая картинка должна у нас получиться к концу урока на рабочем холсте:

[483x199]

Создайте сразу  8 слоев, и назовите их примерно так как на следующем рисунке (не обязательно, но чтобы не запутаться):

[240x195]

Дальше нам необходимо создать шесть мувиклипов и шесть невидимых кнопок ( InvisibleButton). 

1. Нажимаем клавиши Ctrl +F8, или в меню Insert выбираем команду New Symbol. В появившемся окне выбираем:

[361x178]

Перемещаемся в окно редактирования символов.

2. Создайте три слоя. В первом слое инструментом Прямоугольник (R) нарисуйте прямоугольник с размерами 100х250 пикселей, предварительно выбрав на панели Shape  допустим ярко-зеленый цвет #00FF00.

3. Сделайте ключевым 20 кадр в первом слое.

[460x59]

Задайте с помощью инструмента Paint Bucket (K)в двадцатом кадре цвет прямоугольника синим (#0000FF)

Перейдите снова на первый кадр, и на панели свойств в поле Tween, выберите Shape.

Как только вы это проделаете цвет полоски в первом слое изменится на зеленый, и от первого кадра к двадцатому появится стрелка (смотри рисунок ниже):

[453x60]

4. Переходим во второй слой, и выбираем инструмент «Текст» (Т).
В первом кадре пишем слово к примеру ГЛАВНАЯ. Шрифт можете выбрать любой. Я в своем примере использовал Arial с  размером 13, красного цвета. Выравниваем текст примерно посередине будующей кнопки:

[100x248]

Переходим на панель Transform, и в поле Skew Horizontal выставляем значение 90 градусов.

[208x68]

Сразу же наш текст примет вертикальное положение и сместится. Отцентрируйте его, как на рисунке ниже:

[243x249]

Сделайте десятый кадр второго слоя ключевым(для этого щелкните на нем левой клавишей мыши и нажмите клавишу F6), и на панели Transform измените значение в поле Skew Horizontaly на ноль. Снова наш текст примет горизонтальное положение и сместится. Проделайте то же самое, что и в предыдущем шаге:

[287x249]

Перейдите в первый кадр второго слоя, или на любом кадре между первым и десятым щелкните правой кнопкой мыши и из списка выберите команду Create  Motion Tween (см рисунок)

[233x47]

От первого кадра к десятому протянется стрелка. Затем перейдите в 20 кадр второго слоя, и сделайте его ключевым. Переместите текст выше, почти к самому верху, снова перейдите в 10 кадр (или щелкните на любом кадре между 10-м и 20-м) и примените команду Create  Motion Tween. Вот, как к этому времени должна выглядеть временная шкала:

[460x59]

Переходим в третий слой, и делаем в нем 20 кадр ключевым. Переключаемся на панель Action и вставляем следуюший код в этот кадр:

stop();

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

На этом этап создания мувиклипа закончен, и переходим к следующему этапу.

5. Нам необходимо создать невидимую кнопку. Нажимаем клавиши Ctrl +F8, или в меню Insert выбираем команду NewSymbol. В появившемся окне выбираем на этот раз Button:

[364x180]

Для упрощения, и повторного использования предварительно создайте с помощью инструмента «Прямоугольник» графический символ (выбрав в этом окне Graphis) размерами 100х250 пикселей, любого цвета. Задайте ему координаты х = 0, и у =0. Я в своем примере нарисовал его светло голубого цвета. Смотри рисунок ниже:

[99x248]

Вот, с помощью этого графического символа, мы и будем создавать невидимые кнопки (InvisibleButton)
Итак, дважды щелените в панели библиотеки по значку созданного нами  символа кнопки: 

Откроется окно его редактирования. Создайте поочередно в кадрах Up, Over, Down, Hit четыре пустых ключевых кадра. Первые три мы так и поставим пустыми. А вот в последний кадр вставим созданный нами графический символ. Вот, как это будет  выглядеть на временной шкале:

[508x42]

На этом этапы создания необходимых символов завершены, и переходим в основную сцену, щелкнув вот по этому значку:

6. Зажав левую кнопку мыши, перемещаем из библиотеки на сцену, в первый слой с названием Меню, созданный нами мувиклип, который будет имитировать кнопку «ГЛАВНАЯ». Позиционируем его на панели Transforn следующим образом:

[208x113]

Примечание:

В конце урока я приведу координаты для всех мувиклипов в виде таблицы. Естественно, если Вы выберите другие размеры кнопок, то необходимо будет все пересчитать, с учетом Ваших размеров.

И присваиваем ему в поле Name имя button1 (смотри рисунок ниже)

[226x100]

 

 

 

Теперь перемещаемся во второй слой с названием InvisibleButton 1, захватываем левой кнопкой мыши созданную нами невидимую кнопку, помещаем её на сцену, и позиционируем с теми же координатами, что и мувиклип. Цвет изменится на более тёмный:

[333x297]

Т.е. фактически мы поместили нашу невидимую кнопку поверх мувиклипа.

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

on (rollOver) { _root.mouse_over_button1 = true; } on (rollOut) { _root.mouse_over_button1 = fstartlse; } on (release) { getURL("/", "blank"); }

Я, в уроке вставил URL в виде "/", но Вы вставьте тот, который Вам будет нужен. Так же можете использовать другие значения для параметров открытия страницы.

7. Создайте аналогично шагам 2-7 остальные пять кнопок, с названиями меню, которые сочтете нужным. При помещении мувиклипов на первый слой ( а именно там все шесть мувиклипов должны располагаться), присвойте им соответственно имена button1, button2, button3, button4, button5, button6. А вот, невидимые кнопки помещайте каждую, на отдельный слой, и в коде изменяйте порядковые номера. Например для второй кнопки это будет выглядеть так:

on (rollOver) { _root.mouse_over_button2 = true; } on (rollOut) { _root.mouse_over_button2 = fstartlse; } on (release) { getURL("/", "blank"); }

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

8. И последний этап. Переходим в самый верхний слой, с названием Action Layer, и вставляем в первом кадре такой код:

_root.button1.onEnterFrame = function () { if (!mouse_over_button1) { _root.button1.prevFrame(); } else { _root.button1.nextFrame(); } // end else if }; _root.button2.onEnterFrame = function () { if (!mouse_over_button2) { _root.button2.prevFrame(); } else { _root.button2.nextFrame(); } // end else if }; _root.button3.onEnterFrame = function () { if (!mouse_over_button3) { _root.button3.prevFrame(); } else { _root.button3.nextFrame(); } // end else if }; _root.button4.onEnterFrame = function () { if (!mouse_over_button4) { _root.button4.prevFrame(); } else { _root.button4.nextFrame(); } // end else if }; _root.button5.onEnterFrame = function () { if (!mouse_over_button5) { _root.button5.prevFrame(); } else { _root.button5.nextFrame(); } // end else if }; _root.button6.onEnterFrame = function () { if (!mouse_over_button6) { _root.button6.prevFrame(); } else { _root.button6.nextFrame(); } // end else if };

Нажимаем клавишу F12 и смотрим результат.

Урок наверно получился немного большим, но я постарался изложить всё достаточно подробно. Если у кого-то остались вопросы скачайте исходник в формате sgf для просмотра и сверки. А пока смотрим, то что получилось. Наводите курсор поочередно на каждое меню.

Скачать исходник 
в архиве rar 3 kb

Таблица координат для кнопок

	Координаты для кнопок
позиция	1	2	3	4	5	6
X	53	156	259	362	465	568
Y	127	127	127	127	127	127