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: Sphärische Panoramen mit PTGui

Flash-Fallback einrichten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Standardmäßig werden interaktive Panoramen im Web mit Hilfe der Basis-Web-Technologien HTML5, JavaScript und CSS3 dargestellt. Wollen Sie auch Nutzer älterer Browser berücksichtigen, können Sie eine alternative Flash-Version Ihres Panoramas erstellen.

Transkript

In diesem Video möchte ich Ihnen zeigen, wie Sie Ihren Besuchern auch mit alten Browsern, sprich Internet Explorer 8 und 9, die Möglichkeit bieten können dass sie ihr interaktives Panorama auf der Basis der Flashtechnologie anschauen können. Dafür nehme ich mir mal das schon bestehende Pano2VR-File und öffne das mal. Und gebe das hier auf mein Aufnahmefenster. Und da schauen wir uns jetzt einmal die Ausgaberoutinen an. Ich speichere mir das jetzt mal hier unter einem neuen Namen, und sage da mal flash hintendran, damit ich das von dem andern unterscheiden kann, und ich ändere jetzt einige Dinge ab. Hier zum Beispiel, wir haben jetzt im Moment nur eine einzige Ausgabe, und wir fügen jetzt eine zweite Ausgabe hinzu, und zwar die Ausgabe Flash, dann bekommen wir dieses Flash-Icon hier. Zunächst einmal möchte ich ganz gerne hier, es wird ein output-1 angezeigt, das möchte ich gerade ändern, ich will dass das im gleichen Ordner landet. Und ich will vor allen Dingen, dass möglichst viel von dem Bildmaterial was ich rausspiele, also diese ganzen vielen kleinen Bildschnipsel, dass die von Flash genauso benutzt werden, um einfach nicht alles doppelt generieren zu müssen, das kostet ja alles irgendwie teuren Speicherplatz am Webserver. Und deswegen gehe ich mal hier auf das Ordner-Icon und wähle hier einfach den Ordner Output aus, den es vorher auch schon gegeben hat, von der HTML 5 Ausgabe. Und hier gehe ich jetzt auf die Skins, wähle mal das gleiche Skin aus, da gibt es einfach eine Entsprechung auch, die mit Flash genauso funktioniert, und jetzt trage ich mal ungefähr die gleichen Parameter ein, die wir vorher schon gehabt haben, bei der Auto Rotation haben wir hier ein Frame, 2 Sekunden Wartezeit gehabt. Und hier, Return to Horizon 5 Sekunden, dann können wir das wieder zuklappen, Transitions, Hotspots brauchen wir nicht, HTML brauchen wir, und dann sage ich mal das sind 960 x 600, das hatten wir auch schon, und hier sage ich jetzt -- und das ist relativ wichtig, ich möchte hier diese index-Datei die entsteht, da möchte ich nur eine einzige haben, weil später soll das nämlich automatisch gehen, das heißt, es hängt vom Browser des Besuchers ab, ob wir Flash oder HTML 5 verwenden, deswegen möchte ich jetzt diese Datei von HTML 5, ich bin ja jetzt hier in der Flash Ausgabe, nicht überschreiben, und benenne die jetzt einfach in index_flash um, die wird dann generiert, aber wir werden sie nicht brauchen, aber es wird nicht die überschrieben, die wir brauchen. So, dann gehen wir hier mal in die Abteilung Flash. Und da können wir jetzt ziemlich ähnliche Dinge eingeben, wie das was wir bei HTML 5 auch haben, es ist etwas anders, es hat einfach technologische Gründe, aber im Wesentlichen können wir das mal so lassen wie es ist, ohne das zu ändern. Das will jetzt auch gar nicht wirklich im Detail erklären, das sind einige Spezialgeschichten, beim Control kann man sagen, ich möchte doch wieder ein Add Fullscreen haben, und der Rest passt eigentlich mal so, das ist ziemlich genau gleich wie beim HTML 5. Das war Control, dann bei Image. Flash unterstützt genauso diese Multi-Resolution Technologie, und das heißt, das können wir genau exakt gleich lassen, wie das was wir bei HTML 5 haben, und das ist sogar empfehlenswert, dadurch können wir nämlich wirklich das Bildmaterial gemeinsam benutzen. Und jetzt gibt es eine Geschichte, auf die man ziemlich aufpassen muss, und zwar, das Benennungsschema für diese einzelnen Würfelseiten, das ist standardmäßig hier nicht für Flash und HTML 5 gleich, wir müssen jetzt mal gucken, welches wir bei HTML 5 verwenden, beziehungsweise ist es wichtig, dass es die gleichen sind, dadurch kann nämlich sowohl der HTML 5 Javascript Player, als auch der Flash Player, die können gemeinsam auf das gleiche Bildmaterial zurückgreifen und ich nehme jetzt mal hier, einfach hier mal sicherheitshalber den obersten Eintrag, dort wird jetzt in dem Ordner tiles ein weiterer Ordner angelegt, und da drin gibt es dann lauter kleine Dateien, das ist jetzt hier nicht so schlimm, weil wir nicht so viele haben, das Panorama ist mit etwas über 100 MPixel jetzt nicht so wahnsinnig groß. Wir merken uns mal, das ist die erste Zeile von dieser Auswahl der Benennung und jetzt wechsle ich rüber zu Flash, und gucke mal bei Advanced, dass das das Gleiche ist, und das ist jetzt genau dieses auch wieder, was wir hier haben. Die müssen identisch sein. Dann haben wir hier schon den output von der flash Datei, diesen Namen den merken wir uns jetzt einmal und dann können wir das gleich in einem Aufwasch machen, normalerweise muss man das Flash immer zuerst generieren und dann erst das sogenannte Flash-Fallback einrichten. Denn das ist jetzt so, wir generieren hier eine Ausgabe für Flash, zugreifen tut aber letzten Endes die Ausgabe für das HTML, weil für diese Ausgabe ist das nämlich nur eine Alternative, die Flash Ausgabe selbst werden wir ja gar nicht direkt benutzen, sondern es ist wirklich sogenanntes Fallback, das heißt, wenn HTML 5 nicht funktioniert, nur dann nimm das, und das stellt man bei der HTML Datei ein. Und wir haben hier bei der HTML Datei daneben so ein kleines Werkzeug-Icon, da können wir diese Vorlagen für die HTML Dateien, dieses ggt steht wieder für Garden Gnome und dieses t steht für Template, das heißt, das ist eine HTML Vorlage wo lauter Platzhalter drin sind und Pano2VR, dann in ein Muster alle Daten einträgt, die wir wirklich jetzt konkret für unser Projekt brauchen. Und wenn man hier dieses Kästchen aufmacht, dann gibt es hier eine Box, und da steht Flash fallback player, den hätte ich gerne, und jetzt gebe ich hier einfach output ein, / und dann einfach nur pano.swf die heißt halt normalerweise immer gleich, wenn man die nicht willentlich ändert. Und man kann auch eine bestehende schon hier mit Open auswählen, im Finder oder Explorer. Und das ist jetzt sozusagen der fallback player, das heißt, wenn mein HTML 5 player nicht geht, dann nehme bitte diesen, das ist also diese ganze fallback Geschichte, Ich speichere das mal. Und jetzt können wir mit dem Zahnrad hier, wenn man mit der Maus kurz drüberbleibt, dann sieht man Alt-click to generate all outputs, ich könnte jetzt der Reihe nach beide generieren indem ich erst den HTML 5 output und dann den Flash output mache, aber wenn ich mit der Alt-Taste hier draufklicke, dann wird alles in einem Aufwasch generiert. So, und das schauen wir uns dann mal an, was dabei rausgekommen ist, ich hoffe es funktioniert. Die meisten Fehler entstehen dadurch, dass man nicht das gleiche Benennungsschema für die Bildschnipsel hat. Und, wir gucken uns das mal an, das ist das HTML 5 und dann kann ich hier auf dieses Fernseher-Icon klicken, dann startet der Webserver und das schaut einmal ziemlich gut aus. Das ist jetzt die HTML 5 Ausgabe, die auf der Datei index liegt, und jetzt gucken wir uns das ganze mal an auf der Flash Seite und jetzt gehe ich hier mal auf das Icon, und das müsste jetzt auch funktionieren, hat ein bisschen ein anderes Layout, die Seite, da unten ist auch noch dieser user table noch drinnen, den kann man hier noch anschauen, das kann man auch abklicken, wenn man möchte. Aber dadurch, dass diese Seite gar nicht direkt ausgegeben wird, ist uns das eigentlich jetzt mal ziemlich wurscht, und hier sehen wir auch, alles funktioniert und ich kann auch da raus- und reinzoomen mit der Shift-Taste und mit der Control-Taste und hier sieht man also, dass das wunderbar funktioniert. Und jetzt ist im Prinzip -- jetzt können wir diesen Mechanismus des Fallbacks, können wir hier nicht wirklich ausprobieren, da müsste ich jetzt einen alten Internet Explorer haben, habe ich hier am Mac gar nicht, aber wir können das im Code anschauen, wenn wir mal mit Strg+cmd+U hier reingehen, dann bekommen wir den Quellcode zu sehen von der Seite und das ist relativ einsichtig was da passiert. Hier sieht man einen javascript, das ist dieser Block hier, und da haben wir den oberen Teil, der ist dafür zuständig, dass WebGL und HTML5Css, dass HTML 5 benutzt wird, use HTML5 panorama. Und hier ist das Gegenstück dazu, else, also wenn dann nicht, dann machen wir das so, dann nehmen wir hier pano.swf und hier sind die ganzen flash Geschichten, und die Sachen die man braucht um das einzubinden. Und wenn wir uns das jetzt noch in der Bridge angucken, was da rausgekommen ist, dann sehen wir hier im Ordner output eigentlich nicht sehr viel anderes als vorher, und wir sehen hier diese index_flash Datei, die wir zum Erzeugen gebraucht haben, die gar nicht wirklich benutzt wird. Wir sehen das pano.swf zusätzlich, und wir sehen hier noch eine Datei, die heißt swfobject, die sorgt eigentlich nur dafür, dass das swf-File ordentlich in diese HTML-Seite eingebaut wird, und bei den images, die benutzen die gleichen Bilder fürs Interface, also für dieses skin, und dann haben wir hier noch die tiles, die funktionieren jetzt anders, ich habe das jetzt so angelegt, dass sie in einem Ordner sind, da kann man schön die Vergrößerungsstufen sehen, ein bisschen anders als vorhin mit den einzelnen Unterordnern, und hier sieht man jetzt die ganzen einzelnen Schnipsel, in den unterschiedlichen Vergrößerungsstufen für die unterschiedlichen Würfelseiten, bis hin zu dieser kleinen Vorschaudatei in schwarz-weiß, die schaut so aus, das ist ein sogenannter Cubestrip, da ist einfach -- geht dann vorne, rechts, hinten, links, oben, unten und das wird halt sofort angezeigt, ist ganz klein das Ding, Sie sehen das hier 8 KB. Das ist so eine Vorschaudatei. Das heißt, das ist der komplette output, den wir sozusagen haben, von einer solchen sehr universellen Lösung, da heißt, da kann man so ziemlich alle Browser bedienen, die im Web überhaupt unterwegs sind, und das funktioniert auf Mobilgeräten genauso wie auf dem Desktop. Also, das ist jetzt eine komplette HTML 5 Ausgabe mit Pano2VR inklusive einem sogenannten Flash-Fallback.

Panoramafotografie: Sphärische Panoramen mit PTGui

Lernen Sie, wie Sie von einem einfachen Panorama zu einer kompletten Rundumsicht von 360 x 180° kommen. Sehen Sie die Vorbereitung, Aufnahme und Nachbearbeitung in PTGui.

5 Std. 54 min (46 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!