Animating Infographics Pie Chart for HTML5 in Adobe Animate

Hey, uh, this video we're gonna look at doing a pie chart. So it's a kind of a different flavor on the same thing we've  been doing with the line graph and the bar graph. It's kind of like a reveal with a mask. So let's go and look how to do that. So I'm gonna create a new document. I'm going to make the background a color.

It's always going to be green, right? And I am going to now save it,  put it in my underscores. I'm getting fast as we go along. And uh, next thing I'm gonna get back to my timeline. So I've got my background. I'm going to draw my pie wedge.

Actually I'll draw the background. So  there's gonna be two parts. There's going to be uh, I'm gonna give it a fill  of another green. Okay? So there's gonna be the backing part I'm holding shift  to get it to per perfect circle. Okay?

And that's going to be my um, pie background. 'cause what I want to do is I want it to kind of appear out. So I want this pie to be here  and then a slice to kind of like a appear out  of it and then poke out. So I'm gonna lock that one. I'm gonna make a new one. And this is gonna be pie slice.

Okay? And what we're gonna do is,  is a nice little trick with the oval tool. You can see there's a start and end angle. What I'm gonna do is I'm going to say it's uh,  say this particular graph is going to be um,  let's say it's um, say 45. No, let's go to 60% of people. Well you have to work out the angle versus the 360 bit  of maths, okay?

But what I'm gonna do is I'm gonna make out another color. I'm gonna make it this color. And what I'm gonna do is I'm gonna start dragging it out. Actually, I wanna do the opposite way. I want  to leave it at zero and make this 65. Okay?

So the start angles at zero end angles at um, uh,  65 and I start dragging it out. And it's really hard to do um, by just holding it down. If you hold on the alt key in the shift key  and if you're on a Mac, it's option in shift key,  it'll drag from the center and it'll make a little bit  more sense when you're making it. Okay? Now, so what I wanna do is I'm going to animate it. So it's gonna kind of start at the top and scoot down.

And then I'm gonna add a mask to it. So if I need to animate it, I'm going  to convert it to a symbol. Call it mc pie slice. Just call it pie. And what I'm gonna do is, um, a big thing with it is I need  to edit the center of rotation. Okay?

'cause I want it to be able to animate from  that point, okay? Not from the center. So I got him  and now I would like to do my animation. So about 20 frames, insert key frame. And I'm gonna extend the background out  'cause it looks a bit weird without it up to about 60. I might have to trim this up later on.

Insert frame you there. So it's gonna end up there. And at the first frame I'd like it  to be starting at the top. Okay? So I'm gonna get him up there. Great.

And what I'd like to do now, so he starts there, ends there. I'm gonna add my classic T twin. Lovely. Great. I'm gonna add a bit of easing because I always add easing  and I always tend to add this one. The S-curve kind of looks like an S hopefully.

Yeah, that's in there. What I might do is just speed it up a tiny bit. It's a little bit slow. I can trim these off later on. Um, but yeah, let's go prevent a browser  and go. Okay.

So it's going to come along  and then it kind of disappears for the rest of it. So what I wanna do is extend it out  for the whole length of this. So we're gonna insert frame just to extend it out  so it slides down and then pauses all the way along there. Great. So the next bit is adding the mask. So I'm gonna add the mask and uh, I'm gonna lock  that LA just to make sure I'm not messing with it.

Remember, it doesn't matter what color the fill is  for the mask, as long as it's green  and knowing which one it is. Uh, I always forget like is it this one? Yeah. 'cause that's the window. Think of the mask  as the window that people are gonna see through. What I'd also like to do is just make sure it's nice  and big down this bit here.

Okay? You, I'm gonna make sure that it kind of just  underneath there that should work. Okay? So he appears down there. Lovely. You can see down at the end there it's not quite aligned.

So I'm just gonna, before I make my mask, test it  to make sure it's kind of covering  and uncovering everything that looks like it might work. Hopefully. Okay, so then I need  to need a right click it and test it. Got a mask. You can  see I've kind of messed it up a little bit. There's a little sl the left.

So  I'm gonna have to play around with my mask. Um, yeah here p**s. And that's how you do a p graph. We're gonna go through and fancy it up a little bit,  but that's basically it. Okay? Um, if you've got lots of slices,  you're just gonna have to have lots of pie slices with lots  of mask and lots of animations  and maybe time them differently.

What we are gonna do is just get it to kind of pop out. And first of all, actually I'll fix that bit  of mask where I can see this. So I'm going to unlock the mask layer  and I'm gonna move it down a bit. Okay? And lock it again just to make sure. Yeah, it's completely gone now.

Awesome. And, and what I would like to do is get it to kind  of pop out in some text to appear to get a bit more  of an infographic feel. So it's gonna pause for a while a little bit  and then at about here instead of key frame, I'm going  to get it to explode out. We'll just pop out. So I'm gonna insert another key frame. I'm gonna grab y transform tool here.

