Devoxx: Then and Now

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.

Video: Reflections on Android

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

Final Article: Effect Choreography in Flex 4

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.

Video: Image Zoom Effect in Flex 4

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.

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: Animating Filters in Flex 4, Part II

Animating Filters in Flex 4, Part II, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This episode is the sequel and stunning conclusion to the previous one, Part I, in which we saw how to use, and not use, the AnimateFilter effect for animating filter properties in Flex 4. This time we see how to properly animate properties of filters which persist on objects when the animation ends.

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: Animating Filters in Flex 4, Part I

Animating Filters in Flex 4, Part 1, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This episode shows how to use the AnimateFilter effect in Flex 4 to achieve certain effects like animating a blur. It also shows how the effect is completely inappropriate for some situations, which is a teaser for the next episode.

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: Easier, Better Transitions

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

This episode shows how to use transitions more effectively by avoiding hard-coding the animation values in the effects, and letting the effects pick up the values from the states automatically, instead..

Here's the video:

Here is the demo application (in its final form):

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 States and Transitions

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: FlashCamp Boston Session Videos Posted

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:

• a keynote on Flex 4 by Deepa Subramaniam
• FlashBuilder 4 tips by Rob Brambley,
• a skinning talk by Ryan Frishberg,
• a custom layout talk by layout king Evtim Georgiev
• a FlashBuilder 4 overview by Heidi Williams
• a talk on Catalyst by Doug Winnie

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

Video: Simple Container Effects: The Sequel!

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

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

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

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

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

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

Enjoy.

Video: Simple Container Effects, Part 1

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

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

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

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

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

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

Enjoy.

Video: Auto-Reversing Transitions in Flex 4

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

And here is the source code for the first and second demos.

Here's where you can find CodeDependent on iTunes.

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

Enjoy.

Video: Animating Gradients for 3D Look and Feel

Animating Button State Changes, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is a continuation of the previous CodeDependent episode, Animating Button State Changes, in which we saw how to animate some of the properties in a button's skin as it the button changed between states. In this espisode, we see how we might animate the look of a more graphical button as the user pushes on it, animating properties of gradients which give the object a 3D-ish look.

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: Animating Button State Changes

Animating Button State Changes, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is a continuation of the previous CodeDependent episode, in which we saw how differences in a component's state can be communicated to the user through visual changes in that state. In this espisode, we see how we can animate some of those visual changes by hacking some simple transitions into the standard Flex 4 button skin. This is a tutorial not only on how to add some simple animations for color and visibility changes, but also how to customize standard Flex components by editing the skin markup.

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

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: Transitions and Easing in Flex

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

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

Here's the video:

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

And here is the source code.

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

Enjoy.

Video: Interactive GUI Components

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

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

Here's the video:

Here is the demo application:

And here is the source code.

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

Enjoy.

Video: Resizing AIR Windows with Flex 4 Effects

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

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

Here's the video:

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

And here is the source code.

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

Enjoy.

Video: Custom Type Interpolation in Flex 4 Effects

Custom Type Interpolation in Flex 4 Effects, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see an introduction to the new system of type interpolation in Flex 4 effects. The ability to animate properties of arbitrary type is one of the key new features in the Flex 4 effects system. Previously, in Flex 3, the effects system dealt only with numbers. It was great at animating any properties of components at all ... as long as those properties were numeric. In particular, it knew how to calculate a numeric value during animations, given start and end values. Calculating these values is important, of course, because animations are specified with start and end values only (or, in the case of the new keyframes in Flex 4 effects, a series of intermediate values), and any other value that the property takes on during the animation must be calculated as a product of these start/end values plus the elapsed fraction of the animation.

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

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

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

Here's the video:

Here is the demo application:

And here is the source code.

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

Enjoy.

Video: Flex 3 Easing with Flex 4 Effects

Flex 3 Easing with Flex 4 Effects, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is basically a recap of an earlier blog article I wrote, Penner for your Thoughts (named for the author of the Flex 3 easing functions, Robert Penner), except this time it's in video form (for the reading-impaired). The topic is about using the old easing functions in Flex 3 through the new IEaser interface that the Flex 4 effects require. See the article for more details about the whys and hows of this rather neat hack.

Meanwhile, here's the video:

Here is the demo application:

And here is the source code. Be sure to check out the blog article for more details on how the code works.

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

Enjoy.