Moving Things With Adobe Animate!

I was editing my portfolio when I came upon the idea of using GIFs on my homepage for some of my projects. I already had a GIF for my 4.02A work, and so I figured to keep the symmetry, I could try my hand at animating my Watering Cans graphic design piece. I had never used Adobe Animate before, and so I sought YouTube to figure out how to turn my static Illustrator File into a moving photo.

I looked to the tutorial videos made by Adobe, and my first try at Animate resulted in this bouncing ball:

Something that made this process easier was that I was able to reverse the motion once I animated the ball moving down. I was surprised at how quickly I was able to create this, and so I felt confident that I could apply the same frame-by-frame technique to my design. Below are markings indicating how I imagined the motion would go:

I began to add keyframes and shift the shapes I wanted slowly, so I could try to have a fluid motion. After a few minutes, I began to realize that frame-by-frame animation was maybe not the way to go. This is what happened:

Ignoring the random jittery motion of the watering can, the arm moves generally fine, although the movement is choppy. I had initially looked up a video to explain how to import an Illustrator file into Animate, and the video was generally about animating an infographic. I clicked the next two videos in the series (tweening and rotation) and was introduced to motion tweening. Essentially, I can pick an object, designate the start and end positions (and possibly apply some rotation) and the object would then move from start until it got to end.

Using motion tweening, I treated the arms, hands, and watering cans as separate objects and applied various forms of motion and slight rotations until I got something that was animated in one way:

Now since I wanted it to look like the water was flowing, I needed to create a layer above the water that created the notion of a flow. For this, I used a mask. By animating a rectangular mask, I could move it across the water for the effect I was looking for:

By adding a solid water object behind it (especially since there is a gradient), it will show that there is water “flowing” from the can. The last thing to do was to copy, paste, and reverse the animation I just made so that there is a continuous loop. The final animation looks like this:

Since the original drawing contains a water droplet from the vine hitting the tiny plant on the ground, that is the next thing I would try to animate. For today, I am satisfied. I found it tricky to create shapes (especially smaller ones) in Animate, so I may just create shapes in Illustrator and import them to be animated.

This small experiment was really fun, and I am very pleased with the results. I can’t wait to learn more about animation and see where I can use it in future projects!