Назад в раздел
Размножение кнопок с последующим их использованием
div.main {margin-left: 20pt; margin-right: 20pt}
Размножение кнопок с последующим их использованием
В этой статье я покажу как сделать один(одну штуку, значит) эталон кнопки, затем как с помощью скрипта сделать десять копий таких кнопок, а потом как добиться от этих копий чего-то разного (ну на кой нам одинаковые кнопки с одинаковыми событиями? для дезигну,
разве, что).
преимущества данного метода очевидны: окончательный размер флэш-ролика включит в себя лишь информацию только об одном эталоне кнопки + вес скрипта, что сокращает размер файла в нашем случае в 10 (ДЕСЯТЬ!) раз а это очень не мало.
----------------------------------------------------- Начать лучше всего, конечно с создания нового файла во FLASH5.
1. откроем редактор ----------------------------------------------------- 2. в нем уже автоматически создается новый файл ----------------------------------------------------- 3. сохраняем его с нужным именем ----------------------------------------------------- 4. создадим сразу 3 (да да, три) новых слоя (меню: insert>layer) ----------------------------------------------------- 5. обзовем их сверху вниз так: "Action Script" ( в нем будем писать весь скрипт) "text" (тут положим текстовое поле) "movie clips" (тут нарисуем кнопку)
----------------------------------------------------- 6. начнем со слоя "text" зайдем в него и создадим текстовое поле с помощью инструмена "Text Tool". ----------------------------------------------------- 7. откроем меню: window>panels>Text options выпадающий список - ставим "dynamic text" в поле "variable" вместо TextField1 пишем коротко и просто: text
и все.
---------------------------------------------------- а что же мы наделали? вот что:
мы положили пустое (пока) текстовое поле куда? а прямо в _root, то есть все, что рисуется прямо в самом начальном окошке называется _root ! _root - это самый верхний уровень. _root - это ВСЕ ЧТО У НАС ЕСТЬ, вся сцена. _root - это начало.
Потом мы присвоили этому полю имя-переменную "text" и можем туда класть все, что душа его, текстфилдовая, пожелает. А пожелать она можеть только строки (string) и числа (number), (к примеру кактус в горшке Вы в текстфилд не засунете, у меня не вышло).
Вопрос - как эта его душа сможет пожелать чего-либо Ответ - - а вот так: текстовое (text) поле лежит где? правильно в _root -e значит обращаться с ним надо ЧЕРЕЗ _root. то есть: _root.text = chto-to;
и теперь, где бы Вы ни написали ( _root.text = "душа желает," + " еще желает" + " еще " +1000 + " пожеланий") в кнопке-ли (которая засунута в тысячу и один мувик), в кадре-ли, на худой конец прямо в хтмле
(document.my_movie.SetVariable(_root.text,"Ха-ха-ха")) оно, текстовое поле, просто обязано ИЗМЕНИТЬ свое значение.
---------------------------------------------------- 8. не верите? Тогда залезаем слоем ниже "movie clips". Создаем эталон кнопки: нарисуем произвольную фигуру, выделим ее, нажмем f8 и выберем button, OK! very done! YO! (скажу по секрету я начал именно с рисования кнопок свои занятия с флэшем) ----------------------------------------------------- 9. кликаем правой клавишей мыши на кнопке! выбираем actions и пишем в открывшееся окно скрипта такой код:
//------------------------------------------------- on (release) { _root.text = "НАЖАТА КНОПКА № "+nomer; //ЭТО НАМ ДЛЯ "ПОТОМ" }
//-------------------------------------------------
ха-ха-ха! а ведь можно обойтись и без _root ! можно написать text = "НАЖАТА КНОПКА № "+nomer; //ЭТО НАМ ДЛЯ "ПОТОМ"
и оно работать будет. ..будет-будет, уверяю Вас, НО! только до тех пор, пока кнопка лежит рядышком в _root -e, хоть и в другом слое.
а вот когда мы ее засунем в мувик!... ----------------------------------------------------- 10. выделяем кнопку, жмем f8, выбираем movie clip, OK. и получаем МУВИ-КЛИП с кнопкой внутри. ----------------------------------------------------- и теперь оно без этой приписки _root работать не будет, поэтому оставим первый вариант, ОКЕЙ?
----------------------------------------------------- 11. оставим бедную кнопку и займемся новорожденным :)
(- поручик, вы любите детей? -- мм..мм.. детей? - нет, но САМ процесс!),
перед нами лежит новорожденный! movie Clip. (у меня он какой-то бледненький, гад =(, Питер сказался, что поделаешь) что необходимо новорожденным? П р а в и л ь н о - ИМЯ! Если точнее - instance name ща придумаем... ----------------------------------------------------- 12. правый спасительный клик мыши на ново.. тьфу, на Movie.. короче, на лежащем перед нами Clipe откроет нашему усталому взору длиииииинное меню
которое мы должны пробежать до конца до panels а потом до instance и откроется.... ...УРА!
окно в которое МЫ радостно впишем регистрационные данные младенца! ----------------------------------------------------- 13. (о!щщщастливый 13 пункт) напротив поля Name пишем нехитрое MC
(маленькими буквами), а че мудрить с именами, мы этих мувиков еще стока наплодим ;)... ----------------------------------------------------- Пришла Пора - ПЛОДИТЬ ! --Э--Э-Э, мууужжжыыыыкккиии! ну Вы ЧЁ? - Я вам еще ЭТО должен обЪяснять? а может вам ЕЩЕ и ПОКАЗААААТЬ? Ладн. Стоим сюды и вникаем глубже.... //-----------------------------------------------------
14. Action Script! как много в этой фразе, для сердца флэшера слилось...
переходим в указанный слой (Action Script). выделяем 1 (первый) кадр (хе хе, а больше-то и нет) правоем кнопкаем на нъем делаем правой кнопкой клик на кадре - вызываем чин-гада мадре! тьфу.. контекстное меню вообщем смотрим рисунок
actions 15. в открытом окне frame actions нужен режим ЭКСПЕРТА!
привыкайте, это полезно. 16. вписываем туда КОД!
где:
// -----------ПРИМЕЧАНИЕ: ЭТОТ КОД МОЖНО СКОПИРОВАТЬ ПРЯМО ОТСЮДА COPY-PASTE
mc_col = 10; // КОЛИЧЕСТВО КНОПОК // ----------------------------------------------------- mc_text = "КНОПКА № "; // ТЕКСТ ДЛЯ КНОПКИ // ----------------------------------------------------- mc_space_y = 50; // РАССТОЯНИЕ МЕЖДУ КНОПКАМИ // ----------------------------------------------------- yp = mc._y; // ОПРЕДЕЛИМ ПЕРВОНОЧАЛЬНОЕ ПОЛОЖЕНИЕ МУВИКА ДЛЯ ПОСЛЕДУЮЩЕГО ОТСЧЕТА // ----------------------------------------------------- mc._visible = 0; // СДЕЛАЕМ РОДИТЕЛЯ НЕВИДИМЫМ, ДАБЫ НЕ МЕШАЛ // ----------------------------------------------------- for (i=0; i<mc_col; i++) { // СДЕЛАЕМ ЦИКЛ В КОТОРОМ "I" НАРАЩИВАЕТСЯ ПОКА МЕНЬШЕ "MC_COL" // ----------------------------------------------------- // ОТКРЫВАЕМ ЦИКЛ // ----------------------------------------------------- space = i*mc_space_y; // СОЗДАДИМ ПЕРЕМЕННУЮ "SPACE", КОТОРАЯ БУДЕТ ОТВЕЧАТЬ ЗА ПРОМЕЖУТКИ МЕЖДУ КНОПКАМИ // ----------------------------------------------------- mc.duplicateMovieClip("mc"+i, i); // СОБСНО САМО ДУБЛИРОВАНИЕ В КОТОРОМ КАЖДОМУ НОВОРОЖДЕННОМУ МУВИКУ ПРИСВАИВАЕТСЯ ДИНАМИЧЕСКОЕ ИМЯ // ----------------------------------------------------- mc = this["mc"+i]; // УКОРОТИМ СИНТАКСИС НАПИСАНИЯ ПУТЕМ ПРИСВОЕНИЯ ПУТИ К НОВОМУ ИМЕНИ - ОДНОЙ ПЕРЕМЕННОЙ // ----------------------------------------------------- space = yp+space; // ПРИСВОИМ ПЕРЕМЕННОЙ "space" НОВОЕ ЗНАЧЕНИЕ // ----------------------------------------------------- mc._y = space; // ТУТ ЗАДАДИМ СВОЙСТВУ "_У" НОВОЕ ЗНАЧЕНИЕ - ПРИРАВНЯЕМ ЕГО ПЕРЕМЕННОЙ "space" // ----------------------------------------------------- mc.text = mc_text+i; // КАЖДОМУ ТЕКСТОВОМУ ПОЛЮ В НОВОМ ИНСТАНСЕ ПРИСВОИМ СВОЕ ЗНАЧЕНИЕ в РЕЗУЛЬТАТЕ ПОЛУЧИТСЯ строка // ("КНОПКА № " + ПЕРЕМЕННАЯ "i") // ----------------------------------------------------- mc.nomer = i; // СОЗДАДИМ ПЕРЕМЕННУЮ "nomer" В КАЖДОМ НОВОМ МУВИКЕ И ПРИСВОИМ ЕЙ СВОЕ ЗНАЧЕНИЕ = "i" // ----------------------------------------------------- } // ЗАКРЫВАЕМ ЦИКЛ // -----------ПРИМЕЧАНИЕ: ЭТОТ КОД МОЖНО СКОПИРОВАТЬ ПРЯМО ДОСЮДА COPY-PASTE // -----------------------------------------------------
на этом закончим со скриптом и переходим к пережевыванию пищи. // ----------------------------------------------------- 17. делаем правой кнопкой клик на мувике "mc", выбираем "Edit in Place"
// -----------------------------------------------------
18. создаем внутри еще один слой, назовем его "text", в котором сделаем еще один текстфилд (повторим пункты 6 и 7 этого урока).
----------------------------------------------------- (6) начнем со слоя "text" зайдем в него и создадим текстовое поле с помощью инструмена "Text Tool". ----------------------------------------------------- (7) откроем меню: window>panels>Text options выпадающий список - ставим "dynamic text" в поле "variable" вместо TextField1 пишем коротко и просто: text
и все.
// -----------------------------------------------------
19. щелкнем на пустом месте в сторонке дважды мышкой и вернемся в сцену. // -----------------------------------------------------
20. сделаем тест мовие - control>test movie
хе хе хе. получим 10 ровненьких кнопочек каждая из которых отличается только номером, но это лишь для простоты усвоения и для начала. повторим: цикл for (i=0; i<mc_col; i++) { прокрутит, заключенный в него скрипт 10 раз ------------------ i=0 - начинается отсчет от нуля
i<mc_col - пока "i" меньше mc_col (а mc_col сегодня равен АМЕРИКАН... тьфу просто 10 )
i++ прибавлять к i по еденице с каждым оборотом ------------------ // ----------------------------------------------------- mc._y = space; - расположит кнопки по-вертикали. // -----------------------------------------------------
mc.text = mc_text+i; а вот эта штука залезет внутрь каждого нового [mc] прямо к тексту и положит в него значение "КНОПКА № " + ПЕРЕМЕННАЯ "i" где i у нас наращивается с каждым обормотом цикла. // ----------------------------------------------------- можно написать по другому: _root["mc"+i].text = mc_text+i; // ----------------------------------------------------- mc.nomer = i; - самое главное! - каждый мувик получит только СВОЮ оригинальную "i" в соответствии с порядком появления на свет и теперь мувик "знает" свой номер, а поскольку каждая кнопка принадлежит своему мувику, то и значение i она тоже получает вместе с ним. // -----------------------------------------------------
---------------------------------------------------------------------------------------------------------- Флэшер помни!
Если ты читаешь эти строки, значит пришло время отблагодарить автора за труды его. 1 Возьми стул, 2 сходи в ванную, 3 возьми мыло , 4 возьми веревку. Что? У тебя современная стиральная машина с режимом сушки? И веревок нет? Блин, сходи к соседу.. Что? На дачу свалил? Ладно, придумай что-нибудь, не стой как пень-III на многозадачном появлении 3дМакс4+фотошоп+ICQ+theBat. Вообщем знай, это еще не конец, а это только начало. И подумай, а есть ли смысл... Веревка все-таки надежнее будет...
Ладно, понимаю, молод, исправишься, наивен.
Тогда заберись на этот стул (пункт 1)
И громко крикни -- СПАСИИИИБООООО, Уильям Брэдберри.!!!
Мне будет приятно, а прохожим забавно ;). |
Автор: © Уильям Брэдберри Источник:
http://www.flasher.ru
|
|
|
|