Highlighted

Can I make looping, marching arrows in Animate?

Community Beginner ,
Dec 16, 2019

Copy link to clipboard

Copied

I need to create an infinite number of arrows moving from left to right in a line across an area of the screen.  I would like the arrows to appear inside of a long thin rectangle and disappear when they move outside of it.  It seems pretty straightforward to me but I am new to Animate and am struggling with this.

 

Can someone help me get started?

Adobe Community Professional
Correct answer by Colin Holgate | Adobe Community Professional

As with most animated GIFs you only need enough unique frames to the point that the animation loops. Say you have an area that is 500 pixels wide, and 20 arrows that are 25 pixels wide, and touching each other, are moving from left to right at 5 pixels per frame. You would have 21 arrows and a mask, and as the 20 move to the right another one comes in to view. After five frames the rightmost arrow has gone past the end of the mask, and the one coming in from the left is fully in view. You would loop that animation so that the second of the arrows snaps back to the left end of the mask. It would seem like an infinite set of arrows.

 

One sublety is that you would loop back to the second frame of the animation, because as I've described it the last frame and the first frame would look the same. Looping back to the second frame would look correct.

TOPICS
How to

Views

584

Likes

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

Can I make looping, marching arrows in Animate?

Community Beginner ,
Dec 16, 2019

Copy link to clipboard

Copied

I need to create an infinite number of arrows moving from left to right in a line across an area of the screen.  I would like the arrows to appear inside of a long thin rectangle and disappear when they move outside of it.  It seems pretty straightforward to me but I am new to Animate and am struggling with this.

 

Can someone help me get started?

Adobe Community Professional
Correct answer by Colin Holgate | Adobe Community Professional

As with most animated GIFs you only need enough unique frames to the point that the animation loops. Say you have an area that is 500 pixels wide, and 20 arrows that are 25 pixels wide, and touching each other, are moving from left to right at 5 pixels per frame. You would have 21 arrows and a mask, and as the 20 move to the right another one comes in to view. After five frames the rightmost arrow has gone past the end of the mask, and the one coming in from the left is fully in view. You would loop that animation so that the second of the arrows snaps back to the left end of the mask. It would seem like an infinite set of arrows.

 

One sublety is that you would loop back to the second frame of the animation, because as I've described it the last frame and the first frame would look the same. Looping back to the second frame would look correct.

TOPICS
How to

Views

585

Likes

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
Dec 16, 2019 0
Adobe Community Professional ,
Dec 16, 2019

Copy link to clipboard

Copied

As with most animated GIFs you only need enough unique frames to the point that the animation loops. Say you have an area that is 500 pixels wide, and 20 arrows that are 25 pixels wide, and touching each other, are moving from left to right at 5 pixels per frame. You would have 21 arrows and a mask, and as the 20 move to the right another one comes in to view. After five frames the rightmost arrow has gone past the end of the mask, and the one coming in from the left is fully in view. You would loop that animation so that the second of the arrows snaps back to the left end of the mask. It would seem like an infinite set of arrows.

 

One sublety is that you would loop back to the second frame of the animation, because as I've described it the last frame and the first frame would look the same. Looping back to the second frame would look correct.

Likes

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
Reply
Loading...
Dec 16, 2019 1
Community Beginner ,
Dec 17, 2019

Copy link to clipboard

Copied

Thanks Colin,

 

Now if I want to include this animation inside another animation is there a way to do that in the timeline or would it be best to just insert the looping GIF into a new timeline?

Likes

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
Reply
Loading...
Dec 17, 2019 0
Adobe Community Professional ,
Dec 17, 2019

Copy link to clipboard

Copied

You can just loop the arrows inside a graphic symbol. Then put that graphic symbol inside the other animated graphic symbol.

Likes

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
Reply
Loading...
Dec 17, 2019 0