Красочное меню с помощью XML и ActionScript 3.0

Сейчас я вам покажу, как создавать красочное флеш-меню с помощью XML и ActionScript 3.0. На старт, внимание, марш!

Приготовления:
Для работы нам понадобится библиотека TweenMax по ActionScript 3.0, чтобы анимировать наше меню. Скачайте TweenMax и сохраните папку "com" рядом с *.fla файлом.

Новый документ:
Создайте новый AS3.0 документ.

Элементы меню:
Нарисуйте прямоугольник со следующими параметрами:

width: 350 px
height: 45 px
stroke: none
fill: 0xffffff

Menu Item Movie Clip:
Сконвертируйте прямоугольник в мувиклип. Назовите его "Menu Item" и задайте точку регистрации в левом верхнем углу.
Прилинкуйте мувиклип к классу "MainItem".

Menu Item Background:
Двойным щелчком кликните по нашему мувиклипу, чтобы войти внутрь него для дальнейшего редактирования. Выделите прямоугольник внутри нашего мувиклипа и сконвертируйте его в еще один мувиклип. Задайте имя “Menu Item Fill” и точку регистрации в левом верхнем углу. Как вы уже догадались, этот мувиклип будет служить задним фоном нашего элемента меню.В последующем мы будем этот задний фон анимировать.

Background Instance Name:
Зададим мувиклипу “Menu Item Fill” имя экземпляра (instance name) “itemBackground”.

Menu Item Text Field:
Внутри мувиклипа “Menu Item” созданим новый слой по имени “menu text”. И на этом слое создадим динамическое текстовое поле со следующими параметрами:

instance name: itemText
width: 340 px
height: 30 px
family: Arial
size: 18 pt
color: #000000
format: align center

Встраиваем символы:
Нам нужно встроить некоторые символы, чтобы они отображались в текстовом поле. В свойствах динамического текстового поля кликаем по кнопке "Embed..." (или “Character Embedding...”) и выбираем там заглавные и прописные буквы, а так же цифры. Больше нам ничего не понадобится.

Последние приготовления сцены:
Возвращаемся на главную сцену и удаляем с нее наш мувиклип “Menu Item”. Наша сцена должна быть пустой. А мувиклип будет доступен из библиотеки.

XML файл:
Теперь давайте создадим XML файл, в котором будут прописаны все элементы меню. Откройте любой текстовый редактор и в новом текстовом документе напишите следующий код:


Home
/

Структура XML файла проста. Мы просто назначаем каждой кнопке меню имя и ссылку. Сохраните xml файл под именем "colorful_menu.xml". Можете прописать какие-нибудь свои кнопки.

Пишем код:
В первом кадре TimeLine пишем код.Для начала нам нужно загружить во флешролик наш XML файл:

//Импортируем TweenMax
import com.greensock.*;

//Задаем путь XML файла.
var xmlPath:String = "colorful_menu.xml";

//Переменная, в которую поместим дайнные из загруженного XML файла.
var xml:XML;

//Создаем загрузчик.
var loader = new URLLoader();
loader.load(new URLRequest(xmlPath));
loader.addEventListener(Event.COMPLETE, xmlLoaded);

//Эта функция вызывается, когда файл полностью загружен.
function xmlLoaded(e:Event):void {

//Убедимся, что файл загружен.
if ((e.target as URLLoader) != null ) {

//Создадим XML объект.
xml = new XML(loader.data);

//Вызовем функцию создания меню.
createMenu();
}
}

Код довольно простой. Сначала импортируем библиотеку TweenMax. Затем используем URLLoader для загрузки xml файла.Когда файл полностью загрузился, вызываем функцию xmlLoaded(). Функция xmlLoaded() создает xml объект из загруженных данных и запускает функцию создания меню createMenu(). Идем дальше.

Функция createMenu();

Пишем код дальше:

//Создаем контейнер, который будет содержать в себе элементы меню.
var menuHolder:MovieClip = new MovieClip();

//Добавляем контейнер в список отображения.
addChild(menuHolder);

//Сюда будем помещать количество созданных элементов меню.
var count:Number = 0;

function createMenu():void {

//Цикл проходит через все элементы в XML файле.
for each (var button:XML in xml.buttons.button) {

//Зодаем новый элемент меню.
var menuItem:MenuItem = new MenuItem();

//Позиционируем элемент меню.
menuItem.x = 0;
menuItem.y = count * menuItem.height;

//Добавляем текст элемента меню.
menuItem.itemText.text = button.label.toString();

//Задаем ссылку элементу меню.
menuItem.linkTo = button.linkTo.toString();

//Отключаем реакцию на события мыши у подобъектов мувиклипа элемента меню.
menuItem.mouseChildren = false;

//Добавляем слушатели событий для элемента меню.
menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
menuItem.addEventListener(MouseEvent.CLICK, itemClicked);

//Добавляем элемент меню в контейнер.
menuHolder.addChild(menuItem);

//Обновляем счетчик элементов меню.
count++;
}

//Вызываем функцию, которая назначает слушатели всему меню.
addMenuListeners();
}

Перед функцией мы создаем контейнер, который будет содержать все пункты меню, которые мы создадим. В функции мы создаем цикл через узлы в данных XML. Для каждой кнопки мы создаем пункт меню и устанавливаем текст меню, и назначаем URL. Мы помещаем пункты меню вертикально. Потом назначаем события мыши каждому пункту меню.

События мыши:
Напишем функции для событий мыши:

//Функция наведения мышью на элемент меню.
function mouseOverItem(e:Event):void {

//Получим элемент меню, который получил это событие мыши.
var item:MenuItem = e.target as MenuItem;

//Изменим цвет этого элемента меню.
TweenMax.to(item.itemBackground, 0.5, {tint: Math.random()*0xffffff});
}

//Функция отведения мыши от элемента меню.
function mouseOutItem(e:Event):void {

//Получим элемент меню, который получил это событие мыши.
var item:MenuItem = e.target as MenuItem;

//Изменим цвет этого элемента меню.
TweenMax.to(item.itemBackground, 1.5, {tint: 0xffffff});
}

//Функция клика по элементу меню.
function itemClicked(e:Event):void {

//Получим элемент меню, который получил это событие мыши.
var item:MenuItem = e.target as MenuItem;

//Перейдем по заданной ссылке.
var urlRequest:URLRequest = new URLRequest(item.linkTo);
navigateToURL(urlRequest);
}

Когда мышь наводится на элемент меню, его цвет изменяется на рандомный. Когда мышь отводится - цвет меняется на белый. Во время клика происходит переход по ссылке. Проще простого. :)

Функция addMenuListeners();

Если вы еще не забыли, то мы вызывали функцию addMenuListeners() в функции createMenu(). Так что давайте напишем и её:

//Функция назначает слушатели всему меню.

function addMenuListeners():void {

//Слушатели наведения.
menuHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverMenuF);
menuHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutMenuF);

//Слушатель ENTER_FRAME для анимации.
addEventListener(Event.ENTER_FRAME, enterFrameHandler);

}

//Мы должны знать, когда мышь была наведена.
var mouseOverMenu:Boolean = false;

//Эта функция вызывается, когда мышь наводится на меню.
function mouseOverMenuF(e:Event):void {

//Задаем переменной значение true.
mouseOverMenu = true;
}

//Эта функция вызывается, когда мышь отведена.
function mouseOutMenuF(e:Event):void {

//Задаем переменной значение false.
mouseOverMenu = false;
}

Тут вообще всё ясно. Так что продолжим.

Функция enterFrameHandler();

Напишем функцию enterFrameHandler(), которая будет анимировать меню:

//Эта функция вызывается каждый кадр.
function enterFrameHandler(e:Event):void {

//Проверяем, наведена ли мышь на меню.
if (mouseOverMenu) {

//Узнаем расстояние от верха сцены до мыши.
var distance:Number = mouseY;

//Высчитываем процент.
var percentage:Number = distance / stage.stageHeight;

//Высчитываем новую координату y (Помните, y изменяется, когда мы перемещаемся по меню.)
var targetY:Number = -((menuHolder.height - stage.stageHeight) * percentage);

//Анимируем переход меню в новую координату.
TweenMax.to(menuHolder, 0.2, {y: Math.round(targetY)});
}
}

Готово! Теперь можно протестировать ролик. И, если всё сделали без ошибок, у вас перед глазами появится разноцветное меню.