He's locked. Unlock him. Unlocking is a bit of a pain  'cause the mask goes and covers it. You'll notice that even if you unlock it  and if you preview it, it still goes back to it's kind  of like how it's meant to be. So it doesn't really matter that they're locked, okay? It just previewing in Adobe Animate it all gets turned  on when you leave.

Okay? Or when you publish. So I'm gonna turn them off,  turn the eyeball off on my so I can see what I'm doing  and I'd like you my friend to, so it starts there. I want to get it to pop out just a little bit. So it's not gonna go far holding shift to make it pops out. Um, yeah, Pop out too much.

So it's  Gonna yuk and classic Tween  Pop out. I should add some easing. It's gonna  Get it to ease in. Just do a little cheap one, save it,  preview it, just make sure it's working. Preview loads where you're working  'cause there could be lots of problems. And if you go too far thinking yeah, I'm the man, I've kind  of got it or the woman and you've, you've got it all perfect  and, and you find a preview at the end.

You have no idea where you went wrong, okay? So preview in a browser like mine, stressing it out  by using the screen capture software as well. Come on,  Let's hope it doesn't crash. It didn't lovely and pops out. Nice. A little bit more easing.

This is the finessing part. This is the bit where, um, did you have  to spend this long doing it? No. Okay, so I'm gonna get it to do this  And this And I'm gonna do it really sharp. So I'm gonna, can you see here I've got this line  that I don't want and you can either reset it,  Click Actually what I might do for a little bit  of fanciness is I'm gonna do my little extreme s  what I might do is get it to rebound a little bit  and to rebound with the ease. I'm gonna click anywhere in here  so I don't have to hold anything down.

It just adds a new key frame. And weird thing is, is if you do something  that looks like this, I'm gonna  drag it down so I can see you. I'm gonna grab you view. How far is this gonna rebound? There's a lot of testing that's gonna have to happen. Okay?

So it's gonna get closed,  it's gonna actually get right there  and it's gonna try and rebound. So let's give it a  Preview. You can see it happens so fast that you can't even see it. So I'm gonna bring this in a little bit  and I might have to extend. Yeah, so it's probably not long enough. So I'm gonna grab this one here  and drag it out so there's a bit more  time for my animation to happen.

And now let's have a look you and then  You see the Little rubbery bounce there. It's probably a bit long now. Um, so I'm gonna save it, preview a browser. Hopefully my machine, all the fans are on. I can hear it 'cause  of the screen capture stuff and I work to charm. You see that little Pop?

Nothing much just  Juju. Alright, I like it. And the last thing we're gonna do is add some type. So I'm going to, which is if I'm here, I did it  by instant 'cause I know it's a problem. If I add a new layer here for my type, it kind  of shuffles it into this mask and I'll never see it. It's not what I want.

So if you click the top one,  add a new layer, it's gonna add a brand new layer,  not kind of smooshed into this mask. I'm gonna call it type or text even. Where am I gonna start my text? So maybe kind of halfway through that little animation,  gonna insert a key frame, grab my type. Now what I wanna double check is it's always at static text  for whatever reason it keeps defaulting  to dynamic text quite a bit. Um, so yeah, just make sure it's a static text.

'cause dynamic text is a pain. We looked at it earlier and I'm gonna click  once and I'm gonna call. Um, this is the percentage of awesomeness  I  That's you, I should have made it a hundred percent. You're only, you're only uh, what  about 30%? Awesome. I'm afraid.

And it's better than everybody else. Linda are only 10%. Awesome. So you've got this. Where's it gonna go? I didn't really leave enough room.

I'm just putting in some returns here just  to make sure I can fit it all in. Awesomeness is a bit of a big word. Um, I'm gonna increase it from 103. Oh, that's the weight size wise, little bit bigger. Okay? I shouldn't spend ages on type.

Okay, this is kind of turning a bit more of an infographic  where you're going through and kind of adding a type  and making it bounce and those sorts of things. So, and what I'm gonna do is you there, I want animate it. So first of all, need to convert it to a symbol. Needs to be a movie clip. I'm gonna call it m mc, uh, awesome, great. Mc names here.

Okay, so you are gonna start there. I'm gonna get it to maybe, maybe just fade in. So I'm gonna get it to start here and end pretty quickly. Key frame. This first key frame though, I'd like  to select on it and go to Alpha. And then this one, it's a hundred percent add.

My classic tween. Classic tween. And it's gonna kind of fade in. I never add easing to fades  'cause I never seem to be able to notice it. Save it, preview it, wish wish  and it kind of fades in. Oh it's, I like it.

It's kind of cool and it's green. It's the best kind. Alright, so that's how  to do a pie chart really. You're kind of animating a circle, the pie chart bit  and then you're masking little pieces. Okay? So it's just a like a kind of more complicated version  of our really basic mask we did with the porthole  that our little monster looked out of.

Alright, that's gonna be it for pie charts. Uh, I'll see you in the next video.