Продвинутое XML меню с помощью ActionScript 3.0

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

Get Adobe Flash player

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

В этом уроке будем учиться создавать продвинутое XML меню. Для выполнения этого урока нам понадобится библиотека TweenMax

Подготовка:

1. Создадим *.fla документ размером 400х350.

2. Создадим элемент меню. Нарисуем квадрат размером 40х40. Сконвертируем квадрат в мувиклип и дадим ему имя "menuItem". Зададим точку регистрации в левом верхнем углу.

3. Внутри мувиклипа на новом слое добавим динамическое текстовое поле по центру мувиклипа. Зададим выравнивание текста по центру. Напишем в текстовом поле что-нибудь, например, "1".

4. Встроим шрифт числовых символов.

5. В свойствах текстового поля зададим имя "menuItem".

6. Привяжем наш мувиклип к классу "MainItem".

7. Удалим мувиклип со сцены. Он останется у нас в библиотеке. Работать с ним мы будем с помощью скрипта.

XML файл:

8. Открываем блокнот и пишем в нем следующий код:

<?xml version="1.0" encoding="utf-8"??>1.11.22.12.22.32.43.13.23.33.44.14.24.3

9. Сохраняем текстовый файл рядом с *.fla файлом под именем "flash_menu.xml".

Пишем скрипт:

10. В первом кадре таймлайна пишем следующий код:

//Импортируем ТвинМакс для анимации.
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([GlowFilterPlugin]);

//Сохраняем высоту элемента меню в константе.
const ITEM_HEIGHT:Number = 40;

//Сохраняем путь до XML файла.
var xmlPath:String = "flash_menu.xml";

//The XML data will be inserted into this variable
var xml:XML;

//Задаем расположение меню по Y.
var floor:Number = 280;

//Здесь будет храниться массив текущего выбранного меню.
var selectedMenu:Array;

//Здесб будет храниться чисто созданных меню.
var menuCounter:uint = 0;

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

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

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

//Поместим загруженные данные в XML переменную.
xml = new XML(loader.data);

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

//Эта функция создаем все меню.
function createMenus():void {

//Цикл ищет список меню в XML файле
for each (var menu:XML in xml.menu) {

//Мы создаем пункт меню каждый раз, как цикл находит пункт меню в XML файле.
//Мы отправляем "menu" данные xml как параметр функции создания меню..
var menuItems:Array = createMenu(menu);

//Расставляем элементы меню, которые находятся у нас в массиве.
for (var i= 0; i

Готово. Напомню, если возникли какие-либо вопросы, то обращайтесь на форум.

Исходник: 

Впервые!

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

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

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

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

Комментарии

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

В пунктах меню нужно поменять мувик на кнопку , иначе не появляется рука при наведении

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

6. Привяжем наш мувиклип к классу "MainItem".

а на скрине написано MenuItem =)))

Аватар пользователя ProcXel.A

Цитата: ifoow

В пунктах меню нужно поменять мувик на кнопку , иначе не появляется рука при наведении

Ничего менять не нужно. Достаточно задать мувиклипу свойство:

 menuItem.buttonMode = true;

И появится рука при наведении.

Цитата: NecroS

а на скрине написано MenuItem =)))

Да. Чуток ошибся. Так что сверяйтесь с исходником. :)

True Love

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

Спасибо!! как раз то что мне нужно!!))

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

TweenMax платный? чего то не получается скачать...

Аватар пользователя ProcXel.A

TweenMax запакован в исходнике к уроку.) И он бесплатный.)))) И скачать его легко можно на их сайте. Вы просто не на те кнопки жмете на сайте. Будьте внимательнее. :)

True Love

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

спасибо, я просто английского не знаю(

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

Кто может посказать.
Как это меню из горизонтального в вертикальное превратить?