Tone Designer

配色をする際、トーンを計画したあとに色相を調整すると楽に配色が決まります.
トーンベースで配色を考えることができるツールが欲しくて作ってみました.
（トーンとは明度と彩度のペアに名前を付けたものです.
”カラートーン” で検索すると参考になるページが色々ヒットすると思います.）

素敵な配色ができたらぜひforkしてね！
TonePresetを編集するとプリセットのコンボボックスの内容が変わります.

2010.5.22
save時の出力とファイル名を修正.
プリセット LOLLIPOP、HYSTEIC、VIDEO_GAME80Sを追加

@author imajuk

import com.bit101.components.RangeSlider;

imajuk

forked:0
favorite:16
lines:1106
license : MIT License
modified : 2010-05-22 23:56:33

Embed: Tweet

package  
{
    /**
     * 配色をする際、トーンを計画したあとに色相を調整すると楽に配色が決まります. 
     * トーンベースで配色を考えることができるツールが欲しくて作ってみました.
     * （トーンとは明度と彩度のペアに名前を付けたものです.
     *  ”カラートーン” で検索すると参考になるページが色々ヒットすると思います.）
     * 
     * 素敵な配色ができたらぜひforkしてね！
     * TonePresetを編集するとプリセットのコンボボックスの内容が変わります.
     * 
     * 2010.5.22 
     *      save時の出力とファイル名を修正. 
     *      プリセット LOLLIPOP、HYSTEIC、VIDEO_GAME80Sを追加
     * 
     * @author imajuk
     */
     
    import com.bit101.components.Label;
    import com.bit101.components.Window;
//    import com.bit101.components.RangeSlider;
    import com.bit101.components.Knob;
    import com.bit101.components.PushButton;
    import com.bit101.components.ComboBox;
    import com.bit101.components.HUISlider;
    import com.bit101.components.Panel;
    import flash.net.FileReference;
    import flash.utils.ByteArray;
    import flash.display.BitmapData;
    import flash.utils.Dictionary;
    import flash.events.Event;
    import flash.display.DisplayObject;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.display.Sprite;
    import mx.graphics.codec.PNGEncoder;

public class ToneDesigner extends Sprite 
    {
        //=================================
        // model
        //=================================
        private var tones : ToneCollection;
        //=================================
        // view
        //=================================
        private var sample1 : Sample;
        private var sample2 : Sample;
        private var sContainer : Sprite;
        private var output : Output;
        //=================================
        // UI
        //=================================
        private var panel : Panel;
        private var comps : Array = [];
        private var sliders : Array = [];
        private var toneItems : Array;
        private var suspendSliderUpdating : Boolean;
        private var dic : Dictionary = new Dictionary(true);

public function ToneDesigner()
        {
            //=================================
            // stage setting
            //=================================
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            
            //=================================
            // prepare view
            //=================================
            sContainer = addChild(new Sprite()) as Sprite;
            sample1 = sContainer.addChild(new Sample(100, 400)) as Sample;
            sample2 = sContainer.addChild(new Sample(100, 400)) as Sample;
            
            panel = addChild(new Panel(this, 329, 5)) as Panel;
            panel.setSize(120, 440);
            panel.alpha = .8;
        
            output = stage.addChild(new Output()) as Output;
            output.x = 300;
            output.y = 25;
            output.visible = false;
            
            //=================================
            // prepare model
            //================================= 
            tones = TonePreset.getPreset(TonePreset.COOL);
            //for Tone selector
            toneItems = 
               ColorTone.getAll().map(
                   function(toneKind : String, ...param):ColorTone
                    {
                        return new ColorTone(toneKind, 10);
                    }
                );
            
            update();
        }
        
        private function update() : void 
        {
            buildUI();
            draw();
            layout();
        }

private function buildUI() : void 
        {
            //=================================
            // reset components
            //=================================
            comps.forEach(
                function(d : DisplayObject, ...param):void
                {
                    DisplayObjectUtil.removeChild(d);
                });
            comps = [];
            sliders = [];
            
            var cx : int = 10;
            var cy : int = 10;
            
            //=================================
            // preset selector
            //=================================
            var ps:ComboBox = new ComboBox(panel, cx, cy, "presets");
            TonePreset.getAll().forEach(
                function(tone:ToneCollection, ...param):void
                {
                    ps.addItem(tone);
                }
            );
            ps.listItemHeight = 15;
            ps.setSize(100, 15);
            ps.addEventListener(
                    Event.SELECT, 
                    function():void
                    {
                        tones = ToneCollection(ps.selectedItem);
                        update();
                    }
                );
            
            cy += ps.height + 10;
            comps.push(ps);
            
            //=================================
            // tone controlers
            //=================================
            tones.forEach(
                function(tone : ColorTone, idx : int, ...param):void
                {
                    //=================================
                    // remove tone button
                    //=================================
                    var minus : PushButton = 
                        new PushButton(panel, cx, cy + 1, "-", 
                        function():void
                        {
                            if (tones.length <= 1)
                               return;
                            
                            //remove a tone
                            tones.remove(idx);
                            
                            //re-calc data
                            tones.increase(getToneFromSliderIndex(idx).value / tones.length);
                            
                            update();
                        });
                    minus.setSize(13, 13);
                    comps.push(minus);
                        
                    //=================================
                    // add tone button
                    //=================================
                    var plus : PushButton = 
                        new PushButton(panel, cx, cy + 15, "+", 
                        function():void
                        {
                            //create new tone
                            var newTone : ColorTone = toneItems[0].clone();
                            
                            //re-calc data
                            tones.decrease(newTone.value / sliders.length);
                            
                            //insert created one
                            tones.add(idx + 1, newTone);
                            
                            //suspend slider's event handlers
                            suspendSliderUpdating = true;
                            
                            update();
                            
                            //recover slider's event handlers
                            suspendSliderUpdating = false;
                                
                        });
                    plus.setSize(13, 13);
                    comps.push(plus);
                    
                    //=================================
                    // tone selector
                    //=================================
                    var combo : ComboBox = new ComboBox(panel, cx + 20, cy, tone.label);
                    
                    //set combobox items
                    toneItems.forEach(
                        function(item:ColorTone, ...param):void
                        {
                            combo.addItem(item);
                        }
                    );
                    
                    //set up selector
                    combo.addEventListener(
                        Event.SELECT, 
                        function():void
                        {
                            var t : ColorTone = ColorTone(combo.selectedItem).clone();
                            t.value = tones.getToneAmount(idx);
                            dic[slider] = tones.replace(idx, t); 
                            draw();
                        }
                    );
                    combo.setSize(80, 13);
                    comps.push(combo);
                    
                    //=================================
                    // slider for tone amount
                    //=================================
                    var slider : HUISlider = 
                        new HUISlider(
                            panel, cx + 11, cy + 12, "", 
                            function(e : Event):void                
                            {       
                                if (sliders.length <= 1)
                                    return;
                                           
                                if (suspendSliderUpdating)
                                    return;
                                                    
                                //re-calc data
                                calc(idx, HUISlider(e.target));
                                        
                                draw();
                    
                            });
                    slider.setSliderParams(0, 100, tones.getToneAmount(idx));
                    slider.setSize(115, 15);
                    comps.push(slider);
                    sliders.push(slider);
                    
                    //register th tone to dictionary in order to find out it from reference of slider
                    dic[slider] = tones.getTone(idx);
                    
                    cy += combo.height + slider.height + 5;
                });
                
            
            //=================================
            // hue adjustment controlers
            //=================================
            var me:Sprite = this;
            var hue : PushButton = 
                new PushButton(
                    panel, cx, stage.stageHeight - 75, "hue adjustment", 
                    function():void
                    {
                        var window:Window = new Window(me, 275, 290, "hue adjustment");
                        window.setSize(120, 155);
//                        window.hasCloseButton = true;
                        window.alpha = .8;
                        window.addEventListener(
                            Event.CLOSE, 
                            function():void
                            {
                                window.removeEventListener(Event.CLOSE, arguments.callee);
                                me.removeChild(window);
                            }
                        );
        
                        var wx:int = 10;
                        var wy:int = 25;
                        
                        //=================================
                        // label
                        //=================================
                        var label:Label = new Label(window, wx+25, wy, "hue range");
                        wy += 20;
                        
                        //=================================
                        // hue range
                        //=================================
                        var range : RangeSlider = new RangeSlider(RangeSlider.HORIZONTAL, window, wx, wy);
                        range.labelMode = "always";
                        range.labelPosition = "bottom";
                        range.setSize(95, 10);
                        range.minimum = 0;
                        range.maximum = 360;
                        range.highValue = tones.hueMax;
                        range.lowValue = tones.hueMin;
                        range.addEventListener(
                            Event.CHANGE, 
                            function():void
                            {
                                tones.hueMin = range.lowValue;
                                tones.hueMax = range.highValue;
                                draw();
                            }
                        );
                        wy += range.height + 15;
                        
                        //=================================
                        // hue wheel
                        //=================================
                        var knob:Knob = 
                            new Knob(
                                window, label.x, wy, "hue wheel", 
                                function():void
                                {
                                    tones.hueRotation = knob.value; 
                                    draw();
                                });
                        knob.maximum = 360;
                        knob.value = tones.hueRotation;
                        wy += knob.height;
                        
                        //=================================
                        // close button
                        //=================================
                        var close : PushButton = new PushButton(window, 105, 5, "", function():void
                        {
                            window.dispatchEvent(new Event(Event.CLOSE));
                        });
                        close.setSize(10, 10);
                    });
            comps.push(hue);
            
            //=================================
            // save button
            //=================================
            var save : PushButton = 
                new PushButton(
                    panel, cx, stage.stageHeight - 50, "save", 
                    function():void
                    {
                        var b : BitmapData = 
                            new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
                        panel.visible = false;
                        output.visible = true;
                        b.draw(stage);
                        panel.visible = true;
                        output.visible = false;
                        var encorder : PNGEncoder = new PNGEncoder();
                        var bytes : ByteArray = encorder.encode(b);
                        var fr : FileReference = new FileReference();
                        fr.save(bytes, "tones" + int(Math.random() * 0xFFFFFF) + ".png");
                    });
            save.setSize(45, 20);
            comps.push(save);
            
            //=================================
            // redraw button
            //=================================
            var redraw : PushButton = 
                new PushButton(
                    panel, cx + save.width, stage.stageHeight - 50, "redraw", 
                    function():void
                    {
                        draw();
                    }
                );
            redraw.setSize(45, 20);
            comps.push(redraw);
        }

private function draw() : void 
        {
            sample1.draw(tones, 100);
            sample2.draw(tones);
            
            output.update(tones);
        }
        
        private function layout() : void 
        {
            var margin:int = 4;
            sample2.x = sample1.canvasWidth + margin;
            sContainer.x = int((stage.stageWidth - panel.width - (sample1.canvasWidth * 2 + margin)) * .5); 
            sContainer.y = int((stage.stageHeight - sample1.canvasHeight) * .5); 
        }

private function getToneFromSliderIndex(idx : int) : ColorTone 
        {
            return getToneFromSlider(sliders[idx]);
        }
        
        private function getToneFromSlider(slider : HUISlider) : ColorTone 
        {
            return ColorTone(dic[slider]);
        }

private function calc(idx : Number, changed : HUISlider) : void 
        {
            //suspend slider's event handlers
            suspendSliderUpdating = true;
            
            var diff : Number = (tones.getToneAmount(idx) - changed.value);
            tones.setToneAmount(idx, changed.value);
            
            var a : Number = diff / (sliders.length - 1);
            
            var others : Array = 
                sliders.filter(
                    function(s : HUISlider, ...param):Boolean
                    {
                        var v : Number = getToneFromSlider(s).value + a;
                        return (s != changed) && (v >= 0 && v <= 100);
                    }
                );
            
            others.forEach(
                function(s : HUISlider, ...param):void
                {
                    var tone:ColorTone = getToneFromSlider(s);
                    tone.value += diff / others.length;
                    s.value = tone.value; 
                }
            );
            
            //recover slider's event handlers
            suspendSliderUpdating = false;
        }
    }
}

import com.bit101.components.Style;
import com.bit101.components.Label;
import com.bit101.components.Component;
import com.bit101.components.Text;
import flash.display.DisplayObjectContainer;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.display.Shape;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.Bitmap;

import fl.motion.easing.Exponential;
import frocessing.color.ColorHSV;

/**
 * preset of ToneCollection
 */
class TonePreset 
{
    /**
     * プリセットの名前です.
     * 整数はidなので重複しないように注意!
     */
    public static const MODERN : int = 0;
    public static const COOL : int = 1;
    public static const CLASSIC : int = 2;
    public static const SUMMER : int = 3;
    public static const JAPANESE : int = 4;
    public static const LOLLIPOP : int = 5;
    public static const HYSTEIC : int = 6;
    public static const VIDEO_GAME80S : int = 7;
    
    /**
     * すべてのプリセットの配列を返します.
     * プリセットを追加した場合はここも忘れずに編集してね!.
     */
    public static function getAll() : Array 
    {
        return [
            getPreset(COOL), 
            getPreset(MODERN), 
            getPreset(LOLLIPOP),
            getPreset(CLASSIC), 
            getPreset(SUMMER), 
            getPreset(HYSTEIC),
            getPreset(JAPANESE),
            getPreset(VIDEO_GAME80S)
        ];
    }
    
