'Bodymovin' Add on for After Effects for creating SVG's - any experience with Captivate import?

[psyshow]

HI All,

I came across this fantastic concept of an Add on for Adobe After Effects called Bodymovin. If you are use to using After Effects to animate and lost touch with Flash many years back (hand up here) then this seems like an absolute gold mine discovery. There are of course limits to what can be done but with some carefull thinking applied to each project, there are bound to be many opportunities in which this could be ideal. 

After some playing around with it yesterday to work out the barriers are process, I am comfortable that I can squeeze what I need out of it in terms of what can be produced. I am not a programmer or able to understand much scripting so this is also a massive bonus in what the tool could potentially do. My question is, does anyone have any experience with this in captivate? Is there anything in particular I should be watching out for using this as part of my captivate process?

The other thing I can't seem to figure out (here's where my lack scripting knowledge smacks me in the face) - when I export from AE into this format, I end up with a white boarder around the right and bottom of the comp and i can not figure out for the life of me why that is doing that.

Any help or thoughts around this greatly appreciated!!

[StevePixel]

Hi Psyshow,

Interesting AE plug-in and probably pretty helpful if you didn't have access to Adobe Animate. Does Bodymovin do something different than Animate?

In regards to your question I suspect it has something to do with aspect ratios set in AE. If you make your comp the same size as the the Captivate canvas the white borders will be outside of the Captivate publishing area so won't be rendered. At least theoretically.

Cheers

Steve  

[psyshow]

Hey Steve, thank you for taking the time to reply. I'm sure everyone will have a different use case scenario for wanting to include something like this in their work flow and for me there are several reasons why this would be incredibly useful. I had started using flash about 12 years ago but as my job role developed, it became more beneficial to educate my self with after effects as it was predominantly video work that was taking lead. I had downloaded animate CC recently in the hope something familiar would come back to me but I alas, I need to find time to get to grips with it again and unfortunately that isn;t looking likely over the next few months of projects.

Another key reason is the captivate project I would like to use this for is based on an animation i actually produced a while back built in After Effects. This heavily made use of animated masks and shapes to bring to life and whilst I wouldn;t be able to use the exact content created previously, the scenes, characters etc are already put together in a near as format for what this plug in can work with which is another major plus on my end.

Probably the biggest reason though is I can use after effects comfortably and am much more familiar with how to animate and do whats needed without any faffing around or scratching my head - which there will be a lot of as I get to grips with Animate CC.

this project initially kicked off when using Flash as an output from captivate wasn;t to much of an issue. This year has seen a big change in that with how the web in general views the original flash format. plus there was now a need to make it available on mobile, what was a very straight forward task with a packaged flash file turned into a how the hell do i pull this off in HTML5 - it is a very ambitious project to say the least. Then I discovered this plug in yesterday - for me this would be the exactly what was needed as it compliments and existing pipeline of assets already in After Effects.

I am really hoping the white boarder thing can be resolved so i can fit it in frame and allow it to scale as needed. I'd managed to get my other method running in HTML5 in a responsive project and functioning on a range of mobile devices both android and apple with everything functioning like a dream - it took me ages to come up with a way to achieve the same look like that and for it flow as smooth as did. But that process is a very off the wall approach and it still resorts to various assets being called from the server. This plug in would package a whole scene into one file, rather than multiple elements that need to be downloaded which is how the other method is currently working 😕  

[TLCMediaDesign]

Is this html/JS/json/css output from AE that you are zipping and inserting into Captivate?

[psyshow]

Hi, the export process does produce a JS file which you then zip and import to Captivate via import HTML 5 animations. I guess the thing I would like some insight to if possible is - whats the impact in using this? By going this route is it stable across all platforms? Do I limit where the content can be accessed from (mobile apple android etc)? Just any insights I should pay attention to  before using this as the solution of animated scenes in the project. Thanks for any help you may be able to offer.

[TLCMediaDesign]

I use the HTML5 animations all the time across all platforms. There can be some issues testing locally in Chrome.

