[Animation Breakdown] Using and abusing the stage with ActionScript, Zooms and positioning, and the importance of code management

Oh boy, it's that time of the month again where I ramble for a long time about... Programming! Ah, Animation Breakdowns. People don't read 'em, but its nice to have 'em. (It also gives me an excuse to yap)

Over this Animation Breakdown, I'll be explaining how I used ActionScript to zoom in the stage and maintain its positioning, and the alternate options I could have done instead.

-=[ ActionScript and how it handles coordinates ]=-

If you've read previous Animation Breakdowns, you'll know that ActionScript is basically Adobe's softcore version of JavaScript. It's very similar and shares a lot of the root concepts. However, there's a lot it does that is exclusive to just Flash.

The top left of the canvas is considered to be the beginning point. It's 0,0 on the canvas. For example, this is the exact position on the canvas where the text box is in the Akagi animation. On the speech bubble, riiiiight in the top left, there's a small "+" sign. That's the origin point of the speech bubble, which is its anchor point. 0,0.

-=[ ActionScript and how it handles scaling objects ]=-

Okay, so I kind of lied when I said "zoom" earlier. To zoom in on something is to get closer to it. What I did instead is scale it up, so instead of you getting closer to X, X gets closer to you.

ActionScript uses two values to resize an object: "scaleX" and "scaleY" (The two axis). By setting the scale to something specific, I can make the scale 1.5 times bigger by just typing:
scaleX = 1.5;
scaleY = 1.5;
However, as stated earlier, it will zoom on its origin point - 0,0. Or the top left corner. So, we need to centre it.

-=[ Uniformly scaling and zooming two different variables ]=-

Chuckles I'm in danger!

So firstly, let's tackle the first issue: How do we zoom in? We've got to start and stop at specific times. We could use Timer events, but you'd need to calculate the final time in which both of these values would have to stop, then stop the timer, remove it, and make sure it doesn't continue.

The next best way is to use the "ENTER_FRAME" tick event. In ActionScript, there's events that catch certain things. Like, for example, "MouseEvent.CLICK" captures mouse clicks, and "MOUSE_OUT" captures when the mouse leaves an object. "Event.ENTER_FRAME" is different. It's added and activated immediately, and begins running actions once every 1ms. This means that, by carefully adding and removing ENTER_FRAME, we can easily control how much the stage zooms in based on the final zoom number, which is what I want to tie everything to.
We add the Event Listener, increase the timer number by 1 for every frame, then once that number hits 75 (our desired maximum zoom in), remove the event listener. Great! Now we're zooming in slowly!

Problem number two: The entire stage is zooming into the top left corner... how do we keep everything positioned? The way I did this was managing numbers. You can't just zoom the stage in and pan the stage up and down with the same variables, that doesn't work. So, I set a number and tried to match the position visually on the X axis first. This was important to get the feel right. However, because the stage width is smaller than height, and we're zooming into Akagi's face, we couldn't reuse the same number. So, again, we change the panning Y number until everything matches.

Phew... done, right? Hahaha, No.

Now I have another problem... the menu disappears into the deadzone of the animation and can no longer be clicked... NEXT STEP: SAVING PRIVATE OPTIONS MENU! This was another 'trial and error' level of problem solving where I had to make ANOTHER y number and lift the options menu with the zoom in.

Finally... NOW I'm done. Well, kind of.

Zooming in means... Zooming back out. Because I wanted a comical quick zoom out, I had to adjust ALL of the variables. The zoom out numbers for each item now has to be different, and I have to make sure they all mathematically all work... Nightmare time.

However, I made this all work by firstly resetting zoom back to zero. It doesn't take 75 frames to reduce the size back to 0, so I set the zooming out speed to 0.02, instead of the 0.002 zoom in speed I had used previously. Once it was zooming out on time and matching to the gloom background disappearing, I then worked on the positioning.

I noted the stage positionings of everything at its resting state, then, using large numbers on the zoom out stage, got within the ballpark of where I needed to be position-wise. Then, I managed the decimal point until it was within a fraction (in some case 0.01px) of its original position. For the final tiny bit, I would set the position manually when the zoom out had been successful. The manual position reset is so minimal thanks to the tiny margin of error that it's barely even noticeable.

An that's how I scaled and repositioned all of the objects in Akagi's animation!

-=[ The importance of code management ]=-

Now I think it's a good time to discuss the importance of code management, comments, and keeping a track of everything.

 Everything I just discussed above is in this image. Is there better ways to handle this? Absolutely. You could create complicated maths to solve the issue. What I'm doing is incredibly ham-fisted, but it works for me. 

If I hadn't written ANY comments and just left everything as is, well firstly imagine if you had written this, then put it down for a month. Come back to this project with a shitty memory and tell me you remember what everything does. Secondly, imagine you're handing this file off to someone else. How would THEY read your code?

You'll also notice, minus the hard-coded numbers, everything here is controlled by variables at the top of the image. By having a "control panel" of sorts, I can just change a single number to experiment instead of going to every single variable here and changing them all. This increases workflow, and saves so much time. It also helps you add, change, or delete large parts without worry.

Manage your code, always.

Anyway, that's all I have for you all today! If any of you have any questions about today's animation breakdown, don't be afraid to reach out and ask questions!