Создание меню через XML

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Информация
Автор/переводчик: 
ProcXel.A
Описание: 

В этом уроке Я расскажу вам о простом XML приёме, который вы можете использовать для того, чтобы создавать своё меню. С помощью XML вы можете легко и быстро изменять своё меню так, как вам больше нравится.

Настройка элементов

1. Сначала нужно создать XML файл. Напишите в блокноте следующий код и сохраните файл под именем "menu.xml".

2. Создайте новый *.fla документ и сохраните его рядом с XML файлом.

3. Теперь создадим кнопку меню. Нарисуйте прямоугольник 100х30 и сконвертируйте его в мувиклип с именем "menuItem" и точкой регистрации в левом верхнем углу.

4. Внутри мувиклипа создайте еще один слой с текстовым полем. В свойствах текстового поля сделайте его динамическим и пропишите instance name как "menuLabel". Нажмите кнопку Embed и встройте все символы в текстовое поле.

5.Удалите мувиклип menuItem со сцены (он останется в библиотеке). И прилинкуйте мувиклип к классу "MenuItem".

Пишем код

6. В таймлайне *.fla документа, в первом кадре пишем код.

Сначала создадим переменную и попробуем загрузить *.xml файл.

//Импорт необходимых классов.
import fl.transitions.Tween;
import fl.transitions.easing.*;

//Путь до XML файла.
//Вы можете прописать любой путь.
var xmlPath:String = "menu.xml";

//Данные из XML будут помещены в эту переменную после загрузки.
var settingsXML:XML;

//Массив для твин анимаций нужен для того,
//чтобы сборщик мусора не удалял анимации в самое неподходящее время.
var tweensArray:Array = new Array();
//Твин анимации кнопки.
var buttonTween:Tween;

// Загружаем XML файл
var loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(new URLRequest(xmlPath));

Если всё понятно, то пишем дальше. :) Теперь напишем функцию загрузки:

//Эта функция вызывается, когда XML файл загружен.
function xmlLoaded(e:Event):void
{
//Проверяем, не равен ли наш загружчик null.
if ((e.target as URLLoader) != null )
{
//Помещаем данные XML файла в переменную.
settingsXML = new XML(loader.data);
settingsXML.ignoreWhitespace = true;
//Вызываем функцию создания меню.
createMenu();
}
}

Теперь напишем функцию создания меню:

function createMenu():void
{
//Локальная переменная для экземпляра класса MenuItem.
var menuItem:MenuItem;
//Счетчик.
var i:uint = 0;

//Цикл по пунктам links, найденых в XML файле.
for each (var link:XML in settingsXML.links.link)
{

menuItem = new MenuItem();

//Вставка названия кнопки меню. (link.@name читает атребут "name" в элементе link)
menuItem.menuLabel.text = link. @ name;

//Если текст больше, чем текстовое поле, то выравниваем размер.
menuItem.menuLabel.autoSize = TextFieldAutoSize.LEFT;

//Помещаем кнопку меню на сцену.
menuItem.x = 20;
menuItem.y = 30 + i * 40;

//Активируем крсор над кнопкой. Отключаем у текстового поля кнопки реакцию на мышь.
menuItem.buttonMode = true;
menuItem.mouseChildren = false;

//Назначаем слушатели событий.
menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

addChild(menuItem);

//Считаем количество кнопок.
i++;
}
}

Теперь последний штрих - функции наведения и отведения мыши, которые будут анимировать кнопки://Наведение мыши.
function mouseOverHandler (e:Event):void {

//Увеличение до двойной длины.
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, 1, 2, 1, true);
}

//Отведение мыши.
function mouseOutHandler (e:Event):void {

//Возврат к нормальной длине.
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, e.target.scaleX, 1, 1, true);

}

Готово. Тестируем ролик и наслаждаемся своим новым меню.

Весь код сразу:

//Импорт необходимых классов.
import fl.transitions.Tween;
import fl.transitions.easing.*;

//Путь до XML файла.
//Вы можете прописать любой путь.
var xmlPath:String = "menu.xml";

//Данные из XML будут помещены в эту переменную после загрузки.
var settingsXML:XML;

//Массив для твин анимаций нужен для того,
//чтобы сборщик мусора не удалял анимации в самое неподходящее время.
var tweensArray:Array = new Array();
//Твин анимации кнопки.
var buttonTween:Tween;

// Загружаем XML файл
var loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(new URLRequest(xmlPath));

//Эта функция вызывается, когда XML файл загружен.;
function xmlLoaded(e:Event):void
{
//Проверяем, не равен ли наш загружчик null.
if ((e.target as URLLoader) != null )
{
//Помещаем данные XML файла в переменную.
settingsXML = new XML(loader.data);
settingsXML.ignoreWhitespace = true;
//Вызываем функцию создания меню.
createMenu();
}
}

