Professional Web Applications Themes

Color Picker mouseover preview - Macromedia Flex General Discussion

I am trying to implement a standard color picker control using custom color label/value pairs. When I test the application (very basic at this point) For some, but not all, colors I need to mouseover the color twice in order for the preview swatch to show that color. This doesn't seem right, but I can't figure out how to fix it. Any insight would be appreciated! <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="400" backgroundGradientAlphas="[0.5, 0.5]" backgroundGradientColors="[#F8FF45, #F8FF45]"> <mx:Script> <![CDATA[ [Bindable] public var vinylArray:Array = [ {label:"Clear", color:"0xFFFFFF"}, {label:"White", color:"0xFFFFFF"}, {label:"Pearl Grey", color:"0xDDDDDD"}, {label:"Medium Grey", color:"0xAAAAAA"}, {label:"Traffic Grey", color:"0x777777"}, {label:"Black", ...

  1. #1

    Default Color Picker mouseover preview

    I am trying to implement a standard color picker control using custom color
    label/value pairs. When I test the application (very basic at this point) For
    some, but not all, colors I need to mouseover the color twice in order for the
    preview swatch to show that color. This doesn't seem right, but I can't figure
    out how to fix it.

    Any insight would be appreciated!

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="600" height="400" backgroundGradientAlphas="[0.5, 0.5]"
    backgroundGradientColors="[#F8FF45, #F8FF45]">
    <mx:Script>
    <![CDATA[
    [Bindable] public var vinylArray:Array = [
    {label:"Clear", color:"0xFFFFFF"},
    {label:"White", color:"0xFFFFFF"},
    {label:"Pearl Grey", color:"0xDDDDDD"},
    {label:"Medium Grey", color:"0xAAAAAA"},
    {label:"Traffic Grey", color:"0x777777"},
    {label:"Black", color:"0x000000"},
    {label:"Saddle Brown", color:"0x996633"},
    {label:"Sandstone", color:"0xB7AA9C"},
    {label:"Tan", color:"0xA28A56"},
    {label:"Beige", color:"0xD5C7B6"},
    {label:"Fawn", color:"0xD5D3B6"},
    {label:"Primrose Yellow", color:"0xFFDD21"},
    {label:"Atomic Red", color:"0xE12126"}];

    [Bindable] public var textArray:Array = [
    {label:"White", color:"0xFFFFFF"},
    {label:"Black", color:"0x000000"},
    {label:"Red", color:"0xff0000"}];
    ]]>
    </mx:Script>

    <mx:Style>
    .myStyle {
    previewHeight:25;
    previewWidth:100;
    swatchWidth:25;
    swatchHeight:25;
    textFieldWidth:95;
    }
    </mx:Style>

    <mx:ColorPicker x="157.8"
    y="48.4"
    dataProvider="{vinylArray}"
    swatchPanelStyleName="myStyle"
    editable="false"/>
    <mx:ColorPicker x="157.8"
    y="74.4"
    dataProvider="{textArray}"
    swatchPanelStyleName="myStyle"
    editable="false"
    />
    <mx:Label x="179.8" y="50.4" text="Vinyl Color"/>
    <mx:Label x="179.8" y="76.4" text="Text Color"/>
    <mx:Label x="10" y="10" text="Aviation Placard Designer" fontSize="20"
    fontWeight="bold" width="320.8"/>
    <mx:NumericStepper x="83" y="47"/>
    <mx:Label x="16" y="49" text="Width (in.)"/>
    <mx:NumericStepper x="83" y="75"/>
    <mx:Label x="10" y="77" text="Length (in.)"/>
    <mx:Label x="300.8" y="50.4" text="Text"/>
    <mx:TextArea x="330.95" y="50.35" height="45.2" width="259"/>
    <mx:HRule x="10" y="102.4" width="580" height="2.6"/>
    <mx:VRule x="148.4" y="49.65" height="45"/>
    <mx:VRule x="290.8" y="50" height="45"/>

    </mx:Application>

    kris_s Guest

  2. #2

    Default Re: Color Picker mouseover preview

    Though I can't imagine why this is necessary, if you use a complex data
    provider (not just colors), you need to have an event handler for the
    itemRollOver event, and set the selectedColor, as in the attached code.

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
    import mx.events.ColorPickerEvent;
    [Bindable]
    public var vinylArray:Array = [
    {label:"Clear", color:"0xFFFFFF"},
    {label:"White", color:"0xFFFFFF"},
    {label:"Pearl Grey", color:"0xDDDDDD"},
    {label:"Medium Grey", color:"0xAAAAAA"},
    {label:"Traffic Grey", color:"0x777777"},
    {label:"Black", color:"0x000000"},
    {label:"Saddle Brown", color:"0x996633"},
    {label:"Sandstone", color:"0xB7AA9C"},
    {label:"Tan", color:"0xA28A56"},
    {label:"Atomic Red", color:"0xE12126"},
    {label:"Fawn", color:"0xD5D3B6"},
    {label:"Primrose Yellow", color:"0xFFDD21"},
    {label:"Beige", color:"0xD5C7B6"}];
    public function itemOverHandler(e:ColorPickerEvent):void{
    cp.selectedColor = e.color;
    }
    ]]>
    </mx:Script>
    <mx:Style>
    .myStyle {
    previewHeight:25;
    previewWidth:100;
    swatchWidth:25;
    swatchHeight:25;
    textFieldWidth:95;
    }
    </mx:Style>
    <mx:Label text="Vinyl Color:"/>
    <mx:ColorPicker id="cp" dataProvider="{vinylArray}" colorField="color"
    swatchPanelStyleName="myStyle" editable="false" selectedColor="0xFFFFFF"
    itemRollOver="itemOverHandler(event)"/>
    </mx:Application>

    Greg Lafrance Guest

  3. #3

    Default Re: Color Picker mouseover preview

    Thanks Greg! That was the solution. It does seem strange that this is
    required. With some testing I found that it is only required when any of the
    defined colors are outside the standard 256 web colors.

    Thanks again.

    kris_s Guest

Similar Threads

  1. image preview on mouseover
    By trebor123 in forum HTML & CSS
    Replies: 8
    Last Post: October 14th, 09:47 PM
  2. color Picker
    By Emma Jane Hogbin in forum Macromedia Freehand
    Replies: 20
    Last Post: November 13th, 03:04 PM
  3. Color Picker.
    By pessi webforumsuser@macromedia.com in forum Macromedia Flash Sitedesign
    Replies: 1
    Last Post: November 12th, 03:23 PM
  4. Problem: All of my blues show up as a teal/blue/gray color on the color picker.
    By Joel Housman in forum Adobe Photoshop 7, CS, CS2 & CS3
    Replies: 1
    Last Post: August 7th, 06:06 PM
  5. Adjusting color brightness on the color picker
    By diana burns in forum Adobe Photoshop 7, CS, CS2 & CS3
    Replies: 1
    Last Post: July 14th, 10:24 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139