First Guardian Teleport / Shift Effect Tutorial (in Adobe Animate)
Hello! Now that the prologue of Mythoslain is out & since I won't have time to update until tomorrow due to work, I wanted to write up quick notes on how to achieve this effect in Adobe Animate since I found absolutely no specific resources/very minimal helpful advice online.
Note: I only use Adobe Animate not because I'm a notable fan of Adobe, but simply because I have access to a Creative Cloud subscription through a family member.
This is specific to an HTML5 canvas, something the majority of guides advise against due to lag/stutter issues, but I didn't want to risk quality loss exporting to video & love being able to export proper [S] pages in a flash-like style.
Other flashing visual effects were made mostly in accordance with this 2012 guide by OmicronWanderer (DeviantArt).
Disclaimer: I am a total novice in this program, there may be a better way to do this, but I was unable to find any other methods in my hours of searching. This could be a brute force method, but it mostly works.
Full tips/guide under cut:
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.
If you have any questions, feel free to shoot me an ask & I can try my best to answer them. I may revisit this post to add visual aids/screenshots the next time I need to animate a page with this effect. Good luck!
