Maak een interactieve panorama-viewer met JC Panorama Editor

Een panorama is een foto of foto met een breed beeld.

In deze zelfstudie maken we een interactieve panoramaweergave met behulp van een applicatie van derden: JC Panorama Editor.


Stap 1: Kort overzicht

We maken een panorama-viewer met behulp van de JC Panorama Editor-toepassing en onderzoeken de vele beschikbare opties en mogelijkheden.


Stap 2: Wat is JC Panorama Editor?

Een uitstekende en duidelijke beschrijving is verkrijgbaar bij de auteurs van JC Panorama:

JC Panorama Viewer is een flitscomponent die kan worden gebruikt om verschillende soorten panoramische afbeeldingen weer te geven: gewoon, cilindrisch, bolvormig (equirectangular) en kubisch. Deze flash-panoramacomponent ondersteunt hotspots (informatief, weblink en panorama), horizontale en verticale muisbeweging, schuifzoom, overgangen en virtuele rondleidingen.

JC Panorama Editor is een zeer eenvoudig te gebruiken AIR-toepassing waarmee u panorama's kunt maken en bewerken die door JC Panorama Viewer kunnen worden geladen, evenals virtuele tours direct op uw bureaublad..

Stap 3: Waar haal ik het vandaan?

Je kunt twee versies van JC Panorama krijgen.

Een volledig ontgrendelde app voor $ 99 en een proefversie (zeer bruikbaar) met een paar beperkingen:

  • Logo watermerk tijdens het laden van het panorama.
  • Bolvormige / Equirectangular en Cubical panorama's uitgeschakeld in de editor.

Beide versies beschikbaar op de website van de component.


Stap 4: Voors en tegens

Er zijn altijd voor- en nadelen wanneer u componenten van derden gebruikt om uw toepassingen te ontwikkelen.

Pros:

  • Snel en eenvoudig panorama's maken
  • AIR-toepassing Compatibel met de meeste gebruikte platforms
  • Vier panoramatypes beschikbaar
  • Aanpassing door één klikopties

nadelen:

  • Betaalde versie nodig voor sferische / equirectangular en kubische panorama's
  • Soms genereert het een shake / korrelig effect tijdens het verplaatsen van de afbeelding

Stap 5: Hoe het werkt

JC Panorama gebruikt een op AIR gebaseerde schone interface met verschillende opties om uw panoramafoto te genereren.

Het proces is heel eenvoudig, kies een afbeelding, het type panorama dat u wilt maken en kies uit de verschillende opties om het resulterende SWF-bestand aan te passen.


Stap 6: Eenvoudig panorama

Ga en bekijk de demo. Het is een eenvoudig panorama dat wordt gegenereerd door de JC Panorama Editor-app. Ik zal u in de volgende stappen door het maakproces begeleiden.


Stap 7: Kies een afbeelding

Het eerste dat u hoeft te doen, is de afbeelding selecteren die u in uw panorama wilt gebruiken. Ik koos deze Flickr-afbeelding van Steve & Jemma Copley met een licentie onder Creative Commons.


Stap 8: Nieuw project

Open de JC Panorama Editor-applicatie en maak een nieuw project.


Stap 9: kies Bestanden

Een andere weergave wordt weergegeven in de app en druk op het teken '+' om de eerder gekozen afbeelding toe te voegen.

In dit paneel wordt u ook gevraagd uw project een naam te geven en het type panorama te selecteren dat u aan het maken bent.


Stap 10: Voorbeeld

Zodra u verdergaat, wordt een nieuw scherm zichtbaar waarin u de afbeelding ziet die wordt gebruikt en een optiepaneel aan de rechterkant. druk de Voorbeeld knop in de rechterbovenhoek van het venster om uw panorama in actie te zien.


Stap 11: Eigenschappen

Het paneel Eigenschappen bevindt zich aan de rechterkant van het scherm in het voorbeeldvenster en toont de beschikbare opties die u kunt kiezen om uw panorama aan te passen.

Laten we eens naar die eigenschappen kijken:

  • Type en afbeeldingen: Kies tussen de beschikbare panoramacategorieën en selecteer de afbeelding (en) ervoor
  • Automatisch afspelen: Als dit waar is, wordt het beeld in de geselecteerde richting verplaatst
  • Snelheid: De snelheid van de automatische beweging
  • Bewegingssnelheid: Snelheid van de geïnduceerde beweging
  • Richting: Richting het panorama begint te bewegen
  • Muisbesturing: Hiermee kan het panorama worden beheerd met de muis
  • Muis actie: Stelt het type beweging in dat moet worden toegepast wanneer het met de muis wordt bestuurd
  • Toetsenbord controle: Schakelt het panorama in met behulp van het toetsenbord
  • Zoom: Wijzigt de gezichtshoek van de afbeelding
  • Kwaliteit: Stelt de kwaliteit 1 in voor de laagste, 5 voor de hoogste
  • Glad: Voorkomt dat het beeld pixeleert
  • Lock Pan: Voorkomt dat de panning verandert
  • Lock Tilt: Voorkomt dat de kanteling verandert

Stap 12: Hotspots

De hotspots zijn markeringen die zijn gesuperponeerd in uw panorama en die een actie kunnen uitvoeren. Er zijn drie soorten hotspots:

  • info: Toont een tooltip wanneer ingeschakeld met de muis
  • Link: Navigeert naar een URL wanneer erop wordt geklikt
  • Panorama: Roept een ander panorama op en geeft dit weer

Stap 13: Panoramatypen

Vier soorten panorama's kunnen worden gemaakt met JC Panorama Editor, twee beschikbaar in de proefversie en vier in de volledige versie.

  • Plain: Verplaatst de afbeelding 180 graden zonder wijziging
  • Cilindrisch: Creëert een panorama van 360 graden
  • Spheric: Dit zijn panorama's van 360x180 graden
  • Cubic: Gemaakt door zes vierkante afbeeldingen weer te geven met een beeldveld van iets meer dan 90 graden

Voorbeelden van de vier typen zijn te vinden op de website van de component.


Stap 14: Virtuele rondleidingen

Een virtuele rondleiding is een verzameling panorama's die worden weergegeven door een enkele swf. U kunt een virtuele rondleiding maken door op te drukken Maak een virtuele rondleiding knop in het nieuwe projectscherm en selecteer de gewenste panorama's.


Stap 15: Opslaan en testen

Als u klaar bent, klikt u op de knop Opslaan in de rechterbovenhoek van het venster, dit zal uw werk opslaan. Nu bent u klaar om uw panoramische viewer te testen en te gebruiken.


Conclusie

U kunt zien hoe eenvoudig het is om een ​​Panorama-beeldviewer te maken met JC Panorama, probeer de verschillende opties en keuzes om uw eigen Panorama te maken!

Bedankt voor het lezen!