Editar os estilos e as propriedades de texto usando os controles de expressão.
Use expressões para controlar o estilo de texto em qualquer expressão de texto ou em modelos de animações. Algumas coisas que você pode fazer com expressões são:
Vincular vários títulos e atualizar seus estilos ao mesmo tempo (muito útil para a criação de títulos).
Manter a fonte, o tamanho e o estilo na sincronização em várias camadas de texto.
Fazer alterações globais nas propriedades de texto.
Uma vez definido tudo isso em uma camada de texto, consulte as propriedades dessa camada para aplicar alterações com facilidade ao longo da composição.
O After Effects usa as funções "get" e "set" para ler e gravar valores de propriedades de texto no mecanismo de expressões. Você pode usar expressões para direcionar e definir estilos de fonte, como propriedades de texto em camadas de texto.
Para acessar essas funções para propriedades de texto:
Adicione uma expressão à propriedade texto de origem de uma camada de texto. Para obter mais informações, consulte Introdução à expressão.
No menu suspenso Linguagem de expressão, selecione Texto > Propriedades > Propriedades.
Salvar expressões como predefinições
Selecione Texto de origem com as expressões adicionadas. Em seguida, selecione Animação > Salvar predefinição de animação para reutilizar as expressões em outros projetos. As Predefinições de animação são salvas no painel Efeitos e predefinições.
Ao consultar fontes em expressões, elas devem usar um "system name" especial (ou semelhante). Recomenda-se inserir esse nome especial na caixa de diálogo Texto > Fonte > Selecionar fonte para evitar erros de expressão.
Abra o menu suspenso de Linguagem de expressão e selecione Texto > Fonte. Isso abre uma caixa de diálogo com menus suspensos para selecionar a fonte a ser inserida na expressão.
Sincronização de fontes
As fontes que são referenciadas somente no Editor de expressões não são gravadas como fontes usadas pelo projeto. Para que todas as fontes referenciadas no Editor de expressões sincronizem automaticamente ou preencham a caixa de diálogo Resolver fontes, use todas as fontes em uma camada, mesmo que a origem da camada esteja oculta.
Objeto de estilo
Todas as propriedades de estilo de uma camada de texto existem no objeto de estilo, que é acessado na propriedade Texto de origem usando o seguinte:
// Usar o caminho inteiro até a propriedade Texto de origem text.sourceText.style // Usar o nome genérico da propriedade atual thisProperty.style
Usar estilo é o mesmo que usar qualquer um dos dois exemplos acima, mas isso pode ser confuso se os atributos de estilo de várias camadas de texto estiverem sendo combinados.
Os atributos de estilo de outras camadas de texto também podem ser lidos. Use o ícone de seleção para criar um link para a outra camada de texto no início do primeiro exemplo mostrado acima.
// Acessar o objeto de estilo de uma camada de texto específica thisComp.layer(“Other Layer Name”).text.sourceText.style;
Atributos de texto disponíveis
Os seguintes atributos de estilo de texto podem ser lidos e definidos usando o objeto de estilo:
Fonte
Tamanho da fonte
Negrito falso
Itálico falso
Todas em maiúsculas
Minúsculas
Rastreamento
Entrelinha
Entrelinha automática
Deslocamento da linha de base
Preenchimento (ativar/desativar)
Cor de preenchimento
Traçado (ativar/desativar)
Cor do traçado
Largura do traçado
A propriedade Texto de origem de uma camada de texto é interpretada por expressões como uma sequência de caracteres JavaScript. O texto em si pode ser lido com o sourceText, mas deve ser definido no objeto de estilo com o método setText se os atributos de estilo estiverem sendo modificados. Veja os exemplos abaixo.
Combinar estilo e texto de origem
Combinar estilo e texto de origem
Para retornar tanto os valores do estilo como do texto de origem real, será necessário combinar as funções getStyleAt e setText. Veja a seguir dois exemplos de como escrever essa expressão.
// Para retornar os valores do estilo e o texto de origem real (curto) var sourceTextProperty = thisComp.“MAIN TEXT”).text.sourceText; var newStyle = sourceTextProperty.getStyleAt(0,0); newStyle.setText(sourceTextProperty);
// Para retornar os valores do estilo e o texto de origem real da camada anterior na ordem de empilhamento de camadas var sourceTextProperty = thisComp.layer(index - 1).text.sourceText; var newStyle = sourceTextProperty.getStyleAt(0,0); newStyle.setText(sourceTextProperty);
Fontes em menu suspenso
Vincular fontes ou estilos a um menu suspenso
Você pode usar Menus suspensos para controlar estilos de texto, por exemplo, é possível bloquear camadas de texto para fontes específicas. Isso é útil para diretrizes de marca, modelos, modelos de animações e muito mais:
// Para bloquear uma camada de texto para fontes específicas com um controle de menu suspenso var dropDownMenu = thisComp.layer(“LayerName”).effect(“Dropdown Menu Control”)(“Menu”); switch (dropDownMenu.value) { case 1 : text.sourceText.style.setFont(“Georgia”); break; case 2 : text.sourceText.style.setFont(“Impact”); break; default : text.sourceText.style.setFont(“Tahoma”); }
Camada de texto principal
Obter propriedades de texto da “Camada de texto 1”, mas substituir o tamanho da fonte e a cor de preenchimento
Vincule várias camadas de texto a um controlador de fonte principal para controlar o estilo de texto de várias camadas de uma vez. Crie duas camadas de texto e cole essa expressão no texto de origem de uma delas:
// Para obter todas as propriedades de texto de uma camada de texto
thisComp.layer(“Text Layer 1”).text.sourceText.style;
É possível obter o estilo de uma camada de texto, mas substituir propriedades de texto específicas adicionando valores com as funções do conjunto. Veja a seguir dois exemplos de cor de preenchimento e tamanho da fonte.
// Para obter todas as propriedades de texto de “camada de texto 1”, mas substituir a cor de preenchimento e o tamanho da fonte por valores codificados
var newStyle = thisComp.layer(“Text Layer 1”).text.sourceText.style;
newStyle.setFillColor(hexToRgb(“FF0000”)).setFontSize(100);
// Para obter todas as propriedades de texto da “camada de texto 1”, mas substituir a cor de preenchimento e o tamanho da fonte pelas propriedades de texto atuais da camada
var newStyle = thisComp.layer(“Text Layer 1”).text.sourceText.style;
var currentFillColor = thisProperty.style.fillColor;
var currentFontSize = thisProperty.style.fontSize;
newStyle.setFillColor(currentFillColor).setFontSize(currentFontSize);
Exemplos
Veja a seguir exemplos de como acessar e usar valores de propriedades de texto com expressões.
Fonte
Veja a seguir exemplos de acesso à fonte de uma camada de texto, tamanho da fonte, negrito falso, itálico falso, rastreamento e entrelinha:
// Para retornar o nome da fonte da própria camada de texto text.sourceText.style.font; // Para retornar o nome da fonte que outra camada de texto usa var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.font; // Para retornar o valor do tamanho da fonte da própria camada de texto text.sourceText.style.fontSize; // Para retornar o valor do tamanho da fonte de outra camada de texto var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.fontSize; // Para retornar um valor booleano para que o texto de uma camada seja Negrito falso ou não (verdadeiro ou falso) text.sourceText.style.isFauxBold; // Para retornar um valor booleano para que o texto de uma camada seja falso ou não (verdadeiro ou falso) text.sourceText.style.isFauxItalic; // Para retornar o valor do rastreamento de uma camada de texto como número text.sourceText.style.tracking; // Para retornar o valor da entrelinha de uma camada de texto como texto numérico text.sourceText.style.leading;
Preenchimento
Veja a seguir exemplos de acesso à cor de preenchimento e preenchimento de uma camada de texto:
// Para retornar um valor booleano que especifica se o texto de uma camada tem o preenchimento aplicado (verdadeiro ou falso) text.sourceText.style.applyFill; // Para retornar o valor da cor de preenchimento de uma camada de texto // Por padrão, isso retorna uma matriz dos valores RGB em uma escala de 0 a 1,0 text.sourceText.style.fillColor; // Definir a cor de preenchimento de uma camada de texto com os valores setApplyFill e setFillColor // valores setFillColor são definidos como matriz RGB em uma escala de 0 a 1,0 var newStyle = style.setApplyFill(true); newStyle.setFillColor([1.0, 1.0, 1.0]); // Definir a cor de preenchimento de uma camada de texto substituindo a matriz RGB de 0 a 1,0 por hexToRGB para definir os valores de cor com valores hexadecimais var newStyle = style.setApplyFill(true); newStyle.setFillColor(hexToRgb(“FFFFFF”));
Observação:
Para retornar o valor da cor de preenchimento para R, G ou B de uma camada de texto, adicione 0, 1 ou 2 entre colchetes, respectivamente.
// Para retornar o valor vermelho (R) da cor de preenchimento
text.sourceText.style.fillColor[0];
Traçado
Veja a seguir exemplos de acesso ao traçado, à cor do traçado e à largura do traçado de uma camada de texto:
// Para retornar um valor booleano para ver se o texto da camada tem um traçado aplicado ou não (verdadeiro ou falso) text.sourceText.style.applyStroke;
// Para retornar o valor da cor do traçado de uma camada de texto // Por padrão, essa expressão retorna uma matriz dos valores RGB em uma escala de 0 a 1,0
text.sourceText.style.strokeColor; // Definir a cor do traçado de uma camada de texto com os valores de setApplyStroke e setStrokeColor // os valores setStrokeColor são definidos como matriz RGB em uma escala de 0 a 1,0 var newStyle = style.setApplyStroke(true); newStyle.setStrokeColor([1.0, 0.0, 0.0]);
// Definir a cor do traçado de uma camada de texto substituindo a matriz RGB de 0 a 1,0 por hexToRGB para definir os valores de cor com valores hexadecimais
var newStyle = style.setApplyStroke(true);
newStyle.setStrokeColor(hexToRgb(“FF0000”));
// Para retornar o valor da largura do traçado de uma camada de texto como número
text.sourceText.style.strokeWidth;
Observação:
Para retornar o valor da cor do traçado para R, G ou B de uma camada de texto, adicione 0, 1 ou 2 entre colchetes, respectivamente.
// Para retornar o valor verde (G) da cor do traçado
text.sourceText.style.strokeColor[1];
Funções GET
Use essa função para retornar o valor de estilo de um determinado caractere em um momento específico. "índex" deve ser um número, o índice da letra ou do caractere cujo estilo é necessário. "atTime" também deve ser um número, o tempo dentro da composição para obter o estilo, caso o estilo tenha quadros-chave e mude ao longo do tempo.
text.sourceText.getStyleAt(index, atTime);
Observação:
Usar text.sourceText.style é o mesmo que usar text.sourceText.getStyleAt(0,0).
// Obtém o estilo do primeiro caractere no início da linha do tempo
text.sourceText.getStyleAt(0,0);
Funções SET
Funções SET adicionais que podem ser usadas individualmente ou em combinação com outras para direcionar estilos nas camadas. Cada uma dessas funções é chamada no objeto de estilo de uma propriedade de texto de origem:
// Definir a fonte usada como Arial
style.setFont(“ArialMT”) // Definir o tamanho da fonte como 80 style.setFontSize(80); // Ativar Negrito falso com um estilo booleano style.setFauxBold(true) // Ativar o Itálico falso com um estilo booleano style.setFauxItalics(true) // Ativar todas em maiúsculas com um estilo booleano style.setAllCaps(true) // Ativar minúsculas com um estilo booleano style.setSmallCaps(true) // Definir o rastreamento como número style.setTracking(10); // Definir a entrelinha como número style.setLeading(10); // Ativar entrelinha automática com um estilo booleano style.setAutoLeading(true); // Definir o deslocamento da linha de base como número style.setBaselineShift(10); // Definir a largura do traçado como número style.setStrokeWidth(10);
Todas as funções SET para estilos de texto podem ser encadeadas para definir vários atributos facilmente, sem ter que declarar sempre um novo estilo, como no exemplo a seguir:
Observação:
Não se usa ponto e vírgula até que o último atributo seja definido. Listar cada atributo em sua própria linha ajuda a facilitar a leitura da cadeia inteira.
// Ativar preenchimento, definir cor de preenchimento, definir linha de base, ajustar o rastreamento e ativar entrelinha automática
text.sourceText.style
.setApplyFill(true)
.setFillColor(hexToRgb(“FFFFFF”)) .setBaselineShift(10) .setTracking(25) .setAutoLeading(true);
Dica de expressão de texto do parágrafo
Você pode usar “\r” em uma expressão de cadeia de caracteres para iniciar uma nova linha de texto. Por exemplo, para copiar o texto original de uma camada na mesma camada e para repeti-lo em todos os caracteres em maiúsculas em uma nova linha, use a seguinte expressão:
Adicionar uma camada de texto a uma composição e adicionar uma expressão à sua propriedade Texto de origem pode ser uma excelente forma de examinar os valores de propriedades de outras camadas. Por exemplo, a seguinte expressão em uma propriedade Texto de origem reporta o nome e o valor da propriedade Opacidade para a próxima camada na ordem de empilhamento de camadas:
O exemplo a seguir indica o nome do item de gravação usado como origem da primeira camada de imagem na ordem de empilhamento no tempo atual que tem a opção Vídeo definida:
// Criar sourceFootageName como uma sequência de caracteres em branco var sourceFootageName = “”; // Executar um loop por todas as camadas na composição for (var i = 1; i <= thisComp.numLayers; i++) { // Se i corresponder ao índice dessa camada, continue para o próximo loop if (i == index) { continue; } // Definir myLayer para a iteração atual do loop var myLayer = thisComp.layer(i); // Se myLayer não tiver vídeo ou não estiver ativo, continue para o próximo loop/camada if ( !myLayer.hasVideo || !myLayer.active ) { continue; } // Se myLayer estiver ativo no tempo atual if ( myLayer.active ) { try { // Definir sourceFootageName para nome de origem de myLayer sourceFootageName = myLayer.source.name; } catch ( err ) { // Se myLayer não tiver origem, // definir sourceFootageName para o nome de origem de myLayer sourceFootageName = myLayer.name; } // Parar de executar loop break; } } // Exibir sourceFootageName sourceFootageName;
Mais recursos de expressão
Agora que você compreendeu alguns dos conceitos por trás das expressões, acesse a Comunidade para ver alguns exemplos reais e compartilhar seu trabalho.