Best way to create a color picker gui in extendscript?

Question

I just started out scripting in javascript and my knowledge is very minimal.

I have a few lines of code in which I create a solid but then I want a GUI color picker to prompt up so the user can choose the color. Here is an example below:

var myComp = app.project.item(1); //points to my comp

var mySolid = myComp.layers.addSolid([10,10,10],"Shape", 10, 10, 1.0); // creates a 10 pixel shape

One of the first parameters to addSolid is the color which we enter an array value which is identified in RGB values. I am wondering if I can over ride this value with a variable attached to a color picker GUI? Are there any objects or methods inside the extendscript utility that can easily create a color picker? Just wondering.

I hope my question is clear. Thank you

fabianmoronzirfas · Accepted Answer · 2014-09-11T07:27:16.147

check out http://yearbookmachine.github.io/esdocs/#/Javascript/$/colorPicker

colorPicker(Number color)
Invokes the platform-specific color selection dialog, and returns the selected color.
Parameters Number color The color to be preselected in the dialog, as 0xRRGGBB, or -1 for the platform default.

var color = $.colorPicker();
alert(color);

Edit1:

AE uses mostly colors in a 4 value Array with values from 0 to 1 [r, g, b, a] But the solid can not have an alpha value.

Edit2 (to make it complete and usable):

// check out [http://yearbookmachine.github.io/esdocs/#/Javascript/$/colorPicker](http://yearbookmachine.github.io/esdocs/#/Javascript/$/colorPicker)

// colorPicker(Number color)  
// Invokes the platform-specific color selection dialog, and returns the selected color.  
// Parameters Number color The color to be preselected in the dialog, as 0xRRGGBB, or -1 for the platform default.  

// convert a hexidecimal color string to 0..255 R,G,B
// found here https://gist.github.com/lrvick/2080648
var hexToRGB = function(hex) {
  var r = hex >> 16;
  var g = hex >> 8 & 0xFF;
  var b = hex & 0xFF;
  return [r, g, b];
};

var color_decimal = $.colorPicker();
$.writeln(color_decimal);

var color_hexadecimal = color_decimal.toString(16);
$.writeln(color_hexadecimal);

var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
$.writeln(color_rgb);

var color_that_ae_add_solid_understands = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];
$.writeln(color_that_ae_add_solid_understands);

// also check out the AE scripting guide on addSolid and its parameters
// https://blogs.adobe.com/aftereffects/files/2012/06/After-Effects-CS6-Scripting-Guide.pdf?file=2012/06/After-Effects-CS6-Scripting-Guide.pdf

var comp = app.project.items.addComp(name = "new comp",
  width = 100,
  height = 100,
  pixelAspect = 1,
  duration = 1,
  frameRate = 25);

var solid = comp.layers.addSolid(color_that_ae_add_solid_understands,
  name = "solid",
  width = 10,
  height = 10,
  pixelAspect = 1,
  duration = 1);

Best way to create a color picker gui in extendscript?

1 Answers1