цветовой заливки скрипта After Effects

Question

У меня есть код ниже, и мне нужно взять палитру цветов в форме цвета и установить ее в качестве цвета заливки для моей фигуры.
Я не могу понять, как получить значение из палитры цветов и поместить его в <== fillGroup.property ("Color"). setValue (................); ==>.

//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.

Это могло бы быть написано немного лучше, но, будучи всего лишь примером, все будет так, как сейчас. :)

Вы можете скачать его с здесь - AE Color Picker и скопировать в папку «ScriptUI Panels».

Быстрый предварительный просмотр: AE Color Предварительный просмотр сборщика

И вот полный сценарий:

'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();