Как создавать свои Flash-игры, подобные Angry Birds и World of Goo?
Box2D - это библиотека, которая моделирует физическое поведение твердых тел в двумерном пространстве. Программисты могут использовать ее в своих играх, чтобы сделать...
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.
Комментарии
Урок полезный.
Но это не ты являешься автором его, так что сделай ссылку внизу откуда взял и кто является автором.
Но это не ты являешься автором его
не факт, по крайней мере я не нашёл откуда он был скопирован :)
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте -
#3 Опубликовано 6 мая, 2009 - 02:33 пользователем nadya.fd
#4 Опубликовано 6 мая, 2009 - 12:09 пользователем dr.S
#5 Опубликовано 6 июня, 2009 - 11:31 пользователем kornet
#6 Опубликовано 10 ноября, 2009 - 10:22 пользователем Sadist_LX
#7 Опубликовано 12 января, 2010 - 16:08 пользователем кирилл_auto
#8 Опубликовано 5 ноября, 2010 - 02:51 пользователем ifoow
#9 Опубликовано 19 июня, 2011 - 15:39 пользователем Дурачёк
Вы чего, народ!
Там же в конце урока черным по белому ссылочка на источник дана:
Источник: ...
Ну.. или точнее на перевод, т.к. у автора перевода в свою очередь дана ссылка на источник.
вот-вот, хорошо, что ссылочка появилась, иначе некрасиво как-то получалось :)
демиарт - портал хороший очень и полезный... но давайте все-таки не будем друг с друга копипастить. имхо: этим мы обесцениваем достоинство этого ресурса и его оригинальность, против которой, кстати, лично я ничего не имею. лучшее место - еще поискать. где так все было доступно и интересно изложено - это я про изи флеш. спасибо вам, ребята, большое-большое и, надеюсь, такие копипастеры перестанут выдавать чужие работы за свои и не будут тем самым умалять достоинства этого прекрасного сайта
вроде все сказала. если что, прошу прощения.
спасибо за урок! неважно откуда, главное что есть!
Здравствуйте! Урок полезный. Один момент: Можно ли заставить реагировать flash на какое-нибудь внешнее событие - к примеру на переход по ссылке? И вернуть его в первоначальное положние, когда все кнопки будут снова на месте?
а как сделать чтобы при нажатие пройти по ссылке можно было
navigatetoURL();
посмотрите в справочнике , там все четко написано , а урок хороший , только вот одна проблемма , это копирование копирайта , такоре можно копировать и например переводить , а вы просто скопировали текст , а собственно сами ничего не сделали.
спасибо урок полeзный!
Это конечно хорошо что кнопка остаётся нажатой....
но множно ли (вернее я знаю что можно)... как сделать что-бы кнопочка которую мы нажали не зависимо от того куда потом двинулся курсор... и как которко была нажата.... что-бы потом проигрывалась небольшая анимация... например с потуханием клавиши... что-бы не пришлось держать кнопку нажатой.... если хотим просматреть её анимацию дальше...