Il componente Effetto immagine

Questo componente non è supportato per gli annunci HTML AMP, gli annunci video o gli annunci illustrati.

Il componente Effetto immagine ti consente di applicare diversi effetti visivi basati su JavaScript a un'immagine (e in alcuni casi a una coppia di immagini): Prima e dopo, Respiro, Svelamento e Onda.

Image Effect component - Google Web Designer

Per utilizzare il componente Effetto immagine:

1. Apri il riquadro Componenti, quindi la cartella Elementi grafici ed effetti.

2. Fai doppio clic sul componente Effetto immagine o trascinalo sullo stage.

3. Fai doppio clic sul componente sullo stage oppure fai clic sul pulsante Impostazioni… nel riquadro Proprietà. Viene visualizzata la finestra di dialogo "Effetto immagine".

4. Trascina un'immagine nella finestra di dialogo oppure fai clic su Scegli immagini per selezionare un'immagine.

5. Scegli il tipo di effetto immagine desiderato dal menu a discesa nel riquadro Proprietà.

6. Alcuni tipi di effetto utilizzano due immagini. Puoi selezionare l'immagine aggiuntiva dalla Raccolta oppure sfogliare il file system per importare un file immagine.

7. Personalizza l'effetto modificando le sue proprietà (come descritto di seguito).

Proprietà

Oltre alle proprietà dell'intero componente, puoi configurare le proprietà di ogni effetto incluso nel componente.

Proprietà del componente Effetto immagine

Proprietà	Descrizione
Nome	Imposta il nome del componente Effetto immagine.
Ridimensionamento	Determina la modalità di visualizzazione di immagini di diverse dimensioni all'interno del componente. Ulteriori informazioni. Ridimensiona immagine per adattarla Ritaglia immagine per riempire lo spazio Nessuno Estendi immagine per riempire lo spazio
Imposta limite per l'animazione	Se selezionata, interrompe la riproduzione automatica dell'animazione dopo la durata specificata in secondi.

Proprietà per ogni tipo di effetto

Puoi accedere alle proprietà specifiche di ogni tipo di effetto nella finestra di dialogo Effetto immagine. Apri la finestra di dialogo facendo doppio clic sul componente Effetto immagine sullo stage o facendo clic su Impostazioni... nel riquadro Proprietà, quindi seleziona il tipo di effetto per visualizzarne le proprietà.

Nessuno

Nessun effetto applicato all'immagine.

Prima e dopo

L'effetto Prima e dopo applica una transizione di cancellazione tra due immagini che inverte la direzione una volta completata e poi si ripete.

  

Proprietà	Descrizione
Immagini
Di base	L'immagine mostrata sopra o a sinistra del divisore. Utilizza il pulsante Scambia immagini per cambiare l'immagine di base con l'immagine visualizzata.
Visualizzata	L'immagine mostrata sotto o a destra del divisore. Utilizza il pulsante Scambia immagini per cambiare l'immagine visualizzata con l'immagine di base.
Divisore
Angolo	L'angolo della linea divisoria tra le due immagini, compreso tra 0 e 180 gradi. Il valore predefinito è 90 (una linea verticale).
Sfumatura	La morbidezza dei bordi delle immagini lungo il divisore. 1 determina una transizione netta, valori più alti sfocano i bordi.
Interazione	Quando la casella Segui il mouse è selezionata, il divisore segue il cursore del mouse.
Animazione
Riproduzione automatica	Quando la casella Riproduzione automatica è selezionata, l'animazione inizia quando il componente si carica.
Stato iniziale
Posizione	La posizione iniziale del divisore quando inizia l'animazione.
Ritardo	La quantità di tempo che trascorre prima che l'animazione inizi a riprodursi automaticamente, in secondi.

Respiro

L'effetto Respiro espande e contrae l'immagine in modo elastico.

   

Proprietà	Descrizione
Immagini
Di base	L'immagine a cui applicare l'effetto.
Respiro
Velocità	La velocità dell'animazione. 0 non determina alcuna animazione, valori più alti determinano una riproduzione più veloce dell'animazione.
Effetto orizzontale
Espansione	L'entità dell'espansione orizzontale dell'immagine.
Contrazione	L'entità della contrazione orizzontale dell'immagine.
Effetto verticale
Espansione	L'entità dell'espansione verticale dell'immagine.
Contrazione	L'entità della contrazione verticale dell'immagine.
Tempo di attesa
Espansione	La quantità di tempo in cui l'immagine rimane completamente espansa, in secondi.
Contrazione	La quantità di tempo in cui l'immagine rimane completamente contratta, in secondi.
Curve
Orizzontale	Il numero di curve create dalla distorsione orizzontale.
Verticale	Il numero di curve create dalla distorsione verticale.

