Nested Animation - Animation Inside Symbols in Adobe Animate and HTML5

Alright, this video were going to look at something called nested animations. So up until now I've been keeping a secret from you, we've been creating everything into a symbol, calling it a movie clip and then just leaving it and animating on that main stage. Now that’s totally fine for really simple banner ads with just text sliding in and logos sliding in, those types of things but when you get even just a little bit complex you're going to find it a little bit tough to run everything on the one timeline without it being a huge mess. So what we can do is we can actually have timelines within timelines, imagine just grouping an animation together, and then being able to move that group around.

So lets go through and look at that. So I'm going to create a new document, I'm going to save it, I'm going to call it this, now I keep adding underscores or hyphens just because when this goes out, to a website, you'll have to rename it if you leave spaces in there and it can cause problems if you don’t remove it. And the other thing not to include is don’t use any of these, so don’t use any of the crazy symbols, well the percentage sign and the ampersand or any of those sorts of things because when it goes online it might cause problems. So just stick to alphanumeric numbers and letters. And upper and lower doesn’t matter. Lets click save. Great, so I'm going to bring in a couple of graphics, I'm going to use my shortcut for import and in your exercise files there's one called nested animations and there's one there called space background. He's from illustrator so I'm going to leave all as is, click okay. There's lots of blending modes that don’t work, that’s okay. I'm okay with that at the moment, save, go to timelines, and so one weird thing is that, the cool thing about it is that there was a background and its been turned into the colour, oh it hasn’t been turned into the colour of the stage, so what were going to o is I want to move it across. For some reason my illustrator file actually lined up perfectly but in here its off to the side. Am I okay with that? I'm not, so I'm going to right click it, and go to modify ungroup and there's two parts, there's this front part, and the background colour, that’s just me being picky.

Now that’s the background layer, awesome, I'm going to lock it. Now I'm going to make a new layer call this one rocket, alright, I'm going to bring in my rocket, so command r or control r on a pc. And there's this little rocket, so what id like to do is I want the rocket to have flames shooting out the rocket bit and blasting off into space, now I could do this in the timeline but its going to get messy, why? Because lets give it a go, ill just show you a quick little demo of why, where we get into trouble. So first of all it needs to be a symbol, easy, modify, convert to symbol, I'm going to call this one mc rocket, and I'm going to draw some flames, so I'm going to make a new layer, I'm going to call this one flames, and if I add, ill grab my brush tool and ill pick a flame looking colour, so well start with yellow and a bit of red. Smoothing is up-ish, brush size I'm going to make nice and big, so I'm just going to draw some flames, add your own sound effects. There we go, and add a little bit of red, okay, first of all its coming out of the side of the rocket, so I'm going to put the flames underneath and now I want to animate it. So I want it to go bigger and smaller.

So I'm going to select it, I'm going to lock these other layers which makes it really easy to select. And then go to modify, convert to symbol, I'm going to call this one mc flames, now what needs to happen is I need to make this maybe another key frame here, and I need to extend all these guys along so I can do that, move them along, insert key frame. Just so I can see them the whole animation, go back to here and I'm going to make this one a little smaller, I'm going to move them up, great, and then I want to go back to the original size, so I'm going to click the first one, copy it, go to here, and paste it, insert frames, great. Add my classic tweens either side, I can select that whole thing, classic tween, lovely.

So that’s fine, it’s going to go in and its going to go out and I can play with my easing. The trouble is now I want to move the rocket all the way across the screen so I want it to start down here and move across. So this is where the problem happens where I'm trying to animate two things, I'm trying to animate the flames but also animate the rocket to flow along, so what id have to do now is frame one, id have to move him down here, I'm going to lock the space rocket. So I'm going to move him, I’d have to make sure this comes with me so I'm going to grab both of them, move them down. The problem is is that the flames are still over there, so I'm going to have to grab him, move him along, so this is where I want it to start. And I'm going to have to move both of these guys along and you see I'm starting to, its not too bad at the moment but then I want to start animating this thing across the screen so I want it to start then and I want it to end up, space rocket, I want you to end up over here, and so I'm going to add a classic tween between the space rocket, classic tween. You're probably just as confused as I am now. So that’s going to go across but now somehow I have to get the flames to follow along so this key frame is going to be maybe about there, and this key frame is all the way up here. Can you see I've actually done not a bad job, I'm pretty damn good.

So I've got it to follow along but I've done reasonably well which sucks because my example gets blown out of the water but you can see how complicated it is if I want to move the rocket around and move it different places I'm going to have to keep getting these flames to chase it. So what were going to do is were going to go undo loads of times, so edit and I'm going to use this one undo which is command z on a mac or control z on a pc, I'm going to go undo, undo, undo you’ve got 100 undo’s so you should be alright. So I'm going to keep going back until I see my timeline down the bottom there going back to just one key frame. There we go, actually I'm going to back even further. So I've drawn that, yep.

So I've gone back to the beginning and what I'm going to do is I'm going to break apart. So were right back to the beginning so I've just drawn my flames right, lovely flames. They're on their own layer and I'm going to do what I did before but now were going to start nesting our animation, so were going to select all of this, I'm going to go to modify, going to go convert to symbol and I'm going to call this one mc flames. Its already taken, weirdly if you undo it doesn’t delete the thing in the library. So there's mc flames from earlier, I'm going to bin him, bye mc flames. And grab them and start again. Convert to symbol, mc flames, movie clip, great and now this is the big change, what I did before was Id ended up making new key frames along here. and were at this thing called scene one and we've learnt earlier on to go inside and adjust our instance or our symbol, we can double click it to go inside, double click to go inside and now I'm inside mc flames. The cool thing about now is actually, can you see there's a separate timeline here so I'm back at scene one, back at home base I've got space, what is this, it should be called space rocket, I've got two space backgrounds, space rocket, that’s one of the files that ill go and fix out of illustrator, I've called it the same thing, that’s alright. So I've got a space rocket, actually I'm just going to delete the word space to make it clear. I've got rocket, flames and space background. Now what I want to do is I want to go inside here. I'm inside mc flames but you can see there's this whole separate timeline, and this is called a nested timeline. It just means it’s nested inside another, so we've got a timeline inside our original timeline. So now what I can do is I need to start the whole process again.

So I need to create a classic tween, so to do a classic tween I need to go to modify, convert to symbol, make sure it’s a movie clip, and you're like I already did this and you did, that was way back on scene one to convert it to a symbol and then you went inside that symbol and now it’s a fresh opening so now, so now it’s a fresh new timeline so we need to do everything again while were in here, so were going to call this one, cant call it flames because we've already got that one there, so I'm going to call this mc fire, great and I'm now going to get it to pulse in and out. And how far along, this is a neat little trick, so I'm going to insert a key frame and now I can shrink it down and then copy and paste this one. But what’s a nice little trick is you put in the first key frame and then you do this key frame here, duplicate it before you shrink it down, just put in the last one, so I just copied it across three times then go back to this middle one, use my free transform tool and scale this down.

So I'm going to scale it down, if it starts snapping, I use my key board quite a bit just to tap it around, so it starts big, gets small, gets bigger again and now were going to add my classic tween either side. So classic tween there, classic tween this side. Go back to the beginning here, awesome. So it works.

What we should do now is I'm going to go through and add some easing, just to make it look a bit prettier. I'm not going to do too much, I'm going to select the key frame and I'm just going to use the basic ease. Use ease in, and Ill get this one to ease out, just see what it does. Alright, so I've got this, now lets go back to my timeline, and the cool thing about it, is can you see that there is just one key frame, does nothing, just sits there. But there's a timeline running inside, so when I go to preview it, previewed at the wrong place, come down, a bit annoying. Can you see, because by default adobe animate loops, I've got this little animation running, and can you see it just keeps my animation looking very simple on here. So you might opening up somebody’s legacy file, say you’ve got somebody else that you used to use for doing your ads and you're looking at doing it yourself now. Bring it in house, ask them for the files and they’ll give you the adobe animate files, or the old flash files which will open just fine. You might find that its just one key frame but there's a lot of animation and it might freak you out because you're like where is all this animation going on. It means that its nested inside some of these symbols, so you double click them, go on a bit of a double click hunt to see where this animation is happening. Or you can go to your library and just double click on all of the symbols in here to see where it might be, so if I double click fire, you'll notice that there's nothing here, so if I double click flame, there's my nice little animation.

