Skip to main content

Posts

Showing posts with the label effects

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

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

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

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

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

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

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

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

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.