FlashCamp Boston: March 19th

It's Flashy, it's Campy, it's ... FlashCamp!

There are some free FlashCamp conferences coming up in the next few weeks. These free events are great opportunities to learn what's new and upcoming in the platform, for free. I'll be speaking at the free FlashCamp Boston. And my topic will be ... Animation and Effects in Flex 4 (big surprise there). There are lots of other great speakers and topics, and there will be developers from the builder and SDK teams giving talks and generally available to answer your questions. For free!

Come on along to the free camp nearest you. For example, come to the free Boston event on March 19: be sure to register here; it's free, but there's limited space. Here's the current agenda for that free night:

5:00 - 5:45 p.m. Registration/Food/Drinks/Networking 5:45 - 6:15 p.m. Keynote 6:15 - 6:45 p.m. Overview of Flex 4 6:45 - 7:00 p.m. What's New in Flash Builder 4 7:00 - 7:20 p.m. Break 7:20 - 7:50 p.m. Animation and Effects in Flex 4 7:50 - 8:05 p.m. Introducing ColdFusion Builder 8:05 - 8:20 p.m. PHP and Flex 4 8:20 - 8:50 p.m. Creatiung Custom Layouts in Flex 4 8:50 - 9:10 p.m. Break 9:10 - 9:40 p.m. Advanced Skinning in Flex 4 9:40 - 9:55 p.m. SpringSource and Flex 4 9:55 - 10:15 p.m. Flash Builder 4 Secrets 10:15 - 10:30 p.m Flash on Mobile

(Did I mention that it's free?)

Video: The Animation Class in Flex 4

The Animation Class in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This episode covers the new Animation class in Flex 4, which is the underlying timing engine used by all of the Flex 4 effects. You will usually use this class indirectly, by using Flex 4 effects, but you can also use the class directly, providing a target object for Animation to call as it calculates new property values each frame.

For anyone used to Flex 3 effects, Animation is the new Tween. It uses some of the same mechanisms, but has added many capabilities, like repetition behavior, to support the enhanced capabilities of Flex 4 effects. We also meddled a bit with the API a bit as long as we were in there (for example, it doesn't auto-play on construction, like Tween does).

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

And here's where you can find CodeDependent on YouTube.

Enjoy.

Video: Keyframe Animations in Flex 4

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

This episode covers the new Keyframe capability of Flex 4 effects. Previously, all Flex effects were based on simple from/to values: Move a button from xFrom,yFrom to xTo,yTo, Resize a panel from its current width to widthTo, etc. And in fact most of the effects in Flex 4 still work this way: Move, Resize, Fade, and most other effects take just simple from/to/by values and animate the properties between these endpoints.

But in Flex 4, there's a new effect that can do more than this: it's the new Animate superclass of the Flex 4 effects. This effect, which is kind of like an extended version of the old AnimateProperty class with the ability to handle multiple properties or styles instead of just one, doesn't just take from/to/by information for the properties. Instead, it takes MotionPath objects which specify a simple 2-endpoint set of values. But a MotionPath can also specify an arbitrarily large set of Keyframe objects, which are key/value pairs that the property will pass through over the duration of the animation. Now, instead of having an animation that simply goes from one value to another, you can have an animation that goes through several intervals defined by these keyframes.

The animations during each of these intervals is still linear; the effects calculate the in-between values on a linear path between the interval endpoint values, just like we do for the simpler 2-endpoint effects. I'd like to see curved motion paths eventually, but that didn't make it into Flex 4. But in the meantime, you can at least specify more complex multi-step paths for the animation to take using motion paths and these new keyframe objects.

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

And here's where you can find CodeDependent on YouTube.

Enjoy.

Video: Simple Container Effects: The Sequel!

Simple Container Effects, Part 2, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This episode is the sequel to last week's cruel joke that showed how to animate adding and removing items to/from a VBox ... sorta. It turns out that the automatic gap that VBox adds for new items, or removes for deleted items, causes a jarring snap that makes the approach in last week's show less than perfect. It worked okay, but we can do better.

This week's episode shows a completely different approach to solving the problem via state transitions. In this case, we're not actually changing states in the application. But that doesn't mean we can't use the mechanism of state transitions to help automate these effects.

Note that this is a Flex 3 app. I've been talking about Flex 4 a lot these days (it's kinda on my mind recently, given where we're at with that product), but there's a lot of cool stuff you can do with Flex 3 effects as well. This example, like last week's, is all Flex 3.

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

And here's where you can find CodeDependent on YouTube.

Enjoy.

Video: Simple Container Effects, Part 1

Simple Container Effects, Part 1, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

A couple of months ago, someone asked on my blog how they could run simple effects on a container like VBox when adding or removing items. So I took a run at it and came up with this example. It's not that complicated - you basically create a Sequence effect that resizes the object in question and fades it in/out (based on whether it's coming or going).

It's also not a perfect solution: run the demo and you'll see a [snap] at the beginning of the adding effect or the end of the removing effect. It's not that bad, but maybe we can do better. And we will in Part 2, next week... (whoa, talk about cliff-hangers!)

Note that this is a Flex 3 app. I've been talking about Flex 4 a lot these days (it's kinda on my mind recently, given where we're at with that product), but there's a lot of cool stuff you can do with Flex 3 effects as well. This example is all Flex 3.

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

And here's where you can find CodeDependent on YouTube.

Enjoy.