Advertisement

Create an Interactive Panorama Viewer Using JC Panorama Editor

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

A Panorama is a picture or photograph displaying a wide view.

In this tutorial, we'll create an Interactive Panorama Viewer using a third party application: JC Panorama Editor.


Step 1: Brief Overview

We'll create a panorama viewer using the JC Panorama Editor application and explore the many options and posibilities available.


Step 2: What is JC Panorama Editor?

An excellent and clear description is available from the JC Panorama authors:

JC Panorama Viewer is a flash component that can be used to display several types of panoramic images: plain, cylindrical, spherical (equirectangular) and cubical. This flash panorama component supports hotspots (informative, web link and panorama), horizontal and vertical mouse movement, scroll zoom, transitions and virtual tours.

JC Panorama Editor is a very easy to use AIR application that allows you to create and edit panoramas to be loaded by JC Panorama Viewer as well as virtual tours directly on your desktop.

Step 3: Where to Get it

You can get two versions of JC Panorama.

A fully unlocked app for $99, and a trial (very usable) version with a few limitations:

  • Logo watermark while preloading the panorama.
  • Spherical/Equirectangular and Cubical panoramas disabled in the editor.

Both versions available at the component's website.


Step 4: Pros and Cons

There are always pros and cons when using third party components to develop your applications.

Pros:

  • Fast and easy creation of panoramas
  • AIR Application Compatible with most used Platforms
  • Four panorama types available
  • Customization through one click options

Cons:

  • Paid version needed for spherical/equirectangular and cubical panoramas
  • Sometimes it generates a shake/pixelated effect while moving the image

Step 5: How it Works

JC Panorama uses an AIR based clean interface with several options to generate your panorama viewer.

The process is really simple, choose an image, the type of the panorama you want to create and choose between the several options to customize the resulting SWF file.


Step 6: Simple Panorama

Go and check out the demo. It's a simple panorama generated by the JC Panorama Editor app, I'll walk you through the creation process in the next steps.


Step 7: Choose an Image

The first thing you have to do is select the image you want to use in your panorama, I chose this Flickr image by Steve & Jemma Copley licensed under Creative Commons.


Step 8: New Project

Open the JC Panorama Editor application and create a new project.


Step 9: Choose Files

Another view will be presented in the app, press the "+" sign to add the image you chose before.

In this panel you will also asked to name your project and select the type of panorama you are creating.


Step 10: Preview

Once you proceed, a new screen will be revealed where you will see the image being used and an options panel at the right. Press the Preview button in the top-right part of the window to see your panorama in action.


Step 11: Properties

The Properties panel is located at the right part of the screen in the preview window, it shows the available options that you can choose to customize your panorama.

Let's take a look at those properties:

  • Type & Images: Choose between the available panorama categories and select the image(s) for it
  • Autoplay: If true, starts moving the image in the selected direction
  • Speed: The speed of the automatic movement
  • Motion Speed: Speed of the induced movement
  • Direction: Direction the panorama starts moving
  • Mouse Control: Enables the panorama to be controled using the mouse
  • Mouse Action: Sets the type of movement to apply when controled by the mouse
  • Keyboard Control: Enables the panorama to be controled using the keyboard
  • Zoom: Modifies the angle of view of the image
  • Quality: Sets the quality 1 for lowest, 5 for highest
  • Smooth: Prevents the image from pixelation
  • Lock Pan: Prevents the panning from changing
  • Lock Tilt: Prevents the tilting from changing

Step 12: Hot Spots

The Hotspots are markers that are superposed in your panorama that can perform an action. There are three types of hotspots:

  • Info: Shows a tooltip when enabled by the mouse
  • Link: Navigates to a URL when Clicked
  • Panorama: Calls another panorama and displays it

Step 13: Panorama Types

Four types of panoramas can be created with JC Panorama Editor, two available in the trial version and four in the full version.

  • Plain: Moves the image 180 degrees with no modification
  • Cylindric: Creates a 360 degrees panorama
  • Spheric: These are 360x180 degrees panoramas
  • Cubic: Made by rendering six square images with a field of view of slightly over 90 degrees

Examples of the four types can be seen in the component's website.


Step 14: Virtual Tours

A Virtual Tour is a collection of panoramas displayed by a single swf. You can create a Virtual Tour by pressing the Make a virtual tour button in the new project screen and selecting the desired panoramas.


Step 15: Save and Test

When you're done, click the Save button in the top-right corner of the window, this will save your work. Now you're ready to test and use your panorama viewer.


Conclusion

You can see how easy it is to create a Panorama image viewer using JC Panorama, try out the different options and choices to create your own Panorama!

Thank you for reading!

Advertisement