DooDLeZ | Дата: Воскресенье, 28.03.2010, 20:18 | Сообщение # 1 |
WebMaster Сообщений: 485 [ ] | Всем привет. От меня маленький урок по созданию вполне симпотиШного меню. Для начала вот что получим в итоге: Итак приступим. Создаем документ AS3 500х160 35 кадров в сек. Меняем фон на какой нибудь потемнее (в исходнике и в коде приведенном ниже текст белого цвета и его не будет видно с фоном по умолчанию) Далее заходим в библиотеку и добавляем в нее шрифт который будем использовать. Присваиваем ему имя и делаем возможным импорт его в коде. Переходим в первый кадр единственного слоя и пишем следующий код: Code import fl.transitions.Tween; // для начала исмпортируем нужные нам классы для управления анимацией import fl.transitions.easing.*;
// установим значения var ind:int = 0; // будет счетчик ... по его значеням будет определять какой пункт меню был предыдущим при наведении var select:int = 0; //какой пункт был нажат (то есть текущий раздел)
//массивы с тектом и координатами пунктов меню var item_set:Array = new Array("Главная", "Какая нибудь", "Последняя Страница","Вторая","Пятая","Еще какая нибудь","Rjynfrns","Контакты"); var item_x:Array = new Array(50,130,245,410,50,115,260,340); var item_y:Array = new Array(50,50,50,50,90,90,90,90); var active:Sprite = new Sprite(); // спрайт для прямоугольника выделения var myTimer:Timer = new Timer(400, 1); // таймер для возврата выделения к текущему разделу (400 милисекунд, сработать 1 раз)
//var item_link:Array = new Array("#","#","#","#","#","#","#","#"); // для внешних ссылок если нужны
initMenu(); // инициализация меню ... главная функция
function activeMove(event:MouseEvent):void{ // перемещение выделения при наведении на пункт myTimer.stop(); // остановить таймер var index = this.getChildByName("item"+ind+"_mc"); // определить какой пункт меню был предыдущим
var myTween_x:Tween = new Tween(active, "x", Elastic.easeOut, index.x-10, event.currentTarget.x-10, 50, false); // переместить к пункту на который наведена мышка var myTween_y:Tween = new Tween(active, "y", Elastic.easeOut, index.y-5, event.currentTarget.y-5, 50, false); // var myTween_width:Tween = new Tween(active, "width", Elastic.easeOut, index.width, event.currentTarget.width, 50, false);// изменить размер под новый пункт ind = event.currentTarget.i; // сделать предудущим пункт меню на который навели мышку }
function startTime(event:MouseEvent):void{// при ухода с пункта меню myTimer.addEventListener("timer", selectMove);// определяется событие переносящее выделение на текущий раздел myTimer.start(); // запускается таймер и если не на какой пункт меню в течении оотведенного таймером времени не наведут на другой пункт меню или на этот же он переместит выделение на текущий раздел }
function setSelect(event:MouseEvent):void{// функция при клике на пункт меню ... определяется новый текущий раздел select = event.currentTarget.i; // var request:URLRequest = new URLRequest(event.currentTarget.link); // для внешних ссылок // navigateToURL(request,"_blank"); }
function selectMove(event:Event):void{ var index = this.getChildByName("item"+ind+"_mc"); var select_i = this.getChildByName("item"+select+"_mc"); var myTween_x:Tween = new Tween(active, "x", Elastic.easeOut, index.x-10, select_i.x-10, 50, false); var myTween_y:Tween = new Tween(active, "y", Elastic.easeOut, index.y-5, select_i.y-5, 50, false); var myTween_width:Tween = new Tween(active, "width", Elastic.easeOut, index.width, select_i.width, 50, false); ind = select; // сделать предыдущим пункт текущего раздела }
function initMenu():void{ for(var i:int = 0; i<item_set.length; i++){ // создаем пункты меню var item_mc:MovieClip = new MovieClip(); // новый клип для пункта var item:TextField = new TextField(); //тектовое поле var myFormat:TextFormat = new TextFormat; // формат для тектового поля item_mc.name = "item"+i+"_mc"; // обзываем наш клип что бы можно было без труда к нему обратиться потом item_mc.x = item_x[i]; // устанавливаем координаты item_mc.y = item_y[i]; // item_mc.addEventListener(MouseEvent.MOUSE_OVER, activeMove); // обработчики событий ... Мышка наведена на пункт меню item_mc.addEventListener(MouseEvent.MOUSE_OUT, startTime); // мышка ушла с пункта меню item_mc.addEventListener(MouseEvent.CLICK, setSelect); // и кликнули на пункте item_mc.i = i; // создаем новое свойство... оно будет хранить индекс пункта меню item_mc.buttonMode = true; // наш клип будет обрабатываться как кнопка (смена курсора, таб-наведение и т.д.) item_mc.mouseChildren = false; //неучитывать содержимое клипа (что бы не цеплялся курсор за текст) item.name = "item"+i+"_txt"; // присваиваем имя текстовому полю item.autoSize = TextFieldAutoSize.LEFT; // выравнивание и подгон размера item.text = item_set[i]; // заполняем текстом из массива item.embedFonts = true; // подключаем шрифты из библиотеки item.selectable = false; //убираем возможность выделения текста myFormat.color = 0xFFFFFF; // цвет формата текста myFormat.font = "Arial"; // шрифт myFormat.size = 14; // размер item.setTextFormat(myFormat); // присваиваем формат нашему текстовому полю //далее рисуем прямоугольник прозрачный что бы кнопка плучила бльшуючем текст активную область item_mc.graphics.lineStyle(1, 0x000000, 0, false, LineScaleMode.VERTICAL, CapsStyle.NONE, JointStyle.MITER, 10); item_mc.graphics.beginFill(0xFFCC00, 0); item_mc.graphics.moveTo(-10,-10); item_mc.graphics.lineTo(item.width+10,-10); item_mc.graphics.lineTo(item.width+10,item.height+10); item_mc.graphics.lineTo(-10,item.height+10); item_mc.graphics.lineTo(-10,-10); // "приделываем" текст к клипу ... клип к сцене addChild(item_mc); item_mc.addChild(item); }
// рисуем прямоугольник выделения в заранее "подготовленном" спрайте var index = this.getChildByName("item"+ind+"_mc"); active.x = index.x-10; active.y = index.y-5; active.graphics.beginFill(0x0099CC); active.graphics.drawRoundRect(0,0,index.width,index.height-10,0,0); addChild(active); }
for(var i:int = 0; i<item_set.length; i++){ // перебираем пункты меню что бы прямоугольник оказался на нижнем уровне var index = this.getChildByName("item"+i+"_mc"); addChild(index); } Можно потом добавить фон (по вкусу). Вот собственно и все. Надеюсь кому то быдет это все полезным.
| | | |