В этом уроке мы сконструируем кнопку (фактически это муви клип, который работает как кнопка, и мы не будем делать кнопку, мы будем создавать меню), которая имеет состояние over , состояние out и состояние down. Кнопка будет оставаться в нажатом состоянии (down), когда будет кликнута (выделена), и поэтому выделенная кнопка будет отличаться по виду от других кнопок, чтобы пользователь знал точно, на какой странице он находится. Меню будет выглядеть таким образом:
Quote
<!--Flash 200+300+http://kedicik.ucoz.ru/mymenu/myButton.swf--><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="300" width="200"><param name="wmode" value="transparent"><param name="MOVIE" value="http://kedicik.ucoz.ru/mymenu/myButton.swf"><param name="PLAY" value="TRUE"><param name="LOOP" value="TRUE"><param name="QUALITY" value="HIGH"><param name="allowscriptaccess" value="never"><embed src="http://kedicik.ucoz.ru/mymenu/myButton.swf" allowscriptaccess="never" play="TRUE" loop="TRUE" quality="HIGH" wmode="transparent" height="300" width="200"></object><!--End Flash-->
1. Создайте новый файл File > New, выберите Flash file (ActionScript 3.0) и кликните Ok. Сохраните файл как myButton.fla.
2. Вставьте новый слой (Insert>Timeline>Layer), назовите слои, начиная сверху: actions и buttons. В панели Property установите frame rate= 30.
3. Выделите Rectangle tool, установите цвет обводки - без обводки, цвет заливки (у меня черный) и в слое buttons нарисуйте прямоугольник. Установите размеры прямоугольика следующие: width = 170, height = 40. Выделите прямоугольник и нажмите F8, чтобы конвертировать его в муви клип. Установите его имя about_btn, точка регистрации в левом верхнем углу и кликните Ok. В панели Property установите ее инстанс имя about_btn.
4. Дважды кликните по мувику about_btn, чтобы открыть его. Вставтьте 3 новых слоя и назовите их сверху: actions, labels, text и bg. Выделите черный прямоугольник, нажмите F8, чтобы конвертировать его в мувик и установите его имя bg.
5. В слое bg выделите кадр 2 и нажмите F6, чтобы вставить новый ключевой кадр, повторите этот шаг для кадров 9, 10, 11 и 18. Выделите кадр 9; кликните по черному прямоугольнику и в панели Property установите его свойство альфа 50%. Сделайте то же самое для кадров 10 и 11.
Теперь по правой кнопке меню между кадрами 2 и 9 выберите Create Motion Tween. Сделайте то же самое для интервала 11-18. Ваш слой bg должен выглядеть так:
6. Заблокируйте слой bg и выделите слой text. Из Toolbar возьмите Text tool, установите тип в static и на сцене кликните и напечатайте слово About. Выделите текстовое поле, нажмите F8, чтобы конвертировать его в мувик и установите его имя aboutTxt.
Положение мувика aboutTxt такое: x=5, а для y - разместите мувик в центре черного прямоугольника.
7. В слое text выделите кадр 2 и нажмите F6, чтобы вставить новый ключевой кадр, повторите этот шаг для кадров 9, 10, 11 и 18. Выделите кадр 9; кликните по мувику aboutTxt и в панели Property установите x=20. Сделайте то же самое для кадров 10 и 11.
Теперь по правой кнопке между кадрами 2 и 9 выберите Create Motion Tween. Сделайте то же самое для интервала 11-18.
8. В слое labels выделите кадр 2 и нажмите F6, чтобы вставить новый ключевой кадр, повторите этот шаг для кадров 10 и 11. Выделите кадр 2 и в панели Property установите название Frame - over, установите название для кадра 10 - down и для 11 кадра - out.
9. В слое actions выделите кадр 1, нажмите F9, чтобы открыть панель ActionScript и напишите stop();Выделите кадр 9, нажмите F6, чтобы вставить новый ключевой кадр, откройте панель ActionScript и напишите stop();.
Теперь наш about_btn создан полностью. Кнопка должна выглядеть внутри таким образом:
Кликните по Scene 1, чтобы вернуться на основную сцену. Мы построим еще две кнопки, чтобы в финале мы имели хорошее меню с тремя кнопками. Вы можете сделать кнопок больше, если хотите.
10. Кликните по about_btn на сцене, удерживая клавишу Alt, вытащите новую копию кнопки. По правой кнопке мыши по новой кнопке выберите Duplicate Symbol, установите имя кнопки portofolio_btn. В панели Property установите ее инстанс имя portofolio_btn.
11. Дважды кликните по portofolio_btn, нам нужно изменить текст. В слое text выделите кадр 1, правой кнопкой мыши по мувику aboutTxt выберите Duplicate Symbol, установите имя portofolioTxt. Теперь, дважды кликните по мувику portofolioTxt, чтобы открыть его, и измените текст на Portofolio.
12. Вернитесь к portofolio_btn, кликнув по синей стрелке слева над Timeline. В слое text выделите кадр 2, правой кнопкой мыши по мувику aboutTxt выберите Swap Symbol, выберите portofolioTxt и кликните Ok. Повторите этот процесс для кадров 9, 10, 11 и 18.
Наша вторая кнопка готова. Сейчас у нас две кнопки: About и Portofolio. Третья кнопка для вас, следуйте шагам от 10 до 12 чтобы сделать кнопку Contact.
13. Вернитесь на основную сцену, теперь вы должны иметь три кнопки. Выделите кадр 1 из слоя actions и нажмите F9, чтобы открыть панель ActionScript, скопируйте и вставьте код, приведенный ниже.
Code
stage.frameRate = 30;
//---- добавляем кнопки к массиву --------
var buttonsArray:Array = [about_btn,portofolio_btn,contact_btn];
//----цикл в массиве buttonsArray-----
//----установим некоторые свойства и добавим события кнопкам----
function setButtons():void {
for (var i:int=0; i<buttonsArray.length; i++) {
buttonsArray[i].id = i;
buttonsArray[i].buttonMode = true;
buttonsArray[i].mouseChildren = false;
buttonsArray[i].mouseEnabled = true;
buttonsArray[i].addEventListener(MouseEvent.ROLL_OVER,playOver);
buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT,playOut);
buttonsArray[i].addEventListener(MouseEvent.CLICK,doClick);
}
}
//----выполняется, когда мышь наводится над кнопкой----
function playOver(event:MouseEvent):void {
event.currentTarget.gotoAndPlay("over");
}
//----выполняется, когда мышь уходит с кнопки----
function playOut(event:MouseEvent):void {
event.currentTarget.gotoAndPlay("out");
}
//----выполняется, когда мышь кликает кнопку-----
function doClick(event:MouseEvent):void{
//----установим переменную currentBtn равную-----
//----идентификатору кнопки (id) , которая была кликнута-----
var currentBtn:int = event.currentTarget.id;
//----вызываем функцию setSelectedBtn
setSelectedBtn(currentBtn);
}
/*проверим, какая кнопка была кликнута,
если id , переданная в функцию setSelectedBtn,
идентична id кликнутой кнопки,
мы полагаем, что кнопки находятся в положении нажатой down (выделенная)
и удаляем все события, добавленные к ней*/
function setSelectedBtn(id:int):void{
for (var i:int=0; i< buttonsArray.length; i++) {
if (id == i) {
buttonsArray[i].gotoAndStop("down");
buttonsArray[i].buttonMode = false;
buttonsArray[i].mouseEnabled = false;
buttonsArray[i].removeEventListener(MouseEvent.ROLL_OVER,playOver);
buttonsArray[i].removeEventListener(MouseEvent.ROLL_OUT,playOut);
buttonsArray[i].removeEventListener(MouseEvent.CLICK,doClick);
} else {
if(buttonsArray[i].currentLabel =="down"){
buttonsArray[i].gotoAndPlay("out");
}
buttonsArray[i].buttonMode = true;
buttonsArray[i].mouseEnabled = true;
buttonsArray[i].addEventListener(MouseEvent.ROLL_OVER,playOver);
buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT,playOut);
buttonsArray[i].addEventListener(MouseEvent.CLICK,doClick);
}
}
}
//----вызываем функцию setButtons ----
setButtons();
Это все. Не знаю, нужен ли такой урок?
