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

Elemente einfügen, positionieren und konfigurieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Skin Editor baut auf Elementen auf, die in eine Bildfläche, das "Canvas", eingefügt werden. Lernen Sie hier den grundsätzlichen Ablauf kennen.

Transkript

Die Skins von Pano2VR, die kann man verschieden organisieren und auch damit arbeiten. Ich mache es oft so, dass ich von einem bestehenden Skin ausgehe, also hier aus dieser Auswahl etwas nehmen und das dann woanders weiterbaue. Und man kann aber auch mit einem komplett neuen Skin anfangen. Und ich gebe jetzt mal gar keinen Skin an, und wenn ich dann den Skin-Editor aufmache, bekomme ich einfach ein leeres Fenster, und das kann ich mir auch abspeichern. Der Skin-Editor hat seinen eigenen Speichern-Dialog, Speichern als und ich mache das jetzt mal so, dass ich den hier in mein Verzeichnis reingebe, und nenne den einfach mal my_skin und schmeiße den mal hier dazu. Und wenn ich den schließe, dann wird er hier erscheinen, und zwar vorne mit einem Platzhalter. $d ist das Verzeichnis, d für Directory, indem diese Datei, also hier meine Pano2VR-Datei sich befindet. Das heißt, wenn wir uns das jetzt hier kurz in der Bridge anschauen beziehungsweise Finder Explorer ganz egal, ich benutze halt nur die Adobe Bridge einfach der übersichtlichkeitshalber, weil man die Dateien besser sehen kann. Hier ist jetzt meine Skin-Datei, die gehört jetzt sozusagen zu dem Projekt dazu. Ich mache das mir ganz gerne so, dass die dann beim Projekt dabei ist, dann habe ich alles beieinander. Und man kann die natürlich auch in den Vorlagen-Ordner schmeißen, dann ist sie generell in diesem Pull-Down-Menü für alle, auch für künftige Dateien greifbar. So, wenn ich die öffne, dann habe ich jetzt einfach eine leere Datei. Standardmäßig ist die Größe immer 640, 480. Das ist aber nur bedingt von Interesse, weil das Ganze so angelegt ist, dass ich das immer der Breite und der Höhe des Fensters anpassen kann, da werden wir noch drauf zu sprechen kommen. So, wir haben jetzt hier eine leere Datei und ich habe jetzt mal vor, etwas ganz simples zu bauen. Es soll einfach eine Textbox erscheinen über dem Panorama, da steht ein bisschen Text drin und diese Textbox soll man mit einem kleinen Schließ-Button wieder verschwinden lassen können. Keine besonders großartige Aufgabe, aber sehr gut geeignet, um uns ein bisschen vertraut zu machen mit dem, was dieses Skin kann und wie es grundlegend funktioniert. Deswegen möchte ich dieses einfache Beispiel jetzt ein bisschen im Detail machen, damit man grundsätzlich diese Herangehensweise verstanden wird. So, ich gebe ein Element in diese Zeichenfläche hier in der Mitte. Hier oben sind diese ganzen zur Verfügung stehenden Elemente aufgelistet, das ist der Container, das sind einfach Rechtecke, Textbox, hier kann man Bilder hinzufügen, Schaltflächen, hier kann man Grafik in Form von Vektorgrafik im SVG-Dateien reinbauen. Die haben den Vorteil gegenüber Pixelgrafik, dass sie skalierbar sind, das heißt, die sind immer scharf, egal, wie groß der Bildschirm ist, auch auf dem Smartphone, iPad, was auch immer, Tablet, Desktop. Und eine sehr praktische Geschichte: Hier kann man noch mit Flash arbeiten, das ist aber hier ausgegraut, weil wir ein HTML5-Projekt haben. Und hier gibt es die Möglichkeit ein externes Bild oder eine externe SWF-Grafik einzubauen. Hier gibt es ein sogenanntes Knotenbild, das ignoriere ich jetzt mal, das ist einfach später nur interessant, wenn wir eine virtuelle Tour bauen. Hier sind noch ein paar fortgeschrittene Elemente, die ich im Moment mal noch außen vor lasse, weil die meisten von denen nur Rolle spielen, wenn es um virtuelle Touren gehen. Hier oben sind noch ein paar Bereiche, eine Vorschau, Farbwähler und die sogenannten Komponenten. Da komme ich aber später erst drauf zu sprechen, das macht jetzt noch keinen Sinn. Ich gehe mal her und klicke mal hier auf diesem Button und zeichne mal einfach eine Box hier rein. So, das ist eine weiße Fläche, die wird als Rectangle1 bezeichnet. Und hier kann man das benennen, entweder mit einem Doppelklick hier, indem man einfach mal sagt Box. Es ist egal, ob man es hier macht oder hier macht. Und hier hatten wir dann die ganzen Bemaßungen, welche Größe hat das, und welche Position hat das Ganze, von wo wird die Position gemessen beziehungsweise woran wird sie ausgerichtet. Und hier können wir in der Regel Abmessungen in Pixel und Prozent angeben. Prozent hat nämlich den Vorteil, dass es ziemlich gut ist für elastische Layouts, wie sich unterschiedliche Bildschirme von Desktop, Smartphone oder unterschiedliche Browserfenster-Größen anpasst. Sehr feine Geschichte beim Aussehen. Können wir jetzt bestimmen, ob das Ding sichtbar oder unsichtbar ist zunächst, wir können das skalieren von der Große ausgehend, die wir da oben haben, wir können die Deckkraft verändern, das halbtransparent machen, wir können sagen, ob der Cursor dann ein Finger wird, wenn er darüber kommt oder das einfach so bleibt und wir können hier den Hintergrund aktivieren und einen Rahmen machen. Und ich mache jetzt mal einen zwei-pixelbreiten Rahmen und den Rahmen mache ich mal Weiß und den Hintergrund mache ich mal Schwarz, und dann sehen wir gleich diesen Farbwähler. Und den Hintergrund mache ich mal teiltransparent. Der Farbwähler ist ziemlich angelehnt an den Systemfarbwähler von Windows, aber man findet sich da relativ schnell zurecht. Das ist mehr oder weniger selbsterklärend. Jetzt mache ich aber hier mal... Bei Alpha stelle ich 180 ein. 0 ist komplett durchsichtig, 255 ist komplett undurchsichtig und jetzt sage ich mal, es wird jetzt so halbtransparent. Man sieht auch das hinten das Raster durchscheint. Man kann für den Rahmen noch runde Ecken angeben, das mache ich mal, schaut noch halbwegs hübsch aus, machen wir 10 Pixel, und gebe das jetzt hier mal hier in die Mitte, und jetzt schauen wir uns das mal an, Wie sich das verhält. Ich füge gleich noch mal ein paar mehr Elemente hinzu, nämlich eine Textbox, so, und die ziehe ich mir jetzt auf, die soll ein bisschen so ungefähr so groß sein, ich mache es mal eben jetzt gerad bewusst ein bisschen außerhalb und dann schiebe ich die hier rein, und bei der Textbox sage ich einmal, wenn ich die aktiviere, den nenne ich einfach jetzt mal nur Text, so, und die Größe passt mir mal und alles andere lasse ich so. Und ich sage mal, der Hintergrund wird weg, dafür wird der Text Weiß und der Text selber, da kann ich jetzt hier einfach das Textfeld ein bisschen größer machen und da schreibe ich jetzt mal irgendwas rein: das soll Text sein, und das kopiere ich mir ein paar Mal, damit da ein bisschen mehr Fleisch reinkommt, und jetzt sage ich mal hier, der Text soll Weiß sein. Und der Text soll automatisch umgebrochen werden, und das soll mal reichen und der Text soll linksbündig sein. Also das ist alles relativ selbsterklärend und der Text bekommt keinen Rand, sodass der praktisch jetzt in dieser Box da freisteht. Jetzt kann man das noch ein bisschen skalieren das Ganze und hier ein bisschen anpassen. So, das wäre mal ein Textelement. Das liegt da drüber, es wird wie in Photoshop, von oben nach unten geschaut. Jetzt möchte ich noch eine Grafik einfügen. Und da nehme ich jetzt mal kein Pixelbild, sondern ich nehme mal eine SVG-Grafik, klicke hier drauf und sage mal skin_editor grafik und nehme mal meinen close-Button, so. Und das Ding, das packe ich jetzt mal hier oben in die Ecke, weil das soll dann meine Textbox schließen, das nenne ich mal close, so, und dann ist das alles selbsterklärend, und das SVG-Bild, da schreibe ich jetzt mal rein, was ich gerne hätte, wie sich das verhält. Und das interessante ist, Schaltflächen und ähnliche Dinge, die haben einen Normalzustand, das steht dann hier unter Normal, dann gibt es Maus über und Maus ausgewählt. Das heißt, wenn die Maus hier drüberschwebt, kann ich andere Grafiken nehmen, und wenn ich draufklicke Ausgewählt, kann ich auch noch eine dritte Grafik nehmen. Hier beim Maus über, sage ich jetzt mal, da nehme ich jetzt mal die andere Grafik, die dazugehört, das ist diese close_over. Und die beiden, die sind ganz leicht unterschiedlich. Man sieht das dann, wenn man mit der Maus drüberfährt. Und hier hätte ich ganz gerne jetzt den Handzeiger dazu. So, und diese drei Elemente, die lasse ich jetzt mal da drinnen, und ich schließe das mal, speichere das Skin auch ab, und jetzt gebe ich mir das Ganze mal aus und gucke mal, was da draus geworden ist. So, speichern, ausgeben, anschauen, so. Und jetzt liegt dieses Ding hier drüber. Und man sieht jetzt, dass das leicht durchsichtig ist. Da kann man jetzt so ein bisschen erkennen, dass der Hintergrund durchscheint, und hier sieht man jetzt, das wird ein bisschen größer das Ding, weil es eine etwas dickere Linienstärke hat. Und da gibt es auch einen Handzeiger oder ja, gut, da passiert jetzt nichts, weil das Ding natürlich noch keinerlei Interaktion hat, sieht sonderlich richtig hübsch in der Ecke, aber man sieht schon, was das Ganze macht. Das Skin liegt also praktisch, ist also eine 2D-Fläche, die über dem 3D-Panorama liegt. So kann man es eigentlich auch ein bisschen technisch sagen. Also das war einmal ein erster Schritt im Skin Editor ein paar Elemente einzubauen, die dann über dem Panorama erscheinen.

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!