Humor4u

Visual Component State Feedback , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show covers some of the concepts around component state. In particular, I talk about different ways of giving visual feedback to the user about the current state of components, in this case the over and down state of a Button. I also take a detour and discuss (what else?) an animation of a temporary text label, including the use of disabling mouse events to fix some interaction artifacts that I encountered when writing the demo application. Here's the video: Here is the demo application: And here is the source code . Finally, here's where you can find the CodeDependent videos on iTunes . Enjoy.

Animating a TextArea , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show shows how to animate scrolling in a TextArea component dynamically. We handle this automatically when you click in the track or on the buttons of a TextArea's scrollbar, but if you want to tell the component to scroll to a certain location in the viewport, and animate to that position, you have to do this yoursefl. We did something similar in last week's show , in which we animated a Scroller area, but in the case of TextArea we have to dive into ActionScript code to create and play the animations because of some constraints around which properties we can bind to from MXML. Here's the video: Here is the demo application: And here is the source code . Finally, here's where you can find the CodeDependent videos on iTunes . Enjoy.

Custom Type Interpolation in Flex 4 Effects , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . In this show, we see an introduction to the new system of type interpolation in Flex 4 effects. The ability to animate properties of arbitrary type is one of the key new features in the Flex 4 effects system. Previously, in Flex 3, the effects system dealt only with numbers. It was great at animating any properties of components at all ... as long as those properties were numeric. In particular, it knew how to calculate a numeric value during animations, given start and end values. Calculating these values is important, of course, because animations are specified with start and end values only (or, in the case of the new keyframes in Flex 4 effects, a series of intermediate values), and any other value that the property takes on during the animation must be calculated as a product of these start/end values plus the elapsed fraction of th...

Flex 3 Easing with Flex 4 Effects , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show is basically a recap of an earlier blog article I wrote, Penner for your Thoughts (named for the author of the Flex 3 easing functions, Robert Penner ), except this time it's in video form (for the reading-impaired). The topic is about using the old easing functions in Flex 3 through the new IEaser interface that the Flex 4 effects require. See the article for more details about the whys and hows of this rather neat hack. Meanwhile, here's the video: Here is the demo application: And here is the source code . Be sure to check out the blog article for more details on how the code works. Finally, here's where you can find the CodeDependent videos on iTunes . Enjoy.

Flex effects: a transforming experience...... Transform Effects in Flex 4 , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show covers the new "transform effects" in Flex 4, which allow you to move, rotate, and scale Flex objects (components and graphics objects). Similar effects (Move and Rotate) exist in Flex 3 already, but these effects were completely overhauled in Flex 4 to make it easier to get them to do the right thing. One of the problems with the previous implementations of Move and Rotate is that they would sometimes clobber each others' results. If you think about it, both effects are affecting the (x,y) location of an object, so if the effects are giving conflicting advice, you may not get what you really wanted. For example, a Rotate effect in Flex 3 would rotate around the center of the object by default, meaning that the (x,y) location of the object would change as it rotated around that center...

Old components never die; they just fade away. Fade Effect in Flex 4 , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show is all about the new Fade effect in Flex 4, which allows you to fade objects (components, graphic objects, and anything else with an alpha property) in and out. This effect exists in Flex 3 already, although it got a little reworking in Flex 4 to add useful functionality. For one thing, it uses the ability of the Animate effect to target arbitrary target objects (useful in the world of Flex 4, where we may have graphical objects in our application instead of just UIComponents). But also, the new Fade effect has a little more intelligence built into it that helps it figure out when you want to automatically fade things in and out, based on the value of related properties like visibility and whether the object is becoming parented or unparented between states of a transition. Here's the video: Here ...

AnimateColor in Flex 4 , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show is a follow-on from the previous show on the Animate Effect in Flex 4 , which talked about the superclass of the new effects in Flex 4. This show is all about the new AnimateColor effect, which allows you to animate colors on arbitrary Flex objects using the new type interpolation capabilities in the Flex 4 effects. While we showed how to do this with the Animate effect in the previous video, using AnimateColor is a more natural way to achieve this specific effect. We also talked a bit about AnimateColor in the video Color My World , although that show was more about comparing RGB and HSB colorspace interpolation, and this show is specifically about using the AnimateColor effect. And yes, this is the last show where I talk about color for a while. I promise. Here's the video: Here is the demo application: And here is the source code . Finally, ...

Animate Effect in Flex 4 , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show gives a basic introduction to the new Animate effect, which is the superclass of all of the new effects in Flex 4. This effect enables new and interesting capabilities, such as animating multiple properties in parallel (versus the older AnimateProperty effect, which animates just one property per effect) as well as handling arbitrary types. For giggles, I did some live coding in the video, which is a great way to amp up the pressure during filming. And for the record, most of the videos I've done so far, including this one, were shot in one take (something I far prefer, as it's a tad easier to feel spontaneous and dynamic when you're not repeating the same information for the nth time). This might also explain why I use the uncommon phrase, "Let's take a look at angrrizzat" in the video. Apparently, English is not my fir...

Color My World , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . I hope this satisfies the great hue and cry for color-related tutorials. This show is not so much about Flex code as it is about color interpolation. Okay, I take that back; I do talk a bit about arbitrary type interpolation in the Flex 4 effects, which is what enables the new AnimateColor effect used in the demo. But the main idea behind the show was a demo app I wrote to test out a couple of color interpolation alternatives for AnimateColor and some observations about the results. This is probably a one-off topic, the only one I'll ever do that approaches anything close to color theory - that's a subject that I haven't touched since my thesis . But it is interesting to see how interpolating colors in different color spaces can have a dramatically different effect on the resulting animation. And of course it's also interesting to see how cool arbitr...

Faster than a Speeding Button , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show relates to some of the concepts in the Stretch and Squash for Flex 3 and Flex 4 episodes, in which we saw how to use Flex to apply traditional catoon animation effects of 'Stretch' and 'Squash' to a bouncing ball. This time, we'll take a look at more techniques of traditional animation, using Flex to apply 'Exaggeration' and 'Follow Through' to breathe cartoony life into an unsuspecting button. People who happened to catch the "Move Your Users" session that Romain Guy and I presented at JavaOne this year have seen the demo already. Now you can see the code. Here's the video: Here is the demo application: And here is the source code . Enjoy.

Knock knock Who's there? Ease Ease who? Ease anyone going to open the dang door? For anyone new to the term "Easing", it refers in Flex (and in Flash) to altering the motion of an animation, to create non-linear motion for more realistic, enjoyable, or interesting behavior. I've shown some examples of this behavior in other blog posts and videos like this one , so you might check those out if you're interested and clueless about what I'm blathering on about. For anyone mystified by the title of this blog, the easing functions in Flex 3 came from similar easing functions in Flash that were created by Robert Penner , and are described in his book and on his website ; the functions are also sometimes called the "Penner" easing functions. (Pretty cool to get your name associated with something so widely known and used. I wonder how I could do that? Although I should be careful what I wish for; I'd probably end up with something like "Cheta...

Stretch and Squash in Flex 4 , the next and episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show is a continuation of the episode (can you guess?) Stretch and Squash in Flex 3 , in which we saw how to use Flex 3 to create deforming bouncing effects for more life-like motion with Flex 3. This time, we'll see how the same effects can be created in Flex 4 (with less code!). Here's the video: Here is the demo application: And here is the source code . Note that the code has changed to match the current APIs (we had some class/package/namespace renames along the way - Flex 4 is still in Beta, after all...). Have a (squashy) ball.

Easing Does It , the next episode in the gripping and suspenseful series CodeDependent , is now available from Adobe TV . This show is a continuation of the episode A Moving Comparison , in which we saw how to create simple animations in Flex 3 and Flex 4. This time, we'll see how to add 'easing' behavior to our Flex 3 animation to create non-linear motion. Here's the video: Here is the demo application: And here is the source code . Enjoy.