Animated Picture Slider :: Pre-Bindows 3.0

Recently, Bindows released their 3.0 Beta. This new flavor of Bindows comes with a lot of good things including a animation library that allows you to move, resize and fade any BiComponent.

It's pretty powerful and I'll write about that later in the weeks to come. For now, I'll cook up a little practical use of animation with a picture slider control built from the trusty Bindows 2.5 library.

The picture slider is an implementation of Yahoo!'s "Slide Transition" UI Design Pattern. It's also a knockoff of a slider widget in Yahoo! Games. Our control looks like this --



We'll get photos using the Flickr API (this is a RESTful API and returns XML) and get photos from one of my favorite photographers - Nikographer [Jon]. Jon takes great pictures.

Using the API, we'll load only nine and display only three images at a time. We'll also have an indicator to let people know the context of where they are when viewing the slides. These are the three small dots located at the upper right near the left and right buttons.

For navigation, we have the buttons. Clicking on one brings into the view the next three. The movement of the "next three" is animated so the slides actually move to position. They don't just appear and disappear.

In fact, things in real life seldom disappear and appear. Things transition into place.

When we mouseover the photo, a larger version will display to the right of the picture slider (you can't really see it from the small example above because it's cropped, but you'll see it if you go here). We'll also make the mouseover photo slightly opaque so that you know you're "doing something."

Likewise, when we mouseout, the large photo disappears.

With the general description out of the way, we'll focus our discussion on how we animate the slide control. We're not going to talk about how we construct the control or how we use the Flickr API. I'll provide you with the source and you can peruse that at your leisure. Like all Bindows applications, this one is pretty straightforward.

So, let's talk about the animation. First, we're not using any vector graphics (SVG or VML). We're also not using the canvas tag. We're just going to put images and their titles into a container and then add them to a grid panel. Then, we'll move them by changing their left position.

In Bindows-speak, this is taking a BiImage (a photo from Nikographer), its title (BiLabel) and putting them into a BiComponent. We'll add the BiComponent into a BiGridPanel (creatively called pictureSliderPanel).

When we're done, the BiGridPanel will contain nine BiComponents with photos and titles.

Here's how we setup the grid panel --



sliderWindow is the display window. It'll be wide enough to display only three images and the spaces between them.

Here's how we add slides to the grid panel. Once the XML is aysnchronously loaded from Flickr using BiXmlLoader, we'll call the addSlide method --



To "animate", we'll use the power of absolute positioning to move the grid panel to the left or right simply by changing the left CSS property when we press on the left or right button.



The setLeft() method abstracts this for us so we don't have to worry about calling setStyleProperty().

The sliding is actually done by using a timer. The timer goes to sleep and then wakes up and when it's awake, it'll update the left property. In the example above, we're decrementing so, we're moving left.

We'll stop the slide, when we reach a certain count number. This is what the constant SLIDE_AMOUNT is for. When that occurs, we stop the timer, reset the counter and get out of the loop.

About the loop. The loop is used to speed up the animation. The higher that number is, the faster the slide.

That's it.

You can see the example here. You can get the source here.

Feel free to use, modify and study it. If you do use it, let them know where you got it from.

Enjoy!