Transparent Fades: Tip/Workaround

Find detailed help from the AAO community, or write your own tutorials.

Moderator: EN - Forum Moderators

Post Reply
User avatar
TimeAxis
Posts: 389
Joined: Fri Jan 01, 2021 8:27 pm
Spoken languages: English
Contact:

Transparent Fades: Tip/Workaround

Post by TimeAxis »

I thought I'd share this workaround I came up with for creating transparent fades (as in fading in and out to transparency, rather than to a solid color). Currently, the editor only supports fading in and out for character sprites, not for things like backgrounds or popups.

The go-to solution I've seen people use for this would be to create an animated gif of the fade-out, but not only do some browsers not support semi-transparent animations, but these tend to be unnecessarily large and can be a hassle to make if you don't know how. There's a much easier way that doesn't require you to make any new additional graphics. Simply add the sprite as a character. Then you can use the existing fade-out functionality. Unfortunately, AAO doesn't support stacking character sprites on top of each other. Only one character can exist in one position on the screen at the same time, so this can get pretty tricky, so I'll explain a few different ways of pulling this off depending on the circumstances:

A. Fading from one background to another (without a character on screen)
Let's say you're at Phoenix's Office, and you want a clean fade to Gourd Lake. Of course, you'd have Phoenix's Office and Gourd Lake entered as a "Places", like normal. But you would then also create a new character named "fades" or "FX" or something else arbitrary, and add Gourd Lake image's URL as a custom pose.
Then you'd create a frame set in Phoenix's Office, then make another frame with the "FX" character with the Gourd Lake BG pose, and set the "Appearance Animation" option to "Fade in". Then make another frame that lasts 1ms, set in Gourd Lake, which also has the same character graphic (just to avoid any potential flickering), then finally make a frame set in Gourd Lake normally without the character, and the fade is done.

B. Fading from one background to another (while a character is on screen)
This is mostly the same as the above, but there's one more step. You need to take the sprite of the character in the pose they're in when you want the fade to happen, grab that image URL, and go to the "place" they're standing in, and add that sprite to the place as a background object. If you're working with a normally sized area and a centered character, you won't need to do any adjustment, but if it's a long area like the courtroom, or your character is off to the sides, you may have to manually adjust the coordinates of the background object so that it perfectly lines up with where the character would be on screen when the fade happens. Set the object to hidden by default so it's not always visible.
So you've got a frame at Phoenix's Office with your character on screen, and next, you want to create a frame with the action "reveal an object in a place", and make sure you choose the correct one that matches your character's graphic. Then you're free to erase the character on screen, and take the same steps as above. Once the fade is over, you can add an action to "hide an object in a place" and hide the object from before.

C. Adding a fade-in or fade-out to a pop-up graphic (without a character on screen)
This one is pretty easy. Like in option A, since you don't need to worry about having a character on the screen, just put the pop-up graphic into your "FX" character's poses, and use that to display it instead of a pop-up. You can add Fade-ins or fade-outs as necessary, like you would any other character graphic.

D. Adding a fade-in or fade-out to a pop-up graphic (while a character is on screen)
Here's where it gets a bit more tricky, but if you did option B, it's a lot like that. Just like in B, add the character sprite to your "Place" as a Background Object, then add the pop-up graphic into your "FX" character's poses. You would also have a normal pop-up version of the graphic for use outside of the fade effect.
Start by doing what you did in B, to swap from a frame showing the character's sprite to a frame showing the character background object, and then you can use a fade-in to show the pop-up graphic in the "FX" character.
Next, you're going to want to switch back to showing the real character, and the real pop-up. So make a 1ms frame with the pop-up, and a "hide an object in a place" action to hide the character background object, while displaying the proper graphic for the character. You may need to add some buffer frames here or there to get this to look right. Now you've got the character and the pop-up on the screen at the same time like normal, and you're free to change the character's pose or make them talk or whatever else. Then finally, do the exact same thing but in reverse when you want the object to fade out.

It's a bit of a hassle, but I think it's more efficient than creating large animated gifs, so until AAO adds transparent fade-out functionality to non-character graphics, this is the best method I can think of. As long as you don't require a whole lot of fade-outs, this method isn't too bad.

Here's an example trial to show how it looks. If anything's unclear, I can add anyone who wants to as a collaborator for that trial so they can see how it works.
Last edited by TimeAxis on Wed Oct 27, 2021 1:24 am, edited 1 time in total.
Image
Question Arcs (Threads Coming Eventually)
ImageImageImageImage
Gaiden Episodes
Champion of Turnabouts ★
HALLOWEEN HERO
Other
Phoenix Wright: Ace Attornauts
The Curious Case of the Phantom Limousine (Coming Eventually)
The Imposter's Turnabout (Coming Maybe)
User avatar
Enthalpy
Community Manager
Posts: 5169
Joined: Wed Jan 04, 2012 4:40 am
Gender: Male
Spoken languages: English, limited Spanish

Re: Transparent Fades: Tip/Workaround

Post by Enthalpy »

TimeAxis wrote: Tue Oct 26, 2021 11:31 am I thought I'd share this workaround I came up with for creating transparent fades. Currently, the editor only supports fading in and out for character sprites, not for things like backgrounds or popups.
Huh? "Screen fade displayed during this frame" is available in the screen editor and explicitly supports fading the background. Is there something wrong with this?
[D]isordered speech is not so much injury to the lips that give it forth, as to the disproportion and incoherence of things in themselves, so negligently expressed. ~ Ben Jonson
User avatar
TimeAxis
Posts: 389
Joined: Fri Jan 01, 2021 8:27 pm
Spoken languages: English
Contact:

Re: Transparent Fades: Tip/Workaround

Post by TimeAxis »

That’s fading to black or another solid color. I’m talking about a crossfade as seen in the example trial. The effect in the example trial is impossible to do without this workaround (or with the animated gif method).
Image
Question Arcs (Threads Coming Eventually)
ImageImageImageImage
Gaiden Episodes
Champion of Turnabouts ★
HALLOWEEN HERO
Other
Phoenix Wright: Ace Attornauts
The Curious Case of the Phantom Limousine (Coming Eventually)
The Imposter's Turnabout (Coming Maybe)
User avatar
Enthalpy
Community Manager
Posts: 5169
Joined: Wed Jan 04, 2012 4:40 am
Gender: Male
Spoken languages: English, limited Spanish

Re: Transparent Fades: Tip/Workaround

Post by Enthalpy »

Huh, neat. I can look into adding native support for this, but some music improvements are higher on my priority list.

I recommend you rewrite the first two sentences of your tutorial to make the difference clearer. I've never heard of "transparent fade" meaning "fading to/from transparency".
[D]isordered speech is not so much injury to the lips that give it forth, as to the disproportion and incoherence of things in themselves, so negligently expressed. ~ Ben Jonson
Post Reply