Простое выпадающее меню на ActionScript 3.0

Сегодня я покажу, как можно создать простое выпадающее меню на ActionScript 3.0 в Adobe Flash. Акцентирую ваше внимание на том, что создавать буду именно ПРОСТОЕ выпадающее меню. Но ни кто вам не мешает в дальнейшем доработать этот пример под ваш вкус.

Итак, приступим...

Сперва нам потребуется создать заготовку кнопки. Совокупность таких кнопок и будет составлять выпадающее меню. Кнопки, конечно, можно написать исключительно кодом, но не всем это удобно. Да и подгонять внешний вид такой кнопки под дизайн конкретного флеш-приложения будет сложно. Поэтому воспользуемся преимуществами редактора Adobe Flash и создадим кнопку вручную.

Я нарисовал прямоугольник и превратил его в символ MovieClip по имени Item. Это и будет основой кнопки. Особо обращаю ваше внимание на то, что точка регистрации у кнопки должна находится в левом верхнем углу.

Теперь зайдём внутрь нашей кнопки и создадим там динамическое текстовое поле по имени item_txt. В этом текстовом поле будет выводится название кнопки.

После этого заготовку кнопки можно удалить с рабочего стола. Но она сохраниться в библиотеке проекта и с ней нам надо будет проделать ещё одну манипуляцию.

Заходим в библиотеку проекта и жмём правую кнопку мышки над созданным ранее мувиком Item. Появится контекстное меню мувиклипа. В этом контекстном меню выбираем пункт СВОЙСТВА. Откроется окно СВОЙСТВА СИМВОЛА. В этом окне вы должны поставить галочку у пункта ЭКСПОРТ ДЛЯ ACTIONSCRIPT. При этом в поле ввода КЛАСС должно стоять название нашего мувика - Item. Потом кликайте по OK и подтверждайте изменения. Поздравляю, вы создали класс Item. И этот класс нам потребуется на следующем этапе создания выпадающего меню...

Второй этап - это написание кода. Код я писать буду на главной временной шкале. Для большей ясности код снабжён подробными комментариями...

Код ActionScript 3.0:

/* импорт классов */ import flash.display.Sprite; import flash.filters.DropShadowFilter; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Regular; /* функция, которая будет создавать выпадающее меню */ function createDropdownMenu(captionText:String,arr:Array):Sprite { /* контейнер для всего выпадающего меню */ var cont:Sprite = new Sprite(); cont.addEventListener(MouseEvent.ROLL_OVER,function(event:MouseEvent){var contItems:Sprite = event.target.getChildAt(1).getChildAt(0) as Sprite;new Tween(contItems,"y",Regular.easeIn,contItems.y,0,0.4,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,1,0.4,true);}); cont.addEventListener(MouseEvent.ROLL_OUT,function(event:MouseEvent){var contItems:Sprite = event.target.getChildAt(1).getChildAt(0) as Sprite;new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);}); cont.filters = [new DropShadowFilter(4,45,0x000000,0.4,4,4,1)]; /* заголовок выпадающего меню */ var caption:Item = new Item(); cont.addChild(caption); caption.item_txt.text = captionText; /* контейнер для кнопок выпадающего меню и маски */ var contDropdownMenu:Sprite = new Sprite(); cont.addChild(contDropdownMenu); contDropdownMenu.x = 0; contDropdownMenu.y = caption.height; /* количество кнопок в выпадающем меню */ var l:uint = arr.length; /* контейнер только для кнопок выпадающего меню */ var contItems:Sprite = new Sprite(); contItems.graphics.beginFill(0x000000,0); contItems.graphics.drawRect(0,0,contItems.width,contItems.height * l); contItems.graphics.endFill(); contDropdownMenu.addChild(contItems); /* создаём сами кнопки выпадающего меню */ for (var i:uint = 0; i < l; i++) { var item:Item = new Item(); contItems.addChild(item); item.item_txt.text = arr[i][0]; item.x = 0; item.y = i * item.height; item.alpha = 0.6; item.buttonMode = true; item.mouseChildren = false; item.addEventListener(MouseEvent.CLICK,arr[i][1]); item.addEventListener(MouseEvent.MOUSE_OVER,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,1,0.4,true);}); item.addEventListener(MouseEvent.MOUSE_OUT,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,0.6,0.4,true);}); } /* маска */ var contItemsMask:Sprite = new Sprite(); contItemsMask.graphics.beginFill(0x000000,1); contItemsMask.graphics.drawRect(0,0,contItems.width,contItems.height); contItemsMask.graphics.endFill(); contDropdownMenu.addChild(contItemsMask); contItems.mask = contItemsMask; /* первоначальное положение контейнера с кнопками выпадающего меню */ contItems.y = - contItems.height; /* возвращаем результат */ return cont; } /* массив с именами кнопок выпадающего меню и функциями, которые будут вызываться при клике пользователя по соответствующему пункту выпадающего меню */ var arr:Array = [["Псков",func_1],["Великие Луки",func_2],["Остров",func_3]]; /* создаём выпадающее меню первый параметр - заголовок меню второй параметр - массив с данными (надпись, функция) для создания кнопок выпадающего меню */ var dropdownMenu:Sprite = createDropdownMenu("Города",arr); /* добавляем меню в список отображения */ addChild(dropdownMenu); /* позиционируем меню на сцене флеш-ролика */ dropdownMenu.x = 50; dropdownMenu.y = 50; /* функции, которые будут вызываться по клику на соответствующем пункте меню */ function func_1(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Псков"))); } function func_2(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Великие Луки"))); } function func_3(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Остров"))); }

Вот, собственно, и всё...

Результат:

Благодаря тому, что создание drop-down menu у нас вынесено в отдельную функцию, мы можем очень быстро наделать сколь угодно много подобных выпадающих менюшек...

Код ActionScript 3.0:

import flash.display.Sprite; import flash.filters.DropShadowFilter; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Regular; function createDropdownMenu(captionText:String,arr:Array):Sprite { var cont:Sprite = new Sprite(); cont.addEventListener(MouseEvent.ROLL_OVER,function(event:MouseEvent){var contItems:Sprite = event.target.getChildAt(1).getChildAt(0) as Sprite;new Tween(contItems,"y",Regular.easeIn,contItems.y,0,0.4,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,1,0.4,true);}); cont.addEventListener(MouseEvent.ROLL_OUT,function(event:MouseEvent){var contItems:Sprite = event.target.getChildAt(1).getChildAt(0) as Sprite;new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);}); cont.filters = [new DropShadowFilter(4,45,0x000000,0.4,4,4,1)]; var caption:Item = new Item(); cont.addChild(caption); caption.item_txt.text = captionText; var contDropdownMenu:Sprite = new Sprite(); cont.addChild(contDropdownMenu); contDropdownMenu.x = 0; contDropdownMenu.y = caption.height; var l:uint = arr.length; var contItems:Sprite = new Sprite(); contItems.graphics.beginFill(0x000000,0); contItems.graphics.drawRect(0,0,contItems.width,contItems.height * l); contItems.graphics.endFill(); contDropdownMenu.addChild(contItems); for (var i:uint = 0; i < l; i++) { var item:Item = new Item(); contItems.addChild(item); item.item_txt.text = arr[i][0]; item.x = 0; item.y = i * item.height; item.alpha = 0.6; item.buttonMode = true; item.mouseChildren = false; item.addEventListener(MouseEvent.CLICK,arr[i][1]); item.addEventListener(MouseEvent.MOUSE_OVER,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,1,0.4,true);}); item.addEventListener(MouseEvent.MOUSE_OUT,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,0.6,0.4,true);}); } var contItemsMask:Sprite = new Sprite(); contItemsMask.graphics.beginFill(0x000000,1); contItemsMask.graphics.drawRect(0,0,contItems.width,contItems.height); contItemsMask.graphics.endFill(); contDropdownMenu.addChild(contItemsMask); contItems.mask = contItemsMask; contItems.y = - contItems.height; return cont; } var arr:Array = [["Псков",func_1],["Великие Луки",func_2],["Остров",func_3]]; var arr2:Array = [["Великая",func_4],["Шелонь",func_5],["Ловать",func_6]]; var dropdownMenu:Sprite = createDropdownMenu("Города",arr); addChild(dropdownMenu); dropdownMenu.x = 50; dropdownMenu.y = 50; var dropdownMenu2:Sprite = createDropdownMenu("Реки",arr2); addChild(dropdownMenu2); dropdownMenu2.x = 250; dropdownMenu2.y = 50; function func_1(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Псков"))); } function func_2(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Великие Луки"))); } function func_3(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Остров"))); } function func_4(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Великая"))); } function func_5(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Шелонь"))); } function func_6(event:MouseEvent):void { navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Ловать"))); }

