Advertisement
Effects

Create an Interactive Panorama Viewer Using JC Panorama Editor

by

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!

Related Posts
  • Computer Skills
    Automation
    Introduction to Automator ServicesAutomator2
    Automator can be intimidating, but it’s a great tool for completing lots of small or large tasks. In this tutorial, I’ll show you how to put Automator to work in contextual and application menus. I’ll create four simple Automator services that can be accessed almost anywhere, and you’ll gain the tools to create services that can do almost anything.Read More…
  • Game Development
    Implementation
    Make a Neon Vector Shooter for iOS: First StepsIos geometry wars shooting 400px
    In this series of tutorials, I'll show you how to make a Geometry Wars-inspired twin-stick shooter, with neon graphics, crazy particle effects, and awesome music, for iOS using C++ and OpenGL ES 2.0.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Android SDK
    Android SDK: Virtual & Physical DevicesAndroid preview@2x
    We are learning about Android app development in this series. We already looked at the basic elements in an Android project and touched on user interface design and data storage along the way. In this tutorial, we are going to explore how to run and interact with your apps on physical and virtual devices. In the next part of the series, we will work through the process of running an app on a physical device and on the emulator. In this part, we'll look at getting our physical and virtual devices set up in Eclipse.Read More…
  • 3D & Motion Graphics
    3D
    Creating and Rigging a Non-Deformable Wooden Character in Maya: Part 33d and motion graphics
    In this part of the non-deformable character series, you'll learn how to apply UVs to your character using Maya's proprietary tools. Topics Include using various UV projection techniques, removing distortion using Maya's powerful relax algorithms, transferring UV's to save time and finally packing.Read More…
  • Game Development
    From Scratch
    Create an Artillery Game From ScratchMake an artillery game from scratch
    In this tutorial we're going to be building a two-player tank game in Multimedia Fusion 2. It will feature custom 360 degree shooting and destructible terrain. You don't need any previous programming or game development experience to follow along with this tutorial, and if you don't have Multimedia Fusion 2 you can try the free demo.Read More…