Codedependent

Curved Motion in Android

2012-01-04T09:49:00.000-08:00

The animation support added in Android 3.0 and enhanced since then is useful, allowing a flexible system of property animation to animate literally anything you want. Like a store going out of business: if it ain't nailed down, it's up for grabs.

But that doesn't mean we're done yet; there are many things that we'd like to do to keep improving the animation system and making Android animations easier to write and more powerful. One of those things is curved motion.

Right now, if you animate something between a start and end point, it will move in a straight line between those values. For example, a translation animation, where the object moves from one (x, y) location to another, will move in a straight line beween those points. You can (and should) use non-linear timing for these animations, and the animation framework uses ease-in/ease-out timing by default. But the actual spacial movement is linear; there is no way for you to specify a curved path for an object to take between the end values of an animation.

Even if you use a multi-point keyframe animation, where you specify several intermediate points for the animation to pass through along the way, you are still going to move linearly between each of those points.

One goal with animations is to make them feel as natural as possible. And just as motion in the real world (you know, the one we have to use as we move between the machines of our lives) is not linear, animations in our GUIs should not be limited to linear. For example, f a view moves from corner of the screen to the opposite corner, wouldn't it be nice to have the option to give it a little curve in and out at both ends, instead of being locked into a straight-line movement?

We'd like to add this kind of capability to the animation system in a future release; it needs to be easy to create such animations, we just have to provide the APIs and functionality to let you do it.

As I was looking into the problem, I created some prototype code using the existing animation APIs and realized that there's nothing stopping you from having this capability already. The flexibility of the Animator APIs allow you to do exactly the kinds of operations you need to get curved motion. You just need a little more code to do it.

I thought it would help to post some of my prototype code to show you how. In particular, I thought this sample was interesting because it shows:

How to move things along curves and complex paths
How to use the Animator APIs to do more than what the base library supports. In particular, how to use TypeEvaluator to animate custom types.

Some notes and caveats before we begin:

This is a prototype only, and does not necessarily represent the way it would appear in any final API. It's just a sample program, and a pretty simple one at that.
Simply computing the location based on the fraction time elapsed in a curve interval is probably not the motion you want. It will give the mathematically correct motion along that path, but the time spent traveling along any particular length of that curve is dependent on the structure of the curve. Basically, you'll end up with slower and faster portions of the curve. This problem is admirably described on this blog. A more complete solution flattens the curve and ensures uniform speed. But again, it's just a simple demo, so I'll leave correct path-time-distance navigation as an exercise for the reader (and for the writer, since this would be a part of any future implementation in the SDK).
The timing of the animation along a multiple-point path such as the one in the demo app is not as flexible as I'd like it to be. Basically, you end up with something that gives equal time in the overall animation to each individual interval. In addition, any "move" operations in the middle of the path cause the animation to wait at that location for that interval's equal slice of the duration. It should be possible, in a more complete implementation, to define the time associated with any particular interval.
This description assumes a foreknowledge of Bézier curves; if you have no idea what I'm talking about, you might want to go look them up (such as on the blog linked above or various other places on the web, such as Wikipedia). Or you can just read along, refer to the mathematically imprecise sketch to the right, and hopefully not get too lost.
The code as written requires Android 4.0 to build. Actually, it's mostly compatible back to 3.0, but the PathEvaluator class uses a generic specification for TypeEvaluator that was introduced in 4.0 (not necessary, just convenient when I wrote the code).

On with the code.

The activity code is in PathAnimationActivity.onCreate(). First, we set up the path itself:

AnimatorPath path = new AnimatorPath();
    path.moveTo(0, 0);
    path.lineTo(0, 300);
    path.curveTo(100, 0, 300, 900, 400, 500);

Here, we are constructing an AnimatorPath (which is part of the demo project that we'll see below) and supplying it with operations that will become points in the path, along with the operations to navigate the intervals up to those points. The first operation defines where the path starts, (0, 0). Then we move in a straight line to (0, 300). Finally, we move along a curve (a cubic Bézier curve, to be precise) to the point (400, 500), using control points (100, 0) and (300, 900) along the way.

Next, we set up an ObjectAnimator to animate this path:

    final ObjectAnimator anim = ObjectAnimator.ofObject(this, "buttonLoc", 
            new PathEvaluator(), path.getPoints().toArray());

This animator uses a new PathEvaluator object (introduced below). It also queries the AnimatorPath object to get an array of PathPoint (covered below) objects; these will become the points in the animation that define the intervals that we animate between. The animator will send the animated values to the this object, which is the activity instance itself. We implement the setter below to receive those values and pass them along to the actual Button object that we want to move on the screen:

    public void setButtonLoc(PathPoint newLoc) {
        mButton.setTranslationX(newLoc.mX);
        mButton.setTranslationY(newLoc.mY);
    }

The AnimatorPath class referred to above stores information about the overall path. Its API consists of everything seen above:

public void moveTo(float x, float y);
    public void lineTo(float x, float y);
    public void curveTo(float c0X, float c0Y, float c1X, float c1Y, float x, float y);
    public Collection getPoints();

Internally, AnimatorPath uses PathPoint to store the information at each point along the path. The PathPoint class is a simple data structure that just holds an x/y location, optional control point information (for curves), and the operation that tells the path containing that path point how to nagivate the interval leading up to that point. There are three factory methods that AnimatorPath uses to construct PathPoints as its API is called:

    public static PathPoint moveTo(float x, float y);
    public static PathPoint lineTo(float x, float y);
    public static PathPoint curveTo(float c0X, float c0Y, float c1X, float c1Y, float x, float y);

All of the logic of actually animating between points along the path (besides that in the Android Animator engine itself) is in the class PathEvaluator. This class implements the single method in the TypeEvaluator interface, evaluate():

    public PathPoint evaluate(float t, PathPoint startValue, PathPoint endValue) {...}

The return value of evaluator() depends on the operation described by the endValue PathPoint object.

For curves, we calculate the x/y values given the anchor points (the location at startValue and endValue) and control points (both control points are stored in the endValue structure).

    if (endValue.mOperation == PathPoint.CURVE) {
        float oneMinusT = 1 - t;
        x = oneMinusT * oneMinusT * oneMinusT * startValue.mX +
                3 * oneMinusT * oneMinusT * t * endValue.mControl0X +
                3 * oneMinusT * t * t * endValue.mControl1X +
                t * t * t * endValue.mX;
        y = oneMinusT * oneMinusT * oneMinusT * startValue.mY +
                3 * oneMinusT * oneMinusT * t * endValue.mControl0Y +
                3 * oneMinusT * t * t * endValue.mControl1Y +
                t * t * t * endValue.mY;
    }

For lines, we perform a simple linear interpolation between the start and end points:

    else if (endValue.mOperation == PathPoint.LINE) {
        x = startValue.mX + t * (endValue.mX - startValue.mX);
        y = startValue.mY + t * (endValue.mY - startValue.mY);
    }

For moves, we simply jump to the location defined by the end value:

    else {
        x = endValue.mX;
        y = endValue.mY;
    }

Finally, we create a new PathPoint with this calculated xy information, which will be passed to the setButtonLoc() method seen above:

    return PathPoint.moveTo(x, y);

... and that's it. There's really not much to it, which was the whole point of posting this code. If you want to add curved motion to your animations, you can wait for the framework to do it for you... or you can take what I've done here and modify it to suit your needs. Yay, TypeEvaluator!

I've posted the code on code.google.com; check it out for yourself. Or you can download the Eclipse project (including the pre-built apk) here.

Video: SF Android User Group Talks 11/11

2011-12-14T14:58:00.001-08:00

Last month, Romain and I once again braved Bay Area rush hour traffic and gave a couple of talks at the SF Android user group. Those talks were recorded and are now posted online:

An Introduction to Ice Cream Sandwich (Android 4.0)
This talk overviews some of the user and developer features of the new Android 4.0 release, through slides and demos. We also got side-swiped by a massive Q&A phase in the middle; always interesting to see what's on peoples's minds (and maybe even answer those questions sometimes).

Sticky GUIs
This talk discusses some principles, approaches, and techniques in graphics, animation, layouts, and performance that may help you create better and more usable UI applications.

(The ICS recording has interesting audio. It reminds me of early efforts at "stereo" with the Chet instrument coming out of your left speaker and the Romain instrument coming out of your right speaker. But the recordings are very good otherwise. And maybe it's better this way - you can just mute one of the speakers and mute the speaker you're tired of).

#DevoxxBlog: Of Slides and Such

2011-11-22T15:05:00.001-08:00

I spent last week at Devoxx, giving several talks with Romain Guy about Android (graphics, GUIs, performance, the latest developer features ... the usual). Now that I've recovered from a total system collapse over the weekend (apparently the body does insist on getting a little sleep now and then), I thought I'd post some thoughts and also the slides from our presentations.

Thoughts

Devoxx is my favorite developer conference. It is a perfect mix of highly technical (focused on developers, not business/marketing/PR), inexpensive (at 350-700 Euros, it's quite a deal for 2-5 days of full technical content of this caliber, even at the current exchange rate of 1 Euro == $97,000.02), and personal (it's a relatively small, single venue, so you're all together there in the talks, in the lobby, in the hallways, and on the show floor). And it's in an interesting venue (Antwerp, while not balmy in November, is a far more interesting location to return to than, say, San Jose). Oh, and the beer is quite nice.

The conference is well run, the talks are professionally recorded and viewable on the excellent parleys.com website, and the beer is tasty. Parleys, and its free subscription for conference attendees, is particularly crucial since the comfortable theater seating guarantees that you'll have to catch up on at least some of the talks later.

Content

Romain and I gave several talks this year, not all of which have accompanying slides:

University: Android Awesomeness
This vaguely-titled 3-hour talk on Monday was in two parts. In the first half, Romain and I did a very quick introduction to the Android 4.0 release, then Philip Milne (another engineer on the Android framework team) followed up with a deep-dive into the GridLayout class that is new in the 4.0 release. The second half was more interactive, as we showed how we use the tools that ship with the SDK to debug performance, memory, and UI issues.
You can download the slides for this talk here: Part 1 and Part 2.

Lab: Just Desserts: Developing with the Latest Features from Honeycomb and Ice Cream Sandwich
This was a 3-hour lab on Tuesday morning in which we showed how to use some of the new features like fragments, TextureView, layers, and animations. No slides for this one; you had to be there. (I may post code projects later once I whip the code into presentable shape).

Session: Graphics Goodies
Wednesday's talk was an updated version of the Android Accelerated Rendering talk we did at Google IO.
Here are the slides.

Session: Sticky GUIs
This presentation on Thursday was a collection of techniques and principles for creating GUI applications that will make your users stick: graphics, performance, animations, GUIs; they're all important.
Here are the slides.

Android Awesomeness, Graphics Goodies, and Sticky GUIs were all recorded and will be available soon on the parleys.com website. You may get more out of the full presentations than from just the slides. In fact, I hope you do, because otherwise I don't know why we traveled that far to present them.

Devoxx: Then and Now

2011-11-05T08:23:00.000-07:00

I'm starting to prepare presentations for the ~8 hours of talks that Romain and I are giving at Devoxx in a couple of weeks. "Preparing" generally entails mostly worrying, followed by a mad rush of writing slides and code at night, on the long flight, after beers, between talks, and sometimes during the talks. It's a busy time of year.

I realized that the organizers of Devoxx had recently released all of the recorded talks from last year into the wild (read: they're free on parleys.com), so it seemed worth linking to them in case anyone wanted to see what we had to say last time around.

I'll give a plug for the conference and the Parleys site here. If there were an ad banner, it'd go here. Not because I'm paid (I would make a poor ad salesman, apparently), but because I think that both the conference and the parleys site rock. The organizers do a great job of putting it all together, and the recordings and presentation of the talks on parleys.com is the best I've seen by far of any conferences I've spoken at.

Yes, that young man on the pedestal is
throwing a hand. It's an Antwerp thing.

Parleys is a subscription site; after the annual conference, you can join for the year (for a fee of 79 Euros) to watch all talks given at the conference. During that year, the talks are made freely available, one by one, then at the end they are all free. That year has passed, so the 2010 talks are all available now for free. If you enjoy them, consider joining parleys next time around to see them earlier. Or better yet, join us in balmy Antwerp, where the beer is good and so are the fries.

Dive into Android, Part 1
Romain talks about layout. This talk includes live-coding a custom layout, which is a good lesson in how to do it yourself (although you probably don't need to do it on stage in front of the cameras to make it work the way you want).

Dive into Android, Part 2
I talk about custom graphics. This is kind of a Filthy Rich Client talk, but more focused on the core principles and approaches of doing custom graphics in Android applications. nothing over-the-top filthy, just good stuff to know about Android GUI development.

Android Graphics and Animations
We cover lots of architectural details about the Android platform, including the view hierarchy, classes used in custom graphics, and pre-3.0 animations (remember: this talk was given before Android 3.0 (Honeycomb) was released).

Android UI Development: Tips, Tricks, & Techniques
This talk consists of a smattering of tips that will help you write efficient Android applications. We discuss the various tools that you should use, techniques for avoiding unnecessary garbage creation, and various performance tips.

Flex 4 FunThis is my swan song for the platform that I worked on prior to Android, and for my Flex 4 Fun book that was published last year. I cover various things from the book, including graphics objects, filters, states and transitions, component skinning, and (of course) animation effects (the area I worked on for Flex 4). Lots of demos and code.

Android 4.0 Graphics and Animation

2011-11-01T09:08:00.000-07:00

Romain and I wrote this article for the Android developer blog about graphics and animation features (what else?) in the latest Android release.

Enjoy...

http://android-developers.blogspot.com/2011/11/android-40-graphics-and-animations.html

Old Views Don't Die; They Just Fade Away

2011-09-16T11:19:00.000-07:00

One of the app developers here on Android asked me about the best way to animate adding and removing items from a UI. Specifically, he wanted to fade items in and out as they became visible/invisible.

So I wrote up a sample activity that used ViewPropertyAnimator, showing how to set the visibility at the right time (making it visible before fading it in, listening for the onAnimationEnd() to set it invisible after fading it out). Pretty straightforward, but if you haven't played around a lot with the new animation classes yet (WHY HAVEN'T YOU?!?!), it's probably not obvious:

To make it invisible:

invisibleButton.animate().alpha(0f).setListener(new AnimatorListenerAdapter() {
                    public void onAnimationEnd(Animator animation) {
                        invisibleButton.setVisibility(View.INVISIBLE);
                        invisibleButton.setAlpha(1f);
                        invisibleButton.animate().setListener(null);
                    }
                });

To make it visible again:

invisibleButton.setAlpha(0);
                    invisibleButton.setVisibility(View.VISIBLE);
                    invisibleButton.animate().alpha(1);

I sent the sample application along to the developer.

Then I thought I'd add to that sample and show how to also add/remove views, or set them to View.GONE as well as View.INVISIBLE.

I sent that updated sample to the developer as well.

Then I thought I might as well show how you'd do the same thing with ObjectAnimator. It's a little more code than ViewPropertyAnimator, but still pretty straightforward. For example, fading the object out and making it invisible looks like this:

                ObjectAnimator anim = ObjectAnimator.ofFloat(invisibleButton1, "alpha",0);
                anim.addListener(new AnimatorListenerAdapter() {
                    public void onAnimationEnd(Animator animation) {
                        invisibleButton1.setAlpha(1);
                        invisibleButton1.setVisibility(View.INVISIBLE);
                    }
                });
                anim.start();

I sent this further updated sample to the developer.

Then I thought I'd poke at a utility class that's been on my mind for a while. We have all of these new animation capabilities as of the Honeycomb release, but I'd still like it to be simpler to run these kinds of animations, especially ones that involve several actions like this: fade this view out, then remove it. So I wrote up a Fade class that has utility methods in it for fading/adding/removing/etc. I enhanced the sample to use the new Fade utilities. Now making a view invisible is just one step:

                fade.hide(invisibleButton2, View.INVISIBLE);

Similarly, making that view visible again is a single call:

                fade.show(invisibleButton2);

I sent this latest version of the sample to the developer. He was getting pretty tired of hearing from me by this time.

Then I tweaked the Fade class to have a duration property.

I was going to send this final (ha!) update to the developer, but I didn't want him to call security on me. I think he got what he needed the first time around. So rather than continue to bury him in yet more ways to accomplish this simple task, I thought I'd publish it here.

Check out the sample code for FaderActivity, which shows all of these things: ViewPropertyAnimator, ObjectAnimator, and this new Fade utility class. I hope that something like the Fade class and other higher-level animation classes will make it into the SDK eventually, but in the meantime, Fade should simplify fading tasks.

There are a couple of things to note about fading animations. One thing is that there is an abrupt 'pop' when an item is removed from or added to a layout that is affected by that change. For example, the LinearLayout used in the example expands or contracts when the first button is removed or added or when the last button is set to VISIBLE or GONE (although you can't see that change since it's the last item in that layout). There's nothing to be done about this problem right now, although you might play with the LayoutTransition class available in 3.0, which animates the layout changes as well.

It's also worth noting that the Fade class is great at fading things out from their current alpha and then back to an alpha value of 1 (fully opaque). It does not compensate for in-between alpha values that your views might want to persist between fades. That logic could be added, but there's some tedious logic around knowing when an in-between value is coming from the view itself vs. some other fade animation that happens to be running when you start the new one (for example, you fade an item out and then, halfway through, you fade it back in). The Fade class is great for the common case where views are typically just opaque (alpha == 1). But it seemed worth mentioning.

You can grab a zipped version of the Eclipse project with the source for the example activity and the utility Fade class here.

Enjoy.

The Mysterious Behavior of fillBefore, fillAfter, and fillEnabled

2011-08-24T07:21:00.000-07:00

A bug was filed on android.com recently that had me poring through the code and docs to understand three boolean flags in the old Animation class: fillBefore, fillAfter, and fillEnabled. On the surface, these properties don't seem that difficult to understand; they control how animations behave before and after they run. But between some complicated interactions of the properties and some, er, inaccuracies in the reference docs, it turned out to be somewhat tricky to understand how they work and how they're supposed to work. Once I got through that exercise (including fixing the docs - look for those fixes in a future release), I thought it might be helpful to explain how these flags really work.

First, let's cover the behavior of fillBefore and fillAfter. We'll get to fillEnabled and it's, um, special behavior after that.

Before and After

fillBefore and fillAfter are pretty simple, conceptually; they define how an animation behaves before and after it runs. fillBefore controls whether the initial value of the animation is applied before its start time and fillAfter controls whether the animation's ending value persists after it ends. There are a couple of important nuances to understand, however.

start time: The starting time of an animation, for the purposes of fillBefore, is not the time when you call startAnimation() on a View. Rather, it's the time that the animation will actually start running. These two times are the same if there is no startOffset set on the animation, but if you want to delay your animation, you might set a startOffset value to achieve that delay. fillBefore controls whether the animation will use the initial value of the animation during that startOffset phase.
AnimationSet: If you want to control the fill behavior of an animation that is inside an AnimationSet, it is certainly possible to do this. But if you want to control what happens outside the runtime of that AnimationSet, then you need to set the fill behavior on the set itself. For example, the fillAfter flag controls whether a ScaleAnimation's end value is used after it ends. But if the animation you set on your View is actually an AnimationSet containing that inner ScaleAnimation, then you need to set fillAfter on the AnimationSet if you want the value to persist after the AnimationSet ends. You can think of the fill behavior flags as having scope, which is either global (when not contained in an AnimationSet) or local to the AnimationSet in which their contained. Or you can just play with them enough to get the hang of it, like I did. It's also worth noting, as stated in the docs (correctly this time) that if you set the value of fillBefore or fillAfter these values will override those in the child animations of the set.

The default values for these flags are true for fillBefore and false for fillAfter. So by default, animations will set their initial value immediately when the animation starts (regardless of startOffset), but will not persist those values after they end.

So that's all there is to those flags: you set or unset them according to whether you want the animation values to be used outside of when the animation is actually running. Well, sort of...

The Enabler

Here's where the other flag, fillEnabled, comes in. This flag controls when the other flags are actually taken into account. Or that's what some of the docs would have you believe. In actual fact, this flag controls only the behavior of fillBefore, and essentially leaves fillAfter to its own devices.

Here's how the value of fillEnabled works:

false: If fillEnabledis false (which it is by default), then the value of fillBefore will be ignored. That's right, you can set or unset it all you want, but it will ignore your wishes and will essentially assume that fillBefore is true.
true: When fillEnabled is true, the value of fillBefore will be taken into account to determine whether to apply the animation before it begins. The value of fillAfter, as I said earlier, will be used as-is, regardless of the value of fillEnabled.

All of this means that the only way to get an animation to not persist its starting value before it actually starts running is to set both fillEnabled to true and fillBefore to false. Any other combination will result in the animation being applied before its starting time. Meanwhile, the value of fillAfter is applied directly, regardless of the value of fillEnabled. I believe it is this asymmetric behavior (coupled with an unfortunately generically named "fillEnabled" property and some, well, bugs in the docs) that made these three variables particularly difficult for some people to understand. Some people like me.

At this point, you might be asking yourself why these variables were created and defined in this way. All I can say is, welcome to the wonderful world of API development, where behavior needs to evolve while compatibility is preserved. In any case, I hope this explanation helps those who needed it.

p.s. For those starting to use the new animation system introduced in Android 3.0, you can forget about all of this; there is no fill behavior (before, after, or enabled) for Animator-based animations.

DroidFlakes: An Android Animation Demo

2011-08-04T08:56:00.001-07:00

Here's a simple app that I wrote recently to see how background processing affects frame rate. There's nothing too complicated going on in the app, but it seemed worth publishing to show how to do various things in Android, such as:

Using a single ValueAnimator (3.0+ API) to animate several objects independently
Manipulating the transform of Canvas to move/rotate objects
Using the GPU to provide faster rendering (3.0+ capability)
Tracking the current frames per second performance

Here's a video of the running application, captured using HDMI on a 3.1 tablet. You can see how the More, Less, and GPU controls affect what's going on in the app. Note that it starts out with no GPU acceleration and bogs down when we have lots of flakes on the screen. Then see how the frame rate improves once the GPU box is checked. The app is accelerated by default; non-GPU rendering is performed by setting a software layer on the view, which forces rendering to happen in software to a bitmap, which is then copied into the view.

Here's the code (a zipped Eclipse project for the app). You should be able to build/run it for any 3.0+ target device.

Note: this is not the Renderscript app that I showed in a recent user group talk. That other app is based on this one, but uses Renderscript to animate and draw the droidflakes. This version just uses the standard Canvas API to draw bitmaps. I'll post the Renderscript version soon.

Video: Android UI: Tips, Tricks, and Techniques

2011-06-29T07:48:00.000-07:00

Romain and I gave several talks at the excellent Devoxx conference in balmy Antwerp last November. The video of one of these talks, Android UI Development: Tips, Tricks and Techniques, has just been published for free on the Parleys.com site. All of the conference talks have been available for months to subscribers (79 Euros), but for those who haven't gotten around to registering quite yet, the talks are published incrementally for free throughout the year, and our UI Tips talk is now available.

This talk covers a mix of topics, from "Garbage Zero" (techniques to avoid producing garbage when it matters) to an exploration of various tools and performance techniques that we use to produce better Android code.

Check out the video here: Android UI Development: Tips, Tricks and Techniques.

Android Rendering Options

2011-06-23T11:22:00.000-07:00

I've given some talks about Android graphics recently, and the same questions keep coming up:

What is Renderscript appropriate for?
Is it a replacement for OpenGL rendering?
How do I access Renderscript from NDK code?
When do I choose between the different rendering options?
Can I have a free tablet?

It seemed to me that a brief article might help. In particular, I wanted to write something that lays out the various rendering options that Android provides and describes how we envision developers using them (and how we use them ourselves in the applications that we ship) so that you might better understand how and when to use them in your applications. Of course you're not bound to what we think; if you come up with new ways to use what the platform provides, all the better. But we can at least provide a little guidance to help you navigate the myriad of options. Hopefully this article will help answer the questions above. Except for the last question about the free tablet - I can't help you there.

First, I should explain what I mean by rendering, for everyone reading this that's not a graphics geek. "Rendering" is a synonym for drawing. Rendering is also defined as the process of turning an animal carcass into fat and other component pieces... but that's not what I'm talking about here. This article is about is all of the ways, in the Android platform, of drawing things onto the display. For example, you might have a drawing application, or a photo album, or a game, or a reading program, or anything else that needs to draw its content to the screen. If you're just using the SDK components (ImageView, Button, TextView, and so on), then we handle the rendering of these components internally. But if you have custom components that draw their own graphical elements, or if you're writing a fullscreen game that draws everything itself, then you need to know how to draw those items onto the device screen so that the user can see and interact with them.

There are two options for writing Android applications, each with their own ways of rendering graphics. I'll cover each of these in the following sections.

The Android SDK

The SDK is the typical, default approach for most GUI applications. You write your application using the Java programming language and the libraries that the SDK provides. Most of the graphics on the screen are drawn by the framework for the standard View objects such as Button, TextView, ListView, and so on. If you create custom Views or have customized rendering that you want to do for your application, then you need to know about the rendering options available to SDK applications. There are basically three options:

The Canvas API
Renderscript
OpenGL wrappers

The Canvas API

What I mean by "Canvas API" is the standard rendering for a typical SDK application that uses View objects (standard and custom) and performs and rendering by calling the various methods in the Canvas class. The rendering process of the Android view hierarchy consists of calls to each View's onDraw() method. This method takes a single parameter, Canvas, which is the object used by the view to draw its content. For example, a Button might tell its background Drawable to draw itself into the Canvas and then draw its label with a call to Canvas.drawText().

If you have a custom View, in which you implement the onDraw() method and draw your own graphic elements, then you would typically call methods in the Canvas object passed in to the onDraw() method. For example, you might draw lines with Canvas.drawLine() and circles with Canvas.drawCircle().

This approach to rendering is typical for most GUI applications, and is fine for most purposes when you just need standard GUI components and graphics and for which the performance of your application is not an issue. With the GPU acceleration that we added in Android 3.0, the performance for the Canvas API is even better than it used to be. As discussed in the article Android 3.0 Hardware Acceleration, all rendering done by the SDK now happens via OpenGL calls to the GPU. This level of hardware acceleration for standard as well as custom views and graphics can provide excellent performance and allows for parallelism by offloading rendering work from the CPU onto the GPU.

But sometimes you may want to go beyond what the Canvas API provides, either in terms of the graphics functionality you need or the performance that your particular situation requires. For example, the Canvas API does not provide complete 3D rendering capabilities. In these situations, you might want to look beyond the Canvas API to the other options available in the SDK.

Renderscript

The Renderscript API was introduced in Android 3.0. Renderscript was actually in use in an earlier form long before this release; the Live Wallpapers that shipped with earlier releases were written using Renderscript. But Android 3.0 introduced the first public form of the API and the runtime library. Describing what Renderscript is and how to use it is beyond the scope of this article. Instead, I'll just refer you to Jason Sams's introductory articles, Introducing Renderscript and Renderscript Part 2. Very briefly, Renderscript is a language, API, and runtime library that you can use to achieve high performance rendering and computation for Android applications.

An application using Renderscript is an SDK application, using any of the SDK APIs and facilities provided at that level, with addition pieces of the application written using the Renderscript language. These scripts are initialized from Dalvik code. The scripts automatically provide glue code that wraps fields at the Renderscript level, so that SDK code can set values in Renderscript code by calling simple methods. Renderscript has a reference to a drawing surface that it renders to in a thread that is separate from the UI toolkit thread. It handles its own rendering and the timing of when that rendering happens.

One of the things that makes Renderscript compelling is that it can determine, at runtime, the best way to achieve high performance for a particular operation. For example, it might send graphics operations down to the GPU, or it might parcel out independent computations to separate cores in a multi-core device. All of this is transparent to the application; it simply starts the script, sets the values, and lets it go.

An important use case for Renderscript arises for SDK applications that need functionality or performance that cannot be had through the SDK directly. For example, your application may need to perform 3D graphics operations or heavy computation that takes too much time at the SDK level. You might consider taking these portions of your application and farming them out to Renderscript to do the work there instead.

An important consequence of the Renderscript approach using SDK and runtime-compiled code is that Renderscript applications are fully portable between devices. That is, you only need to compile your application once, not per-architecture (as you must do with the NDK). This single apk is then runnable on any device that supports the SDK level that you compiled for (3.0 and above, since 3.0 is the first Android release to support Renderscript).

Examples of Renderscript in Android 3.0 include the Live Wallpapers, the video wall view in the YouTube application, and the Books application (including that beautiful page-turn effect). Other examples can be found in the SDK samples; you should check these out to understand how to write Renderscript as well as how to initialize and interact with the scripts from SDK applications.

OpenGL Wrapper Functions

Android also provides wrappers for OpenGL APIs at the SDK level. That is, you can write an application using the SDK, with full access to usual SDK APIs and functionality, and still use OpenGL ES 1.x and OpenGL ES 2.0 APIs, by calling the wrapper functions in GLES10 or GLES20 classes. These wrappers call the underlying OpenGL APIs at the native level for those versions of OpenGL ES.

For casually exploring or using OpenGL, this may be a reasonable option. But while this approach works, it's not a recommended practice as a general approach for complex scenes that require high-performance graphics. For one thing, it is difficult to achieve high performance levels equivalent to native access to OpenGL due to the overhead of calling down from the SDK to the native level for every OpenGL call.

The Music application that shipped with Android 3.0 used this approach. The application was an SDK application which needed some simple 3D graphics operations, such as the carousel view of albums. The main reason that it uses the SDK/OpenGL approach is because it is an unbundled application (not dependent upon a particular release of the SDK) and needed to work on releases back to 2.2. It therefore used APIs that were available on those previous releases.

NDK

The NDK exists to provide an easy porting layer for existing applications written in native code, or which use native libraries. Porting might be more easily and quickly accomplished by using the NDK than by converting existing code to the language and APIs used by the SDK.

The NDK does not provide the rich GUI toolkit of the Android platform at the native level, so developers do not have access to the View objects, or the events, or the rest of the infrastructure that is provided in the SDK APIs. But there is a graphics environment at the NDK level that is sufficient for some specific purposes. In particular, game developers that simply want a fullscreen game experience can find what they need with OpenGL. This API provides low-level graphics functionality that lets applications display 2D and 3D graphics using the GPU for maximum graphics performance.

One important restriction of the NDK to keep in mind is that it compiles applications to specific CPU architectures. This means that if you only build your application for one specific chip, then the application will not work on Android devices that do not have that chip architecture. This is particularly important in the broad and growing Android ecosystem where new devices are coming out all the time. You probably want your application to work as well on new chips as it did on the ones you used to develop the application. So while the NDK OpenGL solution provides a reasonable route to fast graphics performance, it does so at the cost of the portability that other solutions offer.

One of the questions that came up about Renderscript when I talked to developers was how to access it from the NDK. This is not currently possible. Renderscript is specifically created to be a companion to SDK applications. We envision users of Renderscript as SDK applications that use Renderscript for their high-performance graphics or computation needs. These applications might be primarily SDK applications, with GUIs and interaction and most other facilities provided by the SDK APIs and small but important pieces of functionality provided by Renderscript, such as graphics effects that would otherwise not be possible or not perform as well. Or these applications might use Renderscript for most of what they do, just using the SDK to initialize the scripts and letting Renderscript take over from there.

And So...

I've tried to explain and categorize the different rendering options that we provide in the Android platform. What may seem confusing at first, because of the potential overlap, is actually simple once you understand how these libraries differ from each other in their purpose, their use, and their advantages. Here's one last brief take at a breakdown of when you might consider the various options:

SDK Canvas API: If you're writing a normal GUI application, using the SDK and the Canvas API is probably the most sensible option. If you need custom 2D graphics, there is plenty of power and reasonable performance in the Canvas API.
SDK Renderscript: If you want a fully portable, SDK application with access to the power, speed, and functionality of the Renderscript library and underlying GPU and multi-core CPU architectures, then it's worth exploring this new feature of Android.
SDK OpenGL Wrappers: If you are writing an SDK application and want to sprinkle in some 3D effects with OpenGL, you could see whether the OpenGL wrapper functions suit your needs.
NDK OpenGL: If you are porting your application from a different platform or existing native code and are looking for the fastest way to get it up and running on Android, then using the NDK with OpenGL is worth considering.

Whatever your rendering need, Android has something for you. So keep those cool graphics applications coming! (Sorry I still can't help you with the free tablet, though. There were tablets given away at Google I/O this year, so you could get one of those if you can travel back in time. I think there's an app for that. It probably uses Renderscript.)

Introducing ViewPropertyAnimator

2011-06-01T10:45:00.000-07:00

The property animation capabilities that are in Android 3.0 (described in the article Animation in Honeycomb) represent a good building block for powerful animation capabilities in the platform. But we're not stopping there. One minor addition to the platform was added in the 3.1 release, ViewPropertyAnimator. This class allows very easy and efficient one-liner animations of some of the new View properties like alpha, rotation, and scaleX/Y.

Check out the Introducing ViewPropertyAnimator article on the Android developer blog for more about this new API. In the meantime, enjoy this teaser trailer that shows the demo described in the article. The interesting part is the code (shown in the article, not here). And the soundtrack, of course: turn up your speakers.

IOU IO Slides and Videos

2011-05-13T10:12:00.000-07:00

I had the chance to speak at Google I/O this week, giving two talks with Romain Guy, Honeycomb Highlights and Android Accelerated Rendering. The talks were fun, as were the conversations with the developers that came by our Android Office Hours. The conference was enjoyable and relaxing; I'm looking forward to my system recovering by sometime in June of 2012.

Google's pretty good at posting content online (surprise, surprise), and I/O is no exception. Our Honeycomb talk was available on YouTube as we were giving it (nothing like streaming live to the world to keep the nervous tension alive), and I hope to see the Rendering talk posted there soon. In the meantime, Romain provided links to the all of the video, slide, and demo resources for our talks; check out his blog for all of the details. And hopefully see you at some future I/O or other Android-related conference!

AnDevCon Slides

2011-03-09T16:20:00.000-08:00

Here are the slides from our presentations at AnDevCon:

Android 3.0: Honeycomb and Get It. This presentation, with Romain Guy, was an overview of some of the highlights in the 3.0 release, for users and for developers.

Androidimation: Animation in Android. This presentation discussed how to use the animation APIs in Android, including the animation classes in the SDK before 3.0 and the new animation system in 3.0.

Enjoy.

Recording Animations via HDMI

2011-02-24T11:39:00.000-08:00

I've gotten some questions about how the video in my recent animation article as well as the video of Romain's excellent photo viewing app were created. I thought I'd spend a few words on it in case anyone else wants to do something similar.

I can tell you how I did it, but it'll cost you. About $200, in fact; that's how much I paid Amazon for the setup I used.

First, the reasons I wanted the device:

Debugging animations is hard: So many of the issues I chase with animations are timing-dependent. So the typical approach of step-debugging doesn't work; as soon as you stop in the debugger, you've lost the stream of whatever is causing the issue.. Nor does it help to hack the code and add tracing output everywhere, because sometimes you can't easily access the code in question (although this is what I end up doing in many cases where I can change the code). Sometimes it helps to dramatically sloooooooow down the animations, so that you can see it unfold instead of trying not to blink and miss the action. But what would be really nice is to be able to catch the actual animation, at speed, and then be able to see it played back in slow motion. That's what HDMI recording gives me. I thought about getting a high-speed camera, but between the cost, the reliance on a lot of light for each frame, and the setup for any shot, that didn't seem like a great general solution.
Screencasting: I've been wanting to do more blogging about Android development. In particular, I'd like to post some video tutorials, something like I did in a previous life. I find that forum to be very efficient, once I get into the groove. I can talk through a demo, show the demo, and show the code, and do so in far less time than it takes me to write an article, for example. But that means I'll need some way to screencast from the device that's running the animation code that I'll be talking about. I could take a video of me playing with the device, but it's more of a hassle to set it up, and the quality of the video just isn't as good.

The solution: an HDMI recorder. The Xoom device on which I recorded the video has an HDMI output port. So all I needed was a device on the other end of the HDMI cable to record that output stream. I picked up an Intensity Pro PCI Express card by Blackmagic, and that did the trick. I installed the card in my Mac Pro, installed the software that came with the device, and it was a simple matter of running the capture software to capture the actual video stream. You can also use other capture software, such as Adobe Premiere, but I found the software that came with the device sufficient for my needs. I did notice an occasional dropped frame (I had to set a setting in the software to not stop recording when there is a dropped frame), but overall it seems fine, at least for my use cases.

Here's a picture of the recorder's box (the card is in my machine and I didn't feel like taking it out). I like the sheer recursiveness here: it's a picture taken with the device of the recorder, uploaded via HDMI from the device to the recorder. I've put some other completely random objects on the shelf with it to give you a sense for its size (small).

I'm sure there are other solutions out there, but this setup works for me.

Animation in Honeycomb

2011-02-24T11:33:00.000-08:00

I've posted an article, Animation in Honeycomb, on the Android Developers blog. The article gives an overview of the new property animation system in Android 3.0. Check it out.

And while you wait, here's the demo reel for the article. I wanted to show some of the home screen interactions and API demos from the SDK that take advantage of the new animation framework. The sound track has nothing whatsoever to do with Android, but the video seemed to want audio. It was a sound decision.

Flex 4 Fun: The International Tour

2011-02-16T06:53:00.001-08:00

The international book tour for Flex 4 Fun began last November in Antwerp, Belgium (the home of diamonds, chocolate, and GUI toolkit programming books). It was a gray a rainy day, which is unusual for Antwerp except for the months between September and June.

The tour began as all such things do: parties dripping with scantily-clad programming celebrities, mobs of teeming fans fighting for autographs and shreds of clothing, and all-night hacking orgies. It was unforgettable, it was a blur of over-caffeinated memory, it was ... just another book tour.

The tour came to an abrupt end. I can't confirm that it was because of overcrowded venues and rabid crowds that overwhelmed Interpol forces. I can only say that I had to leave the town anonymously, quickly, and with only 10 pounds of chocolate as a memory of the experience.

Or...

I gave a talk on Flex 4 Fun at Devoxx. The presentation gave an overview of some of the graphics and animation features in Flex 4, and worked through an example of skinning a component to show some of these new features. This was one of several talks I gave that week, although this was the only one on Flex. In fact, it's probably the last such talk, since I don't have a lot of opportunity to do Flex development in my new Androidal life. Call it my final Flex fling ... 4 fun.

Instead of embedding the video, I'll encourage you to go to Parleys.com to watch the presentation, and to check out the many other videos from the Devoxx conference. Parleys has a subscription model (79 Euros to watch all videos from Devoxx 2010), but there are a few talks available for free now (like this one) to whet your appetite.

Enjoy the video while I continue to recover from the tour.

CodeDependent: The Clothing Line

2011-01-15T11:34:00.001-08:00

(Cross-post with my humor blog; I figured this content would wear well on my geek blog, too).

For no good reason at all, I decided that geeks need more T-shirts and that I need to provide them. Fortunately, I don't have to pit my sewing skills against such a high goal; I'll just let CafePress do it for me.

Here's the first such effort, especially topical for this blog, "codedependent" (available in various colors/styles - see the site for the full array):

Video: Reflections on Android

2011-01-04T10:39:00.000-08:00

Everyone's supposed to make a resolution on New Years, so here's mine: post more articles/blogs/videos about Android development. Starting with today's video tutorial.

Here's the first in what I hope will be a series of video tutorials on anything ranging from graphics to animation and back to graphics (hey, it's my show and I might as well talk about the things I enjoy).

For the Devoxx conference last November, I developed a simple picture-viewing application to demonstrate various facets of UI development that Romain Guy and I were talking about that week. You can see the presentations online at parleys.com (you'll have to register for 79 Euros to get access to them for now). But I wanted to deep dive into particular aspects of this application for my blog. Here's the first of these tutorials, in which I talk about the simple reflection effect used in the application. By the way, credit for the beautiful pictures goes to Romain, my source for all of my, er, borrowed images.

The video is in two parts (because YouTube thinks that I talk too much, so I had to split it). This first part introduces the show and talks about the effect at a high level:

Part 2 dives into the code that makes the reflection effect work:

The code in the video is a tad blurry (given the resolution of the video compared to the size of the IDE window), so here's the code from PictureView.java that I walk through for your reading pleasure (note that this code looks slightly different than that in the video due to formatting for a smaller line wrap. Also, the blurryBitmap image is now created to be only as high as the reflection height, as described in the comments):

private Bitmap getReflection(Bitmap bitmap) {
    Bitmap reflection = reflections.get(bitmap);
    if (reflection == null) {
        // We're cropping the height of the reflection to 80
        int reflectionH = 80;
        reflection = Bitmap.createBitmap(bitmap.getWidth(),
                reflectionH, Bitmap.Config.ARGB_8888);

        Bitmap blurryBitmap = Bitmap.createBitmap(bitmap, 0,
                bitmap.getHeight() - reflectionH,
                bitmap.getWidth(), reflectionH);
        // cheap and easy scaling algorithm; down-scale it, then
        // upscale it. The filtering during the scale operations
        // will blur the resulting image
        blurryBitmap = Bitmap.createScaledBitmap(
                Bitmap.createScaledBitmap(
                        blurryBitmap,blurryBitmap.getWidth() / 2,
                        blurryBitmap.getHeight() / 2, true),
                blurryBitmap.getWidth(), blurryBitmap.getHeight(), true);
        // This shader will hold a cropped, inverted,
        // blurry version of the original image
        BitmapShader bitmapShader = new BitmapShader(blurryBitmap,
                TileMode.CLAMP, TileMode.CLAMP);
        Matrix invertMatrix = new Matrix();
        invertMatrix.setScale(1f, -1f);
        invertMatrix.preTranslate(0, -reflectionH);
        bitmapShader.setLocalMatrix(invertMatrix);

        // This shader holds an alpha gradient
        Shader alphaGradient = new LinearGradient(0, 0, 0, reflectionH,
                0x80ffffff, 0x00000000, TileMode.CLAMP);

        // This shader combines the previous two, resulting in a
        // blurred, fading reflection
        ComposeShader compositor = new ComposeShader(bitmapShader,
                alphaGradient, PorterDuff.Mode.DST_IN);

        Paint reflectionPaint = new Paint();
        reflectionPaint.setShader(compositor);

        // Draw the reflection into the bitmap that we will return
        Canvas canvas = new Canvas(reflection);
        canvas.drawRect(0, 0, reflection.getWidth(),
                reflection.getHeight(), reflectionPaint);
    }
    return reflection;
}

And finally, here's the Eclipse project complete with source code, images, and everything you need to build and run the application. The app is targeted at Android 2.2 (Froyo) (and probably could work on earlier versions as well), so you should be able to run it on the emulator or any appropriate device. Note that it's just a demo and not really a full-featured photo viewer; it was written to demonstrate particular effects and techniques, not to be a real application.

Now that my New Year's resolution is fulfilled, I should go back to working on Android framework code...

Slides from Recent Android Presentations

2010-12-02T16:40:00.000-08:00

Here are slides for two of the approximately 871 talks that Romain Guy and I gave at Devoxx last month (and again at the SF Android User Group meeting a couple of days ago).

Videos of all of the Devoxx sessions are already posted on the excellent Parleys site for a small subscription fee, and should be made freely available sometime in the next few months. You probably want to check out those videos for the complete details. But in case you were at the talks, are sick of listening to us speak, or simply want to peruse the slideware, here you go...

Android Graphics and Animation

Android UI Development: Tips, Tricks and Techniques

Flex 4 Fun 4 Kindle

2010-11-27T06:59:00.000-08:00

By popular demand, Flex 4 Fun is now available for the Kindle!

If you order the eBook on the Artima site, you can download the Mobi as well as the PDF version. In fact, if you already bought the eBook, you can log into your Artima account and download the new Mobi version. Once you have the .mobi file, you can copy/email it to your Kindle device and start reading.

Shaka Devoxx

2010-11-21T15:02:00.001-08:00

I'm back from the annual Devoxx conference, a fun and thoroughly exhausting week in Antwerp spent presenting, attending, and generally hanging out. It's always a great time, despite the weather and the overall grayscale cityscape.

This picture from the show was taken during one of my sessions when I was either talking about a GUI frame or saying hello to my Hawaiian friends.

I presented in several sessions, including 4 sessions with Romain Guy about Android and UI programming and one on topics from my book, Flex 4 Fun. I spent most of the week either on stage or writing slides and demos to present on stage. There's nothing like procrastination to keep you busy at the last minute.

For anyone that missed the presentations, see below about their availability on parleys.com. We may also post the slides someday, although it's always better to get the full deal (slides+audio+video). Also, I intend to post a couple of the demos I showed in the Android talks (the Flex demos are already available on the book site).

The sessions this year were, as always, recorded and will be released on parleys.com, an excellent site for viewing presentations with lots of content from previous years as well as other developer forums. The talks are released incrementally during the year for free, or you can buy a subscription to view them all for 79 Euros. In fact, parleys just announced that the 2009 recordings are now all available and all free. The talks and the recordings are of very high quality, so you should check out the site..

Anyway, thanks to Stephan Janssen for another great conference. Shaka!

Amazon Restocks Massive Shelves

2010-10-29T07:44:00.000-07:00

Flex 4 Fun is finally, once again, in stock at Amazon.com. It's been "Temporarily out of stock" for the past coupjle of weeks for reasons that escape me, but which are probably one of these two possibilities:

Amazon is really new at this business of selling books and is still learning how to keep appropriate amounts of inventory on-hand.
They lost all the copies they had and had to rewrite the book from scratch, based purely on the cover picture on their website. I hope their version is as gripping as the original.

In any case, you can now order it in peace. At the same time, they bumped the price a bit, to $26.60. This is fantastic news, of course, for two reasons:

The book now costs just about a cup of coffee more than it used to on Amazon. This means that you may have to forego that cup when you read it, thus preventing unfortunate spills and mess.
Even better, the new price means that the book is just over Amazon's Free Shipping limit here in the U.S. That's probably the thing that a lot of you were waiting for in order to finally purchase it.

So go ahead. It's ready. Now. Go.

Speaking of Flex...

2010-10-09T08:16:00.000-07:00

I'll be joining Jacob Surber from Adobe this week to speak to the local Flex user group, SilvaFUG (which I think stands for "Silicon Valley Flex User Group." Or maybe it's "Silver and Fugly"). We'll be in San Francisco on Tuesday evening (the 12th) and San Jose on Thursday evening (the 14th).

The topic is "Fun with Flex Skinning." I'll start off with an overview of the visual aspects of Flex 4 (which, by bizarre coincidence, are exactly the topics covered by Flex 4 Fun. Funny how that worked out). Then I'll walk through an extended example of skinning a simple component to show how these visual elements are used to enable easy development of very custom-looking components. I promise there will be much more code than bullet-points. Jacob will then go into more detail about skinning, including possible workflows and tools for design and development of custom components.

More information about the events can be found on the SilvaFUG site.

I hope to see you there; it should be a ~~Flex 4~~ Fun evening. Both times.

Flex 4 Fun: Only n left-- order soon!

2010-09-27T07:21:00.000-07:00

Flex 4 Fun is finally available for purchase at Amazon. First, it went from looking like this on their site (with the depressing "Temporarily out of stock" message):

to looking like this, after they were finally ready to ship it out (I figure they probably wanted to dust off the copies first, then put them on the shelves to see how nice they looked):

Then for the past few days, the amount of stock appears to continuously change. In fact, they seem to have a hard time figuring out how much stock to keep on hand. Here are some screenshots from the Amazon page over the past few days. (Not that I've visited the site that many times or anything. After all, I already have a copy, so why would I need to? That would be silly.)

Get yours soon. Who knows when they're going to run out completely?

Oh, and don't forget about that free shipping for orders over $25 thing. Amazon toyed briefly with a price just over $26. And I mean briefly. I saw it at that price just once over the past two weeks. Now it's down at $24.39 (below the $24.93 price before it was in stock, in the first image above). Apparently the book is like pork bellies or flax futures and the price fluctuates with demand. Or their clerks just get the numbers transposed occasionally. Since it's so close to the free shipping limit of $25, you'll probably want to bundle it with another relevant, yet highly affordable book, like When I am King.... I'm just saying....

Book Montage

2010-09-11T09:27:00.000-07:00

I ran across Flex 4 Fun in the wild this weekend and managed to get some photographs. I thought that it might help you to understand how you might benefit from the book. Here are some ways that others have found it useful.

First of all, the book makes a lovely objet d'art, and was being displayed alongside other great works of art when I encountered it here:

It also makes a nice decoration for some household areas, such as this aquarium:

This person apparently found the code recipes useful in the kitchen:

At 280+ pages, the book is a perfect size for some household tasks, such as leveling this piece of furniture:

A good graphics algorithm is always music to the ears:

This family apparently found the book more interesting to watch on a Friday night than television or a movie:

And of course the book looks great on a bookshelf, where it fits naturally with both the great works of literature:

and the less great works of children's literature:

But the book won't stay on that kids' shelf for long:

Even the family pet may enjoy the book - everyone wants to be an RIA developer:

And finally, this Flex developer was so excited by the book's arrival that he bought two:

As you can see, there are plenty of uses for the book. What will you do with yours?

Done? Done. It's Here.

2010-09-09T20:40:00.000-07:00

For anyone that doubted the outcome (including me), I offer the following physical proof that Flex 4 Fun exists. I received a few of the early copies today, and I took a picture of one in its natural habitat. I wanted to capture how nice the book would look on a random bookshelf. Here, you can see it surrounded by a few of my other favorite books:

This is probably as good a time as any to call out to some of the many people that supported me in this huge and questionable effort:

Romain Guy: Thanks for the ideas, the help, the beautiful pictures (including the lovely and bizarre sea dragon on the cover), the foreword, and the encouragement. I only regret that you didn't actually write the book with me instead of just making me get started on it to begin with. But I'm learning that there's not a lot of time outside of Android development to take on that kind of project...
Daniel Steinberg: Thanks for helping me get the project rolling at first and giving me some great advice and editing assistance. I'm sure it's a better book for your help.
Bill Venners (a.k.a., the publisher): Thanks for taking the book on and getting it out there in very quick order. Making it available early in online form that close to the Flex 4 release was important, albeit painful and nearly impossible.
The academy: For voting for me and sucking up to me throughout my Hollywood career, I thank you most of all. Always thank the academy.

The books are being sent out to distributors starting this week. Amazon still shows the book as "Available for pre-order", but I expect that to change next week as they start receiving their copies. Assuming they can bear to part with the little darlings.

(By the way, this blog entry is reminiscent of an earlier one. My, how the time flies when you're too dang busy working on code and writing books about it...)

Final Article: Effect Choreography in Flex 4

2010-09-01T18:43:00.000-07:00

Artima.com has posted another article from my book Flex 4 Fun. Check out Effect Choreography in Flex 4 for an introduction to using composite effects in Flex 4 to create more complex animations.

For anyone that's tired of seeing Flex content on my blog, you're in luck: this is probably the last bit of such material for the foreseeable future. This article is the eighth and last in a series of articles that were, er, borrowed from the book.

(Then again, if you're tired of my Flex content, I have no idea what you're doing reading this blog to begin with).

If, instead, you're pining for more content, might I suggest picking up Flex for Fun? The online version is done and the printed version is so close I can almost taste it (although I hope it reads better than it tastes).

If you're hoping to see some Android content, be patient. I'll get there eventually. I'm a tad swamped in actually writing SDK code and learning the platform first. I'll eventually come around to posting some geeky how-to developer content here. Because that's what this blog is all about.

Skinning Components in Flex 4

2010-08-30T07:21:00.000-07:00

Artima.com has posted another article from my book Flex 4 Fun. Check out Skinning Components in Flex 4 for an overview of the awesome new component/skinning architecture in Flex 4.

Flex 4: Get some skin in the game...

Linear Gradients in Flex 4

2010-08-24T07:09:00.000-07:00

Artima.com has posted another article from my book Flex 4 Fun. Check out Linear Gradients in Flex 4 for an overview of using linear gradients in the new graphic primitives in Flex 4.

Flex 4 Fun: Amazon Existence Proof

2010-08-17T17:52:00.000-07:00

There's a basic philosophical question that is fundamental to so many situations in life:

If a tree falls in the forest and nobody is there to hear it, does it make a sound?
If you tell a joke and nobody hears it, is it funny?
If your children respect you, are they really teenagers?

The equivalent in the book world is:

If your book isn't sold on Amazon.com, has it really been published?

I'm happy to say that Flex 4 Fun now passes this last existence proof; the book is available for pre-order on Amazon.com. The book is at the printers now, supposedly available in hard-copy in mid-September. At Amazon's discount of 34% off the list price of $36, it seems like a pretty good deal to me.

Notice that the Amazon price of $24.39 is just shy of the $25 you'll need to reach for free shipping. Which is probably just the excuse you were looking for to finally pick up When I Am King....

By the way, if any reader is so inspired, it would be great if you posted a review on Amazon (and elsewhere). I know how I feel about my books, but I'm slightly more subjective than you might be. Besides, I already used up my quota of words in the books themselves. It's time for me to shut up and let someone else talk. Briefly.

Flex 4 Fun: Final Post(PrePrint)

2010-08-15T09:23:00.000-07:00

As promised, the eBook of Flex 4 Fun has been updated to the final version of the text, which was uploaded for printing last week. So if you bought the eBook already, a fresh download will give you the final bits.

If you didn't buy the eBook version already, what are you waiting for? Oh, you want the hardcopy version so that you can enjoy its graphical goodness in the way that Gutenberg intended? Well, you'll still have to wait a bit for that. Even now, armies of typesetters are setting up printing presses to make a run at printing the tome. Look for the book in bookstores and online in mid-September.

Fills in Flex 4: It's What's on the Inside that Counts

2010-08-12T18:46:00.000-07:00

Artima.com has posted another article from my book Flex 4 Fun. Check out Fills in Flex 4 for an overview of fills for the new graphic primitives in Flex 4.

printf(Flex 4 Fun);

2010-08-10T17:53:00.000-07:00

If you listen closely, you can probably hear it; the slight rustling of hundreds of pages, the chuckles of the shop foreman as he reads the section headings and subtle footnote humor, the collective sigh of the machinery as it mass-produces page after page of graphics programming wisdom.

After months of writing, followed by many more months of editing and revising (it's still unbelievable to me, and more than a little depressing, to know how much you can continue working on your own text and still find things to improve), Flex 4 Fun has gone to print. It's a bit like being put out to stud, except that books are self-reproducing and there's little chance that one of the offspring would win the Triple Crown.

If all goes well at the printer, there should be hardcopy available in mid-September, right before the JavaOne conference, and in plenty of time for your holiday programming-book-giving needs. Just imagine what your mother will say when she opens that completely unexpected gift.

For anyone that bought, or is thinking about buying, the online version, the PrePrint will be updated soon with this version of the text. I'll post something here when that happens.

Stroke of Genius: Drawing Lines in Flex 4

2010-08-02T20:42:00.001-07:00

Artima.com has posted another article from my book Flex 4 Fun. Check out Stroke of Genius: Drawing Lines in Flex 4 for an overview of the stroke object, used for defining the properties of lines and outlines for the new graphic primitives in Flex 4.

Varargh!

2010-08-01T00:09:00.000-07:00

Varargs, a feature of the C language since roughly the late Victorian era, was introduced into the Java language in JDK1.5.

I love varargs. They allow me to declare a function flexibly with the ability to take zero, one, or several parameters. This ability is useful when the user may have an unpredictable number of things to add to some data structure, eliminating the need for them to create some collection to pass the parameters into your function. It makes for a nice API. And I'm all about nice API. (And donuts).

But sometimes varargs don’t work so well. I suppose it’s because I expect too much of them. Like when you meet someone that you really like, so you call them every few minutes or so, then hang around outside their apartment and workplace and friends' houses until they get a restraining order on you. It’s not that they weren’t really cool and worth getting to know, but that your needs weren't necessarily compatible.

I was working recently on some API improvements for a library I'm writing. I had some constructors that users would call with exactly two values of different types, like this:

  public MyObject(int value1, int value2) {}

  public MyObject(float value1, float value2) {}

This worked well, vectoring the code path off in different directions depending on the types of the values that the user passed in.

But sometimes, the users might have just one value to pass in. Or three. Or nineteen. Rather than having variations for all of these situations, multiplied by the number of types that I wanted to support, I wanted something simpler that took variable numbers of parameters.

So I rewrote my API with varargs. It looked something like this:

  public MyObject(int... values) {}

  public MyObject(float... values) {}

This new version was awesome. Now the user could call my functions with the appropriate values and it would do the right thing, no matter what the types were or how many values they passed in. I compiled the code for the library, wrote my test code:

MyObject obj1 = new MyObject(1f);
MyObject obj2 = new MyObject(1);

and

FAIL

I got a compiler error. Specifically, Eclipse gave me the following completely unhelpful message for the test code: “The constructor MyObject(float[]) is ambiguous” for the second line of that test code (MyObject obj2 = new MyObject(1)).

Never mind the fact that the error was telling me that the constructor takes an array instead of varargs; I know that varargs is syntactic sugar for a construct that gets turned into an array. The real problem was that my code wouldn’t compile.

Apparently, varargs cannot handle the method overloading situation and make the correct type inference and just fails to compile. Although the compiler can make a good decision about the correctness of a constructor with float vs. int, it can’t make that decision for float[] vs int[]. So it bails.

Meanwhile, I discovered another nuance of using varags; you can’t pass them around between constructors willy-nilly. One of the things I wanted to do in my rewrite was to record the type that the user wanted to use and send it to a private constructor like this:

private MyObject(Class valueType, Object... values) {}

Meanwhile, I wrote a single type-specific constructor (to avoid the previous compiler error for now) that called this more generic constructor:

public MyObject(float... values) {
 this(float.class, values);
}

Again, my code compiled fine. And when I eliminated one of the float/int varargs combinations, I was able to write a test that successfully called my varargs constructor:

MyObject blah = new MyObject(1f, 2f, 3f);

This code called the private Object-based constructor above. But then I encountered bugs at runtime where the number of values was not what I was expected. In particular, the number of values being stored by the private constructor was 1, not 3.

But, but, but, ...

It turns out that the call to the private constructor turned a perfectly fine threesome of parameters of type float into a single parameter of type float[]. That is, my varargs had just turned into the array that it was pretending it wasn't when I first wrote the code.

At this point in an article, the climax as it were, I would typically say, “And here’s how you work around these issues.” I would love to do that, because I like neat tricks and workarounds. And I’d love to actually have that workaround in my code.

Unfortunately, I have no such workaround. I frankly don’t know how to make this work in any reasonable way. You can be more clear with the compiler, by telling it things like new MyObject(new float[](1f, 2f, 3f}) to get around the compiler error. And maybe you even like the way that that looks for an API. If you are sadistic. Or hallucinating. You could also find a different way to store the individual parameters in the varargs rather than having the VM think that it’s just a single array item. But at this point, my original attempt at a more attractive API and flexible implementation was looking like a bad prototype or an industrial accident.

So I did the only thing that any responsible captain would do after his vessel had hit an iceberg and was going down with all hands: abandon ship on the first lifeboat.

For my situation, I could limit the flexibility to just one or two parameters for the main case, and then have a completely different constructor with a custom data structure for the more flexible, and less common, case of having several parameters. So I walked away from varargs completely for my code with nary a look back. The second problem of calling the private constructor with varags then magically disappeared because I no longer had to pass the varargs around.

For other situations that may benefit from varags, but may run afoul of method overloading, I can only recommend that you know and understand the limitations of the nifty varargs feature. I searched around on the web for answers to my compiler problem and didn’t find anything immediately, so I thought it might be worth noting for posterity. Or at least for the pleasure of venting.

Varargs: great when they work. But when then don’t? Nobody knows. Maybe that's why the syntax uses ellipses. It's like a little language joke that says, "Sure, use varargs, Let's see what happens..."

State Transitions in Flex 4 for Intuitive UIs

2010-07-26T06:33:00.000-07:00

Artima.com has posted another article from my book Flex 4 Fun. Check out State Transitions in Flex 4 for Intuitive UIs for an overview of using transitions to animate changes between states in Flex 4.

Yes We Candroid

2010-07-22T09:00:00.000-07:00

In case anyone's wondering when the next Flex CodeDependent video/demo is coming, the answer is... probably not anytime soon.

After a fun and productive Flex 4 release, I decided to get small; the time had come for me to do some mobile development. In particular, I wanted to work on Android. So a few weeks ago, I joined Google to work on the Android SDK. For starters, I'm working on animation support (surprise, surprise), but I'm sure I'll end up tinkering throughout the UI toolkit and graphics layers. You know, the fun stuff.

By the way, if you want to know more about this personal career decision, I'll try to answer all of your possible questions here, in no particular order:

Flex is awesome, Flex 4 is even better. Honestly, I wouldn't have wasted the last year's worth of weekends and evenings writing Flex 4 Fun if I wasn't totally jazzed about Flex 4 as a great client platform.
Yes, but only on Tuesdays.
The coffee is better.
Of course the comedy at chetchat.blogspot.com will continue! I'm not dead yet!
No
Maybe, eventually
Blue
Dental floss

Adobe's doing great things with Flash on Android and Flex on Android. But that's not what I'm doing here at Google, so I won't be posting much new Flex/Flash content here (although I still plan on doing some book-related articles and conference/user-group presentations). It's that finite-time thing - I'm going to be pretty busy just working on what I need to do for Android. I don't know if you've heard, but there's a lot of these devices out there these days; that's a lot of users that need even more awesome UI toolkit software...

For anyone interested in Android development, or in UI/graphics/animation development in general, stay tuned to this blog: I plan to post content here about all of that kind of stuff.

Flex 4 Fun: Real Soon Now

2010-07-21T06:22:00.000-07:00

How credible would a software book be that didn't slip the schedule? That would be like sugarless dessert, or nonfat bacon, or an effective politician; it's just not believable.

So in keeping with the tradition of all software since 1954 (the original launch date of Windows Vista), Flex 4 Fun is hereby slipping its schedule.

But not by much.

The original goal was to have the hardcopy printed and available in early August. Failing the invention of a time machine, that's not going to happen. However, the book is actually done, at least from my perspective. In fact, the content that's been in the PrePrint copy for weeks is nearly final itself. The editing phase found many little things to clean up (it always amazes me how many times I can edit my writing and still find errors. It's as if I'm human) and resulted in some amount of reorganization. But most of the recent changes have just been about finalizing the layout in order to get it to the printer.

I don't have a final date yet, but I'm thinking it's sometime in September, just a few weeks after it's sent to the printer... which the publisher assures me is just about to happen.

In the meantime, check it out online or do like I do; wait impatiently and completely ineffectively.

Graphics in Flex 3 and Flex 4

2010-07-07T05:30:00.000-07:00

Artima.com has posted another article from my book Flex 4 Fun. Check out Graphics in Flex 3 and Flex 4 for a comparison of drawing shapes in Flex 3 code versus using the new graphics classes and tags in Flex 4.

Video: Image Zoom Effect in Flex 4

2010-06-25T06:01:00.000-07:00

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

This episode shows a technique for zooming in on a particular area of a thumbnail image, transitioning to a higher-resolution image along the way. A friend had asked about ideas for doing this, and I thought the result might be generally useful or interesting, so here it is. I particularly like how you can zoom in on her enigmatic smile.

2010-05-20T20:31:00.000-07:00

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

This episode shows how to use the new states syntax and transitions in Flex 4.

This show is based on one of the 65+ demo applications that I wrote for Flex 4 Fun, a book about the graphics and animation side of Flex 4. If you want to see more about the book, check out the book site, the page where you can purchase the PrePrint version, or the apps site where all of the demos are hosted.

Here's the video:

Here is the first demo application:

And here is the second demo:

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: Flex 4 Path to Enlightenment

2010-05-14T16:35:00.000-07:00

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

This episode shows how to create a simple drawing application using the new Path object in Flex 4.

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: Upon Further Reflection

2010-05-07T07:38:00.000-07:00

Creating a Reflection Container in Flex 4, Part II, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is the sequel to the previous one, in which I showed how to create a simple container for an image and it's reflection ... that didn't look that great. The sequel shows how to get a better, more realistic reflection effect by using blur, masking, and alpha gradients. My favorite part of the technique is something that I completely forgot to mention in the show: the code is soooo much simpler than code I used to write to get this effect prior to Flex 4. Check out this earlier show on a reflection effect using ActionScript and Flex 3 components. Now look at the few lines of code in the Reflexion container to get the same result. Nice, eh?

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: Reflection Container in Flex 4, Part 1

2010-04-29T19:51:00.000-07:00

Creating a Reflection Container in Flex 4, Part 1, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is based on one of the 65+ demo applications that I wrote for Flex 4 Fun, a book about the graphics and animation side of Flex 4. You can see a book sitting next to me on the table at the start of the video. I had planned to show it in the video, but that segment got cut. I suppose the producer figured that since all I was showing was a copy of When I am King... with a printout of the Flex 4 Fun cover taped around it (since Flex 4 Fun isn't actually available in hardcover until this Summer), it really wasn't a crucial part of the show. Anyway, if you want to see more about the book, check out the book site, the page where you can purchase the PrePrint version, or the apps site where all of the demos are hosted.

This episode shows how to create a simple container in Flex 4 that holds both a BitmapImage and that image's reflection. The actual reflection we end up with, which is just a translucent/mirrored version of the original, could be improved upon... which is the point of the next show. (Oooh, I just love a good cliffhanger!)

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.

States and Components in Flex 4

2010-04-26T07:34:00.000-07:00

Artima.com has posted another article/demo from my book Flex 4 Fun. Check out States and Components in Flex 4 to see an example of the simple new state syntax in Flex 4 for including and excluding objects in different states of an application.

Bending Pixels with Flex 4

2010-04-13T13:08:00.000-07:00

Artima.com has posted one of the demos from my book Flex 4 Fun in an article on their site. Check out Bend your Pixels with Flex 4 to see a simple example of using a Pixel Bender shader to get a grayscaling effect on an image.

Video: Event Performance in Flex

2010-04-07T11:59:00.000-07:00

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

This episode covers the use of the updateAfterEvent() function to get better rendering performance for time-sensitve operations like mouse-interaction visuals and animations.

By default, changes to the graphics that the Flash player displays happen at the frame rate of the player (by default, 24 frames per second). This frame rate, which updates the screen every ~42 milliseconds, is fine for most visual changes on the screen. But when you need motion to be smoother, like in some animations, or need the visuals to respond quickly to user interactions, like changes in component state based on mouse movement or presses, then 24 fps may not cut it. In this case, you need to know about the updateAfterEvent() function found on some event 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.

Flex 4 Fun: Available in PrePrint

2010-04-05T13:14:00.000-07:00

Chet's handy AcrtionScript algorithm for writing a programming book:

public function writeBook():FinishedManuscript
{
 var manuscript = new FinishedManuscript();
 writeDemos(manuscript);
 writeText(manuscript);
 while (true)
 {
    edit(manuscript);
    revise(manuscript);
 }
 // TODO: Next line never executes
 return manuscript;
}

Finally, after months of writing, editing, revising, coding, explaining, revising, deliberating, cogitating, revising, formatting, reformatting, revising, snapshotting, describing, captioning, revising, and dying a little inside, my book Flex 4 Fun is finished. Almost. It just needs a little more editing and revising.

The book is content complete: all of the chapters are done, all of the demo applications compile and run, all of the text is correct as far as I know, and there are no known typos.The book could still benefit from one more review cycle, but rather than wait for that plus the printing delay until it would actually be available on bookshelves (usually 2-3 months after a book is completely complete), I wanted to push out this early version close to last month's Flex 4 release.

Flex 4 Fun is different than other Flex, or Flex 4, books I've seen; it focuses on the graphics and animation side of the SDK. I figured that's what I like to play with on Flex, it's what I know best about the platform, and it deserved a book that went deeper into these topics than the other Flex books. Sure, an overview book is good to have. Yes, you should understand how to connect Flex to a back end. Alright, you probably want to understand how to architect large Flex applications. But when you get around to creating better user experiences for that Flex client, you'll want to know more about graphics, states, skinning, and animation. And hopefully this book and its 65+ examples can help teach you how that stuff works.

Here's the books Contents page:

1. Introduction 13 2. Graphics 18 3. Filters: Easy Image Processing 60 4. States 96 5. Transitions 105 6. Skinning Components 119 7. Animation 138 8. The Animation Class 152 9. Flex Effects: The Basics 184 10. Effect Choreography 209 11. Advanced Flex Effects 230 12. Go Have Fun 258

The book is available in PrePrint form on artima.com. Go check it out and have some fun!

Flex 4 Fun: Coming Soon. Really Soon.

2010-04-02T11:14:00.001-07:00

Here's another teaser for my Flex 4 book, coming soon from Artima Press:

(nifty cover picture by Romain Guy, Android hacker and photographer extraordinaire).

As you might expect in a book by me, Flex 4 Fun dives into the graphical and animation side of Flex 4. Lots of applications (>65) that demonstrate the technologies and techniques are covered in depth in the book and will be available on the book's website in binary and source form. Plenty of stuff to play with for those wanting to learn more about the "fun" side of Flex.

The book should be coming out in PrePrint form any day now. Artima's PrePrint is like a beta release of the book. In this case, the book is complete and has gone through a thorough editing/revision cycle (for some chapters, two or three times). But it still needs a technical review and feedback from careful readers like you. And you. And you. But in the interest of getting it out in your hands and minds close to when Flex 4 was released, we're releasing this early version while I work on finalizing the content in parallel.

Video: Using Flexy in a Flash Project

2010-04-02T08:15:00.001-07:00

Using Libraries in Flash Pro, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This espisode is the stunning conclusion to the previous nail-biting cliff-hanger episode, Creating a Reusable Animation Library, in which we saw how to use Flash Pro to create Flexy, a small and Flex-free version of the timing engine underlying Flex effects. In this episode, we see how to use Flash Pro to link against Flexy and use it to create a simple ActionScript-based animation, writing code that looks very close to what we would write in Flex 4 for doing the same animation.

Once again, my thanks go 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.

I should probably spend more time and words on the Flexy library itself, but that will have to be for another day and another blog entry. But check out the previous episode for more information, and use your vast knowledge about the Flex Animation class and the related classes that you've accumulated so far from my blog and videos. It all carries over to Flexy, because Flexy is basically a subset of what I've been talking about with Flex 4 effects. It's just the timing engine part of effects (the 'Tween' engine, in Flash parlance), plus a helper class to assist in setting the animated properties on the target objects.

But for now, I'll just stick with the content of this show.

Here's the video:

Here is the demo application:

Here is the demo code. This is the Flash Pro project (FlexyTest.fla), which links to the Flexy library itself (Flexy.swc).

Here's where you can find CodeDependent on iTunes.

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

Enjoy.

Video: Animation Rules on Parleys.com

2010-04-01T10:24:00.000-07:00

Romain Guy and I gave a presentation last year at Devoxx (an excellent developer conference in Antwerp, Belgium (a city with mildly miserable weather at that time of year)) called Animation Rules! A recording of this session was just posted on parleys.com. I've embedded it here for your viewing pleasure:

You could also check it out on the Parleys site directly; parleys is an excellent Flex application, and has a desktop AIR client for offline viewing of the various sessions.

The Devoxx conference posts the session recordings one by one throughout the year. But you can also subscribe to parleys to get all of the sessions immediately. There are many great sessions at the conference, and the fee is quite low (49 Euros for 6 months), so consider becoming a subscriber to get it all.

Enjoy...

Video: FlashCamp Boston Session Videos Posted

2010-03-26T08:26:00.000-07:00

An event didn't really happen unless videos of it are posted to the web. So it must be the case that FlashCamp Boston really happened, because the videos are live.

All of the sessions from last week's excellent Flex-oriented event are now on Adobe TV at http://tv.adobe.com/show/flash-camp-boston/. These sessions include:

... and much, much more.

Oh, and I gave a talk on (what else?) Flex 4 effects, which I'll embed here because that's what I do on my blog:

Enjoy...

Coming Soon: My Flex 4 Book

2010-03-22T20:04:00.000-07:00

Now that Flex 4 is released (yay!), it seems like a good time to announce that I've been writing a book about the graphics and animation side of Flex 4 (apparently I didn't learn my lesson the first time around, or I actually enjoy spending all of my spare time writing about what I spend my non-spare time developing). It should be a fun read with lots of eye candy demos with source code available on the book's website.

I'll have more details available in the next couple of days, and I hope to have the beta version of the book ready for online purchase within the week. (I actually hoped to have the real paper version available in stores this week instead. But that dream died a few months ago when I blew right past all of my deadlines. It's tough to finish a book about a product when you really need to finish the product first. So instead, I'll have a nearly-finished version of the book available online now, followed by the final version available online and in print hopefully sometime this summer).

Video: Creating a Reusable Animation Library

2010-03-12T07:45:00.000-08:00

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

2010-03-08T15:10:00.000-08:00

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

2010-02-26T19:50:00.000-08:00

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?)

2010-02-05T13:54:00.000-08:00

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!)

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: Auto-Reversing Transitions in Flex 4

2010-01-29T08:07:00.000-08:00

First, this new flash (or would that be Flash news?):

CodeDependent now has a channel on YouTube!

Yes, finally, for all of those bored people surfing the web looking for funny videos, there is now a channel that talks exclusively about animation and graphics programming. Oh, my kids will be so happy.

Now, back to our regular programming...

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

This show is about the new autoReverse property in Flex 4 transitions. By default, Flex transitions stop any currently-running transition before running a new transition. So if you're currently animated from stateA to stateB and you trigger a change back to stateA, Flex will stop the A->B transition and then start the B->A transition from the beginning. This sometimes causing jarring behavior, where the visuals may pop to the end of the previous transition, or sometimes even worse artifacts. Flex 4 offers a new, simple property, autoReverse, which lets you tell Flex to stop the current transition and start the next one from that same point in time. In the A->B example above, if you trigger a change back to stateA when the A->B transition is halfway through, then Flex will stop the A->B transition and start the B->A transition from that midway point.

This feature is a small step toward more general, useful interruption and reversing behavior that I'd like to see in transitions eventually. There are some important constraints to this behavior, such as having to actually define that reverse transition (we don't create it for you) and making sure that your transition effects are true reverses of each other (which can include some tricks like using a Pause effect on the reverse transition to account for a startDelay in the forward transition). It's also important to note (since this just came up in my work yesterday from a use case from the tools team) that using assymetric easing (which is not the defaul) can make this tricky. So this feature is not necessarily for all situations, but it is useful for some common cases and can make Flex transitions an even smoother and cooler UI experience than they are already.

Here's the video:

Here are the demo applications:

and

2009-12-21T08:18:00.000-08:00

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.

Video: Animating a TextArea

2009-12-18T12:58:00.000-08:00

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.

Video: Programmatic Scrolling Animation

2009-12-11T15:31:00.000-08:00

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.

Video: Drunk On Software: Devoxx Edition

2009-12-07T18:50:00.000-08:00

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/

Video: Measuring Frame Rate Performance

2009-12-03T18:47:00.000-08:00

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.

Prose and Conferences: Devoxx 2009

2009-12-02T08:04:00.000-08:00

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.]

Video: Transitions and Easing in Flex

2009-11-24T09:57:00.000-08:00

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.

Video: Interactive GUI Components

2009-11-12T17:43:00.000-08:00

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.

Drunken MAX Interviews

2009-11-06T10:46:00.000-08:00

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

2009-11-06T07:32:00.000-08:00

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.

Just for Show

2009-11-04T13:02:00.000-08:00

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.

Video: Resizing AIR Windows with Flex 4 Effects

2009-10-30T12:16:00.000-07:00

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.

Video: Custom Type Interpolation in Flex 4 Effects

2009-10-26T10:58:00.000-07:00

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:

2009-10-13T08:25:00.000-07:00

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.

Video: Effects in Flex 4 (MAX Session)

2009-10-08T18:11:00.000-07:00

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.

MAX Online

2009-09-30T13:54:00.000-07:00

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.

Video: 3D Effects in Flex 4

2009-09-22T16:45:00.000-07:00

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.

Video: Shader Transitions in Flex 4

2009-09-18T08:35:00.000-07:00

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.

Video: Pixel Bender and Flex 4 Effects

2009-09-04T11:33:00.000-07:00

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.

Scoping Strategies

2009-08-28T16:28:00.000-07:00

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

Video: AnimateFilter in Flex 4

2009-08-27T14:10:00.000-07:00

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.

Pros and Cons

2009-08-25T14:47:00.000-07:00

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!

Video: Transform Effects in Flex 4

2009-08-20T15:50:00.000-07:00

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.

Video: Fade Effect in Flex 4

2009-08-13T15:37:00.000-07:00

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.

Video: AnimateColor in Flex 4

2009-08-06T16:23:00.000-07:00

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.

Video: Animate Effect in Flex 4

2009-07-30T15:40:00.000-07:00

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.

iTunes me

2009-07-28T13:47:00.000-07:00

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?)