Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Forums Adobe After Effects Expressions Help?! Right aligned responsive Lwr 3rd, with left aligned text

  • Help?! Right aligned responsive Lwr 3rd, with left aligned text

  • Jo Somers

    January 26, 2021 at 10:17 pm

    I’ve been racking my brain for a while trying to solve this.
    I have a 2 line lower third (left aligned) with a dynamic box behind it. If line 1 is longer, the box scales to fit. If line 2 is longer, it scales to fit line 2. It’s turned into a MoGrT and works great. But it’s only left aligned.
    PROBLEM: I need recreate this lower third so that The text of line 1 and 2 are left aligned, while actually being right aligned (so that they move left as typed). If line 1 is longer, line 2 should be left aligned with it. If line 2 is longer, line 1 should move left so that it is aligned.
    Additionally the responsive background box needs be be anchored to the right, so that it only expands left (with a width corresponding to the text).
    Anyone with some solutions I could try?
    THANKS!

  • Kevin Camp

    January 26, 2021 at 11:09 pm

    It’s tricky.

    I would set both lines of text to be right-justified and parent them to a null. set the position of the upper line to 0,0 (to align with the null) and set the lower line’s x-position to 0 and the y-position to whatever it needs to be to be below the upper line.

    then try this expression for the upper line’s position:

    target = thisComp.layer("lower line") ;

    rect1 = sourceRectAtTime() ;

    rect2 = target.sourceRectAtTime() ;

    l1 = rect1.left ;

    l2 = rect2.left ;

    x = Math.min( l1, l2 ) + rect1.width ;

    [ x, value[1] ]<pre/>

    The use the same expression for the lower line, but change the target layer to be the upper line.

    At this point the shorter text line should reposition to align with the left side of the longer line.

    I'll assume you are using a shape layer for the background box, if so, parent that to the null and try this in the size property:

    target1 = thisComp.layer("upper line") ;

    target2 = thisComp.layer("lower line") ;

    rect1 = target1.sourceRectAtTime() ;

    rect2 = target2.sourceRectAtTime() ;

    w1 = rect1.width ;

    w2 = rect2.width ;

    pad = 30 ; // set as needed

    w = pad + Math.max( w1, w2 ) ;

    h = 80 ; // set as needed

    [ w, h ]

    and this for the position property:

    target1 = thisComp.layer("upper line") ;

    target2 = thisComp.layer("lower line") ;

    rect1 = target1.sourceRectAtTime() ;

    rect2 = target2.sourceRectAtTime() ;

    w1 = rect1.width ;

    w2 = rect2.width ;

    x = Math.max( w1, w2 ) / 2;

    value - [ x, 0 ]

    I think that should get you close to what you are asking for

  • Kevin Camp

    January 26, 2021 at 11:13 pm

    evidently the posts don’t like the PRE tag anymore, or I’m doing something wrong…. let me know if you have trouble separating our what is expression and what is not. Sorry.

  • Jo Somers

    January 26, 2021 at 11:25 pm

    Wow, thanks! I’m new so, not familiar with what the PRE tag is.
    I’ll give this a shot at work tomorrow and give you a shout if I have trouble.
    Thanks!

  • Kevin Camp

    January 27, 2021 at 12:01 am

    It’s just a HTML tag for preformatted text: https://www.w3schools.com/tags/tag_pre.asp

    I used to use them in posts for expressions due to occasional issues with certain characters/symbols not showing up correctly in the post. It also separated the expression in a box. It kind of works now, but only applied to the first line of the expression…. I’m likely doing something wrong.

    It looks like all the characters are ok, so I think it should be ok.

  • Jo Somers

    January 27, 2021 at 3:52 pm

    Wow. This is exactly what I was hoping to achieve. I linked up all my adjustments layers and created a new ‘checkbox’ so now users of the MoGrT can choose to have their lwr 3rd on the left, or right side of the screen. Works great!

    One thing i noticed:
    When I put it through testing (random ‘Line 1’ 1st letters and overall lengths combined with random ‘Line 2’ 1st letters and overall lengths), ‘Line 1’ and ‘Line 2’ get out of sync with certain 1st characters and overall lengths.
    To pseudo rectify this, i tweaked the first expression to include “+5” in the lower line expression:

    x = Math.min( l1, l2 ) + rect1.width +5 ;

    This seems to be a good fix for most instances, but there are still some combinations where an OCD person like me, with guides up…staring 2 inches from the screen, will notice that the lines aren’t perfectly in alignment.

    Is that just based off of character type/size throwing off the expression and there isn’t much else to do about it? Any ideas?

    Thanks again.

  • Kevin Camp

    January 27, 2021 at 10:10 pm

    Good catch… it looks like it’s an issue with how different characters line up with the anchor point. Try typing an ‘A’ then enter on the numbers pad and note where the corner of the ‘A’ is relative to the anchor. Then do the same for an ‘I’ and notice where the anchor is relative to the edge of the ‘I’.

    I was able to fix it, but the set up is a little different (a bit simpler actually). Hopefully it will still work for you checkbox control.

    I would start fresh with two new text lines and no null. Make both text lines left-justified this time and parent the lower text line to the upper line and make sure the lower line’s x-position is 0 (this will make sure the left edges are always aligned).

    Now add this expression to the upper text line’s position:


    target = thisComp.layer("lower line") ;

    rect1 = sourceRectAtTime() ;

    rect2 = target.sourceRectAtTime() ;

    w1 = rect1.width ;

    w2 = rect2.width ;

    x = Math.max( w1, w2 ) ;

    value - [ x, 0 ]

    Since the lower line is parented to the upper line, we don’t need an expression for the lower line (bonus!).

    You should be able to use the same expression for the text background shape layer, however if you used the position expression in the transform>position property, you will need to cut/paste it to the Rectangle Path>Position property (it’s just bellow the size property). Before it didn’t matter which position property but it will for this set up.

    Then parent the shape layer to the upper text line and position it as needed to lineup correctly.

    And I think that should do it (and hopefully I set the PRE tag correctly this time).

  • Kevin Camp

    January 27, 2021 at 10:16 pm

    PRE tag was still messed up… sorry, I’m just going to test a little with this post…

    this should be

    preformatted text

    this should not be preformatted….

  • Jo Somers

    January 27, 2021 at 10:16 pm

    Thanks!

  • Kevin Camp

    January 27, 2021 at 10:17 pm

    I give up…

Viewing 1 - 10 of 10 posts

Log in to reply.

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy