Il componente Girandola

Il componente Girandola consente di sviluppare creatività in un formato di visualizzazione coinvolgente grazie a un modello 3D interattivo. L'animazione 3D iniziale viene collegata allo scorrimento della pagina man mano che si scorre l'annuncio per visualizzarlo. Gli utenti possono interagire direttamente con il modello ed espandere l'annuncio a schermo intero per visualizzare di più.

Questo componente è destinato all'uso solo nelle creatività Girandola di Display & Video 360 e non è supportato da Microsoft Edge.

Per aggiungere il componente Girandola al tuo progetto:

1. Apri il riquadro Componenti, quindi la cartella Elementi grafici ed effetti.
2. Trascina il componente Girandola sullo stage.
3. Fai doppio clic sul componente per aprire la finestra di dialogo Modifica Girandola.
4. Seleziona il livello Modello 3D nel riquadro Livelli.
5. Nel campo URL del riquadro Proprietà, cerca il file GLB dell'asset 3D che vuoi utilizzare. Puoi anche regolare altre proprietà (vedi sotto).
6. Aggiungi i livelli trascinando i file immagine dal tuo file system sullo stage o nel riquadro Livelli (solo Windows o Mac) oppure facendo clic sul pulsante Importa asset nella parte inferiore del riquadro Raccolta. Nel componente Girandola puoi solo aggiungere immagini come livelli.
7. Posiziona ogni livello nel punto in cui dovrebbe apparire, all'inizio e alla fine dell'animazione, usando le schede Inizio e Fine. Puoi trascinare il livello nel punto desiderato oppure utilizzare i campi Posizione iniziale e Posizione finale nel riquadro Proprietà.
8. Imposta ulteriori opzioni di configurazione necessarie (vedi di seguito).
9. Dopo aver apportato le modifiche desiderate al componente (puoi visualizzare l'anteprima mentre ci lavori), fai clic su Salva. Tornerai alla normale interfaccia di Google Web Designer.

Opzioni di configurazione

Per configurare il componente, fai doppio clic sullo stage oppure selezionalo e fai clic su Impostazioni… nel riquadro Proprietà.

Aggiungere uno stato intermedio

Per un maggiore controllo sull'animazione del componente Girandola, puoi aggiungere uno stato intermedio e modificare le proprietà dei livelli in quel punto.

1. Passa il mouse sulla destra della scheda Inizio e fai clic sul pulsante . Viene visualizzata la scheda Centro.
2. Per impostazione predefinita, lo stato intermedio si trova a metà tra l'inizio e la fine dell'animazione. Puoi regolare la durata dell'animazione.
3. Passa alla scheda Centro per impostare le proprietà dei livelli in questo punto.

Per rimuovere lo stato intermedio, passa il mouse sulla destra della scheda Centro e fai clic su X.

Modificare la durata dell'animazione

La durata dell'animazione del componente Girandola dipende dalla velocità di scorrimento sulla pagina o al di fuori dalla pagina. Per impostazione predefinita, l'animazione inizia quando il bordo superiore del componente inizia a essere visualizzato nella pagina (0%) e termina quando il bordo inferiore scompare dalla parte superiore della pagina (100%). Se hai aggiunto uno stato intermedio, puoi anche stabilire il punto dell'animazione in cui dovrà apparire. Esistono due modi per regolare la durata dell'animazione:

• Nel riquadro Durata dell'animazione, trascina le caselle di inizio, centro e fine o il dispositivo di scorrimento sulla percentuale desiderata.
• Inserisci le percentuali di inizio, centro e fine nei campi del riquadro Durata dell'animazione.

Rendere trasparente lo sfondo del modello 3D

1. Seleziona il modello 3D.
2. Nel riquadro Proprietà, seleziona la casella Sfondo trasparente modello 3D.

Aggiungere un segnale del gesto

1. Seleziona il modello 3D.
2. Nel riquadro Proprietà, fai clic sul menu a discesa Icona e scegli un'immagine dalla Raccolta oppure fai clic su Sfoglia... per selezionare un'immagine dal tuo file system.
3. Se vuoi, inserisci il testo da visualizzare con l'icona nel campo Testo.

Il segnale del gesto appare sul modello 3D per richiedere l'interazione dell'utente.

Ruotare il modello 3D

1. Seleziona il modello 3D.
2. Nel riquadro Proprietà, imposta lo Scarto per l'inizio, la parte centrale e la fine dell'animazione.

Lo scarto è la rotazione del modello attorno a un asse verticale.

Aggiungere livelli immagine

Esistono due modi per aggiungere un livello:

• Trascina un file dal tuo file system sullo stage o nel riquadro Livelli (solo Mac o Windows).
• Fai clic sul pulsante Importa asset nella parte inferiore del riquadro Raccolta.

I nuovi livelli nel componente Girandola devono essere immagini. È consentito un solo livello di modello 3D, che è incluso per impostazione predefinita.

Spostare i livelli

1. Seleziona il livello da spostare.
2. Seleziona la scheda Inizio, Centro o Fine.
3. Posiziona il livello utilizzando uno dei seguenti metodi:
   • Trascina il livello nella nuova posizione.
   • Imposta le proprietà Inizio, Centro o Fine nel riquadro Proprietà. Puoi modificare solo le proprietà che corrispondono alla scheda corrente. Usa i pulsanti Usa posizione iniziale, Usa posizione intermedia o Usa posizione finale per copiare l'altra posizione.

Passa alla scheda Inizio, Centro o Fine per regolare l'altra posizione del livello.

Scambiare le immagini

1. Fai clic con il pulsante destro del mouse sull'immagine sullo stage che vuoi scambiare e seleziona Scambia immagine… nel menu popup.
2. Seleziona un'immagine dalla Raccolta o fai clic sul pulsante Importa file per selezionare un file immagine dal computer.

La nuova immagine sostituirà l'immagine originale. Se in precedenza avevi ridimensionato l'immagine che hai scambiato, per la nuova immagine vengono usate le dimensioni modificate. In caso contrario, vengono usate le dimensioni naturali della nuova immagine.

Riordinare i livelli

Nel riquadro Livelli, trascina un livello fino alla nuova posizione nell'elenco.

L'ordine dei livelli determina quali livelli vengono visualizzati davanti agli altri. I livelli che si trovano in alto nell'elenco vengono visualizzati davanti a quelli posizionati più in basso.

Eliminare i livelli immagine

1. Seleziona il livello che vuoi eliminare.
2. Fai clic sul pulsante Elimina nella parte inferiore del riquadro Livelli.

Il livello del modello 3D è obbligatorio per il componente Girandola e non può essere eliminato.

Ridimensionare i livelli

1. Seleziona il livello da ridimensionare.
2. Posiziona il livello utilizzando uno dei seguenti metodi:
   • Nel riquadro Proprietà, imposta la larghezza e l'altezza del livello. Fai clic sul pulsante Mantieni proporzioni per attivare o disattivare le proporzioni fisse tra la larghezza e l'altezza.
   • Trascina uno dei punti di manipolazione agli angoli e ai bordi del livello sullo stage.

Al livello vengono applicate le dimensioni specificate per l'intera durata dell'animazione.

Modificare l'opacità dei livelli

1. Seleziona il livello da modificare.
2. Nel riquadro Proprietà, imposta l'opacità iniziale o finale inserendo un valore compreso tra 0 e 1 (0 corrisponde a trasparente, 1 a opaco).

Il livello del modello 3D è sempre opaco alla fine dell'animazione.

Modificare l'easing dell'animazione dei livelli

1. Seleziona il livello da modificare.
2. Nel riquadro Proprietà, in Proprietà avanzate, seleziona un tipo di easing dal menu a discesa Easing.

L'easing personalizzato non è disponibile.

Nascondere e mostrare i livelli

Nel riquadro Livelli, fai clic nella casella accanto alla miniatura del livello (sotto il pulsante Nascondi tutti i livelli ).

Puoi nascondere o mostrare tutti i livelli facendo clic sul pulsante Nascondi tutti i livelli .

Nascondere un livello ne impedisce la visualizzazione nell'anteprima della configurazione e ti permette di lavorare più comodamente su un altro livello, ma non influisce sull'anteprima del browser o sulle creatività pubblicate.

Mostrare e nascondere i ghost

1. Seleziona un livello immagine.
2. Nel riquadro Proprietà, in Proprietà avanzate, fai clic sulla casella di controllo Mostra ghost.

Il ghost è una versione trasparente del livello nella posizione che non stai modificando correntemente che ti consente di confrontare visivamente le posizioni iniziali, centrali e finali. I ghost servono solo come riferimento e non vengono mostrati nelle anteprime, né nel file pubblicato.

Proprietà

Proprietà del componente Girandola

Proprietà	Descrizione
Nome	Il nome del componente Girandola.
Fattore di scorrimento	Un numero compreso tra 0 e 1 rappresenta quanto l'utente ha fatto scorrere la pagina. Viene utilizzato solo per la visualizzazione sullo stage di Google Web Designer. Il valore predefinito è 0,5.

Puoi visualizzare e modificare le proprietà dei livelli quando è aperta la finestra di dialogo Modifica Girandola ed è selezionato un livello.

Proprietà del livello Modello 3D

Nota: i componenti Girandola creati prima di Google Web Designer versione 11.0.0 hanno proprietà diverse per il livello Modello 3D.

Proprietà	Descrizione
Nome	Il nome del componente Modello 3D.
URL	Il file GLB di origine per l'asset 3D. Utilizza lo strumento di convalida Khronos glTF Validator per assicurarti che il file GLB sia valido. Per componenti Girandola meno recenti L'URL o l'ID dell'asset 3D. Sono supportati solo gli asset ospitati in Poly per cui è attivata la condivisione tramite link. Il file di asset deve avere una dimensione massima di 2 MB, in quanto gli asset più grandi potrebbero non essere caricati in Google Web Designer. Per ulteriori requisiti, consulta la Guida agli asset 3D. Gli URL devono iniziare con https://poly.google.com/view/. Puoi trovare l'ID alla fine dell'URL della pagina di visualizzazione Poly, ad esempio https://poly.google.com/view/0CkCZrXqCWW. Esempi: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Aggiorna asset : puoi aggiornare l'asset 3D facendo clic su questo pulsante nel campo URL. Se non vedi alcuna modifica, l'asset potrebbe essere ancora in fase di elaborazione e potresti dover attendere un minuto, quindi riprova.
Sfondo trasparente modello 3D	(solo per componenti Girandola meno recenti). Seleziona questa casella se vuoi che lo sfondo del componente Modello 3D sia trasparente.
Segnale del gesto
Icona	L'immagine da visualizzare sul Modello 3D per richiedere all'utente di interagire con il modello. Il segnale del gesto si sposta leggermente per attirare l'attenzione dell'utente fino al raggiungimento del limite di animazione e scompare quando l'utente inizia a interagire con il modello.
Testo	Il testo da visualizzare sotto l'icona segnale del gesto. Si applica solo se è stata specificata un'icona segnale del gesto.
Imposta limite per l'animazione	Seleziona questa casella e imposta un tempo in secondi per limitare la durata dell'animazione del segnale del gesto.
Posizione e dimensioni
Inizio	La distanza del livello dal lato sinistro e da quello superiore del componente Girandola all'inizio dell'animazione. Può essere modificata quando è selezionata la scheda Inizio.
Centro	La distanza del livello dal lato sinistro e da quello superiore del componente Girandola allo stato intermedio dell'animazione. Può essere modificata quando è selezionata la scheda Centro.
Fine	La distanza del livello dal lato sinistro e da quello superiore del componente Girandola alla fine dell'animazione. Può essere modificata quando è selezionata la scheda Fine.
Dimensioni	La larghezza e l'altezza del livello. Viene applicata al livello per l'intera durata dell'animazione.
Rotazione
Scarto	La rotazione iniziale, centrale e finale del modello attorno a un asse verticale, in gradi.
Stile
Opacità	L'opacità iniziale, centrale e finale del livello, rappresentata da un numero compreso tra 0 (trasparente) e 1 (opaco).
Proprietà avanzate
Easing	Il tipo di easing del livello dell'animazione. L'easing personalizzato non è disponibile.

Proprietà del livello immagine

Proprietà	Descrizione
Origine	L'origine del file immagine (non può essere modificata).
URL di uscita	L'URL di uscita quando l'utente fa clic sull'immagine.
Posizione e dimensioni
Inizio	La distanza del livello dal lato sinistro e da quello superiore del componente all'inizio dell'animazione. Può essere modificata quando è selezionata la scheda Inizio.
Centro	La distanza del livello dal lato sinistro e da quello superiore del componente allo stato intermedio dell'animazione. Può essere modificata quando è selezionata la scheda Centro.
Fine	La distanza del livello dal lato sinistro e da quello superiore del componente alla fine dell'animazione. Può essere modificata quando è selezionata la scheda Fine.
Dimensioni	La larghezza e l'altezza del livello. Viene applicata al livello per l'intera durata dell'animazione.
Stile
Opacità	L'opacità iniziale, centrale e finale del livello, rappresentata da un numero compreso tra 0 (trasparente) e 1 (opaco).
Proprietà avanzate
Easing	Il tipo di easing del livello dell'animazione. L'easing personalizzato non è disponibile.
Mostra ghost	Quando è attiva viene mostrata una versione trasparente del livello nelle posizioni non attive (le posizioni sulle quali non stai effettuando modifiche).

Eventi e azioni

Eventi

Gli eventi possono essere utilizzati per attivare altre azioni nell'annuncio. Il componente Girandola invia il seguente evento:

Evento	Descrizione
Componente Girandola caricato	Inviato quando vengono caricati tutti gli asset inclusi nel componente Girandola.

Per selezionare questo evento nella finestra di dialogo Eventi, imposta il componente Girandola come target.

Puoi anche impostare eventi e azioni per il modello 3D che è incluso nel componente Girandola.

Anteprima

Durante la configurazione

Puoi visualizzare l'anteprima del componente Girandola mentre ci stai lavorando:

1. Fai doppio clic sul componente sullo stage per accedere alla modalità di modifica.
2. Fai clic sulla scheda Anteprima in alto.
3. Scorri verso l'alto e verso il basso per vedere il comportamento dei livelli visibili in un esempio di layout di un dispositivo mobile. I livelli nascosti non vengono visualizzati.
4. Non puoi modificare il componente durante l'anteprima. Fai clic sulla scheda Inizio, Centroo Fine, apporta le tue modifiche, quindi fai nuovamente clic sulla scheda Anteprima per vedere le modifiche.

Nel browser

Visualizza l'anteprima del componente nel browser uscendo dalla modalità di modifica del componente e utilizzando il pulsante Anteprima in Google Web Designer. La pagina di anteprima mostra in che modo viene visualizzato l'annuncio su una pagina web con una quantità di contenuti sufficiente per scorrere sopra e sotto il componente.

Puoi selezionare una delle seguenti opzioni di modalità di anteprima:

• Dispositivo: seleziona un dispositivo mobile o Personalizzato.
• Ruota il dispositivo : alterna tra modalità verticale e orizzontale.
• Dimensioni area visibile: se per l'opzione Dispositivo hai selezionato Personalizzato, puoi impostare nuove dimensioni modificando questo campo o trascinando i punti di manipolazione di ridimensionamento dell'anteprima.

Per gli annunci Girandola viene usata sempre la modalità di anteprima Parallasse nel browser.