Результат:

Вот, пожалуй, и всё :-)

Скачать исходник к данному уроку можно по следующей ссылке - скачать (под Adobe Flash CS5).

Дополнение. Добавляем иконки в выпадающее меню.

В комментариях спросили, как в описанное выше меню добавить иконки. Думаю, это можно реализовать следующим образом...

Вернёмся к мувиклипу Item и создадим внутри него ещё один мувик по имени icons. В MovieClip-е icons, как можно догадаться по его имени, хранятся иконки. Каждая иконка лежит на отдельном кадре. Все кадры (кроме первого) подписаны.

Небольшие изменения надо внести и в код...

Код ActionScript 3.0:

/* импорт классов */ import flash.display.Sprite; import flash.filters.DropShadowFilter; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Regular; /* функция, которая будет создавать выпадающее меню */ function createDropdownMenu(captionText:String,arr:Array):Sprite { /* контейнер для всего выпадающего меню */ var cont:Sprite = new Sprite(); cont.addEventListener(MouseEvent.ROLL_OVER,function(event:MouseEvent){var contItems:Sprite = event.target.getChildAt(1).getChildAt(0) as Sprite;new Tween(contItems,"y",Regular.easeIn,contItems.y,0,0.4,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,1,0.4,true);}); cont.addEventListener(MouseEvent.ROLL_OUT,function(event:MouseEvent){var contItems:Sprite = event.target.getChildAt(1).getChildAt(0) as Sprite;new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);}); cont.filters = [new DropShadowFilter(4,45,0x000000,0.4,4,4,1)]; /* заголовок выпадающего меню */ var caption:Item = new Item(); cont.addChild(caption); caption.item_txt.text = captionText; /* контейнер для кнопок выпадающего меню и маски */ var contDropdownMenu:Sprite = new Sprite(); cont.addChild(contDropdownMenu); contDropdownMenu.x = 0; contDropdownMenu.y = caption.height; /* количество кнопок в выпадающем меню */ var l:uint = arr.length; /* контейнер только для кнопок выпадающего меню */ var contItems:Sprite = new Sprite(); contItems.graphics.beginFill(0x000000,0); contItems.graphics.drawRect(0,0,contItems.width,contItems.height * l); contItems.graphics.endFill(); contDropdownMenu.addChild(contItems); /* создаём сами кнопки выпадающего меню */ for (var i:uint = 0; i < l; i++) { var item:Item = new Item(); contItems.addChild(item); item.item_txt.text = arr[i][0]; item.icons.gotoAndStop(arr[i][2]); item.x = 0; item.y = i * item.height; item.alpha = 0.6; item.buttonMode = true; item.mouseChildren = false; item.addEventListener(MouseEvent.CLICK,arr[i][1]); item.addEventListener(MouseEvent.MOUSE_OVER,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,1,0.4,true);}); item.addEventListener(MouseEvent.MOUSE_OUT,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,0.6,0.4,true);}); } /* маска */ var contItemsMask:Sprite = new Sprite(); contItemsMask.graphics.beginFill(0x000000,1); contItemsMask.graphics.drawRect(0,0,contItems.width,contItems.height); contItemsMask.graphics.endFill(); contDropdownMenu.addChild(contItemsMask); contItems.mask = contItemsMask; /* первоначальное положение контейнера с кнопками выпадающего меню */ contItems.y = - contItems.height; /* возвращаем результат */ return cont; } /* массив с данными, необходимыми для построения выпадающего меню В каждом вложенном массиве есть следующие элементы: - имя кнопки выпадающего меню - функция, которая будет вызываться при клике пользователя по соответствующему пункту выпадающего меню - названием кадра, на котором лежит нужная иконка */ var arr:Array = [["Google",func_1,"google"],["Facebook",func_2,"facebook"],["Twitter",func_3,"twitter"]]; /* создаём выпадающее меню первый параметр - заголовок меню второй параметр - массив с данными (надпись, функция, метка кадра с иконкой) для создания кнопок выпадающего меню */ var dropdownMenu:Sprite = createDropdownMenu("Select:",arr); /* добавляем меню в список отображения */ addChild(dropdownMenu); /* позиционируем меню на сцене флеш-ролика */ dropdownMenu.x = 50; dropdownMenu.y = 50; /* функции, которые будут вызываться по клику на соответствующем пункте меню */ function func_1(event:MouseEvent):void { navigateToURL(new URLRequest("https://www.google.ru/")); } function func_2(event:MouseEvent):void { navigateToURL(new URLRequest("https://www.facebook.com/")); } function func_3(event:MouseEvent):void { navigateToURL(new URLRequest("https://twitter.com/")); }

