Interaktive Landkarte

Shoki · 09.10.2009

Hallo Leute,

hat jemand einen Tipp für ein Tutorial, wie man interaktive Landkarten herstellen kann. Die Aufgabe, die ich lösen muss, ist Städte auf eine Landkarte zu setzen. Wenn man auf die Stadt klickt müsste auf der Seite eine Infobox erscheinen, die die Informationen beinhaltet.

Ich habe kaum Ahnung von Flash, würde aber gerne über die Lösung der genannten Aufgabe die Grundlagen von Flash kennen lernen.

Wäre dankbar für einen guten Tipp, Shoki

a_maze_ing · 09.10.2009

AW: Interaktive Landkarte

waer das nicht in html einfacher? das du die karte mit photoshop sliced, in html jeder dann eine infobox zu weist?

Shoki · 09.10.2009

AW: Interaktive Landkarte

Ja, klar. Ich fände aber Flash spannender. Nicht nur, weil ich so endlich einen Grund hätte um die Grundlagen von Flash zu lernen, sondern weil man nette Effekte / Animationen einarbeiten könnte. Es könnte außerdem sein, dass ich einen Zoom-Effekt bräuchte, um die Übersicht zu wahren.

sokie · 09.10.2009

AW: Interaktive Landkarte

welches Gebiet soll deine Landkarte denn abdecken, und wieviele Städte wirst du darstellen wollen?
Sicher ist Flash für so etwas sicher eine geeignete Lösung (das slicen und umsetzen in Photoshop/html hätte den Nachteil, dass man dabei nur von rechteckigen Bereichen ausgehen kann. je nach Umfang könnte das auch sehr/zu viele 'Schnippsel' bedeuten).

liontiger · 09.10.2009

AW: Interaktive Landkarte

sokie schrieb:
welches Gebiet soll deine Landkarte denn abdecken, und wieviele Städte wirst du darstellen wollen?
Sicher ist Flash für so etwas sicher eine geeignete Lösung (das slicen und umsetzen in Photoshop/html hätte den Nachteil, dass man dabei nur von rechteckigen Bereichen ausgehen kann. je nach Umfang könnte das auch sehr/zu viele 'Schnippsel' bedeuten).

In html gibt's nach wie vor die Möglichkeit Imagemaps anzulegen und darauf mit Polygonen zu arbeiten - ist soweit ich weiß auch nicht deprecated o.Ä. und würde erlauben die Grenzen genau zu setzen, nicht durch rechtecke

Shoki · 09.10.2009

AW: Interaktive Landkarte

Es würde hier um eine ganze Reihe von Städten gehen, wahrscheinlich sogar um eine sehr sehr lange Reihe von Städten. Es würde, so wie angesprochen, wahrscheinlich Sinn machen mit Flash zu arbeiten, um eine elegante, moderen Lösung, die auf Zoom basiert, zu finden.

Danke für alle antworten bis hierhin.

sokie · 09.10.2009

AW: Interaktive Landkarte

Da hast du dir ein bisschen was vorgenommen. Ob es dazu ein Tutorial gibt weiss ich so nicht.
Als ersten ansatz würde ich einen movieclip erstellen der im ersten Bild den Punkt hat der die Stadt symbolisiert und ein dynamisches Textfeld für den Namen, in weiterem/n Bild/ern ein dynamisches Textfeld, das du dann mit den weiteren Informationen befüllst, das dann onRollOver bzw onRelease anzeigen lässt. Möglicherweise wäre eine XML Datei zur Speicherung der Daten eine gute Sache.

Shoki · 09.10.2009

AW: Interaktive Landkarte

Ich habe vermutet, dass es doch etwas auf einen Schlag ist. Aber so kann ich verschiedene Grundfunktionen "nebenbei" erlernen.

Ich habe nicht aller verstanden, was Du geschrieben hast. Kennst Du ein Tut, dass das alles erklärt?

ionic84 · 13.10.2009

AW: Interaktive Landkarte

hier unter illustrator tutorials gabs doch neulich ein tut zum thema landkarten.
falls du illustrator hast kannst du hiermit relativ einfach eine beliebige karte in ein flashverstädnliches format bringen (import .ai als zb grafiken).

dann erstellst du eben aus der grafik deinen movieclips und deine gewünschten interaktionen.

habe schon selbst eine interaktive karte mittels flash realisiert und rate dir auch wie sokie das ganze gleich mit xml zu lösen, also die namen der städte und deren beschreibung zb. so:

<data>
<stadt name="xy" beschreibung="" />
...
</data>

hierzu findest du auch alles nötige hier auf der seite.

TomJay66 · 20.10.2009

AW: Interaktive Landkarte

Hallo Shoki!

Ich hab vor kurzem sowas in der Art gemacht. Am besten holst du dir eine Landkarte als .ai-Datei (gibt es bei Adobe zum downloaden, einfach mal danach googeln), die du dann ohne Problem in Flash importieren kannst.

Dann wandelst du jedes Land in einen eigenen Movieclip um, den du dann natürlich direkt ansprechen kannst, z. B. vergrößern, verkleinern, bewegen etc.

Wie ionic schon geschrieben hat, am einfachsten tust du dir mit XML-Dateien, wo du sämtliche Infos reinschreibst, die beim Klick auf den jeweiligen Städtenamen erscheinen sollen.

Ist alles keine Hexenwerk, aber schon ein gutes Stück Arbeit! Du packst das schon!

Hier mal der Link zu meiner Karte:

http://www.theconference.org/2009/conf_start/index.php?cont=pages/shops.htm

Ich denke mal, so etwa in der Art hast du dir das vorgestellt, oder?

Ditin · 20.10.2009

AW: Interaktive Landkarte

Hallo,

selber machen ist zwar besser um zu lernen aber man kann sich ja mal hier orientieren:
INTERACTIVE WORLD MAP - Utilities - ActiveDen

da gibt es noch einige Beispiele mehr auf der Seite

Mfg.

tomiboi · 20.10.2009

AW: Interaktive Landkarte

danke für den link, hat mir zumindest schon etwas weiter geholfen!

Shoki · 20.10.2009

AW: Interaktive Landkarte

Hi an Alle!

Zunächst einmal Danke für die Ratschläge.

TomJay: Die Karte ist wirklich der Hammer! Wenn ich irgendwie soetwas hinkriegen sollte, wäre das schon unglaublich toll ...

Aber mir scheint, dass man, um das so hinzukriegen, sehr viel in Flash wissen muss, oder?

Das Projekt, wofür ich die Karte gebraucht habe, wurde letzte Woche auf Eis gelegt, d.h. auf Anfang des kommenden Jahres verschoben. Ich möchte aber diese Karte hinkriegen. Kennt jemand ein Tut, dass ähnliches Schritt für Schritt erklären könnte?

TomJay66 · 21.10.2009

AW: Interaktive Landkarte

Hi Shoki!

Um so eine Karte erstellen zu können, muss man jetzt nicht unbedingt ein Guru in Flash sein. Es ist aber auf der anderen Seite unheimlich viel Programmierarbeit. Mit Bewegungstweenings wirst du da nicht sehr weit kommen, das musst du schon alles in ActionScript machen.

Aber auch das ist keine Hexerei.

Der Befehl in AS 2, um ein Movieclip zoomen zu können, ist eigentlich nicht so kompliziert:

PHP:

var einzoomen:Tween = new Tween(name_des_movieclip, "_xscale", Strong.easeOut, 10, 100, 2, true);

Um den Befehl mal im einzelnen aufzuschlüsseln:

Die ersten Anweisungen dürften klar sein. Nach dem "="-Zeichen deklarierst du in den Klammern das Movieclip, das geändert werden soll. In den Anführungszeichen steht der Wert bzw. die Eigenschaft, die geändert werden soll und anschließend die Art der Änderung (in diesem Fall soll das Movieclip auf der X-Achse skaliert werden). Die drei Zahlen benennen den Ausgangswert, den Endwert sowie die Zeit, in welcher die Änderung stattfinden soll.

Wichtig: Bevor du in ActionScript einen Tween-Befehl anwenden kannst, musst du erst die notwendigen Klassen importieren. Das erreichst du mit folgender Anweisung, die du als allererstes schreiben musst:

PHP:

import mx.transitions.Tween;
import mx.transitions.ease.*;

Experimentiere damit mal ein bissl herum.

Weiterhin solltest du nicht vergessen, dein zu änderndes Movieclip auch zu benennen. Sonst probierst du dir einen Wolf!

Ein Tut, in der die Karte erklärt wird, kenn ich jetzt eher nicht. Vielleicht kennt ja aber jemand hier im Forum solch ein Tutorial. Aber versuch dich mal an dem Befehl, den ich dir beschrieben habe. Damit solltest du eigentlich weiter kommen.