Creating a Spinning 360 Animation

[austinmdiamond]

Hi! I want to create an animation of my character standing on top of a hill, with the camera rotating around him 360, so that as he rotates the landscape rotates and changes as well, revealing the world around him. I'm trying to figure out/conceptualize how I would do this. How would I draw it to animate it? I'm attaching a sketch of the basic scene. So as the camera turns, it would reveal, mountains on his left, oceans behind him, skyscrapers on his right, etc. 

Thanks! 🙂

Austin

[TheOriginalGC]

If I were to attempt something like that, I might use parallax scrolling to create a wrap-around background and then move the subject and hill in the opposite direction. You'd probably have to use frame animation for the subject and vegetation on the hillside. Use parallax scrolling again (possibly with an out of focus blur) for foreground objects.

[austinmdiamond]

Do you have any insights/videos on how to do this? Your description has totally helped me visualize what I need to do better, but as far as actually executing it, I'm not really sure how to. I would love to see this actually happening in a video, but when I try to search for a spinning scene like what I'm describing in YouTube, my searches don't come up with anything. (Which is hard to believe, since YouTube normally has everything!!) 

Thanks! 🙂

Austin

[austinmdiamond]

And for an even clearer picture, this is the kind of effect I'm talking about, (except with the camera rotating around my character, as he takes in the view from atop his hill).

https://www.youtube.com/watch?v=aPfT-G0Fwtg 

[austinmdiamond]

Bump...?

[JoãoCésar]

Hi.

I agree with @TheOriginalGC. I think you should create a infinite scrolling background like the ones we see in 2D games, for example. Then you would combine it with a frame-by-frame animation of your character rotating in 360 degrees. This is a very common approach in animes.

Andrea Gerstmann has some awesome videos explaining how to rotate characters in Animate.

https://www.youtube.com/watch?v=p8zWCjBM8Yk

https://www.youtube.com/watch?v=almmGkxIUyk

I hope these help.

Regards,

JC 

[austinmdiamond]

I have created my rotating character animation! 

Now the hard part!!

I am having a really hard time "wrapping my head around" how to illustrate the wraparound 360 background. I am so confused....:)

[austinmdiamond]

So I found a background image online to try it out on: 

Then I placed it behind my character animation, and moved it slightly frame by frame. It looks pretty good. Mine will be different, since there is different scenery on all sides (one side is mostly green hills like this, one side is mostly city, one side is mostly brown hills like this, one side is mostly tall snowy mountains), which makes it more difficult.

Also, if you notice the bush that starts at his back side on his left, by the end of the turnaround (just before the GIF restarts) it's about to continue at his back side on the right—but then skips back to his left side at the beginning. This happens even though it was created as a wraparound illustration, so I'm kind of confused!

(Ignore the pencil and book switching hands, it's intentional. 🙂

[JoãoCésar]

Hi.

You need to make sure that both horizontal sides of your images match. You can do this by manually editing the artwork or by using, for example, the Offset filter from Photoshop.

https://www.youtube.com/watch?v=V-mch2kbSFY

And a common approach for the loop animation:

- Duplicate the background;

- Convert both instances to a symbol;

- Align one of the horizontal sides of the newly created instance to one of the horizontal sides of the stage;

- Create a tween animation that moves the instance horizontally until half of its width leaves the screen.

https://www.youtube.com/watch?v=eXwQjUwEa40

I hope these help.

Regards,

JC

[Neha2620368675kt]

The rotation of a point ( 𝑥 , 𝑦 ) by 360 degrees does not alter its coordinates, and such a rotation can be represented by the coordinate transformation ( 𝑥 , 𝑦 ) → ( 𝑥 , 𝑦 ) . We also note that all rotations about the same point that differ by a multiple of 360 degrees are equivalent.

[_keyframer]

I have nothing to add except that you are on the right track with everyone's advice here. But what you are trying to do is very time-consuming and requires a great deal of skill with drawing and knowing Animate's timeline(s) and animation features. Just keep going in this direction and I think you'll get there depending on how smooth you want it to be.

[austinmdiamond]

Thanks for all your help guys! I created my character animation which I posted above using Photoshop's frame by frame timeline. Is there a way to import that animation into Animate to animate with the background as you're describing? I really don't want to draw the turnaround over again!!

[JoãoCésar]

Great! You're welcome!

One way would be to export the animation from Photoshop as a PNG sequence and then import this sequence back to Animate.

https://community.adobe.com/t5/animate-discussions/importing-image-sequences-to-animate-cc/m-p/96268...

You can also import PSD files into Animate.

[austinmdiamond]

Check it out everyone!! 

😄

[JoãoCésar]

Congratulations on your progress!

[Nicktendo28]

try this tutorial. https://www.youtube.com/watch?v=yvUkaBhwAFY