Результат:

Скачать исходник примера с иконками можно здесь (под Adobe Flash CS5).

Дополнение. Открываем меню по клику мышки над заголовком.

На этот раз графику менять не будем. Изменения коснуться только кода...

Код ActionScript 3.0:

/* импорт классов */ import flash.display.Sprite; import flash.filters.DropShadowFilter; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Regular; /* функция, которая будет создавать выпадающее меню */ function createDropdownMenu(captionText:String,arr:Array):Sprite { /* контейнер для всего выпадающего меню */ var cont:Sprite = new Sprite(); cont.addEventListener(MouseEvent.ROLL_OUT,function(event:MouseEvent){var contItems:Sprite = event.target.getChildAt(1).getChildAt(0) as Sprite;if(contItems.mouseEnabled){new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);contItems.mouseEnabled=false;}}); cont.filters = [new DropShadowFilter(4,45,0x000000,0.4,4,4,1)]; /* заголовок выпадающего меню */ var caption:Item = new Item(); cont.addChild(caption); caption.item_txt.text = captionText; caption.mouseChildren = false; caption.addEventListener(MouseEvent.CLICK,function(event:MouseEvent){var contItems:Sprite = event.target.parent.getChildAt(1).getChildAt(0) as Sprite;if(contItems.mouseEnabled){new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);contItems.mouseEnabled=false;}else{new Tween(contItems,"y",Regular.easeIn,contItems.y,0,0.4,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,1,0.4,true);contItems.mouseEnabled=true;}}); /* контейнер для кнопок выпадающего меню и маски */ var contDropdownMenu:Sprite = new Sprite(); cont.addChild(contDropdownMenu); contDropdownMenu.x = 0; contDropdownMenu.y = caption.height; /* количество кнопок в выпадающем меню */ var l:uint = arr.length; /* контейнер только для кнопок выпадающего меню */ var contItems:Sprite = new Sprite(); contItems.graphics.beginFill(0x000000,0); contItems.graphics.drawRect(0,0,contItems.width,contItems.height * l); contItems.graphics.endFill(); contDropdownMenu.addChild(contItems); contItems.mouseEnabled = false; /* создаём сами кнопки выпадающего меню */ for (var i:uint = 0; i < l; i++) { var item:Item = new Item(); contItems.addChild(item); item.item_txt.text = arr[i][0]; item.icons.gotoAndStop(arr[i][2]); item.x = 0; item.y = i * item.height; item.alpha = 0.6; item.buttonMode = true; item.mouseChildren = false; item.addEventListener(MouseEvent.CLICK,arr[i][1]); item.addEventListener(MouseEvent.MOUSE_OVER,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,1,0.4,true);}); item.addEventListener(MouseEvent.MOUSE_OUT,function(event:MouseEvent){new Tween(event.target,"alpha",Regular.easeIn,event.target.alpha,0.6,0.4,true);}); } /* маска */ var contItemsMask:Sprite = new Sprite(); contItemsMask.graphics.beginFill(0x000000,1); contItemsMask.graphics.drawRect(0,0,contItems.width,contItems.height); contItemsMask.graphics.endFill(); contDropdownMenu.addChild(contItemsMask); contItems.mask = contItemsMask; /* первоначальное положение контейнера с кнопками выпадающего меню */ contItems.y = - contItems.height; /* возвращаем результат */ return cont; } /* массив с данными, необходимыми для построения выпадающего меню В каждом вложенном массиве есть следующие элементы: - имя кнопки выпадающего меню - функция, которая будет вызываться при клике пользователя по соответствующему пункту выпадающего меню - названием кадра, на котором лежит нужная иконка */ var arr:Array = [["Google",func_1,"google"],["Facebook",func_2,"facebook"],["Twitter",func_3,"twitter"]]; /* создаём выпадающее меню первый параметр - заголовок меню второй параметр - массив с данными (надпись, функция, метка кадра с иконкой) для создания кнопок выпадающего меню */ var dropdownMenu:Sprite = createDropdownMenu("Select:",arr); /* добавляем меню в список отображения */ addChild(dropdownMenu); /* позиционируем меню на сцене флеш-ролика */ dropdownMenu.x = 50; dropdownMenu.y = 50; /* функции, которые будут вызываться по клику на соответствующем пункте меню */ function func_1(event:MouseEvent):void { navigateToURL(new URLRequest("https://www.google.ru/")); } function func_2(event:MouseEvent):void { navigateToURL(new URLRequest("https://www.facebook.com/")); } function func_3(event:MouseEvent):void { navigateToURL(new URLRequest("https://twitter.com/")); }