    /**
     * プリセットのトーンを変えたい時はcase文を編集
     */
    public static function getPreset(id : int) : ToneCollection 
    {
        var preset:ToneCollection;
        
        switch(id)
        {
            case MODERN:
                preset = 
                    new ToneCollection(
                        "MODERN",
                        [
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 3),
                            new ColorTone(ColorTone.PALE, 12), 
                            new ColorTone(ColorTone.LIGHT, 7),
                            new ColorTone(ColorTone.DARK, 21),
                            new ColorTone(ColorTone.VIVID, 1),
                            new ColorTone(ColorTone.DARK_GRAYISH, 9),
                            new ColorTone(ColorTone.PALE, 34),
                            new ColorTone(ColorTone.BRIGHT, 4),
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 9)
                        ],
                        0,360
                    );
                break;
            
            case COOL:
                preset =
                    new ToneCollection(
                        "COOL",
                        [
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 3),
                            new ColorTone(ColorTone.PALE, 12), 
                            new ColorTone(ColorTone.LIGHT, 7),
                            new ColorTone(ColorTone.DARK, 21),
                            new ColorTone(ColorTone.VIVID, 1),
                            new ColorTone(ColorTone.DARK_GRAYISH, 9),
                            new ColorTone(ColorTone.DEEP, 34),
                            new ColorTone(ColorTone.DULL, 4),
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 9)
                        ],
                        240, 360
                    );
                break; 
                
            case CLASSIC:
                preset =
                    new ToneCollection(
                        "CLASSIC",
                        [
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 2),
                            new ColorTone(ColorTone.DARK, 14), 
                            new ColorTone(ColorTone.BRIGHT, 2),
                            new ColorTone(ColorTone.PALE, 19),
                            new ColorTone(ColorTone.DULL, 15),
                            new ColorTone(ColorTone.DARK_GRAYISH, 46),
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 2)
                        ],
                        36, 71
                    );
                break; 
                
            case SUMMER:
                preset =
                    new ToneCollection(
                        "SUMMER",
                        [
                            new ColorTone(ColorTone.PALE, 11), 
                            new ColorTone(ColorTone.LIGHT, 8),
                            new ColorTone(ColorTone.VIVID, 3),
                            new ColorTone(ColorTone.STRONG, 12),
                            new ColorTone(ColorTone.PALE, 61),
                            new ColorTone(ColorTone.SOFT, 5)
                        ],
                        125, 217
                    );
                break;
                
            case JAPANESE:
                preset =
                    new ToneCollection(
                        "JAPANESE TRAD",
                        [
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 8), 
                            new ColorTone(ColorTone.GRAYISH, 2), 
                            new ColorTone(ColorTone.PALE, 5),
                            new ColorTone(ColorTone.DARK, 33),
                            new ColorTone(ColorTone.DULL, 4),
                            new ColorTone(ColorTone.LIGHT_GRAYISH, 38),
                            new ColorTone(ColorTone.PALE, 10)
                        ],
                        260, 360, 65
                    );
                break; 
                
            case LOLLIPOP:
                preset =
                    new ToneCollection(
                        "LOLLIPOP",
                        [
                            new ColorTone(ColorTone.VIVID, 2), 
                            new ColorTone(ColorTone.PALE, 11),
                            new ColorTone(ColorTone.LIGHT, 22),
                            new ColorTone(ColorTone.PALE, 4),
                            new ColorTone(ColorTone.VIVID, 61)
                        ],
                        297, 360, 11
                    );
                break; 
                
            case HYSTEIC:
                preset =
                    new ToneCollection(
                        "HYSTEIC",
                        [
                            new ColorTone(ColorTone.PALE, 7), 
                            new ColorTone(ColorTone.STRONG, 3),
                            new ColorTone(ColorTone.VIVID, 20),
                            new ColorTone(ColorTone.STRONG, 3),
                            new ColorTone(ColorTone.BRIGHT, 51),
                            new ColorTone(ColorTone.PALE, 16)
                        ],
                        178, 360, 72
                    );
                break;
                
            case VIDEO_GAME80S:
                preset =
                    new ToneCollection(
                        "VIDEO_GAME80S",
                        [
                            new ColorTone(ColorTone.DARK_GRAYISH, 8), 
                            new ColorTone(ColorTone.STRONG, 6),
                            new ColorTone(ColorTone.VIVID, 34),
                            new ColorTone(ColorTone.STRONG, 4),
                            new ColorTone(ColorTone.BRIGHT, 18),
                            new ColorTone(ColorTone.DEEP, 28)
                        ],
                        231, 360, 25
                    );
                break; 
        }
        
        return preset;
    }
}