function createMenu():void
{
//Локальная переменная для экземпляра класса MenuItem.
var menuItem:MenuItem;
//Счетчик.
var i:uint = 0;

//Цикл по пунктам links, найденых в XML файле.
for each (var link:XML in settingsXML.links.link)
{

menuItem = new MenuItem();

//Вставка названия кнопки меню. (link.@name читает атребут "name" в элементе link)
menuItem.menuLabel.text = link. @ name;

//Если текст больше, чем текстовое поле, то выравниваем размер.
menuItem.menuLabel.autoSize = TextFieldAutoSize.LEFT;

//Помещаем кнопку меню на сцену.
menuItem.x = 20;
menuItem.y = 30 + i * 40;

//Активируем крсор над кнопкой. Отключаем у текстового поля кнопки реакцию на мышь.
menuItem.buttonMode = true;
menuItem.mouseChildren = false;

//Назначаем слушатели событий.
menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

addChild(menuItem);

//Считаем количество кнопок.
i++;
}
}

//Наведение мыши.
function mouseOverHandler (e:Event):void {

//Увеличение до двойной длины.
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, 1, 2, 1, true);
}

//Отведение мыши.
function mouseOutHandler (e:Event):void {

//Возврат к нормальной длине.
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, e.target.scaleX, 1, 1, true);

}

Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Комментарии

Аватар пользователя samana

Класс! Мне нравится!

Аватар пользователя SarGun

прикольно.. я когдато делал чтото подобное)
http://www.weblancer.net/users/SarGun/portfolio/529963.html#item 

Аватар пользователя ProcXel.A
Цитата: samana

Только там где код объясняется по частям, упущено определение функции на over

Думаю, в скором будущем ошибку исправят. :) Благодарю. 

True Love

Аватар пользователя SerDmitt

Всем добрый день!


Много интересного на этом сайте, однако, есть вопросы, на которые не смог найти нормальных туториалов...Быть может кто-то из присутствующих сможет создать нужную интересную и подробную темку? Думаю, что она была бы интересна не только мне 

smile

 

Меня интересует слудующее:

- Принцип изготовления flash pop-up и richmedia баннеров

- Нюансы изготовления

- Процесс кодирования (ибо с кодами пока мало знаком)

- Как делать подобные баннеры без фона, необычной формы (треугольники, сложные формы и прочее), с кнопкой закрытия

- Прочая полезная информация по данному типу баннеров (сложности, работа с весом баннера, интересные возможности воплащения и т.п.)

 

Буду очень благодарен всем за помощь в черпании знаний (очень нуждаюсь в данной информации).

Аватар пользователя CatoKit

TypeError: Error #1009: Не удается вызвать свойство или метод со ссылкой на объект "null".
    at _fla::MainTimeline/createMenu()
    at _fla::MainTimeline/xmlLoaded()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

Где то грабли нашел.

Грабли найдены. Работает!

Аватар пользователя radion_80

выводит такое сообщение

Error: Error #2136: SWF-файл file:///C|/Documents and Settings/RadioN/Рабочий стол/menuXML/MenuXML.swf содержит недопустимые данные.

at MenuItem/createMenu()

at MenuItem/xmlLoaded()

at flash.events::EventDispatcher/dispatchEventFunction()

at flash.events::EventDispatcher/dispatchEvent()

at flash.net::URLLoader/onComplete()

 почему подскажите

Аватар пользователя jg54

>> И прилинкуйте мувиклип к классу "MenuItem".

Каку это ? не понятно. 

И второй вопрос: если меню встраевается в обычный сайт, как указать ссылки для кнопок на конкретные контенты?

Аватар пользователя Wd

Flash для сайтов уже не катит))
это легко можно сделать с помощью jQuery-библиотеки для JS.
но всё равно урок хороший)

smile

 

Аватар пользователя alex72

класно

Аватар пользователя toherman

Где-то автор недоперемудрил.
Если всё верно, то при создании меню по описанию всё должно пройти гладко и без ошибок.

У меня программа ругнулаась на 4 ошибки в коде и вывела сообщения:

Не удалось загрузить класс или интерфейс "fl.transitions.Tween".
Не удалось загрузить класс или интерфейс "Event".
Ожидается ")"
Обнаружен непредвиденный "}"

Может я что-то делаю не так, но как может отобразится меню в слое, в котором ничего нет по сути? Мы же всё удалили, правда сделав какую-то нелепую привязку, а сама сцена осталась пуста на практике.

Аватар пользователя Fly

меню должно находиться в библиотеке, как я понял

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя toherman

Цитата: Fly

меню должно находиться в библиотеке, как я понял

Внутри флеши? Как-то не естественно для этого типа.
Меню должно быть динамичным, т.е. изменяемым, а иначе к чему такие сложности?
Может автор снизайдет до начинающих и обяснит на пальцах и желательно для русифицированной версии тоже.

Как же правильно всё сделать?
Прыгать с бубном не хочется, после рабочего дня подвижность совсем не та...