Карта... слой под слоем... - Страница 6

Хемуль · 09.10.2006, 01:00

Ок, значит XML...
Код изменился:

Код:

var XMLPath:String = "map.xml";

var topNodeName:String = "map";
var regionsSectionNodeName:String = "regions";
var regionNodeName:String = "region";
var regionIdAttributeName:String = "id";
var regionNameAttributeName:String = "name";
var regionDescriptionAttributeName:String = "description";
var regionPatientsCountAttributeName:String = "count";
var regionPatientsGroup1CountAttributeName:String = "value1";
var regionPatientsGroup2CountAttributeName:String = "value2";
var regionPatientsGroup3CountAttributeName:String = "value3";

var maxScale:Number = 120;
var defaultScale:Number = 100;

var regionClipBaseName:String = "region";
var regionCaptionClipBaseName:String = "regionCaption";
var regionCaptionClipHitSuffix:String = "_hit";

var winX:Number = 16;
var winY:Number = 160;
var winOpened:Boolean = false;

var regionsNamesX:Number = 240;
var regionsNamesY:Number = 20;
var regionsNamesWidth:Number = 60;
var regionsNamesHeight:Number = 20;
var regionsNamesInterval:Number = 20;
var regionsNamesColor:Number = 0x000000;
var regionsNamesHoverColor:Number = 0xff0000;
var regionsNamesFont:String = "Tahoma";
var regionsNamesSize:Number = 10;

var regionsFillHoverColor:Number = 0xff0000;
var regionsFillColor:Number = 0x94CBD1;
var regionsLineHoverColor:Number = 0x000000;
var regionsLineColor:Number = 0x000000;

var regions:Array = new Array();
var _id_:Number = 0;
var _name_:Number = 1;
var _description_:Number = 2;
var _patientsCount_:Number = 3;
var _patientsGroup1Count_:Number = 4;
var _patientsGroup2Count_:Number = 5;
var _patientsGroup3Count_:Number = 6;

var mapXML:XML = new XML();
mapXML.onLoad = XMLLoaded;
mapXML.ignoreWhite = true;
mapXML.load(XMLPath);

function XMLLoaded(success:Boolean)
{
	if (success)
	{
		var topNode:XMLNode = mapXML.firstChild;
		if (topNode.nodeName == topNodeName)
		{
			var secondLevelNodes:Array = topNode.childNodes;
			var secondLevelNodesNumber:Number = secondLevelNodes.length;
			for (var secondLevelNodesIndex:Number = 0; secondLevelNodesIndex < secondLevelNodesNumber; ++secondLevelNodesIndex)
			{
				var secondLevelNode:XMLNode = secondLevelNodes[secondLevelNodesIndex];
				if (secondLevelNode.nodeName == regionsSectionNodeName)
				{
					var thirdLevelNodes:Array = secondLevelNode.childNodes;
					var thirdLevelNodesNumber:Number = thirdLevelNodes.length;
					for (var thirdLevelNodesIndex:Number = 0; thirdLevelNodesIndex < thirdLevelNodesNumber; ++thirdLevelNodesIndex)
					{
						var thirdLevelNode:XMLNode = thirdLevelNodes[thirdLevelNodesIndex];
						if (thirdLevelNode.nodeName == regionNodeName)
						{
							var currentRegionParameters:Array = new Array();
							currentRegionParameters[_id_] = Number(thirdLevelNode.attributes[regionIdAttributeName]);
							currentRegionParameters[_name_] = thirdLevelNode.attributes[regionNameAttributeName];							
							currentRegionParameters[_description_] = thirdLevelNode.attributes[regionDescriptionAttributeName];
							currentRegionParameters[_patientsCount_] = Number(thirdLevelNode.attributes[regionPatientsCountAttributeName]);
							currentRegionParameters[_patientsGroup1Count_] = Number(thirdLevelNode.attributes[regionPatientsGroup1CountAttributeName]);
							currentRegionParameters[_patientsGroup2Count_] = Number(thirdLevelNode.attributes[regionPatientsGroup2CountAttributeName]);
							currentRegionParameters[_patientsGroup3Count_] = Number(thirdLevelNode.attributes[regionPatientsGroup3CountAttributeName]);
							regions.push(currentRegionParameters);
						}
					}
				}
			}
			initClips();
		}
		else
		{
			trace("Error loading " + XMLPath + " - invalid top node name!");
		}
	}
	else
	{
		trace("Error loading " + XMLPath + "!");
	}
}

