Video: Creating a Reusable Animation Library

Creating a Reusable Flash Animation Library, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This episode is a bit of a departure from my normal shows. Usually, I show graphics and animation techniques in Flex and Flex 4. This time, I talk about Flash Pro, the authoring tool for Flash (not Flex) applications. In particular, I show how to create a reusable library in Flash Pro that you can then link to and use in other Flash Pro projects. The process of creating a library in Flash Pro wasn't obvious to me, so I thought it might be useful to show how it was done. Thanks to Trevor McCauley for helping me figure this out. Trevor's on the Flash player team and is very helpful is figuring out all kinds of things about how Flash works, including this bit about Flash authoring. Check out his blog at senocular.com.

Here's how this relates to Flex and my work for Flex: the library I create is an animation library based on the core facilities underlying the Flex effects. I call the library Flexy.

Flex effects are pretty dependent on the Flex library overall. They use concepts in UIComponent, graphic elements, styles, and other concepts that are found in the core Flex framework. So building a full-on Flex effects library in Flash Pro would necessarily drag in so much of the Flex infrastructure that it wouldn't be worth the effort; you might as well just use Flex directly.

But the underlying animation engine that the new Flex 4 effects depend on, including the Animation class, arbitrary type interpolation, and the new easer interface and classes, are independent of Flex effects and of nearly everything else in Flex. I wanted to see if I could break those animation facilities out into a separable library. There were various niggling dependencies, such as the use of the EffectEvent class, some use of resource bundles for error strings, and other minor issues, but one 50-minute train commute later, I had a 13k library built in Flash Pro that had no Flex dependencies and had all of the underlying animation support that the Flex effects use for running their animations.

Flexy doesn't handle all of the effects functionality, of course, because Flex effects aren't part of the port. Flex effects provide mainly two extra layers of support for animations. First, they handle setting animated values on target objects/properties. The animation infrastructure only handles calculating the animated values, not what to do with those values. Second, effects have extra built-in logic and convenience APIs that makes it easier to declare and run effects than you might otherwise have to do with a more manual approach to animation.

I can't do much about the second bit; that's most of the code in effects, and I was looking for something simple. But for the first part, I've provided a utility class called PropertyAnimator which you can use to automate assigning animated values to properties, just like effects do. It simplifies using Animation and makes very easy property animation possible with this library.

Check out Flexy and see what you can do with it. And come back for the next show to see a simple example of using the library from within Flash Pro.

Here's the video:

There is no demo application this time, because the demo is really just the reusable Flexy library, which isn't very exciting to watch, as demos go, because it just sits there, being reusable.

Here is the demo code. This is a zip file containing the Flash Pro project (Flexy.fla), the Flexy library itself (Flexy.swc), and the source code that Flexy was built with.

Users of the Flex Animation class should be able to start playing with the library pretty easily, but if the API is a bit of a mystery to you, check back for my next show, in which I'll dmeonstrate how to use the library in Flash Pro for a simple example.

Here's where you can find CodeDependent on iTunes.

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

Enjoy.

Music Video: Flex 4: It's a Wrap

Here's a music video I made for the 360|Flex conference. It's a tribute to the Flex 4 release and the Flex SDK team. I hope you like it, from the bottom of my geeky little heart.

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.