Side scrolling background?

Wondering how to accomplish a certain animation task? Ask here.

Moderators: Víctor Paredes, Belgarath, slowtiger

Post Reply
User avatar
Klay frog
Posts: 19
Joined: Sun Jan 10, 2010 3:36 am

Side scrolling background?

Post by Klay frog »

You know how in the cartoons, like the Flinstones, the side scrolling background cycles and you see the same background over and over? My question is how can you do that on Anime Studio? I know to make a background side scroll smoothly it has to start and end with the same picture. And it also has to be exactly the same or it won't transition smoothly--so every pixel matters. The problem I'm facing is that I can't tell where the edge of the camera is, especially since it changes as you zoom in. I tried simply zooming in and adjusting it to the edge, but that doesn't seem to work, and it also gets quite laggy. Is there an easier way to do this? Thanks.
:D
User avatar
Nolan Scott
Posts: 396
Joined: Fri Oct 22, 2004 2:14 am
Location: Auckland, New Zealand
Contact:

Post by Nolan Scott »

Well, you might draw your background about twice as wide as your camera frame...
Then copy and paste that background and move it to the end of the first one and make
sure that these two pieces line up (connect) properly....
(instead of drawing the background one can use images as well)

But keep in mind that you’re creating your background for looping...!

Use the Translate Tool (1) and animate the background...
Use the Onionskins at frame 1 to align the background at the last-frame...
Right click the last-frame and select Cycle...
(make sure the first frame is set to Linear)

Play your animation...

Regards
Nolan
User avatar
slowtiger
Posts: 6239
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Post by slowtiger »

If I want a perfectly looping BG I don't use camera tracking for it. Instead I put all BG elements into a group layer and move that, with linear interpolation of course.

My setup usually looks something like this:

- top group layer (holds the whole scene, allows for zooming in)
- - some animation layers
- - group layer for BG (this is the one which moves horizontally)
- - - BG image 1
- - - BG image 1 copy

As you see I just duplicate my BG image - I've cared for no seams in Photoshop before. Using the layer translate tool (1) with the shift key I place the two images side by side. (Note: AS seems to have a glitch with hard image borders which result in a faint bright line. Prepare your images in PS with having a 1px fuzzy outline and render them as PNG with alpha.)

For the actual movement I need some reference point. The blue project border isn't exact enough sometimes, so I may create a temporary vector shape (not in that BG group layer) or just duplicate the BG group layer: the one on top doesn't have animation, the one on bottom will move, and with switching visibility I can control wether the BG copy is at the second key exactly at the position of the first BG at the first key. To fine-tune this I zoom in until I see single pixels.

If the speed of the movement is correct, I go back 1 frame from the second key and create a new key, erase the one after it, and set the new key to loop back to key 1. Seamless, endless background scrolling. Over this I can arrange whatever running character, and, because of teh overall group layer, may zoom in or out anytime (via layer scale tool (2)).
User avatar
Klay frog
Posts: 19
Joined: Sun Jan 10, 2010 3:36 am

Post by Klay frog »

Wow, I can't believe I didn't think of any of that. Thank you for the great tips! :D I couldn't figure out why the "smooth" setting for the first frame caused that small, but noticeable, pause. I still don't know why it does that, but the linear setting has solved that problem. :)
:D
User avatar
94253
Posts: 99
Joined: Fri Apr 09, 2010 1:29 pm

Post by 94253 »

Slowtiger, thank you very much for your detailed reply to this question. It helped me a lot!
SlatersGarage
Posts: 7
Joined: Thu Jun 05, 2008 9:37 pm
Location: Maine
Contact:

Post by SlatersGarage »

Very helpful... Thanks, you guys...
Post Reply