Back to scene one. now where this gets quite useful is that I'm going to grab my rocket, and grab him, I'm going to cut him. So edit, cut, and I'm going to put him inside this as well, so I'm going to go inside my flames, and go and I'm going to paste him in, actually ill put him on his own layer, paste and I'm going to prop him up there. And the cool thing about it is he doesn’t need to move, he can just sit there. So I've got a key frame at the beginning. Its automatically extended it out to the link, if it doesn’t, you might just have to chuck in a key frame here at the end just to make sure it is playing the whole way along, but I'm okay with this. Go back to my scene one, I don’t need the rocket layer anymore. He's one little unit, and the nice thing about that now is I can say you I want to use my free transform tool, I'm going to scale him down a bit. And he's going to be there, actually I might just get him to move across the screen, rotate him around, great, so he's going to start there and how far along maybe across 30 frames, I'm going to right click, insert a key frame, I'm going to bring the background along.

Now we keep inserting a second key frame for these backgrounds, technically you should be adjusting a certain frame because you don’t need another key frame another frame just extends it all the way along, to be honest it doesn’t really matter whether you’ve got a key frame or frame. There will be people out there that will argue with me, that you shouldn’t and file size but its total tiny file sizes. So yeah, either key frame or a frame, this one here’s got a second key frame because I actually want to do something different, I want to drag him, move him along and what I'm going to do is use my free transform tool, scale him down, go back to my selection tool, move it along, so he's starting down here and moving along to there and being quite small so it looks like he's heading away. Now we add our classic tween and can you see here if I preview here, it doesn’t do anything, it does, it moves along but you can see that the flames don’t work. So, that’s why you need to test in a browser all the time. So we've been using command return or control enter depending on if you're a pc or mac or just this one here because this will actually show the whole bits and pieces of it. There it is.

Now, my flames are going in and out but its moving so fast that its hard to see, so what I might do is go back into my timeline here, there's a couple of things, I might extend these out, so he's moving a little slower and what I might do is play around with the easing, so I might get it to ease, I might do both, so clicking on the key frame, click on the pencil and I'm going to get it to do the s curve, so I do this quite a bit with things. It’s going to start slow and end slow. But go fast in the middle there, lets go to preview, can’t really see it. So now if I save it, preview in a browser, you can kind of see the flames going in and out.

Now if you're happy with the flames, still going too slow, you can go back into your timeline, now I'm going to go inside my flames here. And now I'm going to do it here if I double click him. I've got this timeline and this is quite an important part is that I'm going to shrink this down, so I'm going to make you about there, I'm going to click you, wait, drag it down to about 10. So it’s going to be very fast, click him, wait, drag it along. I've got all this extra junk left over and this happens a bit in adobe animate and it’s just really annoying. So what you can do is, watch this, its going to do the fast thing bit and then its not going to loop until it gets all the way to the end here, you’ve got this extra frames. So what I'm going to do is I'm going to click hold and drag or you can shift click and try and get all of these, right click it, I'm going to go to the one that says remove frames. Just to tidy it up a bit at the end there. Just to make sure, we've just got this bit, save. Preview in a browser, there we go, it’s a bit more pulsing of our little rocket.

Alright, so that’s how to do a nested animation, it’s a movie clip inside of a movie clip. Now don’t be surprised if you have existing stuff that is movie clips inside movie clips inside movie clips. People sometimes nest them inside nesting inside nesting. So you just end up having to double click symbols to go inside that symbol to go inside that symbol to try and figure out what’s going on. Some people get a little bit carried away and sometimes its necessary. Alright, that’s how to nest animations, ill see you in the next video.