кнопка с выезжающим меню

hunterr · 04.10.2011, 01:39

Помогите кто может.
Прочел кучу тем ничего не выходит.
Мне нужно сделать кнопку при нажатии на которою выплывало бы меню с другими кнопками.
Как на той картинке.
Как сделать лучше всего?
Буду благодарен.

fish_r · 04.10.2011, 01:49

С такими вопросами надо бы в раздел вакансии обращаться, вы же просите не помочь, а по сути, выполнить за вас работу. Задайте конкретный вопрос. Что у вас именно не выходит? Что делали? В какой среде? В кадрах? В коде? Если есть код покажите. Тогда вам как-то можно будет конкретно помочь.

hunterr · 04.10.2011, 02:03

Пробовал сделать кнопку MovieClip-ом а на выезжающем меню кнопки. Но ничего толкового не вышло. Может можно сделать как-то попроще? Я еще новичок в этом деле хотел спросить у опытных людей.

in4core · [+4 06.05.14]

1. Создается класс управляющий деревом.
2. Создается класс-символ кнопки хидера и кнопки списка.
3. Создается xml файл ( для теста ) реализующий список.
Все.
По первому пункту : событийная модель ( эффекты по нажатию кнопок, настройка хеша дерева ) , реализация самого списка циклами используя п2 , ну и управление списком, что впринципе так же должно войти в событийку.
Тоесть к примеру : изначально видны только основные хидеры. по нажатию на 1й хидеры - циклом создаются субхидеры или однородные списки, при этом основные хидеры уезжают на высоту нового списка и т.д.
Сделать это очень просто, нужно только желание, тоесть сесть и начать пробовать все то, что я описал. потихоньку и неспеша...
Когда то писал что то похожее.... вот часть кода... так никогда не пишите))) это тока пример

Код AS3:

package in4core.tree
{
 
	import flash.display.Sprite;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.errors.IOError;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.events.MouseEvent;
 
	public class Tree extends Sprite
	{
 
		private var treeContainer:Sprite = new Sprite();
		private var loader:URLLoader = new URLLoader();
		private var request:URLRequest = new URLRequest();
		private var $data:Object;
		private var separator:uint;
		private var ident:uint;
 
 
		public function Tree(xmlURL:*, notURL:Boolean = false, separator:uint = 0, ident:uint = 20)
		{
			super();
			this.separator = separator;
			this.ident = ident;
			addChild(treeContainer);
 
			if (! notURL)
			{	
				request.url = xmlURL;
				loadStart();
			}
			else
			{
				$data = new XMLList(xmlURL);
				createMainNodes();
			}
		}
		private function loadStart():void
		{
			try
			{
				loader.load(request);
			}
			catch (err:IOError)
			{
				trace(err);
			}
			loader.addEventListener(Event.COMPLETE, onComplete);
			loader.addEventListener(Event.OPEN, onOpen);
			loader.addEventListener(IOErrorEvent.IO_ERROR, onError);
			loader.addEventListener(ProgressEvent.PROGRESS, onProgress);
		}
		private function onOpen(e:Event):void
		{
 
		}
		private function onProgress(e:ProgressEvent):void
		{
 
		}
		private function onComplete(e:Event):void
		{
			loader.removeEventListener(Event.COMPLETE, onComplete);
			loader.removeEventListener(Event.OPEN, onOpen);
			loader.removeEventListener(IOErrorEvent.IO_ERROR, onError);
			loader.removeEventListener(ProgressEvent.PROGRESS, onProgress);
			trace('Loading Complete');
			createTree(loader.data);
		}
		private function onError(e:IOErrorEvent):void
		{
			//trace('Loading denied : ' + e.text);
		}
		private function createTree(data:Object):void
		{
			$data = new XMLList(data);
			createMainNodes();
		}
		private function createMainNodes():void
		{
 
			for (var i = 0; i < $data.length(); i++)
			{
 
				var listHeader = new TreeHeader(separator,ident);
				listHeader.text = $data[i]. @ field;
				listHeader.y = (22 + separator) * i ;
				treeContainer.addChild(listHeader);
				if ($data[i].hasComplexContent())
				{
					listHeader.list = $data[i].children();
				}
				else
				{
					listHeader.gotoAndStop(2);
					listHeader.addEventListener(MouseEvent.CLICK, (root as Main).listClickEvent);
					listHeader.buttonMode = true;
					listHeader.mouseChildren = false;
				}
			}
			//trace('Tree created');
		}
	}
}
 
package in4core.tree
{
 
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import in4core.tree.TreeEvents;
	import flash.events.EventDispatcher;
	import flash.display.Sprite;
 
	public class TreeHeader extends MovieClip
	{
		private var state:String = 'close';
		private var cont:Sprite = new Sprite();
		private var separator:uint;
		private var ident:uint;
		public static var _mc:TreeHeader;
		public var url3d:String;
		public var Interface:String;
		public var Materials:String;
		public var Options:String;
		public var list:XMLList;
 
		public function TreeHeader(separator:uint = 0, ident:uint = 20)
		{
			super();
			this.track.visible = false;
			this.separator = separator;
			this.ident = ident;
			cont.y = y + 22 + separator;
			addChild(cont);
			setListeners();
		}
		public function set text(text:String):void
		{
			header.text = text;
		}
		public function get text():String
		{
			return header.text;
		}
		private function setListeners():void
		{
			plus.addEventListener(MouseEvent.CLICK, onClick);
			gh.addEventListener(MouseEvent.MOUSE_OVER, onOver);
			gh.addEventListener(MouseEvent.MOUSE_OUT, onOut);
			plus.addEventListener(TreeEvents.ITEM_IS_OPENED, itemOpen);
			plus.addEventListener(TreeEvents.ITEM_IS_CLOSED, itemClose);
			plus.addEventListener(TreeEvents.ITEM_IS_SELECTED, itemSelect);
			plus.buttonMode = true;
			this.buttonMode = true;
			header.mouseEnabled = false;
 
		}
		private function onClick(evt:Event):void
		{
			if (state == 'close')
			{
				plus.dispatchEvent(new TreeEvents(TreeEvents.ITEM_IS_OPENED,list));
				plus.gotoAndStop(2);
				state = 'open';
				this.track.visible = true;
			}
			else
			{
				plus.dispatchEvent(new TreeEvents(TreeEvents.ITEM_IS_CLOSED));
				plus.gotoAndStop(1);
				state = 'close';
				this.track.visible = false;
			}
			plus.dispatchEvent(new TreeEvents(TreeEvents.ITEM_IS_SELECTED));
		}
		private function onOver(evt:Event):void
		{
			gh.gotoAndPlay('Over');
		}
		private function onOut(evt:Event):void
		{
			gh.gotoAndPlay('Out');
		}
		private function itemOpen(e:TreeEvents):void
		{
			addChilds(list);
		}
		private function itemClose(e:TreeEvents):void
		{
			removeChilds();
		}
		private function itemSelect(e:TreeEvents):void
		{
			//trace('Selected is : ' + e.currentTarget.parent.header.text);
		}
		private function addChilds(data:XMLList):void
		{
			var intree:TreeHeader;
			if (data)
			{
				for (var i = 0; i < data.length(); i++)
				{
					if (data.length() > 0)
					{
						intree = new TreeHeader(separator,ident);
						var separation:uint =  (18+separator) * i;
						cont.addChild(intree);
						intree.text = data[i]. @ field;
						intree.y = separation;
						intree.x = ident;
						if (data[i].hasComplexContent())
						{
							intree.list = data[i].children();
						}
						else
						{
							intree.gotoAndStop(2);
 
							intree.addEventListener(MouseEvent.CLICK, (root as Main).listClickEvent);
							intree.url3d = data[i]. @ url3d;
							intree.Interface = data[i]. @Interface;
							intree.Options = data[i].@options;
							intree.Materials = data[i].@materials;
 
							intree.text = data[i]. @ field;
 
							intree.buttonMode = true;
							intree.mouseChildren = false;
						}
					}
				}
				if (intree.parent.parent.parent.parent is TreeHeader) {
					if (intree.currentFrame == 2) {
						intree.tt.visible = false;
					}
				}
				tweenInOut();
			}
		}
		private function removeChilds():void
		{
			while (cont.numChildren != 0)
			{
				cont.removeChildAt(0);
			}
			tweenInOut();
		}
		public function tweenInOut():void
		{
			for (var i = parent.getChildIndex(this)+1; i < parent.numChildren; i++)
			{
				parent.getChildAt(i).y = parent.getChildAt(i - 1).y + parent.getChildAt(i - 1).height-11 + separator;
			}
			if (parent.parent is TreeHeader)
			{
				(parent.parent as TreeHeader).tweenInOut();
			}
		}
		public function rewrite(mc:TreeHeader = null) {
			if (mc != null) {
				mc.text = mc.text;
			}
		}
	}
}