[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:03.28,0:00:03.91,Default,,0000,0000,0000,,NATALIE: Ciao.
Dialogue: 0,0:00:03.91,0:00:06.49,Default,,0000,0000,0000,,Mi chiamo Natalie e sono\Nuno degli ingegneri che lavora
Dialogue: 0,0:00:06.49,0:00:07.96,Default,,0000,0000,0000,,allo sviluppo di Google Web Designer.
Dialogue: 0,0:00:07.96,0:00:09.46,Default,,0000,0000,0000,,In questo video, descriveremo
Dialogue: 0,0:00:09.46,0:00:11.42,Default,,0000,0000,0000,,dettagliatamente come\Ncreare animazioni usando
Dialogue: 0,0:00:11.42,0:00:14.47,Default,,0000,0000,0000,,la sequenza temporale\Nin modalità avanzata.
Dialogue: 0,0:00:14.47,0:00:17.17,Default,,0000,0000,0000,,La sequenza temporale si trova\Nin basso per impostazione predefinita.
Dialogue: 0,0:00:17.17,0:00:19.63,Default,,0000,0000,0000,,Ci sono due modalità\Ndi sequenza temporale.
Dialogue: 0,0:00:19.63,0:00:22.48,Default,,0000,0000,0000,,L'altra è la sequenza temporale\Nin modalità veloce.
Dialogue: 0,0:00:22.48,0:00:24.58,Default,,0000,0000,0000,,Molti file si aprono in modalità\Nveloce per impostazione predefinita.
Dialogue: 0,0:00:24.58,0:00:26.89,Default,,0000,0000,0000,,Puoi cambiare modalità\Npremendo questo pulsante
Dialogue: 0,0:00:26.89,0:00:28.10,Default,,0000,0000,0000,,nell'angolo in alto a destra.
Dialogue: 0,0:00:28.10,0:00:31.48,Default,,0000,0000,0000,,Questa è la modalità veloce\Ne questa è la modalità avanzata.
Dialogue: 0,0:00:31.48,0:00:33.48,Default,,0000,0000,0000,,Esiste un altro tutorial\Nper la modalità veloce.
Dialogue: 0,0:00:33.48,0:00:36.01,Default,,0000,0000,0000,,In questo parleremo solo\Ndella modalità avanzata, che
Dialogue: 0,0:00:36.01,0:00:38.23,Default,,0000,0000,0000,,è lo strumento più complesso, ma anche
Dialogue: 0,0:00:38.23,0:00:39.85,Default,,0000,0000,0000,,il più potente dei due.
Dialogue: 0,0:00:39.85,0:00:44.02,Default,,0000,0000,0000,,Come esercizio per il tutorial\Nho questo breve annuncio animato
Dialogue: 0,0:00:44.02,0:00:46.30,Default,,0000,0000,0000,,che ha un'immagine scorrevole,\Ndue caselle di testo
Dialogue: 0,0:00:46.30,0:00:49.57,Default,,0000,0000,0000,,con dissolvenza in entrata e in\Nuscita e un logo alla fine.
Dialogue: 0,0:00:49.57,0:00:51.82,Default,,0000,0000,0000,,In questo video, analizzeremo come creare
Dialogue: 0,0:00:51.82,0:00:54.76,Default,,0000,0000,0000,,l'annuncio in Google Web Designer.
Dialogue: 0,0:00:54.76,0:00:57.43,Default,,0000,0000,0000,,Partiamo dall'animazione\Ndell'immagine scorrevole.
Dialogue: 0,0:00:57.43,0:01:01.26,Default,,0000,0000,0000,,Il primo passaggio è\Ntrascinarla sullo stage
Dialogue: 0,0:01:01.26,0:01:02.76,Default,,0000,0000,0000,,nella posizione in cui deve essere
Dialogue: 0,0:01:02.76,0:01:04.80,Default,,0000,0000,0000,,visualizzata all'inizio dell'animazione.
Dialogue: 0,0:01:04.80,0:01:05.53,Default,,0000,0000,0000,,Così.
Dialogue: 0,0:01:05.53,0:01:07.49,Default,,0000,0000,0000,,Poi la faremo scorrere in questo modo.
Dialogue: 0,0:01:10.97,0:01:13.64,Default,,0000,0000,0000,,Nella sequenza temporale\Nè apparsa una piccola traccia.
Dialogue: 0,0:01:13.64,0:01:15.16,Default,,0000,0000,0000,,Questo è un livello della sequenza
Dialogue: 0,0:01:15.16,0:01:18.46,Default,,0000,0000,0000,,e questa è l'UI per gestire l'animazione
Dialogue: 0,0:01:18.46,0:01:20.77,Default,,0000,0000,0000,,dell'oggetto nel tempo.
Dialogue: 0,0:01:20.77,0:01:22.48,Default,,0000,0000,0000,,L'idea di base per creare animazioni
Dialogue: 0,0:01:22.48,0:01:24.40,Default,,0000,0000,0000,,è definire fotogrammi\Nchiave, cioè punti intermedi
Dialogue: 0,0:01:24.40,0:01:27.49,Default,,0000,0000,0000,,nel tempo, in cui un elemento\Nha valori di proprietà specifici,
Dialogue: 0,0:01:27.49,0:01:30.49,Default,,0000,0000,0000,,e definire le modalità\Ne la lunghezza della transizione
Dialogue: 0,0:01:30.49,0:01:32.18,Default,,0000,0000,0000,,tra tali valori.
Dialogue: 0,0:01:32.18,0:01:36.07,Default,,0000,0000,0000,,Per far scorrere l'immagine,\Ncreeremo vari fotogrammi chiave.
Dialogue: 0,0:01:36.07,0:01:38.15,Default,,0000,0000,0000,,Vogliamo che rimanga\Nin posizione per circa un secondo.
Dialogue: 0,0:01:38.15,0:01:39.85,Default,,0000,0000,0000,,Posiziono un fotogramma chiave a 1 secondo
Dialogue: 0,0:01:39.85,0:01:43.57,Default,,0000,0000,0000,,facendo clic con il pulsante destro e\Nselezionando Inserisci fotogramma chiave
Dialogue: 0,0:01:43.57,0:01:45.40,Default,,0000,0000,0000,,e ripeto l'operazione mezzo secondo dopo.
Dialogue: 0,0:01:45.40,0:01:47.17,Default,,0000,0000,0000,,Poi, in questo fotogramma chiave
Dialogue: 0,0:01:47.17,0:01:48.88,Default,,0000,0000,0000,,faccio scorrere l'immagine
Dialogue: 0,0:01:48.88,0:01:51.77,Default,,0000,0000,0000,,dove voglio che\Nsi trovi in questo momento.
Dialogue: 0,0:01:51.77,0:01:54.35,Default,,0000,0000,0000,,Faccio rimanere l'immagine\Nin posizione per un altro secondo.
Dialogue: 0,0:01:54.35,0:01:56.66,Default,,0000,0000,0000,,Infine, mezzo secondo dopo,
Dialogue: 0,0:01:56.66,0:02:00.82,Default,,0000,0000,0000,,voglio che esca completamente\Ndal campo visivo.
Dialogue: 0,0:02:00.82,0:02:03.43,Default,,0000,0000,0000,,Trascinando la testina,\Npuoi far scorrere la sequenza temporale
Dialogue: 0,0:02:03.43,0:02:05.86,Default,,0000,0000,0000,,e visualizzare un'anteprima\Ndell'animazione.
Dialogue: 0,0:02:05.86,0:02:09.16,Default,,0000,0000,0000,,Puoi anche premere il pulsante\NRiproduci nell'angolo in basso a sinistra
Dialogue: 0,0:02:09.16,0:02:11.53,Default,,0000,0000,0000,,per guardare un'anteprima\Ndirettamente sullo stage.
Dialogue: 0,0:02:14.15,0:02:15.56,Default,,0000,0000,0000,,Sembra che vada bene.
Dialogue: 0,0:02:15.56,0:02:16.83,Default,,0000,0000,0000,,Procediamo.
Dialogue: 0,0:02:16.83,0:02:19.71,Default,,0000,0000,0000,,Nell'esempio, l'immagine\Nentra in dissolvenza
Dialogue: 0,0:02:19.71,0:02:21.57,Default,,0000,0000,0000,,all'inizio, per poi scorrere
Dialogue: 0,0:02:21.57,0:02:23.01,Default,,0000,0000,0000,,in un secondo momento.
Dialogue: 0,0:02:23.01,0:02:25.71,Default,,0000,0000,0000,,Pertanto, dobbiamo creare\Nl'animazione della dissolvenza.
Dialogue: 0,0:02:29.40,0:02:31.87,Default,,0000,0000,0000,,Seleziono tutti i fotogrammi chiave\Ncon lo strumento
Dialogue: 0,0:02:31.87,0:02:33.33,Default,,0000,0000,0000,,Testo scorrevole e li sposto
Dialogue: 0,0:02:33.33,0:02:36.15,Default,,0000,0000,0000,,per fare posto alla dissolvenza\Niniziale, poi inserisco
Dialogue: 0,0:02:36.15,0:02:37.95,Default,,0000,0000,0000,,un fotogramma chiave al minuto zero.
Dialogue: 0,0:02:37.95,0:02:43.17,Default,,0000,0000,0000,,In questo fotogramma,\Nimpostiamo l'opacità dell'elemento
Dialogue: 0,0:02:43.17,0:02:43.72,Default,,0000,0000,0000,,su zero.
Dialogue: 0,0:02:48.68,0:02:52.97,Default,,0000,0000,0000,,In tutti gli altri fotogrammi\Ndeve essere 100%.
Dialogue: 0,0:03:02.02,0:03:03.31,Default,,0000,0000,0000,,Ora aggiungiamo il testo.
Dialogue: 0,0:03:03.31,0:03:06.88,Default,,0000,0000,0000,,Come abbiamo visto,\Nci sono due caselle di testo,
Dialogue: 0,0:03:06.88,0:03:11.99,Default,,0000,0000,0000,,che entrano in dissolvenza una dopo\Nl'altra, mentre l'immagine scorre.
Dialogue: 0,0:03:11.99,0:03:14.08,Default,,0000,0000,0000,,Creiamo la prima casella di testo.
Dialogue: 0,0:03:32.03,0:03:34.46,Default,,0000,0000,0000,,La prima casella di testo\Ndeve entrare in dissolvenza
Dialogue: 0,0:03:34.46,0:03:38.00,Default,,0000,0000,0000,,poi rimanere in posizione\Nper questo periodo
Dialogue: 0,0:03:38.00,0:03:39.58,Default,,0000,0000,0000,,e uscire in dissolvenza.
Dialogue: 0,0:03:39.58,0:03:41.33,Default,,0000,0000,0000,,Per prima cosa impostiamo l'opacità
Dialogue: 0,0:03:41.33,0:03:45.82,Default,,0000,0000,0000,,di questa casella su zero,\Nperché è lo stato iniziale.
Dialogue: 0,0:03:45.82,0:03:50.22,Default,,0000,0000,0000,,Quindi, possiamo creare un\Nfotogramma chiave a mezzo secondo
Dialogue: 0,0:03:50.22,0:03:52.17,Default,,0000,0000,0000,,e impostare l'opacità su 100%.
Dialogue: 0,0:03:52.17,0:03:54.69,Default,,0000,0000,0000,,A un secondo e mezzo,\Ndeve ancora essere 100%.
Dialogue: 0,0:03:54.69,0:03:58.40,Default,,0000,0000,0000,,Poi, a due secondi,\Ndeve tornare a essere 0%.
Dialogue: 0,0:03:58.40,0:04:00.48,Default,,0000,0000,0000,,Basta inserire un fotogramma chiave
Dialogue: 0,0:04:00.48,0:04:01.86,Default,,0000,0000,0000,,come abbiamo fatto prima.
Dialogue: 0,0:04:01.86,0:04:04.50,Default,,0000,0000,0000,,In alternativa, puoi usare\Nla duplicazione del fotogramma.
Dialogue: 0,0:04:04.60,0:04:08.70,Default,,0000,0000,0000,,Se tieni premuto ALT,\Npuoi creare un clone del fotogramma
Dialogue: 0,0:04:08.70,0:04:09.80,Default,,0000,0000,0000,,e trascinarlo in un momento diverso.
Dialogue: 0,0:04:10.10,0:04:13.70,Default,,0000,0000,0000,,Quest'operazione può\Naiutarti a risparmiare tempo.
Dialogue: 0,0:04:14.50,0:04:18.40,Default,,0000,0000,0000,,Aggiungiamo l'ultimo dove\Nla casella di testo esce completamente
Dialogue: 0,0:04:18.40,0:04:19.00,Default,,0000,0000,0000,,in dissolvenza.
Dialogue: 0,0:04:19.20,0:04:20.10,Default,,0000,0000,0000,,Vediamo l'anteprima.
Dialogue: 0,0:04:23.50,0:04:24.00,Default,,0000,0000,0000,,Perfetto.
Dialogue: 0,0:04:24.10,0:04:24.60,Default,,0000,0000,0000,,Ok.
Dialogue: 0,0:04:25.00,0:04:27.90,Default,,0000,0000,0000,,La procedura per la seconda\Ncasella di testo è identica
Dialogue: 0,0:04:27.90,0:04:30.00,Default,,0000,0000,0000,,a quella della prima, solo\Nche il testo è diverso
Dialogue: 0,0:04:30.00,0:04:32.50,Default,,0000,0000,0000,,e la casella appare dopo\Nla dissolvenza della prima.
Dialogue: 0,0:04:32.60,0:04:35.30,Default,,0000,0000,0000,,Quindi, per risparmiare\Nun po' di tempo
Dialogue: 0,0:04:35.40,0:04:37.00,Default,,0000,0000,0000,,duplico questo livello\Ninsieme all'animazione
Dialogue: 0,0:04:37.00,0:04:38.20,Default,,0000,0000,0000,,con un clic con il pulsante destro
Dialogue: 0,0:04:38.40,0:04:40.00,Default,,0000,0000,0000,,e selezionando Duplica livello.
Dialogue: 0,0:04:41.60,0:04:45.70,Default,,0000,0000,0000,,Quindi, uso ancora lo strumento\NTesto scorrevole
Dialogue: 0,0:04:45.70,0:04:48.00,Default,,0000,0000,0000,,per selezionare i fotogrammi\Ne spostarli nella posizione
Dialogue: 0,0:04:48.00,0:04:49.50,Default,,0000,0000,0000,,desiderata per l'animazione.
Dialogue: 0,0:04:51.70,0:04:54.50,Default,,0000,0000,0000,,Posiziono i fotogrammi\Ndove la prima casella di testo
Dialogue: 0,0:04:54.50,0:04:56.50,Default,,0000,0000,0000,,esce in dissolvenza e la\Nseconda entra in dissolvenza
Dialogue: 0,0:04:56.50,0:04:58.00,Default,,0000,0000,0000,,in modo che non si sovrappongano.
Dialogue: 0,0:04:58.20,0:05:00.00,Default,,0000,0000,0000,,Se i fotogrammi sono troppo vicini
Dialogue: 0,0:05:00.00,0:05:03.00,Default,,0000,0000,0000,,puoi utilizzare lo slider\Ndello zoom per una vista
Dialogue: 0,0:05:03.00,0:05:04.80,Default,,0000,0000,0000,,a maggiore risoluzione dell'animazione.
Dialogue: 0,0:05:12.40,0:05:14.60,Default,,0000,0000,0000,,Adesso, possiamo anche\Naggiornare il testo.
Dialogue: 0,0:05:15.00,0:05:17.00,Default,,0000,0000,0000,,In questo momento, le due caselle di testo
Dialogue: 0,0:05:17.00,0:05:18.00,Default,,0000,0000,0000,,sono sovrapposte.
Dialogue: 0,0:05:18.20,0:05:20.50,Default,,0000,0000,0000,,Quindi se faccio clic qui posso modificare
Dialogue: 0,0:05:20.50,0:05:21.50,Default,,0000,0000,0000,,per errore la prima.
Dialogue: 0,0:05:21.70,0:05:22.50,Default,,0000,0000,0000,,Quindi la blocco
Dialogue: 0,0:05:22.50,0:05:24.10,Default,,0000,0000,0000,,così non la attivo per sbaglio.
Dialogue: 0,0:05:24.80,0:05:27.20,Default,,0000,0000,0000,,Così, posso modificare quella sottostante.
Dialogue: 0,0:05:44.00,0:05:46.00,Default,,0000,0000,0000,,L'animazione è praticamente pronta.
Dialogue: 0,0:05:46.50,0:05:47.40,Default,,0000,0000,0000,,Osserviamo
Dialogue: 0,0:05:47.40,0:05:49.70,Default,,0000,0000,0000,,cosa succede tra i fotogrammi chiave.
Dialogue: 0,0:05:49.90,0:05:52.90,Default,,0000,0000,0000,,Tra ogni coppia di fotogrammi\Nappare la scritta Lineare
Dialogue: 0,0:05:53.10,0:05:55.50,Default,,0000,0000,0000,,che si riferisce\Nalla funzione easing di CSS
Dialogue: 0,0:05:55.60,0:05:57.90,Default,,0000,0000,0000,,utilizzata per calcolare\Ni valori intermedi
Dialogue: 0,0:05:57.90,0:05:58.80,Default,,0000,0000,0000,,tra ogni coppia.
Dialogue: 0,0:05:58.90,0:06:02.20,Default,,0000,0000,0000,,Lineare significa che\Ni valori cambiano in modo costante.
Dialogue: 0,0:06:03.00,0:06:04.30,Default,,0000,0000,0000,,Ecco altre opzioni.
Dialogue: 0,0:06:04.50,0:06:06.50,Default,,0000,0000,0000,,Facendo clic con il pulsante\Ndestro puoi vedere
Dialogue: 0,0:06:06.50,0:06:08.60,Default,,0000,0000,0000,,le funzioni di easing standard indicate
Dialogue: 0,0:06:08.60,0:06:09.90,Default,,0000,0000,0000,,nelle specifiche CSS.
Dialogue: 0,0:06:10.60,0:06:13.50,Default,,0000,0000,0000,,In particolare, per questa transizione
Dialogue: 0,0:06:13.50,0:06:16.80,Default,,0000,0000,0000,,in cui l'immagine scorre\Nda una metà alla successiva
Dialogue: 0,0:06:16.90,0:06:19.00,Default,,0000,0000,0000,,è utile scegliere una\Nfunzione di easing diversa
Dialogue: 0,0:06:19.00,0:06:22.20,Default,,0000,0000,0000,,in modo che il movimento\Nacceleri leggermente
Dialogue: 0,0:06:22.20,0:06:23.80,Default,,0000,0000,0000,,all'inizio e poi rallenti
Dialogue: 0,0:06:23.80,0:06:26.20,Default,,0000,0000,0000,,per simulare il movimento
Dialogue: 0,0:06:26.20,0:06:28.30,Default,,0000,0000,0000,,in modo più realistico.
Dialogue: 0,0:06:30.00,0:06:32.50,Default,,0000,0000,0000,,Limito l'area di anteprima\Nsolo alla transizione
Dialogue: 0,0:06:32.50,0:06:38.00,Default,,0000,0000,0000,,trascinando i punti di\Nmanipolazione gialli.
Dialogue: 0,0:06:38.00,0:06:41.60,Default,,0000,0000,0000,,Ora, imposto l'anteprima su Loop
Dialogue: 0,0:06:41.60,0:06:43.90,Default,,0000,0000,0000,,e avvio l'anteprima\Nsolo per quest'area
Dialogue: 0,0:06:43.90,0:06:45.90,Default,,0000,0000,0000,,per risolvere i problemi\Ndella transizione.
Dialogue: 0,0:06:46.80,0:06:48.30,Default,,0000,0000,0000,,Sembra che vada bene.
Dialogue: 0,0:06:48.40,0:06:49.70,Default,,0000,0000,0000,,Invece di utilizzare
Dialogue: 0,0:06:49.70,0:06:51.60,Default,,0000,0000,0000,,una delle funzioni predefinite
Dialogue: 0,0:06:51.60,0:06:52.90,Default,,0000,0000,0000,,creiamone una personalizzata.
Dialogue: 0,0:06:52.90,0:06:55.00,Default,,0000,0000,0000,,Fai clic con il pulsante destro\Ne seleziona Opzioni di easing...
Dialogue: 0,0:06:55.00,0:06:56.60,Default,,0000,0000,0000,,per personalizzare la curva di Bezier
Dialogue: 0,0:06:56.60,0:07:00.90,Default,,0000,0000,0000,,nel modo desiderato, salvarla\Ncome impostazione personalizzata
Dialogue: 0,0:07:04.30,0:07:05.70,Default,,0000,0000,0000,,e fare clic su OK per applicarla.
Dialogue: 0,0:07:09.00,0:07:10.90,Default,,0000,0000,0000,,Con questo termina il nostro tutorial.
Dialogue: 0,0:07:11.30,0:07:12.90,Default,,0000,0000,0000,,Sono disponibili altri tutorial
Dialogue: 0,0:07:12.90,0:07:15.90,Default,,0000,0000,0000,,più approfonditi su altri temi\Nrelativi alle animazioni.
Dialogue: 0,0:07:16.00,0:07:16.80,Default,,0000,0000,0000,,È tutto per ora.
Dialogue: 0,0:07:16.80,0:07:17.50,Default,,0000,0000,0000,,Grazie per l'attenzione.