How to stop your Adobe Captivate animations and web objects from sitting on the top

How to stop your Adobe Captivate animations and web objects from sitting on the top

Posted on Nov 24, 2016

How to stop your Adobe Captivate animations and web objects from sitting on the top  



In last week’s blog we addressed a huge gap in Adobe Captivate’s feature list: embedding fonts. This week we’re going to be talking about how to fix one bug has that has bothered us from Day 1: web objects sitting on top of everything else.

As we’ve said previously, Captivate is a powerful content-authoring tool, and the option in recent builds to embed web objects and HTML5 animation has been invaluable to us.


Animation can bring content to life.

Sometimes animations serve practical purposes; to demonstrate something that a static image simply couldn’t. And whilst sometimes they are only decorative, they still do wonders to engage your learners.


How Captivate does animation

Adobe Captivate does offer some in-built animation features, which are fine but a little bit basic. If you want to start working with more complex movement, you will need to look at embedding HTML5 animation.

Adobe did offer a great, easy-to-use tool for building HTML5 animation: Adobe Edge Animate. They have since stopped releasing updates for this and seem to be focusing mainly on Adobe Animate (previously Adobe Flash Professional).

You can still download and use Edge Animate but it’s worth knowing that it will eventually be phased out.

In order to embed these animations, Captivate allows you to place them in web objects. After all, these animations are just HTML files, so they can be slotted into an iframe and they work flawlessly on every device.

Well, almost flawlessly…

These web objects in Captivate’s HTML output unfortunately will just sit on top of everything else no matter where you’ve arranged it to be. This is pretty frustrating when you’re designing your slide.

Let’s look at an example; we created this sharks animation for our topic on Assessing Risk as part the Health and Safety for Managers Course.

health and safety gif

But notice how the animation covers the navigation buttons? Whilst most learners will be familiar with the navigation of our courses by this point, this does not look professional.


But what can you do about it?

Well, you need to put the web object that contains the animation into the “cp-frameset” div, which already contains the rest of the elements on the page. As standard, Captivate does not place Web Objects in this div.

This can be achieved with a small piece of JavaScript.


The solution

1. In Captivate, go to the slide that contains your animation.

2. On the slide editor, arrange your animation where you would like it to sit in relation to everything else. Ie, if you want it behind everything else, click ‘Arrange >>> Send to back’.

3. Navigate to the ‘Properties’ panel on the right, and then to the ‘Actions’ tab.

4. From the drop-down menu underneath ‘On enter’, select ‘Execute JavaScript’.

5. Click ‘Script_Window’ and paste the following script and then click ‘OK’:

var webs = document.getElementsByClassName("cp-frameset");

var i;

for (i = 0; i < webs.length; i++) {

var frameset = document.getElementsByClassName("cp-frameset");

var slideLine = frameset[0];

var slideId =;

var item000 = webs[i];

var id000 =;

var check000 = id000.includes("Web_");

if (check000 === true) {

var oldParent = document.getElementById(id000);

var newParent = document.getElementById(slideId);




6. Next to ‘Script_Window’ click the little down arrow, and select ‘Current’.

7. Preview in HTML just to test that it’s worked OK. (Using tools like Chrome’s JavaScript console makes debugging issues much easier.)

8. And we’re done here!

 health and safety gif


Animation keeps our content lively and exciting. Want to take a look for yourself? Sign up for flick.


1 week, 4 days ago

How can we manage stress and mental health at work this #MentalHealthAwarenessWeek? Read our new blog post to find…

1 week, 5 days ago

Would you like to better understand how children and young people are affected by mental health issues this…

1 week, 6 days ago

Do you know the connection between work-related stress and mental health? Why not take a look at our Mental Health…

Flick Learning Ltd

Fargo Studios, 54 Grafton Street, Coventry, West Midlands, CV1 2HW. Copyright 2020 All Rights Reserved. Company No. 09270577