06.06.2013

Anleitung für Pano2VR 4.1.0 (64 Bit) für HTML5-Panoramen mit Flash-Fallback-Funktion

Die folgende Anleitung erklärt die Erstellung von virtuellen Kugel-Panoramen für das Internet, welche

bevorzugt unter Flash, aber auch unter HTML5 funktionieren (Android, iOS etc.). Dabei handelt es sich um eine

ausführliche Anleitung, die sich zum Teil auf einen eigenen Pano2VR-Skin bezieht. Diese Punkte, welche für den

Verwender normaler Pano2VR-Skins uninteressant sind, sind an den entsprechenden Stellen grau markiert und

können beim Lesen einfach übersprungen werden. Für Benutzer, die ähnliche Funktionen in ihrem Skin

eingebunden haben, können diese Schritte aber eventuell interessant sein. Desweiteren sind natürlich fast alle

Parameter variabel und können nach Bedarf verändert werden.

In den Bildern sind die Stellen rot markiert, an denen Änderungen vorgenommen werden.

Ausgangsmaterial: Dateiformat: TIFF (Alternativ JPEG) Auflösung: 11.000 x 5.500 Pixel (2:1) Vorherige Bearbeitung in: PTGui (Stitching), Oloneo PhotoEngine (HDR), Photoshop (Retusche), ACDSee (Bildeinstellungen) Achtung: Um ein fehlerfreies Ergebnis zu erhalten, sollte zu Beginn, die Bezeichnung des zu bearbeitenden 2:1 Panoramas keine Sonderzeichen und Umlaute enthalten, da dies später wohl bei der internen Adressierung Probleme macht und höhere Auflösungen nicht nachgeladen werden. Inhaltsverzeichnis: 1. Ordner-Erstellung 2. Panorama öffnen 3. Anzeige-Einstellungen bearbeiten 4. Benutzerdaten bearbeiten 5. Lens Flare setzen 6. Sound einfügen 7. Flash-Ausgabeformat festlegen 8. Flash-Einstellungen bearbeiten 9. Info-Link einfügen 10. Button-Map-Link einfügen 11. Grafikeffekte bearbeiten 12. Mehrere Auflösungen einfügen 13. Flash-Ausgabe 14. HTML5-Ausgabeformat festlegen 15. HTML5-Einstellungen bearbeiten 16. Info-Link einfügen 17. Button-Map-Link einfügen 18. Erweiterte Einstellungen bearbeiten 19. Mobile Geräte 20. HTML-Ausgabe

Seite 2 von 17

Los gehts...

1. Erstelle einen neuen Ordner >

Füge das 2:1 Panorama (JPEG oder TIFF) und den Sound (MP3) ein

2. Öffne Pano2VR und ziehe das Panorama in die Pano2VR-Quelle

Seite 3 von 17

3. Anzeige-Einstellungen „Ändern“ (Startansicht & Zoom-Beschränkung)

Richte die gewünschte Startansicht aus

Trage die markierten Werte entsprechend ein

Bestätige beim Schließen durch „OK“ mit „Ja“

4. Benutzerdaten „Ändern“ (Panorama-Informationen)

Seite 4 von 17

5. Hotspots „Ändern“ (Lens Flare setzen)

Dieser Punkt setzt voraus, dass das Lens Flare Plugin installiert ist. Informationen und Anleitung findest du unter:

http://gardengnomesoftware.com/wiki/Flash_Lens_Flare

Lens Flare auf Lichtquelle setzen (z.B. Sonne, Scheinwerfer)

Titel: 0.3/0.0 (0.3 = Stärke des sich bewegenden Linsenflecks; 0.0 = Stärke des Blendeffekts)

Seite 5 von 17

6. Media „Ändern“ (Hintergrundmusik auswählen & einstellen)

Sound auswählen (nur MP3)

Lautstärke: 1,00 = 100%; 0,25 = 25% (Wert selbst einschätzen)

Wiederholen: 0 = Endlosschleife

7. Neues Ausgabeformat: Flash „Hinzufügen“

Seite 6 von 17

8. Einstellungen bearbeiten (Automatische Drehung & Skin-Auswahl)

Automatische Drehung aktivieren und markierte Werte eingeben

Skin auswählen und anschließend auf „Bearbeiten...“ klicken

9. Info-Link einfügen (nimmt Bezug auf die Kommentar-Zeile in den Benutzerdaten – siehe Pkt. 4)

Seite 7 von 17

mit „OK“ bestätigen

10. Button-Map bearbeiten (Standort zuweisen)

Seite 8 von 17

