Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
Будь мягче
tn_gallery_58_104_37870.jpg

Blagovsky©
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Основоположения программирования - часть V.2, События в AS2: продолжение - пишем "переключатель"
V
Des
сообщение 3.05.2009 - 10:51
Сообщение #1


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


предыдущая часть: основоположения программирования - часть V.1
начало: основоположения программирования - часть i

события: особенности обработки событий в as2.

в этом уроке мы попробуем создать аналог "radiobutton group", или, для тех, кто не знаком с html-элементами - "переключатель". на вид задача проста: несколько кнопок, при нажатии на любую из которых "нажатая" кнопка переходит в состояние "включено", а остальные - "выключено". и, конечно, где-то "отмечается", какая кнопка нажата.
применений такому "переключателю" масса - от выбора варианта в "опциях" до "закладок", которые реализуются на том же механизме.
однако в ходе работы выяснится одна пренеприятная особенность as2, которую нам придется "обходить" - заодно вникая в систему events (событий).


1. Подготовительная работа

Подготовим "полигон": создаём документ as2 \ flash player 9.0, устанавливаем размер 450 x 200 px, fps = 25.
рисуем в первом кадре единственного пока слоя (переименуем его в "back" для порядка) прямоугольник размером 450 x 200, устанавливаем его в координаты x = 0, y = 0 и задаем (открыв по необходимости палитру цветов - [F9]) градиент на свой вкус.
фон готов. file => save as => ...
по [ctrl]+[F8] создаем новый библиотечный символ-"кнопку" (button), называем его "btn", сразу же отмечаем галочкой пункт "экспортировать в action script" (пункт "Экспортировать в первом кадре" отметится "галочкой" автоматически - так и нужно оставить) => [Enter]
Т.о. мы создали новый (пока пустой) символ-кнопку и присвоили ему идентификатор, по которому к этому библиотечному символу можно будет обращаться из программы - напр., создать его экземпляр на сцене - что мы в дальнейшем, кстати, и сделаем.
Открываем библиотеку (Library - [Ctrl]+[L]), двойным щелчком на единственном пока в библиотеке символе "btn" открываем его на редактирование.
Рисуем, напр., кружок диаметром 30px в первом фрейме, заливаем цветом или градиентом на свой вкус. 2-й и 3-й фрейм превращаем в кейфреймы ( [F6] ), кружок в них перекрашиваем в другие цвета.
Переходим на основную сцену \ основной таймлайн. Создаем новый слой, переименовываем его в AS. Я обычно располагаю слой со скриптами в самом "низу", некоторые, наоборот, размещают его поверх всех слоев - главное, чтобы это был отдельный слой только и исключительно для скриптования.
Выбираем первый фрейм этого слоя, открываем AS-редактор ( [F9] ), пишем там stop(); (весь последующий код будет располагаться перед этим оператором).
Сравните с этим исходником: buttonsArray0.fla
Если сейчас сгенерить swf ( [F12] ), то в нем, кроме фона, ничего не будет. Наш переключатель мы будем строить программно.
А чтобы контролировать этот занимательный процесс, создадим текстовое поле, в которое мы сможем выводить потребную нам для отладки информацию.
Введите перед оператором "stop();" следующий код:
CODE
var tf:TextField = _root.createTextField("tf",_root.getNextHighestDepth(),5,100,440,50);

Тем самым мы создаем динамическое текстовое поле с именем "tf", располагающееся на основной сцене, с координатами x=5, y=100 и размером 440 x 50.
Теперь в это текстовое поле можно выводить текст, просто присваивая строку свойству tf.text, т.е., например, так:
tf.text = "hello, Flash!";
На этом подготовительный этап окончен.


2. Выстраиваем ряд кнопок

Теперь пора выстроить в ряд наши кнопочки. А заодно и получить удобный метод к ним обращения.
Кнопки у нас не просто однотипные - они одинаковые. А к однотипным объектам удобно обращаться по номеру-индексу. Т.е. в этом случае прямо-таки напрашивается использование массива ( см. Основоположения программирования - часть IV.2 )
Пишем:

CODE
var num:Number = 12; // количество кнопок
var ii:Number; // счетчик
var btns:Array = new Array(); // здесь и будут храниться ссылки на наши кнопки.
var btn_:MovieClip; // временная переменная.
//
/*
Оформим инициализацию (все, что происходит сразу же после загрузки ролика) как отдельную функцию.
*/

