FLASH, И ГОТОВО! Красивое меню-трансформер

Iv (dembicki@narod.ru)

Спецвыпуск Xakep, номер #027, стр. 027-066-3

Movie Clip: Target="_level0.menu_mc.m1_mc"

Variable _level0.menu_mc.m1_mc.i = 1

Movie Clip: Target="_level0.menu_mc.m2_mc"

Variable _level0.menu_mc.m2_mc.i = 2

ВИЗУАЛИЗИРУЕМ

Пора бы и визуализировать наши усилия.

Начнем с иконок. Прикинь для себя, какую иконку ты хочешь видеть для папочки и какую - для элемента меню. Причем учти, что понадобятся по 2 иконки. Для папок: в открытом и в закрытом состоянии, для элементов меню: активный - не активный элемент. Я, не мудрствуя лукаво, для элементов меню нарисую: кружок - для неактивных линков, и треугольник - для активных, а для папок "плюс" - для закрытой папки, и "минус" - для открытой. С дизайном пока не заморачивайся - потом всегда сможешь нарисовать то, что тебе больше нравится.

Создай мувик "folder_icon" и помести в первом его кадре рисунок иконки папки в открытом виде (минус), во втором кадре рисунок иконки папки в закрытом виде (плюс). Рисунки размести так, чтобы их центр находился в координатах x = -5, y = 5. Размер иконки не должен превышать 20 по высоте (у меня 10), и иконка не должна залезать в положительную область по оси x. То же самое с иконками элемента меню: создай мувик "item_icon", в первый кадр кружок, во второй треугольник. Теперь в мувик folder воткни folder_icon, а в мувик item, соответственно, folder_icon, совмести начала координат мувиков. Самое время добавить текстовые поля в оба мувика. Создай в обоих мувиках динамические текстовые поля и задай им имя "name_txt". Можешь даже что-нибудь написать в этих текстовых полях, чтобы подобрать подходящий фонт, и самое время заинклудить этот фонт.

Ура! Мы готовы создать классы для folder и icon. Страшно? Многие, кто не сталкивался с классами, боятся их, как черт ладана. Хотя все значительно проще, чем кажется. И ощутить это лучше всего "руками" - в процессе создания этих самых классов. Для пущей важности пример сделаем чуток сложнее - с наследованием классов. Еще страшнее? Не боись, прорвемся!

КЛАССЫ

Для начала создадим класс, который будет общим как для folder, так и для item. Мы продолжаем писать скрипт прямо в руте:

GeneralClass = function () {

};

g_tmp = GeneralClass.prototype=new MovieClip();

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

Хоть мы и создали GeneralClass, но, за исключением функций и свойств мувиклипа, в нем ничего нет. Давай для начала пропишем событие onLoad - оно должно быть одинаковым для обоих мувиклипов. И для того чтобы увидеть эффект, временно назначим GeneralClass обоим мувиклипам - при этом главное не забыть после теста снести это назначение. Я по ходу статьи скажу, когда нужно снести, и чтобы долго это место не искать, в скрипте я обозначил это комментариями start to delete и end to delete.

g_tmp.onLoad = function() {