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

Вступление

В этом уроке мы научимся создавать и настраивать Flash меню с помощью Flash Menu Labs (FML) Open Source Edition.
Мы:

• 1) зададим свой текст элементов меню и ссылки в XML файле
• 2) настроим поведение меню с помощью XML файла
• 3) вставим свою графику и анимацию во fla-файле

Первым делом закачаем последнюю версию проекта со странички Open Source Edition page.
Прокручиваем до конца странички и скачиваем ZIP-архив с исходниками. После распаковки архива запускаем swf-файл, чтобы убедиться, что он работет.

Элементы меню плавно появляются и исчезают, есть даже простая анимация при наведении мыши (переход от красного к тёмнокрасному).

Задание своего текста и ссылок

Допустим, что мы хотим создать меню с вот такой простенькой структурой:

• Home – home.htm
• Products – prod.htm
  • Product 1 – prod1.htm
  • Product 2 – prod2.htm
  • Product 3 – prod3.htm
• Links – links.htm

В данном примере используются английские имена, но ничто не помешает нам, при желании, написать тект по-русски. Итак, открывам menu.xml с помощью простого блокнота ищем тэг <menu_structure> ( нажимаем Ctrl+F и пишем "structure").

Что мы видим? Огромное количество строк непонятного кода.
Но нас этим не испугать :) Мы вытираем всё между тэгами <menu_structure> и </menu_structure> и пишем там свой код. Чтобы создать элемент меню с тестом Home мы пишем:

<item text = "Home" url = "home.htm" url_self = "1" />

Я думаю, что атрибуты text и url в особых комментариях не нуждаются. Мы пишем url_self =”1” для того, чтобы ссылка открывалать в том же окне и url_self =”0”, чтобы в новом.

Чтобы создать вложенные элементы меню мы пишем:

<item text = " Products " url = " prod.htm" url_self = "1" >
	<item text = " Product 1" url = " prod1.htm " url_self = "0" />
	<item text = " Product 2" url = " prod2.htm " url_self = "0" />
	<item text = " Product 3" url = " prod3.htm " url_self = "0" />
</item> 
				

В итоге получаем структуру:

<menu_structure>
<item>
	<item text = "Home" url = "home.htm" url_self = "1" />
    	<item text = " Products " url = " prod.htm" url_self = "1" />
   	<item text = " Product 1" url = " prod1.htm " url_self = "0" />
    	<item text = " Product 2" url = " prod2.htm " url_self = "0" />
   	<item text = " Product 3" url = " prod3.htm " url_self = "0" />
</item>
<item text = "Links" url = "links.htm" url_self = "1" />
</item>
</menu_structure>
	

Сохраняем menu.xml и запускаем swf-файл.

Настройка поведения меню

А теперь поиграемся с параметрами настройки поведения.
Давайте зададим эффект "from sides" ( с разных сторон) при появлении и простое плавное изменение прозрачности при исчезновении. Для это в menu.xml изменяем параметры:
enable_soft_wave_when_appear = "0"
appear_effect_pos_type = "2" comment = " Position Effect when appearing; 0 - no pos effect; 1 - from random pos; 2 - from sides"
disappear_effect_pos_type = "0" comment = " Position Effect when disappearing"

Сохраняем menu.xml и запускаем swf-файл. Работает :)

Теперь хотим отключит плавное (физичное) движение. В menu.xml просто задаём:
is_physic_enabled = "0"

Сохраняем menu.xml и запускаем swf-файл. Снова работает :)
Хорошо, мы можем прочитать встроенные в menu.xml комментарии к параметрам, и поиграться с ними ещё, задавая размеры шрифта, цвет шрифта, отступы, физические коэффициенты и так далее…

Вставка своей графики и анимации во fla-файле

Чтобы задать свою графику мы открываем fla-file во Flash редакторе. Мы не видим клипов на главной сцене, что редактировать?
Поскольку это меню полностью контролируется средствами ActionScript то и вся графика лежит в библиотеке.
Поэтому мы открываем библиотеку (Ctrl+L)и редактируем символ templ_lev0_normal .
Этот символ отвечает за отображение корневых элементов меню в состоянии normal.

Мы вставляем сюда свою графику и анимацию. Поскольку состояние normal начинается сразу после состояния mouseover, то и заданная нами анимация будет проигрываться как только мышка покинет элемент меню.

Затем мы меняем графику в templ_lev0_mouseover и templ_lev0_selected шаблонах.
В этом примере мы не меняли графику для дочерних элементов меню.
Стоит отметить, что все созданные нами графические шаблоны должны иметь одинаковую ширину и высоту. Это необходимо потому, что движок меню вычисляет правильные коэффициенты масштабирования и потом умножает все размеры на эти коэффициенты.