Exported OAM Widgets transparent background

Exporting & Previewing
1

Dear Users and Hype Support, I have encountered this issue with OAM widgets.

I need an interactive animation made with Hype Pro to be transparent on a web-page. The animation has to be played inside a website made with Adobe Muse. In order to achieve my desired result, I have checked the box “Make background transparent” in the Document Settings.

After that, I export to OAM Widget and go to Muse to place the file inside the page. When I insert it however, the background is still showing.

I have also tried to directly edit the head code and insert the style attribute to set the background color to transparent but it does not work.

I have even tried to manually change the file extension to .zip, decompress it and then edit the html code, adding the right style attribute. When converted again into OAM and then imported into Muse, It generated an importing error.

I have temporarily solved the issue exporting to an html folder from Hype and opening the html file with Edge Animate CC. Edge Animate recognizes the html code (with all the animations and assets) and is able to export to a fully functional OAM with transparency. However I feel this is not an optimal solution.

I would rather not having to resort to Adobe’s software. I sincerely think that Hype is better made and more flexible. I have used it before to successfully create iBooks Author widgets and even full websites.

Thanks in advance for the assistance

If it helps, I am currently running Hype Pro 3.5 on a MacBookPro Retina with Yosemite.

1 Like
3

To get a transparent Background for an OAM widget, there’s one line you need to add to the head of your document within Hype’s ‘Edit Head HTML’ area) via this post:

<style>
body {
background-color: transparent;
}
</style>

Also, check ‘Make Background Transparent’ as you’ve already done.

transparent-oam-test.zip (25.4 KB)

1 Like
4

Dear Daniel, thanks for your quick reply.

Indeed the solution you provided works fine, at least in the preview I have launched on Safari. Thanks.

1 Like
5

I found another solution that doesn’t require the transparent background png. This just makes the background color style transparent.

Add the following script to the head HTML:

<style>
body {
background-color: transparent;
}
</style>
3 Likes
6

Thanks I’ve updated my answer :slight_smile:

7

Doesn’t it seem logical to put this option next to the background color selector in SCENE menu?

1 Like
8

Perhaps, but there are multiple scenes, and a single ‘document’, so we have it as a document inspector option to show people that applying the property applies to all scenes.

9

I thought the same - but in the same way that the background could be white, black or any color - it could be transparent… But it seems for technical reasons that probably amount to the mad way the web works, we have to change some rudimentary settings and code in the file for transparency.

There are times I wish there was a time machine to go back and “influence” Berner’s Lee at the moment he was rushing to throw together standards for html… but then I might use that option for something other than web standards…

1 Like