Erstellen Sie einen interaktiven Panorama-Viewer mit dem JC Panorama Editor

Ein Panorama ist ein Bild oder Foto, das eine große Ansicht darstellt.

In diesem Lernprogramm erstellen wir einen interaktiven Panorama-Viewer mit einer Drittanbieteranwendung: JC Panorama Editor.


Schritt 1: Kurzübersicht

Wir erstellen einen Panorama-Viewer mit der JC Panorama Editor-Anwendung und erkunden die vielen verfügbaren Optionen und Möglichkeiten.


Schritt 2: Was ist der JC Panorama Editor??

Eine hervorragende und klare Beschreibung erhalten Sie von den Autoren von JC Panorama:

JC Panorama Viewer ist eine Flash-Komponente, mit der verschiedene Arten von Panoramabildern angezeigt werden können: Ebene, zylindrisch, sphärisch (gleichwinklig) und kubisch. Diese Flash-Panorama-Komponente unterstützt Hotspots (informativ, Weblink und Panorama), horizontale und vertikale Mausbewegungen, Bildlauf-Zoom, Übergänge und virtuelle Touren.

Der JC Panorama Editor ist eine sehr einfach zu verwendende AIR-Anwendung, mit der Sie Panoramen erstellen und bearbeiten können, die vom JC Panorama Viewer geladen werden, sowie virtuelle Touren direkt auf Ihrem Desktop.

Schritt 3: Wo bekomme ich es?

Sie können zwei Versionen von JC Panorama erhalten.

Eine vollständig freigeschaltete App für 99 US-Dollar und eine (sehr brauchbare) Testversion mit einigen Einschränkungen:

  • Logo-Wasserzeichen beim Vorladen des Panoramas.
  • Im Editor sind sphärische / gleichwinklige und kubische Panoramen deaktiviert.

Beide Versionen sind auf der Website der Komponente verfügbar.


Schritt 4: Vor- und Nachteile

Bei der Verwendung von Komponenten von Drittanbietern für die Entwicklung Ihrer Anwendungen gibt es immer Vor- und Nachteile.

Pros:

  • Schnelle und einfache Erstellung von Panoramen
  • AIR-Anwendung Kompatibel mit den meisten verwendeten Plattformen
  • Vier Panoramatypen verfügbar
  • Anpassung durch Ein-Klick-Optionen

Nachteile:

  • Kostenpflichtige Version für sphärische / gleicheckige und kubische Panoramen erforderlich
  • Manchmal erzeugt es einen Verwacklungs- / Pixeleffekt, während das Bild verschoben wird

Schritt 5: Wie es funktioniert

JC Panorama verwendet eine AIR-basierte, übersichtliche Benutzeroberfläche mit mehreren Optionen, um Ihren Panorama-Viewer zu generieren.

Der Vorgang ist sehr einfach. Wählen Sie ein Bild, den Typ des Panoramas, das Sie erstellen möchten, und wählen Sie eine der Optionen, um die resultierende SWF-Datei anzupassen.


Schritt 6: Einfaches Panorama

Schauen Sie sich die Demo an. Es ist ein einfaches Panorama, das von der JC Panorama Editor-App erstellt wurde. In den nächsten Schritten werde ich Sie durch den Erstellungsprozess führen.


Schritt 7: Wählen Sie ein Bild aus

Als erstes müssen Sie das Bild auswählen, das Sie in Ihrem Panorama verwenden möchten. Ich habe dieses Flickr-Bild von Steve & Jemma Copley ausgewählt, das unter Creative Commons lizenziert ist.


Schritt 8: Neues Projekt

Öffnen Sie die Anwendung JC Panorama Editor und erstellen Sie ein neues Projekt.


Schritt 9: Wählen Sie Dateien

Eine andere Ansicht wird in der App angezeigt. Drücken Sie das Pluszeichen (+), um das zuvor ausgewählte Bild hinzuzufügen.

In diesem Fenster werden Sie außerdem aufgefordert, Ihrem Projekt einen Namen zu geben und den Typ des Panoramas auszuwählen, das Sie erstellen.


Schritt 10: Vorschau

Wenn Sie fortfahren, wird ein neuer Bildschirm angezeigt, auf dem Sie das verwendete Bild sehen, und rechts ein Optionsfeld. Drücken Sie die Vorschau Schaltfläche oben rechts im Fenster, um Ihr Panorama in Aktion zu sehen.


Schritt 11: Eigenschaften

Das Eigenschaftenfenster befindet sich im Vorschaufenster auf der rechten Seite des Bildschirms und zeigt die verfügbaren Optionen an, die Sie zur Anpassung Ihres Panoramas auswählen können.

Schauen wir uns diese Eigenschaften an:

  • Typ & Bilder: Wählen Sie zwischen den verfügbaren Panoramakategorien und wählen Sie die Bilder dafür aus
  • Automatisches Abspielen: Wenn ja, wird das Bild in die ausgewählte Richtung verschoben
  • Geschwindigkeit: Die Geschwindigkeit der automatischen Bewegung
  • Bewegungsgeschwindigkeit: Geschwindigkeit der induzierten Bewegung
  • Richtung: Richtung, in der sich das Panorama bewegt
  • Maussteuerung: Ermöglicht die Steuerung des Panoramas mit der Maus
  • Mausaktion: Legt den Bewegungstyp fest, der angewendet werden soll, wenn er mit der Maus gesteuert wird
  • Tastatursteuerung: Ermöglicht die Steuerung des Panoramas über die Tastatur
  • Zoomen: Ändert den Bildwinkel
  • Qualität: Legt die Qualität 1 für den niedrigsten Wert und 5 für den höchsten Wert fest
  • Glatt: Verhindert die Pixelierung des Bildes
  • Lock Pan: Verhindert, dass sich das Verschieben ändert
  • Lock Tilt: Verhindert, dass sich die Neigung verändert

Schritt 12: Hot Spots

Die Hotspots sind Markierungen, die in Ihrem Panorama überlagert werden und eine Aktion ausführen können. Es gibt drei Arten von Hotspots:

  • Info: Zeigt einen Tooltip an, wenn er mit der Maus aktiviert wird
  • Verknüpfung: Navigiert zu einer URL, wenn Sie darauf klicken
  • Panorama: Ruft ein anderes Panorama auf und zeigt es an

Schritt 13: Panoramatypen

Mit JC Panorama Editor können vier Arten von Panoramen erstellt werden, von denen zwei in der Testversion und vier in der Vollversion verfügbar sind.

  • Einfach: Verschiebt das Bild ohne Änderung um 180 Grad
  • Zylinder: Erzeugt ein 360-Grad-Panorama
  • Sphärisch: Dies sind 360x180 Grad Panoramen
  • Kubisch: Hergestellt durch Rendern von sechs quadratischen Bildern mit einem Sichtfeld von etwas mehr als 90 Grad

Beispiele für die vier Typen finden Sie auf der Website der Komponente.


Schritt 14: Virtuelle Touren

Eine virtuelle Tour ist eine Sammlung von Panoramen, die von einem einzelnen SWF angezeigt werden. Sie können eine virtuelle Tour erstellen, indem Sie die Taste drücken Machen Sie eine virtuelle Tour Schaltfläche im neuen Projektbildschirm und wählen Sie die gewünschten Panoramen aus.


Schritt 15: Speichern und testen

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Speichern in der rechten oberen Ecke des Fensters. Dadurch wird Ihre Arbeit gespeichert. Jetzt können Sie Ihren Panorama-Viewer testen und verwenden.


Fazit

Sie können sehen, wie einfach es ist, einen Panoramabildbetrachter mit JC Panorama zu erstellen. Probieren Sie die verschiedenen Optionen und Optionen aus, um ein eigenes Panorama zu erstellen!

Danke fürs Lesen!