Replacing an image inside a comp with a script

[sanabria_visionary]

Hello all! I have an image inside of a comp I need to change based on a variable, for example, when a counter reaches a certain number the image will change accordingly. I believe scripting is the best way to do this but have no clue where to start. Is there a way, perhaps by changing the image source, to set up a script so that the image changes automatically?

Attached is an image with an example scenario, the tennis player is shown with the number 200, but if this number were to reach 300 I would need the image to change to another one in the project file or through a source file path.

Thank you fo your time.

[Rick Gerard]

If you want the script to import images and arrange them in the timeline then change the visible image based on an animated counter you have a lot of work to do. You'll have to figure a way for the script to set up the animation of the counter,  add every image as a layer, then apply an expression that sets the opacity of each layer based on some kind of if statement. Unless you have hundreds of these comps to create I would just use a fairly simple expression based on the layer index and tied to the opacity, then load the images into the timeline in order. Something like this:

c = thisComp.layer("counter").text.sourceText.value;
cMin = index * 100;
cMax = (index + 1) * 100; 
if(c >= cMin && c <= cMax) o = 100;
else 0

 Now every time the counter goes up by 100 a different layer becomes visible. 

I don't know if that will help, but that's how I would do it.

[sanabria_visionary]

Thank you very much for your response. I think I should have elaborated more on the scenario that I have worked up. I'm building a responsive template to display sports information. As we input data into the project, via Dreamweaver, we have an image that needs to change accordingly based on whatever data is being represented. My thought process was to create some kind script for an object that would change it's source image based on the number data that was being imported into AE from the Dreamweaver file. It's a complex scenario but if I could accomplish it with a slider control, as Marinr84 explained, with all the images inside of a precomp and linking it all through their opacity, that may be the only feasible solution.

[Martin_Ritter]

As @Rick said, unless you plan the production of a large amount of videos, I fully automated script is too much work to set up (even with Templater from AEScripts).

Best workflow is to put all images in your timeline and precomp those ("Images"). On the maincomp ("Main") you add a null ("Controller") and put a slider controll on this null ("ImageSelector").

On every opacity of every image in your Images-comp, you put this expression:

controller = comp("Main").layer("Controller").effect("Slider Control")("ImageSelector");
myIndex = thisLayer.index;

if (controller == myIndex){
	100;
} else {
	0;
};

If you don't want to work with numbers 1,2,3, ... but 100,200,300... you can just add this to the index. 

myIndex = thisLayer.index*100;

If you already have the numbers in your project (on a text layer, as Rick suggested), you can read out those as Rick showed.

But you can also go the reverse way and set those numbers with the slider.

Something like this on the source text proberty of the text layer will do it:

MyNumber = comp("Main").layer("Controller").effect("Slider Control")("ImageSelector");

And again, if you need those numbers in hundreds, you can make the slider value as big as needed by setting it, or just add a multiplicator in the expression:

MyNumber = comp("Main").layer("Controller").effect("Slider Control")("ImageSelector")*100;

*Martin

[sanabria_visionary]

Thank you for your response, it was a great starting point for troubleshooting this problem. I feel I should elaborate on the scenario I have encountered. I am developing a responsive template in After Effects to be used by a sports data company. As we receive data, it is placed into a Dreamweaver file which After Effects is linked to and uses to input all of its numerical data. We have an image that needs to change based on the numbers that are being input into the text boxes. Originally I thought I could write a script for an AVObject that would change its source image based on the numbers but have discovered that even beginning to set this up is far outside of my skill set. Having all of the images inside of a precomp and linking the numbers to each layer's opacity may be the best bet. Any further insight you may have would be greatly appreciated.

[Martin_Ritter]

When you receise numberical data, you should check out CSV import into AE for a greater automation. And if the project is large enough, check out Templater: https://aescripts.com/authors/c-e/dataclay/. Both are great ways to flexibility and automation, but I don't know if it's overkill for your purpose. *Martin

[sanabria_visionary]

CSV import is exactly what we are implementing. The challenge is getting elements inside the project to respond to the data that is being imported. We have managed to create a responsive bar graph that grows in relation to the data, but that was with shape layers. This changing image issue has been a bugger for two weeks.

[CPTCpost_01]

Hey

Did you figure a way to change the images?