Animating Infographics Bar Graph for HTML5 in Adobe Animate

Hey, in this video were going to do an animated bar graph. And, its similar to the last thing we just did with the line tool, ill introduce a few extra things just to sex up this next video. So were going to create a new canvas, were going to save it, I'm going to put it in here, you're going to watch me painfully add, it doesn’t even do it, even more painful you're going to watch me type it in. you realise I cant type either, it’s the curse of the designer, spelling, grammar.

So we've got our adobe animate stage, now we need the bar graph and before we used excel and you can do that again, it works just fine, you need to paste it into illustrator then back in, you can use illustrator straight so ill show you how to use this one, the graphing tool, if you’ve never used illustrator before you might have to go back to excel but if you do, there's this lovely tool here called the column graph tool, click and drag out the size that you want roughly and you get given this excel box in here and here’s my bar graph, just so you know as well, you can click and hold down this guy and there's column bar graph, there's a bunch of them in here, the line graph we could use, there's lots of different bits in here. so I'm going to use this guy, drag him out. And were just going to insert some data so 1, 5, 3. I'm just putting in, lets pretend you’ve been given proper data and you can copy and paste it into there. Now what happens is, the big thing to do is don’t click that button whatever you do, because that undoes everything you just did. Its this button here, they're awfully close this thing looks like it should be a cross. Bit of UX problem. So click apply, and its created a graph, all sorts of different colours, and my numbering on the side here which is great I'm going to close this down, cool so the next thing were going to do is select it all, copy it, go into edit, copy I'm using my shortcut and I'm going to go to adobe animate, click paste, leave all the defaults and great there's my graph in.

Were going to do a similar thing but what we need to do is first of all I want to colour them, because they're all looking a bit sad and grey and the next thing I need to do is I want to separate them on their on layers because with the last line graph we could just have a box moving from left to right and that did the whole line where as now if I did a box from the bottom to the top I need to do them all separately because I want this one to go then that one, that one, that one, doing a nice little springing thing going on.

So to do that, is I need to select it and then I need to keep ungrouping until I start seeing all the raw parts. So I'm going to go to ungroup and I'm going to use my shortcut which is command shift G or control shift G on a pc and keep going, I'm clicking loads, loads, loads, until I see that spotty stuff and that lets us know it’s a raw shape. And what I want to do is I'm going to double click you, weird thing in adobe animate, if I click that I'm going to get the center but not the stroke can you see the stroke is around the outside separate form it. To get it both the same time I double click the centers and I get all of it. Double clicking them all, I'm holding shift while I'm clicking all of these to make sure I've got them all. I think that ones selected, its hard to know, so I'm going to get rid of the stroke, make it none, and I'm going to go to fill and I always pick green.

Alright, another thing with them all selected is, see on my layers panel they're all stuck on one layer, what id like to do is id like to right click and say distribute to layers and this is really useful because it means they're all going to be on their own separate layer now. let me make this a little bigger. So there's my hopefully layer one, and then layer two, so that’s my first one I'm going to lock this one. I'm going to put it at the back there. I'm going to double click this one and I'm going to call it line. And now I've got all of these guys, they're all backwards which is a pain. Is there a way of switching them around, I don’t know? If you do know, chuck it in the comments, let me know. I'm sure there's probably a way.

So, why are they not in the right order, you’d have to ask illustrator about that problem. So first of all I want this guy and, essentially they're all going to stay the same and what I might do is, how many of them are there. I might cheat and just do the first. I must have drawn that line at the bottom there. I'm going to do the first four. So, I'm going to unlock you, I'm going to lock all of these layers, I'm going to drag across this one, I'm going to grab you and I'm going to cheat and grab the transform tool and drag them all the way out except he's center goes form there, its alright I can fix that. You get across here, alright so he's on his own layer. Actually the line is going to be at the top so it covers everything, it was in the right place. So number two is not number two, number three is there, four, doesn’t exists. Bin him, he's there, so that means all of these guys aren’t needed, there's my guys. So I'm going to put them in order now, so he's the second one. he's the third one, who’s the first one? You are.

What you can do as well is you can click and drag down these, I can click hold and drag down these to turn them all off and all on. So you, you, you. Lovely, so I'm going to unlock them all and you my friend are going to be the first one and what I'm going to do is every layer now needs its own mask so I'm going to say to you, this is going to be my mask and I'm going to zoom in a little bit just to make it easier, we could do this as a shape tween or a classic tween. Lets do it with a classic tween just to keep everything consistent and I'm going to start it here, it’s going to be a little box. Its going to be bigger, just to make it easier, I'm going to give it a different colour just so I don’t get confused, I'm a simple man. And so its going to start there, and ill do a shape tween this way because it’s a little quicker and after 10 key frames, actually I'm going to do a shape tween, easing, you might have noticed earlier on a shape tween only has the basic in and out, you cant do the custom one, so that’s what I want. So I'm going to be pedantic and go, because I love my easing, I'm going to convert it to symbol, movie clip, this is going to be called bar one, now so, what id like to do is because I want this to spring up and you notice by default it pulls from both ways. So I'm going to start from the bottom here before I start going off and animating this thing.

