Skip to main content
K
Kany5CCF
Known Participant
January 3, 2023
Question

How would you guess a portion of this video was made? (Possibly CSV files)

  • January 3, 2023
  • 1 reply
  • 562 views

Here's the video in question : https://www.youtube.com/watch?v=nk3uTo9LGlw

 

If you look on the right side of the screen, there's lyrics that pop up as the singer is singing them. I'm looking to do something somewhat similar for a separate project, and I was wondering if anyone more well-versed in After Effects coding / expressions could help me out with how it may have been made.

 

You can see the space between the text bubbles are uniform, and they slide up like a 'message' animation. The size of the text bubble also changes with the amount and length of text inside, and there is smaller text indicating the name of the singer. It seems very clean-cut and smoothly animated, so I was suspecting that it was the use of data files that you imported into After Effects and then adjusted with different lyrics. 

This topic has been closed for replies.

1 reply

Kyle Hamrick
Community Expert
Kyle HamrickCommunity Expert
Community Expert
January 3, 2023

There was definitely a rig built for this, but it doesn't necessarily need to be incredibly code-heavy. Do you specifically NEED this to be a super-dynamic template? If not, I would really recommend just doing much of it manually, because it'll be easier - and this is coming from someone who builds plenty of templates. 

- An auto-sizing text box is doing most of the work here. You can create this by using the sourceRectAtTime() expression function. There's a great video tutorial on this by JakeInMotion, but there's also a new preset (as of AE 2023) that will do this for you without needing to code it yourself. The preset is under Animation Presets > Shapes > Elements > 2D Text Box.

- That same sourceRectAtTime function could be used to auto-space the boxes (based on the bottom of the previous one), though it wouldn't be too hard to set that up manually. Using a small shape layer as a spacer, along with snapping (hold CTRL/CMD while dragging layers in the viewer) would get you there pretty quickly. 


- Moving the text boxes up could be done via expressions, but would be far less work to simply animate manually, which would also give you a lot more control over the timing. Again, just create a guide or spacer of some kind, attach all the prepped text boxes to one Null as your primary mover, and use Y Position keyframes to move these into place as needed. 

- For the coloring and profile images, you can take a couple different approaches, depending on your level of technical knowlegde. You could simply build one rig for each person/character with the appropriate coloring, and then populate the stream with those as you go. Building one text box rig utlizing Essential Properties (and ideally a dropdown menu control) would be my preferred approach - this would involve having all the photos and color combinations prepped in one place, and their visibility is controlled by the dropdown choice. 

Is it possible to build this entire thing via one giant rig, and have it fed by CSV? Probably! That would not be my preferred approach unless it absolutely HAD to be built that way, though. 

Let us know if the above isn't enough to get you moving in the right direction! 

K
Kany5CCFAuthor
Known Participant
January 3, 2023

This is actually really helpful, thank you! I have just two questions : would I need to keep creating new boxes with new lyrics? This is the way I did it before (manually), however it lagged up my composition a bit, though I'm not that bothered by it. The second question is whether you knew of a good sourceRectAtTime function. I know how to make the basic ones in correlation to another layer, but I don't know if I would have to manually connect each box to the one above it. Thank you!

    Kyle Hamrick
    Community Expert
    Kyle HamrickCommunity Expert
    Community Expert
    January 4, 2023

    You would need to keep using new boxes, yes, but what that means depends on how you build this. Personally, I'd think having distinct layers/precomps/whatever for each new bubble would be the easiest to keep track of. That said, it's probably possible you could build this whole thing using Essential Properties and probably like ... 6 instances of one precomp. It just seems like it would get confusing! 

    Part of the reason I'd suggest doing this semi-manually is specifically so you don't have ALL the boxes having to exist the whole time - just trim them for when they're onscreen. Expressions will also definitely contribute to slowdown, especially for a bunch of stuff we can't even see anymore. 

    To me, it seems like it would make the most sense to just lay out the whole conversation in one big stack, then you can just focus on the trimming & timing. Since it sounds like you've already built this layout before, think about the parts that were the most annoying or troublesome, and focus on those for potential automation. 

     

    It's easy to go down rabbit holes and see how much you can do with code just for the sake of it, but that's often not the easiest route to get your project done. Now, if this is something you need to build 50 times, that's a different story. 

    -----

    sourceRectAtTime really just gives you dimensions of layers - what you do with those values is where the magic comes in. A big part of success with expressions is in properly thinking through what you're trying to do - in plain English - before you start trying to code. That way you're really establishing an objective, and can work through the technical details more easily, in my opinion. You might try doing a couple simple experiments - like connecting one layer to the lower-right corner of another, or figuring out how to force a layer to always center its own Anchor Point. (This second one is extremely useful for text layers.) This will give you a feel for the way sourceRect works and what you can do with it. If layers are parented together, things are easier, but you can also simply add a layer's height and/or width to its existing X/Y Position. Write your code with variables so it's easy to see what you're doing, and how you're combining those pieces to reach your objective. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices