sqwarkdemon
patreon
[Animation Breakdown] Pushing Flash to its limits | (Part 2) | How I used and programmed the filters to my benefit
🕑 Added 2024-12-20 00:21:25 +0000 UTCContinuing from the previous breakdown here, let's discuss how I've used filters to my benefit in previous animations - and why it was beneficial for me in certain use cases.
-=[ How I found out about programming filters and colour matrixes ]=-
Funnily enough, I found out about changing filters via AS3 (ActionScript 3) because of a project I was working on in 2020 - a tracker for Azur Lane events.
For this project, I wanted to apply filters whenever I hovered over buttons and instead of doing it my old way (on hover button events) I wanted to add a single use function that takes what I'm hovering over and applies the filter that way. To my surprise, that was possible! (Another reason why I hated working with HTML5 canvases)
This would sit dormant in my mind whenever I made content, until recently when I started applying this to other animations.
-=[ Transformation sequences in my animations ]=-
Going back further for a moment, certain users might remember this animation I made years ago...
Well, to get this effect I actually do the same thing I did with Stocking, but it was done as an animation tween between frames and you can even see the other Hanekawa "grow" into frame which added a neat effect.
By tweening the brightness and contrast, I was able to give the illusion of a fade to white for a transform. And because it was manually done, I could fine-tune the details too.
This wasn't the greatest solution, though, because the transform effect was on the same layer as her idle animations, which meant I was now limited with how much motion Hanekawa could display.
So, using what I had learned, when I had decided to add the transformation to Stocking (which was never planned by the way, it just sort of happened), I had to make it more dynamic.
-=[ How I got Stocking's transformation to work ]=-
The first iteration of her flash was made when I had decided I was going to keep her static. You may have seen WIPs with it, but this is what it looked like:
It's a very basic way to do it - I just copied Stocking's shape and made it into a blank white shape (recoloured below to green for better visibility) and made the colour fade in using a tween. it looked great, and didn't distort any colours.
However, again, I had issues the moment I decided to ultimately include animations. Because of the way I animate body movements, I couldn't use this simple tweening method, and I wasn't going to kneecap dynamic animations to use the method I had used with Hanekawa; I needed something more robust.
Enter: Colour Matrix!
Yep, finally that little bit of knowledge I had gained from the Azur Lane testing had got a chance to resurface and I remembered the best way forward was to apply a filter on the fly. You see, changing contrast and brightness isn't demanding like blur filters - with blur filters you're basically changing the mesh of the image and adding weird transparency to it on the go. Contrast and Brightness are different.
Using the code above, I was able to increment the brightness up and down WITHOUT having to change any idle animations:
This was instrumental, because I didn't have to interrupt any kick animation or idle animation to get her to change, which looks jarring and sloppy. Now I can animate on the go, and I wasn't limited by any animations. It's not perfect, you can see some slight frame dips, but it's not bad and works just fine under most situations.
The only issues I had were just cosmetic - I didn't like how it subtly changed colours upon transforming (you can see a subtle colour change when the flash to white happens) and the brightness feels harsher and less easy on the eyes somehow. But it works... and that's all I can ask for.
If all you wanted to know was the technical details, you reached the end! You're done! You don't need to read anymore.
However, yapped an entire extra posts worth of information about the background of Flash and HTML5, so if you want to bore yourself further, you can read that separate Animation Breakdown post in this pastebin: https://pastebin.com/Rt0J96TN
![[Animation Breakdown] Pushing Flash to its limits | (Part 2) | How I used and programmed the filters to my benefit](https://img10.patrefans.com/storage/1/af/eh/563145-019e83f6-1bcc-7107-9f25-43ddcc6049dd.png)
