Modificare stili e proprietà del testo utilizzando i controlli delle espressioni.
Usa le espressioni per controllare lo stile del testo in qualsiasi espressione di testo o nei modelli di grafica animata. Alcune cose che puoi fare con le espressioni sono:
Una volta impostati per un livello di testo, puoi fare riferimento a tali proprietà dei livelli per applicare facilmente le modifiche all’intera composizione.Le espressioni di After Effects utilizzano le proprietà per leggere (ottenere) valori e metodi di funzione dello stile di testo per scriverli (impostare) all’interno del motore per espressioni. In questo modo si possono collegare gli stili tra i livelli di testo o impostare i controlli affinché vengano animati o utilizzati in un modello di grafica animata.
I seguenti attributi di stile del testo possono essere letti e impostati utilizzando l’oggetto di stile:
La proprietà del testo sorgente di un livello Testo viene interpretata dalle espressioni come stringa JavaScript. Il testo stesso può essere letto con sourceText, ma deve essere impostato sull’oggetto di stile con il metodo setText se gli attributi di stile vengono modificati. Studia alcuni esempi.
Usa \r in un’espressione stringa per iniziare una nuova riga di testo. Ad esempio, per copiare il testo originale da un livello sullo stesso livello e ripeterlo su una nuova riga con tutti i caratteri in maiuscolo, utilizza l’espressione seguente:
text.sourceText + “\r” + text.sourceText.toUpperCase()
Oltre agli attributi di stile testo, esistono anche gli attributi paragrafo. Questi possono essere applicati solo all’intero livello di Testo. Gli attributi paragrafo sono disponibili solo in After Effects (Beta).
Quando si fa riferimento ai font nelle espressioni, questi devono utilizzare uno speciale “nome di sistema” (o simile). Si consiglia di inserire questo nome speciale dalla finestra di dialogo Testo > Font > Seleziona font per evitare errori di espressione.
I font a cui si fa riferimento solo nell’Editor di espressioni non vengono registrati come font utilizzati dal progetto. Per garantire che tutti i font a cui si fa riferimento nell’Editor di espressioni si sincronizzino automaticamente o popolino la finestra di dialogo Risolvi font, utilizzali tutti su un livello, anche se la sorgente del livello è nascosta.
Tutte le proprietà di stile per un livello di testo esistono sull’oggetto stile, a cui si accede sulla proprietà del testo sorgente utilizzando quanto segue:
// Utilizzo dell’intero percorso della proprietà del testo sorgente text.sourceText.style // Utilizzo del nome generico per la proprietà corrente thisProperty.style
Usare lo stile da solo è lo stesso che usare uno dei due esempi sopra, ma questo può creare confusione se gli attributi di stile di più livelli di testo vengono combinati.
È possibile leggere anche gli attributi di stile di altri livelli di testo. Usa il selettore per creare un collegamento all’altro livello di testo all’inizio del primo esempio mostrato sopra.
// Accesso all’oggetto stile di un livello di testo specifico thisComp.layer(“Nome altro livello”).text.sourceText.style;
Oltre a utilizzare le espressioni di testo per impostare gli attributi di stile dell’intero livello Testo, puoi impostare anche gli attributi di stile dei singoli caratteri nel livello. Un vantaggio di questo controllo a livello di carattere è la ridisposizione automatica del testo, come ad esempio quando si ridimensionano le lettere, si utilizza l’apice, e un font diverso, come ci si potrebbe aspettare dall’utilizzo dello stile delle sottostringhe dal pannello Carattere.
textourceTexttyle etFont(“Montserrat-Light”) etFont(“Gigantic”, 0, 6)etFont(“Gigantic”, 10, 6)etFont(“Gigantic”, 20)
text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(true, 0, 30)
Per usare la stringa, aggiungi un livello Testo con testo “Primo e secondo posto” e applica quello che segue al Testo sorgente.
text.sourceText.style.setBaselineOption(“superscript”, 1,2).setBaselineOption(“superscript”, 9, 2)
Per restituire i valori sia dello stile che del testo sorgente effettivo alla volta, dovrai combinare le funzioni getStyleAt e setText. Di seguito sono riportati due esempi di come scrivere questa espressione.
// Per restituire i valori sia dello stile che del testo sorgente effettivo alla volta (abbreviato) var sourceTextProperty = thisComp.layer(“MAIN TEXT”).text.sourceText; var newStyle = sourceTextProperty.getStyleAt(0,0); newStyle.setText(sourceTextProperty);
// Per restituire i valori sia dello stile che del testo sorgente effettivo del livello precedente nell’ordine di sovrapposizione dei livelli var sourceTextProperty = thisComp.layer(index - 1).text.sourceText; var newStyle = sourceTextProperty.getStyleAt(0,0); newStyle.setText(sourceTextProperty);
Puoi usare i Menu a discesa per controllare gli stili di testo, come bloccare i livelli di testo su font specifici. Questo è utile per le linee guida del marchio, i modelli, i MOGRTS e molto altro:
// Per bloccare un livello di testo su font specifici con un controllo menu a discesa var dropDownMenu = thisComp.layer(“LayerName”).effect(“Dropdown Menu Control”)(“Menu”); switch (dropDownMenu.value) { case 1 : text.sourceText.style.setFont(“Georgia”); rottura; caso 2: text.sourceText.style.setFont(“Impact”); rottura; default: text.sourceText.style.setFont(“Tahoma”); }
Collega più livelli di testo a un controller di font principale per controllare lo stile del testo di più livelli contemporaneamente. Crea due livelli di testo e incolla questa espressione nel testo sorgente di uno di essi:
// Per ottenere tutte le proprietà del testo da un livello di testo thisCompayer(“Text Layer 1”)extourceTexttyle;
È possibile ottenere lo stile da un livello di testo ma sovrascrivere proprietà di testo specifiche aggiungendo valori con le funzioni Imposta. Di seguito sono riportati due esempi di utilizzo del Colore di riempimento e della Dimensione di font.
// Per ottenere tutte le proprietà del testo da “Text Layer 1” ma sovrascrivere il colore di riempimento e la dimensione del carattere con valori hardcoded var newStyle = thisComp.layer(“Text Layer 1”).text.sourceText.style; newStyle.setFillColor(hexToRgb(“FF0000”)).setFontSize(100);
// Per ottenere tutte le proprietà del testo da “Text Layer 1” ma sovrascrivere il colore di riempimento e la dimensione del carattere con le proprietà di testo correnti del livello 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);
Di seguito sono riportati alcuni esempi di come accedere e utilizzare i valori delle proprietà di testo con le espressioni.
I seguenti sono esempi per accedere al Font di un livello di testo, Dimensione font, Grassetto simulato, Corsivo simulato, Tracciamento e Interlinea:
// Per restituire il nome del Font per il livello di testo stesso text.sourceText.style.font; // Per restituire il nome del Font, un altro livello di testo utilizza var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.font; // Per restituire il valore di Dimensione carattere per il livello di testo stesso text.sourceText.style.fontSize; // Per restituire il valore di Dimensione carattere per un altro livello di testo var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.fontSize; // Per restituire un valore booleano se il testo di un livello è Faux Bold o meno (True o False) text.sourceText.style.isFauxBold; // Per restituire un valore booleano se il testo di un livello è falso corsivo o meno (vero o falso) text.sourceText.style.isFauxItalic; // Per restituire il valore di Tracking di un livello di testo come numero text.sourceText.style.tracking; // Per restituire il valore dell'interlinea di un livello di testo come numero text.sourceText.style.leading;
I seguenti sono esempi per accedere a Riempimento e Colore riempimento di un livello di testo:
// Per restituire un valore booleano se al testo di un livello è applicato Riempimento (True o False) text.sourceText.style.applyFill; // Per restituire il valore del Colore di riempimento di un livello di testo // Per impostazione predefinita, restituisce un array dei valori RGB su una scala da 0 a 1.0 text.sourceText.style.fillColor; // Imposta il colore di riempimento di un livello di testo con setApplyFill e setFillColor // i valori setFillColor sono definiti come un array RGB su una scala tra 0-1.0 var newStyle = style.setApplyFill(true); newStyle.setFillColor([1.0, 1.0, 1.0]); // Imposta il colore di riempimento di un livello di testo sostituendo l'array 0-1.0 RGB con hexToRGB per definire i valori del colore con valori esadecimali var newStyle = style.setApplyFill(true); newStyle.setFillColor(hexToRgb(“FFFFFF”));
// Per restituire il valore rosso (R) del Colore riempimento text.sourceText.style.fillColor[0];
Per restituire il valore del Colore di riempimento per R, G o B di un livello di testo, aggiungi rispettivamente 0, 1 o 2 tra parentesi.
I seguenti sono esempi per accedere a Tratto, Colore tratto e Larghezza tratto di un livello di testo:
// Per restituire un valore booleano che indica se al testo di un livello è stato applicato Tratto (True o False) text.sourceText.style.applyStroke; // Per restituire il valore del Colore tratto di un livello di testo // Per impostazione predefinita, restituisce un array dei valori RGB su una scala da 0 a 1.0 text.sourceText.style.strokeColor; // Imposta il colore del tratto di un livello di testo con setApplyStroke e setStrokeColor // i valori setStrokeColor sono definiti come un array RGB su una scala tra 0-1.0 var newStyle = style.setApplyStroke(true); newStyle.setStrokeColor([1.0, 0.0, 0.0]); // Imposta il colore del tratto di un livello di testo sostituendo l'array 0-1.0 RGB con hexToRGB per definire i valori del colore con valori esadecimali var newStyle = style.setApplyStroke(true); newStyle.setStrokeColor(hexToRgb(“FF0000”)); // Per restituire il valore della larghezza del tratto di un livello di testo come numero text.sourceText.style.strokeWidth;
// Per restituire il valore verde (G) del Colore tratto text.sourceText.style.strokeColor[1];
Per restituire il valore del Colore tratto per R, G o B di un livello Testo, aggiungi rispettivamente 0, 1 o 2 tra parentesi.
Usa questa funzione get per restituire il valore di stile di un particolare carattere in un momento specifico. indice dovrebbe essere un numero, l’indice della lettera o del carattere di cui è necessario lo stile. atTime dovrebbe anche essere un numero, il tempo all’interno della composizione da cui ottenere lo stile nel caso in cui questo sia inserito in un fotogramma chiave e cambi nel tempo.
text.sourceText.getStyleAt(index, atTime);
L’utilizzo di text.sourceText.style equivale all’utilizzo di text.sourceText.getStyleAt(0,0).
// Ottiene lo stile del primo carattere all’inizio della timeline text.sourceText.getStyleAt(0,0);
Imposta funzioni aggiuntive che possono essere utilizzate singolarmente o in combinazione tra loro per attivare gli stili tra livelli. Ognuna di queste funzioni viene chiamata sull’oggetto di stile di una proprietà del testo sorgente :
// Imposta il font utilizzato su Arial styleetFont(“ArialMT”) // Imposta la dimensione del font su 80 styleetFontSize(80 // Abilita il grassetto simulato con un booleano styleetFauxBold(true) // Abilita il corsivo simulato con un booleano styleetFauxItalics(true) // Abilita il maiuscolo con un booleano styleetAllCaps(true) // Abilita il maiuscoletto con un booleano styleetSmallCaps(true) // Imposta la spaziatura come numero styleetTracking(10 // Imposta l’interlinea come numero styleetLeading(10 // Abilita l’interlinea automatica con un booleano styleetAutoLeading(true // Imposta lo spostamento della linea di base come numero styleetBaselineShift(10 // Imposta la larghezza del tratto come numero styleetStrokeWidth(10 // Imposta la prima riga di un livello di testo su grassetto per ingrandirla textourceTexttyleetFontSize(100, 0, 30)etFauxBold(true, 0, 30) // Imposta l’apice per i caratteri textourceTexttyleetBaselineOption(“superscript”,1,2)etBaselineOption(“superscript”, 9, 2)
Tutte le funzioni Imposta per gli stili di testo possono essere concatenate per impostare facilmente più attributi senza dover dichiarare ogni volta un nuovo stile, come nell’esempio seguente:
Non viene utilizzato il punto e virgola finché non viene impostato l’ultimo attributo. Elencare ogni attributo sulla propria riga aiuta a rendere l'intera catena più facile da leggere.
// Abilita il riempimento, imposta il colore di riempimento, imposta la linea di base, imposta la spaziatura e abilita l’interlinea automatica text.sourceText.style .setApplyFill(true) .setFillColor(hexToRgb(“FFFFFF”)) .setBaselineShift(10) .setTracking(25) .setAutoLeading(true);
Aggiungere un livello testo a una composizione e un’espressione alla relativa proprietà Testo sorgente può essere un valido metodo per esaminare i valori delle proprietà di altri livelli. Ad esempio, l’espressione seguente in una proprietà Testo sorgente riporta il nome e il valore della proprietà Opacità per il livello successivo nell’ordine di sovrapposizione dei livelli:
var nextLayer = thisComp.layer (indice 1); nextLayer.name “\rOpacity = ” nextLayer.opacity.value;
L’esempio seguente riporta il nome dell’elemento di metraggio usato come sorgente del livello dell’immagine all’inizio dell’ordine di sovrapposizione nel tempo corrente in cui lo switch Video è impostato:
// Crea sourceFootageName come stringa vuota var sourceFootageName = “”; // Passa attraverso tutti i livelli della composizione per (var i = 1; i <= thisComp.numLayers; i++ ) { // Se i corrisponde all’indice di questo livello, passa al ciclo successivo if (i == index) { continue; } // Imposta myLayer per l’iterazione corrente del ciclo var myLayer = thisComp.layer(i); // Se myLayer non ha video o non è attivo, passa al loop/livello successivo if ( !myLayer.hasVideo || !myLayer.active ) { continue; } // Se myLayer è attivo al momento attuale if ( myLayer.active ) { try { // Imposta sourceFootageName sul nome della sorgente di myLayer sourceFootageName = myLayer.source.name; } catch ( err ) { // Se myLayer non ha un’origine, // imposta sourceFootageName sul nome di myLayer sourceFootageName = myLayer.name; } // Interrompi il ciclo break; } } // Visualizza sourceFootageName sourceFootageName;
Seleziona la proprietà del testo sorgente a cui sono state aggiunte le espressioni. Quindi, seleziona Animazione > Salva animazione predefinita per riutilizzare le espressioni in altri progetti. Le animazioni predefinite vengono salvate nel pannello Effetti e predefiniti.
Per ulteriori informazioni, consulta Panoramica sugli effetti e sui predefiniti di animazione.
Una volta compresi alcuni dei concetti base delle espressioni, visita la community, dove potrai trovare alcuni esempi reali e condividere il tuo lavoro.
Il forum AE Enhancers fornisce molti esempi e molte informazioni sulle espressioni, nonché script e predefiniti di animazione.
