[haltestelle.ch] dyn. lageplan minitut.

[cmike]

hi @ all

durch eine anfrage aus diesem thread habe ich beschlossen ein minitut zu dem von mir kreierten lageplan, der hier bereitsteht, anzufertigen.

Vorwort
-------------------------------------------------------------
da ich leider nicht die zeit habe, ein richtiges tutorial auf die beine zu stellen müsst ihr mit diesem minitut vorlieb nehmen. ich hoffe, dass ich einem etwas erfahreneren flasher damit die zündende idee zur realisation bieten kann. ich kann jedoch nicht auf jede einzelheit eingehen, dies würde den rahmen an dieser stelle sprengen, was schon ein wenig know-how im umgang mit flash voraussetzt.

1. Schritt
-------------------------------------------------------------
Ihr braucht die karte an sich! und zwar sollte dies in jedem fall eine vektorgrafik sein, da es sonst zu schwer (dateigrösse) und zudem beim zoomen verpixelt wird. also am besten nehmt ihr einen gewünschten kartenausschnitt als jpg grafik oder so in den illustrator und zeichnet die gewünschten strassen, routen usw nach. (man kann diesen schritt evtl auch mit automatisierten vektorisierungsalgorythmen überspringen, aber das ergebnis wird in jedem fall abfallen).

2. Schritt
-------------------------------------------------------------
macht ein neues flash file auf und importiert die vektorisierte karte auf die bühne. macht eine neue ebene und definiert diese als maske. nun könnt ihr eine maske so gross wie den gewünschten kartenausschnitt ziehen. zurück auf der ersten ebene mit der karte definiert ihr diese als movieclip mit dem namen "map", und gleich nochmals als "map_holder", so dass das "map" movieclip sich im "map_holder" befindet. anschliessend zentriert ihr "map" auf der bühne im "map_holder" (dieser schritt ist sehr wichtig, da man so immer auf den im moment angezeigten mittelpunkt innerhalb der maske zoomen kann, was die navigation erheblich vereinfacht! => man kann dieses problem auch per AS lösen, ich finde aber dass dieses workaround sehr viel einfacher ist).

3. Schritt
-------------------------------------------------------------
jetzt müsst ihr nur noch ein lehres movieclip mit 3 keyframes erstellen und dieses im root platzieren. nachfolgend platziert ihr folgende codestücke in die einzelnen keyframes:

FRAME 1

PHP-Code:


// INITIALISATION PARAMETERS AND COORDINATES

zoom = 0;
zoomx = 0;
zoomy = 0;

timer = 1;

map_mode = "new";
map_lock = false;

map_org_width  = _parent.map_holder._width;

map_new_width  = 2800;
map_new_height = Math.round(_parent.map_holder._height/map_org_width*map_new_width);
map_new_x       = -1280;
map_new_y      = -2500;

map_bus_width  = 2268;
map_bus_height = Math.round(_parent.map_holder._height/map_org_width*map_bus_width);
map_bus_x       = -1538;
map_bus_y      = -2250;

map_car_width  = 1439;
map_car_height = Math.round(_parent.map_holder._height/map_org_width*map_car_width);
map_car_x       = -781;
map_car_y      = -2227;

_parent.map_holder._width  = 300;
_parent.map_holder._height = Math.round(_parent.map_holder._height/map_org_width*_parent.map_holder._width);;
_parent.map_holder.map._x  = -1300;
_parent.map_holder.map._y  = -2600; 


FRAME 2

PHP-Code:


if (map_lock == false && timer < 20) {
    if (zoom == 1 && _parent.map_holder._width < 5000) {
        zoomx += _parent.map_holder._width/10;
        zoomy += _parent.map_holder._width/10/_parent.map_holder._width*_parent.map_holder._height;
        timer  = 0;
    } else if (zoom == -1 && _parent.map_holder._width > 400) {
        zoomx -= _parent.map_holder._width/10;
        zoomy -= _parent.map_holder._width/10/_parent.map_holder._width*_parent.map_holder._height;
        timer  = 0;
    }
    _parent.map_holder._width  = (_parent.map_holder._width + eval("map_" add map_mode add "_width") + zoomx)/2;
    _parent.map_holder._height = (_parent.map_holder._height + eval("map_" add map_mode add "_height") + zoomy)/2;
    _parent.map_holder.map._x  = (_parent.map_holder.map._x + eval("map_" add map_mode add "_x"))/2;
    _parent.map_holder.map._y  = (_parent.map_holder.map._y + eval("map_" add map_mode add "_y"))/2;
    timer++;
} 


FRAME 3

PHP-Code:


gotoAndPlay(3); 


nun sollte es bereits funktionieren!

kurze erklärung:

im ersten frame setzt ihr verschiedene parameter wie koordinaten und zoom fest.

im 2. frame wird die zoom-engine angewendet.

im 3. frame seht ihr den loop zurück zum 2. frame...


zu beachten
-------------------------------------------------------------
leider hat mir die zeit gefehlt, das dargestellte beispiel zu testen. ich weiss nicht, ob der oben angezeigte code mit dem reduzierten aufbau-beispiel funktioniert. bitte teilt mir mit, wenn ihr solche fehler entdeckt!

heute würde ich besonders den aufbau der engine nicht mehr mit dem objekt sondern mit einem setinterval und einer funktion aufbauen, da dies im späteren verlauf viel mehr spielraum lässt und flexibler im aufbau ist.

wie ich oben bereits geschildert habe, versuche ich hiermit einigen von euch einen möglichen weg zur lösung aufzuzeigen, entschuldige mich hiermit aber auch gleich wieder für die fehlenden weiterführenden details und hilfestellungen! hoffe, dass es trotzdem jemanden was bringt! und falls jemand zeit hat, so fühlt euch frei, diesen thread noch weiter auszubauen!!

cheers!!

mike

[johanness]

Danke!!

Klingt alles logisch. Doch wie sieht es mit Buttons aus?

[Katze]

WICHTIG!!!

Zitat von cmike

FRAME 3

PHP-Code:


gotoAndPlay(2); 


[d-signs]

hey cmike,

könntest du den link aktualisieren...sehe leider das beispiel nicht mehr ...

viele dank und griessli us basel, dan

[Beisser]

@ d-signs: Hier der Link: Link zu Karte

Das ist ja wirklich sehr fein!!
Ich schäme mich fast hier noch einen Verbesserungsvorschlag zu machen: die Textboxen, die aufgehen wenn man auf das Auto oder den Zug klickt wollte ich wieder schließen, aber das ging nicht.

Gruß,
Beisser