PDA

Просмотр полной версии : Xml + flash


Котяра2006
25.10.2006, 01:05
Приветствую!

Несколько раз видел такую фишку но как реализовать так и не понял:

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

Так вот может завалялся у кого исходник нечто подобного? Если не жалко дайте пожалуйста поковыряться, буду очень признателен!

Заранее благодарен!

Хемуль
25.10.2006, 01:18
2 Котяра2006:
А самому написать? Вы спрашивайте, чего не знаете, а вам помогут... Что вас смущает? Создание этого кружочка, всплывающая подсказка или загрузка XML?

Котяра2006
25.10.2006, 01:32
меня интересует код который связывает xml с мувиком. Я же не прошу писать это специально для меня, я говорю может у кого то есть нечто подобное, посмотреть просто как это делается.

dantist86
25.10.2006, 03:59
...есть карта, на ней типо кружочка, наводишь на кружочек а там подсказка всплывает и в ней бла-бла-бла всякое. А данные включая размер кружка, его координаты, эти самые бла-бла-бла, плюс переход при нажатии по урл прописаны в файле xml...

Делай поиск по форуму. Здесь все это выложено. Ищи.
ЗЫ. За аналогичные проекты неплохо платят. Только сегодня Англичане нам отдали в разработку подобный за 400 вечнозеленых. Флеш -это не открытый проект. Поэтому мы решили не давать тебе исходник, ты уж извиняй. Сможешь разобрать код здесь (
http://mainmaps.com ) после декомпиляции - будет тебе "счастие". :)

wvxvw
25.10.2006, 05:21
Делаю аналогичный проект (правда еще на стадии разработки концепта). Возможно, как закончу, выложу часть исходников, но это не раньше, чем через месяц.
Готовое - не знаю где взять, да и не думаю, что есть целая собранная заготовка, скорее всего все равно прийдется большую часть делать самому. Так что лучше начинай сейчас =)

Котяра2006
25.10.2006, 20:40
фига себе, всё так сложно? ну это же уже навороты большие, а так, простецкого ничего нет, не нужно карты никакой просто чтоб через xml можно было задать координаты и размер кружка в мувике + что то вписать, может у кого завалялось нечто подобное?

Хемуль
26.10.2006, 12:50
2 Котяра2006:
Просто кружочки на карте, описываемые в XML сделать достаточно легко. Сложнее, когда нужно прикрутить к этому админ-интерфейс для того, чтобы клиент мог ставить их самостоятельно, без редактирования непонятного XML'я. Ну и, наконец, ещё сложнее дело обстоит с картой штатов/регионов/областей, в которйо можно точки ставить на увеличивающихся областях...
Но если у вас карта - просто рисунок, то сделать достаточно просто.
Хотя, конечно, и для карт с увеличивающимися областями решения в сети я видел. И вроде даже беслатные. Но, сами понимаете, карты там в основном популярные... США, Европа и т.д.

Котяра2006
26.10.2006, 16:21
Вот, Хемуль, Вы правильно меня поняли, карта - просто рисунок, никаких админок не нужно, этож я для себя хочу попробовать сделать, просто xml заполнив и всё. Надо то только чтоб кружочек можно было позиционировать по карте задавая координаты, давать ему радиус, менять цвет, да записывать что-то во всплывающую подсказку, ну плюс переход по урлу при клике. Может такое простенькое есть у кого, я же не прошу исходник на мега-карты со всякими прибамбасами:)

Хемуль
27.10.2006, 01:53
Ну, например, можно что-то вроде такого написать:

var mapClipName:String = "map";
var hintClipName:String = "hint";
var XMLPath:String = "locations.xml";
var topNodeName:String = "locations";
var locationNodeName:String = "location";
var locationNameAttributeName:String = "name";
var locationLinkAttributeName:String = "link";
var locationTargetAttributeName:String = "target";
var locationXAttributeName:String = "x";
var locationYAttributeName:String = "y";
var locationRadiusAttributeName:String = "radius";
var locationFillColorAttributeName:String = "fill_color";
var locationFillAlphaAttributeName:String = "fill_alpha";
var locationLineColorAttributeName:String = "line_color";
var locationLineAlphaAttributeName:String = "line_alpha";
var locationLineWidthAttributeName:String = "line_width";
var locationClipBaseName:String = "locations";
var locations:Array = new Array();

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

var mapClip:MovieClip = this.attachMovie(mapClipName, mapClipName, this.getNextHighestDepth());

locationsXML.onLoad = function(success:Boolean)
{
if (success)
{
var topNode:XMLNode = this.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 == locationNodeName)
{
var locationObject:Object = new Object();
locationObject.name = secondLevelNode.attributes[locationNameAttributeName];
locationObject.link = secondLevelNode.attributes[locationLinkAttributeName];
locationObject.target = secondLevelNode.attributes[locationTargetAttributeName];
locationObject.x = secondLevelNode.attributes[locationXAttributeName];
locationObject.y = secondLevelNode.attributes[locationYAttributeName];
locationObject.radius = secondLevelNode.attributes[locationRadiusAttributeName];
locationObject.fillColor = secondLevelNode.attributes[locationFillColorAttributeName];
locationObject.fillAlpha = secondLevelNode.attributes[locationFillAlphaAttributeName];
locationObject.lineColor = secondLevelNode.attributes[locationLineColorAttributeName];
locationObject.lineAlpha = secondLevelNode.attributes[locationLineAlphaAttributeName];
locationObject.lineWidth = secondLevelNode.attributes[locationLineWidthAttributeName];
locations.push(locationObject);
}
}
drawLocations();
}
else
{
trace("Error loading " + XMLPath + " - invalid top node name!");
}
}
else
{
trace("Error loading " + XMLPath + "!");
}
}

