Простое выпадающее меню на 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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Антон
Дата добавления: 2013-11-06
Спасибо огромное, вроде помогло.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-11-06
1.) Бессмысленно показывать swf. Чтобы найти ошибку, нужен исходник. Нет, конечно, можно декомпилировать swf, но сомневаюсь, что кто-то захочет на это терять время....

2.) Если религиозные и моральные принципы позволяют, то можно убивать выпадающее меню стандартным removeChild:



function func_1(event:MouseEvent):void
{
removeChild(dropdownMenu);
navigateToURL(new URLRequest("http://pskovmir.edapskov.ru/index.php?q=" + encodeURI("Псков")));
}



Кроме этого, можно засунуть выпадающее меню за пределы видимой сцены или сделать меню невидимым. Всё зависит от логики вашей программы.
Комментатор
Комментарий добавил(а): Антон
Дата добавления: 2013-11-06
Здравствуйте, как сделать что-бы при нажатии на одну из кнопок происходил переход на другой кадр, на котором есть простая кнопка, у меня остается меню и не появляется кнопка с первого кадра. http://yadi.sk/d/WCvWs3l-CEFhm
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-10-08
Ну, теперь более-менее понятно. Во-первых, флеш-меню - это зло (с ними не умеют работать поисковики + есть определённый процент пользователей, у которых флеш-плеер вообще не установлен или заблокирован). Во-вторых, флеш-ролику можно задать прозрачный фон через код вставки и поднять его на слой, который выше прочего контента. Очень близкий случай рассматривается в этом посте - http://edapskov.ru/pages.php?id=251
Комментатор
Комментарий добавил(а): Vadik
Дата добавления: 2013-10-08
Вы не совсем так меня поняли, мне надо вставить в конструктор сайтов менюшку такую, но она в конструкторе занимает место(закрывая другие объекты) вокруг кнопки своим белым фоном, я пробовал просто изменять размер холста и подгонял под минимальный размер минюшки, но там, где список раскрывается все равно должно оставаться место для него и там как раз и закрывает фоном под раскрывающимся меню другие объекты. Как бы решить эту проблему?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-10-07
Может я вас неправильно понял, но можно просто поменять слой у объекта с помощью метода setChildIndex() - http://edapskov.ru/pages.php?id=245
Комментатор
Комментарий добавил(а): Vadik
Дата добавления: 2013-10-06
Спасибо за урок, подскажите пожалуйста как сделать фон вокруг кнопки и под выпадающим списком прозрачным? При композиции с другими объектами фон закрывает их, а ведь чтобы список раскрывался сверху, он должен позиционироваться над ними.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-08-07
Анимация - это работа класса Tween. Если посмотрите в код, то увидите, что этому классу передаётся несколько параметров. Предпоследний параметр - это продолжительность анимации в секундах. Его и меняйте.
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2013-08-07
Подскажите можно ли регулировать скорость выпадения меню?
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2013-07-30
Подскажите пожалуйста, а как реализовать это меню с вариантов выпадения вверх, а не вниз... Заранее благодарю!
Кстати, поправьте капчу - настоящая фамилия Сталина - Джугашвили, а Сталин - это псевдоним... Как у В.И. Ленина - настоящая - это Ульянов.
Добавить комментарий:







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

Идиот-тест

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

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