function initClips()
{
	var regionsNumber:Number = regions.length;
	for (var index:Number = 0; index < regionsNumber; index++)
	{
		var currentRegion:Array = regions[index];
		var regionName:String = regionClipBaseName + currentRegion[_id_];
		var regionCaptionName:String = regionCaptionClipBaseName + currentRegion[_id_];
		var regionCaptionHitAreaName:String = regionCaptionName + regionCaptionClipHitSuffix;
		this[regionName].speedFactor = defaultScale;
		this[regionName].speed = 0;
		this[regionName].id = index;
		setColor(this[regionName].fill, regionsFillColor);
		setColor(this[regionName].line, regionsLineColor);
		this[regionName].onRollOver = this[regionNameText].onRollOver = function()
		{
			this.speedFactor = maxScale;
			setColor(this.fill, regionsFillHoverColor);
			setColor(this.line, regionsLineHoverColor);
			this.swapDepths(this._parent.getNextHighestDepth());
		};
		this[regionName].onRollOut = this[regionName].onReleaseOutside = function()
		{
			this.speedFactor = defaultScale;
			setColor(this.fill, regionsFillColor);
			setColor(this.line, regionsLineColor);		
		};
		this[regionName].onRelease = this[regionNameText].onRelease = function()
		{
			if (!winOpened)
			{
				var windowClip:MovieClip = this._parent.attachMovie("window", "window", this._parent.getNextHighestDepth(), {_x:winX, _y:winY});
				windowClip.description.text = regions[this.id][_description_];
				winOpened = true;
				windowClip.closeButton.onRelease = function()
				{
					this._parent.removeMovieClip();
					winOpened = false;
				};
			}
			else 
			{
				this._parent.window.removeMovieClip();
				winOpened = false;
			}
		};
		var regionCaption:MovieClip = this.createEmptyMovieClip(regionCaptionName, this.getNextHighestDepth());
		regionCaption._x = regionsNamesX;
		regionCaption._y = regionsNamesY + index * regionsNamesInterval;
		regionCaption.id = index;	
		regionCaption.createTextField("textCaption", regionCaption.getNextHighestDepth(), 0, 0, regionsNamesWidth, regionsNamesHeight);
		regionCaption.textCaption.autoSize = true;
		regionCaption.textCaption.multiline = false;
		var regionCaptionTextFormat:TextFormat = new TextFormat();
		regionCaptionTextFormat.font = regionsNamesFont;
		regionCaptionTextFormat.size = regionsNamesSize;
		regionCaption.textCaption.setNewTextFormat(regionCaptionTextFormat);
		regionCaption.textCaption.text = currentRegion[_name_];
		var regionCaptionHitArea:MovieClip = regionCaption.createEmptyMovieClip(regionCaptionHitAreaName, regionCaption.getNextHighestDepth());
		regionCaptionHitArea.beginFill(0x000000);
		regionCaptionHitArea.moveTo(0, 0);
		regionCaptionHitArea.lineTo(regionCaption._width, 0);
		regionCaptionHitArea.lineTo(regionCaption._width, regionCaption._height);
		regionCaptionHitArea.lineTo(0, regionCaption._height);	
		regionCaptionHitArea.lineTo(0, 0);	
		regionCaptionHitArea.endFill();
		regionCaptionHitArea._visible = false;
		regionCaption.hitArea = regionCaptionHitArea;
		setColor(regionCaption, regionsNamesColor);
		regionCaption.onRollOver = function()
		{
			setColor(this, regionsNamesHoverColor);
			this._parent[regionClipBaseName + regions[this.id][_id_]].onRollOver();
		};
		regionCaption.onRollOut = regionCaption.onReleaseOutside = function()
		{
			setColor(this, regionsNamesColor);		
			this._parent[regionClipBaseName + regions[this.id][_id_]].onRollOut();
		};
		regionCaption.onRelease = function()
		{
			this._parent[regionClipBaseName + regions[this.id][_id_]].onRelease();
		};
	}
	this.onEnterFrame = function()
	{
		for (var regionId:Number = 0; regionId < regionsNumber; regionId++)
		{
			var regionToUpdate:String = regionClipBaseName + regions[regionId][_id_];
			updateRegion.apply(this[regionToUpdate]);
		}
	};
}
	
function updateRegion()
{
	this.speed = (this.speed * 0.8) + ((this.speedFactor - this._xscale) * 0.2);
	this._xscale += this.speed;
	this._yscale = this._xscale;
}

function setColor(MC:MovieClip, colorToSet:Number)
{
	var newColor:Color = new Color(MC);
	newColor.setRGB(colorToSet);	
}

В коде выше id, который загружается из тэга XML'я и id, который устанавливается для мувиклипов регионов (и мувиклипов кнопок справа ) - разные числа. Дело в том, что вы можете в XML'е устанавливать данные не для всех регионов. То есть, если у вас, например, 76 регионов, то вам не обязательно нужно иметь 76 тэгов region. Те регионы, для которых будет отсутствовать тэг region в файле map.xml, будут просто неактивными и их имена не будут выводиться справа в списке. Данные, которые грузятся из XML'я, помещаются в массив regions. Также я сделал так, чтобы можно было гибко настраивать "парсер". Как видите, сверху определяются имена соответствующих тэгов и атрибутов. То есть, например, если ваш клиент захочет поменять атрибут count на какой-то другой, например, patientsNum, то сделать это будет очень просто.

XML (map.xml):

Код:

<?xml version="1.0" encoding="UTF-8"?>
<map>
	<regions>
		<region id="1" name="Регион 1" description="Описание первого региона, каким бы он первым ни был..." count="10" value1="2" value2="3" value3="4" />
		<region id="2" name="Регион 2" description="Описание второго региона, который по сути ничем не хуже первого." count="12" value1="5" value2="6" value3="7" />
	</regions>
