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
Comments

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 = slideLine.id;

var item000 = webs[i];

var id000 = item000.id;

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

if (check000 === true) {

var oldParent = document.getElementById(id000);

var newParent = document.getElementById(slideId);

newParent.appendChild(oldParent);

}

}

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.

 

Related articles

How to embed fonts in Adobe Captivate How to embed fonts in Adobe Captivate

What do the RSC’s new production of The Tempest and flick learning have in common? RSC teams up with technology giants Intel

The lessons e-learning can take from how we use social media The lessons e-learning can take from how we use social media

How to make a responsive YouTube player for Captivate 8 How to make a responsive YouTube player for Captivate 8

The golden four The golden four

Top 10 benefits of e-learning [White-Paper] Top 10 benefits of e-learning [White-Paper]

 

 

 

 

categories

9 hours, 13 minutes ago

Have a few questions about the flick subscription? Then why not give our fabulous clients services team a call?… https://t.co/6YWBGtt8cu

1 day, 9 hours ago

If your customer data is leaked, do you know what the consequences are? A great big fine! Make sure you know what y… https://t.co/AGFKf09rgJ

5 days, 10 hours ago

Struggling to understand The GDPR? Don't panic, we've got you covered. Demo flick's #TheGDPRMadeSimple course today… https://t.co/RgiXzNquY9

Flick Learning Ltd

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