+++++ IN ARBEIT +++++

Anleitung für Pano2VR

für HTML5-Panoramen mit Flash-Fallback-Funktion

                             

 


Tutorial als PDF runterladen

 

Version: Pano2VR 4.3.5

Download Testversion: Pano2VR 4.3.5 (64 Bit); Pano2VR 4.3.5 (32 Bit)

 

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. Die 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 umrahmt, an denen Änderungen vorgenommen werden. Der Rest kann unverändert bleiben.

 

Ausgangsmaterial:

 

Dateiformat: JPG (Alternativ TIFF)

Auflösung: 14.000 x 7.000 Pixel (2:1)

 

Vorherige Bearbeitung in:

Lightroom (RAW-Entwicklung), PTGui (Stitching), SNS-HDR (HDR), Photoshop (Retusche), ACDSee (Finalisierung)

 

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.            Sound einfügen

6.            Flash-Ausgabeformat festlegen

7.            Flash-Einstellungen bearbeiten

8.            Info-Link einfügen

9.            Button-Map-Link einfügen

10.          Grafikeffekte bearbeiten

11.          Mehrere Auflösungen einfügen

12.          Flash-Ausgabe

13.          HTML5-Ausgabeformat festlegen

14.          HTML5-Einstellungen bearbeiten

15.          Info-Link einfügen

16.          Button-Map-Link einfügen

17.          Erweiterte Einstellungen bearbeiten

18.          Mehrere Auflösungen einfügen

19.          Mobile Geräte

20.          HTML-Ausgabe

 

 

 

Los gehts...

 

 

1. Erstelle einen neuen Ordner > Füge das 2:1 Panorama (JPG oder TIFF) und den Sound (MP3) ein

 

 

 

 

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

 

 

 

 

         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.      4. Benutzerdaten „Ändern“ (Panorama-Informationen)

 

 

 

 

6.       5. 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.       6. Neues Ausgabeformat: Flash „Hinzufügen“

 

 

 

 

8.       7. Einstellungen bearbeiten (Automatisches Drehen & Skin-Auswahl)

 

 

·         Automatisches Drehen aktivieren und markierte Werte eingeben

·         Skin auswählen

·         „Bearbeiten...“ klicken

 
 

 

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

 

 

·         Doppelklick auf zu verlinkendes Feld

·         Doppelklick auf Internet-Adresse bei "Parameter"

 

 

 

·         Internet-Adresse bei "URL" einfügen und mit „OK“ bestätigen

 

 

 

10.    9. Map-Button bearbeiten (Standort zuweisen)

 

 

·         Doppelklick auf den Map-Button

·         Doppelklick auf die Internet-Adresse unter "Parameter"

·         anschließend Google Maps öffnen (www.google.de/maps)

 

 

 

·         Kamera-Standort suchen

·         Rechtsklick auf den entsprechenden Standort

·         Klick auf "Was ist hier?"

 

 

 

·         Klick auf die Koordinaten

 

 

 

·         Adresse aus der Adress-Zeile markieren & kopieren

·         Zurück zum Skin-Editor wechseln (Google Maps nicht schließen)

 

 

 

·         kopierte Adresse ins Feld „URL“ eintragen

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

 

 

 

11.    10. Grafikeffekte bearbeiten (Farbiges Vorschaubild)

 

 

 

 
 

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

 

 

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

·         Eine weitere Ebene "Hinzufügen"

·         Auflösungen in die Ebenen eintragen > kleinste Auflösung „Einbetten“

 

 

 

13.    12. Flash > Ausgabe (HTML-Datei „Deaktivieren“)

 

 

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

·         „Bremen_Pano_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.    13. Neues Ausgabeformat: HTML5 „Hinzufügen“

 

 

 

 

15.    14. Einstellungen bearbeiten (Automatisches Drehen & Skin Auswahl)

 

 

·         Automatisches Drehen aktivieren und markierte Werte eingeben

·         Skin auswählen

·         „Bearbeiten...“ klicken

 

 

 

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

 

 

·         Doppelklick auf zu verlinkendes Feld

·         Doppelklick auf Internet-Adresse bei "Parameter"

 
 

 

·         Internet-Adresse bei "URL" einfügen und mit „OK“ bestätigen

 

 

 

17.    16. Button-Map bearbeiten (Standort zuweisen)

 

 

·         Doppelklick auf den Map-Button und auf die Internet-Adresse unter "Parameter"

 
 

 

·         URL des noch geöffneten Tabs (Google Maps) nochmals kopieren und bei "URL" eintragen

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

 

 

 

 

18.    17. Erweiterte Einstellungen (Farbiges Vorschaubild)

 

 

 

 
 

18.    18. Mehrere Auflösungen (Multiresolution bzw. schrittweise höhere Auflösungen nachladen)

 

 

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

·         Eine weitere Ebene "Hinzufügen"

·         Auflösungen in die Ebenen eintragen > kleinste Auflösung „Einbetten“

 

 

 

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

 

 

·         5 Auflösungen „Hinzufügen“

·         Diese Auflösungen sind ideal für iPad, iPad 2, iPad mini, iPhone 1-6 und eine Vielzahl von Android-Geräten

 

 

 

20.    20. HTML > Ausgabe

 

 

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

·         HTML5 Ausgabe mit „OK“ bestätigen

·         „Ausgabedatei ‘Bremen_Pano_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 und ggf. Korrekturen vornehmen

 

 

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 entsprechend verknüpft werden. Bei Bedarf kann die *.html-Datei noch umbenannt werden ohne dass Verknüpfungsprobleme entstehen.

 

 

 

Das Ergebnis kann unter folgenden Link begutachtet werden:

http://www.pixel-liebe.de/panos/bremen/bremen.html

 

 

Ich hoffe meine Anleitung war übersichtlich und verständlich.

Vielen Dank an die Panorama-Community(.net) 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 unserer Facebook-Seite „Gefällt mir“ zu klicken oder uns einen kleinen Eintrag im Gästebuch zu hinterlassen.

Bei weiteren Fragen kannst du gern das Kontakt-Formular nutzen.

 

Facebook: pixelliebe

 

Tutorial als PDF runterladen

 

Vielen Dank

Gruß Thomas