Highlighted

Updating SWF to HTML5

Participant ,
Nov 19, 2018

Copy link to clipboard

Copied

Almost all the Captivate projects I have done over the years have been SWF.  I am sorry to see it go, but I understand why.

I have a couple of SWF pieces I need to update to HTML5.  However, they both make heavy use of rollovers, and some other Flash-only effects, such as blurs, glow and fade.

I really don't want to redesign the screens that use these effects, but I have not seen any good alternatives in HTML5.  I just installed Captivate 2019, so I have not had a chance to explore what is new, but I don't think there is anything that really addresses my concerns.

Any suggestions?

Thanks.

Adobe Community Professional
Correct answer by RodWard | Adobe Community Professional

What kind of rollover objects were you using?  I have not had problems with either rollover images, rollover text captions, or rollover smart shapes.  The only type of rollover object in Captivate that was guaranteed to never work in HTML5 was the Rollover Slidelet because that was only possible in SWF and not compatible with HTML5.

Views

250

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Updating SWF to HTML5

Participant ,
Nov 19, 2018

Copy link to clipboard

Copied

Almost all the Captivate projects I have done over the years have been SWF.  I am sorry to see it go, but I understand why.

I have a couple of SWF pieces I need to update to HTML5.  However, they both make heavy use of rollovers, and some other Flash-only effects, such as blurs, glow and fade.

I really don't want to redesign the screens that use these effects, but I have not seen any good alternatives in HTML5.  I just installed Captivate 2019, so I have not had a chance to explore what is new, but I don't think there is anything that really addresses my concerns.

Any suggestions?

Thanks.

Adobe Community Professional
Correct answer by RodWard | Adobe Community Professional

What kind of rollover objects were you using?  I have not had problems with either rollover images, rollover text captions, or rollover smart shapes.  The only type of rollover object in Captivate that was guaranteed to never work in HTML5 was the Rollover Slidelet because that was only possible in SWF and not compatible with HTML5.

Views

251

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2018

Copy link to clipboard

Copied

If your target audience will be using touch screen devices, then rollovers have no use there.  You can still use them for mouse-driven desktop users.  HTM5 itself doesn't prevent using Rollover Smart Shapes for example, but the HTML5 tracker in Captivate will flag them as unsupported.

Look into using Adobe Animate (previously Adobe Flash) if you want fancier HTML5 effects.  You can bring them into Captivate as OAM files.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

Thanks Rod.  When I published to HTML5 though, the rollovers didn't work with a mouse, so I assume I will need to do something different for those.

I will look at Adobe Animate.  I have that as part of Creative Cloud.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Nov 20, 2018

Copy link to clipboard

Copied

What kind of rollover objects were you using?  I have not had problems with either rollover images, rollover text captions, or rollover smart shapes.  The only type of rollover object in Captivate that was guaranteed to never work in HTML5 was the Rollover Slidelet because that was only possible in SWF and not compatible with HTML5.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

Thanks Rod.  Yes, I am using rollover slidelets.  I play audio when the user mouses over a character.  Thanks for clarifying, but kind of disappointing.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
RodWard LATEST
Adobe Community Professional ,
Nov 21, 2018

Copy link to clipboard

Copied

OK.  Well that explains why your rollovers were not working. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

You didn't mention if you also plan to create resposive projects, with Fluid Boxes? I wrote a blog post explaining how to mimick the rollovers in that case for desktop/laptop users (Rod explained that mobile will not allow rollovers, but fuid boxes don't even allow to insert them):

Rollover in Fluid Boxes? - Captivate blog

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

Thanks Lieve.  I will definitely take a look at the blog!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group