Rectangle.png

The Rectangle Widget can be used to create various overlay elements in the Composition, primarily as rectangular backgrounds behind text, image or video elements.


To learn how to add a Widget to your Composition, click here.

Remember, any underlined widget properties can be connected to a Control Node or a Data Node.

Properties

As seen above, select the "Rectangle" tab in the Property Panel to update this widget's following property types:

Shape

Screen_Shot_2020-01-03_at_3.44.51_PM.png

Width - Width percentage of the rectangle

Height - Height percentage of the rectangle

Bevel Style - Flat, Outside or Inside bevel options

Bevel Size - Bevel percentage size. This will appear differently depending on the selecte Bevel Style

Render Style - Filled or Outlined render style

Outline Width - Outline width percentage. Only applicable if Outlined is chosen as the Render Style

Although you can adjust the width and height in the Shape box, we recommend doing this in the Size tool within the Transform tab, to keep things simple and consistent between various widgets.

Style

Screen_Shot_2020-01-03_at_3.44.56_PM.png

Fill - Color of the rectangle fill

Stroke Width - Width of the rectangle stroke

Stroke - Color of the rectangle stroke

Pivot Point

Screen_Shot_2020-01-03_at_3.45.00_PM.png

X - Left, Center and Right horizontal pivot position options

Y - Top, Center and Bottom vertical pivot position options

 

Was this article helpful?
0 out of 0 found this helpful

Comments

6 comments

  • Hi there,

    I’m trying to solve how to have a rectangle resize based on the size of another text layer, and not the other way around, as seem to be the default way? In AfterEffects this is done by using the expression sourceRectAtTime() . Any pointers?

    0
  • Hi Andreas,

    You can combine the Text Widget's HTML feature with composition scripting to resize the background depending on the text. I've sent a composition example called "CompScript-Text Scale Background" to your Inbox folder.

    You can test the functionality with this app URL: https://app.singular.live/control/5MQs0qkIxEiNhwrV1BKttR

    Let us know if it works for your specific use case!

     

    Please also look into the following related articles:

    br,

    tm

    1
  • Hi Thomas, 

    The result is exactly what I am looking for! Thanks! :) But now the problem is that the text is static within the html. Can I declare some sort of variable that picks up text from a control node to put into the correct place in the html?

    0
  • Hi Andreas,

    Check out this video about Composition Scripting -> https://youtu.be/8KDf_RIGKG8?t=1120

    It explains the composition script editor, how to read control nodes from composition scripts (29:34) and update widget properties (50:40).

    br,
    tm

     

    1
  • Hi Thomas! Great! At second glance, I seem to have opened the same app twice with different results. First I got the app with no control nodes. The second time around, it worked exactly the way I wanted! I realized this might be connected with the fact that I have had the apps opened in Safari on Mac, but I understand Chrome is the only safe bet? Again: Thank you very much! Much appreciated!

    Best regards,
    Andreas

    0
  • Hi Andreas,

    great that you have it up and running!
    And yes, it's best using Chrome! ;-)


    br,

    tm

    1

Please sign in to leave a comment.