Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)
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.
- Fast and easy creation of panoramas
- AIR Application Compatible with most used Platforms
- Four panorama types available
- Customization through one click options
- 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
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.
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!