Hai una o due icone che vorresti dare vita con l'animazione. Da dove inizieresti? Diciamo che hai File SVG, Illustrator CC e effetti postumi CC, ma la soluzione ti sfugge.

In questo articolo dimostrerò come animare facilmente un file SVG, inclusa la preparazione del file SVG in Illustrator e l'importazione in After Effects CC. Spiegherò anche come convertirlo in Shape Layers e aggiungere movimento. E infine, parliamo di esportazione e rendering.

Il risultato finale del lavoro.

Ora passiamo alla parte più interessante: scopri come animare le immagini.

Preparazione del file SVG in Illustrator

Iniziamo aprendo il file SVG in Adobe Illustrator CC. Animerò l'icona di una piccola automobile disponibile gratuitamente su Week Of Icons.

Dopo aver aperto il file, dobbiamo separare e separare tutti gli oggetti in livelli. Puoi farlo manualmente o utilizzare Rilascio a livelli (sequenza) per accelerare il processo. Prima di importare il file in After Effects, dobbiamo salvarlo come formato file Illustrator.

Possiamo separare gli oggetti utilizzando Release to Layers (Sequence) per non perdere tempo prezioso.

Importazione e organizzazione di un file in After Effects CC

Ora sei pronto per importare in After Effects CC. Usiamo la scorciatoia da tastiera Ctrl+I (Windows) O Comando+I (Mac) per caricare la finestra di dialogo importare file o vai a File > Importa > File… Nello stesso posto, seleziona il file Illustrator CC che abbiamo preparato e fai clic importare. Dovrebbe apparire una piccola finestra di dialogo con il nome del file selezionato. Selezionare composizione dall'elenco a discesa chiamato Importa tipo.

Di più modo veloce importando un file: fai doppio clic sulla posizione della colonna nel pannello del progetto.

Nel pannello Timeline vedremo la nuova composizione. Facciamo doppio clic su di esso. Ora dovremmo vedere i livelli di Illustrator CC con le icone arancioni a sinistra dei loro nomi.

Prima di entrare nel vivo, dobbiamo convertire tutti questi livelli in strati di forma. Dobbiamo selezionarli tutti con Ctrl+A/Comando+A o utilizzando manualmente Maiusc + mouse sinistro. Successivamente fai clic con il pulsante destro del mouse sul livello e seleziona Crea > Crea forme dal livello vettoriale.

Ora che i nuovi livelli sono selezionati, trascinali nella parte superiore del pannello sopra i livelli di Illustrator CC, quindi elimina i livelli di Illustrator CC in modo che non siano d'intralcio.

Conversione dei livelli di Illustrator CC in livelli forma in After Effects CC

Sebbene non sia necessario, è importante assegnare a ogni livello un nome e/o un colore appropriato. Ciò ci consentirà di lavorare in modo più efficiente concentrandoci sui fotogrammi chiave. Nell'esempio seguente, i colori dell'etichetta corrispondono più o meno ai riempimenti dei rispettivi livelli.

Etichettare i livelli di forma con nomi, colori, etichette e posizioni appropriati è molto pratico.

Utilizza la scorciatoia da tastiera per configurare le impostazioni Ctrl+K/Comando+K O Composizione > Impostazioni composizione... Dalle Impostazioni di composizione, dobbiamo selezionare Larghezza, Altezza, Frequenza fotogrammi e Durata per Larghezza, Altezza, Frequenza fotogrammi e Durata. Per questo progetto ho scelto 60 fps per mantenere l'animazione fluida.

SU questo momento Sembra che tutto sia pronto, ma c’è ancora una cosa da fare. Dobbiamo raggruppare insieme determinati strati in modo che i loro movimenti siano sincronizzati con lo strato principale che possiamo controllare. Questo metodo si chiama genitorialità.

Utilizzare Seleziona frusta per assegnare un livello principale a più livelli.

Nel nostro esempio, ho assegnato strati meno significativi (strati figli) come parabrezza, parti del corpo, legno e corde allo strato primario del corpo (strato genitore). Ciò mi ha permesso di controllare la posizione e la rotazione dell'intera vettura (escluse le ruote) utilizzando il livello principale.

Creazione di animazioni

Volevo che l'auto colpisse una roccia e restasse sospesa in aria per un po'. Volevo anche che l'albero si muovesse su e giù e aprisse il tronco. Ho iniziato costruendo la pietra, l'auto e le ruote. Poi è arrivato il momento di superare l'ostacolo più grande: mettere l'azione sull'albero. Fatto ciò, ho dovuto lavorare sui piccoli dettagli come la rastrelliera e le corde.

Schizzo che descrive l'animazione

Il primo passaggio è stato creare un elemento o livello roccia, ma invece di tornare a Illustrator CC per aggiungere un altro livello, ho semplicemente utilizzato lo strumento Penna in After Effects CC. Questo mi ha permesso di progettare velocemente una piccola pietra.

Oh, potente strumento Penna!

Il bagagliaio era un compito relativamente semplice. L'ho installato sul retro dell'auto e ho creato un punto di ancoraggio nel vertice in basso a sinistra. Usando Pick Whip , l'ho assegnato al livello genitore del corpo. Il penultimo passo è stato quello di dare l'effetto di rotazione, che a sua volta ha reso più realistico il momento di rimbalzo dell'auto.Bodymovin in combinazione con la libreria mobile Lottie.

PS puoi trovare i miei file Illustrator CC e After Effects CC.

Il set di icone è disponibile per il download gratuito all'indirizzo .

Ottimizzazione grafica web

Le informazioni grafiche vengono trasmesse molto più lentamente delle informazioni testuali e il tempo di caricamento delle immagini è proporzionale alla dimensione dei file grafici. Pertanto, il caricamento veloce delle pagine Web richiede una piccola dimensione delle immagini grafiche incorporate in esse, che si ottiene ottimizzandole. Per ottimizzazione dell'immagine si intende la trasformazione che fornisce la dimensione minima del file mantenendo la qualità dell'immagine richiesta in questo caso, che si ottiene principalmente riducendo il numero di colori nelle immagini grafiche, utilizzando formati di file compressi e speciali e ottimizzando le impostazioni di compressione per i singoli frammenti di immagini.

