Skip to main content
B
blackberryd1991
Known Participant
November 30, 2021
Question

First time using Animate - need help with masks?

  • November 30, 2021
  • 7 replies
  • 902 views

Hi all.

 

I'm new to Animate [having used Photoshop, Illustrator and InDesign for many years] and have watched a good few tutorials etc.

 

Just wondering if you can help me/push me in the right direction regarding an animation I'd like to try on the letter 'b' graphic that's hopefully included in this post! 

 

I'd like the 'b' to appear/reveal itself as if being written [if that makes sense]. So starting top left at the ascender, down the stem, round the bowl, finishing at the shadow section...hopefully you get the idea!

 

Now I guess you'd do this using masks, revealling the 'b' in sections, applying classic tweens. But it's the creation of the masks that I think I'm confused with?

 

Any help will be great. Happy to watch more tuts if you send give me a link.

 

    This topic has been closed for replies.

    7 replies

    N
    Community Expert
    Nick GioiaCommunity Expert
    Community Expert
    December 12, 2021

    Try this tutorial. https://www.youtube.com/watch?v=XjFP6OgGr94&t=341s

    B
    blackberryd1991Author
    Known Participant
    December 14, 2021

    Thnak you. I had already watched that tutorial and it was certinaly helpful.

     

    It doesn't perfectly match with what I'm trying to achieve though, as the masks shapes I've created are very particular shapes that need to be animated in a very particular way!

    B
    blackberryd1991Author
    Known Participant
    December 3, 2021

    Oh, and a totally seperate question; do you think this kind of logo animation is best suited to Animate or After Effects?

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    December 4, 2021

    if you use those three shapes for masks, each would be at the end of the display that revealed the corresponding section of "b".  ie, start with that ascender shape, add a keyframe with that shape having a height of zero, shape tween it, reverse frames. analogously for the other shapes.

     

    the decision between animate and ae should be made based on what file type you want to use.  eg, if it's a video, you can use either.  if it's interactive, use animate.

    R
    Rayk7
    Participant
    December 2, 2021

    Hello,

    I just wanted to know: are you having trouble adding the mask, or using it?

    B
    blackberryd1991Author
    Known Participant
    December 3, 2021

    Hi,

     

    At this stage, adding/creating the required masks.

     

    I'll admit, I haven't had a lot of time to search for tutorials to answer my questions, but [as other members have mentioned abaove] I need to create masks that match the shape of my letter B.

     

    Attached to this post should be 3 'masks' I just whipped up in Illustrator, braking the B into 3 sections...I'm just wondering if 1: I can create masks in Animate as per Illustrator [using Pathfinder to chop up parts of the B], or 2: can a vector mask be create in Ai and then just pasted into animate?!?!

     

    Thanks

     

    B
    blackberryd1991Author
    Known Participant
    December 2, 2021

    Thanks for the feedback thus far guys.

     

    I certainly understand the method each of you have described...but just want to check the way you'd create masks for this kind of shape.

     

    Can Animate be used like Illustrator, creating the different masks by using the Pathfinder Shape Modes, chopping out the sections I don't need etc [has Animate got Pathfinder]? The only tutorials I have found thus far, about masks in Animate, just use simple shapes as appose to something more custom/exact like my B.

     

    n. tilcheff
    n. tilcheff
    Legend
    December 1, 2021

    For this kind of reveal it will be more practical to erase frame by frame and reverse the sequence.

    You can also do this to a mask, which is a flat/silhouette copy of your original letter.

     

    Nick - Character Designer and Animator, Flash user since 1998 | Member of the Flanimate Power Tools team - extensions for character animation
    chespio
    chespio
    Inspiring
    December 1, 2021

    Hi blackberryd1991!

     

    And other aproach, similar to kglad provide you, is to divide the animation in the 3 different masks 

    I would choose one for the vertical line and a quarter of the botom left circle shape and animate revealing the background image of the b 

    The next mask will be 2 quarters of the circle shape botom left and top left, 

    And then the last part

     

    Hope you get it! I feel wird about my explanation using text to explain an animation without images; never describe something similar before xd 

     

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    December 1, 2021

    a mask will reveal your b.  so your mask will start above the ascender, grow vertically (from top to bottom) to include the ascender, then expand around the bowl. 

     

    because you can use shape tweens to create most of the masks, you just need to create the first one and then 3 or 4 others.  the 2nd keyframe mask will start with your 1st keyframe mask (ie, add a keyframe after creating the first mask), then edit the shape to reveal the vertical part of the ascender.  add a shape tween between the 1st and 2nd keyframes.  then add a 3rd keyframe that starts the mask expansion around the bowl.  you won't be able to include the entire bowl or the shape tween between the 2nd and 3rd keyframes will be difficult to control.

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