So what I need to do is I need to say after maybe 15 frames. I'm going to right click, go to key frame, everything disappears and now I need to extend all these bars out, how far, I'm going to do 15 times how many do I have, four, so I'm going to go, 60, I hope that is right, you're all watching. So you guys, insert a frame, or a key frame, should be a frame though and make sure the line is all the way up there as well. You, insert frame, great. So this guy starts at frame one and at frame 15 I'm going to get it to extend up and over. What id also like to do is turn it into a classic tween and id also like to click the frame and play around with this easing here. And what I might do is just a simple hill, which is an ease out. Quite an extreme one though. Preview, great, so you know the animations not going to work until you right click and say mask. It’s going to mask the layer underneath it and hopefully now, there he goes. Remember, add your own noises.

Now we need to go through and do that for every one, what we can do to speed things up or make it a little faster is I'm going to instead of copying and pasting that layer, we could do that, I find its easier to do things a little bit more repetitively than it is to copy and paste frames, especially when you're new. When you're good, you might turn this into a better workflow than I'm going to show you here. that’s going to be my mask, I might call it even mask two, just to be clear. And what I'm going to do is put a key frame where I want it to start, where this one is finishing. I would like this one to start so I'm going to go to insert, key frame, go to my library, and I can reuse this mc bar one. You could create a second one for all of them but because it’s the same shape I'm going to use this thing over and over again. The only thing I need to do, dump it in there and I need to make sure that I move that center of rotation down so that it starts there, goes off for 15 frames, a good guess is going to be about there, oh that’s a totally bad guess. I go to insert a key frame and I'm going to scale it up. It doesn’t really matter if you add your tween afterwards or first. I'm going to add mine, classic tween and I'm going to add my mask and its almost working. Watch this, so can you see here, the mask can you see it starts masking there and appears but before that he's actually visible. This layer 6 here is visible the whole time before the mask get involved so what were going to have to do is grab you, drag him up. Drag it along, see this one because I dragged it along, I left the key frame here but it’s empty, its just going to start there and you work your way through all of them, lucky you, there's not going to be anything more exciting, so you can skip to the end of this one, I'm going to go through and do them all.

So I'm going to create a new layer, who’s still here, I would’ve skipped along. Alright, beginning key frame, where, just before this one ends. If I have them all selected and I add a key frame, watch this, it worked! It used to, in the older version, it used to add a bunch of key frames. Good work adobe. So the mask is going to start here, I'm going to use the same mc bar. I'm going to drag it up so it snaps underneath here. tapping it around so it covers everything, remember using my q for the quick key to go to the free transform tool. Start at the bottom, go along 15, insert key frame, add a classic tween, go back to this first one, free transform, lovely, and one last layer. There's one thing you're probably like don’t forget to do the, I didn’t do it right, so remember he appears, there's a couple of things I didn’t remember to do. I didn’t turn it into a mask, and I didn’t make sure this guy started along, so this last one. so I'm going to get him, may as well do it at the beginning. Start about there and I'm going to get my mask to start there, insert key frame. Drag this down and this is when you start getting good at adobe animate because it is, there's lots of jobs that are quite repetitive, were going to look at motion tweens a little bit which can save some time but they're often more hassle than they're worth. So lets grab it now, new key frame, I'm skipping down some frames so I've got a bit of time here at the end, so I'm going to transform it up, do it same way twice. Right click, classic tween, make sure I right click it and make sure I add it as a mask and what I might do is extend all of these along, right click, insert a frame just so its got a bit of a pause there at the end.

Alright, save it, preview in a browser, fingers crossed, could it be more exciting, yes, with a bit of easing, my best friend easing, come along, I'm going to do that one with a bit of an s curve, there's a bit of both. Click that one, hold shift, click that one, do them at the same time. There you go, alright, preview it. Fingers crossed, ta daaaa.

Okay so we've got a bar graph, so in terms of all of these types of things, often the graph already exists and it’s the mask over the top of it that reveals it. Now one of the things you could do with this bar graph, obviously is you could make the rectangle itself get bigger, the only problem with that is you’d have to make sure that you got the data right or the math’s right so they all lined up perfectly but you could totally just get these green boxes and extend them out as well but were just learning masks and either way it works.

Alright, see you in the next video.