WEBVTT Kind: captions Language: en 00:00:00.302 --> 00:00:04.402 This tutorial exists because both you and I have both seen these kinds of backgrounds 00:00:04.402 --> 00:00:07.322 gone horribly wrong. 00:00:07.322 --> 00:00:13.382 A cheap way to make a looping background is just to throw in a featureless flat surface 00:00:13.382 --> 00:00:18.472 and tween some symbols to fly across the stage at varying speeds based on how far away they 00:00:18.472 --> 00:00:19.472 are. 00:00:19.472 --> 00:00:21.521 Farther away equals slower. 00:00:21.521 --> 00:00:29.571 Copy and paste the tweens over time and you're done. 00:00:29.571 --> 00:00:32.251 If you're making a forward facing loop it's the same thing. 00:00:32.251 --> 00:00:35.412 Dump those symbols in there and tween them to move and shrink. 00:00:35.412 --> 00:00:46.422 Here's a trick: copy and paste all of those tweened layers into a new symbol. 00:00:46.422 --> 00:00:52.222 Convert some of the animations to frame by frame. 00:00:52.222 --> 00:01:07.142 Pull them out and move the frames hanging off the end over to the front of the symbol. 00:01:07.142 --> 00:01:09.872 This ensures a constant flow of junk onto the screen. 00:01:09.872 --> 00:01:15.272 All you have to do now is put that symbol on the stage and extend it. 00:01:15.272 --> 00:01:17.482 Right. 00:01:17.482 --> 00:01:21.622 So that stuff's for cheaters, let's talk about real looping backgrounds starting with the 00:01:21.622 --> 00:01:25.321 bare minimum: the place where the characters go. 00:01:25.321 --> 00:01:29.111 Regardless of the program you're using to make backgrounds, the art needs to be longer 00:01:29.111 --> 00:01:31.281 than your video dimensions. 00:01:31.281 --> 00:01:35.022 This amount extra works but you don't have much room to make mistakes. 00:01:35.022 --> 00:01:39.302 While you're drawing, make sure that the left and right edges are about the same height, 00:01:39.302 --> 00:01:44.991 and avoid drawing anything that hangs too far over the edges. 00:01:44.991 --> 00:01:54.781 When the background is done, cut and paste your layers into a symbol. 00:01:54.781 --> 00:01:59.781 Now select all of those layers, copy the art and paste it into a new layer inside that 00:01:59.781 --> 00:02:01.351 symbol. 00:02:01.351 --> 00:02:07.821 Move that new layer to one side, leaving a small overlap between it and the original 00:02:07.821 --> 00:02:08.821 background. 00:02:08.821 --> 00:02:09.821 Look at that sloppy seam. 00:02:09.821 --> 00:02:11.511 Look at it! 00:02:11.511 --> 00:02:16.892 Clean that up with an eraser or new art layers. 00:02:16.892 --> 00:02:18.591 There. 00:02:18.591 --> 00:02:21.082 Once that's done, it's ready. 00:02:21.082 --> 00:02:28.841 Put the symbol into a scene. 00:02:28.841 --> 00:02:32.802 Make sure the rough edge is off the screen with just enough space so people won't see 00:02:32.802 --> 00:02:33.802 the transition. 00:02:33.802 --> 00:02:38.892 If you drew a long background, you have some extra room for error here. 00:02:38.892 --> 00:02:42.602 Put a tween on your background layer and move it with the properties window so the second 00:02:42.602 --> 00:02:46.772 part of the background comes up in about the same spot as where it began. 00:02:46.772 --> 00:02:49.782 So this bush should be about here. 00:02:49.782 --> 00:02:52.692 And we're just guessing at this point, so woo-hoo. 00:02:52.692 --> 00:02:56.892 And now, if that rough edge of your art is coming into the screen, you've got a problem. 00:02:56.892 --> 00:03:01.541 Either you didn't make your design long enough, or you just need to move the starting point 00:03:01.541 --> 00:03:02.662 of your background back. 00:03:02.662 --> 00:03:04.291 This way some. 00:03:04.291 --> 00:03:05.291 There. 00:03:05.291 --> 00:03:06.472 There you go. 00:03:06.472 --> 00:03:09.412 Copy and paste your background, tween and all, into a new layer. 00:03:09.412 --> 00:03:14.192 Remove the tween from the top layer and switch to the line view, and lock it so you don't 00:03:14.192 --> 00:03:15.591 move it on accident. 00:03:15.591 --> 00:03:18.642 So now you can see that last frame is off. 00:03:18.642 --> 00:03:23.151 Go ahead and use the properties window to adjust the last frame in the tween so it's 00:03:23.151 --> 00:03:24.151 perfect. 00:03:24.151 --> 00:03:26.412 You have to get it perfect. 00:03:26.412 --> 00:03:29.412 The loop will jump if even a single pixel is off. 00:03:29.412 --> 00:03:30.731 So do it right! 00:03:30.731 --> 00:03:32.651 Do it right. 00:03:32.651 --> 00:03:33.651 Done. 00:03:33.651 --> 00:03:34.651 Delete the reference line layer. 00:03:34.651 --> 00:03:37.642 It's time to adjust the background's speed. 00:03:37.642 --> 00:03:41.871 Bring in your animated character on a new layer and put it where you want it to go. 00:03:41.871 --> 00:03:48.561 Add or remove frames from the background to make it match with the speed of the character. 00:03:48.561 --> 00:03:54.872 There, the speed looks good. 00:03:54.872 --> 00:03:56.802 Now for the magic. 00:03:56.802 --> 00:04:02.212 Copy and paste the background layer with the tween into a new symbol. 00:04:02.212 --> 00:04:07.882 And now this is what you do: remove the last frame of that tween. 00:04:07.882 --> 00:04:09.731 Just the last one. 00:04:09.731 --> 00:04:13.561 Go back to your scene and bring the symbol you just made into a new layer. 00:04:13.561 --> 00:04:21.382 You can switch it to line view to make sure it's positioned exactly how you want it. 00:04:21.382 --> 00:04:26.123 And now delete the original layer and extend your symbol out for as long as you need the 00:04:26.123 --> 00:04:27.123 loop. 00:04:27.123 --> 00:04:28.123 Forever. 00:04:28.123 --> 00:04:32.852 For infinity and beyond. 00:04:32.852 --> 00:04:42.652 Repeat the process for every layer of depth you want to add. 00:04:42.652 --> 00:04:43.732 But here's a tip. 00:04:43.732 --> 00:04:48.161 Usually that back layer moves so slow you don't need to make it loopable. 00:04:48.161 --> 00:04:48.552 Just tween it.