Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Animating Filters in Flex 4, Part I

0 (0 Likes / 0 Dislikes)
[Adobe Developer Connection] [codedependent() ;] [keys pressed] [Chet Haase - Flex SDK Team] Today on CodeDependent, I'm going to talk about animate filter-- which is one of the new effects in Flex 4--and how you can use it for getting some transient filter effects on components on the screen. So in this application I have these 3 buttons that I'd like to animate as they go from the first state to the second state. The button on top, I'm changing the label, so it is first going to say First State, and then it is going to say Second State. And I liken it to the fact that it blurs the button out sufficiently, so that we can change the text behind the scenes, and then come back to not blurred at all, and then the text will magically change in the middle. The next button is only in state 1, and I want it to fade out. I want it to blur and fade out at the same time, just sort of dissipate. And then the other button is the opposite of that. It's only going be in state 2, and I'm going to fade and blur that in. So it going to go from completely blurry to very concrete by the time it gets there. Then we can toggle between these states, so let's run the application and see how that works. So we click on this button, and you can see 3 effects kicking in here. On the first button that I'm clicking on, we get this blur effect where it gets very blurry, and then when it's halfway there, when it is completely blurred out, we actually switch the text at the same time and since it's so blurry, you actually can't see that, right. It's just a bunch of blurry pixels on the screen, as you would think, by using a blurry filter. The next button down blurs and then fades out over time, so that by the time it's completely blurry, it's also completely transparent, and then it's not there in the next state. And then the button below that is simply the opposite. It's blurring in when the other is blurring out. So how does that work in code? So we have these transitions declared here between our states. We're going to run this transition in parallel on those 3 items. We're going to run an animate filter on that first guy. So we wanted this one to get very, very blurry, switch the label, and then unblur. And so we're going to use a SetAction to actually change the label, so we're going to start delay 500, so basically halfway through the animation we'll switch the label on the fly. We're going to use an animate filter for actually doing the blur. And Animatefilter works by declaring the target. This is the object that actually has the filter applied to it. Then you're going to specify the bitmap filter that we're going to animate the properties on. This is blur zero, which is declared up here, so we have a blur filter declared. Give it a quality of 3, which reduces a lot of those linear artifacts that would otherwise make the text swap pretty obvious when we were doing it. So we make it really, really blurry. And then we give it a repeat count of 2 and a repeat behavior of reverse. This means that we're going to animate a blur, getting more and more blurry, and then we're going to hit the end of that animation, and reverse it and go back to not blurry at all. We're going to animate 2 properties on the border filter, the blur x and the blur y are going to be blurring horizontally and vertically at the same time. Then we're going to go from a value of zero to a value of 20, a 20-pixel wide blur in those directions and then, since it's reversing, it's going to get all the way out and then turn around and go back. And then the next one is going to be a fade on the other buttons because we're going to fade out one button, and we're going to fade in the other. The magic of transitions is I didn't need to tell it whether to fade in or out. It can figure that out automatically based on the state information. Then we're going to do animate filters on those. So, again, we're going to animate a blur on button B1, and we're going to animate the blur x and blur y. We're just going to make it very blurry over time. Let's see--this one is going to go from a value of 30 to a value of zero, so very blurry to not blurry at all. That guy is fading in and blurring in at the same time. And then the other one is going from a value of zero to a value of 30. All right, and then is the reverse transition. This is actually going back to state 1. And then we have transition to state 2 that is simply the reverse of all of these actions. So that's the way the animate filters work, so we can take a look at that one more time. We've got this guy going very blurry, swap the text, and then not blurry. The other guy is getting blurry and fading out and fading in. Okay, so that works pretty well, so let's do a couple of other things. Let's un-comment some code. This is Julia Child approach to programming. We simply show you the code that I wrote earlier. So we've got a couple more buttons, and what I'd like to do on these is a little bit different. I have a glow on this button down here that I would like to change the color on. Let's say you're actually at the reactor control panel, and the core just had a meltdown, and maybe you'd like to turn the button red to sort of notify people that they should do something. And then we're going to do a different blur action on this button. I actually want this object to get blurry over time and then keep that blur. So in this other state, it's going to be completely blurry. So let's try to use animate filter on both of these and then see what happens. So we go to the Second State, and I didn't get at all what I was looking for there, so watch this button, and what I want to do is to go from clear to blurry, and when I get to blurry, I want the thing to actually stay blurry. So it gets blurry, blurry, blurry, and then it blinks back to completely clear. We can read blurry, but that's not actually being blurry. And then in the meantime, there's this guy down here. We sort of got the effect we wanted, but if you look closely, you can see some snapping artifacts on the glow. It will get more pronounced at first, and it will animate the color nicely, and then at the end, it will snap and get less pronounced. So what's going on? So it turns out that animate filter is appropriate for using transient effects where you want to apply a filter, animate its properties, and then remove the filter when you're done. It is not appropriate for taking an existing filter, like the glow that we have here, and animating the properties of that filter over time. That's not what it does, so don't use it for that. This blur thing here--what I really wanted to do is have a blur on the object that is not blurred at all and then goes to increasingly blurry, and then stays there. Well, that's not what animate filter does. Animate filter will attach a blur filter to it, animate those properties, and then take it away. So we can take a look at how those things work, or rather don't work, up here. So we have our button B3 that we're going to do the blur on so we're going to animate this blur 3 object that is declared up here, similar to what we were doing before. But the main problem is it doesn't actually work the way we want it to, right? We're going to go to a value of zero, which means we're going to get really crisp when we go back to state 1, and we're going animate to a value of 30 when we're going to the other state. But then the filter is actually going to be removed, and we're not going to get the effect we were looking for. The other one, the other animate filter used a simple motion path on the property color. Notice that it uses an rgb interpolator, so it does correct color interpolation. All of that stuff is good, and it is animating correctly to a value of red or blue, depending on the state transition that it is doing. But it's not actually doing what we wanted, which is leave the filter on when you're done with the effects that got applied during the animation. So next time, we're going to do a show that shows you the correct way to animate filters that actually have persistent values after the effect is done. So in the meantime, if you want to check out the code for this and other related applications, go to my blog at [rocket launching]

Video Details

Duration: 7 minutes and 50 seconds
Language: English
License: All rights reserved
Genre: None
Views: 144
Posted by: adobetv on Oct 21, 2010

Chet demonstrates how to use the new AnimateFilter effect in Flex 4 to animate transient filter effects such as blurring objects out. He also shows when AnimateFilter is not the right tool for the job.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.