Dynamic images

[inlife]

Dynamic images

[kanakiyajay]

After deconstructing the source files, the name value in the code which background.jpg should be the same as layer name in the composition

{
    "type": "image",
    "name": "background.jpg",
    "src": `http://localhost:${port}/assets/${background}`,
    "filters": [ {"name":"cover", "params": [1280, 720] }]
},

@inlife Do verify this.

[inlife]

Hello,

Yes, "name" portion of the asset, is the name this asset will be saved as in the project folder. And this name supposed to be the same name as it was used inside the composition. That's how it will be replaced.

[kanakiyajay]

My AE Project has a main composition which is composed of multiple compositions.
I have 2 queries:

Q.1) How to create that layer for background.jpg present in the boilderplate which will get replaced inside the main composition ? A quick wiki / tutorial / instructions will be really helpful

Q.2) Will the dynamic layer work in the multiple compositions ? If it is possible to do that, the boilerplate can contain an example of the same

[inlife]

Boilerplate project contains example of usage dynamic image with composition. So pretty much it shows all the things needed.

[kanakiyajay]

I have followed the example given in the boilerplate for composition

Here is my main composition which is getting rendered

Inside Scene 1:

Note: The [background.jpg] is an image layer with a placeholder image

start.js

let mixfile     = 'deep_60s.mp3';
let background  = 'background.jpg';
let datascript  = 'data.js';
let duration    = 300; // set max duration for 1 minute (equal to audio length)

let aepxfile  = 'slideshow.aepx';
let audio     = 'mp3';

/**
 * Settings for renderer
 * DONT FORGET TO CHANGE aebinary ACCORDING TO YOUR SYSTEM
 * On Windows might look like: 'C:\\Program Files\\Adobe\\After Effects CC\\aerender.exe'
 */
const aebinary  = 'C:\\Program Files\\Adobe\\Adobe After Effects CC 2014\\Support Files\\aerender.exe';
const port      = 23234;

/**
 * Dependencies
 */
const http      = require('http');
const url       = require('url');
const path      = require('path');
const fs        = require('fs');

const Project   = require('nexrender').Project;
const renderer  = require('nexrender').renderer;

/**
 * HTTP server
 */
let server = http.createServer((req, res) => {

    let uri         = url.parse(req.url).pathname;
    let filename    = path.join(process.cwd(), uri);

    fs.exists(filename, (exists) => {
        if(!exists) {
            res.writeHead(404, {"Content-Type": "text/plain"});
            res.write("404 Not Found\n");
            
            return res.end();
        }

        fs.readFile(filename, "binary", function(err, file) {
            if(err) {    
                res.writeHead(500, {"Content-Type": "text/plain"});
                res.write(err + "\n");
                return res.end();
            }

            // send 200
            res.writeHead(200);
            res.write(file, "binary");
            return res.end();
        });
    });
});

/**
 * Renderer
 */
server.listen(port, () => {

    console.log('Started local static server at port:', port);

    // addtional info about configuring project can be found at:
    // https://github.com/Inlife/nexrender/wiki/Project-model
    let project = new Project({
        "template": "project.aepx",
        "composition": "main",
        "type": "default",
        "settings": {
            // dont forget to setup the right output module; info:
            // https://helpx.adobe.com/after-effects/using/basics-rendering-exporting.html#output_modules_and_output_module_settings
            "outputModule": "Lossless",
            "startFrame": 0,
            "endFrame": duration,
            "outputExt": "avi"
        },
        "assets": [
            { "type": "project", "name": "project.aepx",    "src": `http://localhost:${port}/assets/${aepxfile}`}, 
            { "type": "image",   "name": "background.jpg",  "src": `http://localhost:${port}/assets/${background}`, "filters": [ {"name":"cover", "params": [1280, 720] }] },
            { "type": "image",   "name": "nm.png",          "src": `http://localhost:${port}/assets/nm.png` },
            { "type": "audio",   "name": `audio.${audio}`,  "src": `http://localhost:${port}/assets/${mixfile}` },
            { "type": "script",  "name": "data.js",         "src": `http://localhost:${port}/assets/${datascript}` }
        ]
    });

    console.log(project);

    // start rendering
    renderer.render(aebinary, project).then(() => {
        // success
        server.close();
        console.log('rendering finished');
    }).catch((err) => {
        // error
        console.error(err);
        server.close();
    });

});

