Принципы создания динамических меню во Flash
До сих пор втречается огромное количество Flash сайтов или просто шапок на сайтах, в которых меню можно обновить только перекомпилировав fla, т.е. нужно иметь исходник, что бы добавить или удалить пункт меню. При всём при этом владельцем сайта далеко не всегда является человек понимающий хоть что то во Flash, поэтому поменять что то в исходнике является огромной проблемой и зачастую такие люди бегут на форумы и просят помощи и в большинстве случаев бывают отшиты, потому что на такие примитивные вопросы, как - "Как поменять ссылку на которую выполняется переход по нажатию на кнопку ?" , мало кому охота отвечать, а найти самому ответ порой бывай тоже проблематичным, потому как не зная технологии трудно сформулировать запрос для поисковика. К чему я всё это ... а вспомнил, что бы ни у вас ни у ваших заказчиков не возникало подобных проблем, нужно просто уметь делать динамические меню на основе внешних файловых данных (таких как xml, txt и т.д.).
Приступим. Для начала разберём простой пример создания динамического меню на основе подгруженного xml, в котором будут названия кнопок и ссылки, по которым будет осуществляться переход при нажатии на кнопку. И так для начала открываем любой текстовый редактор, создаём новый файл и пишем в нём следующий код:
- Код: Выделить все
<menu><item name="Item 1" link="http://www.flashblog.ru" />
<item name="Item 2" link="http://www.flashblog.ru" />
<item name="Item 3" link="http://www.flashblog.ru" />
<item name="Item 4" link="http://www.flashblog.ru" />
<item name="Item 5" link="http://www.flashblog.ru" />
<item name="Item 6" link="http://www.flashblog.ru" />
<item name="Item 7" link="http://www.flashblog.ru" /></menu>
теперь сохраняем его как menu.xml, желатено в юникодовской кодировке (UTF-8) , что бы в дальнейшем не было проблем с отображением русских символов.
Далее открываем флеш, создаём новый документ и сохраняем его в той же папке что и menu.xml. Создаём в библиотеке мувик с задним фоном для кнопки (я взял размер 200х20 px). Теперь в первый кадр главного таймлайна пишем код:
- Код: Выделить все
menu_xml = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(ok) {
if (ok) {
F_createMenu();
}
};
menu_xml.load("menu.xml");
//
F_createMenu = function () {
var len = menu_xml.childNodes[0].childNodes.length;
for (var i = 0; i<len; i++) {
_root.createEmptyMovieClip("btn"+i, i);
var b = _root["btn"+i];
b.attachMovie("back", "back", 1);
b.createTextField("tf", 2, 0, 0, 200, 20);
with (b.tf) {
selectable = false;
text = menu_xml.childNodes[0].childNodes[i].attributes.name;
}
b._y = (b._height+1)*i;
b.link = menu_xml.childNodes[0].childNodes[i].attributes.link;
b.onPress = function() {
getURL(this.link, "_self");
};
}
};
Тестируем и видим что всё прекрасно работает и для того что бы теперь добавить или убрать пункт в меню, достаточно поменять только xml и все дела.
Можно много чего добавить в наше меню, ну допустим мы хотим что бы каждая кнопка была заданного цвета, для этого просто добавим к каждому тегу xml атрибут color (ну или обзовите как вам удобно). Итак меняем наш xml на
- Код: Выделить все
<menu><item name="Item 1" link="http://www.flashblog.ru" color="0x006699" />
<item name="Item 2" link="http://www.flashblog.ru" color="0x996600" />
<item name="Item 3" link="http://www.flashblog.ru" color="0x00CC33" />
<item name="Item 4" link="http://www.flashblog.ru" color="0x99FFFF" />
<item name="Item 5" link="http://www.flashblog.ru" color="0x990000" />
<item name="Item 6" link="http://www.flashblog.ru" color="0xFFCC00" />
<item name="Item 7" link="http://www.flashblog.ru" color="0x996699" /></menu>
И немного модифицируем код во флешке и в самый низ нашего цикла добавляем пару строк
- Код: Выделить все
var my_color = new Color(b.back); my_color.setRGB(menu_xml.childNodes[0].childNodes[i].attributes.color);
Разберём ещё один примерчик создания меню. Сделаем горизонтальное меню, в котором ширина кнопок будет зависеть от длинны текста. Воспользуемся xml из предыдущего примера. Создаём новый файл и пишем в первом кадре код
- Код: Выделить все
menu_xml = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(ok) {
if (ok) {
F_createMenu();
}
};
menu_xml.load("menu.xml");
F_createMenu = function () {
var len = menu_xml.childNodes[0].childNodes.length;
for (var i = 0; i<len; i++) {
_root.createEmptyMovieClip("btn"+i, i);
var b = _root["btn"+i];
b.attachMovie("back", "back", 1);
b.createTextField("tf", 2, 0, 0, 200, 20);
with (b.tf) {
border = true;
selectable = false;
multiline = false;
autoSize = true;
text = menu_xml.childNodes[0].childNodes[i].attributes.name;
}
b.back._width = b.tf._width+20;
b._x = _root["btn"+(i-1)]._x+_root["btn"+(i-1)]._width;
b.tf._x = 10;
b.link = menu_xml.childNodes[0].childNodes[i].attributes.link;
var my_color = new Color(b.back);
my_color.setRGB(menu_xml.childNodes[0].childNodes[i].attributes.color);
b.onPress = function() {
getURL(this.link, "_self");
};
}
};
Всё с подробными комментариями так что обьяснять толком нечего. Как видно из этих примеров, всё предельно просто и ясно, а главное очень практично и удобно, для самых ленивых как всегда прикрепляю исходник
И так кто разобрался с первой переходим ко второй части. Здесь разберём создание "Резиновых Flash меню", которые собственно смогут тянуться в зависимости от размера экрана. Разберём два примера создания таких меню:
Первый, когда все кнопки будут равны по ширине. XML будем использовать тот же, который использовали в предыдущей части, те кто не помнят напоминаю
- Код: Выделить все
<menu><item name="Item 1" link="http://www.flashblog.ru" color="0x006699" />
<item name="Item 2" link="http://www.flashblog.ru" color="0x996600" />
<item name="Item 3" link="http://www.flashblog.ru" color="0x00CC33" />
<item name="Item 4" link="http://www.flashblog.ru" color="0x99FFFF" />
<item name="Item 5" link="http://www.flashblog.ru" color="0x990000" />
<item name="Item 6" link="http://www.flashblog.ru" color="0xFFCC00" />
<item name="Item 7" link="http://www.flashblog.ru" color="0x996699" /></menu>
Дальше создаём новый файл, сохраняем рядом с нашим xml и пишем в первом кадре код:
- Код: Выделить все
menu_xml = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(ok) {
if (ok) {
F_createMenu();
}
};
menu_xml.load("menu.xml");
F_createMenu = function () {
len = menu_xml.childNodes[0].childNodes.length;
for (var i = 0; i<len; i++) {
_root.createEmptyMovieClip("btn"+i, i);
var b = _root["btn"+i];
b.attachMovie("back", "back", 1);
b.createTextField("tf", 2, 0, 0, 200, 20);
with (b.tf) {
border = true;
multiline = false;
autoSize = true;
selectable = false;
text = menu_xml.childNodes[0].childNodes[i].attributes.name;
}
b.back._width = Stage.width/len;
b.tf._x = (b.back._width-b.tf._width)/2;
b._x = b._width*i;
b.link = menu_xml.childNodes[0].childNodes[i].attributes.link;
var my_color = new Color(b.back);
my_color.setRGB(menu_xml.childNodes[0].childNodes[i].attributes.color);
b.onPress = function() {
getURL(this.link, "_self");
};
}
};
Stage.scaleMode = "noScale";
Stage.align = "TL";
onResize = function () {
if (Stage.width>=900) {
for (var i = 0; i<len; i++) {
var b = _root["btn"+i];
b._x = Stage.width/len*i;
b.back._width = Stage.width/len;
b.tf._x = (b.back._width-b.tf._width)/2;
}
}
};
Stage.addListener(this);
Всё с комментариями, надеюсь понятно.
Второй , когда ширина кнопок будет зависить от длинны текста. XML берём опять тот же и создав новый файл пишем код в первом кадре:
- Код: Выделить все
menu_xml = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(ok) {
if (ok) {
F_createMenu();
}
};
menu_xml.load("menu.xml");
F_createMenu = function () {
len = menu_xml.childNodes[0].childNodes.length;
for (var i = 0; i<len; i++) {
_root.createEmptyMovieClip("btn"+i, i);
var b = _root["btn"+i];
b.attachMovie("back", "back", 1);
b.createTextField("tf", 2, 0, 0, 200, 20);
with (b.tf) {
border = true;
multiline = false;
autoSize = true;
selectable = false;
text = menu_xml.childNodes[0].childNodes[i].attributes.name;
}
b.link = menu_xml.childNodes[0].childNodes[i].attributes.link;
var my_color = new Color(b.back);
my_color.setRGB(menu_xml.childNodes[0].childNodes[i].attributes.color);
b.onPress = function() {
getURL(this.link, "_self");
};
if (i == len-1) {
F_detectButtonPosition();
}
}
};
//
F_detectButtonPosition = function () {
var buttons_tf_width = 0;
for (var i = 0; i<len; i++) {
var b = _root["btn"+i];
buttons_tf_width += b.tf._width;
if (i == len-1) {
for (var j = 0; j<len; j++) {
var b = _root["btn"+j];
margin = (Stage.width-buttons_tf_width)/len;
b.back._width = b.tf._width+margin;
b.tf._x = margin/2;
b._x = _root["btn"+(j-1)]._x+_root["btn"+(j-1)]._width;
}
}
}
};
Stage.scaleMode = "noScale";
Stage.align = "TL";
onResize = function () {
if (Stage.width>=900) {
F_detectButtonPosition();
}
};
Stage.addListener(this);
Второй спосом немного запутаннее первого, но, в принципе, тоже ничего архисложного нет, едиственное что тут главное понять это как расчитывается ширина каждой кнопки, а делается это очень просто, берём ширину сцены, отнимаем от неё сумму длин всех текстовых полей в кнопках, и делим на количество кнопок, в итоге получаем цифру которую нужно прибавить к ширине текстового поля каждой кнопки, вот и получается ширина всей кнопки.
Как всегда для самых ленивых прилагаю исходники
