后效脚本颜色填充设置值

Question

我有下面的代码，我需要从颜色选择器中获取颜色并将其设置为我的形状的填充颜色。
我不知道如何从颜色选择器中获取值并将其放入 。

//ADD ELIPSE FUNCTION
//======
function addElipse() {
var project = app.project;
var comp = project.activeItem;

if(comp == null) {
comp = project.items.addComp("CompCreated", 1920, 1080, 1, 30, 30);
}
comp.openInViewer();

var shapeLayer = comp.layers.addShape();
var elipseGroup = shapeLayer.property("Contents").addProperty("ADBE Vector Shape - Ellipse");
elipseGroup.property("Size").setValue([300,300]);
var fillGroup = shapeLayer.property("Contents").addProperty("ADBE Vector Graphic - Fill");
fillGroup.property("Color").setValue(...........................); }
//COLOR PICKER
//======
function colorpicker (result_color) {
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();
if (color_decimal<0) return null; // added this line, to handle the case where the dialog is dismissed (else: errors)
var color_hexadecimal = color_decimal.toString(16);
var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
var result_color = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];
return result_color;
}

function customDraw()
{ with( this ) {
graphics.drawOSControl();
graphics.rectPath(0,0,size[0],size[1]);
graphics.fillPath(fillBrush);
if( text ) graphics.drawString(text,textPen,(size[0]-graphics.measureString (text,graphics.font,size[0])[0])/2,3,graphics.font);
}}

function onButtonClick(){

var newcolor1 = colorpicker ();
if (newcolor1===null) return; // dialog dismissed
this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, newcolor1);
// no need to call w.update()
// no need to reassign onDraw for the button, it's done already
// call onDraw for the button:
this.notify("onDraw");
}

colorbutton1.onClick = onButtonClick;

//
//======

dialog.show();

Answer 1

我制作了一个简单的示例脚本，其中包含更多功能，希望能回答您的问题。

它会更改所有选定属性的颜色值。

如果属性是动画的，它会在当前合成时间添加一个新的关键帧。

如果找到表达式，用户将需要确认属性值的更改。在这种情况下，如果颜色由表达式设置，则可能不会更改颜色。只有属性值会不同。

如果所选属性不是颜色属性，它当然会被跳过。

在mouseover 事件中，按钮的颜色将更改为第一个选定属性的颜色值。

整个脚本封装在aecolorpicker 下，因此可以轻松扩展。

所有颜色转换均由aecolorpicker.prototype.colorUtils完成。

它本来可以写得更好一点，但只是一个例子，它会按照现在的方式进行。 :)

您可以从here - AE Colour Picker 下载它并将其复制到“ScriptUI Panels”文件夹中。

快速预览：AE Colour Picker preview

这是完整的脚本：

'use strict';

function aecolorpicker () {}

aecolorpicker.prototype.root = this;

aecolorpicker.prototype.ui = function (thisObj)
{
  var win = {};

  win.pal = thisObj instanceof Panel ? thisObj : new Window('palette', 'AE Colour Picker', undefined, {resizeable: true});

  if (win.pal === null) return win.pal;

  var res = "Group {orientation: 'column', alignment: ['fill', 'fill'], preferredSize: [128, 64], margin: 0, spacing: 0, \
    btnColor: Button {size:[100, 50], alignment: ['fill', 'fill'], properties: {style: 'toolbutton'}}\
  }";

  win.ui = win.pal.add(res);
  win.btnColor = win.ui.btnColor;

  win.pal.layout.layout(true);

  win.pal.onResizing = win.pal.onResize = function ()
  {
    this.layout.resize();
  };

  if (win.pal !== null && win.pal instanceof Window)
  {
    win.pal.show();
  }

  return win;
};

aecolorpicker.prototype.colorUtils = {
  "AdobeRGBA2HEX": function (rgba)
  {
    var pad2 = function (c)
    {
      return c.length == 1 ? '0' + c : '' + c;
    };

    var convertDecimalToHex = function (d)
    {
      return Math.round(parseFloat(d) * 255).toString(16);
    };

    var hex =
    [
      pad2(Math.round(rgba[0] * 255).toString(16)),
      pad2(Math.round(rgba[1] * 255).toString(16)),
      pad2(Math.round(rgba[2] * 255).toString(16))
    ];

    return '#' + hex.join('').toUpperCase();
  },

  "HEX2AdobeRGBA": function (hex)
  {
    if (hex.charAt(0) === '#') hex = hex.substr(1);

    if ((hex.length < 2) || (hex.length > 6)) return null;

    var
    values = hex.split(''),
    r,
    g,
    b;

    if (hex.length === 2)
    {
      r = parseInt(values[0].toString() + values[1].toString(), 16);
      g = r;
      b = r;
    }
    else if (hex.length === 3)
    {
      r = parseInt(values[0].toString() + values[0].toString(), 16);
      g = parseInt(values[1].toString() + values[1].toString(), 16);
      b = parseInt(values[2].toString() + values[2].toString(), 16);
    }
    else if (hex.length === 6)
    {
      r = parseInt(values[0].toString() + values[1].toString(), 16);
      g = parseInt(values[2].toString() + values[3].toString(), 16);
      b = parseInt(values[4].toString() + values[5].toString(), 16);
    }
    else
    {
      return null;
    }

    return [
      r / 255,
      g / 255,
      b / 255,
      1
    ];
  },

  "CP2AdobeRGBA": function (cpdec)
  {
    return [
      (parseInt(cpdec.toString(16), 16) >> 16) / 255,
      (parseInt(cpdec.toString(16), 16) >> 8 & 0xFF) / 255,
      (parseInt(cpdec.toString(16), 16) & 0xFF) / 255,
      1
    ];
  },

  "luminance": function (hex, lum)
  {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];

    lum = lum || 0;

    var result = "#", c, i;

    for (i = 0; i < 3; i++)
    {
      c = parseInt(hex.substr(i * 2, 2), 16);
      c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
      result += ('00' + c).substr(c.length);
    }

    return result;
  }
};

aecolorpicker.prototype.getFirstSelPropColorValue = function ()
{
  if (app.project.activeItem instanceof CompItem)
  {
    var curLayer, curProp;

    if (app.project.activeItem.selectedLayers.length > 0)
    {
      curLayer = app.project.activeItem.selectedLayers[0];

      if (curLayer.selectedProperties.length > 0)
      {
        if (!curLayer.selectedProperties[0].hasOwnProperty('canAddProperty')) curProp = curLayer.selectedProperties[0];
        else if (curLayer.selectedProperties.length > 1) curProp = curLayer.selectedProperties[1];
        else return null;

        /*
        6212 - color propertyType
        6418 - color propertyValueType
        */
        if (curProp.propertyValueType === 6418) return curProp.valueAtTime(app.project.activeItem.time, false);
      }
    }
  }

  return null;
};

aecolorpicker.prototype.setSelPropsColorValue = function (rgba)
{
  if (app.project.activeItem instanceof CompItem)
  {
    var curLayer, curProp;

    for (var p = 0, pLen = app.project.activeItem.selectedLayers.length; p < pLen; p++)
    {
      curLayer = app.project.activeItem.selectedLayers[p];

      for (var i = 0, iLen = curLayer.selectedProperties.length; i < iLen; i++)
      {
        curProp = curLayer.selectedProperties[i];

        if (!curProp.hasOwnProperty('canAddProperty'))
        {
          /*
          6212 - color propertyType
          6418 - color propertyValueType
          */
          if (curProp.propertyValueType === 6418)
          {
            if (curProp.expression.replace(/\s/g, '').length > 0)
            {
              var c = confirm('Expression found!\n\nLayer name: ' + curLayer.name +
              '\nLayer index: ' + curLayer.index +
              String(curProp.parentProperty.isEffect ? '\nEffect: ' : '\nProperty Group: ') + curProp.parentProperty.name +
              String(curProp.parentProperty.isEffect ? '\nEffect Index: ' : '\nProperty Group Index: ') + curProp.parentProperty.propertyIndex +
              '\nProperty: ' + curProp.name +
              '\n\nAre you sure you want to change this color value?');
              if (c)
              {
                if (curProp.numKeys > 0) curProp.setValueAtTime(app.project.activeItem.time, rgba);
                else curProp.setValue(rgba);
              }
            }
            else
            {
              if (curProp.numKeys > 0) curProp.setValueAtTime(app.project.activeItem.time, rgba);
              else curProp.setValue(rgba);
            }
          }
        }
      }
    }
  }
};

aecolorpicker.prototype.run = function()
{
  var
  __self = this,
  ui = __self.ui(__self.root);

  ui.btnColor.helpTip = 'Set the color value of the selected properties.';

  // Set the default button color
  ui.btnColor.fillBrush = ui.btnColor.graphics.newBrush(ui.btnColor.graphics.BrushType.SOLID_COLOR, [0.3, 0.3, 0.3, 1]);

  ui.btnColor.onDraw = function ()
  {
    this.graphics.rectPath(0, 0, this.size[0], this.size[1]);
    this.graphics.fillPath(this.fillBrush);
  };
  ui.btnColor.onClick = function ()
  {
    var userColorAdobeRGBA = __self.colorUtils.CP2AdobeRGBA($.colorPicker());

    this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, userColorAdobeRGBA);
    this.notify("onDraw");
    __self.setSelPropsColorValue(userColorAdobeRGBA);
  };
  ui.btnColor.addEventListener('mouseover', function ()
  {
    var curColor = __self.getFirstSelPropColorValue() || this.fillBrush.color;

    this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, __self.colorUtils.HEX2AdobeRGBA(__self.colorUtils.luminance(__self.colorUtils.AdobeRGBA2HEX(curColor), 0.2)));
    this.notify("onDraw");
  });
  ui.btnColor.addEventListener('mouseout', function ()
  {
    var curColor = __self.getFirstSelPropColorValue() || this.fillBrush.color;

    this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, __self.colorUtils.HEX2AdobeRGBA(__self.colorUtils.luminance(__self.colorUtils.AdobeRGBA2HEX(curColor), -0.2)));
    this.notify("onDraw");
  });
};

var aecp = new aecolorpicker();

aecp.run();