#adobe animate tutorial

Make sure your assets are imported as lossless & uncheck "Allow smoothing" so everything still shows up in the classic pixelated style if that's what you're going for.

You will be using a layer mask. You can create a layer mask by creating first a layer where the content that will be displayed through the filled-in space of the layer above will go. This layer's contents CANNOT be a movie clip & potentially cannot be a symbol (I wasted an hour of agonizing over why this wasn't working because I mistakenly converted the beneath layer to a movie clip based on misleading tips given online).

Layer masks will only display when both the mask layer (the topmost layer) & the content (what displays in the filled in portion of the mask) are locked. Unlock whatever layer you need to modify.

The mask layer will not work or register as a filled in space if it is a bitmap (i.e. image/sprite). According to official tutorials, gradients, transparency, colors, & line styles are also ignored. It only recognizes "filled in areas" which will be 100% transparent in the mask.

In order to convert your sprite into a shape/vector to work as a mask, you can either possibly create it as a vector in a vector based program or try to use Adobe Animate's trace function by selecting the object & under the top of the object menu selecting "trace." Modify the traced image if needed.

Note: This is not a very precise tracing. I suggest making a version of your sprite that is a completely filled in solid color silhouette & ideally not white as it will be hard to see on the default white background when you edit an object.

In order to animate a change of scale of the mask, you must convert the shape to a movie clip (under Convert to Symbol in Object panel). Do this before you add any additional keyframes for the animation.

Then insert a keyframe after the desired amount of frames you want the mask to grow for the transportation effect.

With this new keyframe selected, scale the mask layer shape until it covers the entire frame.

Right click preceding frame > Create Classic Tween.

Lock all layers in the mask & test.

Other Notes:

If the panel you are shifting to lacks enough visual differences from the starting panel (such as in the case of the panel above), you may want to add a different visual/backdrop below the linked mask layers (i.e. not part of the mask at all) to create contrast. I used a simple sun texture edited green for this with an extra momentary flash of a transparent black fill to make the appearance a bit less harsh. You could use any other solid color fill if you wanted. Consider adding a few frames to make it seem like the lights went off for a cool effect.

If a Classic Tween doesn't work for the mask's animation, you can try a Motion Tween, but I've literally never been able to get a Motion Tween to work properly.