Website öffnen: http://www.via-ferrata.de/koordinaten-umrechnen.htm

Satelliten-Ansicht wählen > Aufnahme-Ort suchen > Kamera-Standort anklicken

Angezeigte „Longitude“ und „Latitude“ kopieren

Website öffnen: www.maps.google.de

Satelliten-Ansicht wählen > kopierte Koordinaten in Suchfeld eintragen > Suchen klicken >

gewünschte Zoom-Stärke einstellen > Link-Button klicken > angezeigte URL kopieren

Diesen Tab (bzw. Internetseite) nicht schließen, Link wird bei Pkt. 17 nochmals gebraucht

Seite 9 von 17

kopierte Adresse ins Feld „URL“ eintragen

2x mit „OK“ und anschließend mit „Speichern“ bestätigen (Skin-Bearbeitung abgschlossen)

11. Grafikeffekte bearbeiten (Farbiges Vorschaubild)

Seite 10 von 17

12. Mehrer Auflösungen (Multiresolution bzw. schrittweise höhere Auflösungen nachladen)

Aktivieren > „Ebenen automatisch hinzufügen“ „Ja“

Auflösung der Ebenen eintragen > kleinste Auflösung „Einbetten“

13. HTML-Datei „Deaktivieren“

Seite 11 von 17

Häkchen entfernen > Flash Ausgabe mit „OK“ bestätigen

„Ausgabedatei ‘Karl Marx HDR TIFF_out.swf‘ jetzt erzeugen?“ mit „Ja“ bestätigen

nächstes Speicher-Fenster mit „Speichern“ bestätigen

Panorama wird erstellt und automatisch im Browser geöffnet >

Vollbild-Modus und Links noch ohne Funktion (normal) > Browser-Tab schließen

14. Neues Ausgabeformat: HTML5 „Hinzufügen“

Seite 12 von 17

15. Einstellungen bearbeiten (Automatische Drehung & Skin Auswahl)

Automatische Drehung aktivieren und markierte Werte eingeben

Skin auswählen und anschließend auf „Bearbeiten...“ klicken

16. Info-Link einfügen (nimmt Bezug auf die Kommentar-Zeile in den Benutzerdaten – siehe Pkt. 4)

Seite 13 von 17

17. Button-Map bearbeiten (Standort zuweisen)

Seite 14 von 17

URL des noch geöffneten Tabs (Google Maps) nochmals kopieren

kopierte Adresse ins Feld „URL“ eintragen

2x mit „OK“ und anschließend mit „Speichern“ bestätigen (Skin-Bearbeitung abgschlossen)

Seite 15 von 17

18. Erweiterte Einstellungen (Farbiges Vorschaubild)

19. Mobile Geräte (Alternative Auflösungen für mobile Geräte mit kleineren Displays)

Zwei alternative Auflösungen „Hinzufügen“

Diese Auflösungen sind ideal für iPad, iPad 2, iPad mini, iPhone 1-5

Seite 16 von 17

20. HTML > Ausgabe

markierte Häkchen setzen > zuvor erstellte *.swf öffen (im Ordner „output“)

HTML5 Ausage mit „OK“ bestätigen

„Ausgabedatei ‘Karl Marx HDR TIFF_out.xml‘ jetzt erzeugen?“ mit „Ja“ bestätigen

Panorama wird erstellt und automatisch im Browser geöffnet >

Vollbild-Modus und Links jetzt mit Funktion

Panorama kontrollieren

FERTIG

Damit wurden alle Datein erzeugt, die für die Darstellung im Internet wichtig sind.

Als letzten Schritt müssen nur noch alle Datein im Ordner „output“ auf den Server geladen

und die *.html-Datei verknüpft werden.

Seite 17 von 17

Das Ergebnis kann unter folgenden Link begutachtet werden:

http://www.pixel-liebe.de/panos/karl_marx/karl_marx

Ich hoffe meine Anleitung war übersichtlich und verständlich. Vielen Dank an die Panorama-Community(.de) für die professionelle Unterstützung in allen Fragen. Wenn diese Anleitung hilfreich für dich war, würde ich dich bitten, als kleine Gegenleistung, auf meiner Facebook-Seite „Gefällt mir“ zu klicken oder mir einen Eintrag im Gästebuch auf meiner Homepage zu hinterlassen. Bei weiteren Fragen, kannst du gern das Kontakt-Formular auf meiner Homepage nutzen. Facebook „pixel-liebe“: http://www.facebook.com/pages/pixel-liebe/420651964663492 Homepage „pixel-liebe“: http://www.pixel-liebe.de/ Vielen Dank Gruß Thomas