-
Expression(s) to center midpoint of 3 separate layers to center of the comp
I feel like I’m close here, but I just can’t get over the hump… I’m working on a project where I’m using an imported .jsx file with data fields drawn from a spreadsheet to populate the text layers on my animation. For example, the .jsx file might be something simple like this:
var data = {
name: “Jane Smith”,
phone: “(415) 395-8281”,
location: “SAN MATEO, CA”,
headline: “Call or email to schedule\n an appointment”
};I’m then linking the source of the text layer to one of those fields, allowing me update all linked text fields by just importing a new .jsx, etc…
In one of my animations I have 2 text layers separated by a dot, something like this:
(555) 555-5555 · SAN MATEO, CA
The phone number and city need to be separate layers as I’m sourcing them from separate data fields in the .jsx, but I want the entire line of text (including dot) to be centered on its midpoint. (Not on the dot… Right now I’m using a shape layer circle as my dot.) Obviously the midpoint will shift depending on the length of the city (and phone # to small degree), so here was my first stab at it:
I established the spacing I wanted on either side of the dot with my two text layers. For the phone number I made the text right justified, placed the anchor point on the far right edge of the text layer and spaced it 20px left of the dot. I did the opposite for the city – left justified, anchor point on left edge, positioned 20px to right of dot. Anchor point for the shape layer is at its center, both text layers are parented to the circle.
Next, I figured to find the midpoint I need to find the total width and divide by 2. To do this I applied this expression to the anchor point:
L = thisComp.layer(“phone”).anchorPoint[0]; // x value of anchor point of phone #
R = thisComp.layer(“city_state”).anchorPoint[0]; //x value of anchor point of city
gap = R – L; // x-distance b/t 2 text layers
midpoint = (gap + thisComp.layer(“phone”).width + thisComp.layer(“city_state”).width)/2; // (width of 2 text layers + distance b/t them)/2
diff = midpoint – thisComp.layer(“phone”).width; // midpoint – width of left text layer
[value[0]-diff,value[1]] // supposed to shift anchor point to midpointIt acts basically like it should, but it doesn’t move quite to the midpoint. Am I way off or is there something I’m overlooking? At this point I’m just confusing myself the more I look at it.
Thanks in advance for the help!
-
2 Replies
-
I’m not sure why you want them to be different layers. Could you not give the text this value?
data.phone+ "·"+data.locationAndrei
My Envato portfolio. -
Welp I feel dumb. That’s a much easier solution. Thank you Andrei!
Reply to this Discussion! Login or Sign Up