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

Iv (dembicki@narod.ru)

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

this.input_xml.addAttributes = function() {

var i = 0;

var nod = this.firstChild;

while (nod) {

nod.attributes.ID = i++;

nod = nod.nextNode();

}

delete _root.nodeDepth;

this.parseXML(this.firstChild);

};

Если тестануть сейчас ролик и забраться в листинг переменных, то можно будет увидеть, что все узлы дерева имеют свой атрибут ID и tab. К примеру, вот так должны выглядеть первые несколько строк:

<MENU ID="0" target="mainFrame">

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

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

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

Заметь, что самый первый узел не имеет атрибута tab, но имеет атрибут ID, равный нулю. Так надо.

Теперь можно создать функцию генерации меню, но перед этим создадим пустой мувик, в котором это меню будет жить:

_root.createEmptyMovieClip("menu_mc", 0);

и генерим меню:

_root.menu_mc.createMenu = function(menu_xml) {

var mc;

var i = 0;

var nod = menu_xml[i];

while (nod) {

i++;

nod = menu_xml[i];

mc = this.attachMovie(nod.nodeName, "m"+i+"_mc", i);

nod.attributes.mc = mc;

mc.i = i;

}

};

Заметь, что строкой переменной nod.attributes.mc = mc мы в соответствующий узел помещаем ссылку на вновь созданный мувиклип. А строчкой mc.i = i помещаем в мувиклип ID узла xml. То есть связываем каждый мувиклип со своим узлом xml. Благодаря этому в дальнейшем, зная узел xml, мы можем узнать соответствующий ему мувиклип вот так:

mc = node.attributes.mc

И наоборот, зная мувиклип, мы можем с легкостью обратиться к соответствующему узлу xml:

node = _root.input_xml[mc.i]

Сейчас можешь даже не пробовать тестить - attachMovie не будет работать без соответствующих мувиков в библиотеке. Давай их создавать, раз такое дело...

Но тут есть один важный момент: мы аттачим мувик из библиотеки с linkage name, соответствующим имени узла xml (nod.nodeName). То есть в зависимости от имени узла (а у нас их всего два варианта) будет аттачиться мувик "folder" или "item". Поэтому создадим два мувика, один для папки, второй для элемента меню. Они будут практически одинаковыми, отличаться будут только иконка и скриптинг.

Приступим. Создаем мувик (Ctrl+F8) с именем "folder" и таким же linkage name (не забудь поставить галочки export for action script и export in first frame). Аналогично создаем мувик с именем "item". В результате у тебя в библиотеке должны появиться два пустых мувика: folder и item. Вот теперь, если тестануть, то, естественно, на сцене ничего не увидим, но в листинге переменных появится список приаттаченных мувиклипов и значений переменных i в этих мувиках.

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