Animating Infographics Line Graph in Adobe Animate for HTML5

hey, this video were going to look at info graphics, motion graphics, its really just a graph that were going to animate, what do you want to call it. Were going to go and do that now, if you haven’t done the previous tutorial with the mask, you're going to have to go and do that otherwise this one might be a little complicated to jump into, it’s the one just before this one, otherwise, lets go and do it.

So, were going to create a new canvas, I'm going to save it, under the right file, name it right, alright so I've got these in, I'm going to animate a line across the screen so I'm going to pick a colour and I always pick green, and were going to create a graph. Now essentially what happens is adobe animate doesn’t create graphs, you could draw it in here with the line tool, you could spend a while going through and drawing lines, you’d have to make sure the colour was a little bit different than the background, so you could draw all of that out but obviously that’s not going to be statistically correct or mathematically correct, its going to be just you drawing things. You could probably fudge it to make it look perfect but there's a couple of ways to do it, illustrator has a way of doing it and excel has a way of doing it. I'm going to use excel because doing it in illustrator, not everyone has those skill, excel is dirt easy. There is another thing out called adobe charts cc and it came out and it was pretty cool and then they’ve pulled the plug on it, at the made its made 2016 so hopefully they’ve re released that thing to adobe illustrator and it'll be nicer. But at the moment we have to use a few hacks. So I'm going to use excel.

You can use Google sheets as well, excel is better. So what I'm going to do is lets say I've been given data and its going to be a chart that’s got one here and 10 here and three here and 25 here and 7 here. So I've copied and pasted from an email or from somewhere. So I've got my line, got all my data at least. So I'm going to select it all and there's a nice option in here called charts, if you're on a pc it might be somewhere else, but look for this charts thing. And I'm going to use the line graph and I'm just going to use this really straight one so I don’t want to use any of these thready ones because it doesn’t work because this trick, watch this, if I click it and copy it, I've just clicked anywhere and used edit copy. And I go into illustrator and there's the old one I did. I paste it in here, can you see the cool thing about it, it comes through from excel, the fonts are all messed up, but that’s okay because I don’t want the line and I know its perfect now. so what I can do is, I can right click it and go release clipping mask and now ill be able to find bits, actually all I want is this line, so I'm going to grab him out, great and drag him out, get rid of all this stuff, cool. And we know that we can copy and paste from illustrator. I'm going to give this stroke a colour in here first, we could do it in adobe animate no problem. Click white, I'm going to increase the stroke of this one in here. I should be doing it in adobe animate for you, copy and paste. And I've got a lovely vector stroke eventually.

My machine is stressing out, if you're thinking man its really slow, this program, I've got a pretty kick ass laptop, its just because I'm doing this screen recording and recording audio at the same time, it kills it a little bit. So I've got my line, and you might now go off and decorate it to make it look prettier and add your details in terms of I don’t know, the how awesome Dan is scale vs how modest Dan is scale.

So what were going to do is this little line graph here is essentially not going to do anything, its going to sit there the whole time and be revealed. So what I want to do on my timeline is lets do a little bit of tidying up. So I'm going to cut him, I've selected it, gone to edit, cut. I'm going to lock that background layer, I'm going to call this one background. Make a new one, and I'm going to go to edit, paste, and I'm going to call this one line and this is essentially just what we did when we did the car, remember the animated banner on top of the car, so the line stays the same and what were going to do is create a new layer called mask, and what were going to do is were going to start with the rectangle, give it no stroke, give it a fill of we don’t care. And what were going to do is were going to start it here and its going to be about this size, right up to the edge here and were going to do a classic tween instead of a shape tween. You could do a shape tween, in this case it doesn’t matter at all, they both look the same so I'm going to convert to symbol, make sure it’s a movie clip, it will default to the last thing you’ve done and that will catch a lot of people out, stuck at button because that’s the last thing I did in this tutorial. Mc mask block.

And what I'm going to do is I'm going to every maybe 10 frames, I'm going to put in a key frame and what I'm going to have to do is, how many were there, there were one, two, three, four, five, six little blocks. So I'm going to go one, so I can count out to 60 and I'm going to put in frames along here. there you go frames, so it extends it out the whole way, so I'm going to put you, and on frame 10 I'm going to use my free transform tool and I'm going to go zip, now can you see its pulling from the center which is going to be a bit of a pain. What I want to do is pull it out, what I want to do is go back to the beginning, actually no, ill leave it there. Go back to frame one, get rid of this key frame, clear key frame because I want the center of rotation back to.. I'm going to zoom in quite a bit so command plus on a mac or control plus on a pc and I'm going to drag it so its on this corner so when it expands out instead of going, can you see here it goes both ways. This one here is going to go from the left and now pull out. Be a little bit easier. Zoom out, command 1 is full screen, command 2 goes 200%, command 3, 4, 5 keep zooming in but command 1 is the shortcut to go back to full screen. Or control one if you're on a pc.

Alright, so I've got my first key frame, remember that little rectangle there does nothing, so we've got to put in a proper key frame, insert key frame and I'm going to say be there. And what I might do is add my classic tween now and we’ll do the easing at the end so you, key frame, now if you're shortcut worked, this would be a lot easier. I'm having to use the right click every time, remember f6 on a pc, super handy. I should go and change my shortcuts but because I'm on this training demo laptop, all my shortcuts aren’t on here properly. The last one, doesn’t really matter how far it goes, just going to pass there. Great.

I'm going to add classic tweens by selecting across all of these, go classic tweens and now I want to go play around with the easing, so I want it to ease out every time. Can you do it across multiple ones, I'm not even sure, ease out, lets check, yes you can. So it’s going to hopefully ease out on all of these ones.

What I might do because I'm a bit of an easing nerd, I'm going to go ease out so they're all the same but this one id like to be even, id like to do this s curve. Actually, what I should do is I'm going totally off topic now, holding shift, grabbing them all and I'm going to use the pencil and I'm going to put this s curve across them all, so you just need to adjust it to make sure it over rides everything else. And, lets just test it, lets hit enter. Add your own special sound effects, I do.

Lets go to mask and hopefully now we have this lovely (Dan’s sound effects) okay, so how exciting is a line graph being drawn, it kind of excites me a little bit. I like a little animation, I like the easing. So essentially, everything you see in html5 that is a line growing like this, the lines not growing at all, its just being revealed. The line already exists, and there's generally a css clipping mask of a JavaScript in this case revealing the line behind it. So were going to hit save, and were going to look at doing the bar graph purely just as an exercise because this is the exact same thing except were going to be raising a mask across the bars.

So lets go and do that in the next exercise.