/**
 * collection of Tone
 */
class ToneCollection 
{
    public var label : String;
    public var hueResolver : HueResolver;
    private var data : Array;

public function ToneCollection(
                        label:String, 
                        data : Array,
                        hueMin : Number, 
                        hueMax : Number,
                        hueRotation : Number = 0
                    ) 
    {
        this.label = label;
        this.data = data;
        this.hueResolver = new HueResolver(this, hueMin, hueMax, hueRotation);
    }

public function getToneAmount(idx : Number) : Number 
    {
        return data[idx].value;
    }

public function setToneAmount(idx : Number, value : Number) : void 
    {
        data[idx].value = value;
    }

public function forEach(closure : Function) : void 
    {
        data.forEach(closure);
    }

public function remove(idx : int) : void 
    {
        data.splice(idx, 1);
    }

public function add(idx : int, newTone : ColorTone) : void 
    {
        data.splice(idx, 0, newTone);
    }

public function replace(idx : int, newTone : ColorTone) : ColorTone 
    {
        data[idx] = newTone;
        return newTone;
    }

public function get length() : int 
    {
        return data.length;
        return 0;
    }

public function increase(value : Number) : void 
    {
        forEach(function(tone : ColorTone, ...param):void
        {
            tone.value += value;
        });
    }

public function decrease(value : Number) : void 
    {
        increase(-value);
    }

public function getTone(idx : int) : ColorTone 
    {
        return data[idx];
    }

public function get hueMin() : Number
    {
        return hueResolver.hueMin;
    }

public function set hueMin(value:Number) : void 
    {
        hueResolver.hueMin = value;
        hueResolver.reset();
    }

public function get hueMax() : Number
    {
        return hueResolver.hueMax;
    }
    
    public function set hueMax(value:Number) : void 
    {
        hueResolver.hueMax = value;
        hueResolver.reset();
    }

public function get hueRotation() : Number 
    {
        return hueResolver.hueRotation;
    }

public function set hueRotation(value:Number) : void 
    {
        hueResolver.hueRotation = value;
    }
}

class ColorTone 
{
    //=================================
    // all kind of Color Tone
    //=================================
    public static const PALE : String           = "PALE";
    public static const LIGHT_GRAYISH : String  = "LIGHT_GRAYISH";
    public static const GRAYISH : String        = "GRAYISH";
    public static const DARK_GRAYISH : String   = "DARK_GRAYISH";
    
    public static const LIGHT : String          = "LIGHT";
    public static const SOFT : String           = "SOFT";
    public static const DULL : String           = "DULL";
    public static const DARK : String           = "DARK";
    
    public static const BRIGHT : String         = "BRIGHT";
    public static const STRONG : String         = "STRONG";
    public static const DEEP : String           = "DEEP";
    public static const VIVID : String          = "VIVID";
    
    //=================================
    // defination of Color Tone
    // [彩度min, 彩度max, 明度min, 明度max]
    //=================================
    internal static const DEF_PALE : Array            = [7, 20, 100, 100];
    internal static const DEF_LIGHT_GRAYISH : Array   = [5, 20, 70, 90];
    internal static const DEF_GRAYISH : Array         = [5, 20, 40, 50];
    internal static const DEF_DARK_GRAYISH : Array    = [5, 10, 7, 32];
    
    internal static const DEF_LIGHT : Array           = [30, 68, 100, 100];
    internal static const DEF_SOFT : Array            = [30, 68, 80, 90];
    internal static const DEF_DULL : Array            = [30, 50, 40, 70];
    internal static const DEF_DARK : Array            = [50, 65, 10, 30];
    
    internal static const DEF_BRIGHT : Array          = [90, 100, 77, 90];
    internal static const DEF_STRONG : Array          = [100, 100, 47, 67];
    internal static const DEF_DEEP : Array            = [100, 100, 40, 45];
    internal static const DEF_VIVID : Array           = [100, 100, 100, 100];

public static function getToneAs(toneKind : String, hue : Number) : uint 
    {
        var tone : Array = ColorTone["DEF_" + toneKind];
        var satiation : Number = MathUtil.random(tone[0], tone[1]);
        var value : Number = MathUtil.random(tone[2], tone[3]);
        return new ColorHSV(hue, satiation * .01, value * .01).value;
    }

public static function getAll() : Array 
    {
        return [PALE, LIGHT_GRAYISH, GRAYISH, DARK_GRAYISH, LIGHT, SOFT, DULL, DARK, BRIGHT, STRONG, DEEP, VIVID];
    }

public var label : String;
    public var value : Number;
    
    /**
     * コンストラクタ
     * @param kind  トーンの種類. すべてのトーンの種類はColorToneに定義されています.
     * @param value 全体に占めるこのトーンの割合
     */
    public function ColorTone(kind : String, value : Number) 
    {
        this.label = kind;
        this.value = value;
    }
    
    public function toString() : String 
    {
        return label + " : " + int(value) + "%";
    }

public function clone() : ColorTone 
    {
        return new ColorTone(label, value);
    }
}

class HueResolver 
{
    public var hueMin : Number;
    public var hueMax : Number;
    private var tones : ToneCollection;
    private var internalHue : Array;
    private var hue : Array;
    private var cursor : int = 0;
    private var _hueRotation : Number;
    
    public function set hueRotation(hueRotation : Number) : void
    {
        _hueRotation = hueRotation;
        rotate();
    }
    
    public function get hueRotation() : Number
    {
        return _hueRotation;
    }

public function HueResolver(
                        tones : ToneCollection, 
                        hueMin : Number, 
                        hueMax : Number,
                        hueRotation : Number = 0
                    )         
    {
        this.tones = tones;
        this.hueMin = hueMin;
        this.hueMax = hueMax;
        this._hueRotation = hueRotation;
        
        reset();
    }

public function next() : Number 
    {
        cursor ++;
        if (cursor >= 1000)
            cursor = 0;
            
        return hue[cursor];
    }

public function reset() : void 
    {
        internalHue = [];
        for (var i : int = 0;i < 1000;i++) 
        {
            internalHue.push(MathUtil.random(hueMin, hueMax));
        }
        rotate();
    }

private function rotate() : void 
    {
        hue = 
            internalHue.map(
                function(h : int, ...param):Number
                {
                    return h + _hueRotation;
                }
            );
    }
}

class Sample extends Sprite 
{
    public var canvasWidth : int;
    public var canvasHeight : int;
    private var canvas : BitmapData;
    private var box : Sprite;
    private var bMask : Shape;
    private var rect : Rectangle = new Rectangle();

public function Sample(canvasWidth:int, canvasHeight : int)
    {
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        
        canvas = new BitmapData(450, 450, false, 0xFFFFFF);
        box = addChild(new Sprite()) as Sprite;
        box.addChild(new Bitmap(canvas));
        bMask = box.addChild(new Shape()) as Shape;
        box.mask = bMask;
    }

public function draw(
                        tones:ToneCollection, 
                        max:int = 1
                    ) : void 
    {
        var px : int = 0;
        var py : int = 0;
        
        //clear canvas
        canvas.fillRect(canvas.rect, 0xFFFFFF);
        
        //draw
        tones.forEach(
            function(tone : ColorTone, ...param):void
            {
                var internalY : int = 0;
                var toneHeight : int = canvasHeight * tone.value * .01;
                
                while(internalY < toneHeight)
                {
                    var rHeight : int = Exponential.easeIn(Math.random(), 1, max - 1, 1);
                    if (rHeight == 0)
                        rHeight = 1;
                        
                    rect.x = px;
                    rect.y = py + internalY;
                    rect.width = canvasWidth;
                    rect.height = rHeight;
                    
                    internalY += rHeight;
                    if (internalY > toneHeight)
                        rect.height = rHeight - (internalY - toneHeight);
                    
                    canvas.fillRect(
                        rect, 
                        ColorTone.getToneAs(tone.label, tones.hueResolver.next())
                    );
                }
                py += toneHeight;
            }
        );
        
        bMask.graphics.clear();
        bMask.graphics.beginFill(0);
        bMask.graphics.drawRoundRect(0, 0, rect.width, rect.y + rect.height, canvasHeight * .025);
    }
}

