Animation over live footage

[phoenix2r]

Hey everyone

I'm close to taking an axe to my computer in frustration here - and I realise it's down to my inexperience.

I simply want to create some animation over live footage to illustrate somebody narrating a poem. They will be sat in a chair whilst the animations appear all around them. I tried to do it in After Effects but it just wasn't adequate and at the very least I really need some onion skinning tools.

So I moved across to Animate CC. First I tried to load external video with playback controller but couldn't get the video to go frame by frame so I could animate over it.

Then I tried to embed H.264 (design time only) but every time I try that the program becomes unresponsive (colour wheel just keeps spinning) - and I've tried splitting my clips up into 6-10 sec sections in case the file size was causing the issue.

I don't want to do it as an image sequence because I need the audio to guide me and I'm concerned about the sheer volume of jpegs I'm going to end up with (it's a 2 minute video in total).

Any advice on how to go about doing this would be greatly appreciated - even if it means moving across to different platform.

[Colin Holgate · Accepted solution]

Live footage would mean that the action you're about to see has not happened yet. Like, there is a camera sending the scene straight to a TV. Is that what you want to animate on top of?

Or do you mean that it's a prerecorded video of live action? If that's the case, the embed H.264 approach would be the right one. It should perform ok, though I haven't tested with 4K video. I'll try that some time.

One thing that might help would be to make a low data rate version of the video, and embed that, instead of the original. The data rate can be very low. For example, if you have a 25 mbps 4K video you could make a 2 mbps 720p version, and use that in an Animate FLA that is also 1280x720. Once you have created the animation to work with the low res video, you do File/Export Video, and in the options you would check the box to generate an alpha, and uncheck the box to convert it in Adobe Media Encoder. Also, set the resolution to the final size (this example is 4K):

That will give you quite a big MOV file, which you would take into Premiere or After Affects, and lay it on top of the original quality 4K video, and then render the full video.

[Colin Holgate]

I thought of an alternative approach. Do the same steps I described, only instead of exporting to video you would go into Publish Settings, and check the box for SWF Archive (make sure you are using an ActionScript 3.0 FLA, and not an HTML5 Canvas one).

Then, when you publish you get a zip file. Unzip that file and you will have a set of SWFs that can import to After Effects. Import those and place them on top of the original video. Each layer of the animation will be a different track in After Effects.

If your stage was 1280x720, in AE the layers will all get scaled up to the size of the video. For each layer you've imported, look for a star icon, and make sure that's selected. That will then scale up any vectors correctly:

If your animation is using bitmaps, set the bitmap to be lossless and allow smoothing in the library. Also have the bitmap at its final size, and scaled down in the animation. For example, a full width 4K image would be 3840 across, but in your 1280x720 animation it would be at 25%. It will then scale up correctly in AE.

Putting this line of code into frame 1 Actions panel will improve the quality too (even if you do the Export Video approach):

stage.quality = "16x16";

[phoenix2r]

As it turns out (after an hour on with an Adobe customer support person) that there is a third party software preventing me from importing video correctly. Although we've not identified the culprit I had another use account on my machine and when I switched to that the import video function worked great. I'm now happily animating away

Thank you everyone for all your help.

Always interested to hear about contests Colin.

[_keyframer]

If you use the SWF - AE approach as Colin suggested, keep in mind any camera moves made with the camera tool will be stripped from the SWF upon import to AE.

[albertd9194959]

Hmm...

What type of issues were you having in after effects, while animate can be used as a robust animation tool, after effects is far better suited to "explainer video" style animations.

Regards,

[Colin Holgate]

We should have an animation contest some time! I'm not an animator, but I know what good animators do in Animate. AE is for motion graphics, and it can do 3D and better motion blur, and perhaps a billion other things better than Animate. But for general animation I think my animator pals could do well in Animate.

[phoenix2r]

I was having problems with the erase tool and with the fact that I had no onion skin capabilities. I'm trying to get the scribble effect and I was using turbulent displace to cheat it but it was having lots of issues.

[rosebudd]

You can export your animation as Canvas with a transparent stage background, and then incorporate HTML5 video using z-index (CSS) to place the video below the canvas animation.

For instance for the CSS:

    #wrapper {

    width:300px;

    height:600px;

   position: relative;

  overflow: hidden;

    }

video {

position: absolute;

margin-left: -50px;

top: 190px;

/*min-width: 100%;

min-height: 100%;*/

width: 373px;

height: 210px;

z-index: -100;

}

And for your HTML

    <div id="wrapper">

  <video autoplay=""   id="bgvid" poster="posterImage_300x600.jpg">

      <script>

        var video = document.currentScript.parentElement;

        video.volume = 0;

        </script>

<source type="video/mp4" src="video.mp4"

  <img src="posterImage_300x600.jpg" title="Your browser does not support the <video> tag">

</video>

<div id="animation_container" style="background-color:rgba(0, 153, 255, 0.00); width:300px; height:600px;">

<canvas id="canvas" width="300" height="600" style="position: absolute; display: block; background-color:rgba(0, 153, 255, 0.00);"></canvas>

<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:300px; height:600px; position: absolute; left: 0px; top: 0px; display: block;">

</div>

</div>

        </div>