Animating Infographics Pie Chart for HTML5 in Adobe Animate

Hey, this video were going to look at doing a pie chart so it’s a different flavor on the same thing we've been doing with the line graph and the bar graph. It’s like a reveal with the mask. So lets go and look at how to do that. So I'm going to create a new document, I'm going to make the background a colour, its always going to be green, right? And I'm going to now save it, put in my underscores, I'm getting faster as we go along. And next thing, I'm going to go back to my timeline, so I've got my background, I'm going to draw my pie wedge, actually ill draw the background so there's going to be two parts, I'm going to give it a fill of another green, so this is going to be the backing part. I'm holding shift to get a perfect circle and that’s going to be my pie background. Because what I want to do is I want it to appear out so I want this pie to be here and then a slice to appear out of it and then poke out. So I'm going to lock that one, I'm going to make a new one and this is going to be pie slice, and what were going to do is there's a nice little trick with the oval tool, you can see there's a start and end angle. What I'm going to do is, say this particular graph is going to be, lets say its 60% of people, wow, you have to work out the angle versus the 360, bit of math’s. But what I'm going to do is I'm going to make it another colour, I'm going to make it, this colour. And what I'm going to do is I'm going to start dragging it out. Actually I want to do is the opposite way, I want to leave it at zero, and make this 65.

So the start angles at 0, the end angles at 65, and I'm going to start dragging it out and its really hard to do by just holding it down. If you hold down the alt key and the shift key, and if you're on a mac its option and shift key, it will drag from the center and it will make a little bit more sense when you're making it. So what I want to do is, I'm going to animate it so its going to start at the top and scoop down and then I'm going to 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 going to do is a big thing with it is I need to edit the center of rotation because I want it to be able to animate from that point, 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 going to extend the background, out because it looks a bit weird without it. Down to about 60, I might have to trim this up layer on, insert frame, you there, so it’s going to end up there and at the first frame id like it to be starting at the top. So I'm going to get him up there, great. And what id like to do now, so he starts there, ends there. I'm going to add my classic tween, lovely, I'm going to add a bit of easing, because I always add easing. I always tend to add this one, the s curve. Kind of looks like an s, click play. What I might do is speed it up a tiny bit, it’s a little bit slow. I can trim these off later on, but lets go and preview in a browser. Cool.

So, its going to come along and then it disappears for the rest of it so what I want do is extend it out for the whole length of this so were going to insert, frame just to extend it out so it slides down and pauses all the way along there. Great.

So the next bit is adding the mask, so ill add the mask, and I'm going to lock that layer to make sure I'm not messing with it. Remember it doesn’t matter what colour the fill is for the mask as long as its green and knowing which one it is, I always forget. Is it this one? Because that’s the window, think of it as the window that people are going to see through. What id also like to do is just make sure its nice and big, down this bit here. I'm going to make sure that it’s just underneath there, that should work.

So he appears down there. Lovely. You can see down at the end there, its not quite aligned, so I'm just going to before I make my mask, test it to make sure its covering and uncovering everything. That looks like it might work. Hopefully. So, then I just need to right click it and test it with a mask. You can see I've kind of messed it up a little bit. There's a little slither left so I'm going to have to play around with my mask but, he appears. And that’s how to do a pie graph. Were going to go through and fancy it up a little bit but that’s basically it. If you’ve got lots of slices you're just going to have to have lots of pie slices with lots of masks and lots of animations and maybe time them differently. What were going to do is just get it to pop out. First of all ill fix that bit of mask where I can see this.

So I'm going to unlock the mask layer, and I'm going to move it down a bit and lock it again just to make sure it’s completely gone now, awesome. And what I would like to do is get it to pop out and some text to appear to get a bit more of an infographic feel. So it’s going to pause for a while and then at about here, insert a key frame, I'm going to get it to explode out or just pop out. So I'm going to insert another key frame. I'm going to grab my transform tool, you, he's locked, unlock him. Unlocking is a bit of a pain because the mask goes and covers it. You'll notice that even if you unlock it and you preview you, it still goes back to its, how its mean to be so it doesn’t really matter that they're locked, its just previewing in adobe animate, it all gets turned on when you publish.

So I'm going to turn them off, turn the eyeball off the mask so I can see what I'm doing and id like you my friend, so it starts there, I want it to pop out a little bit. So it’s not going to go far, holding shift to make it pop out, and classic tween, and pop out. I should add some easing, I'm just going to get it to ease in, just a cheap one, save it, preview it, just to make sure its working. Preview loads while you're working because there can be lots of problems and if you go too far thinking, yeah I'm the man, I've got it, and you’ve got it all perfect and you finally preview it at the end you have no idea where you went wrong. 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, did you have to spend this long doing it? No.

So I'm going to get it to do this, and this, and I'm going to do it really sharp so can you see here I've got this line that I don’t want. You can either reset it, actually what I might do for a little bit of fanciness, is I'm going to do my extreme s, what I might do is to get it to rebound a little bit. And to rebound with an ease I'm going to click anywhere in here so I don’t have to hold anything down it just adds a new key frame and the weird thing is if you do something that looks like this, I'm going to drag it down so I can see you. How far is this going to rebound, there's a lot of testing that’s going to have to happen. So it’s going to get right there, then its going to try and rebound. So lets give it a preview. You can see it happens so fast that you cant even see it, so I'm going to bring this is in a little bit and I might have to extend, so its probably not long enough so I'm going to grab this one here and drag it out so there's a bit more time for my animation to happen. And now lets have a look, can you see it did a little rubbery bounce there, its probably a bit long now. so I'm going to save it, preview in a browser, hopefully my machine, all the fans are on I can hear it because of the screen capture stuff and it worked a charm. See that little pop, nothing much just (Dan’s sound effects).

The last thing were going to do is add some type. Watch this if I'm here, I did it by instinct because I know it’s a problem. If I add a new layer, here for my type it shuffles it into this mask and ill never see it, it’s not what I want. So if you click the top one, add a new layer, its going to add a brand new layer not smushed into this mask, I'm going to call it type, or text even. Where am I going to start my text, maybe half way through that animation I'm going to insert a key frame. Grab my type, now what I want to double check is its always ecstatic text, for whatever reason it keeps resetting to dynamic text quite a bit. So, just make sure its ecstatic text because dynamic text is a pain, we looked at it earlier. And I'm going to click once, I'm going to call, this is the percentage of awesomeness, that’s you. I should have made it 100%, you're only about 30% awesome I'm afraid. Its better than everybody else, Lynda are only 10% awesome. So you’ve got this, where’s it going to 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. I'm going to increase it from 100, 300, that’s the weight, size wise, a little bit bigger. I shouldn’t spend ages on type, this is turning into a bit more of an infographic where you're going through and adding type and making it bounce and those sorts of things. So what I'm going to do is you there I want to animate it, so first of all I need to convert it to a symbol, it needs to be a movie clip I'm going to call it mc awesome. Great mc names here, so you are going to start there, I'm going to get it to maybe just fade in, so I'm going to get it to start here and end pretty quickly, key frame this first key frame though id like to select on it and go to alpha and then this one that’s 100% add my classic tween and its going to fade in, I never add easing to fades because I never seem to be able to notice it. Save it, preview it, and it fades in. I like it, its kind of cool and its green, it’s the best kind.

Alright, so that’s how to do a pie chart, really you're animating a circle and then you're masking little pieces. So it’s just a more complicated version of our really basic mask we did with the porthole that our little monster looked out of. Alright, that’s going to be it for pie charts. I’ll see you in the next video.