Asset warping bitmaps

Introduction

In this video I want to show you the Asset Warp Tool, but more specifically how to use it to deform and animate a single bitmap image.

So, I'm going to import my bitmap image.

Importing a bitmap and setting up the Asset Warp Tool

It's an image of an inch worm that I created using Photoshop.

So, now the next step is to select the Asset Warp Tool.

Just click here in your Tool box or hit W on your keyboard.

And I'm going to make about five or six handles using this tool by clicking directly on the bitmap itself.

The mesh is detecting just the artwork itself because this bitmap has a transparent background.

And so, I've added six handles here as you can see and that should be plenty.

So, here in the Timeline all I need to do is simply click on another frame

Animating a bitmap with handles and keyframes

and hit F6 to insert a keyframe.

Now when you start animating by moving around these handles and even rotating them, you can see here if I hover along the outer circle that's dashed, I can rotate and further deform the bitmap.

So, let's make this inch worm walk.

So, I'm going to move these handles in a way that represent how an inch worm, or a caterpillar would walk.

A little further down the Timeline I'm going to insert another keyframe and continue by pushing and pulling these handles to make this little character walk.

And so just to show you how that looks.

Let's go and I'm going to apply a Classic Tween.

Applying tweens and easing to deformation animation

And while we're at it, let's add a little bit of easing.

So, I'm going to click on the Properties panel where it says Classic Ease.

I'm going to select Ease In Out and Quad will do.

And then just continue the animation.

And so now just create more keyframes and continue animating.

So, here's the completed inch worm walk cycle if you will.

And overall, I'm pretty satisfied with it.

So, let's take this to another level.

Animating layered Photoshop assets with Asset Warp Tool

In Photoshop I took a photo of a praying mantis and edited the parts so that they were all on separate layers and then I imported that Photoshop file into Animate.

And here are all the layers that make up this praying mantis.

And then using the Asset Warp Tool, just as I had done with the inch worm, I created handles and using these handles I went ahead and animated this character.

And with a couple of other photographs that I shot I placed him within a scene.

So, whether you're animating vectors or bitmaps, the Asset Warp Tool is a really cool new addition to Adobe Animate.