Usar expressões para criar listas suspensas em Modelos de animações

Crie Modelos de animações com listas suspensas que permitem aos usuários personalizá-los no Premiere Pro.

controle de menu suspenso

Ao criar um Modelo de animações (MOGRT), você pode manter suas propriedades flexíveis e habilitar editores para personalizá-las no Premiere Pro. Assim, é possível criar controles deslizantes e caixas de seleção. Você também pode criá-los usando as listas suspensas com diferentes opções.

Criar listas suspensas é benéfico porque fornece mais controles de menu e uma experiência de edição mais simples para editores do Premiere Pro. É possível salvar as configurações de controle suspenso como modelo e usá-las posteriormente em diferentes composições e projetos.

Diferentes opções de texto são exibidas ao usar as listas suspensas no After Effects
Diferentes opções de texto são exibidas ao usar as listas suspensas no After Effects

Por que criar listas suspensas

Ofereça controles deslizantes e caixas de seleção como opções de edição a editores do Premiere Pro, mas elas podem ser menos intuitivas e mais demoradas. Nesses casos, as listas suspensas podem ser úteis. Use-as para permitir que um editor do Premiere Pro escolha a partir de:

 Uma seleção de temas de cor: por exemplo, você pode criar uma lista suspensa para um grupo de cores que deseja usar para um título de filme.

 Posições ou designs diferentes: por exemplo, adicione um menu suspenso para a posição de um terço inferior, como à esquerda ou à direita.

 Opções de animação: por exemplo, adicione um menu suspenso para selecionar diferentes durações de animação.

 Opções de texto ou ativo: por exemplo, adicione uma lista suspensa para os diferentes dias da semana. Isso impede a necessidade de redigitar o texto de origem e também reduz a chance de erros pós produção.

Configurar um controle de lista suspensa

Use o efeito Controle de menu suspenso para criar listas suspensas. Para entender como esse recurso funciona, siga estas etapas:

  1. Criar uma composição.
    Clique no ícone de composição na parte inferior do painel Projetos ou selecione Nova composição na tela inicial.

  2. Para adicionar uma camada de texto, selecione Camada > Novo > Texto e digite o texto que deseja adicionar. Neste exemplo, vamos escrever Morning.

  3. Abra o painel Efeitos e predefinições, pesquise Cor de preenchimento e solte-o na camada de texto.

  4. Assim que tiver todas as camadas definidas, no painel Efeitos e predefinições, pesquise por Controle de menu suspenso e solte-as nas camadas. Você também pode acessá-las em Efeito > Controles de expressão > Controle de menu suspenso.

    No painel Linha do tempo, gire para abrir as propriedades da camada de texto e clique com a tecla Alt pressionada no ícone de cronômetro ao lado do Texto de origem.

    No campo de texto de expressão, copie o seguinte trecho de expressão que altera o texto de origem:

    var x = effect("Weekday")("Menu").value;

    if ( x === 1 ) {
    "Morning";
    } else if ( x === 2 ) {
    "Evening";

    } else if ( x === 3 ) {

    "Night";

    }

    Use a ferramenta de seleção e vincule o menu suspenso, nomeado como Dia da semana, à propriedade Texto de origem.

    No painel Controles de efeitos, clique em Editar. O controle de menu suspenso vem com um menu padrão com três itens: Item 1, Item 2, Item 3. Use essa opção para nomear suas opções de menu. Você também pode adicionar mais opções ao menu com o ícone +.

  5. Adicione outro menu suspenso e o renomeie como Cor. Em seguida, gire para abrir a camada Cor de preenchimento e clique com a tecla Alt pressionada na propriedade Cor. Para alterar a cor do texto, no campo de expressão, copie o seguinte texto:

    dropDownIndex = effect("Color options")("Menu").value;

    switch ( dropDownIndex )
    {
    case 1: hexToRgb("FF3211");
    break;
    case 2: hexToRgb("CC1234");
    break;
    default: hexToRgb("BBB001")
    };

    Use a ferramenta de seleção e vincule o menu suspenso à propriedade Cor. Nomeie essa lista suspensa como Opções de cor. É possível alterar a cor de acordo com o gráfico de cores ao lado da propriedade de cor. 

  6. Para vincular as duas propriedades do menu suspenso uma a outra, use a ferramenta de seleção Opções de cor e vincule-a ao menu suspenso Dia da semana. O menu suspenso Opções de cor faz referência ao menu suspenso Dia da semana, o que significa que o dia útil selecionado também altera a cor do texto.

  7. Arraste o menu suspenso para o painel Gráficos essenciais e use-o para criar Modelos de animações.

Para ajudá-lo a começar a criar um projeto, baixe este arquivo de amostra.

Download

Expressões de exemplo para controles de lista suspensa

Assim como ocorre com outros controles de expressão, como controles deslizantes, os valores do menu são chamados de índices nas expressões. É possível copiar da expressão de amostra abaixo no campo de texto de expressões para obter resultados diferentes com o menu suspenso.

Observação:

Os nomes dos itens de menu em si não são lidos pela expressão. Em vez disso, ele está lendo o índice, o que significa a posição hierárquica do item de menu na lista.

Amostra 1: defina a cor de uma camada e faça referência a ela aos itens de menu no Controle suspenso

Amostra 2

dropDownIndex = thisComp.layer("Null 2").effect("Dropdown Menu Control")("Menu").value;

alterar ( dropDownIndex )
{
caso 1: hexToRgb("FF4678");
break;
caso 2: hexToRgb("CC1234");
break;
padrão: hexToRgb("BBB007")
};

Alterar cores usando o trecho de expressão
Alterar cores usando o trecho de expressão

dropDownIndex = thisComp.layer("Null 2").effect("Dropdown Menu Control")("Menu").value;

switch ( dropDownIndex )
{
case 1: hexToRgb("FF3211");
break;
case 2: hexToRgb("CC1234");
break;
default: hexToRgb("BBB001")
};

Exemplo 2: usar o texto de origem com um controle de menu suspenso

Se você tiver um menu suspenso com os seguintes itens de menu nesta ordem:

  1. Segunda-feira
  2. Terça-feira
  3. Quarta-feira

Segunda-feira é o índice 1, Terça-feira é 2, contanto que seja o segundo item na lista. Se você renomear Terça-feira como outra coisa, a expressão não é interrompida, pois ela ainda está no índice 2.

Aqui está um exemplo simples para usar texto de origem com um controle de menu suspenso:

x = comp("CompName").layer("LayerName").effect("Controle de menu suspenso")("Menu");

if (x == 1) {

text.sourceText = ("Segunda-feira");

se (x == 2) {

text.sourceText = ("Terça-feira");

}

se (x == 3) { 

text.sourceText = ("Quarta-feira");

}

Amostra 3: defina o texto de origem de uma camada de texto e faça referência a ele para os itens de menu no controle suspenso

var listItems = [

"Cordeiros",
"Filhotes",
"Não é uma coisa",
];
var dropDownValue = effect("Controle de menu suspenso")("Menu").value;
listItems[ dropDownValue - 1 ];

 

var x = effect("Controle de menu suspenso")("Menu").value;if ( x === 1 ) {
"Cordeiros";
} else if ( x === 2 ) {
"Filhotes";
} else {
"Não é uma coisa";
}

 

x = effect("Controle de menu suspenso")("Menu").value;
switch (x) {
case 1 : "cão";
break;
case 2 : "gato";
break;
default : "padrão" }

Itens a serem considerados ao usar controles de lista suspensa

  • Sempre renomeie o controle de lista suspensa com algo que reflita melhor o conteúdo.
  • As opções de menu no Controle de menu suspenso não são maiúsculas ou diferenciam maiúsculas de minúsculas. Isso significa que, mesmo que você renomeie os itens de menu, a expressão não será interrompida. No entanto, eles são sensíveis à posição, portanto, alterar a posição da opção de menu interrompe a expressão.
  • Mantenha um equilíbrio entre os diferentes componentes usados nos Modelos de animações. Para as ocorrências em que há intervalos, use os controles deslizantes, já em casos em que há opções como Sim ou não, use as caixas de seleção. 
  • O menu suspenso ao qual você vincula todos os outros menus suspensos para se tornarem o principal. Os menus suspensos na composição fazem referência ao menu principal e se comportam de acordo.

Suporte de script para Controle de menu suspenso

Property.setPropertyParameters()

Método:

app.project.item(index).layer(index).propertySpec.setPropertyParameters([param-array])

Descrição:

Define parâmetros para uma Propriedade.

Observações

  • O efeito Controle de menu suspenso (matchname: Controle suspenso ADBE) é a única propriedade que permite que os parâmetros sejam definidos. 
  • Uma exceção ocorre sempre que esse método falha.
  • Para verificar se uma propriedade permite que o parâmetro seja definido, marque isDropdownEffect antes de chamar esse método (consulte Property.isDropdownEffect.)

Detalhes do parâmetro:

param-array

Uma matriz de strings. Esse método substituirá o conjunto existente de itens de menu pela matriz de strings fornecida. 

Existem algumas restrições nas strings especificadas como itens de menu:

1.     Não são permitidas strings de itens vazios

2.     Não são permitidas strings de itens duplicados

3.     O caractere “|” não é permitido nas strings de itens.

4.     Apenas strings são permitidas.

5.     As strings de itens devem estar codificadas em ASCII ou MultiByte na página de código atual. Em outras palavras, as strings de itens devem ser fornecidas no script do sistema em execução. Por exemplo: especificar as strings de itens em japonês ao executar o script em um sistema em inglês criará o efeito de menu suspenso com caracteres ilegíveis nas strings de itens. 

Observação: a string “(-” - pode ser especificada como as strings de itens. Eles serão exibidos como linhas separadoras no menu suspenso. O autor precisa lembrar que as linhas separadoras reivindicarão um índice para cada uma delas. 

Exemplo:

Dropdowneffect = Dropdowneffect.setPropertyParameters(["Segunda-feira", "Quarta-feira", "Sexta-feira", "Domingo"]);

A instrução acima editará o menu suspenso para que Segunda-feira, Quarta-feira, Sexta-feira, Domingo sejam os itens. A propriedade retornada é a atualizada e deve ser aplicada para todas as outras utilizações.

Retorna:

A propriedade atualizada. O usuário deve observar que o objeto de propriedade em que esse método é chamado se torna inválido devido à implementação interna e, portanto, a propriedade retornada deve ser aplicada para todas as outras utilizações.

Property.isDropdownEffect

Método:

app.project.item(index).layer(index).propertySpec.isDropdownEffect

Descrição:

Retorna true se a propriedade for um efeito Controle de menu suspenso.

Exemplos:

appliedEffect.property("Menu").isDropdownEffect  // retorna true

appliedEffect.property("Color").isDropdownEffect  // retorna false  

appliedEffect.property("Feather").isDropdownEffect  // retorn false

Return:

Booleano

Tem uma pergunta ou uma ideia?

Se você tiver dúvidas ou uma ideia para compartilhar, participe de nossa Comunidade do After Effects. Adoraríamos saber sua opinião e ver seus Modelos de animações.

Logotipo da Adobe

Fazer logon em sua conta