Panoramafotografie: Virtuelle Touren mit Pano2VR

Anpassen für Mobilgeräte

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im Skin Editor können Sie über die Nutzung von Logic Blocks einzelne Elemente von der Bildschirmgröße abhängig machen ("responsive Design"). Das eignet sich sehr gut für die Anpassung eines Skins an kleinere Mobilgeräte.

Transkript

In diesem kurzen Video möchte ich die wichtige Rolle der Logic Blocks im Skin noch mal aufgreifen. Und sie nutzbar machen, für das, was so im Web allgemein also responsive Design bezeichnet wird. Das heißt, dass bestimmte Interface-Elemente einfach bei kleinerem Bildschirm oder auch bei Hoch- und Querformat entweder anders positioniert werden, rausgelöscht werden, verändert werden, oder wie auch immer. Und das habe ich jetzt hier mal gemacht, ist zum Beispiel hier, das ist eine normale Desktop-Version, ich habe hier unten meine simplex Skin drin, und das habe ich jetzt soweit so modifiziert, wenn ich den Bildschirm immer weiter zusammenschiebe, habe eine bestimmte Breite, wird dann einfach das Kreuz aus dem Tasten zum rauf und runter, rechts und links bewegen, dieses Movecross, das wird dann einfach ausgeblendet, und stattdessen bleiben nur noch die anderen Buttons übrig. Und ich erzähle mal kurz, wie das gemacht wird. Ich gehe zurück ins Pano2VR, und habe jetzt hier von dem simplex_v5 einfach eine Kopie gezogen, in meine Ordner geschmissen, und das ein bisschen manipuliert. Das ist relativ schnell erzählt, was da passiert ist. Ich habe die Buttons right, left, down, up, also die, für die Bewegungen, und nicht für die Richtungen gedacht sind, die habe ich in einen Container gepackt, gemeinsam kopiert, den Container aktiviert, der schließt sich dann runter. Und diesen Container habe ich move_cross genannt. So, was habe ich denn gesagt, das ist ganz, ganz simpel. Diese 4 Button sind hier zusammengefasst in diesem Container, hat jetzt grafisch überhaupt keine Auswirkungen, und dienten nur der Hierarchie, dass ich die gemeinsam behandeln kann in meinem Elementebaum hier. Und ich gehe auf Aussehen, und ich habe hier ein Logic Block eingefügt, bei Sichtbar. Und da ist der Auslöser einfach die Fensterbreite, und sobald die kleiner, gleich 540 Pixel ist, wird die Sichtbarkeit auf falsch gestellt. Das ist das, was ich hier gemacht habe. Und da dann natürlich der Kontroller als gesamte, dann nicht mehr in der Mitte steht, weil die Mitte ist ungefähr hier, und dann schaut das ein bisschen komisch aus, dann hängt das so rechts raus. Und deswegen habe ich jetzt einfach hier noch eine Bewegung eingebaut: Sobald dieses Movecross verschwindet, soll der Rest von meinem Kontroller ein Stück nach links wandern, damit der wieder hübsch in der Mitte steht. Das habe ich jetzt gemacht. Kann man hier bei einem Logic Block für die Position einführen. Der schaut so aus, gleich hier Bedingung: Fensterbreite kleiner gleich 540 Pixel. Standardmäßig steht das Ding hier auf 107 Pixel. Von der linken Seite da habe ich jetzt 50 rausgemacht als guten Wert. Und ich sage dann OK, das heißt, nun diese passieren gleichzeitig. Das verschwindet, das wird links rübergeschoben. Und wenn ich es dann angucke, haben wir hier eben die Bedingung, sobald der Bildschirm kleiner wird als 540 Pixel breit, verschwindet das, und gleichzeitig wird der Rest von dem Kontroller wieder in die Mitte gerückt. Und auf diese Art und Weise kann man sehr, sehr feine Unterscheidungen treffen, wie zum Beispiel mein Interface auf der Smartphone aussieht, ich kann es vergrößern, damit es statt mit der Maus besser mit den Fingern zu bedienen ist. Und bei den ganzen Logic Blocks hier, kann man gucken, wo die überall zu sehen sind. Und so man kann also auf sehr, sehr viele Parameter zugreifen. Mit dem das hängt auch ein bisschen vom Element ab. Jetzt, bei den Containern ist es was anderes, als bei der Grafik. Man kann die Skalierung ändern. Das ist zum Beispiel sehr interessant für mobile Geräte, dass man hier einfach sobald die Fenstergröße ein bisschen kleiner wird, macht man hier die Dinge ein bisschen größer. Oder der Winkel ändert sich, oder was auch auch immer da gibt's, alle möglichen Geschichten gerade mit Containern, und herumschieben kann man, unglaublich spaßige Sachen machen damit. Und wirklich das optimal auf die unterschiedlichen Darstellungsbereiche Desktop, Mobile, und innerhalb von Mobile noch auf Tablette und Smartphons unterbrechen, und dann, wenn man so richtig luxuriös haben will, auch noch auf Hoch- und Querformat, das nämlich auch erkannt wird. Und das ist eine sehr, sehr angenehme Geschichte, die man hier in dem Skin machen kann. Und eine optimale Anpassung an das Endgerät des Users zu erlauben.

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!