• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Creating a Spinning 360 Animation

Participant ,
Sep 16, 2022 Sep 16, 2022

Copy link to clipboard

Copied

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

TOPICS
How to

Views

811

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 16, 2022 Sep 16, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 16, 2022 Sep 16, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 16, 2022 Sep 16, 2022

Copy link to clipboard

Copied

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Bump...?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

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....:)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

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

-At80HVy9kRkmsgMdqj7o-hIx9mvHt87yg6ukk48OjY.jpg

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. 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

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.

 


Animator and content creator for Animate CC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

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!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

Check it out everyone!! 

 

 

😄

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2022 Sep 21, 2022

Copy link to clipboard

Copied

Congratulations on your progress!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2022 Sep 21, 2022

Copy link to clipboard

Copied

LATEST

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines