RSS Vektor Deutschlandkarte mit ROLL_OVER

verfasst 15.03.2009 von MediaCix | kurze URL: /t624 | 7 Kommentare

Vektor Deutschlandkarte mit ROLL_OVER

Wie könnte man eine (einfache) Deutschlandkarte mit Bundesländer für eine Navigation oder Präsentation mittels Flash und AS3 darstellen und mit dynamischen Informationen füllen? Genaue dieser Frage bin ich nachgegangen, und habe eine kleine Anleitung inkl. Beispiel dazu vorbereitet. Da ich mal ganz vermute, dass es in den nächsten Jahren kein AS1 oder AS2 mehr geben wird, wurde das Beispiel gleich mit AS3 geschrieben, was nicht immer einfach war! Von gewohnte Funktionen in AS2 muss man sich trennen und umdenken. Aber auch dazu einige Tipps in der Anleitung. Aber kommen wir nun zum kleinen Tutorial.

Zunächst brauchen wir eine Deutschlandkarte mit Bundesländer und Landesgrenzen. Am besten wäre eine Karte als Vektor-Grafik im Adobe Illustrator Format, damit wir später die einzelnen Bundesländer als MovieClips erstellen können. Eim Import von AI-Dateien können wir dann gleich einstellen, was als Grafik oder was als MovieClip angelegt werden soll.

Bei diesem Beispiel hier habe ich alle Bundesländer als MovieClips angelegt. Die Landesgrenzen sind noch mal als extra MovieClip vorhanden. Damit wir etwas für ROLL_OVER und ROLL_OUT haben, geht nun der 1. Schritt mit AS3 los.

Die komplette Karte wurde als „MC Karte” angelegt, die einzelnen Bundesländer je nach Bezeichnung - z.B. „de_bb” für Brandenburg. Jedes Bundesland-MovieClip soll dabei mit „alpha” einen MouseOver-Effekt bekommen.

» Flash ActionScript
// ROLL_OVER
Karte.de_bb.addEventListener(MouseEvent.ROLL_OVER,over_bb);
// ROLL_OUT
Karte.de_bb.addEventListener(MouseEvent.ROLL_OUT,out_bb);

function over_bb(e:MouseEvent) { Karte.de_bb.alpha = 1; }
function out_bb(e:MouseEvent) { Karte.de_bb.alpha = 0.5; }


Für alle in Deutschland wohnen und noch immer nicht wissen wieviel Bundesländer wir haben,
hier der ultimative Hinweis => wir haben 16 Bundesländer :)
Also müssen wir ROLL_OVER und ROLL_OUT 16mal erstellen :)

Das war erstmal der einfache Teil, aber nun soll zusätzlich bei ROLL_OVER noch ein Infofenster angezeigt werden, deren Inhalt dynamisch ist und sich an der Mausposition positioniert. Die Inhalte sollen weiterhin aus einer XML-Datei kommen. Die XML-Datei hat folgenden Inhalt:

<map>
  <areas>
    <de_bw title="Baden-Württemberg"></de_bw>
    <de_by title="Bayern"></de_by>
    <de_be title="Berlin"></de_be>
    <de_bb title="Brandenburg"></de_bb>
    <de_hb title="Bremen"></de_hb>
    <de_hh title="Hamburg"></de_hh>
    <de_he title="Hessen"></de_he>
    <de_mv title="Mecklenburg-Vorpommern"></de_mv>
    <de_ni title="Niedersachsen"></de_ni>
    <de_nw title="Nordrhein-Westfalen"></de_nw>
    <de_rp title="Rheinland-Pfalz"></de_rp>
    <de_sl title="Saarland"></de_sl>
    <de_sn title="Sachsen"></de_sn>
    <de_st title="Sachsen-Anhalt"></de_st>
    <de_sh title="Schleswig-Holstein"></de_sh>
    <de_th title="Thüringen"></de_th>
  </areas>
</map>


Der Attribut „title” ist dann der Inhalt im Infofenster. Aber erstmal muss die XML im Flash eingelesen werden.

» Flash ActionScript
// bei AS3 muss alles ordentlich definiert werden
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

// Registriert ein Ereignis-Listener-Objekt
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

// eine URLRequest-Klasse
xmlLoader.load(new URLRequest('karte_de.xml'));

var land_obj:Object = new Object();
function LoadXML(e:Event):void {
 xmlData = new XML(e.target.data);
 land_obj = xmlData.areas;
}


Auf zusätzliche Abfragen, ob das XML geladen worden ist oder nicht, habe ich erstmal verzichtet. Dies kann nachträglich bei Bedarf noch mit Abfragen eingebaut werden. Damit ich besser auf ein Object zugreiffen kann, wurde das Object „land_obj” definiert. Hier kommen die Inhalte der XML rein.

Das Infofenster (land_info) wurde aus einen weiteren MovieClip erstellt und mit einen Textfeld (land_info.info) versehen. Hier sollen dann die Inhlate dynamisch geladen werden. Und natürlich soll das Infofenster erst dargestellt werden, wenn der Mauszeiger über einen Bundesland ist. Dazu habe ich folgene Funktionen:

» Flash ActionScript
// ROLL_OVER für Karte
function ok_info( str ) { 
 land_info.visible = true; 
 land_info.info.htmlText = land_obj[str].attribute('title'); 
}
function no_info() { land_info.visible = false; }


Gesteuert werden diese Funktionen über die ROLL_OVER und ROLL_OUT Funktionen der jeweiligen Bundesländer.

» Flash ActionScript
function over_bb(e:MouseEvent) { Karte.de_bb.alpha = 1; ok_info('de_bb'); }
function out_bb(e:MouseEvent) { Karte.de_bb.alpha = 0.5; no_info(); }


Durch die Funktion ok_info() und den Parameter, wird auf das XML-Object ?land_obj? zugegriffen, und der Inhalt dem Textfeld (land_info.info) vom Infofenster übergeben. Zusätzlich wird das Infofenster Ein- oder Ausgeblendet. Natürlich sind hier auch andere Animationen möglich.

Damit nun das Infofenster nicht in einer Ecke klebt, sondern sich an der Mausposition platziert, wurde noch folgendes Script benutzt.

» Flash ActionScript
var bb = land_info.width;
var hh = land_info.height;
var pos_x;
var pos_y;
land_info.visible = false;

stage.addEventListener(MouseEvent.MOUSE_MOVE, kleben);
function kleben(e:MouseEvent) {
 var abstand = 10;
 var mitte_x = stage.width / 2;
 var mitte_y = stage.height / 2;
 var m_x = pos_x = stage.mouseX;
 var m_y = pos_y = stage.mouseY;
 if ( m_x > mitte_x ) { 
  pos_x = m_x - bb;
  land_info.pfeil_oben.x = bb - land_info.pfeil_oben.width - 10;
  land_info.pfeil_unten.x = bb - land_info.pfeil_unten.width - 10;
 } else {
  land_info.pfeil_oben.x = land_info.pfeil_oben.width;
  land_info.pfeil_unten.x = land_info.pfeil_unten.width;
 }
 if ( m_y > mitte_y ) { 
  pos_y = m_y - hh - (abstand*2);
  land_info.pfeil_oben.visible = false;
  land_info.pfeil_unten.visible = true;
 } else {
  land_info.pfeil_oben.visible = true;
  land_info.pfeil_unten.visible = false;
 }
 land_info.x = pos_x;
 land_info.y = pos_y + (abstand*2);
}


Beim Infofenster wurden weiterhin noch kleine Pfeile eingesetzt, diese sollen in der Näher der Mausposition automatisch gesetzt werden. Hierzu wurde 2 Pfeile (oben und unten) als MovieClip erstellt, die dann je nach Position bzw. rechts und links aus- und eingeblendet werden.

Das komplette benutzte AS3 zu diesem Beispiel:
  • Datei: karte_de.as
  • Größe: ca. 0.006 MByte
  • Upload: 2010-12-26 12:28:46
  • Downloads: 609


Die Deutschlandkarte im AI Format
  • Datei: karte_de.ai
  • Größe: ca. 0.21 MByte
  • Upload: 2010-12-26 12:28:51
  • Downloads: 787


Und zum Schluss das Online Beispiel:

bisherige Kommentare

1
23.04.2009
caria meint dazu:
Dieses ActionScript rettet mich!
Ich hab eine andere Karte mit Orten, dort werden die Orte mit der Maus überfahren, dann erscheint das Textfeld, das Script hängt am jeweiligen Ort.

Nun sollte das ganze in ASC3, weil der Text aus XML kommen soll. Aber welch böse Überraschung, das Script darf nicht mehr an den Ort (Instanz).

Also alles umbasteln! Und dabei hilft mir jetzt dieses ASC.

Danke!!

2
22.07.2009
Antistar meint dazu:
Hey,
vielen Dank, das du deine Arbeti veröffentlichst. Ich versuch grade das nachzubauen, bekomm aber immer Viele Fehlermeldungen. wie bring ich am besten beides zusammen?

3
27.08.2009
2w1w2w meint dazu:
Das was Du da gemacht hast ist super. Ich check nur leider gar nichts. Kannst Du mal die Flashdatei posten? Ich würde das gerne verstehen.

4
04.12.2009
Unbekannt meint dazu:
Kannst du die fla bzw. mal das komplette Projekt hochladen... würde das gern mal alles zusammen nachbauen. Besten Dank

5
25.12.2009
derDääääään meint dazu:
Vielen Dank für die Karte. Ist wirklich sehr schön geworden und erspart mir viel Zeit und Arbeit. Gibt es etwas, das man für Dich tun kann?

6
14.02.2010
Poison meint dazu:
Ahhh genau sowas suche ich aber blicke da überhaupt nicht durch :-( Jemand vielleicht da der mir dabei helfen könnte?

7
01.09.2010
Jochen meint dazu:
Vielen Dank für die Veröffentlichung. Es hat sehr gut geklappt und sieht sehr gut aus! Danke!

neuen Kommentar schreiben

Ich möchte automatisch eine E-Mail bei neuen Kommentaren erhalten.



Themen mit ähnlichen Inhalten


Tags zum Beitrag

addeventlistener     roll_over     roll_out     usermap