On-Line Библиотека www.XServer.ru - учебники, книги, статьи, документация, нормативная литература.
       Главная         В избранное         Контакты        Карта сайта   
    Навигация XServer.ru






 

Размножение кнопок с последующим их использованием

Уильям Брэдберри

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

разве, что).

преимущества данного метода очевидны:
окончательный размер флэш-ролика включит в себя лишь информацию только об одном эталоне
кнопки + вес скрипта, что сокращает размер файла в нашем случае в 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)



Литература по FLASH