Illustrator dispone di strumenti di ottimizzazione delle immagini integrati che forniscono vari metodi visualizzare in anteprima un processo di ottimizzazione rapido ed efficiente. L'anteprima dà un'idea abbastanza precisa di come apparirà l'immagine ottimizzata in tempo reale, il che aiuta a valutare il risultato dell'ottimizzazione e scegliere quella giusta. impostazioni desiderate. E puoi ottimizzare sia le immagini create direttamente in Illustrator, sia altre, come le foto che intendi inserire in un sito Web.

I parametri di ottimizzazione vengono impostati nella finestra Salva per il Web(Salva per Web), richiamato dal comando omonimo dal menu file(File). Il programma offre di utilizzare una delle quattro modalità di anteprima, ma di valutare la qualità dell'ottimizzazione il modo migliore adatta due:

• 2 su(due opzioni) visualizzazione simultanea dell'immagine originale e ottimizzata secondo le impostazioni specificate (Fig. 1);
• 4 su(quattro opzioni) In questa modalità l'area di visualizzazione è divisa in quattro finestre (Fig. 2) in cui vengono visualizzate l'immagine originale e tre versioni di quella ottimizzata: la prima versione viene creata in base ai valori di ottimizzazione impostati, le altre due sono opzioni per le impostazioni di ottimizzazione correnti.

Entrambe le modalità ti consentono di risparmiare notevolmente tempo nella ricerca. L'opzione migliore ottimizzazione, poiché eliminano la necessità di salvare le immagini da impostazioni diverse ottimizzazione e il loro successivo confronto visivo. Inoltre è possibile valutare non solo la qualità dell'immagine ottimizzata, ma anche la sua dimensione e il tempo di download per diverse opzioni di connessione. Per fare un confronto, la modalità più conveniente è 4-Up (quattro opzioni), che consente di valutare visivamente l'impatto della compressione o della riduzione della tavolozza sulla qualità e dimensione dell'immagine e, in definitiva, determinare i migliori parametri di ottimizzazione.

Illustrator ti consente di ottimizzare la grafica Web non solo nei formati GIF, JPG, PNG-8 e PNG-24, ma anche in SWF e SVG. Vengono archiviate le immagini indicizzate con un numero limitato di colori Formato GIF. Per salvare immagini a colori e in scala di grigi, foto e grafica ricca di colori come i riempimenti sfumati, viene utilizzato il formato JPG. Per immagini a colori con aree trasparenti, applicare Formato PNG, che ti consente di salvare sia immagini indicizzate che a colori, mentre in PNG-8 il numero massimo possibile di colori di un'immagine ottimizzata è 256, e in PNG-24 un'immagine può avere milioni di colori, e quindi sembra formato jpeg. La differenza tra PNG-24 e JPEG è che il metodo di compressione utilizzato per ottimizzare le immagini PNG-24 non comporta una perdita di qualità, ma aumenta la dimensione del file. I formati SVG e SWF combinano grafica, testo e componenti interattivi e possono anche essere ottimizzati.

Considera un esempio specifico di ottimizzazione delle immagini. Diciamo che nel programma Illustrator è stato sviluppato l'emblema del sito (Fig. 3), originariamente salvato in formato AI. Un tentativo di ottimizzarla immediatamente per il Web non porterà a nulla di buono, poiché in questo caso l'immagine verrà ritagliata automaticamente, il che non terrà conto della reale posizione dell'iscrizione ottenuta a seguito della deformazione (Fig. 4 e 5).

Proviamo quindi ad esportare l'emblema in formato PSD con il comando File=>Esporta(File=>Esporta) La dimensione dell'immagine generata sarà di 143 KB. Apri il file PSD risultante e utilizza il comando File=>Salva per il Web(File=>Salva per Web). Dato il numero limitato di colori coinvolti nell'immagine, in questo caso il formato GIF è ottimale, di cui dovrai decidere le impostazioni specifiche. Sperimentando le impostazioni, puoi vederlo migliore qualità fornisce l'algoritmo di compressione predefinito del programma selettivo(Selettivo). Per quanto riguarda lo smoothing, data la presenza di un riempimento sfumato, è meglio scegliere un algoritmo con generazione di rumore rumore(Fig. 6). La dimensione del file di ottimizzazione risultante sarà di 6,729 KB (Fig. 7), mentre verrà preservata la trasparenza dello sfondo, cosa facilmente verificabile salvando l'immagine GIF insieme al file HTML (Fig. 8). Di conseguenza, in questo esempio i file emblem.html ed emblem.gif sono stati recuperati nella cartella Primer1 .

Pulsanti

Un elemento di progettazione specifico e indispensabile di qualsiasi pagina Web sono i pulsanti di controllo grafico. È semplicemente impossibile immaginare una pagina senza di loro. Disegnare i pulsanti oggi è diventato un genere speciale e Illustrator ti consente di creare le opzioni più complesse. Ad esempio, i pulsanti progettati come oggetti griglia e (o) con maschere sembrano molto più efficaci di quelli normali.

Considera l'opzione di creare un pulsante rotondo in rilievo in Illustrator. Disegna un oggetto vettoriale riempito con un colore arbitrario sotto forma di un cerchio (Fig. 9) e convertilo in una griglia usando il comando Oggetto=>Crea mesh gradiente(Oggetto=>Crea mesh gradiente) specificando quattro righe e quattro colonne e nell'elenco Aspetto(Visualizza) selezionando un'opzione Al centro evidenziare(Retroilluminazione) su 60 (Figura 10). Scegli uno strumento Selezione diretta e fare clic nell'angolo in alto a sinistra dell'oggetto, selezionando i punti di ancoraggio ivi situati (Fig. 11). Cambia il colore della cella corrispondente in bianco selezionandolo nella tavolozza Campioni(Fig. 12).

Prendi uno strumento Ellisse(Ellisse), posizionare il marcatore del mouse al centro del cerchio creato in precedenza e, tenendo premuti i tasti alt E Spostare, allunga il nuovo cerchio sopra quello vecchio in modo che sia più grande di quello vecchio di 1-2 pixel su tutti i lati. Rendilo un bordo nero Colpo) largo 1-2 px e riempilo con una sfumatura radiale dal rosso al bianco (Figura 13). Trascina l'oggetto vettoriale creato di 1-2 pixel verso destra e verso il basso, quindi, senza rimuovere la selezione, fai clic destro su di esso e seleziona il comando dal menu contestuale Disponi => Invia in secondo piano(Organizza=>Rispedisci). Di conseguenza, otteniamo uno spazio vuoto per il pulsante mostrato in Fig. 14.

