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-Struktur

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Elemente im Skin Editor sind hierarchisch strukturiert. In diesem Video lernen Sie das Prinzip dahinter und die Vorteile kennen.

Transkript

Schauen wir uns nun in diesem Video an, was es mit der Hierarchie, mit der Struktur und mit den Bemaßungen im Skin Editor auf sich hat, denn wir bekommen relativ schnell hier ein ziemliches Durcheinander im Baum, wenn wir ganz viele kleine Elemente haben, weil jedes Kleinteil, wie zum Beispiel dieser close-Button ist einfach einen Eintrag hier und es ist absolut wichtig das Ganze zu organisieren, auch für die Darstellung später sodass wir das wirklich vernünftig ausrichten können, denn bestimmte Dinge sollen ja einfach auch frei fließend zum Beispiel immer in der Bildmitte sein, egal wie groß das Fenster ist, oder nur unten wie so eine Menüleiste oder oben eine Menüleiste oder irgendwas am rechten Rand eine Karte zum Beispiel, was auch immer. Und dafür brauchen wir einfach noch bestimmte Hilfsmittel, die ich in diesem Video kurz erklären möchte. Zunächst einmal ist es sehr praktisch solche zusammenhängende Elemente, wie diese Textbox mit dem Schließ-Button zusammenzufassen in Gruppen und dafür hat man den sogenannten Container, das ist dieses Ordnersymbol, Container zeichnen. Und ich mache jetzt mal hier einfach um das Ganze herum ein Container und wenn man das um Elemente herum zeigt, dann wandern diese Elemente auch sofort da rein. Man kann den Container auch separat zeichnen, ich mache das mal rückgängig, kann auch den Container hier unten irgendwo hinzeichnen, zum Beispiel dahin, dann steht der einfach oben drin, und ich kann dann einfach hier zum Beispiel das Ganze so einrichten, ich ziehe den da hoch und mach den mal von den Abmessungen ungefähr so groß wie das Original. Das ist relativ unwichtig wie groß der jetzt genau ist, außer bei einigen besonderen Zwecken, denn der Container ist unsichtbar, der ist im Prinzip eigentlich ein Gehäuse, in das man mehrere Elemente einordnen kann. Und ich kann jetzt hier diese Elemente, hier den close-Button und diese ganzen anderen Sachen einfach in den Container einsortieren so dahin ziehen, einfach da drauf ziehen, dann sortieren die sich unter, innerhalb des Containers kann ich natürlich auch wieder ganz normal herumsortieren. Man sieht jetzt auch, man muss ein bisschen aufpassen, wo man das genau hinmacht, es kann auch sein, dass bestimmte Elemente natürlich dann, entweder verdeckt sind, wenn die Reihenfolge nicht stimmt, zum Beispiel hier jetzt grade haben Sie gesehen, war der Text unter dieser Box, dann sieht man den nicht gescheit. Der close-Button war ein Unterelement von der Box, sollte natürlich auch nicht sein, sondern die beiden gemeinsam sind in einem Container und den Container, den sage ich jetzt mal einfach, denn nenne ich mal textbox, so, alles miteinander. Die Namen sind zum großen Teil bis auf wenige Ausnahmen relativ frei vergebbar, ich verwende es normalerweise immer nur Kleinbuchstaben, keine Sonderzeichen. Man kann das zwar machen, aber es empfiehlt sich da ein bisschen Vorsicht walten zu lassen, weil immerhin wird da am Schluss ein HTML-JavaScript-Konstrukt draus und da gibt es manche Zeichen, die hier und da ein bisschen Ärger machen. Also da ist immer gut ein bisschen konservativ zu denken und Kleinbuchstaben, man kann natürlich auch Großbuchstaben und Zahlen nehmen dazu, aber ich habe mir angewöhnt, dass immer alles mit Kleinbuchstaben zu machen oder Unterstrichen dazwischen, wenn Sachen länger sind und damit sie besser lesbar sind, so. Jetzt habe ich hier diesen Container und jetzt möchte ich zum Beispiel, dass dieser Container in der Mitte ist, ich klicke mal einfach ins Leere, in die Arbeitsfläche, ich muss es hier mal ein bisschen hin und her scrollen, weil ich nicht so wahnsinnig viel Platz habe. Man kann hier oben die Ansicht größer, kleiner machen, das geht übrigens auch mit dem Plus, Command beziehungsweise Steuerung+Plus, Minus geht das auch, allerdings immer nur in ganzen Zweierschritten. Und ich mache jetzt mal folgendes, ich schätze mal so 1080x720, mache ich mal als Größe. Ja, gut das geht sicher genau aus bei 50 Prozent. Jetzt schiebe ich diesen Container mal in die Mitte, so, dass der ungefähr dort bleibt und jetzt sage ich hier beim Container bei der Textbox, dass der Anker hier in der Meter stehen soll und das heißt, dass dieser Container, egal wie groß die Box ist, diese 1080x720, die sind jetzt im Prinzip nur eine Hausnummer, von der ich jetzt ausgehe, damit es gut darstellbar ist. Und wenn ich dann das Fenster später in der Webseite also praktisch im fertigen Panorama auf und zuziehe, dann ist wichtig, wo diese Box aufgehängt wird. Wenn die zum Beispiel hier links oben aufgehängt ist, dann wird sie immer in diesem Abstand sein, auch wenn das Fenster kleiner wird, wenn sie aber hier ist, in der Mitte, dann wird sie immer in der Mitte vom ganzen Fenster sein oder wenn ich sie hier oben anhänge, dann bleibt dieser Abstand konstant und der Rest verändert sich und so bleiben alle Abstände variabel. Ich schließe das mal und zeige jetzt noch kurz einen Trick, weil der jetzt an dieser Stelle sehr praktisch ist. Ich kann hier unter Extras Ausgabe erstellen, gleich sozusagen von hier aus das Zahnrad im Pano2VR drücken sozusagen, um das mal salopp zu sagen, das heißt, diese Ausgabe kann ich vom Skin Editor anstoßen. Und das ist ganz praktisch. Und wenn man hier jetzt einstellt, dass die Ausgabe sofort geöffnet wird, das habe ich vorher nochmal abgedreht, das drehe ich jetzt wieder auf und ich sage Erweitert, nach dem Erstellen öffnen. Und wenn ich jetzt wieder in meinen Skin Editor wechsle und sage hier mal 50 Prozent, jetzt habe ich hier was verändert, und jetzt sage ich von hier aus Ausgabe erstellen, dann springt das Pano2VR und ich brauche da nur noch in den Browser zu wechseln und das Bild ist sofort da. Und jetzt steht das in der Mitte vom Browserfenster und jetzt sieht man, wenn ich das zuziehe, dann wird das hier genau in der Mitte dargestellt. Und das ist genau das, was ich gerne hätte. Und das ist eine ganz praktische Geschichte. Das heißt, diese Ankerbox, die definiert dann letzten Endes, wo das Ding aufgehängt wird, jetzt mal salopp abgesagt, und an was ich das relativiert. Innerhalb des Containers sind diese Sachen dann fix verortet. Jetzt mache ich mal hier, ich fahre mal hier ein bisschen größer rein sodass ich den Container sehen kann. Was übrigens auch praktisch ist innerhalb vom Skin Editor kann ich wie im Photoshop die Space-Taste drücken und mich dann praktisch mit dem Handwerkzeug bewegen. Das ist auch eine ziemlich praktische Angelegenheit, vor allen Dingen, wenn es so darum geht so kleine Elemente reinzuholen, und hier kann ich natürlich auch scrollen mit der Shift-Taste quer und sonst hoch. Und jetzt geht es noch darum eine Geschichte zu erwähnen, die noch ganz wichtig ist. Bei der Textbox haben wir bei X 366 stehen und hier oben stehen auch die Koordinaten drin, da steht -174, -112. Was hat es damit auf sich? Hier stehen relative Bemaßungen und hier stehen die absoluten Bemaßungen immer von der linken oberen Bildschirmecke, die ja immer beim Screendesign das der 0 Punkt ist. Und die Sachen, die sind hier angehängt, und zwar zum Beispiel hier, die Box hier, die ist 640 vom Rand weg, aber es ist 274 Pixel von diesem Rand weg beziehungsweise immer vom übergeordneten Element, das heißt, vom linken Rand des Containers, der Text ist entsprechend weniger weg, 25 Pixel vom Containerrand weg und der ist 5 Pixel vom Containerrand weg. Das ist manchmal ein bisschen doof das so einzustellen, weil hier die relativen Werte will, manchmal möchte ich etwas nur zum Beispiel 10 Pixel innerhalb vom übergeordneten Element haben. Das ist nicht so ganz einfach einzustellen hier. Das kann man nämlich hier nicht verstellen, da wird es nur angezeigt und hier geht es im Menü absolut, aber man kommt da relativ schnell klar, denn hier gilt auch wieder, wie in den anderen Textboxen, wenn ich Cursor da reinsetze, kann ich das pixelweise verschieben und mit gedrückter Steuerungstaste auf Windows und Command-Taste auf Mac auch in Zehnerschritten. Das ist eine relativ praktische Angelegenheit, das geht hier genauso und ich kann das auch hier mit den Tasten ein bisschen feintunen. Also das soll mal so ein bisschen die Struktur erklären und die Verhältnisse in der Bemaßung, also einmal hier die Hierarchisierung mit Containern, das ist nämlich auch immer ein Hierarchie-Element, diese Container können wieder in anderen sein, das kann man beliebig komplex machen, da gibt es, glaube ich, kein Limit, wie tief diese Hierarchie sein kann. Aber der ist eben, dass der Container, der hier den Namen textbox hat, dass der als Gehäuse praktisch alle Elemente mit transportiert, die hier drinnen sind. Und ich kann das im Prinzip rumschieben, und wenn ich jetzt hier wieder in die Ansicht gehe, wo ich den ganzen Screen sehen kann, dann kann ich das hier genau positionieren beziehungsweise, wenn ich hier so eine feste Breite habe, 360, dann kann ich das im Prinzip auch ausrechnen, wohin das genau soll. Soviel mal zu diesem Teil zur Elemente, Struktur und Bemaßung innerhalb des Screen Editors.

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!