How to fully customize a 360° diamond animation?
1. Creating a HTML profile
After your face-up or 360° diamond (brilliance, fire, sparkle or vertical) view is done and ready to be exported, give your file a name. Then, click on the add a new save type toggle and select HTML. Decide the size and image quality of your animation. The ideal and recommended size for the web is 800px. For image quality, select recommended.
Now your animation exportation is set and your HTML profile is ready to be created. Click on the settings button under HTML profile and the customization interface window will appear.
2. Your diamond animation spin settings
In the first step of the customization, determine the diamond animation rotation parameters. Under type choose stationary so the diamond animation will only start when the visitors click on the play button. After, decide its direction by selecting clockwise or counterclockwise. You can also increase or decrease the speed. The correct speed for a 90 pictures animations, is 0.007 s/frame.
Before moving on to the next step, verify that the auto rotate box is deselected and that the rotate while zoomed is selected.
Tips: Use the small visual on the right as a guide when choosing a setting option. You can also click on preview.
3. Adding zoom to your diamond animation
The magnification will work according to the size you chose for your animation. So if you select, for example, a zoom with a magnification of x3, the size of the animation’s photos needs to be 3 times smaller than the photos’ original size.
Note: In this tutorial, no zoom was included due to the fact the diamond was shot on QuickShot mode (smaller file size)
4. Diamond animation buttons
Your diamond animation performances are all set. Now you can personalize it. Under display buttons, choose the buttons you would like to include in your diamond interactive view. Select play/pause and full screen. Leave them as separate buttons and make sure they are selected for both device and mobile.
5. Creating hyperlinks
You can also add social media buttons to your diamond animation so visitors can click on them and share your interactive view on their profiles. Go to Social Media and select all platforms you would like to include on your diamond view.
If you prefer adding a custom link, for example a specific page from your website, select the custom link box and insert the URL.
6. Personalizing your diamond animation buttons
You have selected the buttons that will appear on your diamond animation. Now, choose their style and color by going on Buttons Style. Then, click on the color square and select a color that will match your website, company’s logo or the photographed diamond. Next, decide where you want them to be placed: left, right or center.
7. Selecting your diamond animation images format
For the last step of customization, choose your animation’s formats by clicking on Image Format. If you created an animation with background removal and would like to keep the transparent background, select PNG. If not, leave the format as JPG.
8. Saving your HTML Profile
Now your diamond animation customization process is done. Click on the save as toggle and give your animation profile a name, for example: diamond_animation. Then, click OK and your HTML Profile is saved and will be stored onto the HTML Profile’s library.
Next time you create another diamond animation, simply reapply this profile. This way, you skip the entire personalization process and save lot of time.
9. Exporting your diamond animation
Your diamond animation is fully customized and ready to be exported. Go back to the exporting interface and select the location you want to save it. Then, click on the save button.
The software automatically compile the 90 photos of your diamond and a file in HTML5 format is then create. Send this HTML5 file to a storage cloud where a link will be generated for you to be able to integrate it on your website. Your diamond animation will then be displayed online for all media readings without adding plugs-in !