Di norma, su qualsiasi pagina Web sono presenti diversi pulsanti dello stesso tipo, che differiscono, ad esempio, solo nella direzione delle frecce disegnate su di essi, che indicano la direzione di spostamento nel sito. Considera il caso più semplice di avere due pulsanti, uno dei quali, con una freccia giù, indicherà lo spostamento verso pagina successiva e il pulsante freccia su al precedente. Come spazio vuoto per la freccia, prendiamo un triangolo regolare disegnato con lo strumento Poligono(Poligono) riempito di nero e anche stilizzato come oggetto mesh per un maggiore effetto. Spostare la freccia sul pulsante e regolare la posizione di tutti gli oggetti l'uno rispetto all'altro utilizzando i pulsanti della tavolozza corrispondente Allineare(Allineamento). Il primo dei pulsanti ricevuti è mostrato in fig. 15. Crea una copia del livello con il pulsante selezionando il comando Livello duplicato Strati, di conseguenza, otteniamo due strati identici. Selezionare quindi la freccia sulla copia del layer e ruotarla di 180° selezionando il comando dal menu contestuale Trasforma => Ruota Trasformazione => Ruota. Otteniamo lo stesso pulsante mostrato in Fig. 16. Tieni presente che è molto più conveniente memorizzare tutti i pulsanti dello stesso tipo di un progetto in un file su livelli diversi, come dimostrato in questo caso.

Ora devi salvare le opzioni ottimizzate per ciascuno dei pulsanti. Rendi invisibile prima il livello inferiore, in questo caso il pulsante sul livello superiore verrà mantenuto. Scegli una squadra File=>Salva per il Web(File=>Salva per Web), configurare i parametri di ottimizzazione del pulsante, ad esempio, come mostrato in fig. 17, fare clic sul pulsante Salva(Salva) e inserire un nome file. Il pulsante salvato come risultato è mostrato in Fig. 18. Ora rendi visibile il livello inferiore, rendi invisibile il livello superiore e salva il secondo pulsante allo stesso modo, dandogli un nome diverso. Il risultato è mostrato in fig. 19.

Ora non resta che assicurarsi che i pulsanti abbiano un bell'aspetto sulla pagina Web e posizionarli in una pagina personalizzata (Figura 20). Di conseguenza, in questo esempio, nella cartella immagini (cartella Primer2).

Se lo si desidera, durante il processo di ottimizzazione, il pulsante può essere facilmente trasformato in una sezione. In questo caso, dopo aver scelto il comando File=>Salva per il Web(File => Salva per Web) e le impostazioni di ottimizzazione devono essere selezionate dallo strumento tavolozza degli strumenti Seleziona sezione(Selezione fetta) e fare doppio clic sull'immagine, che si trasformerà automaticamente in una fetta con numero di serie 1 (Fig. 21). Facendo nuovamente doppio clic si aprirà la finestra Opzioni di sezione(Opzioni Slice), in cui sarà necessario specificare un collegamento e, se lo si desidera, modificare il nome della fetta (Fig. 22), quindi salvare l'immagine ottimizzata. Il risultato in questo caso saranno i file Primer3.html (Fig. 23) e Primer3.gif (cartella Primer3).

Elementi interattivi

Un modo per ravvivare una pagina è introdurre elementi di design che ne cambino il contenuto aspetto(o stato) a seconda del comportamento del mouse o, più raramente, in caso di altre situazioni: zoom, scorrimento, caricamento, errori, ecc.

