Copy link to clipboard
Copied
So what I'm trying to do is have a shape layer fit certain text sizes with padding and the like. I've got code on the text to arrange itself vertically depending on their index order and align themselves depending on the width of the text layers. Using a drop down they align right, left and center. The problem I'm coming across is the shape layer adds a little extra on the bottom after it calculates the heights, padding and the extra space from in between the text layers. Also, i'm specifically targeting certain layers and not all layers.
I have a feeling eithr the math is off in the gaps or I need to find the last keyword index and take the height of just that one. I'm not sure.
Here's the code for the shape layer:
// Variables
var keyword = "Text";
var srt = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Duration [ IN, OUT ]")[0];
var textListWidth = [];
var yy = 0;
var paddingX = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Padding X") *2;
var paddingY = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Padding Y") *2;
// For loop for Array width & height
for(i = 1; i <= thisComp.numLayers; i++){
layerPath = thisComp.layer(i);
layerWidth = layerPath.sourceRectAtTime(srt).width;
layerHeight = layerPath.sourceRectAtTime(srt).height*1.5;
if(layerPath.name.match(keyword)) {
textListWidth.push(layerWidth);
yy += layerHeight;
}
}
// Variables for max width & total height
x = Math.max.apply(null, textListWidth) + paddingX;
y = yy + paddingY;
// function
[x, y]
Here's the code in the position of the text layers:
// Variables
var controlsX = thisComp.layer("CONTROLS").transform.xPosition;
var controlsY = thisComp.layer("CONTROLS").transform.yPosition;
var paddingX = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Padding X");
var dropAlignText = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Text Alignment");
var alignTextArr = [1,2,3];
var alignText = alignTextArr[dropAlignText - 2];
var keyword = "Text";
var srt = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Duration [ IN, OUT ]")[0];
var textListWidth = [];
var paddingX = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Padding X");
var paddingY = thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Padding Y");
var prevLayer = thisComp.layer(index -1);
// For loop for Array width & height
for(i = 1; i <= thisComp.numLayers; i++){
layerPath = thisComp.layer(i);
layerWidth = layerPath.sourceRectAtTime(srt).width;
layerHeight = layerPath.sourceRectAtTime(srt).height;
if(layerPath.name.match(keyword)) {textListWidth.push(layerWidth);}
}
// Variables for max width & total height
xW = Math.max.apply(null, textListWidth);
// Funtion Boolean Text Alignment
if (xW > thisLayer.sourceRectAtTime(srt).width) {
if (alignText == 1) { x = (controlsX + paddingX) + thisLayer.sourceRectAtTime(srt).width/2;}
if (alignText == 2) { x = (controlsX + paddingX) + xW/2;}
else if (alignText == 3) { x = (controlsX + paddingX) + xW - (thisLayer.sourceRectAtTime(srt).width/2);}
} else { x = thisLayer.sourceRectAtTime(srt).width/2 + controlsX + paddingX;}
// Funtion Boolean find if layer above is a text layer
if (prevLayer.name.match(keyword))
{ y = prevLayer.sourceRectAtTime(srt).height/2 + thisLayer.sourceRectAtTime(srt).height + prevLayer.position[1];}
else { y= controlsY + thisLayer.sourceRectAtTime(srt).height/2 + paddingY; }
// function
[x,y]
I've also included the screenshot. Any help is appreciated.
Copy link to clipboard
Copied
It would probably make a lot more sense if you actually retrieved the individual values, pushed them into an array and sorted that using actual array functions, not just finding the max value. And there's a number of issues since you're multiplying values before determining the largest box without actually checking where the anchor point of the text layer is. It's rarely ever perfectly centered and inevitably those minor differences will add up. It's a conceptual flaw in how you approach the whole matter. I also see no mention of the actual shape layer property groups, which in itself may also cause issues if things are not with default alignment and values. It seems you haven't even considered that.
Mylenium
Copy link to clipboard
Copied
Thanks for the help. I'm actually grabbing code from others and mashing them together, I'm not a coder, so i'm not sure how to get individual numbers dynamically. The amount of text can change so that's why I did what I did. I also added an extra multiplier to give space in between the text layers. Also, I do have code in the anchor points of the text layers to get the center of the text layers, if that's what you're refering to. it's :
SRT= thisLayer.sourceRectAtTime(time - inPoint + thisComp.layer("CONTROLS").effect("Basic Lower Thirds")("Duration [ IN, OUT ]")[0]); [SRT.left + SRT.width/2, SRT.top + SRT.height/2]