FLASH, И ГОТОВО! Красивое меню-трансформер

Iv (dembicki@narod.ru)

Спецвыпуск Xakep, номер #027, стр. 027-066-1

Ты наваял себе пагу на народеточкару, нахреначил к ней красивые мульки на флэше и после первых восторгов и показов друзьям неожиданно обнаружил, что не все так гладко, как хотелось бы: добавление любой новой странички часто влечет за собой переделку менюхи на главной и всех остальных страницах и последующую закачку здоровой флэшки на пагу, а это засада и очень сильно затрахивает. Эх, как здорово было бы оживить навигацию и сделать ее эффективней! Да не вопрос!

LET'S XML!

Решить все это одним махом можно, используя XML + FLASH. Заодно поглядишь, как поддержка XML реализована во Flash MX.

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

В обычном блокноте пишем тестовый xml и сохраняем под именем flash_menu.xml.

<?xml version="1.0" encoding="windows-1251" ?>

<MENU target="mainFrame">

<FOLDER name="моим фанам">

<FOLDER name="тусовка">

<ITEM name="наливай" url="drink.html"/>

<ITEM name="девчонки" url="girls.html"/>

<ITEM name="вечеринки" url="party.html"/>

<ITEM name="с утра по пиву" url="bier.html"/>

</FOLDER>

<ITEM name="последние фотки" url="photos.html"/>

</FOLDER>

<ITEM name="оторвись" url="fun.html"/>

<FOLDER name="музон">

<ITEM name="продиги" url="prodigy.html"/>

<ITEM name="стрекачи" url="strekachi.html"/>

</FOLDER>

</MENU>

Затем проверяем на правильность открытием в IE.

ПОЛУЧАЕМ XML

Пора открывать flash. Причем MX. Сразу же сохраним файло в той же папке, что и наш XML под именем "xml_menu.fla". Добавляем прототипную функцию для обхода XML дерева:

// (c) Ivan Dembicki, dembicki@narod.ru

XMLNode.prototype.nextNode = function() {

if (this.firstChild != null) {

this.firstChild.attributes.tab = ++_root.nodeDepth;

return this.firstChild;

}

var n = this;

while (n.nextSibling == null) {

if (n.parentNode) {

_root.nodeDepth--;

n = n.parentNode;

} else {

return null;

}

}

n.nextSibling.attributes.tab = _root.nodeDepth;

return n.nextSibling;

};

Следом пишем загрузку xml с проверкой на успешность загрузки и корректность полученного xml.

System.useCodePage = true;

XML.prototype.ignoreWhite = true;

this.input_xml = new XML();

this.input_xml.load("flash_menu.xml");

this.input_xml.onLoad = function(success) {

if (success) {

if (this.status != 0) {

trace("invalid xml");

} else {

// trace("successfull");

this.addAttributes();

_root.menu_mc.createMenu(this);

}

} else {

trace("error opening URL");

}

};

Теперь тестани загрузку (Ctrl+Enter), если в output вывелось сообщение "successfull", то все в порядке, и можно идти дальше. Если что-то не так, trace тебе подскажет, в каком направлении искать ошибку.

Если ты заметил, мы написали вызов несуществующих функций на успешную загрузку. Вот созданием этих функций сейчас и займемся. Функция addAttributes должна обойти дерево и в каждый узел xml добавить по два атрибута: ID и tab.

Если ты читал мою статью про елочку, то уже знаешь, зачем этот ID нужен, если не читал, то открою тайну: в дальнейшем мы собираемся обращаться к узлам xml, используя синтаксис: _root.input_xml[номер узла]. Что касается атрибута tab, то он нам понадобится для установки отступа каждого элемента дерева от левого края ролика. Этот атрибут мы будем добавлять, слегка видоизменив функцию nextNode (которая лежит в библиотеке прототипов на layer51.com), добавив всего три строчки кода (здесь она уже изменена).