Tra questi elementi, i più famosi sono i rollover (dall'inglese roll over to roll, roll over) elementi che cambiano aspetto sotto l'influenza del mouse. I pulsanti animati sono esempi di rollover tipici. I rollover vengono spesso utilizzati durante la creazione di altri elementi di navigazione del sito. In effetti, qualsiasi rollover non è una, ma diverse immagini (fino a quattro), ciascuna delle quali corrisponde a un evento specifico. Gli eventi principali sono considerati i seguenti: Stato normale normale, Passaggio del cursore del mouse sopra l'elemento e Pressione del pulsante sinistro del mouse quando si passa sopra l'elemento. In teoria, possono essere coinvolti eventi come Click rilasciando il pulsante sinistro del mouse dopo aver cliccato, Su dopo aver rilasciato il pulsante, Out quando si esce dalla zona attiva. Tuttavia, in pratica, il più delle volte ci si limita a cambiare l'elemento solo per i primi tre o anche due eventi.

Rollover classici

In senso classico, un rollover è una serie di immagini grafiche in formato GIF e il relativo codice HTML, grazie al quale, a seconda del comportamento del mouse, un'immagine ne sostituisce un'altra nella finestra del browser.

Illustrator non è progettato per creare direttamente rollover nel senso classico, ma può aiutare a svilupparne gli elementi iniziali. L'idea in questo caso è creare un livello con un'immagine corrispondente al primo evento. Quindi crea una copia del livello e trasforma l'immagine per adattarla al secondo evento e così via. L'immagine a strati risultante viene esportata in un file PSD con i livelli conservati, sulla base del quale viene creato un rollover nel programma Image Ready. Il vantaggio di utilizzare Illustrator, come in molti altri casi, risiede in alcune delle sue funzionalità interessanti che non sono disponibili in altri. strumenti software, insieme alla comodità della trasformazione della grafica vettoriale.

Proviamo a creare un rollover sotto forma di un'iscrizione che cambia colore a seconda del comportamento del mouse. Apri Illustrator e crea una forma a forma di rettangolo arrotondato e riempito di nero (Fig. 24), creane una copia e posizionala in una parte libera dello schermo. Converti la prima copia del rettangolo in un oggetto griglia con un'evidenziazione al centro (comando Oggetto=>Crea mesh gradiente Oggetto=>Crea Maglia Gradiente), specificando quattro righe e dieci colonne (Fig. 25). Attiva la seconda copia del rettangolo e impostala su un riempimento sfumato simile a quello mostrato in fig. 26. Sovrapponi l'oggetto gradiente sopra la mesh, riduci l'opacità dell'oggetto gradiente a circa l'80% e la dimensione dell'oggetto gradiente a circa 1 pixel per simulare un effetto rigonfiamento alla fine. E poi sopra gli oggetti stampa l'iscrizione. Nella sua forma originale, lascialo avere Colore bianco, che corrisponderà allo stato Normale (Fig. 27), quindi quando cambia lo stato di rollover, il colore della scritta cambierà, ad esempio, in verde quando si passa sopra il puntatore del mouse (stato Over) e in blu quando si preme il pulsante del mouse (stato Giù) .

Presta attenzione alla tavolozza Strati in questa fase ha un solo strato. Crea due copie di questo livello usando il comando Livello duplicato(Duplica livello) dal menu della palette Strati, ci saranno tre livelli nella tavolozza (Fig. 28). Quindi, nella prima copia del livello, cambia il colore dell'iscrizione in verde e nella seconda in blu (Fig. 29). Di conseguenza, verrà ottenuto lo spazio vuoto necessario per il rollover.

Esporta l'immagine creata in formato PSD con i livelli conservati utilizzando il comando File=>Esporta(File=>Esporta) e selezionando il modello colore RGB (Fig. 30). Aprite il file PSD creato in ImageReady (figure 31 e 32). Crea cornici basate su livelli scegliendo il comando Crea cornici da livelli(Crea cornici da livelli) dal menu della palette animazione. La finestra di animazione apparirà come in fig. 33. Allo stesso tempo nella tavolozza Rollover Inizialmente, verrà creato un singolo stato Normale.

Poi alla finestra animazione seleziona il frame corrispondente allo stato al passaggio del mouse, mentre sei nella tavolozza Strati il livello viene selezionato automaticamente Copia livello 1(Fig. 34). Vai alla tavolozza Rollover e fare clic sul pulsante Crea stato di rollover(Crea stato rollover) fig. 35, che farà comparire lo Stato Oltre lo Stato nella tavolozza Rollover(Fig. 36). Crea lo stato allo stesso modo Stato inattivo. Attiva stato Normale nella tavolozza Rollover ed eliminare nella tavolozza animazione tutti i frame tranne quello che dovrebbe corrispondere allo stato Normale. Di conseguenza, per ogni stato di rollover nella tavolozza animazione ci sarà un solo fotogramma (Fig. 37, 38 e 39).

Riso. 38. Visualizzazione dell'immagine, della finestra Animazione e delle palette Livelli e Rollover per lo stato Sopra

Controlla il risultato cliccando sul pulsante Anteprima nel browser predefinito(Anteprima browser) sulla barra degli strumenti e accedendo alla finestra del browser (Figura 40). Successivamente, salva il file utilizzando il comando File=>Salva ottimizzato(File=>Salva con ottimizzazione) e specificando l'opzione HTML e immagini (*.html). Di conseguenza, in questo esempio, è stato ottenuto il file Primer4.html e una serie di immagini grafiche nella cartella immagini.

Riso. 40. Finestra del browser con elemento Rollover

Rollover SVG

Il sempre più diffuso formato SVG (Scalable Vector Graphics scalable Grafica vettoriale), realizzato sulla base dello standard XML, permette anche di ottenere svariati elementi interattivi, in particolare rollover, solo che in pratica questo viene implementato in modo completamente diverso. Vale la pena notare che la creazione di rollover SVG interattivi, a differenza di quelli classici, quando il codice HTML corrispondente viene generato in modo completamente automatico, richiede la conoscenza del linguaggio JavaScript e la comprensione dei principi di base della programmazione orientata agli oggetti.

Una tavolozza speciale è progettata per funzionare con gli oggetti SVG. Interattività SVG, che è facile da aprire con il comando Finestra=>Interattività SVG(Finestra=>Interattività SVG) fig. 41.

Consideriamo questa variante della creazione di un rollover utilizzando l'esempio di un pulsante interattivo, il colore dell'etichetta su cui cambierà da nero a blu quando si passa il mouse e tornerà nero quando il mouse lascia la zona attiva.

Crea un pulsante rettangolare con bordi arrotondati e scegli un riempimento sfumato adatto, ad esempio, come mostrato in fig. 42. Regola la trasparenza del pulsante nella palette Trasparenza(Trasparenza) in questo esempio, il valore del parametro Opacità(Opacità) è impostato al 50%. Crea una copia del pulsante, riempila di verde scuro (Fig. 43), quindi convertilo in un oggetto mesh con il comando Oggetto=>Crea mesh gradiente(Oggetto=>Crea mesh gradiente) specificando quattro righe e dieci colonne e nell'elenco Aspetto(Visualizza) selezionando un'opzione Al centro(Verso il centro) e impostando il valore evidenziare(Evidenzia) su 100. Ridurre l'opacità del livello dell'oggetto mesh a circa il 40% (Figura 44). Posiziona l'oggetto mesh sopra l'oggetto gradiente e il pulsante sarà simile a quello mostrato in Fig. 45.

Riso. 44. Trasformare una copia di un pulsante in un oggetto griglia

Completa il pulsante con l'iscrizione desiderata e regola la sua posizione utilizzando i pulsanti della tavolozza corrispondente Allineare(Allineamento). L'immagine risultante conterrà uno strato con tre oggetti sovrapposti l'uno all'altro (Fig. 46). Gli eventi pianificati faranno riferimento a un oggetto di testo, quindi per comodità cambia il suo nome in Testo facendo doppio clic sull'oggetto e inserendo un nuovo nome. Allo stesso modo, cambia il nome del livello da Da livello 1 a livello(Fig. 47).

L'elaborazione degli eventi implica l'uso di procedure JavaScript, quindi è necessario includere un file con una descrizione di queste procedure. Si chiama Events.js e viene salvato su disco nella cartella Sample Files\Sample Art\SVG\SVG quando è installato Adobe Illustrator. Per includere il file Events.js, utilizzare il comando File JavaScript Interattività SVG(Fig. 48). Successivamente, è necessario premere il pulsante Aggiungere(aggiungere) e trovare file desiderato sul disco rigido. Quando il suo nome appare nel campo URL(fig. 49), cliccare sul pulsante Fatto(Esci).

Riso. 48. Selezione del comando File JavaScript

Successivamente, dovresti definire la reazione agli eventi del mouse per l'oggetto Testo. Selezionare l'oggetto Testo nel campo evento tavolozze (Eventi). Interattività SVG seleziona un evento al passaggio del mouse elemColor(evt, "Testo", "#3333FF") questo significherà che quando il mouse è sopra l'oggetto Testo il suo colore cambierà in blu (Fig. 50). Affinché il colore del testo diventi nero dopo che il mouse lascia la zona attiva, è necessario creare un altro evento onmouseout selezionalo nel campo evento tavolozze (Eventi). Interattività SVG. Quindi nella riga dell'azione inserisci il testo elemColor(evt, "Testo", "#000000") questo tornerà nero (Fig. 51).

Riso. 51. L'aspetto finale della palette Interattività SVG per l'oggetto Testo

Salva il rollover generato come file SVG con il comando File=>Salva con nome(File=> Tipo di file formato SVG, quindi impostando le opzioni per il salvataggio del file SVG come mostrato in fig. 52. Dopo il salvataggio si otterrà un solo file con estensione SVG e non due, come nel caso del classico rollover, in questo caso è stato ottenuto il file Primer5.svg (cartella Primer5). Tuttavia, affinché il rollover funzioni davvero, è necessario copiare anche il file Events.js con la descrizione delle procedure JavaScript nella cartella con il file SVG. Successivamente, puoi controllare le prestazioni del rollover: il risultato sarà simile a quello mostrato in Fig. 53.

Animazione SVG

Il formato SVG può essere utilizzato anche per trasmettere animazioni. Proviamo a creare un semplice elemento di animazione (in questo caso si tratterà di informazioni sull'azienda), che apparirà sullo schermo quando si passa il mouse sull'oggetto grafico corrispondente e scomparirà quando il mouse viene allontanato dall'elemento interattivo.

Creiamo approssimativamente una serie di oggetti grafici e di testo, come mostrato in Fig. 54. Rinominare tutti gli oggetti creati in modo conveniente facendo clic successivamente sul nome dell'oggetto successivo nella tavolozza Strati e inserendo il nome desiderato (Fig. 55). Da notare quanto evidenziato in Fig. 56 articoli Testo1, Testo2, Testo3 E Percorso1 saranno sempre visibili, e tutti gli altri solo quando passi il mouse sopra l'oggetto Testo 1.

Riso. 54. Visione originale dell'immagine

Includere il file Events.js con una descrizione delle procedure JavaScript utilizzando il comando File JavaScript (File JavaScript) dalla tavolozza Interattività SVG premendo il pulsante Aggiungere(Aggiungi) selezionando il file desiderato sul disco rigido e facendo clic sul pulsante Fatto(Esci).

Definire una risposta all'evento del mouse per un oggetto Testo 1. Seleziona oggetto Testo, nel campo evento tavolozze (Eventi). Interattività SVG seleziona un evento al passaggio del mouse e nella riga sottostante inserisci il testo elemShow(evt, "Testo4"); elemShow(evt, "Percorso2"). Di conseguenza, quando il mouse si trova sopra l'oggetto Testo 1 gli oggetti diventeranno visibili Testo4 E Percorso2. Si tenga presente che se al verificarsi di un evento devono essere eseguite più azioni, queste devono essere specificate tramite il segno “;”. Quindi fai lo stesso per l'evento onmouseout, inserendo il testo, il che significherà nascondere gli oggetti (Fig. 57).

Salva il risultato come file SVG con il comando File=>Salva con nome(File=>Salva con nome), specificando il nome del file, selezionando nel campo Tipo di file Formato SVG, quindi impostando le opzioni per il salvataggio del file SVG in conformità con la Fig. 58. Dopo il salvataggio si otterrà il file Primer6.svg (cartella Primer6). Non dimenticare di copiare il file Events.js nella cartella con questo file. Se dopo scappi, perché dato file, vedrai il risultato mostrato in Fig. 59. Questo è quasi ciò di cui hai bisogno. L'unica cosa che non era inclusa nei nostri piani era l'aspetto iniziale degli oggetti Testo 4 e Sentiero 2 durante il caricamento. Per eliminare questo difetto, seleziona entrambi gli oggetti contemporaneamente e crea un'azione per essi elemHide(evt, "Testo4"); elemHide(evt, "Percorso2") sull'evento caricare(Fig. 60). Salva nuovamente il file e assicurati che gli oggetti siano ora Testo4 E Percorso2 visibile solo passando il mouse sopra l'oggetto Testo 1.

Animazione GIF

Qualsiasi pagina Web è impensabile senza l'animazione Web, comprese le gif animate. Un modo per crearli è utilizzare l'applicazione Adobe ImageReady, che, tra le altre cose, consente di creare animazioni da livelli. Allo stesso tempo, l'immagine multistrato stessa può essere preparata in diverse applicazioni, incluso Adobe Illustrator.

È molto semplice creare un'animazione basata sugli elementi della tavolozza Simboli(Simboli) aperti dal comando Finestra=>Simboli(Finestra=>Simboli) oppure da una delle librerie di simboli apribili tramite il comando Finestra=>Librerie di simboli(Finestra=>Librerie di simboli).

Ad esempio, proviamo ad aumentare la dimensione di un qualsiasi oggetto-simbolo, le fasi chiave del processo di aumento dell'oggetto devono essere impostate su livelli separati. Innanzitutto, posiziona semplicemente gli oggetti simbolo uno sopra l'altro, quindi aumenta le dimensioni di ciascun oggetto successivo, ad esempio, come mostrato in Fig. 61. Di conseguenza, nella tavolozza Strati verrà creato un livello con molti oggetti (Fig. 62). Se esporti direttamente questa immagine in formato PSD, non funzionerà, poiché c'è solo un livello e, naturalmente, quando apri il file PSD in ImageReady, ci sarà anche un solo livello. Pertanto, devi prima posizionare gli oggetti su livelli diversi. Questo può essere fatto diversi modi il modo più semplice è selezionare prima il livello Strato 1 nella palette Livelli e usa il comando Rilascia al livello(Rilascio a strati). Il risultato sarà lo spostamento di ciascuno degli oggetti sul proprio livello, ma saranno tutti annidati nel livello Strato 1. Pertanto, dovrai trascinare manualmente tutti i livelli nidificati nella parte superiore della palette Livelli in modo che siano sopra il livello Strato 1 e poi il livello vuoto Strato 1 facile da rimuovere (Fig. 63). Esporta l'immagine in formato PSD utilizzando il comando File=>Esporta(File=>Esporta) con le impostazioni come in fig. 64.

Caricare il file PSD creato nel programma ImageReady (Fig. 65 e 66). Apri il menu della tavolozza animazioneCrea cornici da livelli(Crea cornici da livelli). Di conseguenza, verranno creati cinque fotogrammi, ciascuno dei quali corrisponderà al proprio livello e alla finestra della tavolozza animazione apparirà come in Fig. 67.

Successivamente, imposta la durata di ciascuno dei fotogrammi creati, in questo caso la durata di tutti i fotogrammi è impostata su 0,2 s. E poi salva l'animazione ottimizzata con il comando File=>Salva ottimizzato(File=>Salva con ottimizzazione). Il risultato ottenuto può assomigliare alla Fig. 68.

È ancora più comodo utilizzare le funzioni Miscele vive Software per illustratori. Questo uso combinato di Illustrator e ImageReady accelera notevolmente il processo di creazione di animazioni GIF.

Ad esempio, disegna due oggetti multicolori arbitrari e poi uniscili con i parametri appropriati (Fig. 69). È impossibile utilizzare direttamente questo file per creare un'animazione, poiché l'immagine si trova su un singolo livello (Fig. 70). Pertanto, dovrai prima posizionare ciascun elemento dell'oggetto di fusione su un livello separato. Per fare questo, nella finestra Strati evidenziare la linea , attiva il menu della tavolozza facendo clic sulla freccia nera nell'angolo in alto a destra e scegli il comando Rilascio in sequenza di livelli(Trasformare in strati in sequenza) (Fig. 71). Tenendo premuto un tasto Spostare, seleziona i livelli creati e posizionali sopra il livello Strato 1, quindi eliminare il livello stesso Strato 1, spostandola di conseguenza nel cestino, la palette dei livelli assumerà la stessa forma di fig. 72.

Riso. 70. Stato iniziale della finestra Livelli

Esporta il file creato in formato PSD con il comando File=>Esporta(File=>Esporta). Apri il file PSD creato in ImageReady (Fig. 73). Tieni presente che tutti i livelli creati nel programma Illustrator appariranno nella finestra dei livelli (Fig. 74) e nella finestra animazione ci sarà un solo fotogramma.

Attiva il menu della tavolozza animazione, facendo clic sulla freccia nera nell'angolo in alto a destra della tavolozza e scegliendo il comando Crea cornici da livelli(Crea fotogrammi da livelli) Alla fine, in questo esempio verranno creati cinque fotogrammi e la finestra della tavolozza animazione assumerà la forma secondo la Fig. 75. Seleziona tutti i fotogrammi tenendo premuto il tasto Spostare e impostare una durata di frame adeguata in questo esempio, per ciascuno dei frame viene preso lo stesso tempo di 0,2 s. Quindi salva il file con il comando di ottimizzazione File=>Salva ottimizzato(File=>Salva con ottimizzazione) nell'elenco Tipo di file opzione Solo immagini (*.gif). L'animazione assomiglierà alla Fig. 76.

Molto più interessante non è il movimento, ma il ridimensionamento graduale degli oggetti di fusione. Ad esempio, puoi utilizzare la transizione di fusione già creata. In questo caso, dopo aver creato livelli separati per ciascun elemento della transizione di fusione, posiziona tutti gli oggetti uno sopra l'altro utilizzando i pulsanti Centro allineamento orizzontale(Allineamento rispetto al centro orizzontale) e Centro allineamento verticale(Allineamento centrale verticale). Allineare(Fig.77).

Esporta il file creato in formato PSD ( File=>Esporta File=>Esporta) e aprire il file PSD creato nel programma ImageReady (Fig. 78). Crea fotogrammi di animazione basati su livelli ( Crea cornici da livelli Crea fotogrammi dai livelli) e scegli la durata appropriata per essi (Fig. 79). E poi, per rendere l'animazione più efficace, copia i fotogrammi esistenti, ma dentro ordine inverso in modo che l'immagine prima aumenta, poi diminuisce, e così via in un cerchio (Fig. 80). Quindi salvare il file di ottimizzazione ( File=>Salva ottimizzato File=>Salva con ottimizzazione). L'animazione risultante è mostrata in fig. 81.

Riso. 80. Stato della finestra Animazione dopo la duplicazione dei fotogrammi

Riso. 81. Animazione finita

Ciao a tutti! Oggi proverò a fare una descrizione delle caratteristiche del programma Adobe Illustrator, confrontandolo con le capacità del flush. Questa non sarà un'analisi globale del programma osseo, ma piuttosto una descrizione di alcuni dei chip interessanti che ho scoperto in questo programma. Ho raccolto le informazioni pezzo per pezzo mentre le studiavo per metterle tutte in un unico post. Devo ammettere subito che non sono un utente illustratore super esperto, solo che da sei mesi lo utilizzo per disegnare (prima disegnavo tutto in flash). Molti lamentano che l'illustratore è complesso, non sempre intuitivo. In una certa misura, sono d'accordo sul fatto che dopo il flash questo programma sia difficile. Ma la cosa principale qui non è smettere, ma continuare a studiare. E dopo un paio di settimane, sorge il pensiero: come ho fatto a farne a meno prima!

Quindi, quello che mi è piaciuto dell'illustratore e quello che ho scoperto da solo non è in flash.
1. Inizierò con il più semplice, ma allo stesso tempo necessario. Prova a disporre gli oggetti in un cerchio in flash. In precedenza era Strumento decorativo, ma è stato rimosso, apparentemente ritenuto non necessario. Abbiamo deciso che sarebbe stato più divertente farlo a mano. Illustrator ha questa funzione: Effetto - Distorci e trasforma - Trasforma.

Tutto è veloce e semplice, impostiamo noi stessi i valori (distanza tra gli oggetti, numero di copie) nelle impostazioni.

2. Zigzag

Cosa ancora più semplice, ma comunque utile. Sembrerebbe una sciocchezza, ma in Flash devi disegnare a mano, in Illustrator è questione di secondi.

3. Deformazione degli oggetti (Warp)

Non c'è niente di simile in Flash. Nell'esempio seguente, ho mostrato solo 2 modi per deformare forme semplici (Effetto - Deformazione - Arco/Pesce). In realtà ce ne sono 15. ultima versione programmi.

4. Arrotondamento automatico degli angoli (Round Corners)

Può essere fatto manualmente: oggetto grafico quando selezionato in un angolo appare (in tutti gli angoli). punto bianco e un segno di linea arrotondata. Trascina il mouse e regola secondo i tuoi gusti.

Ma questo vale solo per le forme, con una linea di matita in modo leggermente diverso: applica l'effetto arrotondato ( Effetto - Stilizzazione - Angoli arrotondati). In uscita otteniamo lo stesso risultato.

5. Irruvidire

L'effetto viene applicato a forme semplici ( Effetto-Distorci e Trasforma-Irruvidimento). Di conseguenza, otteniamo qualcosa che assomiglia a modelli 3D a basso numero di poligoni. Penso che sia fantastico :) E, soprattutto, molto semplice.

6 Pieghe e gonfiore(Tirare dentro e gonfiare)
Un esempio nella foto qui sotto:

7. Estensione del modulo (percorso offset)

Nel flash c'è una funzione Espandi riempimento (riempi estensione), non funziona affatto con le linee di matita, a differenza di Illustrator.

8. Pennelli (pennello artistico, pennello pattern, pennello dispersione)
Vedi l'immagine qui sotto per esempi:

9. Pennello texture (pennelli texture)

Ci sono anche molti pennelli texture in Illustrator di cui ho scritto e di come apparivano nuova versione veloce - . È stato notato che l'uso dei pennelli in Adobe Animate è terribilmente lento. Questo è tutto:(

10. Non sono sicuro che si tratti di un trucco, ma voglio concentrarmi su un pennello con un nome divertente macchiaSpazzola. Situato sulla barra degli strumenti, è un pennello molto carino da usare. Ha un sacco di impostazioni, mi piace più del solito. Difficile spiegare i suoi benefici a parole, meglio provarlo una volta.

10.Dividi in griglia

Un'altra caratteristica utile è la funzione Dividi su griglia (Oggetto-Percorso-Dividi su griglia), che consente di tagliare il modulo in segmenti uguali. Cosa ci ricorda questo? Esatto: finestre in un grattacielo. Per quanto mi riguarda, è interessante disegnare, ad esempio, paesaggi urbani;)

Un altro attrezzo utile, presentato in illustratore, probabilmente sin dalla sua prima uscita. Con esso puoi creare, ad esempio, trame di legno:

12. Sposta (destra - Trasforma - Sposta)

Spostare un oggetto di una determinata distanza. Se lo si desidera, è possibile creare immediatamente una copia che verrà posizionata alla distanza desiderata dall'oggetto selezionato in senso orizzontale/o verticale. In più prima versione flash era un plugin che funzionava questa funzione. Purtroppo non ricordo il suo nome.

È molto comodo creare modelli senza interruzioni in Illustrator ( Creazione di modelli di oggetti). Ricordo come eccellevo freneticamente in Flash con la creazione di . Nella versione Illustrator di CC 2015, tutto è automatizzato, una serie di impostazioni ti aiuteranno a creare un modello in dozzine di varianti, con solo pochi elementi grafici a portata di mano. Nelle versioni precedenti del programma tutto doveva essere fatto manualmente, come finora in Flash.

(Nota: il modello può essere reso un oggetto vettoriale modificabile utilizzando la funzione di analisi ( Aspetto di espansione dell'oggetto).

14. Mosaico di oggetti (Mosaico)

Creazione palette dei colori in base all'immagine esistente. Importa quindi l'immagine che ti piace nell'illustrazione (Apri). Oggetto: crea mosaico di oggetti. Nelle impostazioni specifichiamo la frequenza di divisione in altezza e larghezza.

E in uscita otteniamo:

15.Blend (miscelazione)

Utilizzato per creare gradienti. Puoi creare transizioni passo-passo, come, ad esempio, nell'immagine. Non posso dire di usarlo spesso, ma potrebbe tornare utile a qualcuno. Mi sembra che possa essere utilizzato per creare semplici immagini di sfondo.

Lo strumento può essere utilizzato anche per clonare oggetti. Posizioniamo due oggetti a distanza l'uno dall'altro e applichiamo le Opzioni di fusione, selezioniamo il numero di passaggi (il numero di oggetti clonati).

16. Strumento Crea forma. Una cosa molto utile per lavorare con le primitive. In un lampo, come mi è sembrato, è meno conveniente.

Tenendo premuto Alt e facendo clic sui segmenti selezionati, elimina i segmenti. Se trasciniamo semplicemente il mouse su diverse aree selezionate: connessioni.

Aggiunta: uno strumento che aiuta a tagliare, connettere, ecc. automaticamente. forme selezionate. Per quanto mi riguarda non è molto comodo, lo uso più spesso Costruireformaattrezzo.

(tavole da disegno)

18.Pannello degli strumenti personalizzato

La possibilità di creare la tua barra degli strumenti, scartando quelle non necessarie e selezionando solo quelle che usi.

In flash, tavole da disegno, ovvero scene ( Scena 1,2,3..) si trovano separatamente ed è necessario passare dall'uno all'altro (Shift + F2). In Illustrator possono essere tutti posizionati davanti ai tuoi occhi. È conveniente quando realizzi diverse versioni dello stesso disegno, in modo che tutte le opzioni siano davanti ai tuoi occhi per il confronto.

19.Isometria con Stili grafici

E l'ultima cosa è la creazione di isometria senza usare 1 clic (o meglio 3 clic, perché abbiamo 3 lati;) utilizzando gli stili grafici ( Stili grafici). Come è fatto, lo scriverò la prossima volta.

Ciò che Illustrator ha in comune con Flash è la possibilità di salvare un oggetto in un simbolo (symbol) e questo simbolo può anche essere trasferito in Flash senza problemi (aprire un file .ai in Flash, facendo Importa: importa nello stage).
Il simbolo in Illustrator ha le stesse proprietà di Flash.
E alla fine scriverò ciò che in Illustrator, secondo me, è inferiore a Flash. Sì, sì, e c'è. E questo è lo strumento di riempimento ( secchio di vernice). Non importa quanto cerco di abituarmi a Illa, è più conveniente in Flash.
Se i miei appunti ti sono diventati utili o se vuoi aggiungere qualcosa di tuo, benvenuto nei commenti! Buona fortuna a tutti;)

La GIF trasparente in Adobe Illustrator viene eseguita come segue. Vai al menu File > Salva per Web e dispositivi (Alt+Ctrl+Maiusc+S). Nella finestra che si apre, nel campo Formato file ottimizzato, devi prima recarti nella scheda dimensione dell'immagine(dimensione dell'immagine). Il fatto è che per impostazione predefinita l'intera pagina entra nella finestra di ottimizzazione e questo di solito non è necessario. Pertanto, nella scheda Dimensioni immagine, deseleziona la casella di controllo Ritaglia su tavola da disegno(Ritaglia per adattare la pagina) e fare clic sul pulsante Applica.

Quindi, nell'elenco di selezione del formato, seleziona GIF e seleziona la casella di controllo Trasparenza.

Successivamente, determineremo quali colori saranno trasparenti. Tutti i colori presenti nell'immagine sono contenuti nella scheda tabella dei colori(Tabella colori) e vengono visualizzati come quadrati colorati. Seleziona uno strumento dalla barra degli strumenti sul lato sinistro della finestra contagocce(pipetta).

I colori possono essere definiti in due modi. Il modo più semplice è specificare il colore con un contagocce direttamente sull'immagine, dopodiché il colore verrà evidenziato sulla tavola dei colori con un tratto scuro. Ebbene, se sai esattamente quale colore deve essere trasparente, puoi selezionarlo direttamente sulla tabella dei colori cliccando sulla casella colorata corrispondente. E nel primo e nel secondo caso, se devi selezionare più colori, devi lavorare tenendo premuto il tasto Maiusc (o Ctrl). Dopo aver scelto un colore, è necessario istruire il programma a renderlo trasparente. Per fare ciò, fare clic sull'icona Mappa i colori selezionati su Trasparente(Aggiungi i colori selezionati alla trasparenza). Nella figura, questo pulsante è cerchiato e il colore rosso è impostato su trasparente. Sull'immagine apparirà un'area trasparente e il quadrato sulla tavola dei colori cambierà aspetto: una parte di esso diventerà un triangolo bianco. Per annullare il colore selezionato, è necessario selezionarlo nella Tavola dei colori, quindi fare nuovamente clic sull'icona Mappa i colori selezionati su Trasparente.

Qualche parola sul metodo di impostazione della trasparenza. Il menu a discesa ne è responsabile. Specificare l'algoritmo di dithering della trasparenza, in russo - Algoritmo di simulazione della trasparenza (fig. sotto). Sono disponibili quattro scelte: No Transparency Dither - nessun algoritmo, Diffusion Transparency Dither - algoritmo diffuso, Pattern Transparency Dither - algoritmo basato su pattern e Noise Transparency Dither - algoritmo basato sul rumore. Nella modalità algoritmo diffuso, il cursore diventa attivo Quantità(Quantità) che permette di modificare il valore di diffusione. Cosa applicare in pratica? A seconda dello scopo e dell'immagine. Non utilizzo questa opzione e lascio sempre l'impostazione predefinita: Nessun dithering trasparenza.

Premi Salva: la GIF trasparente è pronta. Il lavoro è stato svolto nella versione CS4 di Adobe Illustrator (v.14), ma tutte le azioni e le scorciatoie da tastiera sono rilevanti per la versione precedente CS3 (v. 13).

Ora complichiamo un po' il compito: creiamo un banner Flash animato. Naturalmente, in questo caso non è necessario parlare di un'animazione Flash a tutti gli effetti: per questo esistono pacchetti specializzati. Ma puoi anche usare Illustrator per creare un semplice video amatoriale.

In Adobe Illustrator non ci sono strumenti speciali e strumenti di interfaccia, come una timeline, tipici dei programmi di sviluppo di animazioni. Ma c'è una sottigliezza: i livelli possono essere usati come cornici.

Crea un banner con solo testo.

1. Raggruppare i simboli con il comando Oggetto › Raggruppa(Oggetto › Gruppo).
2. Il compito successivo è creare oggetti di contorno dai caratteri dei caratteri, altrimenti la corretta formazione dei livelli non funzionerà. Per fare ciò, seleziona un gruppo e seleziona Tipo › Crea contorni(Carattere › Traccia).
3. Successivamente apri il menu della tavolozza Strati(Livelli) facendo clic sul pulsante a forma di freccia sulla tavolozza (Fig. 8.11).

Riso. 8.11. Menu della tavolozza dei livelli

A noi interessa il comando presente in questo menu Rilascio su livello (sequenza)(Converti in livelli (in sequenza)) che traduce ogni singolo oggetto su un nuovo livello. Si tenga presente che quando si applica il comando è necessario selezionare il gruppo gruppo, non uno strato Strato 1.

Come dovrebbe apparire la tavolozza Strati(Livelli) dopo l'esecuzione Rilascio su livello (sequenza)(Converti in livelli (sequenziale)), mostrato in fig. 8.12.

Riso. 8.12. La tavolozza Livelli dopo il rilascio sul livello (sequenza)

Questo completa la preparazione, puoi salvare utilizzando Salva per il Web(Salva per Web) in SWF. SWFè il principale formato grafico basato sulle tecnologie Flash. Sarebbe più corretto dire che si tratta del formato Flash (Fig. 8.13).

Probabilmente oggi tutti gli utenti hanno più o meno familiarità con Flash. Attualmente è il formato di animazione più comune su Internet e viene utilizzato per creare la stragrande maggioranza delle pagine Web multimediali.

Naturalmente, anche un decimo delle capacità di Flash non è implementato in Adobe Illustrator, perché il programma non è progettato per questo. Tuttavia, in esso puoi creare un'immagine statica o una semplice animazione.

Riso. 8.13. Impostazioni di ottimizzazione per il formato SWF

Sono disponibili le seguenti impostazioni.

• Sola lettura(Solo lettura). Se selezioni la casella, il file verrà scritto in modo tale da non poter più essere aperto per la modifica in nessun programma. Ciò, da un lato, riduce la dimensione dei file e, dall'altro, protegge i tuoi diritti d'autore.
• Impostazione etichettata 1. Parametro che specifica il tipo di salvataggio: immagine o animazione.
• Se scegli l'opzione File AI in file SWF(File illustratore in File SWF), l'immagine verrà salvata come immagine statica esattamente uguale a quella che vedi sullo schermo quando lavori in Illustrator.
• Livelli in fotogrammi SWF(Da livelli a fotogrammi SWF) consente di animare i livelli esistenti, che verranno sottoposti a rendering come fotogrammi. Dobbiamo scegliere questa opzione.
• Qualità della curva(Qualità delle curve). Precisione delle curve che ripetono il file delle curve dell'immagine originale. Diminuendo questa impostazione si riduce significativamente la qualità, soprattutto nell'area dei piccoli dettagli, ma si riduce la dimensione del file. Nel nostro caso il valore ottimale è "7".
• frequenza dei fotogrammi(Ritardo fotogramma). Frame rate e, di conseguenza, velocità di animazione. Affinché l'effetto sia corretto, impostare non più di 4 fotogrammi al secondo.
• ciclo continuo(Ripetere). Riproduci l'animazione più volte. Adatto per animazioni in cui è importante un ciclo ripetuto. Il banner appartiene a questa tipologia.