Di Howard Pinsky
Ciao a tutti! Sono Howard Pinsky, Senior XD Evangelist in Adobe. Oggi scopriremo come potete aggiungere video e animazioni Lottie ai vostri prototipi per portarli a nuovi livelli. Iniziamo.
Qui siamo in Adobe XD con una piattaforma di gioco che ho progettato. Per dare ulteriore vita a questa esperienza, aggiungiamo alcuni video e animazioni Lottie. Sulla schermata Home, ho al momento una bella immagine in primo piano, ma è piuttosto statica. L'aggiunta di video a un progetto XD è molto simile all'aggiunta di foto. Possono essere trascinati direttamente sull'area di lavoro o in una forma vuota da mascherare. Dopo averli aggiunti e selezionati, noterete le opzioni di riproduzione video all'interno di Ispettore proprietà. Qui, non solo potrete stabilire quando deve essere riprodotto il video... in questo caso, automaticamente all'avvio dell'anteprima. Ma facendo clic sull'icona a sinistra, viene visualizzato un HUD con ulteriori controlli, tra cui la possibilità di impostare una miniatura personalizzata, di selezionare e visualizzare l'anteprima del video, di accendere o spegnere l'audio, di tagliare il video, cosa a cui arriveremo tra un attimo, e di riprodurlo in loop.
Ora che abbiamo aggiunto un video e scelto quando deve essere riprodotto, lanciandolo in anteprima potremo vederlo in azione. Con questa semplice aggiunta, il nostro prototipo ha una vita completamente nuova. Prima di dare un'occhiata a come aggiungere animazioni Lottie, passiamo a uno degli altri stati all'interno di questo componente in primo piano. Qui ho un altro video che viene riprodotto automaticamente. Ma come potete vedere dall'anteprima, passano alcuni secondi prima che l'aereo entri nella ripresa. Quando abbiamo parlato dell'HUD qualche minuto fa, ho detto che esiste un modo per tagliare i video. Entrando in questa modalità potete impostare i punti iniziale e finale trascinando gli handle. In questo caso, voglio che la riproduzione parta subito prima che inizi l'azione. E quando tutto è impostato, basta fare clic sul segno di spunta per applicare queste modifiche. È bene notare che l'operazione di taglio non è completamente distruttiva, quindi è sempre possibile tornare all'HUD per regolare o annullare le modifiche.
Tornando allo stato predefinito, lancerò l'anteprima ancora una volta. E ora, quando faccio clic sul secondo stato, il video viene riprodotto automaticamente dal nuovo punto di inizio. Ho anche collegato un terzo video. E se torno al primo, c'è una vista estesa che rivela più informazioni. Inoltre, è anche possibile notare che i video presenti tra gli stati di animazione automatica vengono riprodotti continuamente senza interruzioni.
D'accordo, diamo un'occhiata ai file Lottie. Sulla schermata della Community, ho configurato un componente che viene rivelato al passaggio del mouse. E all'interno di questo, ho realizzato un'altra area, che mi piacerebbe usare per un raccoglitore animato di emoji. Modifichiamo il componente principale in modo da aggiungere il nostro contenuto. Entrando nel gruppo impilato, duplicherò velocemente il livello esistente qualche volta, poi passerò a Finder, dove ho delle bellissime animazioni Lottie di varie emoji create da Anna Movin su ui8.net. Come per i video, i file Lottie possono essere trascinati direttamente su un livello Lottie esistente, direttamente sull'area di lavoro o mascherati in forme per definirne le dimensioni. Dopo aver selezionato i livelli, la riproduzione può essere impostata a destra. E per tutti questi, vogliamo che siano riprodotti automaticamente. Una cosa da sottolineare qui è che, a differenza dei video, l'icona a sinistra serve a controllare il looping, cosa che vogliamo per queste interazioni. Perfetto.
Tornando allo stato predefinito di questo componente, ora possiamo visualizzare in anteprima la schermata Community. Passando con il mouse sopra il messaggio, passiamo poi sull'icona delle emoji per rivelare le animazioni Lottie e vederle in azione.
Prima di mostrarvi il prototipo completo, diamo un'occhiata veloce al trigger Fine della riproduzione, che può aiutare ad automatizzare alcune delle interazioni video e Lottie. Prima ho accennato allo stato espanso del componente in primo piano. E in questa sezione ho un pulsante che porta allo stato di download. Ecco, ho incluso un'animazione Lottie che inizia subito dopo la transizione. Ma la domanda che potreste farvi è, cosa succede dopo che l'animazione è stata completata?
Passando alla modalità Prototipo, noterete che al momento è collegato un trigger Tempo, ma è possibile aggiungere una seconda interazione facendo clic sul pulsante blu con il simbolo più. In questo modo è possibile scegliere il trigger Fine della riproduzione all'interno dell'Ispettore proprietà, che ordinerà a XD di eseguire la transizione dopo il completamento dell'animazione video o Lottie. Per questa interazione, dovrebbe bastare una semplice transizione che porta allo stato Riproduzione. Questo trigger funziona anche sulle tavole da disegno. All'interno dello stato di caricamento dello stesso componente, ho aggiunto un'altra animazione Lottie. Oltre al trigger Tempo, è presente un trigger Fine della riproduzione che porta alla schermata Gioco. Ovviamente, tutto questo non significa molto senza vedere tutto in azione. Quindi, tornando allo stato predefinito, lancerò l'anteprima, espanderò questa vista, poi avvierò l'interazione Download. Inoltre, grazie al trigger Fine della riproduzione, il componente passa automaticamente allo stato Riproduzione, dove ora è possibile fare clic per avviare l'animazione di caricamento. E al termine di questa operazione, avviene la transizione della tavola da disegno.
Questi pochi esempi sono solo la punta dell'iceberg di ciò che si può fare con i video e con i file Lottie. Mi occuperò di molti altri casi di utilizzo nelle prossime esercitazioni. Ma prima di concludere, ecco un riepilogo dell'intera esperienza. Buon divertimento.
Date ai prototipi una vita completamente nuova con le immagini in movimento. In questa esercitazione scoprirete come progettare una piattaforma di gioco con video e animazioni Lottie. Trascinate i file video e Lottie direttamente sull'area di lavoro o su una forma vuota, ad esempio una maschera. Regolate le opzioni di riproduzione video in Ispettore proprietà. Aggiungete una miniatura, selezionate e visualizzate in anteprima i video, abilitate l'audio, tagliate i video clip e riproduceteli in loop. Disattivate le interazioni con le transizioni Animazione automatica e guardate i video senza interruzioni. Effettuate le interazioni utilizzando il trigger Fine della riproduzione per passare automaticamente a un altro stato al termine della riproduzione di un'animazione Lottie.
