Maybe my search keywords were not so persuasive =) but I couldn't find any source of slider written in Flex. The only versions of movable sliders I could find were some HorizontalLists, that could step over the items, but not with a scroll animation. What I wanted was to make a small photo gallery that would react on browser window resizing and become scrollable. The second thing was to get a smooth scrolling animation on slider.
So here's the trick: I placed a HBox that contains all needed items - photos, in Canvas component with precise width and set the horizontalScrollPolicy to 'off'. For scrolling the photos I decided to change the horizontalScrollPosition and for smooth animation I added a tween effect, that will change the position values and update it each time value is modified.
This is the part of code where I use Tween:
new Tween(this, positionStart, positionEnd, 5000, 10, updateTween, endTween);
where I take the 'positionStart' and 'positionEnd' as 'to' and 'from' values of horizontal scroll.
The visual work is done by updateTween handler: it's changing the position of photo container by taking the current value and rounding it.
canvas.horizontalScrollPosition = Math.round(Number(value));
Each time left or right buttons are pressed, I take the current position as a start point and the 0 or maxHorizontalScrollPosition (depending on scroll direction) as end point, and add the tween for iterating through those values, modifying the scroll position.
That's all about scroll trick! Simple, nice and useful ;)
That's all about scroll trick! Simple, nice and useful ;)
Some additional and AESTHETIC info
When using the tween, you can define an easingFunction, which describes how to perform the motion. You can find all function classes here. But I found another link that I was really delighted with (you can see effects of all easingFunctions, wohoo!), thanks to the author.
Seems I've nothing to add anymore.
No, I have, don't forget to resize the browser window.Enjoy!
Demo