My suggestion would be to open the page in an editor and see how it's built. You may have to match background colors with CP or define a width and height for the div container in the animation. If the borders or apparent borders are in the animation, match the html background color to the div holding the animation background color.

The ones I've seen are just a div container that is then loaded using JSON and css.

[StevePixel]

Hi psyshow,

Makes perfect sense to me! Thanks for the detailed response. After Affects is my go-to animation software as well. In regard to the white border issue I have three options to consider.

1. Oversize your comp in AE. If you make your comp slightly larger in AE it will output to that size. Captivate won't publish anything that's off the "stage" so it should hide your white borders.

2. Make your background in AE white so it blends with the border. Effectively hiding it

3. Wait for TLC to come up with JavaScript option for minimizing or hiding the border! 

Cheers

Steve

[psyshow]

Thank you both so much for taking the time to jump in here and shed some light on this. TLC, I suspect you are right about the borders being apparent rather than something that is or has to be. From other examples I have seen using this method, there is no indication this this should be something expected with every result produced from this format. I've tried testing different comp exports in an attempt to eliminate a cause and i can safely say it's not the AE comp size that seems to make a difference, not in my current example anyway! I will keep testing until I can find a cause on that front.

What I love about Adobe products is it allows me to do thing's that i wouldn't be able to do any other way. They simplify the process and create a tool set that someone who is more of a visual learner (me for one...) can pick up and start to get to grips with. I didn;t know a thing about scripting or values before picking up captivate last year and if i am honest, this is as complex as my knowledge gets beyond the conventional tool set. In todays world, there is an ever increasing need to get a better understanding on the functioning needed in the background and it is something I sorely lack right now. I have no idea what a div container is and the thought of opening up a script to edit it sends me in sweats. There are people who can open that up and they see the matrix right in front of them. I just random words and numbers and it makes no sense to me whats so ever!!

[StevePixel]

OK psyshow.

Now you have piqued my interest in Bodymove. I have downloaded the package from github and installed the plug-in in AE. it produces a single JS script. What is your workflow for getting it into Captivate? I have tried zipping it and bringing it in as HTML5 animation but I get failure to render when I try to view in HTML5 Browser.

Any suggestions?

Cheers

Steve

[psyshow]

I will happily share my learning's thus far ke home

Key take home - do not expect any error messages for things that have gone wrong. It produces a file format regardless but as you are probably discovering, that doesn't mean it'll simply work in captivate now. I've tried a few variations and haven't quite found the golden rule for this stuff yet but so you can see it working, I suggest the following: Create a very simple comp and use just the shapes tool in AE (it supports scale, opacity, rotation, strokes). It is key framed out put so it doesn;t do a frame by frame export approach - which is nice!

When you come export via bodymovin, in the options available, select 'standalone' & 'demo'. If you've not done anything it doesn;t like (no error message remember!), you should end up with both a JS file and an HTML file. In theory, you shouldn;t need the demo HTML 5 but for me, it confrms the process has worked and more importantly - unless I zip that file up with the JS file, captivate doesn;t seem to be able to read it. This might be whats tripping you up? Please do share any findings because from my understanding, it should function without the HTML demo file being present?

[StevePixel]

Thanks for the info, will definitely share what I find. Quick question when you installed the files from Github where did you put them? Did they have to go anywhere specific like AE Preset folder or such? 

[psyshow]

No problem, just happy someone else is treading the ground as well! I actually done this via the Adobe Add on page. I logged in with my CC account and clicked the purchase button (it might of said free - either way, it was done through the page below and linked to the CC account):

https://creative.adobe.com/addons/products/12557

Now, a word of caution, I'm not sure how this works but this wasn;t an instant transfer. I ended up downloading the Adobe extension Manager CC and tried installing the plug in that way - still nothing!. Tried logging in and out of the Creative Cloud desktop app a few times and then a message pinged up saying it had now been added to After Effects. i opened it up and - bingo!

Tip - ensure your sync settings are on in creative cloud desktop app! Once it's confirmed as available, you should be able to access it in AE via 'Window' then selecting 'extensions'

[psyshow]

