Strict typing and type hints
There are a few ways of working with defining variables in the GSAP library in Adobe flash. The preferred way is the dynamic way (the way we were working so far). The other way will be more familiar to OOP developers and we will explore that in this lesson. In this lesson, we'll take a look at how to work with Type Hints when you develop animations the strict way.
Video Transcript
00:00Before we talk about this strict typing, I want to go back to our, and by the way, I kind of want to kill that animation, so I'm just going to comment out our on update, because it's also very, very hard on a processor to do too many on updates, and it's one of the stuff that you probably want to, I would say, avoid overdoing, over calling, if you're going to have, especially in our case, where we're going to have 100 animations, you really don't want to call an on update for 100 animations.
00:29And I'm going to show you how to solve that problem soon, because I think it's an important problem to solve and understand how to create something that is a little bit more robust in your application.
00:41Okay, so speaking of which, let's get back to our work. And what I want to do in our on repeat, just for the sake of our example, I want to actually start a new tween, tween max, and I'm going to, I want to tint it.
00:57So I'm going to create a new two, and I'm going to set my target, which is going to be my TM, my TM little target as display object.
01:11And by the way, it's as a display object, because we could also animate things that are not display objects, our duration, let's set it to be like, zero to two seconds, and we want to tint it, but I'm going to and I'm going to use again the, I'm going to go back up here and this time around,
01:26I'm just going to move our array of colors to make it more accessible all throughout our class. So I'm just going to arrive at bar that so it's accessible.
01:37And the same style that we created our animation to decide the color of our shape is the is going to be the exact same thing that we're going to do for our element.
01:47So I'm just going to copy that code, which was that randomization that we did a couple of videos ago, and I'm just going to tint my item randomly. That way, we're not going to be stuck with a few colors stuck in the same exact spot all the time, but their colors are going to change all the time.
02:03So to test this out, I'm going to test out on less than 100 items or let's test it on 100 items and see what happens. So basically, it's going to every time it's going to be at its peak at the top, then it's going to start transitioning into a new color.
02:17Now, you can see that our our our transition of color here isn't incredibly gradual, and I probably would want it to be more gradual. So we could set here like maybe a one second delay, even though what what what that would actually mean is that it might not ever get to this color, and it's always going to be changing colors.
02:38So our elements will be in this constant stages of modifying and morphing morphing colors, which is completely fine. And that works for us beautifully. Okay, so that's it about that. And what I want to talk about next is the strict typing, I'm not going to dedicate too much time for it, because personally, I don't really do it. So, but I'm going to talk about it because I think you want to know about it, you might want to know about it.
03:02So as many of you know, if you're working in ActionScript, and this is ActionScript three, it's basically exclusive only ActionScript three related. Now, it ActionScript three tries to be tries to be as strict typed as possible, it makes it easier to debug, it gives you hints more easily. If you want to do it in this way, the it's very easy, but you would have to separate between your creation of your tween max with your variables, which is basically your third parameter here, which is the action script.
03:31Or here, which in this language is called tween max vars. So I'm just going to create a tween max vars. And just set a new tween max vars. Once I create my tween max vars variable, I could then or literally go property by property and start defining those properties. But instead of defining properties, I'm actually defining methods. So I'm going to set here my x method.
03:58And let's say I'm going to just put everything into my stage stage height. Oh, with this in this case, and let's do the same thing for our y. And we're going to do the stage stage height, sort of literally just pushing everything to wherever we want it to go. And that's really all I had to do. And all I have to do next is literally just come right here and basically remove everything. But let's before we remove it, let's say that we wanted to auto repeat.
04:27So all we have to do again is we'll just go to our TMV, find our repeat, set the repeat value. So it's a lot more robust, a lot more writing, not that fun. I personally don't really like that. But that's really to each their own, right? And, and there you go. So we'd create all these. And all that would be left for us is just to delete our object here, and then just pass through this new object that we've just created instead. And then you'll see that our animation will basically create a new object. And then we'll just
04:57create flow through the way that we would want it to be. And by the way, the reason why this is happening, like this kind of rain going on, and it's not going back and throw us because we're not doing a repeat, we're not, we're not doing a yo yo. So we would have to also come to my to the property TMV and define the yo yo, and set that to be true as well. And run it. And now we'd have a yo yo where it's going to go back and forth and flowing back and forth. And by the way, just looking at the ratios here of the scale, obviously,
05:27this is way too large. But that really is because of our radius that is has a big gap here. But if we're really going to go with this, this motion, and by the way, let me just make sure that I'm, I'm just gonna undo this for a second, because I want to just copy this and make sure that we don't lose this. So I'm just gonna TMV. And I'm just gonna make sure that I comment this out. And you guys will be able to gain access to the old methods as well, just make sure that everything here is
06:16right. So we're gonna go with our COSHA, TMV, yo yo. We're gonna set yo yo to be true around this baby one more time. And we're going to get this flow. The only problem with our flow right now is that our circles are way too big. So as I was saying, we could go and kind of define that our radius could start from five, and it could go up, let's say all the way to 20 instead of this large, large blobs that we're
06:46going in this phase, is that there is no ease, so it doesn't feel incredibly natural. So if we wanted to, we could have figured out an ease, and go to our animation, and find our TMV, and add an ease, ease, and send in ease itself. So to find that ease, we'd have to first find one. So we would import, and green sock, and we'd want to ease. And how about we go for a bounce?
07:16And I'm going to do a bounce in. Let's see how bounce in works. And if that's not nice, we'll try to bounce out. And if that doesn't work, we'll try to bounce in and out. So you can see that this is really, really crazy, but kind of cool. And we might want to instead of bounce, just play around with it. So how about if not bounce? Let's find something that is elastic. Let's see if there is elastic at all. Here we go, elastic. So let's give it let's give elastic a try.
07:51And this is way too crazy, right? But it's really interesting.
07:58So that's just a couple of ideas. And you can play around if you want to ease in, if you want to ease out, if you want both, but give it a give it a shot. So you have your a lot of different variations, different interesting things that you could create. And obviously, this is way not and that's well, it depends on the type of animation you want to have your, but we could have an ease in and out.
08:19And ease in and out might be what we're looking for. This is incredibly interesting. You could create really, really interesting dynamic things. Very, very fun. And you could even turn this into a game on its own. So you could create your some sort of algorithm. And how about we do that in the next session? So let's continue in the next session and turn this into some sort of an interactive game. All right.