Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Урок по созданию уникального скроллбара
DooDLeZДата: Воскресенье, 28.03.2010, 20:18 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Всем привет.

От меня маленький урок по созданию вполне симпотиШного меню.

Для начала вот что получим в итоге:

Quote


Итак приступим.
Создаем документ 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);
}

Можно потом добавить фон (по вкусу).
Вот собственно и все. Надеюсь кому то быдет это все полезным.


  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта