Come creare animazioni GIF in Illustrator. Come realizzare animazioni in Adobe Illustrator. Esporta file SWF da Illustrator
Oggi abbiamo qualcosa di insolito Lezione di Adobe Illustratore. Perché questa volta non realizzeremo un'immagine statica, ma una vera animazione. Immagina, si scopre con utilizzandoAdobe Illustrator può anche disegnare cartoni animati :)
E per questo non abbiamo bisogno di nulla. Corretta organizzazione dei livelli ed esportazione del lavoro finale in formato swf, dove ogni livello viene convertito in un fotogramma di animazione. Nel tutorial di oggi disegneremo un'animazione per il conto alla rovescia nello stile di un film retrò. L'output dovrebbe essere un video flash con lo stesso conto alla rovescia.
La prima cosa che devi fare è disegnare tutti gli elementi necessari per l'animazione futura. Per fare questo, in un documento separato, ho creato due posizioni del fotogramma di una pellicola, un cerchio di riferimento, tagliato in settori separati, una trama e un graffio verticale per aggiungere l'effetto dell'antichità, così come tutti i numeri e iscrizioni.
Quando tutte le parti del nostro cartone animato saranno pronte, potremo iniziare a creare l'animazione vera e propria. Per comodità, è meglio farlo in un nuovo documento. In questo caso, i nostri livelli svolgeranno il ruolo di fotogrammi di animazione. E nel primo strato devi solo copiare un fotogramma del film. Posizionalo al centro della tua area di lavoro.
Ora crea un secondo strato e copia al suo interno un fotogramma di pellicola, in cui i fori lungo i bordi sono realizzati con un offset. Deve anche essere posizionato al centro.
Da questi due livelli puoi già ottenere l'animazione del film in movimento. Ma in seguito avremo bisogno di molti più strati. Quindi seleziona i primi due livelli, vai alle opzioni del pannello e crea una copia dei livelli.
In modo simile, dobbiamo accumulare 12 strati di fotogrammi che ne definiscono il movimento.
Ora abbiamo un sacco di livelli e sono tutti visibili. Nel senso che gli strati superiori bloccano quelli inferiori, il che non è del tutto conveniente per il lavoro. Pertanto, puoi disattivare alcuni livelli facendo clic sull'icona con l'occhio a sinistra del nome del livello. Per attivare o disattivare tutti i livelli contemporaneamente, tieni premuto il tasto Alt mentre fai clic sull'icona a forma di occhio. Attivando e disattivando i livelli, puoi vedere esattamente cosa si trova in un fotogramma specifico della nostra futura animazione. E ora, per poter aggiungere un leggero tremolio al movimento della pellicola, dobbiamo spostare leggermente i fotogrammi risultanti in direzioni diverse. Per fare ciò, attiva solo il livello con cui lavorerai. questo momento, quindi sposta la cornice di un paio di pixel in qualsiasi direzione.
Dopo aver esaminato tutti i livelli e aggiunto un piccolo spostamento, puoi iniziare a creare l'animazione del cerchio in movimento. Per fare ciò, copia il cerchio costituito da settori dal documento con le parti del fumetto e posizionalo sul primo strato sopra il fotogramma della pellicola.
Se deselezioni il cerchio, sembrerà un unico insieme. Questo è esattamente ciò di cui abbiamo bisogno.
Ma poiché è composto da singoli settori, puoi creare animazioni molto rapidamente e facilmente cambiandone il colore. Per fare ciò, copia questo cerchio sul secondo livello e rendi più leggero il primo settore. Ricorda che la nostra pellicola trema mentre si muove, quindi non è affatto necessario posizionare il cerchio esattamente al centro dell'inquadratura. Posizionalo a occhio.
In modo simile, devi copiare il cerchio in ogni strato successivo, dipingendo un settore in più con un colore più chiaro rispetto alla volta precedente. Insieme, questi 12 strati formano un'animazione del film che si muove con un cerchio di riempimento.
Successivamente dobbiamo aggiungere texture ai nostri livelli. Attiva il primo livello e copia la texture dal file originale con i pezzi di ricambio lì.
Quindi attiva i livelli successivi uno per uno e copia lì la stessa trama. Per farlo sembrare diverso in ogni fotogramma, ruotalo semplicemente di 90 gradi. Come avrai intuito, dobbiamo aggiungere texture a tutti e 12 i fotogrammi.
Se sei già abbastanza stanco di copiare, allora posso accontentarti: è rimasto ben poco. La parte più difficile è finita. Non resta che aggiungere graffi verticali e il gioco è quasi fatto. Per fare ciò, copiamo nuovamente il graffio originale e lo posizioniamo in un luogo arbitrario su più livelli. Nel mio caso, i graffi appaiono solo su due strati.
Ora che il ciclo principale con i film d'animazione è pronto, non resta che sommare i numeri. Dato che il nostro conto alla rovescia va da 3 a 1 più la parola Go!!!, abbiamo bisogno di ancora più livelli. Non 12, ma ben 48. Per fare ciò, è necessario creare altre tre copie di livelli già pronti con l'animazione del film.
E poi tutto è semplice. Accendi il primo strato e inserisci lì il numero tre.
Quindi devi copiare questa figura sui livelli successivi fino al termine dell'animazione del cerchio. Quando raggiungi la copia successiva degli strati, dove il cerchio sarà nuovamente completamente riempito, devi inserire il numero due. Allo stesso modo, copia il numero uno sui livelli desiderati. E quando arrivi agli ultimi livelli per l'iscrizione Go!!!, elimina semplicemente il cerchio prima di copiare l'iscrizione sul livello desiderato.
Per l'animazione è tutto. La cosa principale qui è non confondersi. Puoi dare ai livelli alcuni nomi convenienti, ma ero un po' pigro :) Inoltre, quando finisci il tuo lavoro, assicurati di riattivare tutti i livelli facendo clic sull'icona a forma di occhio.
Nella finestra delle impostazioni di esportazione, assicurati di impostare Esporta come: Livelli AI su fotogrammi SWF. È questa opzione che trasforma i livelli di Illustrator in fotogrammi di animazione. Successivamente, fai clic sul pulsante Avanzate.
Aprirà altre impostazioni. Qui è necessario impostare il frame rate. Ho 12 fotogrammi al secondo. La casella di controllo Looping è responsabile dell'animazione ciclica. Grazie ad esso, il video verrà riprodotto in cerchio. E l'opzione Ordine livelli: Dal basso verso l'alto riproduce i livelli di Illustrator dal basso verso l'alto nel pannello. Questo è esattamente il modo in cui abbiamo costruito la nostra animazione.
L'output è un video flash con la nostra animazione.
Ora vedi cosa può fare una semplice animazione Adobe Illustrator non così difficile come sembra a prima vista.
Ma per creare video lunghi o applicazioni interattive ancora meglio da usare Adobe Flash o altri editor flash. Ad esempio, ho realizzato questo gatto in un vecchio MacromediaFlash, che ho scoperto durante il mio lavoro.
Inoltre, recentemente HTML5 e CSS3 vengono sempre più utilizzati per creare animazioni. Questo codice è supportato dai browser moderni e non richiede l'uso di flash player.
Roman aka dacascas soprattutto per il blog
Iscriviti alla nostra newsletter per non perdere nulla di nuovo:
Recentemente, vari tipi di animazione della grafica SVG (Scalable Vector Graphics) su siti Web e applicazioni sono diventati molto popolari. Ciò è dovuto al fatto che tutto browser più recenti supportano già questo formato. Ecco le informazioni sul supporto del browser per SVG.
Questo articolo discute l'esempio più semplice di un'animazione vettoriale SVG utilizzando il leggero plugin Jquery Lazy Line Painter.
FontePer completare e comprendere appieno questa attività, è auspicabile la conoscenza di base di HTML, CSS, Jquery, ma non richiesta se si desidera solo animare SVG) Cominciamo!
E questi sono i passaggi che dobbiamo seguire:
1. Creare la struttura file corretta
In questo ci aiuterà il servizio Inizializzazione, dove dobbiamo selezionare i parametri come nell'immagine qui sotto.
- Classico H5BP (piastra caldaia HTML5)
- Nessun modello
- Solo HTML5 Shiv
- Minimizzato
- Classi IE
- Cornice cromata
- Quindi fare clic su Scaricalo!
2. Scarica e collega il plugin
Poiché inizializzazione viene fornita con l'ultima libreria Jquery, dall'archivio che dobbiamo scaricare dal repository del progetto Lazy Line Painter, dobbiamo solo trasferire 2 file nel nostro progetto. Il primo è "jquery.lazylinepainter-1.1.min.js" (la versione del plugin potrebbe differire) e si trova nella radice della cartella risultante. Il secondo è example/js/vendor/raphael-min.js.
Inseriamo questi 2 file nella cartella js. E li colleghiamo al nostro index.html prima di main.js come segue:
3. Disegna una bella immagine di contorno in Adobe Illustrator
Ad esempio, puoi utilizzare le icone nell'allegato.
4. Converti la nostra immagine in Lazy Line Converter
Trascina semplicemente la tua icona nella finestra nell'immagine qui sotto.
Lo spessore, il colore del contorno e la velocità dell'animazione possono essere modificati nel codice stesso, che apparirà dopo la conversione!
5. Incolla il codice risultante in main.js
Ora incolliamo semplicemente il codice risultante in un file main.js vuoto
Opzioni:
StrokeWidth: spessore del contorno
ictusColor: colore del contorno
Puoi anche modificare la velocità di disegno di ciascun vettore modificando i valori del parametro durata (default 600)
6. Aggiungi un po' di CSS a piacere
Rimozione di un paragrafo da index.html
Ciao mondo! Questo è il boilerplate HTML5.
E invece inseriamo un blocco in cui avverrà la nostra animazione
quindi aggiungiamo alcuni CSS al file main.css per renderlo più gradevole:
Corpo ( sfondo:#F3B71C; ) #icone ( posizione: fissa; superiore:50%; sinistra:50%; margine: -300px 0 0 -400px; )
salvare tutti i file.
Ora apri semplicemente index.html in un browser moderno e goditi l'effetto.
PS all'avvio macchina locale Potrebbe verificarsi un ritardo nell'avvio dell'animazione di diversi secondi.
Ottimizzazione grafica web
Informazioni grafiche viene trasmesso molto più lentamente del testo e il tempo di caricamento delle immagini è proporzionale alla loro dimensione file grafici. Pertanto, il caricamento veloce delle pagine Web richiede una piccola dimensione incorporata immagini grafiche, che si ottiene attraverso la loro ottimizzazione. Per ottimizzazione dell'immagine si intende la sua conversione, garantendo una 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 i parametri di compressione per i singoli frammenti di immagini.
Illustrator dispone di strumenti di ottimizzazione delle immagini integrati che rendono il processo di ottimizzazione rapido ed efficiente con una varietà di metodi di anteprima. L'anteprima dà un'idea abbastanza precisa di come apparirà l'immagine ottimizzata in tempo reale, il che ti aiuta a valutare il risultato dell'ottimizzazione e a selezionare con successo le giuste impostazioni. Ed è possibile ottimizzare sia le immagini create direttamente in Illustrator, sia altre, ad esempio, fotografie che dovrebbero essere inserite su un sito Web.
I parametri di ottimizzazione vengono impostati nella finestra Salva per Web, richiamata con il comando omonimo dal menu File. Il programma ti offre la possibilità di utilizzare una delle quattro modalità di anteprima, ma due sono le più adatte per valutare la qualità dell'ottimizzazione:
- 2-Up (due opzioni) visualizzazione simultanea dell'immagine originale e ottimizzata in base alle impostazioni specificate (Fig. 1);
- 4-Up (quattro opzioni) In questa modalità il viewport è diviso 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, e la gli altri due sono variazioni delle attuali impostazioni di ottimizzazione.
Entrambe le modalità consentono di risparmiare notevolmente tempo nella ricerca della migliore opzione di ottimizzazione, poiché eliminano la necessità di salvare immagini con diverse impostazioni di ottimizzazione e il loro successivo confronto visivo. Inoltre, con diverse opzioni di connessione è possibile valutare non solo la qualità dell'immagine ottimizzata, ma anche la sua dimensione e il tempo di caricamento. Per fare un confronto, la modalità più conveniente è 4-Up (quattro opzioni), che consente di valutare visivamente l'effetto della compressione o della riduzione della tavolozza sulla qualità dell'immagine e sulle sue dimensioni 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 SWF e SVG. Le immagini indicizzate che presentano un numero limitato di colori vengono salvate in formato GIF. Il formato JPG viene utilizzato per salvare immagini a colori e in scala di grigi, fotografie e grafica ricca di colori, come i riempimenti sfumati. Per le immagini a colori con aree trasparenti viene utilizzato il formato PNG, che consente di salvare sia immagini indicizzate che a colori, mentre nel formato PNG-8 il numero massimo possibile di colori dell'immagine ottimizzata è 256, e in nel formato PNG-24 l'immagine può avere milioni di colori, ed è per questo che assomiglia Formato JPEG. La differenza tra PNG-24 e JPEG è che il metodo di compressione utilizzato per ottimizzare le immagini nel formato PNG-24 non comporta una perdita di qualità, ma di conseguenza aumenta la dimensione del file. I formati SVG e SWF combinano grafica, testo e componenti interattivi e possono anche essere ottimizzati.
Consideriamo esempio specifico ottimizzazione delle immagini. Supponiamo che il logo di un sito Web sia stato sviluppato in Illustrator (Fig. 3), inizialmente 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 risultante a causa della deformazione (Fig. 4 e 5).
Proviamo quindi ad esportare il logo in formato PSD con il comando File=>Esporta (File=>Esporta) la dimensione dell'immagine creata sarà di 143 KB. Apri il file PSD risultante e utilizza il comando File=>Salva per Web. Tenendo conto del numero limitato di colori coinvolti nell'immagine, in questo caso è ottimale il formato GIF, di cui è necessario decidere le impostazioni specifiche. Sperimentando le impostazioni, puoi assicurartene migliore qualità fornisce l'algoritmo di compressione predefinito del programma, 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 in formato GIF insieme al file HTML (Fig. 8). Di conseguenza, in questo esempio, i file emblem.html e emblem.gif sono stati ottenuti nella cartella Primer1.
Un elemento specifico indispensabile del design di qualsiasi pagina Web sono i pulsanti di controllo grafico. È semplicemente impossibile immaginare una pagina senza di loro. Il disegno dei pulsanti è diventato oggi un genere speciale e Illustrator ti consente di creare le opzioni più complesse. Ad esempio, i pulsanti progettati come oggetti mesh e/o con maschere sovrapposte sembrano molto più impressionanti di quelli normali.
Considera l'opzione di creare un pulsante rotondo e convesso in Illustrator. Disegna un oggetto vettoriale sotto forma di un cerchio riempito con un colore arbitrario (Fig. 9) e convertilo in una mesh con il comando Oggetto => Crea mesh gradiente (Oggetto => Crea una mesh gradiente), specificando quattro righe e quattro colonne e nell'elenco Aspetto, selezionando l'opzione Per centrare l'evidenziazione pari a 60 (Fig. 10). Seleziona lo strumento Selezione diretta e fai clic nell'angolo in alto a sinistra dell'oggetto, selezionando i punti di ancoraggio situati lì (Fig. 11). Cambia il colore della cella corrispondente in bianco selezionandolo nella palette Campioni (Fig. 12).
Prendi lo strumento Ellisse, posiziona il pennarello del mouse al centro del cerchio creato prima e, tenendo premuti i tasti Alt e Shift, allunga il nuovo cerchio sopra quello vecchio in modo che sia 1-2 pixel più grande di quello vecchio su tutto lati. Dagli un bordo nero (Tratto) largo 1-2 pixel e riempilo con un gradiente radiale nella direzione dal rosso al bianco (Fig. 13). Trascina l'oggetto vettoriale creato di 1-2 pixel verso destra e verso il basso, quindi, senza rimuovere la selezione, fai clic con il pulsante destro del mouse su di esso e fuori menù contestuale seleziona Disponi => Porta in secondo piano. Il risultato sarà 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 del movimento all'interno del sito. Consideriamo il caso più semplice di avere due pulsanti, uno dei quali, con la freccia giù, significherà passare alla pagina successiva, e un pulsante con la freccia su significherà passare a quella precedente. Come modello di freccia, prendiamo un triangolo regolare, disegnato con lo strumento Poligono, dipinto di nero e, per un effetto maggiore, concepito anche come oggetto mesh. Spostare la freccia sul pulsante e regolare la posizione di tutti gli oggetti l'uno rispetto all'altro utilizzando i pulsanti corrispondenti nella palette Allinea. Il primo dei pulsanti risultanti è mostrato in Fig. 15. Facciamo una copia del livello con il pulsante selezionando il comando Duplica livelli livello, di conseguenza otterremo due livelli identici. Selezionare quindi la freccia sulla copia del livello e ruotarla di 180° selezionando il comando Trasforma=>Ruota Trasformazione=>Ruota dal menu contestuale. Otterremo lo stesso pulsante mostrato in Fig. 16. Tieni presente che è molto più conveniente memorizzare tutti gli stessi tipi di pulsanti per un progetto in un file su livelli diversi, come dimostrato in questo caso.
Ora devi salvare le versioni ottimizzate di ciascun pulsante. Per prima cosa rendi invisibile il livello inferiore, in questo caso il pulsante sul livello superiore verrà preservato. Selezionare il comando File=>Salva per Web, configurare i parametri di ottimizzazione del pulsante, ad esempio, come mostrato in Fig. 17, fare clic sul pulsante Salva e inserire un nome file. Il pulsante infine salvato è mostrato in Fig. 18. Ora restituisci visibilità al 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 aspetto abbastanza accettabile sulla pagina Web e posizionarli su una pagina personalizzata (Fig. 20). Di conseguenza, in questo esempio, nella cartella immagini (cartella Primer2) sono stati ottenuti il file Primer2.html e due immagini grafiche.
Se lo si desidera, è facile trasformare un pulsante in una sezione durante il processo di ottimizzazione. In questo caso, dopo aver selezionato il comando File=>Salva per Web (File=>Salva per Web) e impostato i parametri di ottimizzazione, è necessario selezionare lo strumento Selezione sezioni dalla tavolozza degli strumenti e fare doppio clic sull'immagine, che eventualmente verrà trasformarsi automaticamente in una fetta con il numero di serie 1 (Fig. 21). Facendo nuovamente doppio clic si aprirà la finestra Opzioni sezione, in cui sarà necessario specificare un collegamento e facoltativamente modificare il nome della sezione (Figura 22), quindi salvare l'immagine ottimizzata. Il risultato in questo caso saranno i file Primer3.html (Fig. 23) e Primer3.gif (cartella Primer3).
Un modo per dare vita a una pagina è introdurre elementi di design che la cambino aspetto(o stato) a seconda del comportamento del mouse o, meno spesso, in caso di altre situazioni: ridimensionamento, scorrimento, caricamento, errori, ecc.
Tra questi elementi, i più famosi sono i rollover (dall'inglese roll over roll over, turn over), elementi che cambiano aspetto sotto l'influenza del mouse. Esempi di rollover tipici sono i pulsanti animati. I rollover vengono spesso utilizzati durante la creazione di altri elementi di navigazione del sito web. In realtà, 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: Normale stato normale, Sopra passando il cursore del mouse su un elemento e Giù premendo il pulsante sinistro del mouse quando si passa il cursore su di esso. 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, spesso si limitano a cambiare l'elemento solo per i primi tre o anche due eventi.
Rollover classiciNel senso classico, un rollover è una serie di immagini grafiche in formato GIF e il corrispondente codice HTML, grazie al quale, a seconda del comportamento del mouse, un'immagine ne sostituisce un'altra nella finestra del browser.
Illustrator non è pensato per creare direttamente rollover nel senso classico, ma può aiutare a svilupparne gli elementi iniziali. L'idea in questo caso è creare un livello con l'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 multistrato 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 il programma Illustrator, come in molti altri casi, risiede in alcune delle sue funzionalità interessanti che non sono disponibili in altri Software, combinato con la comodità di trasformare la 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 sotto forma di un rettangolo arrotondato 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 mesh con un'evidenziazione al centro (comando Oggetto=>Crea oggetto mesh gradiente=>Crea mesh gradiente), specificando quattro righe e dieci colonne (Fig. 25). Attiva la seconda copia del rettangolo e impostala su un riempimento sfumato approssimativamente come mostrato in Fig. 26. Sovrapponi l'oggetto gradiente sopra quello mesh, riduci l'opacità dell'oggetto gradiente a circa l'80% e la dimensione di circa 1 pixel per simulare eventualmente l'effetto di un rilievo. E poi stampa l'iscrizione sopra gli oggetti. Nella sua forma originale, lascia che abbia un colore bianco, che corrisponderà allo stato Normale (Fig. 27), quindi quando lo stato di rollover cambia, il colore dell'iscrizione cambierà, ad esempio, in verde quando il marcatore del mouse viene posizionato sopra di esso (stato Sopra) e diventa blu quando si preme il pulsante del mouse (stato Giù).
Presta attenzione alla palette Livelli: in questa fase è presente un solo livello. Crea due copie di questo livello utilizzando il comando Duplica livello dal menu della palette Livelli; ci saranno tre livelli nella palette (Fig. 28). Quindi nella prima copia dello strato cambia il colore dell'iscrizione in verde e nella seconda copia in blu (Fig. 29). Di conseguenza, verrà ottenuto lo spazio necessario per il rollover.
Esporta l'immagine creata in formato PSD, preservando i livelli, utilizzando il comando File=>Esporta e selezionando il modello di colore RGB (Fig. 30). Apri il file PSD creato nel programma ImageReady (Fig. 31 e 32). Crea fotogrammi basati su livelli selezionando il comando Crea fotogrammi da livelli dal menu della palette Animazione. La finestra di animazione apparirà come in Fig. 33. In questo caso, verrà inizialmente creato un singolo stato Normale nella palette Rollover.
Quindi, nella finestra Animazione, seleziona il fotogramma corrispondente allo stato indotto e il livello Copia livello 1 verrà automaticamente selezionato nella palette Livelli (Fig. 34). Accedere alla palette Rollover e fare clic sul pulsante Crea stato rollover (Crea uno stato rollover) fig. 35, che farà apparire lo stato Stato sopra nella palette Rollover (Fig. 36). Crea uno stato Giù allo stesso modo. Attiva lo stato Normale nella palette Rollover ed elimina tutti i fotogrammi nella palette Animazione tranne quello che dovrebbe corrispondere allo stato Normale. Di conseguenza, per ogni stato di rollover ci sarà un solo fotogramma nella palette Animazione (Fig. 37, 38 e 39).
Riso. 38. Visualizzazione dell'immagine, della finestra Animazione e delle palette Livelli e Rollover per lo stato Sopra
Controllare il risultato facendo clic sul pulsante Anteprima nel browser predefinito sulla barra degli strumenti e accedendo alla finestra del browser (Figura 40). Successivamente, salva il file utilizzando il comando File=>Salva ottimizzato e specificando l'opzione HTML e Immagini (*.html). Di conseguenza, in questo esempio, nella cartella immagini è stato ottenuto il file Primer4.html e una serie di immagini grafiche.
Riso. 40. Finestra del browser con elemento Rollover
Rollover SVGIl formato SVG (Scalable Vector Graphics) sempre più popolare Grafica vettoriale), realizzato sulla base dello standard XML, consente anche di ricevere diversi elementi interattivi, in particolare i rollover, ma 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.
Per lavorare con gli oggetti SVG è disponibile un'apposita palette SVG Interactivity, che può essere facilmente aperta utilizzando il comando Window => SVG Interactivity (Window => SVG interactivity) fig. 41.
Consideriamo questa opzione per creare un rollover usando l'esempio di un pulsante interattivo, il colore della scritta su cui cambierà dal nero al blu quando si passa il mouse e si trasformerà nuovamente in nero quando il mouse lascia la zona attiva.
Crea un pulsante rettangolare con bordi arrotondati e seleziona un riempimento sfumato adatto, ad esempio come mostrato in Fig. 42. Regola la trasparenza del pulsante nella palette Trasparenza. In questo esempio, il valore Opacità è impostato al 50%. Fai una copia del pulsante, riempila di verde scuro (Figura 43), quindi convertilo in un oggetto mesh con il comando Oggetto => Crea mesh gradiente, specificando quattro righe e dieci colonne, e nella lista Aspetto (Visualizza) selezionando l'opzione Al centro e impostando il valore Evidenzia su 100. Riduci l'opacità del livello con l'oggetto mesh a circa il 40% (Fig. 44). Posiziona un oggetto mesh sopra uno sfumato e il pulsante assomiglierà a quello mostrato in Fig. 45.
Riso. 44. Trasforma una copia di un pulsante in un oggetto mesh
Completa il pulsante con l'iscrizione desiderata e regola la sua posizione utilizzando i pulsanti corrispondenti nella palette Allinea. L'immagine risultante conterrà uno strato con tre oggetti sovrapposti l'uno all'altro (Fig. 46). Gli eventi pianificati saranno relativi 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 Livello 1 a Livello (Fig. 47).
L'elaborazione degli eventi implica l'uso di procedure JavaScript, quindi è necessario includere un file che descriva tali procedure. Si chiama Events.js e viene salvato su disco nella cartella Sample Files\Sample Art\SVG\SVG al momento dell'installazione Programmi Adobe Illustratore. Per connettere il file Events.js utilizzare il comando JavaScript Files SVG Interactivity (Fig. 48). Successivamente, devi fare clic sul pulsante Aggiungi e trovare il file desiderato sul tuo disco rigido. Quando il suo nome appare nel campo URL (Figura 49), fare clic sul pulsante Fine.
Riso. 48. Selezione del comando File JavaScript
Successivamente, è necessario definire una risposta agli eventi del mouse per l'oggetto Text. Seleziona l'oggetto Testo, nel campo Evento della palette Interattività SVG, seleziona l'evento onmouseover elemColor(evt, "Text", "#3333FF") questo significherà che quando il mouse sarà sopra l'oggetto Testo, il suo colore cambierà in blu (Fig. 50 ). Affinché il colore del testo diventi nero dopo che il mouse lascia l'area attiva, dovrai creare un altro evento onmouseout selezionandolo nel campo Evento della palette Interattività SVG. Quindi nella riga dell'azione inserisci il testo elemColor(evt, "Text", "#000000") questo restituirà il colore al nero (Figura 51).
Riso. 51. Aspetto finale della palette Interattività SVG per l'oggetto Testo
Salva il rollover creato come file SVG con il comando File=>Salva con nome (File=>Tipo di file formato SVG, quindi impostando le opzioni per salvare il file SVG come mostrato in Fig. 52. Dopo il salvataggio, ne riceverai solo uno un unico file con estensione SVG e non due, come nel caso del rollover classico, in questo caso è stato ricevuto il file Primer5.svg (cartella Primer5), tuttavia affinché il rollover funzioni davvero è necessario copiarlo ulteriormente il file Events.js dalla descrizione delle procedure JavaScript, dopodiché puoi verificare la funzionalità del rollover, il risultato sarà simile a quello mostrato in Fig. 53.
Il formato SVG può essere utilizzato anche per trasmettere animazioni. Proviamo a creare un semplice elemento animato (in questo caso si tratterà di un'informazione relativa all'azienda), che apparirà sullo schermo quando si passa con il mouse sull'oggetto grafico corrispondente e scomparirà quando si allontana il mouse dall'elemento interattivo.
Creiamo approssimativamente la seguente serie di oggetti grafici e testuali, come mostrato in Fig. 54. Rinominiamo tutti gli oggetti creati in modo conveniente facendo clic in sequenza sul nome dell'oggetto successivo nella palette Livelli e inserendo nome desiderato(Fig. 55). Si tenga presente che quelli evidenziati in Fig. 56 oggetti Testo1, Testo2, Testo3 e Percorso1 saranno sempre visibili, e tutti gli altri solo quando passi il mouse sopra l'oggetto Testo1.
Riso. 54. Visione originale dell'immagine
Includi il file Events.js che descrive le procedure JavaScript utilizzando il comando File JavaScript dalla palette Interattività SVG, facendo clic sul pulsante Aggiungi, puntando al file desiderato sul disco rigido e facendo clic sul pulsante Fine.
Definire una risposta agli eventi del mouse per l'oggetto Text1. Seleziona l'oggetto Testo, nel campo Evento della palette Interattività SVG, seleziona l'evento onmouseover e nella riga sottostante inserisci il testo elemShow(evt, "Text4"); elemShow(evt, "Percorso2") . Di conseguenza, quando il mouse si trova sull'oggetto Testo1, gli oggetti Testo4 e Percorso2 diventeranno visibili. Si tenga presente che se al verificarsi di un evento devono essere eseguite più azioni, queste devono essere specificate utilizzando il segno “;”. Quindi esegui un'operazione simile per l'evento onmouseout, inserendo il testo per esso, che significherà nascondere gli oggetti (Fig. 57).
Salvare il risultato come file SVG utilizzando il comando File=>Salva con nome, specificando il nome del file, selezionando il formato SVG nel campo Tipo file, quindi impostando le opzioni per salvare il file SVG in conformità con la Fig. 58. Dopo il salvataggio verrà ricevuto il file Primer6.svg (cartella Primer6). Non dimenticare di copiare il file Events.js nella cartella con questo file. Se dopo questo scappi perché questa vita, allora 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 la comparsa iniziale degli oggetti Testo 4 e Percorso 2 al momento del caricamento. Per eliminare questo problema, seleziona entrambi i dati dell'oggetto contemporaneamente e crea un'azione per essi elemHide(evt, "Text4"); elemHide(evt, "Path2") all'evento onload (Fig. 60). Salva nuovamente il file e assicurati che gli oggetti Text4 e Path2 siano ora visibili solo quando passi il mouse sopra l'oggetto Text1.
Qualsiasi pagina Web è impensabile senza l'animazione Web, comprese le gif animate. Una delle opzioni per crearli è utilizzare l'applicazione Adobe ImageReady, che consente, tra le altre cose, di creare animazioni da livelli. In questo caso, l'immagine multistrato stessa può essere preparata in diverse applicazioni, incluso Adobe Illustrator.
È molto semplice creare un'animazione basata sugli elementi della palette Simboli, aperta con il comando Finestra=>Simboli, o da una delle librerie di simboli apribili con il comando Finestra=>Librerie Simboli. ).
Ad esempio, proveremo ad aumentare la dimensione di un qualsiasi oggetto simbolo; le fasi chiave del processo di aumento dell'oggetto dovranno essere impostate su livelli separati. Per prima cosa è sufficiente posizionare gli oggetti simbolo uno sopra l'altro, quindi aumentare le dimensioni di ciascun oggetto successivo, ad esempio come mostrato in Fig. 61. Di conseguenza, nella tavolozza Livelli verrà creato un livello con molti oggetti (Fig. 62). Se esporti direttamente questa immagine in formato PSD, non darà nulla, poiché c'è solo un livello e, naturalmente, quando apri il file PSD nel programma 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 1 nella palette Livelli e utilizzare il comando Rilascia su livello. Il risultato sarà che ciascuno degli oggetti verrà spostato sul proprio livello, ma saranno tutti nidificati nel Livello 1. Pertanto, dovrai trascinare manualmente tutti i livelli nidificati nella parte superiore della palette Livelli in modo che siano sopra il livello Livello 1, quindi eliminare semplicemente il livello Livello 1 ora vuoto (Fig. 63). Esportare l'immagine in formato PSD utilizzando il comando 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 palette Animazione Crea fotogrammi da livelli. Di conseguenza, verranno creati cinque fotogrammi, ciascuno dei quali corrisponderà al proprio livello, e la finestra della palette Animazione sarà simile a quella in Fig. 67.
Successivamente, impostare la durata di ciascuno dei fotogrammi creati, in questo caso la durata per tutti i fotogrammi è impostata su 0,2 s. E poi salva l'animazione con l'ottimizzazione usando il comando File=>Salva ottimizzato (File=>Salva con ottimizzazione). Il risultato risultante potrebbe assomigliare alla Fig. 68.
È ancora più conveniente ottenere spazi vuoti che possano poi essere facilmente convertiti in animazioni in ImageReady per utilizzare le funzioni Live Blends di Illustrator. Questo uso combinato di Illustrator e ImageReady accelera notevolmente il processo di creazione di animazioni GIF.
Ad esempio, disegna due oggetti multicolori arbitrari, quindi collegali con un collegamento di fusione 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 ciò, nella finestra Livelli, seleziona la linea, attiva il menu della tavolozza facendo clic sulla freccia nera nell'angolo in alto a destra e seleziona il comando Rilascia in sequenza livelli (Fig. 71). Tieni premuto il tasto Maiusc, seleziona i livelli creati e posizionali sopra il livello Livello 1, quindi elimina il livello Livello 1 stesso, spostandolo nel cestino di conseguenza, la tavolozza dei livelli assumerà la stessa forma di Fig. 72.
Riso. 70. Stato iniziale Finestre dei livelli
Esporta il file creato in formato PSD utilizzando il comando File=>Esporta. Apri il file PSD creato nel programma ImageReady (Fig. 73). Tieni presente che tutti i livelli creati in Illustrator appariranno nella finestra dei livelli (Fig. 74) e nella finestra Animazione per ora ci sarà solo un fotogramma.
Attivate il menu della palette Animazione cliccando sulla freccia nera nell'angolo in alto a destra della palette e selezionate il comando Crea fotogrammi da livelli. Di conseguenza, in questo esempio verranno creati cinque fotogrammi e la finestra della palette Animazione prenderà il forma secondo la fig. 75. Seleziona tutti i fotogrammi tenendo premuto il tasto Maiusc e imposta la durata del fotogramma appropriata. In questo esempio, per ogni fotogramma viene preso lo stesso tempo di 0,2 s. Salvare poi il file con ottimizzazione utilizzando il comando File=>Salva ottimizzato (File=>Salva con ottimizzazione), impostando l'opzione Solo immagini (*.gif) nella lista Tipo file. L'animazione assomiglierà alla Fig. 76.
Ciò che sembra 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 di transizione di fusione, posizionare tutti gli oggetti uno sopra l'altro utilizzando i pulsanti Centro allineamento orizzontale e Centro allineamento verticale della palette Allinea (Fig. 77).
Esportare 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 fotogrammi da livelli Crea fotogrammi da livelli) e seleziona una durata adatta per essi (Fig. 79). E poi, per rendere l'animazione più efficace, copia i fotogrammi esistenti, ma in ordine inverso in modo che l'immagine prima aumenti, poi diminuisca, e così via in cerchio (Fig. 80). Quindi salvare il file di ottimizzazione (File=>Salva file ottimizzato=>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
Una GIF trasparente in Adobe Illustrator viene creata come segue. Vai al menu File > Salva per Web e dispositivi (Alt+Ctrl+Shift+S). Nella finestra che si apre, nel campo Formato file ottimizzato, devi prima recarti nella scheda Dimensioni immagine. Il fatto è che per impostazione predefinita l'intera pagina è inclusa nella finestra di ottimizzazione e questo di solito non è necessario. Pertanto, nella scheda Dimensioni immagine, deseleziona la casella di controllo Clip su tavola da disegno e fai clic sul pulsante Applica.
Quindi seleziona GIF dall'elenco di selezione del formato e seleziona la casella di controllo Trasparenza.
Successivamente, determineremo quali colori saranno trasparenti. Tutti i colori presenti nell'immagine sono contenuti nella scheda Tabella colori e vengono visualizzati come quadrati colorati. Seleziona lo strumento Contagocce dalla barra degli strumenti sul lato sinistro della finestra.
Esistono due modi per definire i colori. Il modo più semplice è specificare un 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 sul quadratino colorato corrispondente. Sia nel primo che nel secondo caso, se è necessario selezionare più colori, è necessario agire tenendo premuto il tasto Shift (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. Nell'immagine, questo pulsante è cerchiato e il colore rosso è impostato su trasparente. Nell'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. È responsabile del menu a discesa Specifica algoritmo di dithering della trasparenza, in russo - Algoritmo per simulare la trasparenza (Fig. sotto). Sono disponibili quattro scelte: Dithering trasparenza nessuna, Dither trasparenza diffusione, Dither trasparenza modello e Dither trasparenza rumore. Nella modalità dell'algoritmo di diffusione, il cursore Quantità diventa attivo, consentendo di modificare il valore di diffusione. Cosa applicare in pratica? A seconda dello scopo e dell'immagine. Non utilizzo questa opzione e la lascio sempre al valore predefinito: Nessun dithering trasparenza.
Fai clic su Salva: la GIF trasparente è pronta. Il lavoro è stato eseguito nella versione Adobe Illustrator CS4 (v.14), ma tutte le azioni e le scorciatoie da tastiera sono rilevanti anche per la versione precedente CS3 (v. 13).
Importa e animazione semplice Ciao. Oggi esamineremo una semplice animazione in After Effects.
Risorse: Adobe Illustrator CC
Adobe After Effects CC
Iniziamo a imparare disegnando in Illustrator.
Disegnamo
1) Disegna un rettangolo giallo come sfondo
Figura 1 - Rettangolo
2) Disegna un cerchio e riempilo con una sfumatura
Lavoriamo un po' sul cerchio:
- elimina il punto inferiore del contorno, otteniamo un arco;
- tracciamo una linea retta, chiudendo la parte inferiore dell'arco, otteniamo un semicerchio
Figura 2 - 1) tracciare un cerchio; 2) gradiente; 3) cancella punto
3) Disegna un rettangolo e fanne una copia
- un rettangolo grigio;
- un altro rettangolo è grigio scuro
4) Disegna un triangolo da un asterisco impostando il numero di raggi su 3
Figura 3 - 1) luce retta; 2) rettangolo scuro; 3) triangolo
5) Disegna un gatto usando la penna e forme semplici 
Figura 4 - 1) testa; 2) collo; 3) corpo; 4) gamba; 5)coda
E ora il momento più IMPORTANTE
Distribuiamo le immagini in livelli (ciò che verrà animato è su un livello separato) in questo modo: 
Figura 5: tutte le foto (segno rosso degli strati importanti)
Questo è tutto, ora salviamo.
Diamo un'occhiata alle impostazioni di salvataggio
Figura 6 - Salva
E ora la fase successiva. Chiudi Adobe Illustrator e apri After Effects.
Importa in After Effects
File - Importa - File - seleziona il nostro file Illustrator salvato.
Scegliamo di importare i livelli da Illustrator; se inseriamo il filmato, otterremo un'immagine con i livelli uniti, ma non ne abbiamo bisogno.
Figura 7 - Importa come composizione
Questo è tutto, importato.
Ora vediamo cosa abbiamo. Fare doppio clic sulla composizione in modo che si apra e vediamo i livelli (se tutto è fatto correttamente, ci saranno diversi livelli). Otteniamo questo, vedi figura
Figura 8 - Composizione aperta
E ora ciò per cui siamo qui oggi è l'Animazione.
Animazione in After Effects
Imposta il punto di rotazione nella parte superiore della freccia utilizzando lo strumento Pan Behind (scorciatoia - Y). Prendiamo semplicemente un punto e lo spostiamo dove necessario. Di conseguenza sarà simile a questo.. 
Figura 9 – Strumento Panoramica e Livelli
Questo è tutto, ora passiamo ai livelli per l'animazione.
Avremo bisogno di un livello Arrow e Head_cat.
Iniziamo con la freccia.
Espandiamo l'elenco, troviamolo e facciamo clic sull'orologio. Quindi impostiamo il primo punto a zero secondi. L'animazione durerà 2 secondi in totale.
Quindi, queste sono le impostazioni che devi effettuare (metteremo 3 punti in totale):
| Secondo | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figura 10 – Freccia di rotazione
Ora animiamo la testa del gatto.
Espandiamo head_cat e troviamo Position .
Ci saranno 4 punti qui.
Verrà modificata solo l'ultima coordinata senza influenzare le altre.
| Secondo | 0.1 | 0.17 | 1.12 | 2.0 |
| Posizione | 689.3 | 729.3 | 729.3 | 689.3 |
Figura 11 – Posizionamento della testa
Quindi, il principio dell'animazione era questo. La freccia oscilla da un lato all'altro, non appena si avvicina al gattino, tira dentro la testa, rimane per un po 'in questa posizione e poi la riporta al suo posto.
La fase finale
Produzione
Devi creare un prodotto finito dal tuo lavoro.
Vai al menu - Aggiungi alla coda di rendering
Si aprirà il pannello Render e nel modulo Output (due clic) seleziona il formato di output. Ho preso *.mov
Figura 12 – Rendering
Fai clic sul pulsante RENDER e ottieni il risultato (non dimenticare di specificare il percorso).
È tutto.
