Bei dieser 360-Grad Ansicht, bildet der Standpunkt den Mittelpunkt und das Motiv wandert einmal rund um den Standpunkt.
Praktisch dreht man sich einmal um die eigene Achse, macht dabei eine Reihe von Aufnahme und erhält als Ergebnis die 360Grad-Ansicht, um die es hier nicht geht!
Ich meine die 360-Grad Ansicht, bei der das Motiv den Mittelpunkt bildet und der Standpunkte einmal rund ums Motiv wandert.
Wie angekündigt, ein Beispiel bei dem Flash nur mit viel Schmerzen zu ersetzen sein wird. Für den View würden wir eigentlich Actionskript und Flash verwenden, denn die saubersten, performantesten und stärksten Umsetzungen, so unterschiedlich sie sein mögen, haben eines gemeinsam, sie verwenden eine .flv Datei, die in einem eigens dafür programierten Flash-Player angezeigt wird, wobei die weiteren FLV-Filme, wie bei einer Videojukebox, bei Bedarf nachladen, ohne das der Seiteninhalt upgedatet werden muss, aber das ist nunmal leider Flash. Um ganz ehrlich zu sein, haben wir seit über 1 Jahr, auch eine Jquery Variante im Einsatz, da diese Version gleichzeitig auf Tablet-PCs, sozusagen als One-View-Fits-All-Komponente läuft und wir uns langsam von der Königslösung verabschieden müssen. Qualitativ ist sie dem Flash-Viewers beinahe ebenbürtig, leider wesentlich umständlicher zu programmieren, da ein relativ umfangreiches Jquery Skript notwendig ist, um das Eventhandling zu bewerkstelligen. Ausserdem ist auch das Jquery nicht unbedingt Problemlos auf allen Tablet-PCs lauffähig(sicher aber auf iPad), da Javascript natürlich Browserabhängig ist. Dafür kann man es sehr einfach anpassen und man kann optisch vollkommen frei zu Werke gehen und ist nicht an irgendein vorgefertigtes Standart-Videoplayerlayout gebunden ist.
100% Tablet-PC save, aber dafür gestallterisch unterirdisch Quick & Dirty wäre es, den View als Video zu erstellen, der mit auto-repeat in einem HTML5 Video-Tag abgespielt wird. Die Fortschritsanzeige der Komponente, wird dann mit der Maus, zum drehen des Objekts verschoben oder durch play laufen gelassen, hier beginnt auch schon die leichte Brutalität der Methode, denn um das Objekt rückwärts stand-alone laufen zu lassen, bräuchte man eine play-rückwärts Funktion, die bekanntlich nicht zu den Eigenschaften von Standart-Video Komponenten gehört, dafür sind andere Eigenschaft standart, deren Sinn in diesem Kontext komplett entleert wird, wie Lautstärkenregler. Da es bei uns im Hause niemand übers Herz bringen würde, Kunden mit einer derart miesen Medienperformance auf lowlevel im Web hängen zu lassen und Benutzerfreundlichkeit auch darin besteht, nur Funktionen anzuzeigen die auch benutzbar sind, verwenden wir ausschlisslich die Jquery Version und versehen das Skript, zur Vermeidung von Laufzeitfehlern, durch unterschiedliche JS Interpretation, mit einer Browserweiche. Ausnahmen bilden die Low cost Produkte, wie z.B. Landingpages, dies können auf Wunsch mit HTML5 Player und sogar noch lower, mit youTube Player aufgerufen werden.
Ebenso indiskutabel, sind Produktdarstellungen für Webshops ohne 360Grad-Ansichten, da man ein Produkt, wenigsten von allen Seiten betrachten können muss, wenn schon sonst kein Look & Feel des Produkts möglich ist, ausser es handelt sich um ein derart prominentes Produkt, das davon auszugehen ist, das diese allgemein bekannt sind, oder die Produktoptik ist irrelevant, weil ohnehin nur die Verpackung zu sehen wäre, wie z.B. Reiniger, Lacke oder Möbelpolitur ect. . Daher ist es kein Zufall das wir das “Unechte Flashersatzprodukt”, als Magentoshop Modul (Community Version), zur Produktpräsentation eines Internet Optikers entwickelt haben. Da es keine WP Version geben wird und ich keine Zeit hatte die Komponente wegen dieses einen Eintrags für WP anzupassen, kann die Original Demoversion des Moduls auf den Produktseitendemos des Shop nebenbei in einem neuen Fenster geöffnet werden.
Bei den Aufnahmen, wird dabei natürlich nicht, wie oben geschrieben, ums Objekt gewandert, sondern der Standpunkt beibehalten und das Produkt einmal um die eigene Achse gedreht, was auf das Gleiche hinausläuft. Ziel ist es, ein Objekt in der Anzeige, mit der Maus um 360-Grad drehen zu können. Zweifellos hat der View die Filmeigenschaft Zeit, aber bei einer Länge von 16 Bildern, was eine Filmlänge 0,6 sekunden ergibt, auch eher Fotocharakter. Was gibt es denn zwischen Film und Foto? Einen “Stapel” und das wird auch das Ausgangsmedienformat für die Komponente. Da es sich bei den Betreibern von Webshops, in der Regel nicht um Medienprofis handelt und man generell nicht davon ausgehen kann, das jeder Shopbetreiber von Haus aus, das Kapital zur Verfügung hat, Medienprofis zu beschäftigen, ist es sicherlich ein Vorteil von Stapeln, dass sie sich zum Einen relativ einfach, von Jedermann, sowohl mit einer Video, als auch mit einer Foto Kamera herstellen lassen. Zum Anderen können sie in jeder Archivierungs oder Bildbearbeitungs Software, z.B. mit Picasa von Google (gibt’s hier) für 0,- €, verarbeitet und organisiert werden. Betrachtet man die Summe aller Möglichkeiten ist schätzungsweise der “Stapel” von allen Medien am flexibelsten einsetzbar.(mit Ausnahme einer .flv Datei, die wir aber ja nicht mehr verwenden, in der “Zukunft ohne Flash”). Die Bilder können in Picasa stapelweise archiviert werden, was die Contentpflege, für Betreiber und Contentmanager, vom finanziellen und zeitlichen Aufwand äußerst überschaubar hält.
Und so sieht er aus der “Stapel”. Er besteht aus 16 Aufnahmen, zwischen denen eine Drehung von 22,5 Grad liegt. Werden die Bilder zeitversetzt hintereinander angezeigt, wird eine Drehung des Objekts um die eigene Achse sichtbar.
Im Unterschied zur oben gezeigte 360Grad-Panorama Ansicht, die keine Ausdehnung auf der Zeitachse hat, weshalb man zur Herstellung der Ansicht problemlos unterschiedlich große Drehwinkel zwischen die Bildern legen kann, müssen Bei dem Stapel für den Viewer, die Winkel zwischen den Bilder alle gleich groß sein. Unterschiedliche Drehwinkel zwischen den Aufnahmen, würden auf der Zeitachse, bei regelmässiger Filmgeschwindigkeit, in gleichen Zeitintervallen, unterschiedlich große Drehfortschritte des Objekts zeigen und die Bewegung so, im günstigsten Fall leiernd und im schlimmsten Fall unkenntlich werden lassen.
Der Nachteil des Stapels ist ganz eindeutig der Einzelbildcharakter, dabei gilt, je mehr Einzelbilder man verwendet, desto Unbedeutender wird dieser Nachteil. Mit weniger als 12 Bildern, wird das eine sehr fraktale Bewegung. Wir realisieren hier eine 360-Grad Drehung in 16 Bildern, was ich als absolute Untergrenze für eine durchgehende Bewegung definieren würde und das wird bei langsamen Drehungen schon sehr “ruckelig”. Eine für langsame Drehungen beinahe nahtlose Drehung, wird mit 64 Bildern/Drehung gewährleistet, allerding sollte man vorher erroieren, wieviele 360Grad Views man beabsichtigt zu zeigen, um nicht die Serverkapazität oder Bandbreite aus allen Nähten platzen zu lassen. Ich würde generell raten, alle Bilder eines Stapels vorzuladen, wenn nicht so zu verfahren, wie hier im folgenden beschrieben. Will man eine flüssige Navigation des Views gewährleisten, ist es eigentlich unmöglich, die Bilder erst bei Bedarf nachzuladen.
Ein paar Details zur HTML-Datei dem sog. Container, der für die Jquery-Komponente notwendig ist.
- Beim ersten Aufruf der Komponente, berechnen wir aus den Vollformaten, zusätzlich je ein Bild im Endformat der Komponent. Dazu muss die Vorraussetzung gegeben sein, Bilder direkt auf dem Webserver umzurechnen, was wiederum bedeuted, ImageMagick oder GD-Library muss auf dem Server installiert sein (am besten Beides, was ohnehin Sinn macht, wenn man vorhat diese oder ähnliche Medienkomponenten auf seiner Website, performant laufen zu lassen).
- Ebenfalls beim ersten Aufruf, wird der Container als HTML Datei erstellt, welche die fertige HTML-Liste enthält, so wie sie für die Komponente benötigt wird. Für jeden weiteren Aufruf, laden wir dann immer direkt die gespeicherte Container-Datei um Ladezeit zu sparen.
- Um die Einzelnenansichten zoombar zu machen, speichern wir den Namen des verkleinerten Bildes als src attribut des Images und den Namen der Original Datei als ID im jeweils übergeordneten Block Element.
In HTML Code ausgedrückt, sieht der Container dann in etwa so aus:
<div id=”carousel”> // Container
<div class=”carousel-feature” id=”bundle-001″><a href=”#”><img alt=”Image Caption” src=”images/623/623-001.jpg”></a></div> // Bild 1
<div class=”carousel-feature” id=”bundle-002″><a href=”#”><img alt=”Image Caption” src=”images/623/623-002.jpg”></a></div> // Bild 2
…weitere 14, 22, 30 Ansichten je nachdem, wie fein die Drehung werden soll…
</div> // Ende Container
In unserem Beispiel ist das Bild für die 360Grad Ansicht “images/623/623-001.jpg”. Aus der Id des Elternelements kann man jetzt den Namen des Originals zuordnen, das wir für die Zoomansicht verwenden wollen, mit Pfad “images/623/bundle-001.jpg”. Es gibt natürlich auch viele andere Möglichkeiten, die Zuordnung von berechneter Ansicht zum Vollbild zu speichern, man sollte aber dran denken, sie so zu speichern, das man hinterher mit dem Jquery, möglichst ohne großen Aufwand die Daten zuordnen kann. Weitere Einzelheiten, kann ich mir hier als Beschreibung eigentlich sparen, denn ausnahmsweise und nur weil der Post genau an Weihnachten erscheint, verschenken wir sogar eine Vollversion, ohne jede Laufzeit oder Bildanzahl Beschränkung an unsere Leser, die man sich mit dem folgenden Link herunterladen kann. Daher kann sich jeder, den es interessiert, den genauen Source-code direkt im Original anschaun.
Weihnachtsgeschenk Download: Jquery 360Grad-Viewer mit Zoomfunktion
Instalation: zip-Archiv auspacken und Index.html im Browser starten.
Das Skript kann überall eingesetzt werden, aber es ist für die Verwendung in einem Magento shop optimiert.
Öffnen Sie die jquery.imageRotation.js in einem Texteditor. Da magento für alle eigenen Javaskripte sowohl den sonst üblicherweise von jquery verwendeten Namespace $, als auch den Namespace $$ in Beschlag genommen hat, wird hier für das jquery nicht $ sondern $jqx verwendet. Andernfalls würden sich Konflikte mit den Skripten des Shops ergeben. Eigentlich sollte es genügen Jquery in der No-Konflict Variante zu verwenden, aber das haben wir probiert und die Konflikte traten denoch auf. Im Verzeichnis images, haben wir ein paar Beispiel Stapel, aber man kann auch beliebig eigene Stapel erstellen und testen. Dazu muss in der Index.html lediglich das img src-Attribut und im dazu gehörenden DIV die Id ensprechend angepasst werden. Durch Doppelklick, lässt sich die Zoomfunktion aktivieren, dabei wird nicht das verkleinerte Bild gezeigt, wie in der Rotationsansicht, sondern das Original JPG. als Name der Originaldatei wird die Id des umschliessenden DIV vewendet.
Optionen die man aus dem HTML Container zuführen möchte, können direkt im Header der Index.html eigetragen werden. Liste möglicher Optionen($jqx.fn.imageRotation.defaults) am Ende der Datei jquery.imageRotation.js.
Probleme? Mein E-mai Adresse steht hier: http://www.addit-media.net/new/kontakt/about-us/
Hot X-Mas und einen smarten Rutsch ins neue Jahr.