Кнопка, которая остается в нажатом состоянии.

Кнопка, которая остается в нажатом состоянии.
Информация
Описание: 

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, скопируйте и вставьте код, приведенный ниже.

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();

Это все с actionscript.

Исходник: 

Комментарии

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

Урок полезный.
Но это не ты являешься автором его, так что сделай ссылку внизу откуда взял и кто является автором.

Аватар пользователя Fly
Цитата: Aloran

Но это не ты являешься автором его

не факт, по крайней мере я не нашёл откуда он был скопирован :)

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте -

Аватар пользователя nadya.fd

Вы чего, народ!
Там же в конце урока черным по белому ссылочка на источник дана:

Источник: ...
Ну.. или точнее на перевод, т.к. у автора перевода в свою очередь дана ссылка на источник.

Аватар пользователя dr.S

вот-вот, хорошо, что ссылочка появилась, иначе некрасиво как-то получалось :)
демиарт - портал хороший очень и полезный... но давайте все-таки не будем друг с друга копипастить. имхо: этим мы обесцениваем достоинство этого ресурса и его оригинальность, против которой, кстати, лично я ничего не имею. лучшее место - еще поискать. где так все было доступно и интересно изложено - это я про изи флеш. спасибо вам, ребята, большое-большое и, надеюсь, такие копипастеры перестанут выдавать чужие работы за свои и не будут тем самым умалять достоинства этого прекрасного сайта
вроде все сказала. если что, прошу прощения.

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

спасибо за урок! неважно откуда, главное что есть!

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

Здравствуйте! Урок полезный. Один момент:  Можно ли заставить реагировать flash  на какое-нибудь внешнее событие - к примеру на переход по ссылке? И вернуть его в первоначальное положние, когда все кнопки будут снова на месте?

 

Аватар пользователя кирилл_auto

а как сделать чтобы при нажатие пройти по ссылке можно было

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

navigatetoURL();
посмотрите в справочнике , там все четко написано , а урок хороший , только вот одна проблемма , это копирование копирайта , такоре можно копировать и например переводить , а вы просто скопировали текст , а собственно сами ничего не сделали. 

Аватар пользователя Дурачёк

спасибо урок полeзный!

Это конечно хорошо что кнопка остаётся нажатой....
но множно ли (вернее я знаю что можно)... как сделать что-бы кнопочка которую мы нажали не зависимо от того куда потом двинулся курсор... и как которко была нажата.... что-бы потом проигрывалась небольшая анимация... например с потуханием клавиши... что-бы не пришлось держать кнопку нажатой.... если хотим просматреть её анимацию дальше...