Thursday, November 12, 2009

Video: Interactive GUI Components

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

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

Here's the video:

Here is the demo application:

And here is the source code.

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

Enjoy.

6 comments:

Anonymous said...

Hello Chet.

What is the purpose of setting 'autoReverse' property when we explicitly define the transitions in both directions: from 'up' to 'over' and from 'over' to 'up'?

thanks
Igor Borodin

Chet Haase said...

@Igor: autoReverse is there to tell the transition to stop and turn around in place if the reverse transition is requested while the forward one is running. A complete version of 'autoReverse' (which I hoped to get to in Flex 4, but did not - maybe next time) would actually automatically create/run a reverse transition for you, which would mean you would only need to declare one direction and we could infer the other. But for now, autoReverse just means "stop and turn around in place". The default behavior is that the previous transition snaps to the end and the reversing transition starts from the beginning - appropriate for some situations, but sometimes it's better to reverse in place.

Peter said...

Hi Chet,

Really liked your speak @ Devoxx regarding this matter. Perhaps you should also find an appropriate way to present it when showing clickable actions on a mobile device?

Regards,
Peter

VeggieFoodie said...

Hi Chet,

I was present at your last presentation to Silvafug crowd at Adobe's San Jose office. The presentation inspired me to incorporate effects in the web application I'm building using Flex 4.

I found your examples in the presentation very useful (non-linear move, etc). Could you post those examples with source on your blog?

Thanks,

Dilip

Chet Haase said...

@Dilip: I'm not sure which app(s) you're talking about specifically, but many of the examples I showed are already on my blog. For example, the example with the drawing canvas and the effects that moved the control panel to the left and right is posted here:
http://graphics-geek.blogspot.com/2009/11/video-transitions-and-easing-in-flex.html

Just poke through my blog and I think you'll find a lot of what you want.

If you're looking for an example that I haven't posted, let me know which one. Chances are, if I haven't done a video on it yet, I will soon. But let me know in case one fell through the cracks.

VeggieFoodie said...

Hi Chet,

The session I'm referring to is where you had drawn parallel between use of animation and effects in cartoon movies and rich applications. For each of the points, you had a few examples to bring out your message and these apps used Flex 4 effects and transition APIs.

In any case, I was trying to implement a moving slider to choose video thumbnail. After a couple of different approaches, I managed to implement it with a combination of Move on HGroup with thumbnails and Fade out and in on Label with current movie title.

Thanks,

Dilip