class Output extends Sprite 
{
    private var ta : Text;

public function Output()
    {
        ta = addChild(new Text()) as Text;
        ta.setSize(130, 250);
    }

public function update(tones : ToneCollection) : void 
    {
        var r:HueResolver = tones.hueResolver;
        var h1:Number = int((r.hueMin + r.hueRotation) % 360); 
        var h2:Number = int((r.hueMax + r.hueRotation) % 360); 
        ta.text = 
           tones.label + " : \n\n" + 
           "  hue(" + h1 + " ... " + h2 +")\n" +
           "  ---------------------------\n";
           
        tones.forEach(
            function(tone:ColorTone, ...param):void
            {
                ta.text += "    " + tone +"\n";
            }
        );
    }
}

class MathUtil
{
    /**
     * 任意の範囲からランダムな数値を返す
     */
    public static function random(min:Number, max:Number):Number
    {
        return Math.random() * (max - min) + min;
    }
}

class DisplayObjectUtil 
{
    /**
     * DisplayObjectContainer.removeChild()は、
     * 削除したいchildがコンテナに含まれているかどうか確認しません.
     * もし、childがコンテナに含まれていない場合はランタイムエラーになります.
     * このメソッドはchildを削除する前にそのchildがchildがコンテナに
     * 含まれているかどうかをチェックします.
     * 
     * 明示的にランタイムエラーをキャッチしたい場合は使用しないで下さい.
     */
    public static function removeChild(child:DisplayObject):DisplayObject
    {
        if (!child)
            return child;
            
        var container:DisplayObjectContainer = child.parent;
        if (!container)
            return child;
            
        if (container.contains(child))
            container.removeChild(child);
            
        return child;
    }
}

class RangeSlider extends Component
{
    protected var _back:Sprite;
    protected var _highLabel:Label;
    protected var _highValue:Number = 100;
    protected var _labelMode:String = ALWAYS;
    protected var _labelPosition:String;
    protected var _labelPrecision:int = 0;
    protected var _lowLabel:Label;
    protected var _lowValue:Number = 0;
    protected var _maximum:Number = 100;
    protected var _maxHandle:Sprite;
    protected var _minimum:Number = 0;
    protected var _minHandle:Sprite;
    protected var _orientation:String = VERTICAL;
    protected var _tick:Number = 1;
    
    public static const ALWAYS:String = "always";
    public static const BOTTOM:String = "bottom";
    public static const HORIZONTAL:String = "horizontal";
    public static const LEFT:String = "left";
    public static const MOVE:String = "move";
    public static const NEVER:String = "never";
    public static const RIGHT:String = "right";
    public static const TOP:String = "top";
    public static const VERTICAL:String = "vertical";
    
    
    
    /**
     * Constructor
     * @param orientation Whether the slider will be horizontal or vertical.
     * @param parent The parent DisplayObjectContainer on which to add this Slider.
     * @param xpos The x position to place this component.
     * @param ypos The y position to place this component.
     * @param defaultHandler The event handling function to handle the default event for this component (change in this case).
     */
    public function RangeSlider(orientation:String, parent:DisplayObjectContainer=null, xpos:Number=0, ypos:Number=0, defaultHandler:Function = null)
    {
        _orientation = orientation;
        super(parent, xpos, ypos);
        if(defaultHandler != null)
        {
            addEventListener(Event.CHANGE, defaultHandler);
        }
    }
    
    /**
     * Initializes the component.
     */
    protected override function init():void
    {
        super.init();
        if(_orientation == HORIZONTAL)
        {
            setSize(110, 10);
            _labelPosition = TOP;
        }
        else
        {
            setSize(10, 110);
            _labelPosition = RIGHT;
        }
    }
    
    /**
     * Creates and adds the child display objects of this component.
     */
    protected override function addChildren():void
    {
        super.addChildren();
        _back = new Sprite();
        _back.filters = [getShadow(2, true)];
        addChild(_back);
        
        _minHandle = new Sprite();
        _minHandle.filters = [getShadow(1)];
        _minHandle.addEventListener(MouseEvent.MOUSE_DOWN, onDragMin);
        _minHandle.buttonMode = true;
        _minHandle.useHandCursor = true;
        addChild(_minHandle);
        
        _maxHandle = new Sprite();
        _maxHandle.filters = [getShadow(1)];
        _maxHandle.addEventListener(MouseEvent.MOUSE_DOWN, onDragMax);
        _maxHandle.buttonMode = true;
        _maxHandle.useHandCursor = true;
        addChild(_maxHandle);           
        
        _lowLabel = new Label(this);
        _highLabel = new Label(this);
        _lowLabel.visible = (_labelMode == ALWAYS);
    }
    
