Monday, December 21, 2009

Drunk on Software 22: Sleeping on the Couch

Sometime last summer, I got together with Jon and James and talked about software, Flex, effects, and Marriott mice. It a slower, more contemplative DoS show. You'll probably feel a bit woozy yourself just watching it. From James's bear hat to his falling asleep at one point, to the mic getting turned off and us having to repeat a bunch of stuff, to the final entrance of a mouse at the end (a vermin omen, I'm sure), it has a lot to offer... to someone. I'm just not sure whom. If we had outtakes in DoS, this would be in them. Maybe when we release "Best of" compilations in the decades to come, it will be on the follow-on releases after we run out of hits, when we're just trying to make a buck any way we can to support our software habits.

Enjoy: www.drunkonsoftware.com/2009/12/20/episode-22-sleeping-on-the-couch.

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.

Friday, December 11, 2009

Video: Programmatic Scrolling Animation

Programmatic Scrolling Animation, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is about animating an Scroller area programmatically. By default, areas with scrollbars will animate when you click and hold on the scrollbar's track or up/down buttons. But if you just want to move to a new scroll position, these animations don't come into play, so you need a little something extra to get that nice animated effect.

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, December 7, 2009

Video: Drunk On Software: Devoxx Edition

Ever wonder what this year's Devoxx conference was like after-hours? Well, even if you didn't, you might want to check out the latest video on Drunk on Software. This video is a collection of interviews and other clips I recorded that week whenever I happened to remember that I had brought along a video camera for that exact purpose.

Some of the clips are of dubious video and audio quality, owing to a combination of the equipment, the operator, the mood lighting and crowd noise in the bars and restaurants, and just possibly due to the fundamental concept behind Drunk on Software videos (a sobering thought). But I'll blame the lack of natural light in Belgium at this dark and miserably cold time of year because that's just more fun.

Thanks to everyone who helped out with the video, through interviews, filming, talking, and of course drinking.

Enjoy...

http://www.drunkonsoftware.com/2009/12/07/special-episode-devoxx-2009/

Thursday, December 3, 2009

Video: Measuring Frame Rate Performance

Measuring Frame Rate Performance, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show different notions of "frame rates" and performance in Flex applications, how they relate to each other, and ways of measuring them. Frame rates directly affect the perceived performance and smoothness of animations, so it's something near and dear to my geeky animation heart. Measuring performance may not be something you need to do in every (or any) application, but it's good to know what's going on under the hood and how to get more information if you do need it.

I neglected to mention an important detail about 'render' events (thanks, Corey). In Flash applications, if you call updateAfterEvent() to cause a render event (as we do internally in Flex effects when handling Timer events), you actually need to call stage.invalidate()to make sure that the player sends out render notifications. Without the invalidate() call, the player will render, but will not dispatch any render events. In the case of our example application here, we don't have to invalidate() anything to get the render events because the Flex layout system is calling invalidate() for us.

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.

Wednesday, December 2, 2009

Prose and Conferences: Devoxx 2009

Many people are wondering what the deal is with the EU and Oracle in the whole Sun acquisition thing. I’m going to put forward a new theory: it’s about conferences.

I just recovered from my trip to Devoxx, where I gave talks on Flex, effects, Adobe tools, and the Flash platform (and attended talks on various other topics). I realize that many of you reading this may not have had the pleasure of going to the conference. In fact, doing the math, it’s pretty darned improbable that anyone went: with about 3000 attendees vs. 7 billion people on the planet, there’s roughly a 99.99996% chance you didn’t go. So maybe I should give a brief intro.

Devoxx is an annual developer conference in Antwerp, Belgium. The show is typically held at the coldest, most miserable time of year to allow attendees to concentrate on the most important thing: Belgian Beer. Oh, and there are lots of good technical sessions on software development (Java, Flex, Android, build tools, libraries, processes, etc.).

It’s a great conference and a really good time (despite the weather). In fact, you can check it out for yourself at parleys.com, which is a Flex app (with an optional AIR application for offline usage) hosting all of the sessions from the conference in full multimedia glory (video, slides, and demos). The sessions from 2009 are not available yet, but like last year they will be posted starting in January at the rate of about 2 per week, online and free.

In the meantime, there is now a for-pay option with parleys; if you want all of the content now, you can pay 49 euros (about $75 today, but given the relative stability of the dollar, it could be $2500 tomorrow, so act fast) to have full access to all sessions for 6 months at devoxx.parleys.com. Yes, they’re trying to make money; after all, it costs money to put on this great conference and record/produce/host all of the content. But since the content is still free in the same way it always was, I think it’s a pretty great compromise.

(By the way, nobody asked me to plug the site; I just like to support the team that puts on a good conference and provides so much great information for developers).

But back to my original point: is it a coincidence that the second-largest Java development conference is in Belgium … a mere 40 miles away from the EU headquarters in Brussels? I believe that the EU stalling of the Oracle deal is nothing less than a conference takeover bid by Europe, trying to wrest the power away from the annual JavaOne conference. Sun’s annual conference is usually in full planning mode at this time of year: they’re closing the Call for Papers, choosing speakers and sessions, massaging the messaging, choosing theme colors and Dukeration kitsch to sell in the conference store. But this year … nothing – it’s all on hold pending the acquisition debate between the EU and Oracle. In the meantime, Devoxx put on a good Java++ show.

So in my augmented reality, it must be the case that Devoxx lobbied the EU to stall JavaOne so that Devoxx could become the world leader in Java-related conferences. Sun will rue the day that they made JavaPolis change its name…

[okay, maybe not. And I really like JavaOne, too, and not just because the weather's better. But Devoxx is a good conference. Try to go next year if you’re in the area and have a thick coat. And check out the sessions and cool Flex app on parleys.com.]

Tuesday, November 24, 2009

Video: Transitions and Easing in Flex

Transitions and Easing in Flex, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show examines a sample drawing application that lets the user change the location of the drawing tool palette, and how transitions can help provide a better user experience when changing the layout of the GUI. We also see how various easing approaches change the feel of the transition; no single easing approach fits all situations, so it's good to know what alternatives exist and to experiment with them to see what works best.

Here's the video:

Here is the demo application (nice SF picture courtesy Romain Guy):

And here is the source code.

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

Enjoy.

Thursday, November 12, 2009

Video: Interactive GUI Components

Interactive GUI Components, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show looks at techniques from gaming consoles and cartoon animation for making a more interactive and fun user experience with your UI components.

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, November 6, 2009

Drunken MAX Interviews

The Drunk on Software film crew hit the streets and bars late on the last night of MAX 2009, asking a select group of people (read: anyone that would let us film them), "What was your favorite thing at MAX?"

It's like a "Man on the Street" interview, but with women, too. And it's not so much "in the street" as "on the sidewalk and in the bar." And after the drinking that night, maybe kind of a "facedown in the street" nuance as well. So maybe I'd call it a "Men and women on the sidewalk, in the bars, and lying in the gutter" interview format.

Anyway, here's the result (or check it out on the Drunk on Software site instead). Enjoy...

Video: Animated Scrollbar and Slider in Flex 4

Animated Scrollbar and Slider in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show deviates a tad from the usual CodeDependent shtick; I don't actually walk through any code (shock! horror!). Instead, we show a couple of the new Flex 4 components in action and see the animated behavior that they have to help create a smoother, better user experience.

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.

Wednesday, November 4, 2009

Just for Show

Is there anything with graphics or effects in Flex that you would like to see explained? Any problem that's been bugging you, or some transition that you can't quite figure out? Or just some Flex/graphics/animation topic you're interested in knowing more about?

Let me know and maybe it'll become a show...

I've been good at doing a bunch of shows and some articles on topics that interest me, or problems that have come up that seemed like they might interest an audience larger than Chet, or just explanations of some of the stuff that we've been doing in the current Flex release under development. But that doesn't mean I don't run out of ideas. When the Adobe TV folks call and say that it's time to shoot another several episodes, I have to come up with a lot of content, quick, and sometimes that's easier to do than other times.

In the meantime, suggestions from people actually trying to use our stuff to build real world applications (that's you) would really help drive some of the content. I'm happy doing tutorials on things that I run across, but my situation is different from yours, and yours, and yours too, so I may not have hit the problems that you have, and may not ever know to go near some topic that you're pining to hear more about. For example, a recent question on my blog resulted in 2 shows about custom interpolation and resizing AIR applications. And another suggestion (coincidentally from the same person) will probably result in another 2-3 shows that I'm shooting next week.

So, if you have any suggested topics for me, please go ahead and suggest them. I think I'm okay at animation framework development, but I admit I'm not so good at reading minds.

Add a comment below, or contact me directly via the email listed in my blogger profile. I'm not saying I will do tutorials on all ideas or questions; it depends on how many suggestions there are, what the topics are, and what I think might have broad appeal. And I will certainly keep coming up with my own topics. But it would be great to have a larger set of potential topics to mull over.

And while we're in housekeeping mode:

  • Ratings: My CodeDependent videos on Adobe TV have ratings (what web content doesn't these days?). The embedded player doesn't expose that feature on my blog, but it would still be useful to me and others to know what people think about the topics I cover. So if you have any particular feeling about a show you saw here (note: the ratings don't include the choice "loathing" or "nausea"), go ahead and click through to the show's page on Adobe TV or the CodeDependent show page and rate the sucker.
  • Twitter: I'm still not sure what I'm doing on Twitter, but I do have an account there. I use it for feeding out the headlines whenever I post a blog (either here or on my humor blog). I figure you are what you write. I promise to not post status updates on what kind of sandwich I'm having for lunch. Even if it's a really awesome one, like an Italian sub with hot peppers. If you are interested in following me, my twitter account is @chethaase.

That's all. Back to work. Look for another video soon, probably tomorrow.

Friday, October 30, 2009

Video: Resizing AIR Windows with Flex 4 Effects

Resize Adobe AIR Windows through Custom Flex 4 Effects Interpolation, the next and verbosely entitled episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see how to apply what we learned about arbitrary type interpolation in a previous episode to the specific use case of resizing an AIR window. The ability to animate properties of arbitrary type is one of the key new features in the Flex 4 effects system, and it comes in handy for this use case where animating the x, y, width, and height properties of the native window aren't good enough. Instead, we need to interpolation a Rectangle object so that we can atomically set the bounds of the native window with each animation update.

Here's the video:

Instead of embedding the application like I normally do, I'm just going to provide this link to it. It's a link to an AIR application which you would need to install and run locally, because that's the way that AIR works. You may not care enough to do this, since it's just a live demonstration of what you see in the video. But it's here for completeness.

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.

Wednesday, October 21, 2009

Interview: Drunk on Software, MAX 2009 Deep Thoughts

I think there's a fundamental flaw in the Drunk on Software strategy. If you're actually drunk at the time, it is all too probable that you'll end up with interviews that don't seem quite as interesting, provocative, and hilarious as they did at the time. Nonetheless, Jon and James continue to produce these shows, unhampered by my petty theories and centuries of research on the effects of alcohol on coherent conversation and job security.

We all got together at MAX a couple of weeks ago and had a chat about the conference. Fortunately, I think we were all sober enough to speak in complete sentences. Maybe this should go into a new series that I'm proposing: "Drinking Responsibly on Software". Our branding experts are still working on the title.

Check out the interview at Drunk on Software.

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.

Saturday, October 17, 2009

Video: Custom Easing in Flex 4 Effects

Custom Easing in Flex 4, 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 approach to easing in Flex 4 effects, using the new IEaser interface. "Easing" is a term in Flash and Flex that means changing the way that time is interpolated in animations, to give more interesting and natural movement. In Flex 3, different easing behavior was applied by assigning easing function references to to the "easingFunction" property in effects. This was a powerful and easy-to-use mechanism, but we've changed the approach in Flex 4 to make easing more flexible and also simpler to customize. This video shows how we can write and alter a simple easing implementation to get arbitrary, custom easing behavior.

Here's the video:

Here is the demo application. Note that the real action here is in building the application and playing with the CustomEaser implementation. The demo below is just one iteration of that example, where we are accelerating in with a cubic ease by multiplying the elapsed fraction times itself three times:

And here is the source code.

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

Enjoy.

Tuesday, October 13, 2009

Interview: RIA Revolution

Shashank Tiwari (co-author of AdvancED Flex 3) and I chatted about Flex 4, effects, MAX, and books at the MAX 2009 conference last week. Check out the interview on the RIA Revolution site.

Thursday, October 8, 2009

Video: Effects in Flex 4 (MAX Session)

Effects in Flex 4, the talk I gave earlier this week at Adobe MAX, is now available from Adobe TV. This is pretty awesome; I've never known talk recording to be published so soon after the actual event (in this case, actually published while the event was still going on).

The talk covers the overall architecture of the new effects in Flex 4, covering all of the new effects classes and also (my favorite part) the underlying details of how it all works, using the Animate class, the underlying Animation class, and all of the low-level helper classes. Lots of nitty-gritty details for those that care (and those that don't). If you saw my FlashCamp talk that I posted last June, you'll recognize some of the information and demos, but this talk goes into a lot more detail on the architecture and underlying details since I had more time to do so. For the code-hungry folks in the audience, I showed many demos throughout the talk to illustrate how the concepts and classes actually work in real code.

Here's the video. I show a lot of demos during the talk with plenty of code wading, so you might want to pop the player into fullscreen mode (look for the icon in the lower-right of the player).

Many of the demos are already posted in other CodeDependent posts, others are ones that I developed for MAX and have not yet published. But I will push these demos out eventually as well - look for future posts that cover these other demos in more detail.

Be sure to check out the other MAX talks, too. There was some great stuff at MAX this year, and it's pretty cool that we've posted the talks for all of the folks that couldn't make the conference, or had conflicts with other sessions, or simply couldn't stumble early enough for morning sessions after late night sessions in the bar the night before.

Enjoy.

Wednesday, September 30, 2009

MAX Online

I'm sure you'll be at Adobe MAX next week. I mean, all the stuff going on there, you have to show up, right? Besides, all the cool kids will be there. But suppose, just for a lark, that you can't make it. Maybe your leg gets caught in a wood chipper and you miss your flight. Maybe you can't find "Los Angeles" on a map. Maybe you'll be having so much fun playing with Flex 4 effects that you forget to go. What to do? Well, how about watching MAX online? There are lots of conference goodies that will be posted in realtime and real-soon-time, so that you can watch them online. In particular:
  • Keynotes: The keynotes on October 5th and 6th will be streamed live.
  • Top Sessions: The top three sessions each day will be recorded and posted by 8 P.M. California time that evening.
  • All Sessions: All of the technical sessions will be recorded next week and will be posted on Sunday, October 11th.
For all of these things, go to the online site to register (http://max.adobe.com/online/), and check back there when its time for the shows. Sure, it's not as much fun as being there. But it's more fun that getting caught in a wood chipper again.

Tuesday, September 22, 2009

Video: 3D Effects in Flex 4

3D in Flash Player 10 and Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see some of the 3D capabilities in Flash Player 10 and how we take advantage of them for some of the new 3D effects in Flex 4.

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, September 18, 2009

Video: Shader Transitions in Flex 4

First, some housekeeping announcements:

  • The Adobe TV site (where my CodeDependent show is hosted) has been completely redone. The new site is much more searchable and functional than the previous one, so it's easier to browse around there and find the content you like. I'll continue to embed my CodeDependent videos here on my blog, but I encourage you to also check out the TV site itself and see what else is there.
  • The embedded player from the TV site has been improved, so now you can expand the video below to run fullscreen.
  • The URLs for shows like CodeDependent have also changed. The old links still work (for now at least), but I'll be using the new links from now on to link to the more comprehensible page http://tv.adobe.com/watch/codedependent instead of the older more obtuse "#vi+f16095" page.

And now, back to our show.

Shader Transitions in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see how shaders created in Pixel Bender Toolkit are used in the new Wipe and CrossFade effects to create easy and powerful transitions. These new effects are subclasses of the new AnimateShaderTransition effect which allows you to supply completely custom shaders to get your own shader-based effects for transitions, although you are welcome to simply use Wipe and CrossFade and not worry about the pesky details of shaders if you just want some simple transitions. We covered shaders in a previous episode, where we talked about how to use the new AnimateFilter effect to animate shader properties, and filter properties in general. Now see how we use shaders and shader animations internally to implement some standard transition effects.

Here's the video (note the new ability to expand the player to run in fullscreen mode):

Here is the demo application (pretty SF pictures courtesy photographer and Android-hacker Romain Guy):

And here is the source code.

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

Enjoy.

Friday, September 4, 2009

Video: Pixel Bender and Flex 4 Effects

Pixel Bender Shaders in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see how Pixel Bender Toolkit is used to create shaders that can then be used in Flash filters to change the display of objects on the screen. We then see how to use the new AnimateFilter effect in Flex 4 (which we discussed in a previous episode) to animate the shader properties over time, enabling new and powerful transition effects. Note that the demo application shows a crossfade between two images, but the effect can be applied to any component or graphical object - shaders aren't just for images (I just happened to have the images handy when writing the application).

Here's the video:

Here is the demo application (pretty SF pictures courtesy photographer and Android-hacker Romain Guy):

And here is the source code.

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

Enjoy.

Friday, August 28, 2009

Scoping Strategies

I just fixed a lurking bug in my code today that was related to ActionScript's scoping rules. The bug wasn't obvious to me when I first wrote it, and took some head-scratching when I fixed it. So I thought I'd post in in case this behavior isn't obvious to anyone else eading this (say, coming from a Java background like I do, where this behavior doesn't exist).

I'll boil it down to a simpler 'puzzler' question:

What do you think this prints out?

            var i:int;
           for (i = 0; i < 2; ++i)
           {
               var blah:Object;
               trace("blah = " + blah);
               blah = i;
           }

Or how about this?

            for (i = 0; i < 2; ++i)
           {
               var blarg:Object = null;
               trace("blarg = " + blarg);
               blarg = i;
           }

(I'll put the answer at the end of this post, so that I don't blow the surprise for anyone wanting to figure it out before proceeding.)

What's going on here is that the scope of these variables (like all variables in ActionScript) is at the level of the function. That's right: even though the variable is declared inside the for() loop, they are scoped to the overall function. There are various implications and consequences that come from this scoping rule, but the specific one we're dealing with here is that that scope is also the place where the variable receives its implicit assignment. So in the case of the first example above, blah is assigned the default value of null just once. When we come around to the variable declaration again, it does not get a second implicit assignment, because it's as if the variable were declared at the top of the function, since that's its scope.

Meanwhile, in the second example, blarg is given an explicit assignment. This means that every time around our for() loop, we assign the value of null to blarg, so that the variable is always initialized to that value at the point where we declare it in the code.

To my Java developer eye, these looked equivalent: an implicit assignment would happen at the same time as an explicit assignment. But now I realize that if you really want a variable to have a specific default value, assign it explicitly or suffer the possible consequences.

Moral of the Story: Always assign a default value to a variable, especially iuf the variable is declared in a loop where you expect it to have some default value.

Addendum: To test this behavior in Java, I tried to write similar code to see the results. It turns out that the code wouldn't even compile; accessing the variable (even to System.out.println() it ) without declaring an initial value for it threw a compiler error. I could swear this type of code used to work, but perhaps they tightened up their variable declaration policy since I used that approach.

Answers:

The first example prints out:

    blah = null

   blah = 0

and the second example prints out:

    blarg = null

   blarg = null

Thursday, August 27, 2009

Video: AnimateFilter in Flex 4

AnimateFilter Effect in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show covers the new AnimateFilter effect in Flex 4, which allows you to animate properties on Flex filters. You could do this in Flex 3, but it required more custom effects or animations, where you would receive the animation events and manually update the filter properties. Now, you can pass in the filter and the animation properties to AnimateFilter and it automatically animates the filter properties. This is another example of Flex 4 effects being able to target arbitrary objects; in this case, it is changing properties on a filter, not on a component. The demo app also shows the new RepeatBehavior capabilities in Flex 4 effects, which makes it easier to create reversing effects, like we have on the pulsating button in the demo.

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, August 25, 2009

Pros and Cons

I just heard that my technical session was accepted at Devoxx, so I thought I'd post my upcoming conference schedule:

Adobe MAX: I (along with others on the Flex team and a host of other knowledgeable people inside and outside of Adobe) will be presenting at MAX this year. I will give a talk on (drum roll please; it's sure to be a big surprise...): Flex 4 Effects! MAX is in Los Angeles from October 4 - 7. Come learn about Flex, Flash, and other cool Adobe developer products.

Devoxx: I, along with my co-author and arch-nemesis Romain Guy, will be presenting a session entitled "Animation Rules!," where we will apply lessons learned from cartoon animation to making better GUIs. There should be some other good talks more specifically about Flex as well. Devoxx is in Antwerp, Belgium from November 16 - 20. It is one of the best geek conferences I've been to, year after year, with good, deep talks about Java, Flex, and whatever else is hot and worth learning about in the programming world today. It is also very cheap at the price. Oh, and the fries and beer are great!

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.

Tuesday, July 28, 2009

iTunes me

No technical material today - just a link to some iTunes content that might interest you. I've been meaning to mention that all of my CodeDependent videos are being cross-posted on both Adobe TV and on iTunes (and, of course, on this blog). The thing I like about videos on iTunes is that I can watch them offline (not my own, of course - I have to spend enough time with that guy as it is). I just subscribe to the podcasts and they're downloaded onto my machine (and potentially my iPod, if my iPod weren't so old it's made of sod and animal hide). In addition to CodeDependent, there's other good content out there like "Adobe Developer Connection" and "ActionScript 1:1 with Doug Winnie". Just search in the iTunes store and it'll display these shows as video podcasts that you can subscribe to. (Did I mention they're free?)

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.

Friday, June 26, 2009

Video: Stretch & Squash

Stretch & Squash in Flex 3, the next episode in CodeDependent series, is now available from Adobe TV.

This show is a continuation of the episode Bouncing Ball Behavior, in which we saw how to use easing functions in Flex 3 to add bouncing motion to a bal in Flex 3. This time, we'll see how to apply some techniques from traditional cartoon animation to make the bouncing ball seem more lifelike.

Here's the video:

Here is the demo application:

And here is the source code.

Have a (stretchy) ball.

Friday, June 19, 2009

Video: Bouncing Ball Behavior

Bouncing Ball Behavior, the next and bountifully alliterative episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is a continuation of the episode Easing Does It, in which we saw how to use easing functions in Flex 3 to create different kinds of motion. This time, we'll see how to use what we now know about easing functions to add bouncing behavior to our ball using Flex 3.

Here's the video:

Here is the demo application:

And here is the source code.

Have a ball.

Thursday, June 18, 2009

JavaOne slides posted

Sun has posted the PDF for the presentation that I did at JavaOne this year with Romain Guy, Move Your Users: Animation Principles for Great User Experiences (you'll have to join the Sun Developer Network to access that URL, but it's easy and free).

The demos were a big part of the presentation, of course (as was Romain doing a running jump off the stage and blowing the microphone), and those aren't in the slides. But most of the demos either already exist online (we showed a few from Filthy Rich Clients) or (in the case of the Flex demos) will be shown here as I post blogs and videos that talk about those applications in detail.

Enjoy...

Monday, June 15, 2009

Video: Flashcamp Presentation on Flex 4

I gave a quick talk at a recent Flashcamp at the SF Adobe building. If you want a (very) quick overview of the Flex 4 effects architecture and some examples of how to use the various new effects, check out the verbosely-named Using Effects and Animation in Flex 4. Actually, there were a lot of great, quick talks that evening by other folks on the Flex, AIR, and tools teams: you'll probably want to grab some popcorn and watch more: http://labs.adobe.com/technologies/flash/videos/#flashcamp In face, that same page has other video tutorials on Flex, Flash Builder, and Flash Catalyst. What the heck, just watch them all. You don't have work to do today, do you? http://labs.adobe.com/technologies/flash/videos/

Monday, June 8, 2009

Effects in Flex 4 SDK Beta: Part 2

Finally, the long-awaited cliff-hanger ending to the extensive, rich, and diverse series that began with Part 1: allow me to introduce Part 2.

This second article on the new effects in Flex 4 concludes my discussion of the new effects. This second article covers the new effects based on the new 3D and Pixel Bender shader capabilities in Flash Player 10.

As with Part 1, there are code snippets throughout the article and all of the demos are packaged up in SWFs and source form for convenient download.

Enjoy...

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.

Wednesday, June 3, 2009

Interview: InformIT

InformIT has just published an interview that they did recently with me and Romain Guy. We talk about Java, Flex, our book, and random client-y stuff.

Monday, June 1, 2009

Effects in Flex 4 SDK Beta: Part 1

As part of the beta launch, I wrote an article about the new effects that are part of Flex 4.

They asked for a single article of about 2500 words, and I churned out a monster weighing in at over 10,000 words. Apparently, I have a way with words: way too much.

After much gnashing of teeth and painful whittling down, we compromised on 2 articles. Part one, which covers the Animate superclass of the new effects and a handful of the more basic effects, is now live. Look for Part 2 soon. (Update: Part 2 is now live)

Check out the other articles while you're there - my articles focus specifically on effects and ignore a lot of the other great changes in the release (because I knew other articles would cover them and because I was having a hard enough time getting the article down to a reasonable size without trying to explain more). For example, Matt Chotin (Flex Product Manager) wrote an overview of the new features in What's New in Flex 4 SDK beta and Joan Lafferty (on the Flex SDK QA team) covers differences in this release and the last one in Differences between Flex 3 SDK and Flex 4 SDK beta.

Lots of stuff to read. Should keep you busy while we keep working on finishing the release.

Flex 4 SDK: Beta than Eva

It's here, it's hot, and it's beta than ever - it's the Flex 4 SDK Beta release!

This release has it all, including a new component model, new states syntax, declarative graphics, and new effects. Check out the articles on the Flex Devnet Site for more information about the release. Flex 4 Beta represents what we've been aiming at for the Flex 4 release. For the most party, we just have some minor tweaks left on some of the features, some bug fixing to make it rock solid, and of course fixing any issues that come from beta feedback.

Go grab the beta build, try it out, and let us know what you think.

Tuesday, May 26, 2009

JavaOne, Too

For those not following my Java blog (what, one post per year isn't enough?), I thought I'd mention that I'll be back at the JavaOne conference this year, speaking about Flex, Java, and fun graphics/animation stuff.

The main thing for me this year is the presentation that I'm doing with Romain Guy, called "Move Your Users: Animation Principles for Great User Experiences". We'll be presenting at 11:05 on Wednesday (June 3rd), and again at a repeat session on Friday afternoon (June 5th). This year's talk will be less about code and more about concepts and design principles. Should be fun.

I will also be assisting Duane Nickull in his lab on creating PDFs with LC ES and other server-side stuff that I should really learn one of these days. There is also an Adobe event at Jillian's on Wednesday from 6:30-9:30 PM - stop by the Adobe booth for more information. Speaking of the booth, I'll be spending some quality time there when not in sessions doing some small talks, demos, and generally hanging out trying to look like I work for Marketing. Stop by if you're around the show floor.

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.