function drawLocations()
{
var locationsNumber:Number = locations.length;
for (var index:Number = 0; index < locationsNumber; index++)
{
var locationObject:Object = locations[index];
var newLocationClipName:String = locationClipBaseName + index;
var newLocationClip:MovieClip = createCircleMovieClip(newLocationClipName, this, this.getNextHighestDepth(), locationObject.x, locationObject.y, locationObject.radius, locationObject.fillColor, locationObject.fillAlpha, locationObject.lineColor, locationObject.lineAlpha, locationObject.lineWidth);
newLocationClip.id = index;
newLocationClip.onRollOver = function()
{
var hintClip:MovieClip = this.attachMovie(hintClipName, hintClipName, this.getNextHighestDepth(), {_x:locations[this.id].radius, _y:locations[this.id].radius});
hintClip.caption.text = locations[this.id].name;
};
newLocationClip.onRollOut = newLocationClip.onReleaseOutside = function()
{
this[hintClipName].removeMovieClip();
};
newLocationClip.onRelease = function()
{
getURL(locations[this.id].link, locations[this.id].target);
};
}
}

function createCircleMovieClip(circleName:String, parentClip:MovieClip, parentClipDepth:Number, circleX:Number, circleY:Number, circleRadius:Number, circleFillColor:Number, circleFillAlpha:Number, circleLineColor:Number, circleLineAlpha:Number, circleLineWidth:Number):MovieClip
{
var newCircleClip:MovieClip = parentClip.createEmptyMovieClip(circleName, parentClipDepth);
newCircleClip._x = circleX - circleRadius;
newCircleClip._y = circleY - circleRadius;
newCircleClip.lineStyle(circleLineWidth, circleLineColor, circleLineAlpha);
newCircleClip.beginFill(circleFillColor, circleFillAlpha);
var tanPI8:Number = Math.tan(Math.PI / 8);
var sinPI4:Number = Math.sin(Math.PI / 4);
newCircleClip.moveTo(2 * circleRadius, circleRadius);
newCircleClip.curveTo(2 * circleRadius, (tanPI8 + 1) * circleRadius, (sinPI4 + 1) * circleRadius, (sinPI4 + 1) * circleRadius);
newCircleClip.curveTo((tanPI8 + 1) * circleRadius, 2 * circleRadius, circleRadius, 2 * circleRadius);
newCircleClip.curveTo((1 - tanPI8) * circleRadius, 2 * circleRadius, (1 - sinPI4) * circleRadius, (sinPI4 + 1) * circleRadius);
newCircleClip.curveTo(0, (tanPI8 + 1) * circleRadius, 0, circleRadius);
newCircleClip.curveTo(0, (1 - tanPI8) * circleRadius, (1 - sinPI4) * circleRadius, (1 - sinPI4) * circleRadius);
newCircleClip.curveTo((1 - tanPI8) * circleRadius, 0, circleRadius, 0);
newCircleClip.curveTo((tanPI8 + 1) * circleRadius, 0, (sinPI4 + 1) * circleRadius, (1 - sinPI4) * circleRadius);
newCircleClip.curveTo(2 * circleRadius, (1 - tanPI8) * circleRadius, 2 * circleRadius, circleRadius);
newCircleClip.endFill();
return newCircleClip;
}

С XML'ем такого вида:

<locations>
<location name="Киев, мой город ^_^" link="http://flasher.ru" target="_blank" x="190" y="70" radius="4" fill_color="0xff0000" fill_alpha="100" line_color="0x000000" line_alpha="100" line_width="1" />
</locations>

Исходник прикрепляю...
Будут вопросы, пишите. Я не уделял много внимания всплывающей подсказке, поэтому сделана она очень просто. Для примера...

PS:
XML сохранять следует в кодировке UTF-8.

Котяра2006
27.10.2006, 19:09
Хемуль, наиогромнейшее Вам спасибо!!! :) это я и искал, сижу разбераюсь

user9999
27.10.2006, 22:30
извениет пожалуйста, а можно ли сделать подсказки на основе html файла? Тоесть например есть в html фраза: ...для этого используйте soft selection... Как сделать так, чтобы при наведении на слово soft selection в загруженном html файле, появлялась подсказка? Можно не как в примере карты а в фиксированной облости?

Хемуль
28.10.2006, 00:12
2 Котяра2006:
Я заметил там одну лишнюю строчку в коде.

mapClip.addHint("asdf");

Она не нужна. Это я просто хотел сперва подключить класс Hint одного уважаемого флешера, но потом у меня что-то не срослось и я забыл удалить эту строчку.
А по поводу примера... Ну, может он для вас будет чуточку сложен на первый взгляд. Я просто сделал так, чтобы можно было гибко настраивать все имена узлов и атрибутов, поэтому вынес их в переменные, которые вы и видите в начале файла. Ну, то есть, когда я писал вам этот пример, я не знал, какой у вас XML будет и какой захочется видеть вашему потенциальному клиенту, поэтому сделал так, чтобы было просто поменять.

etc
28.10.2006, 02:14
одного уважаемого флешера
Ну так написал бы, что silin-а :D

Хемуль
28.10.2006, 02:29
2 __etc:
Да ладно, псевдоним может всё равно человеку ничего не сказать. ^_^

NickSun
18.04.2008, 19:26
Хемуль, а как сделать чтоб в данном примере вместо кружка ставилась картинка или муви клип? И что-то переход по урлу как-то не срабатывает :(
Скажу сразу что я в знаниях флеша не силен.