Iconasys Advanced 360 Product View Creator

User Guide (Windows OS)

Iconasys Inc. © 2013-2015

Overview – 360 Product View Creator UI

1. Upload Image Area

2. Image Viewing Gallery

3. Output Format and Button ‘Create’

4. 360 Preview Window

5. Saving Project & Output

6. License Dashboard

Video Overview: https://www.youtube.com/watch?v=HSorj4rELfo

1

2

4 5

3

6

Iconasys Inc. © 2013-2015

Getting Started: Please download the 360 Product View Creator file from the

email you received. After download, double-click to install – this will walk you through the

install wizard. *Note, a requirement of this program is Adobe AIR. If you do not currently have

Adobe AIR installed, it will ask you if you wish to install this – please do so (this is completely

free).

*It is suggested to check the ‘Add shortcut icon to my desktop’ option.

Iconasys Inc. © 2013-2015

Launch the Program: Using the shortcut icon on your desktop, launch the

Iconasys 360 Product View Creator software.

You will be prompted for your license key – this will be provided in a separate email within 24

hours of purchase. Please enter this to get started with the software.

*IMPORTANT – Please check in the License Dashboard area (button in the bottom right corner

of the software) and if it asks for a domain, please enter your domain. If you do not have a

domain, please simply use http://test.com. domain:

Creating a 360 Product View: Return to the main UI (using the Return button in the top

left corner of the software). You will want to now import a set of images into the program for

creating a 360 Product View. To do so, you can either click on the Load Images window or click

and drag a set of images over top of the Load Images window. To select a set of images in a

batch process click on the first image in the set, hold Shift then click on the last image of the

set. This will automatically select every image in between.

Iconasys Inc. © 2013-2015

Load Preview: After images have been imported into the program, you are now able to Load

a Preview. To do so, click the Reload Preview button – this will now show your 360 Product

View in a small viewer window:

Customizing your Animation: After you have double checked in the Preview to ensure all

images were imported in the correct order (this is based on naming – ensure sequential

numerical order ex. Filename-01, Filename-02… Filename-35, Filename-36), it is time to

customize your 360 product view (if required). Steps are defined in the suggested workflow

however feel free to navigate and customize in your own preferred workflow.

*It is important to note that any preferences set for a 360 Product View (everything but

Hotspots) will be retained to streamline the 360 Product View output workflow.

Iconasys Inc. © 2013-2015

Choose Skin: Users will first want to define the Skin (player buttons) that will be used in the

360 Product View. There are 3 defaults we have created for you.

Choose Output Size: The output size is only important should you not wish to work with the

iFrame file. It is however good practice to define an output size that is consistent with the

frame size of your images. Ex. If you imported images are cropped in a square, choose a square

output size. Users can define a custom output size in the drop down menu:

Adjusting Speed at which 360 View Will Spin: In the Adjust Settings area of the main

UI, you will see a drop down next to the text Duration of one full turn. It is in this area you can

define the speed at which the 360 will turn (one full rotation). After a change has been made to

the speed, users can chose to Reload preview in the Player preview viewing window.

Include original images for HI-RES zoom: Should you wish to keep your original

resolution images in the 360 view (for deep zooming), please ensure you check the checkbox.

Note, including original resolution images can significantly increase file size.

Iconasys Inc. © 2013-2015

Choose Output Size: You will next want to define the Project title. This is your title tag

<title>Example Title</title> – and will typically be the name of your product.

Advanced Settings: By clicking the Advanced Settings button, you can further customize

your 360 product view. Options will include:

Player Options (after making any of these changes, you can click the Reload Preview button

in the Player Window to view the changes you have applied):

Player Buttons – Choosing which buttons to include and omit.

Control – Mouse control click and drag direction, Mouse control drag speed, Zoom limit

(Defined as a percent. For ex. Your viewer is at 500 x 500 pixels and your original images are

1000 x 1000 pixels you would want to choose a value of 200). Users can also define to use the

mouse wheel for zooming in/out.

Rotation – Pre-rotate after loading, Rotate just once, Rotate direction and Bounce rotation

Multi Level (Hemispherical) Viewing – Should you wish to compose a 3D product view with

multiple rows, users can Enable and define Vertical Steps, Horizontal Steps, and Vertical

Sensitivity. When importing a set of multi-row images, please ensure they have the same

filename with an increasing numerical suffix. For ex. You shoot 20 images per row at 3 different

rows (total 60 images). Images should be named: filename-01, filename-02… filename-59,

filename-60. Then in the Multi Level Rotation options you will choose 3 Vertical Steps and 20

Horizontal Steps.

Hotspots: User can add hotspots to their 360 Product Views. To get an idea of what a hotspot

is, see this example (http://iconasys.com/Downloads/Nikon-D5300-360-Hotspots/).

Step 1. To get started, click the ‘Click to Add HotSpot’ button. This will pop up the hotspot type

screen in which you will define which action you want the hotspot to take. Options are:

Image – when the hotspot is clicked it will upload an additional image

JavaScript: Clicking the hotspot will trigger a custom JavaScript function (for advanced

users)

URL Hotspots: Clicking the hotspot will open a URL of your choice (for ex. Maybe you

want to link a hotspot to a video of the product)

Blank Hotspot: The hotspot will simply show as a hotspot and it cannot be clicked to

perform an action.

Step 2: Users can define their Hotspot:

Iconasys Inc. © 2013-2015

HotSpot Title – This is for your own reference

Hotspot Class – When adding a hotspot, you have the option to enter your own css declaration

for the hotspot (and you can use css transformations to add animations). For Advanced users

Hotspot Icon – This is the icon you will be inserting onto the image. To upload your own, please

select the New Icon button to the right and upload your own .png format file.

Rotates with Object – this will enable a hotspot to rotate with an image (always use this option

even if you are placing a single hotspot)

Fixed – The hotspot will stay in a single location (we do not suggest this method, you can still

enter a hotspot to stay in a single place using the Rotates with object method.

Title – This is the title that will show when a viewer hovers over the hotspot

Step 3: Click and hold on the Place button then drag the hotspot onto the image in the Hotspot

Editor window.

Iconasys Inc. © 2013-2015

Step 4: After placing your hotspot on the image, use the Next and Prev. buttons under the

Hotspot Editor window to adjust the frame (and add additional hotspots if required). If you are

done at this step, click the Return button in the top left and the hotspot(s) will be retained.

Optional – Hotspots Rotating with 360 View

Step 5: Should you wish to have your hotspot rotate with your images, please click Start Wizard

button. In this step, you will want to define the furthest left point (click and drag hotspot to this

location then click the OK Left checkbox) middle (again click and drag hotspot to define the

Iconasys Inc. © 2013-2015

middle then click the OK Center checkbox, then last for the Right. For ex:

Iconasys Inc. © 2013-2015

Click the Continue, you should see a circle with a bunch of little dots (the dots defining where

the hotspot will show at every frame (if you click Next or Prev. button’s you will see where the

hotspot will show (denoted by the little red dot) at each frame.

Should the wizard fail to create the hotspot, go to your middle hotspot and reset it by clicking

and dragging either up or down (don’t worry you can change this after).

Iconasys Inc. © 2013-2015

Step 6: Should you wish, you can adjust the ellipse properties (the circle of hotspots) in this last

step. You can also choose to only show the hotspot for the front of the product (click Hide in

back checkbox). Next, click Done.

This will take you back to the main Hotspot UI. Here you can again click the Next and Prev.

buttons to view the hotspots and adjust their location (click and drag the hotspot in the

Hotspot Editor window based on the viewing frame) or Remove them (click delete when on the

desired frame you do not wish the Hotspot to be present and it will be removed). Should you

wish to add an additional hotspot(s), simply click the Click to add Hotspot button and repeat

steps 1-6.

Now, you can click the chose to further customize your 360 view by clicking on any of the other

tabs (Analytics, Customize, Output) or simply hit the Create button above the Hotspot Editor

window to create and output your 360. Also, to return to the main UI, click the Return button in

the top left of the UI.

Advanced Settings Continued…

Analytics – Enter your Google Analytics ID to track user engagement in your 360 product views

Customization – Watermark your 360 Product Views with your own custom logo. To upload just

click the browse button and import it into the program (.png format only). Otherwise, you can

enter a URL to a hosted logo that will be inserted in the file. To define the location, do so using

the Offset X and Y values, this is pixels from the top right corner of the frame.

In this area users can also create a custom right click menu – that is when a viewer right clicks

on the 360 View, it will show whatever URL and Text you have entered into these fields.

Outputting your 360 Product View

Users can output the 360 Product View by clicking the Create button. This will always remain

above the Player Preview Window OR in the main UI under #3 on the left hand side.

After you have defined your 360 Product View settings, they will be retained inside the

software (everything except Hotspots). So when creating your next 360 Product View, it will be

as simple as importing a set of images and clicking Create (should you not wish to add

hotspots).

Hosting your 360 Product View

Now you are ready to host your 360 Product View. Simply upload the entire folder to your

server, copy the path and then embed OR link.

Iconasys Inc. © 2013-2015

The index.html file will be the viewer with the defined frame size.

The iframe.html file will be the file used to embed into your website.