Результат:

А к этому примеру исходник можно скачать здесь (под Adobe Flash CS5).

Выпадающее меню со звуком и анимацией пунктов.

Изменения придётся вносить как в графику (создадим анимацию внутри мувиклипа Item), так и в код...

Код ActionScript 3.0:

/* импорт классов */ import flash.display.Sprite; import flash.display.MovieClip; import flash.filters.DropShadowFilter; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Regular; /* функция, которая будет создавать выпадающее меню */ function createDropdownMenu(captionText:String,arr:Array):Sprite { /* контейнер для всего выпадающего меню */ var cont:Sprite = new Sprite(); cont.addEventListener(MouseEvent.ROLL_OUT,function(event:MouseEvent){var contItems:Sprite = event.currentTarget.getChildAt(1).getChildAt(0) as Sprite;if(contItems.mouseEnabled){new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);contItems.mouseEnabled=false;}}); cont.filters = [new DropShadowFilter(4,45,0x000000,0.4,4,4,1)]; /* заголовок выпадающего меню */ var caption:Item = new Item(); cont.addChild(caption); caption.item_txt.text = captionText; caption.mouseChildren = false; caption.addEventListener(MouseEvent.CLICK,function(event:MouseEvent){new ClickSound().play();var contItems:Sprite = event.currentTarget.parent.getChildAt(1).getChildAt(0) as Sprite;if(contItems.mouseEnabled){new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);contItems.mouseEnabled=false;}else{new Tween(contItems,"y",Regular.easeIn,contItems.y,0,0.4,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,1,0.4,true);contItems.mouseEnabled=true;}}); /* контейнер для кнопок выпадающего меню и маски */ var contDropdownMenu:Sprite = new Sprite(); cont.addChild(contDropdownMenu); contDropdownMenu.x = 0; contDropdownMenu.y = caption.height; /* количество кнопок в выпадающем меню */ var l:uint = arr.length; /* контейнер только для кнопок выпадающего меню */ var contItems:Sprite = new Sprite(); contItems.graphics.beginFill(0x000000,0); contItems.graphics.drawRect(0,0,contItems.width,contItems.height * l); contItems.graphics.endFill(); contDropdownMenu.addChild(contItems); contItems.mouseEnabled = false; /* создаём сами кнопки выпадающего меню */ for (var i:uint = 0; i < l; i++) { var item:Item = new Item(); contItems.addChild(item); item.item_txt.text = arr[i][0]; item.icons.gotoAndStop(arr[i][2]); item.x = 0; item.y = i * item.height; item.alpha = 0.6; item.buttonMode = true; item.mouseChildren = false; item.addEventListener(MouseEvent.MOUSE_DOWN,arr[i][1]); item.addEventListener(MouseEvent.MOUSE_UP,function(event:MouseEvent){new ClickSound().play();var contItems:Sprite = event.currentTarget.parent as Sprite;if(contItems.mouseEnabled){new Tween(contItems,"y",Regular.easeIn,contItems.y,-contItems.height,0.6,true);new Tween(contItems,"alpha",Regular.easeIn,contItems.alpha,0,0.6,true);contItems.mouseEnabled=false;}}); item.addEventListener(MouseEvent.MOUSE_OVER,function(event:MouseEvent){new ClickSound().play();var item:MovieClip = event.currentTarget as MovieClip;item.gotoAndPlay(1);new Tween(item,"alpha",Regular.easeIn,item.alpha,1,0.4,true);}); item.addEventListener(MouseEvent.MOUSE_OUT,function(event:MouseEvent){var item:MovieClip = event.currentTarget as MovieClip;item.gotoAndStop(1);new Tween(item,"alpha",Regular.easeIn,item.alpha,0.6,0.4,true);}); } /* маска */ var contItemsMask:Sprite = new Sprite(); contItemsMask.graphics.beginFill(0x000000,1); contItemsMask.graphics.drawRect(0,0,contItems.width,contItems.height); contItemsMask.graphics.endFill(); contDropdownMenu.addChild(contItemsMask); contItems.mask = contItemsMask; /* первоначальное положение контейнера с кнопками выпадающего меню */ contItems.y = - contItems.height; /* возвращаем результат */ return cont; } /* массив с данными, необходимыми для построения выпадающего меню В каждом вложенном массиве есть следующие элементы: - имя кнопки выпадающего меню - функция, которая будет вызываться при клике пользователя по соответствующему пункту выпадающего меню - названием кадра, на котором лежит нужная иконка */ var arr:Array = [["Google",func_1,"google"],["Facebook",func_2,"facebook"],["Twitter",func_3,"twitter"]]; /* создаём выпадающее меню первый параметр - заголовок меню второй параметр - массив с данными (надпись, функция, метка кадра с иконкой) для создания кнопок выпадающего меню */ var dropdownMenu:Sprite = createDropdownMenu("Select:",arr); /* добавляем меню в список отображения */ addChild(dropdownMenu); /* позиционируем меню на сцене флеш-ролика */ dropdownMenu.x = 50; dropdownMenu.y = 50; /* функции, которые будут вызываться по клику на соответствующем пункте меню */ function func_1(event:MouseEvent):void { navigateToURL(new URLRequest("https://www.google.ru/")); } function func_2(event:MouseEvent):void { navigateToURL(new URLRequest("https://www.facebook.com/")); } function func_3(event:MouseEvent):void { navigateToURL(new URLRequest("https://twitter.com/")); }