</map>

Сохранять XML следует с кодировкой UTF-8. Иначе с русскими буквами будут проблемы. id региона соответствует числу, которое присоединяется к строке "region" для получения имени мувиклипа. То есть, тэг region с атрибутом id="1" будет устанавливать данные для региона с мувиклипом region1.
Исходник прикрепляю...

Хемуль · 09.10.2006, 01:02

По поводу региона, который выносится на задний фон окна с описанием... Вы уверены, что это будет красиво? Я не дизайнер, но мне кажется, что выглядеть это будет не очень... У вас и сверху регион будет, и снизу... При том разные регионы могут иметь разную форму границ. Будет довольно сложно программно разместить там красиво описание, как мне кажется. Но если это принципиально важно, то сделать вообще не сложно. Просто для каждого мувиклипа региона в библиотеке нужно задать linkage id и присоединять их в нужное место на сцене. Справитесь или показать?

Makak · 09.10.2006, 03:49

ууххх !!!! просто СУПЕР !!! спасибо БОЛЬШОЕ ))) без Вас я бы точно не разоборался !!!

насчет регионов вместо окна я уже понял, что будит выглядеть ужасно ... но на всякий случай если вам не сложно для общего понимания, а то и так вас нагрузил этими картами ...

Хемуль · 09.10.2006, 13:07

2 Makak:
Ок. Я предлагаю компромисс. Можно сделать следующее:
При нажатии на регион открывается окно прямоугольное с описанием, а на заднем фоне зоны с текстом выводится немного отличающееся по цвету от заднего фона изображение региона.

PS:
Вы меня не "нагрузили". Я ж тоже учусь...

Makak · 09.10.2006, 19:47

это было бы в идеале

... сейчас сижу с парсером разбираюсь - честно абалденно !!!

Хемуль · 09.10.2006, 19:54

2 Makak:
Да в парсере ничего особенного, просто он немного распухшим выглядит из-за того, что я вынес названия тэгов и атрибутов в переменные. Правда, парсером это неправильно называть. Парсер - это то, что XML посимвольно разбирает ещё до нас. А у нас это просто анализ XML-дерева. Просто многие это тоже парсером зовут. ^_^

Makak · 09.10.2006, 23:30

гммыык )))... анализ XML-дерева ...спасиб ! теперь хоть знать буду

Makak · 11.10.2006, 17:52

интересный вопрос

...

как сделать, что бы при клике объект центрировался?!?

Хемуль · 11.10.2006, 17:59

2 Makak:
Смотря относительно чего и смотря где у центрируемого обьекта точка регистрации...
Пример для мувиклипов с точкой регистрации в левом верхнем углу:

Код:

var clip1:MovieClip = createRectangleMovieClip("clip1", _root, _root.getNextHighestDepth(), 10, 10, 100, 100, 0xff0000, 100);
var clip2:MovieClip = createRectangleMovieClip("clip2", _root, _root.getNextHighestDepth(), 100, 120, 50, 20, 0x006600, 100);

function verticalAlign(mc1:MovieClip, mc2:MovieClip)
{
	mc2._y = mc1._y + (mc1._height - mc2._height) / 2;
}

function horizontalAlign(mc1:MovieClip, mc2:MovieClip)
{
	mc2._x = mc1._x + (mc1._width - mc2._width) / 2;
}

function centerAlign(mc1:MovieClip, mc2:MovieClip)
{
	horizontalAlign(mc1, mc2);
	verticalAlign(mc1, mc2);	
}

clip2.onRelease = function()
{
	centerAlign(clip1, this);
}

function createRectangleMovieClip(newName:String, parentClip:MovieClip, parentClipDepth:Number, newX:Number, newY:Number, newWidth:Number, newHeight:Number, newColor:Number, newAlpha:Number):MovieClip
{
	var newClip:MovieClip = parentClip.createEmptyMovieClip(newName, parentClipDepth);
	newClip.beginFill(newColor);
	newClip.moveTo(0, 0);
	newClip.lineTo(newWidth, 0);
	newClip.lineTo(newWidth, newHeight);
	newClip.lineTo(0, newHeight);	
	newClip.lineTo(0, 0);	
	newClip.endFill();
	newClip._x = newX;
	newClip._y = newY;	
	newClip._alpha = newAlpha;
	return newClip;
}

Код просто вставить в кадр таймлайна и запустить на выполнение.
Надо щёлкнуть по зелёному мувиклипу, чтобы он отцентрировался относительно красного.
Как видно, в функциях horizontalAlign, verticalAlign и centerAlign первый параметр - клип, отсносительно которого центрируется мувиклип, ссылка на который передаётся во втором параметре.

Makak · 11.10.2006, 19:11

Спасибо ! то что нужно ...

тут навалилось, что при клике на регион он увеличивается в центр, подсвечиваться и в ней прописывается информация ...
собственно проблемы возникли с тем как отобразить увеличенный регион в центре …