init();

function init() { // здесь и будет наш основной код.
for (ii=0;ii<num;ii++) {
// "обнуляем" временную переменную на каждом шаге цикла
btn_ = new MovieClip();
// создаем в ней пустой ролик-контейнер для очередной кнопки
// с именем btn_target#, где # - номер итерации цикла
// вообще-то имя этого контейнера мы использовать нигде
// не будем, но имена должны быть разными, и для этого
// мы добавляем к имени строку, полученную из
// значения счетчика цикла

btn_ = _root.createEmptyMovieClip("btn_target"+ii.toString(),_root.getNextHighestDepth());
//
// а) присоединяем к "контейнеру", ссылка на который
// хранится во временной переменной btn_, библиотечный символ
// с Linkage Name "btn", т.е. нашу кнопку, и именуем ее
// аналогично контейнеру.
// б) ссылку на нее сразу же "загоняем" в массив btns
// обратите внимание:
// при использовании Array.push(...); на каждой итерации
// цикла со счетчиком индекс только что "загнанного"
// в массив элемента совпадает со значением
// счетчика итераций...

btns.push(btn_.attachMovie("btn","btn"+ii.toString(),_root.getNextHighestDepth()));
// ...что мы и используем, сразу устанавливая
// новорожденную кнопку в нужное место на сцене

btns[ii]._x = ii * btns[ii]._width + 15; // ...в ряд по горизонтали
btns[ii]._y = 15; // и на одном уровне по вертикали.
} // end for

} // end init


Попробуем: [F12]. Если мы нигде не опечатались - то кнопочки должны стоять на своих местах.


3. Самое интересное.

Ну что ж, пора уже сделать так, чтобы после нажатия на кнопку что-нибудь происходило. На ту или иную кнопку...
Казалось бы, логично и просто - добавить в цикл (после установки кнопки в координаты) что-то вроде
btns[ii].onRelease = function() { tf.text = "Кнопка " + ii.toString(); } - и дело с концом.
Попробуйте...
Оп-па... выходит - но не то!
Ну да, кнопка "срабатывает", но... в текстовом поле появляется совсем не номер кнопки, а всегда - номер последней кнопки... на какую бы из них мы не нажали.
Беда! - так что уберите или закоментируйте эту добавленную строку.

В чем тут дело?
...а дело в следующем:
AS2 не передает в объекте-event-е ссылку на объект, вызвавший событие - по крайней мере для мышиных событий. Т.е., когда наступает событие "кнопка нажата", программа не знает, от какой кнопки это событие поступило. AS2 просто не различает обработчики событий от разных кнопок - для него они все "за нумером 11", даром что имена у них разные...
Руган AS2 за это переруган, и в AS3 это безобразие исправлено кардинально - там объект-событие всегда несет информацию о вызвавшем его экземпляре класса, но... нам нужно, чтобы работало (а еще нужно, чтобы вы разобрались в этой хитромудрой AS2-"особенности").
Замечу, кстати, что не для всех событий это так - напр., события загрузки передают информацию об объекте-лоадере, вызвавшем событие.

Путей решения этой проблемы несколько:
- можно воспользоваться возможностями EventDispatcher-класса - регистрировать события с помощью этого класса на конкретные объекты. Долго, сложно.
- Можно пользовать "общие" события мыши onMouseDown, OnMouseUp, ... и отслеживать координаты мыши, при которых событие наступило. Долго, сложно и в конечном итоге криво (а если кнопки - неправильной формы?)
- можно как-то "обозначить"-пометить объект-кнопку, чтобы при обработке события "узнать" его. Наверно, самый простой способ - так мы и поступим, рассмотрев две разновидности сего действа.

4. Кнопка-с-id

Вспомним, что кнопка (давно, кстати, ставшая у нас MovieClip-ом - об этом подробнее чуть позже) - объект, причем динамический. Последнее означает, что, благодаря вольготности AS2, мы можем добавлять новые свойства этому объекту по своему разумению когда вздумается-понадобится.
Так и поступим. Дописываем после "btns[ii]._y = 15" такую простую конструкцию:
btns[ii].n = ii;
Вот так просто - добавили новое свойство .n к кнопкам, и присвоили ему текущее значение счетчика. Вот теперь наши кнопки никуда не убегут...
Получили событие? - определим, откуда его ветер принес... для чего напишем функцию получения номера кнопки по её id (т.е. по свойству .n):
Пишем вспомогательную функцию:
CODE
function getBtnNum(b) {
for (ii=0;ii<num;ii++) { // перебираем все кнопки
if (b.n == ii) { // и когда id кнопки совпадает со значением счетчика цикла...
return ii; // возвращаем это значение, прерывая тем самым выполнение цикла
}
}
return null; // это если кто-то, находясь в подпитии,
// передал в функцию нечто, что не есть кнопка, или кнопка,
//но не наша - без свойства "n" или с n >= num
}


Смысл понятен? Поскольку кнопок у нас вряд ли будет хотя бы и 1000, а флэш и до 10 000 в цикле посчитать может, не скрипнув по производительности, - просто перебираем, пока не совпадет. Совпало - отдаем номер. А дальше - дело техники: по номеру-индексу получим и ссылку на саму кнопку, благо они в массиве.

Напр., так: дописываем в цикл функции init() после "btns[ii].n = ii":
CODE
btns[ii].onRelease = function () {
var bNum:Number = getBtnNum(this);
// "this" значит "это" - ссылка на объект, которому
// "принадлежит" функция. Т.е. "та самая" кнопка

tf.text = "Кнопка " + bNum.toString(); // вот теперь можно, наконец, вывести номер нажатой кнопки
}


[F12]
Работает? Если нет - проверяйте по исходнику buttonsArray.fla
Должно заработать.
А второй способ получения этого результата, несколько более изящный, мы рассмотрим в следующий раз, а заодно и допишем код "переключателя", чтобы он переключался, а не только выдавал номер кнопки.
Впрочем, последнее вы можете попробовать сделать сами - считайте это мини-заданием к уроку.
Подсказка: заводим массив мувиклипов-"индикаторов" с двумя состояниями-фреймами каждый...

Продолжение следует.
____________________________________


автором урока является des.
запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.


the tutorial is written by des.
no part of this tutorial can be copied/pasted on any other website without the author's express written permission.


Сообщение отредактировал Des - 3.05.2009 - 15:46


--------------------
"Высшая мудрость - умение разговаривать с людьми" ((с) Ямамото Цунэтомо (Дзётё), "Хагакурэ")
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
orion12
сообщение 19.11.2010 - 19:02
Сообщение #2






Группа: Туристы
Сообщений: 2
Регистрация: 1.09.2009
Пользователь №: 13941



Симпатии:  0  


Цитата
"Работает? Если нет - проверяйте по исходнику buttonsArray.fla"

Уважаемый Des, а исходник где?
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Foxx
сообщение 19.11.2010 - 22:51
Сообщение #3


Благородный Дон
*******

2 место3 место3 местоМеткий стрелокПобедитель турнираЗа вклад в развитие ArtTower.ru2 местоПобедитель турнираМеткий стрелок
Группа: Стражи
Сообщений: 5568
Регистрация: 8.05.2006
Из: Киев
Пользователь №: 10
ФотоГраф
Галерея Блог


Симпатии:  320  


Цитата(orion12 @ 19.11.2010 - 17:48) *
Цитата
"Работает? Если нет - проверяйте по исходнику buttonsArray.fla"

Уважаемый Des, а исходник где?

исходник находится по ссылке в приведенной вами цитате smile.gif
вот здесь - http://arttower.ru/users/Des/lesson_prg12/buttonsArray0.fla


--------------------
Dixi
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
orion12
сообщение 26.11.2010 - 14:52
Сообщение #4






Группа: Туристы
Сообщений: 2
Регистрация: 1.09.2009
Пользователь №: 13941



Симпатии:  0  


Подскажите, Foxx, исходник в начале урока, действительно buttonsArray0.fla, есть.
В конце урока даётся ссылка на buttonsArray.fla, который по логике должен быть с кодом и отличаться от buttonsArray0.fla(который пуст!)
А при загрузке попадаешь на начальный buttonsArray0.fla
Или я не правильно понял, что должно быть два файла, начальный и конечный, с результатом урока?
Тогда где же файл?
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Asenka
сообщение 18.01.2012 - 17:34
Сообщение #5





Гости






   


А можно ещё проще написать функцию определения номера кнопки:
Код
btns[ii].onRelease = function() { tf.text = "Кнопка " + this.n.toString(); }


Хорошие уроки, спасибо!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 18.12.2017 - 17:55