Thursday, May 05, 2011

Flex/AIR Mobile Color Picker

I have been writing a new application the last few days and ran into an issue.  The old mx color picker has no counterpart in Flex Mobile Development.  After some quick research, I decided to make a view that can be reused by others.

The source code can be downloaded from http://www.22ndcenturyofficial.com/ForBlogDoNotDelete/ColorPickerView.mxml
 (right-click on PC, Control-click on OS X and select "Save Target as..." or something like that).  PS - this is my band's official web site so while you're there take a listen to our music!

The controllers are simple Spark Horizontal Sliders that have ranges from 0-255. Each slider has a change event handler registered to the same function.


The logic is included to lay these out for both portrait and landscape modes.  A visual reference to the current color is represented within a Spark rect.  The Button calls a blank function to be used to take whatever action you want to set a color.


As you move the sliders, the color changes.

  


The setColor function does not return anything.  All it does is grab the values and convert them to be used either as Hex (for example, "0X0f3eff") or uint formats.  A click handler is registered against the button to set the color, which can be done from the setLineColor() function.


A small utility class is used to prevent incorrect values from being written when ranges are less than one character long.  The checkLength() function has comments and is self explanatory.  This is to prevent '0f0f0f' from returning "fff" if the values are all 15.


If you use this and find any way to improve it, please consider sharing via this blog post.

1 comment:

Do not spam this blog! Google and Yahoo DO NOT follow comment links for SEO. If you post an unrelated link advertising a company or service, you will be reported immediately for spam and your link deleted within 30 minutes. If you want to sponsor a post, please let us know by reaching out to duane dot nickull at gmail dot com.