First time using Animate - need help with masks?

[blackberryd1991]

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.

[kglad]

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.

[chespio]

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 

[n. tilcheff]

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.

[blackberryd1991]

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.

[Rayk7]

Hello,

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

[blackberryd1991]

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

[blackberryd1991]

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

[kglad]

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.

[Nicktendo28]

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

[blackberryd1991]

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!