Svelamento

L'effetto Svelamento mostra la parte corrispondente di una seconda immagine all'interno di un'area di messa a fuoco ellittica.

  

Proprietà	Descrizione
Immagini
Di base	L'immagine visualizzata al di fuori dell'area di messa a fuoco. Utilizza il pulsante Scambia immagini per cambiare l'immagine di base con l'immagine visualizzata.
Visualizzata	L'immagine visualizzata dall'area di messa a fuoco. Utilizza il pulsante Scambia immagini per cambiare l'immagine visualizzata con l'immagine di base.
Focus
Raggio	Il raggio dell'area di messa a fuoco lungo l'asse X e l'asse Y. Utilizza il pulsante Blocca rapporto raggi per mantenere le proporzioni quando modifichi un raggio.
Sfumatura	La morbidezza del bordo dell'area di messa a fuoco. 0 determina un bordo nitido per l'area di messa a fuoco, mentre valori più alti sfocano il bordo.
Effetto	Quando la casella Rimani visualizzata è selezionata, l'immagine visualizzata rimane visibile dopo lo spostamento dell'area di messa a fuoco.
Animazione
Riproduzione automatica	La sequenza di movimento per l'area di messa a fuoco. Vaga (impostazione predefinita): l'area di messa a fuoco si sposta sull'immagine a caso e modifica la direzione per rimanere sull'immagine. Vaga e ritorna: l'area di messa a fuoco si sposta sull'immagine a caso e viene visualizzata sul lato opposto dell'immagine quando raggiunge il bordo. Cerchio: l'area di messa a fuoco si sposta in un cerchio. Nessuno
Velocità	La velocità dell'area di messa a fuoco. 0 non determina alcuna animazione, valori più alti determinano una riproduzione più veloce dell'animazione.
Interazione	Quando la casella Segui il mouse è selezionata, l'area di messa a fuoco segue il puntatore del mouse.

Onda

Consente di animare le sezioni dell'immagine secondo uno schema a onde.

   

Proprietà	Descrizione
Immagini
Di base	L'immagine a cui applicare l'effetto.
Onda
Tipo	La forma d'onda utilizzata nell'effetto. Standard: l'animazione fa ondeggiare l'immagine. Lente: l'animazione si contrae e l'immagine si espande secondo uno schema a onde simmetriche.
Orientamento	La direzione dell'animazione dell'onda. Orizzontale Verticale
Velocità	La velocità dell'animazione delle onde. 0 non determina alcuna animazione, valori più alti determinano una riproduzione più veloce dell'animazione.
Entità	La forza delle onde. 0 non determina alcun effetto, valori più alti determinano onde più pronunciate.
Lunghezza	La distanza tra i picchi dell'onda. Più breve è la lunghezza, maggiore è il numero di onde nell'effetto.
Inverti	Quando la casella Inverti è selezionata, le onde si spostano da sinistra a destra (per l'orientamento orizzontale) o dal basso verso l'alto (per l'orientamento verticale).
Taglio	Quando la casella Taglio è selezionata, l'immagine viene ridisegnata per ogni frame dell'animazione, impedendo un effetto traccia.
Avanzate
Area onda	La parte dell'immagine influenzata dall'effetto Onda.
Piena forza	La parte dell'immagine in cui l'effetto onda ha entità massima. L'entità dell'effetto si assottiglia in altre parti dell'area dell'onda.

Eventi e azioni

Eventi inviati dal componente Effetto immagine

Puoi attivare altre azioni basate sul seguente evento del componente Effetto immagine:

Evento	Descrizione
Riproduzione automatica terminata	Viene inviato quando l'animazione a riproduzione automatica raggiunge il limite di tempo di animazione.

Azioni eseguite dal componente Effetto immagine e da ciascun effetto

Le seguenti azioni del componente Effetto immagine possono essere attivate in risposta ad altri eventi:

• Riproduci
• Metti in pausa

Se selezioni una di queste azioni nella finestra di dialogo Evento, imposta il componente Effetto immagine o l'effetto specifico come destinatario.

Scopri come configurare gli eventi.

Anteprima

Mentre lavori nella finestra di dialogo Effetto immagine, lo stage mostra come il componente viene visualizzato durante l'animazione. Se modifichi una proprietà, l'animazione viene reimpostata all'inizio.

Puoi anche visualizzare l'anteprima del documento nel tuo browser preferito facendo clic su Salva nella parte inferiore della finestra di dialogo, quindi sul pulsante Anteprima.