Кроме этого, нам надо настроить звук, который мы используем в скрипте. О том, как импортировать звук в флеш-проекты смотрите тут: Flash IDE & ActionScript 3.0 & Sound.

Результат:

Скачать исходник примера можно здесь (под Adobe Flash CS5).

Автор: admin

Дата добавления: 2012-12-15

Просмотров: 15237

Рейтинг поста: +31-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Ярик
Дата добавления: 2015-04-29
Спасибо!!! Теперь всё отлично работает :-)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-04-28
Проблема возникает из-за того, что размеры пунктов меню определяются динамически. А это может работать криво, если в пункте меню есть анимация. Выход прост: вместо item.height и caption.height подставьте высоту пунктов меню (в моём примере - 40).
Комментатор
Комментарий добавил(а): Ярик
Дата добавления: 2015-04-28
Большое спасибо за оперативность и ваше время. Со звуком разобрался. С анимацией на половину разобрался. В двух словах попробую написать, с какой я проблемой столкнулся. Когда я делаю анимацию формы с заменой цвета или анимацию движения с заменой цвета, всё работает, но если я создаю анимацию движения более сложную с использованием маски, начинается глюк, кнопки в выпадающем меню создаются со смещением и их интерактивность не работает (они преждевременно исчезают). И не могу понять, почему данный глюк наблюдается только если в анимации присутствует объект, выходящий за габаритный размер кнопки по оси Y. Если габарит размера кнопки нарушается объектом только в пределах оси X, всё работает без проблем. Выложил вам пример исходника. Скорее всего конфликт возникает из-за наложения габаритов анимации кнопок друг на друга но, как его обойти я не знаю)) .
http://private.ukr-games.com/dropdown_menu_with_sound_and_animation_1-2.zip
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-04-27
Добавил пример со звуком и анимацией.
Комментатор
Комментарий добавил(а): Ярик
Дата добавления: 2015-04-25
Дополнение к нижнему посту:
...Или как сделать генерацию выпадающего меню не из MovieClip, а из символа Button? Просто в символе Button предусмотрена возможность в кадры (Up, Over, Down) вставить звук и другой символ без скрипта
Комментатор
Комментарий добавил(а): Ярик
Дата добавления: 2015-04-25
Не подскажите, как в этот скрипт добавить звук, чтобы получить щёлканье мыши? Навёл, кликнул, убрал мышь - единожды произвёлся один и тот же короткий звук. И второе, как сделать так, когда навёл и убрал мышь в кнопке происходила мною созданная анимация этой кнопки?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-01-09
> А как сделать, чтоб в каждом пункте меню было свое выпадающее меню?

Здесь изначально предполагались только одноуровневые выпадающие менюшки. Для сложных древовидных данных тоже есть решения: типа http://sibirjak.com/osflash/projects/as-dataprovider-controls/ или компонентов Yahoo! ASTRA.
Комментатор
Комментарий добавил(а): 123
Дата добавления: 2015-01-09
А как сделать, чтоб в каждом пункте меню было свое выпадающее меню?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-14
Честно говоря, плохо понимаю сущность проблемы, тем более, на словах. Да и с классом Tween крайне редко работаю, предпочитая использовать зелёный носок.
Комментатор
Комментарий добавил(а): Стэф
Дата добавления: 2014-12-13
можно ли к статичному классу "BackForward" добавить класс "Tween"? для твина используется координатный примитив "z7" который находится в кнопке с названием "geo", к которой в свою очередь, добавлен класс "BackForward". В выводе мне либо показывает что статичный класс не поддерживает твин, либо "null".
есть какие-либо решения?
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Страница 1 из 3: 123
Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика