Showing posts with label mxml. Show all posts
Showing posts with label mxml. Show all posts

Friday, January 8, 2010

Video: Visual Component State Feedback

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.

Friday, December 18, 2009

Video: Animating a TextArea

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.

Monday, October 26, 2009

Video: Custom Type Interpolation in Flex 4 Effects

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 the animation.

Flex's ability to deal with only numbers was fine for most of the cases that UI developers would care about because, frankly, most of the properties on components are numbers: x position, y position, width, height, alpha, scaleX, scaleY - all of these are simple Numbers that can easily be tossed into a simple parameteric function to calculate an in-between number for Flex 3 animations.

But what if you want to animate a property that is not a number, like a Rectangle, or a Point, or some object specific to your code that we know nothing about? Or what if it is a number, but you can't calculate a simple interpolation of it numerically (like RGB colors, which we talked about in an earlier episode)? In that case, we need a way to calculate the in-between values for objects of that type. The new IInterpolator interface in Flex 4 exists for that purpose: you can create implementations of that interface and supply them to Flex 4 effects to tell us how to interpolate in-between values for these types and the effects can take it from there, calling your interpolators whenever they need to calculate animated values for properties of those types..

This video shows how we can write a custom interpolator for an arbitrary data structure (in this case, a Rectangle) and supply it to a Flex 4 Animate effect to have it animate our object.

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.

Tuesday, October 20, 2009

Video: Flex 3 Easing with Flex 4 Effects

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.

Thursday, August 20, 2009

Video: Transform Effects in Flex 4

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 point. Meanwhile, a Move effect on that same object would be giving conflicting advice on how to move that (x,y) point. The results tended to be unpredictable at best.

In Flex 4, we've combined Rotate and Move, along with the new Scale effect (essentially a replacement for the old Zoom effect). Now, instead of separate effects individually setting overlapping properties on the target object, they all combine internally into one single "transform effect" instance and combine their operations into a single transform operation that sets the location, rotation, and scale of the object.

And of course, the effects also benefit, like the other Flex 4 effects, from 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).

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.

My favorite part of the video: I got to use the words "junta" and "cahoots" - how often does that opportunity present itself?

Enjoy.

Thursday, August 13, 2009

Video: Fade Effect in Flex 4

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 is the demo application:

And here is the source code.

Finally, here's where you can find the CodeDependent videos on iTunes.

Enjoy.

Thursday, August 6, 2009

Video: AnimateColor in Flex 4

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, here's where you can find the video on iTunes.

Enjoy.

Thursday, July 30, 2009

Video: Animate Effect in Flex 4

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 first language (perhaps it's ActionScript 3).

Here's the video:

Here is the demo application:

And here is the source code for both the Flex 3 and Flex 4 versions shown in the video.

Finally, here's where you can find the video on iTunes.

Enjoy.

Thursday, July 23, 2009

Video: Color My World

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 arbitrary type interpolation is in Flex 4...

Here's the video:

Here is the demo application:

And here is the source code.

Enjoy.

Friday, July 17, 2009

Video: Faster than a Speeding Button

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.

Wednesday, July 15, 2009

Penner for your Thoughts

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 "Chetastrophic Failure" or "Haasehang". Maybe anonymity ain't so bad).

Easing into Flex 4

In Flex 4, the new effects use a different approach to easing. These changes came under the heading of "as long as I'm in there mucking about, can I improve the API a tad to make it more flexible and extensible?" Also, the changes were related to introducing "interpolators" (via the IInterpolator interface) which allow arbitrary type interpolation in the new effects.

In Flex 3, you supply an "easing function" (literally, a Function reference) that the effect will call into on every animation frame to get the desired eased behavior. In Flex 4, you instead supply an instance of an easing class (one which implements the new IEaser interface) that the effect calls into in much the same way as before (although the functions in the two cases are very different, with the Flex 3 version taking 4 parameters and the Flex 4 version taking just one).

I like the change from an API standpoint (well, I would, wouldn't I?). I'm into simplicity, so the fact that the new Power class expresses the same functionality as four previous classes (Quadratic, Cubic, Quartic, and Quintic) and 12 functions (easeIn, easeout, and easeInOut in each of those classes) while allowing more flexibility in terms of handling arbitrary and fractional powers and arbitrary ease-in/out points is pretty nifty.

But as with any new API that takes the place of existing API, I had some reservations about introducing the new classes without offering complete parity with the old easing functions. Sure, the new easing classes and interface offer more power and flexibility, and developers should be able to easily create their own easing classes. But what if they miss the old Bounce and I simply haven't gotten around to porting it yet? Will there be great gnashing of teeth in developer cubicles? Will flags with my cartoon visage be burned in effigy at tech conferences worldwide? Will programmers spew into the output-only blogosophere "Flex 4 IEaser? Flex 4 IHarder, is more like it!"?

To be clear, the easing classes we offer in Flex 4 should cover the bases for all standard effects and most cases that developers would really care about. We have the same Sine-in-out behavior for effects by default that we used to have, and we offer ease in/out/in-out variants of Sine and Power (where Power covers multiple old easing function behaviors, as explained above). We also offer Linear (no-ease), with additional acceleration/deceleration phases. And with the new RepeatBehavior capability in Flex 4 effects, the old Bounce easing class is perhaps a bit less necessary than it might have been before.

But still, developers might have had some favorite easing classes that have no equivalent in Flex 4 (at least not yet), such as Elastic and Exponential.

So what to do?

Well, I took a few minutes this week (far less time than it took me to write this article) and put together a simple wrapper class that does it all. You can now create an instance of this class (which implements IEaser) with any of the old easing functions and supply the instance to any Flex 4 effect and it'll do exactly what you want - play the new effect with the old easing function behavior.

The Wrapper Class

I wrote this class mostly as a utility to offer to anyone pining for the old Penner easing classes in Flex 4. But I also thought it would be a good demo of how easy it is to write custom easing classes with the new easing API of Flex 4. In fact, it's so easy, I'll just put the complete implementation (minus some awesome comments) right here inline to prove my point:

 public class EasingFunctionWrapper implements IEaser {  public var easingFunction:Function = Linear.easeNone;   public function EasingFunctionWrapper(easingFunction:Function = null)  {      if (easingFunction != null)          this.easingFunction = easingFunction;  }   public function ease(fraction:Number):Number  {      return easingFunction(fraction, 0, 1, 1);  } }

That's right - a whopping one-liner function plus a constructor and a property and we get all of the old Flex 3 easing functions in Flex 4.

Now, let's look at how and why it works.

The constructor simply takes a reference to the easing function that you want to use. This function must, of course, be one of the functions from the old easing classes (or any other function that has the same function signature, taking 4 Number arguments and returning a Number), but there is otherwise no restriction. You can pass in Linear.easeNone or Cubic.easeIn or whatever else you want here that works. The constructor then saves a reference to that function for use later. Note that the parameter has a default value, which is a handy way to enable this class to be created in MXML (since MXML tags will only work with no-arg constructors).

The ease() function takes a fraction and returns a fraction. Specifically, it takes a number (generated by the Animation running inside of the effects) that represents the elapsed fraction of the animation. It then calls into the easing function specified and returns the result, which will also be an elapsed fraction. This return value is generally a number from 0 to 1, although some of the easing functions (Back and Elastic) can produce numbers toward the start and end of the animation that go outside the 0-1 boundaries (this is how the object ends up springing outside of the endpoints when used with a Move effect with these easing functions).

The reason that the wrapper works (and, gosh, so easily!) is that we use the given easing function generically, supplying fictional values to it, but ones which will produce exactly the value we need to return from our ease() function. Inside our ease() function, it does not matter what the target values are, what time we started, what the total duration is, or anything else specific to the animation: we only care about the elapsed fraction of the animation. We can feed numbers to the Flex 3 easing function to get back exactly the eased fraction that we need.

The Flex 3 easing functions take four numerical arguments:

  • t: the elapsed time in the animation
  • b: the starting value of the animation
  • c: the total change in value during the animation
  • d: the duration of the animation

The return value of the function is a number representing the eased value of the animation.

Typically, you would call (or, rather, the Flex 3 Tween class would internally call) this function with real time and target values and would get back the actual eased value for the object. It would then set the target property to this new value.

But in the case of Flex 4 easing, we can deal with a simpler fractional value and derive the real value from the result. In particular, we can treat both the times and values as fractional (values between 0 and 1), and use the result to calculate the real values. That is:

  • t: this can be the elapsed fraction sent into our ease() function - it represents how much time has elapsed in an animation with duration 1.
  • b: this value can be set to 0, representing the starting value for the object (whatever it is). We don't actually need to use the real starting value here, as long as we can translate the result of our easing call into a real value later on.
  • c: just like our time and duration values, we can use an end value of 1, which represents the total change in value of the target object.
  • d: we can send in a duration of 1, which represents 100% of the total real duration (whatever it is in real time values).

The easing function will return an eased value from these inputs which we can then use to calculate a real value for the target object.

Let's run through an example. We will assume that the developer wants a Linear ease (just to make the math easier to explain), so the eased value will be exactly the same as the pre-eased value. The developer's code would create the wrapper like this:

    var wrapper:IEaser = new EasingFunctionWrapper(Linear.easeNone);

or, in MXML:

    <s:EasingFunctionWrapper id="wrapper" easingFunction="Linear.easeNone"/>

(In fact, since the wrapper defaults to Linear.easeNone, we don't have to specify the easing function in the code above, but I'm doing so to make the code clearer for the purposes of explaining how it all works).

The developer would then supply the wrapper as the easer property to any of the Flex 4 effects, like this:

    var mover:Move = new Move();     mover.xFrom = 50;     mover.xTo = 70;     mover.easer = wrapper;

or, in MXML:

    <s:Move id="mover" easer="wrapper" xFrom="50" xTo="70"/>

At any point during the animation, the wrapper's ease() function would be called with some fraction f, between 0 and 1 (representing, again, the elapsed fraction of the animation). The ease() function would then call the wrapper's easing function as follows:

    return easingFunction(f, 0, 1, 1);

That is, we're calling the easing function with our elapsed fraction, a duration of 1, and object starting/ending values of 0 and 1. We then get back some Number which is then used (by the Animation class running inside our Move effect) to calculate the true object value. For example, suppose we are at the halfway point in the animation, where f==.5. We call the easing function with .5, and we get back another value of .5 (because it is a Linear ease). The Animation class then takes that value and calculates the animated x value using a simple linear parametric calculation:

    var newValue:Number = startValue + easedFraction * (endValue - startValue);

For our animation above from x==50 to x==70, this give us an animated value of 60 at this half-way point in the animation.

Some Summaries

What I've attempted to show here are two related things:

  • Flex 4 easing: The new approach to easing in Flex 4 is different from Flex 3, but hopefully simpler to use and to customize than the older easing functions which took four parameters and dealt strictly with numeric values. (I didn't get into the IInterpolator aspect of Flex 4 effects, but suffice it to say that the new easing system allows Flex 4 effects to deal with arbitrary objects and types, not just Numbers).
  • Flex 3 easing functions: Several of the old easing functions still exist in Flex 4 effects, albeit in a different form (they are instances of type IEaser instead of easing functions). Some of the Flex 3 easing functions, however, do not currently exist in Flex 4 (such as Elastic and Exponential). But through the EasingFunctionWrapper class above, you can access any of the old easing functions for the new Flex 4 effects.

Demolicious

Now that we're done, it's demo time. Here's a demo that shows the new wrapper in operation. You can specify an arbitrary duration (in milliseconds), any of the Flex 3 easing classes, and an easing type (ease in/out/in-out - note that Linear automatically disables the type ComboBox since no matter what you pick you get the same Linear.easeNone behavior).

Of course, no demo would be complete without the source code. Check it out, play with it, and feel free to use the wrapper if you want to play with Flex 3 effects in your Flex 4 code.

By the way, do you use non-default easing in your code? If so, are there any Flex 3 easing functions that you've been missing in Flex 4? Any you think we should try to get in before we release, or for some follow-up release? Please comment and tell me what you think.

Friday, July 10, 2009

Video: Stretch and Squash in Flex 4

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.

Monday, June 8, 2009

Video: Easing Does It

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.

Friday, May 22, 2009

Video: CodeDependent #2, er, 7

Now things are really moving...

The next episode of CodeDependent, "A Moving Comparison," is out. There are actually 7 episodes in the show so far, but 5 of those are reruns, rendered onto the spiffy new CodeDependent set. (I suspect that the earlier versions of those episodes, rendered on the standard Aodbe Developer Connection backdrop, will become collectors' items. Somewhere. Sometime. Perhaps they will be re-master and re-released someday, as "Codedependent Classics").

This latest show is a brand new one, starting right where the first one, "Graphics in Flex 3 and Gumbo", left off. In the first episode, I compared simple custom graphics in Flex 3 to simple graphics in Flex 4 (codename Gumbo). In this episode, I compare simple animations in Flex 3 and Gumbo on those same graphics objects.

Here's the video:

Here are the demos:

And here is the source code.

Enjoy.

Monday, May 11, 2009

Video: CodeDependent #1

Adobe TV has just posted the first in what I hope to be a very long run of my new show, “CodeDependent”. Fortunately, the show is not on the Fox network, so that may give it a better chance of not being canceled.

The CodeDependent show is not that different from the videos I’ve been doing already: short tutorials on various aspects of Flex and Flash that I find interesting. The biggest change is that they should be more regular (we’re aiming for an every-other-week schedule as we settle into it). Also, they producers gave me a nifty new grayscale CG set design to match my nifty old grayscale CG personality.

This first show is a simple tutorial on Flex 3 and Flex 4 (codename Gumbo) graphics. For the Flex 3 demo, you'll see how to drop down into ActionScript code to draw simple graphics through the Flash APIs into your Flex application. For the Flex 4 version, you'll see you to do the same thing through MXML graphics tags. In future episodes, we'll build on these simple examples and see how to animate the objectsand how to get more realistic animations. (Can you feel the suspense of this cliff-hanger? I’m trying to incorporate standard television series techniques into the show. Look for a laughtrack soon.) But I’m getting way ahead of myself.

Here’s the video:

Here’s the awesome demo application:

And here’s the source code.

Enjoy. And welcome to my show…

Wednesday, February 25, 2009

Video: Smarter Effects in Gumbo

Here's another video from Adobe TV. In this one, I'm showing a couple of applications that demonstrate some of the intelligence that we're building into the new effects in Gumbo (the codename for the next release of Flex). Specifically, these demos show some of the new automatic behavior of the Fade effect and the new "autoReverse" capability of transitions.

As with any Gumbo demos, you should not get too locked into the specific APIs, since we're still very much mid-development. For example, all of the effects currently have an "Fx" prefix in the classnames which should be going away soon. But the point of the applications is to show the functionality and behavior of the effects, which is here to stay.

I should/will post the code and applications soon, but my workspace is a bit torn up at the moment, since I'm in the middle of more cool-o effects features. As soon as that's cleared up, I'll update this post to have the code available. Meanwhile, grab the popcorn, sit back, and enjoy all 6 minutes and 8 seconds of:

Thursday, January 29, 2009

Video: MAX Presentation on Filthy Rich Flex Clients

Adobe TV has just posted my session Filthy Rich Flex Clients, which was recorded at MAX 2008. It's a screencast with audio, so you get the dual benefits of seeing the slides/demos and not having to watch me deliver them.

It's a pretty dense presentation, in which I cover some Flash platform graphics fundamentals, how effects work in Flex3, how they will work in Gumbo, and (now that I built up the rest of that material) how to do some particular 'Filthy Rich Client' effects in Flex.

Check it out at Adobe TV in larger resolution, or watch it from the comfort of this handy blog post:

In case the text in the video is hard to read, here's the presentation in PDF format for your amusement.

Monday, November 10, 2008

Video: Custom Flash Graphics

Adobe TV has posted my final Flex in a Week video. This one is on the use of Flash graphics objects in Flex applications, covering both drawing directly into the Graphics object for custom rendering in your updateDisplayList() method as well as creating and adding Flash shapes to your components. (Note that you have to have a completely cusom component, subclassing UIComponent, in order to add non-component children such as DisplayObjects or Sprites to the child list of your component; other Flex components only understand Flex component children).

It's not terribly advanced, but is meant more as an introduction to some of the graphics basics, including Flash's use of retained mode rendering and why you always need to clear() the graphics display list.

The source code for both examples is available here.

Wednesday, October 22, 2008

Video: Glow For It

Here's another Adobe TV video in the Flex in a Week training series. This one's about using Flash filters in Flex applications. Specifically, I discuss instantiating and animating a Glow filter on a button, but the techniques discussed are applicable to using filters in general. The source code is fairly self-explanatory, but feel free to grab the two files I cover in the video: GlowingButton.mxml and AnimatedGlowingButton.mxml. Glow ahead, check it out!

Monday, September 15, 2008

Video: Sorted Details

I shot a video tutorial recently of my Slide Sorter demo (which is also covered in this earlier blog entry), and it just got posted on Adobe TV. Here it is:
To see the running demo in action (which is better than a static picture of the demo, which would be the demo inaction), as well as the source code, see my earlier Sorted Details blog entry.