    /**
     * Draws the back of the slider.
     */
    protected function drawBack():void
    {
        _back.graphics.clear();
        _back.graphics.beginFill(Style.BACKGROUND);
        _back.graphics.drawRect(0, 0, _width, _height);
        _back.graphics.endFill();
    }
    
    /**
     * Draws the handles of the slider.
     */
    protected function drawHandles():void
    {   
        _minHandle.graphics.clear();
        _minHandle.graphics.beginFill(Style.BUTTON_FACE);
        _maxHandle.graphics.clear();
        _maxHandle.graphics.beginFill(Style.BUTTON_FACE);
        if(_orientation == HORIZONTAL)
        {
            _minHandle.graphics.drawRect(1, 1, _height - 2, _height - 2);
            _maxHandle.graphics.drawRect(1, 1, _height - 2, _height - 2);
        }
        else
        {
            _minHandle.graphics.drawRect(1, 1, _width - 2, _width - 2);
            _maxHandle.graphics.drawRect(1, 1, _width - 2, _width - 2);
        }
        _minHandle.graphics.endFill();
        positionHandles();
    }
    
    /**
     * Adjusts positions of handles when value, maximum or minimum have changed.
     * TODO: Should also be called when slider is resized.
     */
    protected function positionHandles():void
    {
        var range:Number;
        if(_orientation == HORIZONTAL)
        {
            range = _width - _height * 2;
            _minHandle.x = (_lowValue - _minimum) / (_maximum - _minimum) * range;
            _maxHandle.x = _height + (_highValue - _minimum) / (_maximum - _minimum) * range;
        }
        else
        {
            range = _height - _width * 2;
            _minHandle.y = _height - _width - (_lowValue - _minimum) / (_maximum - _minimum) * range;
            _maxHandle.y = _height - _width * 2 - (_highValue - _minimum) / (_maximum - _minimum) * range;
        }
        updateLabels();
    }
    
    /**
     * Sets the text and positions the labels.
     */
    protected function updateLabels():void
    {
        _lowLabel.text = getLabelForValue(lowValue);
        _highLabel.text = getLabelForValue(highValue);
        _lowLabel.draw();
        _highLabel.draw();

if(_orientation == VERTICAL)
        {
            _lowLabel.y = _minHandle.y + (_width - _lowLabel.height) * 0.5;
            _highLabel.y = _maxHandle.y + (_width - _highLabel.height) * 0.5;
            if(_labelPosition == LEFT)
            {
                _lowLabel.x = -_lowLabel.width - 5;
                _highLabel.x = -_highLabel.width - 5;
            }
            else
            {
                _lowLabel.x = _width + 5;
                _highLabel.x = _width + 5;
            }
        }
        else
        {
            _lowLabel.x = _minHandle.x - _lowLabel.width + _height;
            _highLabel.x = _maxHandle.x;
            if(_labelPosition == BOTTOM)
            {
                _lowLabel.y = _height + 2;
                _highLabel.y = _height + 2;
            }
            else
            {
                _lowLabel.y = -_lowLabel.height;
                _highLabel.y = -_highLabel.height;
            }
            
        }
    }

/**
     * Generates a label string for the given value.
     * @param value The number to create a label for.
     */
    protected function getLabelForValue(value:Number):String
    {
        var str:String = (Math.round(value * Math.pow(10, _labelPrecision)) / Math.pow(10, _labelPrecision)).toString();
        if(_labelPrecision > 0)
        {
            var decimal:String = str.split(".")[1] || "";
            if(decimal.length == 0) str += ".";
            for(var i:int = decimal.length; i < _labelPrecision; i++)
            {
                str += "0";
            }
        }
        return str;
    }
    
    ///////////////////////////////////
    // public methods
    ///////////////////////////////////
    
    /**
     * Draws the visual ui of the component.
     */
    override public function draw():void
    {
        super.draw();
        drawBack();
        drawHandles();
    }

///////////////////////////////////
    // event handlers
    ///////////////////////////////////
    
