Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Panoramafotografie: Virtuelle Touren mit Pano2VR

Knotenbilder für Hotspot

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Knotenbilder sind kleine Bilder, die Pano2VR automatisch aus den Panoramen erzeugt und die man unter anderem auch als Vorschaubilder in einer Hotspot-Vorlage verwenden kann.

Transkript

Ich hätte nun gerne nicht nur eine Textinformation, wenn ich hier über einen Hotspot im Panorama gehe, sondern ich hätte auch gerne eine Bildinformation dazu. Und wir werden dieses Hotspot-Template, also diese Vorlage für diesen Hotspot jetzt noch ein bisschen erweitern in dieser Richtung. Und ich gehe wieder in den Skin Editor, und wir schauen uns das jetzt mal an. Und ich füge einfach eine Grafik ein, das soll der Hintergrund sein für ein Vorschaubild. Klicke da mal einfach irgendwo rein, denn das ist so ein Bubble, so ein rundes Ding, ich will nämlich ein rundes Vorschaubild haben, mal zur Abwechslung. Und dieses Bild, das nenne ich mal hs_bubble, weil es einfach so eine Bubble ist, und die sortiere ich mal in den Hotspot selber ein, und jetzt muss ich das Ding noch ein bisschen positionieren. Ich mache es mal so, dass dieses Bild oberhalb ist, dann geht das alles ein bisschen besser. Und ich zoome jetzt mal ein, sodass ich das richtig positionieren kann, ich mach das jetzt mal wirklich mit Pixel schieben, so ist es, wie ich es eigentlich geplant habe, dass es da mit dem gleichen Radius sozusagen unten rauskommt, wie so ein Schlüsselanhänger. Das ist jetzt ein Element, und jetzt mache ich Folgendes: Dieses Element, dem sollen jetzt noch ein paar andere Sachen untergeordnet sein. Ich werde jetzt unter anderem den Text auch unterordnen, damit der gemeinsam verschwindet. Und jetzt sage ich hier bei den Aktionen Maus betritt, Element zeigen, das ist dieses hier. Jetzt sage ich nicht mehr hstext, sondern ich sage hs_bubble. Das kopiere ich mir gleich, Copy, und hier mache ich das auch. Und jetzt schauen wir uns kurz an, das müsste jetzt eigentlich funktionieren, sodass wenn ich hier rübergehe, das Bildchen von dem Hotspot da drüberliegt, über den Bubble und das Bubble unten drunter weggeblendet wird mit samt dem Text, der dem Bubble hierarchisch untergeordnet ist. Und das schauen wir uns jetzt einmal an, ich speichere das mal, schließen und ausgeben. So, und jetzt ist es natürlich so, dass das funktioniert, aber am Anfang noch sichtbar ist, was natürlich klar ist, weil wir haben die Anfangssichtbarkeit natürlich noch nicht behandelt. Das heißt, wir müssen das Ding hier nehmen und sagen Aussehen, du bist immer von vornherein unsichtbar. So, das sollte jetzt passen. Was ich jetzt machen möchte, das ist ein relativ spannendes Ding, und zwar ich füge jetzt hier ein sogenanntes Node-Image ein. Das heißt, bei diesem Hotspot kann ich dafür sorgen, wenn ein Bild einem Hotspot untergeordnet ist, und dieses Bild ist vom Typ Node-Image oder Knotenbild, wie das in der deutschen Übersetzung der Oberfläche heißt, dann kann ich das da reinsortieren und das ist anfangs mal leer, aber in dem Moment, wo das dann ausgegeben wird das Ganze, wird dann ein sogenanntes Knotenbild generiert. Und das ist dann natürlich für jeden Hotspot einzeln und gibt natürlich immer das Bild wieder, was hinter diesem Hotspot liegt, also von dem Panorama natürlich. Und das nehmen wir uns jetzt mal vor, und das ist hier dieser Button, das Knotenbild. Und da sage ich jetzt mal Knotenbild hinzufügen, und ich klicke jetzt mal hier drauf und dieses Bild mache ich jetzt mal quadratisch für das Erste. Ich sage mal 100x100 Pixel, so, 100. Und das sortiere ich mir jetzt mal hier ein und ich mache es ein bisschen größer, ich markiere das mal hier von der Mitte weg, und dieses Node-Image, das werde ich hier auch dem Bubble unterordnen und dem sage ich mal hs_node_image und das mache ich ein bisschen größer, damit ich das etwas exakter positionieren kann, weil das wird nämlich dann später rund werden. Muss ich jetzt hier so machen, dass ich gucke, dass die Ecken überall so einigermaßen gleich sind, aber das werden wir dann sehen, ob es genau passt. Und dieses Bild habe ich jetzt hinzugefügt. Und bei diesem Knotenbild sehen wir jetzt, da gibt es jetzt einen Pull-Down-Menü Tourknoten, da sind alle Panoramen aufgelistet, die wir zur Verfügung haben. Ich lasse das aber offen und dadurch, dass ich es offen lasse wird erst beim Ausgeben der Tour, aus dem Panel Ausgabe werden dann die Bilder generiert und eingefügt. Und hier hätte ich jetzt ganz gerne eine Angular Map, und zwar einfach in der Startansicht, das ist dieses kugelförmige Bild, was eben auch kreisrund ist, und das wird hier automatisch als PNG-Datei eingefügt. Und das schauen wir uns jetzt mal an, ob das denn so funktioniert, wie wir uns das vorstellen. So, ich glaube, ich habe es nicht gespeichert, speichern, schließen und geben das mal aus, und voilà. Jetzt ist das das Café, das ist die Eingangshalle, und jetzt gehen wir mal hier rein und schauen wir mal, was hier kommt, da kommt das Stiegenhaus und hier das Café, die Eingangshalle, hierüber geht es zum Mineralienkabinett, da geht es in den Edelstein-Saal zu den Meteoriten. So, was wir jetzt noch haben ist, die Schrift ist uns noch abhandengekommen, das werden wir uns noch kurz anschauen, wo die denn geblieben ist. Das war der falsche Button, so, und hstext. Dieser Text hat natürlich einfach jetzt das Problem, dass er von Haus aus unsichtbar ist, und hier vorher von dem Original-Hotspot wurde der Text sichtbar gemacht, deswegen musste der unsichtbar sein, und hier haben wir den verwendet. Und der wird aber jetzt nicht mehr sichtbar, unsichtbar gemacht, weil ja der Hotspot selber nur das Bubble sichtbar, unsichtbar macht und wenn ich natürlich hier ein unsichtbares Element als Kind-Element habe, dann habe ich da natürlich nichts von, wenn das die ganze Zeit unsichtbar ist und nicht dezidiert sichtbar gemacht wird. Das sorgt ja hier die Bubble als Ganze dafür, und jetzt sollte das auch funktionieren, dass wir hier jetzt das Café haben, die Eingangshalle oder ähnliche. Da können wir von ausgehen, dass es bei den anderen auch funktioniert, Saurier, Meteoriten-Saal. Das soll jetzt mal nur ein Beispiel sein, das sitzt nicht ganz genau in der Mitte, vielleicht ein-zwei Pixel noch auf die Seite und ein bisschen größer darf es auch sein. Und das schauen wir uns jetzt noch an. Also einfach das noch ein bisschen manipulieren, so müsste es etwa mittig sein, Muss man jetzt ein bisschen nach Augenmaß machen, ansonsten müsste man das irgendwie anderweitig konstruieren und ein bisschen rumrechnen. Aber ich glaube, so passt das in etwa. Schließen, speichern und ausgeben. Es hängt ein bisschen runter, aber Sie wissen, wie es funktioniert. Also das war jetzt die Erweiterung eines Hotspots, ausgehend von den Standard-Hotspots, die einen solchen Skin beiliegen. Man kann das natürlich auch wirklich vom the Scratch beginnen, indem man einfach hier eine solche Hotspotvorlage mal diskret wirklich hinzufügt. Die hier unten, die kann man da drinnen lassen, die wird einfach nicht mehr gebraucht, weil standardmäßig eben diese hier angesprungen wird. Soviel also zum Thema Hotspots in Pano2VR ändern und erweitern und neu gestalten.

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!