Как создавать свои Flash-игры, подобные Angry Birds и World of Goo?
Box2D - это библиотека, которая моделирует физическое поведение твердых тел в двумерном пространстве. Программисты могут использовать...
Сейчас я вам покажу, как создавать красочное флеш-меню с помощью XML и ActionScript 3.0. На старт, внимание, марш!
Приготовления:
Для работы нам понадобится библиотека
Новый документ:
Создайте новый 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
/
Tutorials
/flatexttutorials
Forum
About
/aboutus.html
Home
/
Tutorials
/flatexttutorials
Forum
About
/aboutus.html
Home
/
Tutorials
/flatexttutorials
Forum
About
/aboutus.html
Home
/
Tutorials
/flatexttutorials
Forum
About
/aboutus.html
Home
Tutorials
Forum
About
Add more buttons with XML!
Структура XML файла проста. Мы просто назначаем каждой кнопке меню имя и ссылку. Сохраните xml файл под именем "colorful_menu.xml". Можете прописать какие-нибудь свои кнопки.
Пишем код:
В первом кадре TimeLine пишем код.Для начала нам нужно загружить во флешролик наш XML файл:
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)});
}
}
Готово! Теперь можно протестировать ролик. И, если всё сделали без ошибок, у вас перед глазами появится разноцветное меню.
Впервые!
Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень
С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!
Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов
Комментарии
Симпотично =)))
Хороший урок! Спасибо!
KLASS !!!!
Спасибо!!!! Очень благодарен!
Спасибо, отличный пример, но когда меняю в XML названия на русские, отображаются кракозябры, что с этим можно сделать?
отвечу на свой вопрос сам, просто необходимо чтоб кодировка XML была utf-8
Подскажите пожалуйста, как корректно встроить эту swf в другую swf, всё получилось, но она не привязывается по размеру мувиклипа, и стоит себе по середине сцены(
https://s002.radikal.ru/i200/1107/7c/23ee14839de8.jpg
на скриншоте - зелёный квадрат - мувиклип, к которому нужно привязать загружаемую флешку, тоесть это меню