Hey, in this video we're gonna do an animated  bar graph, okay? And we're gonna look at some, it's similar  to the last thing we just did with the line tool. I'll introduce a few extra things just to six up this video. Um, so we're gonna create a new canvas. We're gonna save it. I'm gonna put it in there.

You're gonna watch me painfully add. Oh, doesn't need to do it. Okay, so what are we at? Even more painful. You're gonna watch me type it  in in school. We're gonna call this an animating infographics.

You realize I can't type either bar graph,  it's the coast of the designer spelling, grammar. Alright, uh, so we've got our animated, uh, sorry,  our Adobe animate stage. Now we need the bar graph and before we used Excel. And you can do that again. It works just the same. Um, you need to paste it in to illustrate them back in.

You can use illustrator straight. So I'll 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 you want roughly. Okay?

And you get given this um, like Excel box in here. And here's my bar graph that is, well just so you know  as well, I'm gonna undo that. 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. And there's lots of different bits in here.

So I'm gonna use the, this guy, drag him out  and we're just gonna insert some data. So 1, 5, 3. I'm just putting in. Let's pretend you've been given proper data, okay? And you can copy and paste it into there. Now what happens is, um, the big thing  to do is don't click that button.

Whatever you do, 'cause that undoes everything you just did. It's this button here, awfully close. This thing looks like it should be cross a bit  of UX problem, click apply. Okay? And it's created a graph, um,  all sorts of different colors. And my numbering on the side here, which is great.

I'm gonna close this down. Cool. So the next thing we're gonna do is select it all, copy it. I'm going to edit copy using my shortcut. I'm gonna go to Adobe Animate, click paste,  leave all the defaults and great there's my graph in. And when we're gonna kind of do the similar thing.

But what we need to do is, first of all, I wanna color them  'cause they're all looking a bit sad and gray. Um, and the next thing I need to do is I want to  separate them on their own layers. Because with the last line graph,  we could just have a box moving from left and right  and that kind of did the whole line. Whereas now if I did a box from the bottom to the top i'd,  I need to do them all separately  'cause I wanted this one to go. Then that one, that one, that one,  that one do a nice little springing thing going on. So to do that is I need to select it  and I need to keep ungrouping  until I start seeing all the kind of raw parts.

I'm gonna go ungroup and I'll use my shortcut,  which is command shift G  or control shift D on a PC and keep going. I'm ungrouping loads, loads, loads until  I kind of see that spotty stuff. Now it's now it's a raw shape. And what I wanna do is I'm gonna double click u  um, with thing in flash. If I click that, I'm gonna get the  center but not the stroke. Can you see the strokes are on the outside?

Separate from it to get them both at the same time. I double click the centers and I get all of it. So come here, my friends double clicking them all. I'm holding shift while I'm clicking all these  to make sure I've got them all. I think the one selected, it's hard to know. So I'm gonna get rid of the stroke, make it none  and I'm gonna go with the fill  and I'm just gonna pick, uh,  I always pick green 'cause I do.

Um, alright, another thing  with them all selected is this is the cool trick is see on  my layers panel, they're all kind  of like stuck on one layer. What I'd like to do is I'd like to right click  and say distribute across, uh, distribute to layers. And this is really useful 'cause it means they're all gonna  be on their own separate layer. Now, um, let me make this a little bigger. And there we are. So there's my hopefully layer one.

There he is there. And then layer two. Yeah. So that's my first one. So I'm gonna lock this one. I'm  gonna put it at the back there.

So you are, I'm gonna double click this one. I'm gonna call it uh, line. Okay. And now I've got all of these guys, they're all kind  of backwards, which is a bit of a pain. Is there a way of switching them around? I don't know, uh, reverse layers.

Uh, if you do know, check it in the comments, let me know. I'm sure there's probably a way. So  why are they not in the right order? Uh, you have to ask a illustrator that problem. Okay, so first of all, I want this guy  and um, okay,  so well essentially they're all gonna stay the same. And what I might do is how many of the 1, 2, 3,  I might cheat and just do the first.

I might have to draw that line in the bottom there. I'm gonna do the first four. Okay? So, uh, I'm gonna unlock you. I'm gonna lock all of these layers. I'm gonna drag across this one.

I'm gonna grab you. I'm gonna cheat and grab that transform tool  and drag 'em all the way out. Said T Center goes from there. That's all right. I can fix that. You get across here,  Right?

All right, so he is on his own layer. Um, actually the line's gonna be at the top  so it covers everything wasn't the right place. So number two is not number two,  number three is there four? It doesn't exist. Bin  him, he's there. So it means all of these guys aren't needed.

These are my guys. So I'm gonna put them in order now. Uh, so he's the second one. Here's the third one. Oh, here's the third one. Who's the first one you are?

Cool. What you can do as well  is you can click and drag down these. Watch this. I can click hold  and drag down these to turn them all off and all on. So you, you you lovely. Okay, so I'm gonna unlock them all  and you my friend are gonna be the first one.

Uh, and what I'm gonna do is every  layer now needs its own mask. So I'm going to say to you, this is gonna be my mask  and I'm gonna zoom in a little bit just to make it easier. We could do this as a shake tween or a classic tween. Let's do it with classic tween  just to keep everything consistent. And I'm going to start it here. It's gonna be a little box,  it's gonna be bigger just to make it easier.

I'm gonna give it a different color  just so I don't get confused. I'm a simple man. Um,  and so it's gonna start there, okay? And I'll do a shape between this way  'cause it's a little quicker and  after five 10 key frames  I'm gonna go to, actually I'm gonna do a shape tween easing. You might've noticed earlier on a shape tween only has  their basic in and out. You can't do the custom one.

So that's what I want. So I'm gonna be pedantic and go 'cause I love my easing. I'm gonna convert it to symbol movie clip. This is gonna be called bar one. Okay? Now, so what I'd like to do is,  'cause I want this to spring up  and you notice by default it kind of pulls from both ways.

So I'm going to start from the bottom here  before I start going off and animating this thing. Okay? So what I need to do is I need to say  after maybe 15 frames,  I'm gonna right click at a key frame, everything disappears. And now I need to extend all these bars out. How far I'm gonna do 15 times. How many do I have?

Four. Okay. Uh, so I'm gonna go, what am I gonna go? 60 Hope that's right. You're all watching. So you guys insert a frame.

Rookie frame should reframe though  and make sure the line is all the way out there as well. You set frame. Great. So this guy starts at frame one  and at frame 15 I'm gonna get it to extend up and over. What I'd also like to do is turn it into a classic tween  and I'd also like to click the frame then play around  with this easing here. And what I might do is just as Simple hill,  okay, which is an ease out.

Quite an extreme one though. Preview. Great. So it's not gonna work. You know the animation's not gonna  work until you right click and say mask. Okay?

It's gonna mask the layer underneath it. Hopefully. Now there he goes. Remember your ownership noises? Yep. Okay, now we need to go through and do that for everyone.

What we can do to speed things up  or make it a little faster is I'm going to instead of copy  and pasting that layer, um, we could do that. It's gonna uh, I find it's easier  to do things a little bit more repetitively than it is  to try and copy and paste  frames, especially when you're new. When you're good you might turn this into a better workflow. Then I'm gonna show you here, okay, that's gonna be my mask. I might call it even mask two, just to be clear. Okay?

And what I'm gonna do is put a key frame  where I want it to start, kind of  where this one's finishing. I would like this one to start. So I'm gonna go to insert key frame. I'm gonna do my library and I can reuse this mc bar one. Um, you could create a second one for all of them, but  because it's the right shape,  I'm gonna use this thing over and over again. The only thing I need to do, dump it in there.

I need to make sure that I move that center of rotation down  so that it starts there, goes off for 15 frames. Uh, a good guess is going to be about there. Oh that's totally bad. Guess what I mean 12 And  okay about there. And I'm gonna insert a key frame and I'm gonna scale it up. It doesn't really matter if you add your tween afterwards  or first I'm gonna add mine.

Click tween and I'm gonna add my mask. It's almost working. Watch this. So can you see here, um, the mask,  you see it starts masking there and appears, but  before that he's actually visible. This layer six here was visible this whole time  before the mask gets involved. So what we're gonna have to do is grab you, drag him up,  click one, drag it along so he doesn't kind  of see this one here 'cause I dragged along a left a key  frame there, but it's empty and it's just gonna start there.

And yeah, you work your way through all of them. Um, lucky you, there's not gonna be anything more exciting. So you can skip to the end of this one. I am gonna go through and do them all. So I'm gonna create a new layer who's still here? I would've skipped along.

I, Alright, beginning key frame  where just before this one ends, oh,  if I have them all selected and I add a key frame,  which this, oh, it worked. It used to an older version. It used  to add a bunch of key frames. Good work, Adobe. So mastery's gonna start here. I'm gonna use the same empty bar.

I'm gonna drag it up so it kind of snaps underneath here,  tapping it around so it covers everything. Remember using my queue 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 probably like, don't forget  to do the, I didn't do it right. So remember here appears there's a couple  of things I didn't do, two things didn't turn into a mask  and I didn't make sure this guy started along. Okay, you, you, you, awesome. Let's do this last one. So I'm gonna get him also do it at the beginning. Start about there.

And I'm gonna get my mask to start there  and insert key frame, drag this down. This is when you start getting good at flash, Adobe animate. Um, because it is,  there's lots of jobs that are quite repetitive. We're gonna look at motion tweens a little bit,  which can save some time, but they're  often more hassle than the worth. So let's grab it now. New key frame, kind of skipping down some frames.

So I've got a bit of timer here at the end. Um, so I'm gonna transform it up,  do it the same way twice where I click classic between  make sure I right click it and make sure I add it as a mask. Okay? And what I might do is extend all of these along,  right click insert a frame just  so it's got a bit of a pause there at the end. All right, save it. Prove a browsers.

Fingers crossed. Yep, Yep, yep, yep, yep. Uh, could it be more exciting? Yes, A bit easing my best friend Easing come along. Yep. You You, I'm gonna do that one where there's 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, Here, do it. Fingers crossed.

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

But we're just kind of learning masks  and um, yeah, either way it works. All right, I'll see you in the next video.