May 10, 2018
Add Animate CC to Your Captivate Project
Comments
(10)
May 10, 2018
Add Animate CC to Your Captivate Project
I've been developing eLearning in a variety of formats since 1983
Guide 37 posts
Followers: 59 people
(10)

At the 3rd Annual Adobe eLearning Conference in Washington DC, I had the opportunity to host a session where I showed participants how you can easily incorporate Adobe Animate CC files within a web or responsive Captivate project. From my perspective, this is going to be a huge growth area for Captivate developers. Adding content from Animate can help you get pass road blocks you may have within Captivate. This post will step you through the process of getting an Animate CC file into Captivate. It will not focus on how to create an animation – that’s a later post.

Step 1

Let’s assume your HTML5 Canvas Adobe Animate CC file is done. Now we need to publish the file. The first thing we want to do is set the stage colour to be transparent. This way the file will appear in Captivate and not the learner can see the background rather than the default white box for the animation file. To start, click on the grey work space in Animate CC so you can access the Stage colour in the Properties panel.  Click the colour box and choose the No Colour from the colour picker window.

Step 2

In Animate, click File > Publish Settings. With the JavaScript/HTML category selected, click the check boxes for Center stage and Make responsive.

Step 3

Click the OAM Package. You can provide a different name for the OAM file or keep the default which is the same as the FLA file.

Step 4

Click the Publish button.

Step 5

Now switch to Captivate. For this blog, create a Responsive Project. Navigate to the slide that you want the animation to be stored on. Click Media > HTML5 Animation.

Navigate to the OAM file you published in Step 4 and click the Open button. Now you can position and resize the animation file. Because the Animate file was set to be responsive and centred (Step 2) the animation will resize itself based on the size of the size of the HTML5 Animation object.

Step 6

In the Properties of the OAM file, turn off the Border and Scrolling check boxes.

That’s it. Now you can preview your Captivate project in a browser.

10 Comments
2020-11-11 23:55:12
2020-11-11 23:55:12

What about runtime event communication between Animate and Captivate?

For example a button in the Animate animation that tells the Captivate slide to continue? I don’t think I can callback from within the iframe.

Or a button in Captivate at the end of the animation? I tried but it is hidden by the animation when I publish, even though it is on a higher layer. The only workaround I’ve found is to make the animation background transparent but this is obviously not ideal. And when I try to set the z-index of the animation (.cp-WebObject) to -1 it is covered in white by the button layer.

Like
(1)
2019-09-12 18:49:31
2019-09-12 18:49:31

I am having trouble loading a file like this, a captivate project with an animate video (only one slide and the video is interactive) to my LMS!  HELP!!!

Like
(1)
(1)
>
aleiah26315601
's comment
2019-09-13 10:02:07
2019-09-13 10:02:07
>
aleiah26315601
's comment

What is the output format you used for the Animate file? I hope you used OAM, not SWF?

Like
2019-03-23 18:36:42
2019-03-23 18:36:42

Yeah, I got my animate CC license and tried it. Works great! thank you a lot. By the way, I guess, OAM is much lighter than films (mp4)?

Like
(1)
(2)
>
Piotr Astramowicz
's comment
2019-03-23 19:35:26
2019-03-23 19:35:26
>
Piotr Astramowicz
's comment

Oh yes, much smaller!

Like
>
Piotr Astramowicz
's comment
2020-07-06 16:01:41
2020-07-06 16:01:41
>
Piotr Astramowicz
's comment

An OAM is actually a simple web page with some CSS and JavaScript thrown in. It’s much easier to process compared to video and takes up much less space so there’s less of a bandwidth hit for OAM vs Video.

Like
(1)
2018-05-11 19:42:36
2018-05-11 19:42:36

Piotr, I don’t think Flash CS6 allowed publishing to HTML animation…. You can still insert SWF’s in Captivate (has always been the case) but only for SWF output. With the EOL of Flash Player announced, not a good idea of course.

Like
(2)
2018-05-11 19:22:39
2018-05-11 19:22:39

I didn’t know about this possibility. Interesting. Does it work with Flash CS6 ?

Like
(1)
(1)
>
Piotr Astramowicz
's comment
2018-05-12 14:37:20
2018-05-12 14:37:20
>
Piotr Astramowicz
's comment

I believe that Flash CS6 is the first version that had CreateJS incorporated. I think that was in 2013. So there’s a possibility but I don’t have that version of Flash anymore. See if you can find the CreateJS tab and try exporting your file to HTML.

Like
2018-05-11 15:00:01
2018-05-11 15:00:01

Really enjoyed your session in DC. It made animate feel like something I might actually be able to use! Thanks for sharing additional details!

Like
(2)
Add Comment