Interaktive Landkarten mit FlashKartenspiele
Vektordaten und Mausaktionen
Interaktive Landkarten mit Flash
Obwohl Flash manchmal noch belächelt wird, gibt es einige Web-Anwendungen, die ohne die Macromedia-Technik nicht denkbar sind. Dazu zählen die berühmten Auto-Konfiguratoren, die oft auch eine Flash- und Java-Mischung sind. Außerdem gehören dazu Produktpräsentationen und Shops mit besonderen optischen Ansprüchen. Dabei ist weniger die grafische Gestaltung gemeint, sondern eher die Flexibilität: Umfärben per Drag and Drop ist zum Beispiel in DHTML ein ziemlicher Graus, in Flash aber völlig unproblematisch.
Eine andere Anwendung soll dieser Workshop zeigen: interaktive Straßen- und Landkarten. Auch hier ist Ziehen und Mausinteraktion sehr wichtig. Außerdem sind Karten der Prototyp von typischen Vektordaten. Ziel des Workshops ist ein interaktiver Restaurantführer. Er soll eine bestimmte Region oder einen Stadtteil in einer Landkarte mit den dort vorhanden Restaurants zeigen. Zu jedem Restaurant sind Detailinformationen per Mausklick verfügbar. Die Karte selbst soll zoombar sein, und der jeweilige Kartenausschnitt lässt sich schnell per Drag and Drop verschieben.
Vorbereitungen
Interaktive Landkarten mit Flash
Bevor Sie loslegen, benötigen Sie vernünftiges Kartenmaterial. Für das vorliegende Beispiel kommt eine Detailkarte der Region rund um die Münchener Theresienwiese ? dem Ort des Oktoberfests ? zum Einsatz. Die Karte stammt aus dem Fundus von 123 Map (www.123map.de). Das Besondere ist hier, dass 123 Map für beliebige deutsche Regionen Karten in drei Detailstufen als Illustrator-Dateien zur Verfügung stellt. Die Internet-Lizenz pro Karte kostet 19,95 Euro und die Karte lässt sich flexibel an die eigenen Bedürfnisse anpassen. Die im Beispiel verwendete Karte wurde von 123 Map zur Verfügung gestellt, ist aber nur für den Testgebrauch bestimmt.
Das Layout für den Restaurantführer entsteht in Adobe Illustrator. Anschließend werden die einzelnen Illustrator-Ebenen als SWF exportiert. Das Feintuning erfolgt dann in Flash. Sie finden diese Einzelteile und die Illustrator-Dateien zum Nachvollziehen auf der Heft-CD. Statt Illustrator können Sie allerdings selbstverständlich auch ein anderes Vektorgrafikprogramm wie Macromedia Freehand verwenden. Die Karte liegt zwar im Illustrator-Format AI vor, lässt sich aber in die meisten Vektorgrafikprogrammen importieren.
Navigation in der Karte
Interaktive Landkarten mit Flash
Das Layout bestimmt bereits die zukünftige Funktionalität: Das Herzstück des Restaurantführers ist die Karte. Sie soll in einem Rahmen erscheinen. Da die Karte vor allem beim Zoomen größer werden wird als der Rahmen, wird der sichtbare Teil in Flash von einer rechteckigen Maske begrenzt. Die Navigationselemente sind auf der linken Seite angeordnet: Oben wählen Sie mit drei Schaltflächen die verschiedenen Restaurant-Gattungen von asiatisch bis italienisch. Darunter finden Sie eine Miniaturansicht der Karte, hier Übersicht genannt. Sie erlaubt es, den aktiven Kartenausschnitt zu sehen und zu verschieben. Zum Verschieben des Kartenausschnitts dienen außerdem noch die acht Schaltflächen rund um die Hauptkarte. Um die Karte zu zoomen, kommt ein Schieberegler zum Einsatz. Das Zusammenspiel dieser vier Elemente ? Hauptkarte, Verschiebe-Schaltflächen, Übersicht und Zoom-Schieberegler ? macht zusammen die Kartennavigation aus.
Diese Art der Navigation ist natürlich nur eine Möglichkeit unter vielen. Sie können alternativ auch direkt die Karte per Drag and Drop verschiebbar machen. Oder Sie verwenden festgelegte Zoomstufen statt stufenlosem Zoom. Wichtig ist, dass Sie vor Arbeitsbeginn festlegen, was Sie genau möchten. In der Praxis spielen hier natürlich die Zielgruppe, Usability und auch die Veränderbarkeit eine große Rolle.
Zoomen per Schieberegler
Interaktive Landkarten mit Flash
Zum Zoomen kommt ein Schieberegler zum Einsatz. Zuerst benötigen Sie das Drag and Drop zum Ziehen des Reglers:
on (press) {
this.startDrag(false, 26, 404.4, 176, 404.4);
}
on (release, releaseOutside) {
this.stopDrag();
}
Die zugehörigen Ereignisse werden hier direkt dem Regler-Movieclip zugeordnet. Alternativ können Sie diese auch als Event-Handler (onPress beziehungsweise onRelease) in einem Schlüsselbild einsetzen.
Nach dem Drag and Drop müssen Sie feststellen, wie die jeweils aktuelle Position des Reglers ist. Sie ergibt den Zoomfaktor. Damit die Position konstant überprüft wird, kommt das Movieclip-Ereignis enterFrame zum Einsatz, das bei jedem Bildwechsel eintritt. Zuerst berechnen Sie die Skalierung für die Karte:
onClipEvent(enterFrame) {
_root.skalierung = 1 – ((176 – this._x) / 150);
176 ist die Maximalposition des Reglers (176 Pixel), this._x steht für seine aktuelle Position. Da der Regler einen Spielraum von 150 Pixel hat, wird durch diesen Wert geteilt. Es ergibt sich eine Skalierung zwischen 0 und 1. 0 bedeutet ohne Vergrößerung, 1 bedeutet 100 Prozent größer. Mit einem zusätzlichen Faktor könnten Sie auch größere Zoomstufen erreichen. Nun ist der Zoomfaktor berechnet. In den nächsten Zeilen führen Sie die Skalierung aus. Die Variablen karte_b und karte_h enthalten die ursprüngliche Breite und Höhe der Karte.
_root.karte_mc._width = _root.karte_b + _root.karte_b * _root.skalierung; _root.karte_mc._height = _root.karte_h + _root.karte_h * _root.skalierung;
Übersicht anpassen
Interaktive Landkarten mit Flash
Bisher wird nur die Karte selbst gezoomt. Nun muss auch das rote Rechteck in der Miniatur-Übersicht angepasst werden. Es wird also entsprechend verkleinert:
_root.zoom_uebersicht_mc._width = (_root.zoom_b / 2) + (_root.zoom_b / 2 )* (1 – _root.skalierung);
_root.zoom_uebersicht_mc._height = (_root.zoom_h / 2) + (_root.zoom_h / 2) * (1 – _root.skalierung);
Beim Zoomen des Rechtecks ändert sich auch die Randbreite. Um das zu verhindern, wäre ein wenig mehr Aufwand nötig. Sie dürften das Rechteck nicht skalieren, sondern müssten es jeweils mit den Zeichenfunktionen von Flash neu zeichnen. Hier gilt es, zwischen Performance, Optik und Aufwand abzuwägen.
Zum Schluss benötigen Sie eine Überprüfung, damit das rote Rechteck mit dem aktuellen Kartenausschnitt nicht bis außerhalb der Karte skaliert werden kann. Hier beispielhaft der Code für rechts und links. Oben und unten funktionieren analog:
if (_root.zoom_uebersicht_mc._width + _root.zoom_uebersicht_mc._x> 162) {
_root.zoom_uebersicht_mc._x = 162 – _root.zoom_uebersicht_mc._width;
}
if (_root.zoom_uebersicht_mc._x 50) {
_root.zoom_uebersicht_mc._x = 50;
}
Kartenausschnitt verschieben
Interaktive Landkarten mit Flash
Nach dem Zoomen kommt das Verschieben in der Übersicht an die Reihe. Hierzu dient das rote Rechteck. Es lässt sich innerhalb der Miniaturkarte verschieben:
on (press) {
this.startDrag(false, _root.zoom_re, _root.zoom_ob, _root.zoom_li, _root.zoom_un);
} on (release, releaseOutside) {
this.stopDrag();
}
Und nun wird es ein wenig komplizierter: Sie müssen die Begrenzung der Box, in der das rote Rechteck gezogen werden kann, je nach Skalierung dynamisch berechnen:
onClipEvent(enterFrame) {
_root.zoom_li = _root.zoom_x + 0.5 * _root.zoom_b * _root.skalierung; _root.zoom_un = _root.zoom_y + 26 + 0.5 * _root.zoom_h * _root.skalierung;
Im enterFrame-Ereignis setzen Sie die Koordinaten der Hauptkarte je nach Position des roten Rechtecks.
_root.karte_mc._x = 206 – (this._x – 50) * _root.karte_mc._width / (3 * 109); _root.karte_
mc._y = 43 – (this._y – 277) * _root.karte_mc._height / 108;
}
Das gezeigte Beispiel setzt auf zwei enterFrame-Ereignisse, eines für den Schieberegler und eines für das rote Rechteck. Dies ist nicht unbedingt erforderlich. Sie können auch alle Einstellungen in einem sammeln. Ebenfalls keine Pflicht ist die absolute Adressierung der Movieclips.
Verschieben: Himmelsrichtungen
Interaktive Landkarten mit Flash
Die acht Schaltflächen rund um die Karte sollen ebenfalls zum Verschieben der Karte dienen. Da es sich um acht Stück handelt, vereinfachen Event-Handler und eine zentrale Funktion die Handhabung.
Für jede Schaltfläche rufen Sie die Funktion verschieben() auf. Die Parameter regeln, ob vertikal und/oder horizontal verschoben wird. Hier beispielhaft der Code für nach links:
this.li_btn.onRelease = function():Void {
verschieben(-1, 0);
}
Verschoben wird nicht die Karte selbst, sondern das Übersichts-Rechteck. Das hat den Vorteil, dass gleich mit überprüft wird, ob der Rand der Karte schon erreicht wird:
function verschieben(x, y):Void {
_root.zoom_uebersicht_mc._x += x * 5;
_root.zoom_uebersicht_mc._y += y * 5;
}
Restaurants
Interaktive Landkarten mit Flash
Die Restaurants landen in der vorliegenden Anwendung direkt im Movieclip mit der Karte. Natürlich ließen sie sich auch dynamisch generieren, wenn zum Beispiel alle Restaurants aus einer Datenbank stammen. Hier sollen nur die Beschreibungsdaten zum jeweiligen Restaurant aus einer externen Quelle geholt werden. Der Einfachheit halber kommt eine Textdatei im URL-kodierten Format zum Einsatz. Eine Übersicht über die URL-Kodierung erhalten Sie unter www.macromedia.com/cfusion/knowledgebase /index.cfm?id=tn_14143.
Die hier verwendeten Daten sind fiktiv, die genannten Lokalitäten existieren nicht. Hier ein Ausschnitt, der die Daten für eines der Restaurants zeigt:
&name1=Saigon&bild1=asia1.jpg&typ1=vietnamesisch&empfehlung1=3&adresse1=Rufen+Sie+doch+mal+an%0A089+-+SUSHISERVICE%0Awww.sushisaigon.net&bemerkung1=Super+lecker%2C+von+Frühlingsrolle+bis+Sushi.&
Die Daten werden mit dem LoadVars-Objekt im ersten Schlüsselbild des Hauptfilms geladen:
var laden:LoadVars = new LoadVars();
laden.load(“restaurants.txt”);
Das Popup mit diesen Informationen wird eingeblendet, wenn der Nutzer auf die Schaltfläche des Restaurants klickt. Dafür zuständig ist die Funktion popup(). Anhand der als Parameter übergebenen ID weiß die Funktion, welche Daten sie verwenden muss. Auch das passende Bild wird so geladen:
function popup(id):Void {
_root.attachMovie(“popup_mc”, “popup_neu_mc”, 1); _root.popup_neu_mc._x = 227;
_root.popup_neu_mc._y = 62;
_root.popup_neu_mc.name = _root.laden[“name” + id]; _root.popup_neu_mc.typ = _root.laden[“typ” + id]; _root.popup_neu_mc.bild_mc.loadMovie (_root.laden[“bild” + id]);
…
}
Das Popup wird mit attachMovie() dynamisch aus der Bibliothek geladen. Es enthält links oben eine Schaltfläche, um es wieder zu schließen. Schließen bedeutet hier einfach, den Movieclip zu entladen:
on (release) {
this.unloadMovie();
}
Selektion
Interaktive Landkarten mit Flash
Zu guter Letzt werfen Sie einen Blick auf die drei Schaltflächen für die verschiedenen Restaurant-Gattungen asiatisch, mexikanisch und italienisch.
Da es in der Beispielanwendung nur jeweils ein Restaurant von jeder Gattung gibt, ist es natürlich sehr einfach, es ein- und auszuschalten: Wenn das Symbol sichtbar ist, wird es auf Knopfdruck ausgeblendet. Gleichzeitig wechseln Sie die Schaltfläche von farbig auf grau für den inaktiven Zustand:
on (release) {
if (_root.karte_mc.asia1_mc._visible) {
_root.karte_mc.asia1_mc._visible = false; _root.asia_schalt_mc.attachMovie(“asia_inaktiv”, “asia_schalt”, 4);
}
Bei den drei Schaltflächen handelt es sich im Flash-Sinne nicht um Buttons, sondern um Movieclips. Warum? Schaltflächen erlauben zwar unterschiedliche optische Zustände, für einen Actionscript-bedingten Zustandswechsel kommen diese aber nicht in Frage. Als Alternative wird hier der Movieclip ausgetauscht. Wie meist in Flash gibt es allerdings auch noch andere Wege: Sie können zum Beispiel beide Zustände in unterschiedliche Schlüsselbilder auf der Zeitleiste des Movieclips legen und dann einfach von einem zum anderen Bild springen.
Im else-Fall, wenn also das asiatische Restaurant nicht sichtbar ist, wird es beim Klick auf das Symbol eingeblendet und die Schaltfläche wieder bunt:
else {
_root.karte_mc.asia1_mc._visible = true; _root.asia_schalt_mc.attachMovie(“asia_aktiv”, “asia_schalt”, 4);
}
}
Diese einfache Logik lässt sich natürlich auch auf mehrere Restaurants ausweiten. Sie können diese entweder mit Hilfe einer Schleife durchgehen, oder Sie verwenden für jede Gattung einen übergeordneten Movieclip, den Sie ein- und ausblenden.
Wie gewohnt finden Sie das fertige Beispiel und alle benötigten Dateien auf der Heft-CD.
Fazit
Interaktive Landkarten mit Flash
Die gezeigte Anwendung ist nur ein Anfang. Denkbar sind Variationen und Ausgestaltungen jeder Art. Beispielsweise wäre es möglich, Karten dynamisch zu laden und zu wechseln. Auch Optik und Bedienelemente sind sicherlich nur eine von tausend möglichen Varianten. Ihrer Fantasie sind also keine Grenzen gesetzt.
Alle Beispiele aus dem Workshop finden Sie auf der Heft-CD und im Internet unter listings.internet-pro.de.