    /**
     * Internal mouseDown handler for the low value handle. Starts dragging the handle.
     * @param event The MouseEvent passed by the system.
     */
    protected function onDragMin(event:MouseEvent):void
    {
        stage.addEventListener(MouseEvent.MOUSE_UP, onDrop);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, onMinSlide);
        if(_orientation == HORIZONTAL)
        {
            _minHandle.startDrag(false, new Rectangle(0, 0, _maxHandle.x - _height, 0));
        }
        else
        {
            _minHandle.startDrag(false, new Rectangle(0, _maxHandle.y + _width, 0, _height - _maxHandle.y - _width * 2));
        }
        if(_labelMode == MOVE)
        {
            _lowLabel.visible = true;
            _highLabel.visible = true;
        }
    }
    
    /**
     * Internal mouseDown handler for the high value handle. Starts dragging the handle.
     * @param event The MouseEvent passed by the system.
     */
    protected function onDragMax(event:MouseEvent):void
    {
        stage.addEventListener(MouseEvent.MOUSE_UP, onDrop);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, onMaxSlide);
        if(_orientation == HORIZONTAL)
        {
            _maxHandle.startDrag(false, new Rectangle(_minHandle.x + _height, 0, _width - _height - _minHandle.x - _height, 0));
        }
        else
        {
            _maxHandle.startDrag(false, new Rectangle(0, 0, 0, _minHandle.y - _width));
        }
        if(_labelMode == MOVE)
        {
            _lowLabel.visible = true;
            _highLabel.visible = true;
        }
    }
    
    /**
     * Internal mouseUp handler. Stops dragging the handle.
     * @param event The MouseEvent passed by the system.
     */
    protected function onDrop(event:MouseEvent):void
    {
        stage.removeEventListener(MouseEvent.MOUSE_UP, onDrop);
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMinSlide);
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMaxSlide);
        stopDrag();
        if(_labelMode == MOVE)
        {
            _lowLabel.visible = false;
            _highLabel.visible = false;
        }
    }
    
    /**
     * Internal mouseMove handler for when the low value handle is being moved.
     * @param event The MouseEvent passed by the system.
     */
    protected function onMinSlide(event:MouseEvent):void
    {
        var oldValue:Number = _lowValue;
        if(_orientation == HORIZONTAL)
        {
            _lowValue = _minHandle.x / (_width - _height * 2) * (_maximum - _minimum) + _minimum;
        }
        else
        {
            _lowValue = (_height - _width - _minHandle.y) / (height - _width * 2) * (_maximum - _minimum) + _minimum;
        }
        if(_lowValue != oldValue)
        {
            dispatchEvent(new Event(Event.CHANGE));
        }
        updateLabels();
    }

/**
     * Internal mouseMove handler for when the high value handle is being moved.
     * @param event The MouseEvent passed by the system.
     */
    protected function onMaxSlide(event:MouseEvent):void
    {
        var oldValue:Number = _highValue;
        if(_orientation == HORIZONTAL)
        {
            _highValue = (_maxHandle.x - _height) / (_width - _height * 2) * (_maximum - _minimum) + _minimum;
        }
        else
        {
            _highValue = (_height - _width * 2 - _maxHandle.y) / (_height - _width * 2) * (_maximum - _minimum) + _minimum;
        }
        if(_highValue != oldValue)
        {
            dispatchEvent(new Event(Event.CHANGE));
        }
        updateLabels();
    }
    
    /**
     * Gets / sets the minimum value of the slider.
     */
    public function set minimum(value:Number):void
    {
        _minimum = value;
        _maximum = Math.max(_maximum, _minimum);
        _lowValue = Math.max(_lowValue, _minimum);
        _highValue = Math.max(_highValue, _minimum);
        positionHandles();
    }
    public function get minimum():Number
    {
        return _minimum;
    }

/**
     * Gets / sets the maximum value of the slider.
     */
    public function set maximum(value:Number):void
    {
        _maximum = value;
        _minimum = Math.min(_minimum, _maximum);
        _lowValue = Math.min(_lowValue, _maximum);
        _highValue = Math.min(_highValue, _maximum);
        positionHandles();
    }
    public function get maximum():Number
    {
        return _maximum;
    }

/**
     * Gets / sets the low value of this slider.
     */
    public function set lowValue(value:Number):void
    {
        _lowValue = value;
        _lowValue = Math.min(_lowValue, _highValue);
        _lowValue = Math.max(_lowValue, _minimum);
        positionHandles();
        dispatchEvent(new Event(Event.CHANGE));
    }
    public function get lowValue():Number
    {
        return Math.round(_lowValue / _tick) * _tick;
    }

/**
     * Gets / sets the high value for this slider.
     */
    public function set highValue(value:Number):void
    {
        _highValue = value;
        _highValue = Math.max(_highValue, _lowValue);
        _highValue = Math.min(_highValue, _maximum);
        positionHandles();
        dispatchEvent(new Event(Event.CHANGE));
    }
    public function get highValue():Number
    {
        return Math.round(_highValue / _tick) * _tick;
    }

/**
     * Sets / gets when the labels will appear. Can be "never", "move", or "always"
     */
    public function set labelMode(value:String):void
    {
        _labelMode = value;
        _highLabel.visible = (_labelMode == ALWAYS);
        _lowLabel.visible = (_labelMode == ALWAYS);
    }
    public function get labelMode():String
    {
        return _labelMode;
    }

/**
     * Sets / gets where the labels will appear. "left" or "right" for vertical sliders, "top" or "bottom" for horizontal.
     */
    public function set labelPosition(value:String):void
    {
        _labelPosition = value;
        updateLabels();
    }
    public function get labelPosition():String
    {
        return _labelPosition;
    }

/**
     * Sets / gets how many decimal points of precisions will be displayed on the labels.
     */
    public function set labelPrecision(value:int):void
    {
        _labelPrecision = value;
        updateLabels();
    }
    public function get labelPrecision():int
    {
        return _labelPrecision;
    }

/**
     * Gets / sets the tick value of this slider. This round the value to the nearest multiple of this number. 
     */
    public function set tick(value:Number):void
    {
        _tick = value;
        updateLabels();
    }
    public function get tick():Number
    {
        return _tick;
    }

}

Code Fullscreen

Preview Fullscreen

ibu4gin :

color