Ok, with reference to the white boarder issue!.....  When viewing the HTML demo file via internet explorer, I clicked on view source format. Now like I said, i don;t understand anything on that front but the problem seemed to be obvious to even me! First few lines of the code:

#bodymovin{

background-color:#fff;

width:90%;

height:90%;

display:block;

overflow: hidden;

transform: translate3d(0,0,0);

text-align: center;

opacity: 1;

I don;t know where it's pulling the 90% reference from on height and width. I downloaded dreamweaver to see if I could edit the JS file and change those numbers to 100% and that has done the trick. I also found auto loop = true and changed this to false as I only want it to play once and this seemed to work as well. At least that's one issue dealt with!

I am still hit and miss with regards to where the boundaries are. I am bring my AI work in and converting to vector in AE. Some of the things work and others don't but there isn't anything that jumps out as a no no. Or I just haven't seen the pattern yet. Now i have the boarder issue sorted, I will see what the relatime rendering is like on the test mobiles i have here.....

EDIT: another tip..... when clicking on the destination folder for exporting in Bodymovin, do not change the default file name from 'data'. this it would seem has also been a route cause of some of the things that aren't quite working as expected! Probably once again showing how serious my lack of knowledge is with web stuff if thats a real obvious one.... I am so grateful I have found that out though!

[StevePixel]

Hey Psyshow,

Thanks for the updates. I finally got it to work for a simple animation. It is very particular about naming conventions and order in which things are done. I'm going to test over the next couple of days to see what it can handle. I will keep you posted!

Cheers

Steve

[psyshow]

I look forward to it! Now that the name convention issue is not happening, I am pushing this as much as a I can. I have to say, i am really impressed with this and it seems to be able to handle quite a lot of features which is amazing - especially the overall file size this generates. 

I'm not sure what your level of understanding is with all the background mechanic stuff in HTML etc. if it is like mine (none at all), then the question of layering the animation in the timeline behind objects (a button for example) is bound to pop up! I've found this little extract from the help file in captivate which solves that  Read below:

                     In Adobe Captivate 9, web objects and HTML 5 animations (when layered with other shapes) always appear on top

To work around this issue in HTML5, do the following:

1. In your Captivate installation folder, open the AdobeCaptivate.ini file.
2. Edit the file to change the value of UseWidget7 to 1 as follows:
   UseWidget7=1
3. Close and re-launch Adobe Captivate. 

You can now position your web objects on top or bottom, and they appear as expected in HTML 5. 

Note:

This workaround is applicable for HTML5 publish option and for static pages or animations only.


Apart from that, I'm just about to see how this runs on the various devices. I know at the moment that any button on the timeline created in captivate won't stop the HTML5 scene from playing by using the pause feature. i kind of guessed as much but I wouldn;t even no where to start in the scripting in being able to get the captivate button to control the HTML5 animation. That aside, to be able to use AE in this way to create packaged files with crisp vector outputs has been a delightful discovery!!

[TLCMediaDesign]

A note about the UseWidget7. In some browsers, you will not be able to interact with the HTML5 animation when it is pushed back in the stacking order.

If you know how to pause the animation in the HTML file, it's quite easy to add an eventListener to see if CP is paused or not.

[psyshow]

Hi TLC,  Thank you for the insights here. I have a button on the timeline and it functions when it needs to perform a next action style action (next slide, continue etc). I did see if it would function as a pause button, from what I can see though, it doesn;t effect the running of the HTML5 animation. Is this because of the layering of the stack order - or is it because the animation is running on it's own set of commands away from the captivate timeline? Many thanks for any help

[TLCMediaDesign]

It's because it is running in an iFrame, a completely separate window. As I said, you can add an event listener in the HTML5 Animation to listen for Captivate buttons being clicked. Captivate output is in the window.parent of the HTM5 Animation. YOu can listen to pause and play buttons:

window.parent.document.getElementById( 'play_btn' ).addEventListener( 'click', function () { //do something here });

window.parent.document.getElementById( 'pause_btn' ).addEventListener( 'click', function () {  //do something here });