Gallery Slider With Flex

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 ;)

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

Adjusting image colors in Flex

Recently I was working on some Macadamian project and got a task of processing images. Actually I had to load different images, and as some of them were the same, just with different colors, I decided to try adjusting image colors programmatically. There are several ways in Flash Player API to do this, but in all cases what you are basically doing it’s changing the red, green and blue values of the image. The two main ways to change the RGB values is to either use a ColorMatrixFilter or ColorTransform. I’ll introduce in nutshell the difference between those two.

ColorTransform

ColorTransform adjusts the values of the red, green and blue channels of a display object. The color transform is applied differently while manipulating a bitmap and display object. For a display object it is a property of the transform object. For bitmaps it is passed as a parameter to the colorTransform method. To adjust the color you either create a new instance of ColorTransform or get a reference to an existing one and change the red, green and blue values and/or offsets. It’s possible to adjust also color brightness.

ColorMatrixFilter

The ColorMatrix filter uses a 4 x 5 matrix for modifying color values. Unlike the ColorTransform, which universally adjusts the red, green and blue channels, the ColorMatrixFilter changes each pixel. The speed of the ColorMatrixFilter depends on the size of image (number of pixels).

Now I'll explain shortly how the application works. It's quite simple. When user chooses a color, we retrieve from event's uint color property the red, green and blue values' bits apparently, using bitwise operators:

_R = event.color >> 16 & 0xFF;
_G = event.color >> 8 & 0xFF;
_B = event.color & 0xFF;

After we got the color channels, we need to create a color filter matrix. Don't forget that matrix elements should be in 0 to 1 range. As we have _R, _G, _B values that can have values 0-255, I've devided theim to 255 in order I can get a number from 0-1.


It's left only to construct the filter matrix. Here's the one I needed:

var matrix:Array = new Array();
matrix = matrix.concat([_R, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, _G, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, _B, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha

Note that for modifying the way color channels are transformed, you need just to change the matrix' _R, _G, _B values' places.

For example if you want to have in the picture only the light/dark tones of chosen color, use this matrix ;)

var matrix:Array = new Array();
matrix = matrix.concat([_R, 0, 0, 0, 0]); // red
matrix = matrix.concat([_G, 0, 0, 0, 0]); // green
matrix = matrix.concat([_B, 0, 0, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha

The very last step - applying the filter matrix to image:

var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
var filters:Array = new Array();
filters.push(filter);
target.filters = filters;

You can find the source code here.