Panoramafotografie: Virtuelle Touren mit Pano2VR

Grundriss aus- und einblenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Beispiel des Schließ-Buttons demonstriert in diesem Video ebenfalls die Detailarbeit am interaktiven Verhalten von Elementen. Hierbei kann man vorgefertigte Logic Blocks wiederverwenden.

Transkript

In diesem Video möchte ich nun noch den Button ergänzen, der dann den Plan wieder einblendet, nachdem er ausgeblendet worden ist. Und dazu klicke ich jetzt mal daneben, weil dieses Element, was jetzt kommt, das platziere ich zunächst einmal irgendwo, indem ich einfach hier wieder ein Bild oder ich nehme jetzt einfach mal den Button selber und klick hier drauf und sage: plan_open_normal und nehme das mal als erstes. Und dieses Element, da füge ich gleich mal das zweite ein, beziehungsweise ich sage direkt, ich gebe die anderen Bilder noch ein für den Button, also das einfach nur ganz leicht heller, unterscheidet sich kaum, man erahnt es gerade hier. Und das soll jetzt der Button sein, der heißt einfach plan_open und zwar fürs Erdgeschoss. So, das ist das Eine und jetzt kopiere ich das einfach und sage Bearbeiten, Einfügen, dann wird es nämlich einfach darunter eingefügt. Und dann gibt es das zweite, das ist das plan_open_OG, dort ändere ich die Bilder und zwar sage ich hier plan_normal, das ist der obere und die anderen beiden ist plan_open_hi, das hier und das hier, so die sind alle relativ schnell zusammengeklickt, die Sachen. Beide werden jetzt markiert und kommen wieder in einen Container rein und der Container heißt klarerweise plan_open. Und den hänge ich gleich mal an der rechten unteren Ecke an und schieb das Ganze mal hier untenhin, und werde das jetzt noch ein bisschen feintunen, indem ich hier wieder mit Command+'+' ein bisschen rauf und runter scrolle. So, jetzt schiebe ich das mal so hin, dass das hier genau rausschaut und hier dass es bündig ist mit dem Absatz, so das war's schon. Und jetzt kann ich wieder ziemlich weitermachen, wie wir das schon kennen mittlerweile und dort sagen, ich kopiere mir von plan_close beim Aussehen, Sichtbarkeit, das ist jetzt das Erdgeschoss kopiere mir das für den roten Teil, plan_open, Sichtbar, Einfügen und hier mache ich das auch wieder so, damit alles seine Ordnung hat, dass der rote oben ist und der andere unten ist. Wichtig ist wieder unsichtbar machen standardmäßig, den auch unsichtbar machen und das hole ich mir jetzt von dem gelben oder von dem Plan hier, den Logikblock für die Sichtbarkeit kopieren vom gelben Plan und hier füge ich das bei der Sichtbarkeit wieder ein, und jetzt sollte eigentlich dieses Ding vernünftig funktionieren. Der ganze Block ist vorderhand mal unsichtbar, ich lass das jetzt aber nochmal und kontrolliere erstmal, ob das so weit funktioniert. So, da unten ist er, der Button funktioniert, in Ordnung, und es schaltet sich auch schon um, wie es gehört und wenn ich jetzt ins Erdgeschoss zurückgehe, sollte eigentlich auch wieder der rote Open-Button drin sein, so. Das heißt, das funktioniert nun mal und jetzt geht es darum, das Ganze mit Funktion zu füllen. Das ist aber nicht schwer. Wir machen Folgendes, zunächst einmal ist plan_open grundsätzlich unsichtbar, weil der Plan soll am Anfang offen sein und dieser Button soll erst erscheinen, nachdem ich den Container ausgeblendet habe. Jetzt sagen wir zunächst einmal plan_close, das heißt, dieser Button hier, der die Karte ausblenden soll, der soll was machen. Was soll der machen, der soll den gesamten plan_container einfach nach unten schieben. Und das ist jetzt Folgendes, da sage ich mal als erstes ein Mausklick, dann hätte ich gerne eine Änderung der Position, bei der Position gibt es verschiedene Möglichkeiten, ich kann das schlagartig auf eine bestimmte Position setzen, ich kann es um einen bestimmten Betrag ändern, ich kann sie aber auch ändern und da wir hier am unteren Ende sind und ich habe mir gemerkt, der Plan ist 188 Pixel hoch. Das heißt, wenn ich das auf der Y-Achse, das heißt, um 200 Pixel nach unten schiebe, dann sollte das reichen. Die Aktion gilt jetzt hier für plan_close, was unten rausgeschoben wird, ist plan_container, das heißt, ich kann wieder entweder plan_container angeben oder einfach nur parent, das ist das übergeordnete Element. Das sollte schon reichen, plan_close bekommt noch einen Handzeiger, damit das auch wirklich funktioniert und das nächste, was ich gerne hätte, ist, dass genau das Gegenstück dazu, und das kopiere ich mir jetzt einfach, dann ist es nämlich total simpel, das Gegenstück dazu soll nämlich das plan_open machen. plan_open kriegt auch einen Handzeiger nebenbei. Hier füge ich das jetzt ein und jetzt mache ich genau das Gegenstück dazu, bei einem Mausklick auf plan_open soll sich dieser plan_container Das heißt, hier wieder auf seine ursprüngliche Position, es wäre 0. Das geht nämlich von der ursprünglichen Position aus. Jetzt muss man aber aufpassen. parent geht nicht, weil dieses Ding kann ich ja nicht in den plan_container rein machen, sondern es muss separat sein, weil das muss ja auch sichtbar sein, wenn der plan_container Das heißt, die haben nichts miteinander zu tun, die steuern sich zwar gegenseitig, aber sie gehören nicht zum gleichen Eltern-Element. Das heißt, hier muss ich den plan_container wirklich dezidiert aufrufen, da ist er. Und die Elementposition geht dann wieder auf die Ursprungsposition zurück, so das ist das eine. Und jetzt machen wir das gleich fertig. Sobald ich hier draufklicke, hat das Ding seine Schuldigkeit getan und ich sage Mausklick, und sag einfach Sichbarkeit, und das plan_open soll einfach direkt verschwinden. Und das wird verborgen, so Element verbergen. So, das ist mein Skin Editor gerade verschwunden, weil das ist nämlich ein eigenes Fenster, das passiert hier und da bei Pano2VR, aber egal, wenn ich das gleich bestätige, sollte der wiederkommen. Und eigentlich muss das plan_open Sind wir wieder da, da steht es wieder und gleichzeitig muss ich noch dafür sorgen, wenn ich den Plan schließe, dann ist es umgekehrt auch so, dann soll das Mause-Element, Sichtbarkeit-Element zeigen, dann soll das plan_open erscheinen, denn wenn ich es zumache, möchte ich ja ganz gerne den Button wiedersehen. So, das müsste jetzt eigentlich mal reichen, gucken wir, ob wir nichts vergessen haben, aber wir probieren's jetzt einfach mal aus und schauen, ob das denn so funktioniert. Ich speichere das mal und schließe das, und hoffe, dass kein Flüchtigkeitsfehler drin ist, und sag mal ausspielen, so. Was schon mal gut ist, der Button unten ist weg. Ich klicke jetzt hier drauf, dann schiebt sich das Ding runter und der Button erscheint. So, jetzt mache ich mal Folgendes, ich springe hier oben ins Café und dann sollte hier auch der entsprechende Button gelb sein. So, jetzt klicke ich hier drauf, dann verschwindet er selber und fertig, Karte wieder rein, voilà. Das heißt, das funktioniert. Probieren wir es noch aus, dieses Mal hier und dann springt der Button wieder an und wenn ich hier runtergehe, ist er wieder rot, und blendet wieder ein, also genau so, wie ich mir das vorgestellt hab. Das heißt, hier kann man also im Skin Editor relativ angenehm und ziemlich einfach, nur mit Klicken und vor allen Dingen mit diesen Logikblocks. Ich mag die Dinger ja mittlerweile echt sehr gerne, damit kann man wirklich schöne Sachen zaubern, ohne jetzt irgendwie coden zu müssen, weil das sind ja alles Bedingungen mit If/Then, wenn man das programmieren will und so weiter. Und das Schöne ist, dass man das alles auf einer relativ anschaulichen Ebene zusammenklicken kann, diese Bedingungen, und kann dann einfach wirklich solche Interface-Elemente quer über das ganze Projekt einfach miteinander interagieren lassen. Die haben alle Namen, deswegen ist auch die Eindeutigkeit wichtig, dass halt die richtigen Elemente adressiert werden. Und hier sieht man jetzt, wie sich so schön langsam unser Interface entwickelt, unsere Benutzeroberfläche, das Skin und dass wir da wirklich ein paar ganz lustige, interaktive Geschichten einbauen können. Soviel mal zu den Interaktionen rund um die Map selber, später müssen wir die natürlich dann noch mit den Panorama Hotspots füllen, den sogenannten Mapspots, aber das schauen wir uns später an.

Panoramafotografie: Virtuelle Touren mit Pano2VR

Lernen Sie, wie Sie mit Pano2VR mehrere Panoramen zu einer interaktiven, begehbaren Besichtigungstour zusammenstellen und für das Web ausgeben.

9 Std. 51 min (103 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!