Sequenze di immagini

Una sequenza di immagini è una serie di fotogrammi, per esempio un prodotto che ruota o un edificio che cresce, disegnati uno alla volta mentre la pagina scorre. Servono due pezzi: l'elemento Sequenza di immagini, che contiene i fotogrammi, e la scena Sequenza allo scorrimento, che li lega allo scorrimento. Qui si parte da una cartella di fotogrammi e si arriva alla sequenza pubblicata.

Prima di iniziare #

• Ti serve il ruolo Editor di contenuti o Amministratore.
• Prepara i fotogrammi in JPEG, PNG, GIF o WebP, tutti della stessa misura, con nomi che li mettano in ordine: frame-1.webp … frame-72.webp va bene, perché l'ordine è naturale (frame-2 viene prima di frame-10).
• Tieni bassi numero e peso. Una sequenza disegna al massimo 240 fotogrammi, e ogni visitatore che apre la pagina li scarica tutti. Come riferimento, la landing di Libretto usa 72 fotogrammi da 1280×800 in WebP, sotto i 45 KB ciascuno.
• Metti i fotogrammi in un unico file .zip, senza cartelle al suo interno.

Caricare i fotogrammi #

1. Nella barra laterale del sito apri Media.
2. Scegli Carica file, o trascina lo .zip sulla pagina. Uno zip di immagini diventa una cartella con il nome dello zip, con le immagini in ordine di nome.
3. Aspetta che nell'elenco dei caricamenti compaia Caricato.

Lo zip può contenere fino a 300 immagini e pesare fino a 200 MB. Ogni immagine al suo interno ha lo stesso limite di 5 MB di un caricamento singolo: una sola immagine più grande ferma tutto lo zip. Tutto ciò che non è un'immagine JPEG, PNG, GIF o WebP (cartelle, file __MACOSX, file nascosti, SVG, PDF) resta fuori, e l'elenco lo dice: "… elementi di … non sono immagini e sono stati lasciati fuori".

Aggiungere la sequenza alla pagina #

1. Apri la pagina nell'editor. Nei Livelli scegli Inserisci con una sezione selezionata, oppure Aggiungi sezione per una sezione nuova.
2. Nel pannello Aggiungi cerca "sequenza" e scegli Sequenza di immagini.
3. Nell'ispettore compila Testo alternativo: che cosa mostra la sequenza, per chi non può vederla. È obbligatorio.
4. In Fotogrammi aggiungi i fotogrammi. Nella scelta dei media indica la cartella in Cartella, poi Seleziona tutte nella cartella, poi Seleziona …. I fotogrammi entrano in ordine di nome.
5. Imposta Adattamento: Riempi taglia i bordi dei fotogrammi per riempire l'elemento (è il valore iniziale), Intero mostra ogni fotogramma per intero.
6. Dai all'elemento misura e proporzioni nella scheda Stili, come a qualsiasi altro elemento.

Finché non c'è una scena, l'elemento mostra il primo fotogramma e resta fermo.

Farla muovere con lo scorrimento #

1. Con la sequenza selezionata apri Movimento, scegli Aggiungi una scena e poi Sequenza allo scorrimento.
2. Regola i parametri:

1. Controllala dall'inizio alla fine con il cursore della barra Movimento sotto l'anteprima.

Un intervallo più lungo fa scorrere i fotogrammi più lentamente. Con Ferma sullo schermo mentre scorre su Sì, l'intervallo è anche il tempo in cui la sequenza resta ferma: 2 schermate vuol dire che il visitatore la attraversa scorrendo per due altezze di schermo.

Fotogrammi da uno schema di indirizzi (avanzato) #

Se i fotogrammi sono a indirizzi numerati, apri i campi avanzati invece di elencarli:

• Schema dell'indirizzo dei fotogrammi: l'indirizzo con {n} al posto del numero, come /media/turn/frame-{n}.webp.
• Numero di fotogrammi: da 2 a 240.
• Numero del primo fotogramma: il numero da cui parte lo schema.
• Cifre del numero: 3 scrive 007; 0 scrive il numero così com'è.

I fotogrammi dello schema seguono quelli elencati in Fotogrammi, e il totale si ferma a 240.

Cosa vedi #

• Prima che partano gli script della pagina, e per chi naviga senza JavaScript, il primo fotogramma compare come un'immagine normale, con il suo testo alternativo.
• Quando i fotogrammi cominciano ad arrivare, un canvas prende il posto dell'immagine e disegna il fotogramma che corrisponde allo scorrimento. Si caricano prima il primo e l'ultimo, poi quelli in mezzo, pochi alla volta; finché un fotogramma non è arrivato, lo sostituisce il più vicino già caricato.
• Chi ha chiesto movimento ridotto vede l'ultimo fotogramma, fermo. Per controllarlo spunta Riduci il movimento nella barra Movimento dell'anteprima.

Errori comuni #

• Tutti i fotogrammi cominciano a scaricarsi appena si apre la pagina, non quando il visitatore arriva alla sequenza. Una sequenza pesante rallenta tutta la pagina sul telefono. Guarda Carico delle animazioni nella barra in alto e prova l'anteprima a misura di telefono.
• I fotogrammi scelti uno per uno entrano nell'ordine in cui li scegli. Usa Seleziona tutte nella cartella per tenere l'ordine dei nomi.
• Fotogrammi di misure diverse saltano durante la riproduzione. Esportali tutti con la stessa misura e lo stesso taglio.
• Con Adattamento su Riempi, i bordi vengono tagliati se le proporzioni dell'elemento sono diverse da quelle dei fotogrammi. Dai all'elemento le stesse proporzioni dei fotogrammi, oppure usa Intero.
• In modalità Modifica alcuni blocchi restano fermi. Porta Modalità di anteprima su Dal vivo per vedere la sequenza ferma sullo schermo come la vedrà il visitatore: in Modifica la sequenza scorre comunque, ma niente resta fermo sullo schermo.

Vedi anche #

• Scene e ricette
• Movimento ridotto
• Costruire una pagina