The background.jpg is a different image than the placeholder used for testing purpose. The text layers are getting replaced successfully. The final video output does not replace the placeholder. I know I am missing something very obvious but not able to figure it out.

[inlife]

So if i understand correctly your issue is that image in the generated video is not getting replaced, right ?

[kanakiyajay]

Yes, it uses the placeholder image instead of background.jpg sent in assets

[inlife]

Most likely AE finds your placeholder image at the path where you have last saved project at via absolute path. Try to remove or rename the placeholder image in the folder where you last saved the project file and try again, to check if it works

[kanakiyajay]

I renamed the placeholder image in the folder. The place where the background was supposed to be inserted in the video generated is blank now. Output of after running node start.js

Started local static server at port: 23234
Project {
  uid: 'B1PA9AR-z',
  state: 'queued',
  template: 'project.aepx',
  composition: 'main',
  type: 'default',
  assets:
   [ { type: 'project',
       name: 'project.aepx',
       src: 'http://localhost:23234/assets/slideshow.aepx' },
     { type: 'image',
       name: 'background.jpg',
       src: 'http://localhost:23234/assets/background.jpg',
       filters: [Object] },
     { type: 'image',
       name: 'nm.png',
       src: 'http://localhost:23234/assets/nm.png' },
     { type: 'audio',
       name: 'audio.mp3',
       src: 'http://localhost:23234/assets/deep_60s.mp3' },
     { type: 'script',
       name: 'data.js',
       src: 'http://localhost:23234/assets/data.js' } ],
  actions: [],
  settings:
   { outputModule: 'Lossless',
     startFrame: 0,
     endFrame: 300,
     outputExt: 'avi' },
  errorMessage: null,
  callbacks: {},
  ticker: null,
  api: null,
  error: null }
[B1PA9AR-z] setting up project...
[B1PA9AR-z] downloading assets...
[B1PA9AR-z] renaming assets...
[B1PA9AR-z] filtering image assets...
[B1PA9AR-z] patching project...
[B1PA9AR-z] rendering project...
[ '-comp',
  'main',
  '-project',
  'D:\\best-gifts.in\\videos\\nexrender-boilerplate-master\\temp\\B1PA9AR-z\\pro
ject.aepx',
  '-output',
  'D:\\best-gifts.in\\videos\\nexrender-boilerplate-master\\temp\\B1PA9AR-z\\res
ult.avi',
  '-OMtemplate',
  'Lossless',
  '-e',
  300 ]
[B1PA9AR-z] verifying project...
[B1PA9AR-z] applying actions: moving result file...
[B1PA9AR-z] cleaning up...
----------------------------
[B1PA9AR-z] project finished
----------------------------

[inlife]

oh, well try maybe also to change image name from "[background.png]" to "background.png"
or rename the asset in the project settings json same way:

    "name": "[background.png]",

[kanakiyajay]

No, it did not work but I am now trying an alternate way of getting results

1. Rename all placeholders to something else
2. Rename the images you want to the folder with same name
3. Run aerender
4. Delete the images and rename the placeholders back

[inlife]

i see
well I will try to change the behavior of the AE via patching the project file in the new major version that i started planning recently, but it will take quite big amount time to make

[kanakiyajay]

The dynamic images are now working. I wrote some custom code to replace the images folder so that AE takes all images from that. Thanks for your help

I am facing issues in the data.js file.

All AE expressions are in below format ->

$.evalFile("D:/best-gifts.in/videos/nexrender-boilerplate-master/assets/data.js"); getProductName(1)

Before running aerender I am dynamically generating the data.js and replacing it. But the final video getting rendered does not contain the latest text, the text getting rendered is the same when it was edited.

I believe there can be multiple reasons behind these:

1. The composition which contains the next layer is 2-3 levels deep might be getting pre-rendered which is why it is not pulling data from the new file

2. The data.js file might be cached by AE someone in Windows which is not getting replaced by the new data.js file

[inlife]

As far as I understand, its the same reason as for image assets. AE remembers absolute path onto the asset and tries to fetch an older version if it was still there