Iconasys Advanced 360 Product View Creator. User Guide (Mac OSX)

Transcription

1 Iconasys Advanced 360 Product View Creator User Guide (Mac OSX)

2 Overview 360 Product View Creator UI 1. Upload Image Area 2. Image Viewing Gallery 3. Output Format and Button Create Preview Window 5. Saving Project & Output 6. License Dashboard Video Overview:

3 Getting Started: Please download the 360 Product View Creator file from the 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). *The program will be installed to and accessed from your Applications folder. Launch the Program: Using the shortcut icon on your desktop, launch the Iconasys 360 Product View Creator software.

4 You will be prompted for your license key this will be provided in a separate within 24 hours of purchase. Please enter this to get started with the software. *VERY 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 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.

5 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.

6 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.

7 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 ( 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:

8 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.

9 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

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

11 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).

12 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.

13 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.