client color picker

[dangrace]

Hey Everyone,

I want to make a flash/web page that I can send a client to and they can see a basic mock up of their site and have the ability to click on different areas i.e. background color area, header color area, menu color area, and with a basic color-picker, choose their favorite colors for their layout. Then I could apply their choices to the finished site etc.

Here's a basic idea I drew up:


I saw one example on Flashkit, but it was all AS based and I couldn't figure out how to strip the code correctly to apply to my needs. I included the KM that has that code.

Thanks all for any help!

-Dan

[blanius]

That works fine. To apply it make the an onclick to function for each part of your layout(each will need to be it's own movieclip) That sets which item to color and apply the onclick in the color chooser to that clip instead of the one drawn in the example.

[blanius]

try this for a start

[dangrace]

Thanks for your help once again, Bret! That example is perfect!

-Dan

[blanius]

I'm sure there is a better way to pass the value of which MC is clicked to the colorChooser so that you don't have a long list of IF's.

[dangrace]

I took Bret's example and tweaked it to an almost finished stage, but I was wondering about the color swatches...Can the AS be made to include even more gradation choices? Included KM file.

-Thanks!

[blanius]

You are gonna want to get the Color codes so you should consider getting that info as they select it.

Turns out getting HEX from Decimal is a pain... Couldn't find a single code exmple to do it so I cobbled the following together.

function DecToHex(d){
   var h=new Array();
   
   h[5]=d%16;
   d=Math.floor(d/16);
   h[4]=d%16;
   d=Math.floor(d/16);
   h[3]=d%16
   d=Math.floor(d/16);
   h[2]=d%16;
   d=Math.floor(d/16);
   h[1]=d%16;
   d=Math.floor(d/16);
   h[0]=d%16;
   output=""
  
   for (x=0;x<6;++x){
  
      if (h[x]==10){
       output+="A";
      }
      if (h[x]==11){
       output+="B";
      }
      if (h[x]==12){
       output+="C";
       }
      if (h[x]==13){
       output+="D";
       }
      if (h[x]==14){
       output+="E";
       }
      if (h[x]==15){
       output+="F";
       }
       else if (h[x]<10){
       output+=h[x];
       
       }    
    }
       return output;
   }

You can use this to get the HEX value for the color of each as it's set.

[dangrace]

Thanks, Bret

I was gonna just take a screen capture and find the colors in photoshop or something. I'll try the code though, that would save time!

Is the extra color gradations/choices a possibility or is that it?

-Dan

[blanius]

I suppose it is but I'm not sure how you'd go about it. You have to select at least two colors for each. It would require a pretty significant investment of time to figure out a suitable way of doing that.

Perhaps someone else might have a suggestion.

[blanius]

How are you going to get the image into photoshop?

[dangrace]

I wasn't thinking straight there...I put the decimal color text boxes back in and now have the client emailing me their decimal numbers when they are done. They seem to be happy enough playing with it

On a side note, I couldn't figure out where to put your hex converter code, Bret. I just used a website that converts the dec to hex. Thanks again for all the help!

-Dan