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 II

0 (0 Likes / 0 Dislikes)
[Adobe Developer Connection] [codedependent () ;] [keystrokes] [Chet Haase - Flex SKD Team] Today on CodeDependent I'm going to talk about animating filter properties. In a previous episode, I talked about animating filters that were transient, that were being applied to an object, animated, and then removed when you were done with the effect. For that we use the new animate filter effect in Flex 4. But if you actually want to animate the properties of a filter that is persistent on the object-- it exists on the object before the animation started, and you want it to stay on object after it's done--then you really need to use the super class of all the new Flex 4 effects called animate. This is an effect class that will animate the properties or arbitrary objects, be they components or graphic objects or data structures or filters. So we've got the situation where we want to take a button, and when we go from state to state, we'd like to increase the blur value or decrease the blur value, but keep the blur filter persistent on it. On another button, we have a filter that applies a color, and we want to change the color of that glow over time, but we want to keep the filter that provides the glow on that button, even when the animation is not running. So let's take a look at how to do that. Let's run an application. So if you saw the previous episode, you'll notice similar buttons to what we saw in that fascinating application. And those buttons are over here on the right, and you'll see the effect that we didn't want over there. So I'm going to click on one of the buttons, and you'll see the state change. And the ones on the left under the mouse, that is the effect that we're looking for. When we go to the blurry state, we want the button to get progressively more and more blurry and stay there, and we want the button below it to animate between blue and red with the glow that's applied around it. Now, the ones on the right are the effect that we weren't looking for and this is when we used animate filter to provide these filter effects. Yes, they animated the filter, but they also removed the filter when they were done, which is not what we were looking for. So the button on the top, you'll see goes to blurry. It gets progressively blurrier, and then the filter is removed and we've got this concrete button staring out us with the word Blurry on it-- not what we were looking for. Similarly, the button on the bottom has a red glow. We'd like it to animate between red blue, but you'll notice this snapping artifact. As the filter gets applied, another filter gets applied at the beginning and then removed at the end, so we've got sort of a double glow filter applied during the animation, and then it is removed at the end--not what we wanted to do. So how does this work in the code? All right, so we have these buttons declared here, so the one at the top left has this labeled and says Blurry and Clear, and it's got a blur filter applied to it already. The blur filter is declared up here, Blur1, and we have a blur x of zero and a blur y of zero, which means we've got a blur filter applied, but it's not actually doing anything. That's because in the default state, we actually didn't want a blur applied. We want that blur applied over time and then persistent in state 2. And then in state 2, we say okay, now, we want the blur actually applied. So we'll have a blur x and blur y value of 30. And the second button below that, there are glower button has a glow filter applied there. So we can take a look at glow2. We have a nice cyan color applied to it there, and then in the second state, we have a red color applied to it. And we can go see how we animate between these when we go to the second state. We are going to run this transition here, one that says to state 2. We're going to run the transition in parallel, all of these things going at the same time. We're going to run an animate effect that is going to animate the blur x and the blur y properties of that blur filter that's taking the button from clear to blurry. Now, notice the important thing is I didn't actually tell it what to animate between. The transitions are picking that up. They can pick it up from components and graphic objects or, in this case, filter objects. All they need to know is what values do those properties have in this state. What values do those properties have in that other state. They pick it up from state information. They supply it to the effect automatically, and we get the effect that we were looking for when we animate the blur properties. Then we have an animate color effects down below. Now, we could use animate here and animate the color property, and then manually supply a rgb interpolator to do correct color interpolation. A shorthand way of doing that is to use the new animated color effect, which is one of the new effects in Flex 4, and that automatically uses rgb color interpolation to animate between the various values. So it says, okay, animate the color property on the following object, and it automatically animates this property on that glow object, on that glow filter object, and it automatically goes between the cyan the red colors. We have a transition declared going to state 1, and then we have a transition going to state 2 that are simply reverses of each other. So take a look at it again. The stuff on the left is what you want. And so if you're animating filters, and you want to apply a filter, animate its properties, and then get the filter out of there, animate filter is your friend. If you actually have a filter on your object, and you want that filter to continue being on your object, use animate or one of the other effects that can animate the properties of an existing filter instead. If you want to see the code for this application or other related applications, check out my blog at [Adobe Developer Connection] [rocket sound]

Video Details

Duration: 5 minutes and 37 seconds
Language: English
License: All rights reserved
Genre: None
Views: 155
Posted by: adobetv on Oct 21, 2010

In this sequel to the previous episode, Chet shows how to use the Animate effect in Flex 4 to animate filters that persist on an object after the animation is finished.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.