Formato File flash(SWF) si basa sulla grafica vettoriale ed è concepito per la grafica scalabile e compatta per il Web. Poiché questo formato di file è basato su grafica vettoriale, l'oggetto mantiene la qualità dell'immagine a qualsiasi risoluzione ed è ideale per creare fotogrammi di animazione. In Illustrator, puoi creare singoli fotogrammi di animazione sui livelli e quindi esportare i livelli dell'immagine come singoli fotogrammi da utilizzare sul sito Web. Puoi anche definire simboli in un file Illustrator per ridurre le dimensioni dell'animazione. Quando viene esportato, ogni simbolo viene definito una sola volta nel file SWF.

Comando di esportazione (SWF)

Fornisce il massimo controllo sull'animazione e sulla compressione dei bit.

Fornisce un maggiore controllo sulla combinazione di formati SWF e bitmap in un layout frammentato. Questo comando offre meno opzioni per l'immagine rispetto al comando Esporta (SWF), ma utilizza le opzioni del comando Esporta utilizzate più di recente (vedere ).

Tenere presenti le seguenti linee guida quando si prepara un oggetto per il salvataggio come SWF.

Con l'app Device Central, puoi vedere come apparirà oggetto grafico Illustrator nell'app Flash Player su vari dispositivi palmari.

Inserimento di una grafica di Illustrator

Le opere d'arte create in Illustrator possono essere copiate e incollate rapidamente, facilmente e facilmente Applicazione Flash.

Quando si incolla un elemento grafico di Illustrator in un'applicazione Flash, vengono mantenuti i seguenti attributi.

Contorni e forme

• Spessore del tratto

  Definizioni di gradienti

  Testo (inclusi i caratteri OpenType)

  Immagini correlate

• Modalità di fusione

Inoltre, Illustrator e Flash supportano le seguenti funzioni quando si incolla un elemento grafico.

Selezionando interi livelli di primo livello in un disegno di Illustrator e incollandoli in Flash, i livelli e le relative proprietà (visibilità e blocco) vengono preservati.

I formati colore di Illustrator diversi da RGB (CMYK, scala di grigi e formati personalizzati) vengono convertiti da Flash in RGB. Colori RGB inserito nel solito modo.

Quando importi o incolli la grafica di Illustrator, puoi utilizzare varie opzioni per salvare determinati effetti (come l'ombreggiatura del testo) come filtri Flash.

Flash salva le maschere di Illustrator.

Esporta file SWF da Illustrator

I file SWF esportati da Illustrator hanno la stessa qualità e compressione dei file SWF esportati da Flash.

Durante l'esportazione, puoi scegliere tra una varietà di stili predefiniti per un output ottimale e specificare come vengono utilizzate più tavole da disegno, come vengono convertiti caratteri, livelli, testo e maschere. Ad esempio, puoi scegliere di esportare i simboli di Illustrator come filmati o grafica oppure creare simboli SWF dai livelli di Illustrator.

Importazione di file Illustrator in un'applicazione Flash

Per creare un layout completo in Illustrator e quindi importarlo in Flash in un solo passaggio, puoi salvare il disegno in proprio formato Illustrator (AI) e importalo con alta fedeltà in Flash utilizzando File > Importa nello stage o File > Importa nella libreria.

Se il file Illustrator contiene più tavole da disegno, seleziona la tavola da disegno da importare dalla finestra di dialogo Importa Flash e specifica le impostazioni per ogni livello in quella tavola da disegno. Tutti gli oggetti nella tavola da disegno selezionata vengono importati Programma Flash come un unico strato. Quando importi un'altra tavola da disegno dallo stesso file AI, gli oggetti da quella tavola da disegno vengono importati in Flash come un nuovo livello.

Quando importi la grafica di Illustrator come file AI, EPS o PDF, Flash mantiene gli stessi attributi di quando incolli la grafica di Illustrator. Inoltre, se il file di Illustrator che stai importando contiene livelli, puoi importarli utilizzando uno dei seguenti metodi.

Converti i livelli di Illustrator in livelli Flash.

Converti i livelli di Illustrator in fotogrammi Flash.

Converti tutti i livelli di Illustrator in un livello Flash.

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 andare alla scheda dimensione dell'immagine(dimensione dell'immagine). Il fatto è che l'intera pagina entra nella finestra di ottimizzazione per impostazione predefinita, e questo di solito non è necessario. Pertanto, nella scheda Dimensioni immagine, deseleziona la casella di controllo Clip su tavola da disegno(Ritaglia per adattare la pagina) e fai 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 tavola dei colori(Carta 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. Bene, se sai esattamente quale colore dovrebbe essere trasparente, puoi selezionarlo direttamente sulla tabella dei colori facendo clic sulla casella colorata corrispondente. E nel primo e nel secondo caso, se devi selezionare più colori, devi lavorare con il tasto Maiusc (o Ctrl) premuto. Dopo aver scelto un colore, è necessario istruire il programma per 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 diventerà un triangolo bianco. Per annullare il colore selezionato, è necessario selezionarlo nella Tabella 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 retinatura trasparenza, in russo - Algoritmo di simulazione della trasparenza (fig. sotto). Ci sono 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, lo slider diventa attivo Quantità(Importo) che consente di modificare il valore di diffusione. Cosa applicare in pratica? A seconda dello scopo e dell'immagine. Non uso questa opzione e lascio sempre l'impostazione predefinita - Nessun dithering per trasparenza.

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

Ottimizzazione grafica web

Le informazioni grafiche vengono trasmesse molto più lentamente delle informazioni di testo e il tempo di caricamento delle immagini è proporzionale alla dimensione dei loro file grafici. Pertanto, il caricamento rapido delle pagine Web richiede una piccola dimensione delle immagini grafiche incorporate in esse, che si ottiene ottimizzandole. L'ottimizzazione dell'immagine è intesa come la sua 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 immagine.

Illustrator ha strumenti di ottimizzazione delle immagini integrati che forniscono vari metodi visualizzare in anteprima un processo di ottimizzazione rapido ed efficiente. 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 sono impostati nella finestra Salva per il Web(Salva per Web), richiamato dal comando omonimo del menu File(File). Il programma offre di utilizzare una delle quattro modalità di anteprima, ma di valutare la qualità dell'ottimizzazione il modo migliore misura due:

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

Entrambe le modalità consentono di risparmiare notevolmente tempo sulla ricerca. L'opzione migliore ottimizzazione, in quanto eliminano la necessità di salvare le immagini 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 caricamento quando diverse opzioni connessioni. Per fare un confronto, la modalità più conveniente è 4 su 4 (quattro opzioni), che consente di valutare visivamente l'impatto della compressione o della riduzione della tavolozza sulla qualità e le dimensioni dell'immagine e, in definitiva, determinare i migliori parametri di ottimizzazione.

Illustrator consente di ottimizzare la grafica Web non solo nei formati GIF, JPG, PNG-8 e PNG-24, ma anche in SWF e SVG. Le immagini indicizzate con un numero ridotto di colori vengono salvate in formato GIF. Per salvare immagini a colori e in scala di grigi, utilizzare foto e grafica ricca di colori come i riempimenti sfumati formato JPG. Per immagini a colori con aree trasparenti, applicare Formato PNG, che 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 le dimensioni 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 un emblema del sito (Fig. 3), originariamente salvato in formato AI. Un tentativo di ottimizzarlo immediatamente per il Web non porterà a nulla di buono, poiché in questo caso l'immagine verrà automaticamente ritagliata, il che non terrà conto della vera 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à 143 KB. Apri il file PSD risultante e usa il comando File => Salva per Web(File=>Salva per Web). Dato il numero limitato di colori coinvolti nell'immagine, in questo caso, il formato GIF è ottimale, con le impostazioni specifiche di cui devi decidere. Sperimentando le impostazioni, puoi vederlo migliore qualità fornisce l'algoritmo di compressione predefinito del programma selettivo(Selettivo). Per quanto riguarda lo smoothing, poi, data la presenza di un riempimento sfumato, è meglio scegliere un algoritmo con generazione del 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, facilmente verificabile salvando l'immagine in formato GIF insieme al file HTML (Fig. 8). Di conseguenza, in questo esempio, i file emblem.html ed emblem.gif sono stati ottenuti nella cartella Primer1.

Bottoni

Un elemento di design specifico 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 sfumato(Oggetto=>Crea mesh gradiente) specificando quattro righe e quattro colonne e nell'elenco Aspetto esteriore(Visualizza) selezionando un'opzione Al centro evidenziare(Retroilluminazione) a 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 puntatore del mouse al centro del cerchio creato prima 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 Ictus) con una larghezza di 1-2 pixel e riempirlo con una sfumatura radiale nella direzione dal rosso al bianco (Fig. 13). Trascina l'oggetto vettoriale creato di 1-2 pixel a destra e in basso, quindi, senza rimuovere la selezione, fai clic con il pulsante destro del mouse su di esso e da menù contestuale seleziona una squadra Disponi=>Invia in secondo piano(Organizza => Invia indietro). Di conseguenza, otteniamo uno spazio vuoto per il pulsante mostrato in Fig. quattordici.

Di norma, su qualsiasi pagina Web sono presenti più pulsanti dello stesso tipo, che differiscono, ad esempio, solo nella direzione delle frecce disegnate su di essi, che indicano la direzione di spostamento all'interno del sito. Considera il caso più semplice di avere due pulsanti, uno dei quali, con una freccia in giù, significherà passare a pagina successiva, e il pulsante freccia su a quello precedente. Come spazio vuoto per la freccia, prendiamo un triangolo regolare disegnato con lo strumento Poligono(Poligono) riempito di nero e anche disegnato 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 corrispondenti Allineare(Allineamento). Il primo dei pulsanti ricevuti è mostrato in fig. 15. Fare una copia del livello con il pulsante selezionando il comando Livello duplicato Strati, di conseguenza, otteniamo due strati identici. Quindi seleziona la freccia sulla copia del livello e ruotala di 180° selezionando il comando dal menu contestuale Trasforma=>Ruota Trasformazione=>Ruota. Otteniamo lo stesso pulsante mostrato in Fig. 16. Si noti 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 Web(File=>Salva per Web), configurare i parametri di ottimizzazione dei pulsanti, ad esempio, come mostrato in fig. 17, fare clic sul pulsante Salva(Salva) e immettere un nome file. Il pulsante così salvato è mostrato in Fig. 18. Ora rendi visibile il livello inferiore, rendi invisibile il livello superiore e salva il secondo pulsante allo stesso modo, assegnandogli 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 su una pagina personalizzata (Figura 20). Di conseguenza, in questo esempio, sono stati ottenuti il ​​file Primer2.html e due immagini grafiche nella cartella immagini (cartella Primer2).

Se lo si desidera, durante il processo di ottimizzazione, il pulsante può essere facilmente trasformato in una fetta. In questo caso, dopo aver scelto il comando File => Salva per Web(File => Salva per Web) e le impostazioni di ottimizzazione devono essere selezionate dalla tavolozza degli strumenti Selezione fetta(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 fetta(Opzioni sezione), in cui sarà necessario specificare un collegamento e, se lo si desidera, modificare il nome della sezione (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 li modifichino aspetto esteriore(o stato) a seconda del comportamento del mouse o, più raramente, in caso di altre situazioni: zoom, scroll, caricamento, errori, ecc.

Tra questi elementi, i più famosi sono i rollover (dall'inglese roll over 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. Ogni rollover, infatti, non è una, ma più (fino a quattro) immagini, ciascuna delle quali corrisponde a un evento specifico. Gli eventi principali sono considerati i seguenti: Normale lo stato normale, Passare il cursore del mouse sopra l'elemento e Giù premere il pulsante sinistro del mouse quando ci si passa sopra. In teoria, possono essere coinvolti eventi come Click che rilascia il pulsante sinistro del mouse dopo aver fatto clic, Su dopo aver rilasciato il pulsante, Out quando si lascia la zona attiva. Tuttavia, in pratica, ci si limita più spesso a cambiare l'elemento solo per i primi tre o anche due eventi.

Classici ribaltamenti

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 con lo sviluppo degli elementi iniziali per loro. L'idea in questo caso è quella di creare un livello con un'immagine corrispondente al primo evento. Quindi crea una copia del livello e trasforma l'immagine in modo che corrisponda al secondo evento e così via. L'immagine a strati risultante viene esportata in un file PSD con livelli conservati, sulla base del quale viene creato un rollover nel programma Image Ready. Il vantaggio dell'utilizzo di Illustrator, come in molti altri casi, è una serie di interessanti funzionalità 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 pieno 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 sfumato Object => Crea Gradient Mesh), specificando quattro righe e dieci colonne (Fig. 25). Attiva la seconda copia del rettangolo e imposta un riempimento sfumato, simile a quello mostrato in fig. 26. Posiziona l'oggetto sfumatura sopra la mesh, riduci l'opacità dell'oggetto sfumatura a circa l'80% e la dimensione a circa 1 pixel per simulare un effetto di rigonfiamento. 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 lo stato di rollover cambia, il colore dell'iscrizione 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 tavolozza 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, si otterrà il grezzo necessario per il rollover.

Esporta l'immagine creata in formato PSD con livelli conservati utilizzando il comando File=>Esporta(File=>Esporta) e selezionando il modello colore RGB (Fig. 30). Aprire il file PSD generato in ImageReady (Figure 31 e 32). Crea cornici in base ai livelli scegliendo il comando Crea cornici da livelli(Crea cornici dai livelli) dal menu della tavolozza animazione. La finestra Animazione apparirà come in fig. 33. Allo stesso tempo nella tavolozza Ribaltamenti Inizialmente, verrà creato un singolo stato Normale.

Poi nella finestra animazione seleziona il fotogramma corrispondente allo stato in bilico, mentre sei nella tavolozza Strati il livello viene selezionato automaticamente Copia di livello 1(Fig. 34). Vai alla tavolozza Ribaltamenti e fare clic sul pulsante Crea stato di rollover(Crea stato di rollover) fig. 35, che farà apparire lo Stato Oltre lo stato nella tavolozza Ribaltamenti(Fig. 36). Crea lo stato allo stesso modo Stato basso. Attiva Stato Normale nella tavolozza Ribaltamenti ed elimina 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 frame (Fig. 37, 38 e 39).

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

Verificare il risultato cliccando sul pulsante Anteprima nel browser predefinito(Anteprima del browser) sulla barra degli strumenti e andando nella finestra del browser (Figura 40). Successivamente, salva il file usando il comando File=>Salva ottimizzato(File=>Salva con ottimizzazione) e specificando l'opzione HTML e immagini (*.html). Di conseguenza, in questo esempio, sono stati ottenuti il ​​file Primer4.html e una serie di immagini grafiche nella cartella delle immagini.

Riso. 40. Finestra del browser con elemento Rollover

Rollover SVG

Il sempre più popolare formato SVG (Scalable Vector Graphics scalabile Grafica vettoriale), creato sulla base dello standard XML, permette anche di ottenere una varietà di 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 oggetti SVG. Interattività SVG, che è facile da aprire con il comando Finestra => Interattività SVG(Finestra=>Interattività SVG) fig. 41.

Consideriamo questa opzione per creare un rollover usando l'esempio di un pulsante interattivo, il colore dell'etichetta su cui passerà da nero a blu quando si passa il mouse sopra e tornerà nero quando il mouse lascia l'area attiva.

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

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

Completa il pulsante con l'iscrizione prevista e regola la sua posizione utilizzando i pulsanti della tavolozza corrispondenti Allineare(Allineamento). L'immagine risultante conterrà un livello con tre oggetti sovrapposti l'uno all'altro (Fig. 46). Gli eventi pianificati faranno riferimento a un oggetto di testo, quindi, per comodità, cambiarne il 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 prevede 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 una volta installato software Adobe Illustratore. Per includere il file Events.js, utilizzare il comando File JavaScript Interattività SVG(Fig. 48). Successivamente, è necessario premere il pulsante Aggiungere(aggiungi) e trova file desiderato sul disco rigido. Quando il suo nome compare nel campo URL(fig. 49), fare clic sul pulsante Fatto(Esci).

Riso. 48. Selezione del comando dei file JavaScript

Successivamente, dovresti definire la reazione agli eventi del mouse per l'oggetto Testo. Seleziona l'oggetto Testo, nel campo evento Tavolozze (Evento). 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 ha lasciato la zona attiva, è necessario creare un altro evento estromissione selezionalo nel campo evento Tavolozze (Evento). Interattività SVG. Quindi nella riga di azione inserire 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, e 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 rollover classico, in questo caso si è ottenuto il file Primer5.svg (cartella Primer5). Tuttavia, affinché il rollover funzioni davvero, devi anche copiare il file Events.js con la descrizione delle procedure JavaScript nella cartella con il file SVG. Dopodiché, puoi controllare le prestazioni del rollover, il risultato apparirà come mostrato in Fig. 53.

Animazione SVG

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

Creiamo approssimativamente una tale serie di oggetti grafici e di testo, come mostrato in Fig. 54. Rinomina comodamente tutti gli oggetti creati cliccando in successione sul nome dell'oggetto successivo nella palette Strati e inserendo il nome desiderato (Fig. 55). Si noti che evidenziato in Fig. 56 articoli Testo1, Testo2, Testo3 e Percorso1 sarà sempre visibile 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, in campo evento Tavolozze (Evento). Interattività SVG seleziona un evento al passaggio del mouse e nella riga sottostante inserire il testo elemShow(evt, "Text4"); elemShow(evt, "Percorso2"). Di conseguenza, quando il mouse è sopra l'oggetto Testo 1 gli oggetti diventeranno visibili Testo4 e Percorso2. Si noti che se è necessario eseguire più azioni quando si verifica un evento, è necessario specificarle tramite il segno ";". Quindi fai lo stesso per l'evento estromissione, inserendo il relativo 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 impostare le opzioni per il salvataggio del file SVG secondo 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 poi esegui il file creato, 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 questa mancanza, seleziona entrambi questi oggetti contemporaneamente e crea un'azione per loro elemHide(evt, "Testo4"); elemHide(evt, "Percorso2") su evento caricare(Fig. 60). Salva di nuovo 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 dai livelli. Allo stesso tempo, l'immagine multistrato stessa può essere preparata in diverse applicazioni, incluso Adobe Illustrator.

È molto facile creare un'animazione basata su elementi della tavolozza Simboli(Simboli) aperto dal comando Finestra => Simboli(Finestra=>Simboli) o da una delle librerie di simboli che si possono aprire con il comando Window=>Librerie di simboli(Finestra=>Librerie di simboli).

Ad esempio, proviamo ad aumentare le dimensioni di 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 ogni 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, questo non funzionerà, poiché esiste un solo 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 utilizzare il comando Rilascia a livello(Rilascio a strati). Il risultato sposterà 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, quindi il livello vuoto Strato 1 facile da rimuovere (Fig. 63). Esporta l'immagine in formato PSD usando 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 dai livelli). Di conseguenza, verranno creati cinque frame, ognuno dei quali corrisponderà al suo livello e alla finestra della tavolozza animazione apparirà come in Fig. 67.

Dopodiché, imposta la durata di ciascuno dei frame creati in questo caso, la durata di tutti i frame è 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 dal vivo Software 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 uniscili con i parametri appropriati (Fig. 69). È impossibile utilizzare questo file direttamente per creare un'animazione, poiché l'immagine si trova su un unico livello (Fig. 70). Pertanto, dovrai prima posizionare ogni elemento dell'oggetto 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 Rilascia alla 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, spostandolo di conseguenza nel cestino, la tavolozza 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). Aprite il file PSD creato in ImageReady (Fig. 73). Si noti che tutti i livelli creati nel programma Illustrator appariranno nella finestra dei livelli (Fig. 74) e nella finestra animazione ci sarà un solo frame.

Attiva il menu della tavolozza animazione, facendo clic sulla freccia nera nell'angolo in alto a destra della tavolozza, e scegli il comando Crea cornici da livelli(Crea riquadri dai livelli) alla fine, in questo esempio, verranno creati cinque riquadri e la finestra della tavolozza animazione assumerà la forma secondo la Fig. 75. Selezionare tutti i fotogrammi tenendo premuto il tasto Spostare e impostare una durata di frame adeguata in questo esempio, viene impiegato lo stesso tempo di 0,2 s per ciascuno dei frame. 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 uniforme degli oggetti blend. Ad esempio, puoi utilizzare la transizione di fusione già creata. In questo caso, dopo aver creato livelli separati per ogni elemento della transizione di fusione, posizionare tutti gli oggetti uno sopra l'altro utilizzando i pulsanti Centro di allineamento orizzontale(Allineamento relativo al centro orizzontale) e Centro di allineamento verticale(Allineamento rispetto al centro verticalmente). 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 loro (Fig. 79). E poi, per rendere l'animazione più efficace, copia i fotogrammi esistenti, ma dentro ordine inverso in modo che l'immagine prima aumenti e poi diminuisca, e così via in un cerchio (Fig. 80). Quindi salva 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

Oggi abbiamo un'insolita lezione di Adobe Illustrator. Perché questa volta non realizzeremo un'immagine statica, ma una vera animazione. Immagina, si scopre che con l'aiuto di Adobe Illustrator puoi anche disegnare cartoni animati :)

E non abbiamo bisogno di niente per questo. Organizzazione competente dei livelli e dell'esportazione lavoro finale in formato swf, dove ogni livello viene convertito in un fotogramma di animazione. Nel tutorial di oggi disegneremo un'animazione di conto alla rovescia in stile film retrò. L'output dovrebbe essere un filmato flash con lo stesso conto alla rovescia.

La prima cosa da fare è disegnare tutti gli elementi necessari per l'animazione futura. Per fare ciò, ho creato due posizioni del fotogramma della pellicola in un documento separato, un cerchio di riferimento, che viene tagliato in settori separati, una trama e un graffio verticale per aggiungere l'effetto dell'antichità, così come tutti i numeri e le iscrizioni.

Quando tutte le parti del nostro cartone animato sono pronte, puoi iniziare a creare l'animazione stessa. Per comodità, è meglio farlo in un nuovo documento. In questo caso, i livelli svolgeranno il ruolo di fotogrammi di animazione. E nel primo livello, devi solo copiare il fotogramma del film. Posizionalo al centro dell'area di lavoro.

Ora crea un secondo livello e copia il fotogramma del film in esso, in cui i fori ai bordi sono realizzati con uno spostamento. Deve anche essere centrato.

Da questi due livelli, puoi già ottenere l'animazione di un film in movimento. Ma in seguito avremo bisogno di molti più livelli. Quindi seleziona i primi due livelli, vai alle opzioni del pannello e fai una copia dei livelli.

In modo simile, dobbiamo accumulare 12 strati con fotogrammi di pellicola che ne definiscono il movimento.

Ora abbiamo un sacco di livelli e sono tutti visibili. Nel senso che gli strati superiori bloccano quelli inferiori, cosa poco comoda per il lavoro. Pertanto, puoi disattivare alcuni livelli facendo clic sull'icona dell'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 determinato fotogramma della nostra futura animazione. E ora, per poter aggiungere una leggera scossa al movimento della pellicola, dobbiamo spostare leggermente i fotogrammi ricevuti in direzioni diverse. Per fare ciò, attiva solo il livello con cui lavorerai questo momento, quindi sposta la cornice di un paio di pixel su entrambi i lati.

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 composto da settori dal documento delle parti del fumetto e posizionalo sul primo livello sopra il fotogramma della pellicola.

Se rimuovi la selezione dal cerchio, apparirà come un tutto unico. Questo è esattamente ciò di cui abbiamo bisogno.

Ma poiché è composto da settori separati, è possibile, cambiando il loro colore, creare animazioni molto rapidamente e facilmente. Per fare ciò, copia questo cerchio sul secondo livello e rendi più leggero il primo settore. Ricordi che la pellicola trema durante il movimento, quindi non è necessario mettere il cerchio esattamente al centro dell'inquadratura. Mettilo sull'occhio.

Allo stesso modo, devi copiare il cerchio su ogni livello successivo, mentre dipingi con un colore più chiaro un settore in più rispetto alla volta precedente. Tutti insieme, questi 12 strati formano un'animazione del movimento del film con un cerchio di riempimento.

Quindi dobbiamo aggiungere texture ai nostri livelli. Attiva il primo livello e copia la trama dal file sorgente con i pezzi di ricambio lì.

Quindi attiva i livelli successivi a turno e copia lì la stessa trama. Per farlo sembrare diverso su ogni fotogramma, basta ruotarlo di 90 gradi. Come avrai intuito, dobbiamo aggiungere texture a tutti e 12 i fotogrammi.

Se sei già piuttosto stanco di copiare, allora posso farti piacere: è rimasto davvero poco. La parte più difficile è finita. Resta da aggiungere graffi verticali e quasi tutto. Per fare ciò, ancora una volta, copia il graffio originale e mettilo in una posizione arbitraria in più livelli. Nel mio caso, i graffi appaiono in soli due strati.

Ora che il ciclo principale con l'animazione del film è pronto, resta da aggiungere i numeri. Dato che stiamo contando da 3 a 1 più la parola Go!!!, abbiamo bisogno di ancora più livelli. Non 12, ma fino a 48. Per fare ciò, devi creare altre tre copie di livelli già pronti con l'animazione del film.

E poi tutto è semplice. Accendi il primo livello e metti lì il numero tre.

Quindi è necessario copiare questa figura nei livelli successivi fino al termine dell'animazione del cerchio. Quando arrivi alla copia successiva dei livelli, dove il cerchio sarà di nuovo completamente riempito, devi inserire il numero due. Allo stesso modo, copia il numero uno nei livelli desiderati. E quando arrivi ai livelli finali per l'etichetta Go!!!, elimina semplicemente il cerchio prima di copiare l'etichetta sul livello desiderato.

Questo è tutto con l'animazione. La cosa principale qui è non confondersi. Puoi dare ai livelli dei nomi convenienti, ma in qualche modo ero troppo pigro :) Eppure, quando hai finito, assicurati di riattivare tutti i livelli facendo clic sull'icona dell'occhio.

Nella finestra delle impostazioni di esportazione, assicurati di impostare Esporta come: AI Layers su SWF Frames. È questa opzione che trasforma i livelli di Illustrator in fotogrammi di animazione. Quindi, fai clic sul pulsante Avanzate.

Si apriranno ulteriori impostazioni. Qui è necessario impostare il Frame Rate. Ho 12 fotogrammi al secondo. La casella di controllo Looping è responsabile del ciclo dell'animazione. Grazie a lei, il video verrà riprodotto in cerchio. E l'opzione Ordine livelli: dal basso verso l'alto esegue il rendering dei livelli dell'illustratore dal basso verso l'alto nel pannello. Questo è esattamente il modo in cui abbiamo costruito la nostra animazione.

Di conseguenza, otteniamo un filmato flash con la nostra animazione.

Ora vedi che creare una semplice animazione in Adobe Illustrator non è così difficile come sembra a prima vista.

Ma per creare video lunghi o applicazioni interattive, è comunque meglio usarlo Adobe Flash o altri editor flash. Ad esempio, ho realizzato questo gatto in un vecchio Macromedia Flash che ho scovato al lavoro.

Inoltre, di recente, HTML5 e CSS3 sono sempre più utilizzati per creare animazioni. Codice dato supportato dai moderni browser e non richiede l'utilizzo di un flash player.

Dacasca romana soprattutto per il blog

Iscriviti alla nostra newsletter per non perderti nessuna novità:

Adobe Illustrator e effetti postumi
Importazione e animazione semplice

Ciao. Oggi esaminiamo una semplice animazione in After Effects.

Risorse: Adobe Illustrator CC
Adobe After Effects CC

Iniziamo disegnando in Illustrator.

Disegniamo
1) Disegna un rettangolo giallo come sfondo

Figura 1 - Rettangolo

2) Disegna un cerchio e riempilo con un gradiente
Lavoriamo un po' sul cerchio:
- rimuovi il punto inferiore sul contorno, otteniamo un arco;
- traccia una linea retta, chiudendo la parte inferiore dell'arco, otteniamo un semicerchio

Figura 2 - 1) disegnare un cerchio; 2) gradiente; 3) eliminare il punto

3) Disegna un rettangolo e fai una copia
- un rettangolo grigio;
- un altro rettangolo grigio scuro
4) Disegna un triangolo da un asterisco impostando il numero di raggi - 3

Figura 3 - 1) luce retta; 2) dritto scuro; 3) triangolo

5) Disegna un gatto con Penna e forme semplici

Figura 4 - 1) testa; 2) collo; 3) corpo; 4) gamba; 5) coda

E ora il massimo PRINCIPALE momento
Distribuiamo le immagini in livelli (ciò che verrà animato - su un livello separato) in questo modo:

Figura 5 - tutte le foto (contrassegno rosso livelli importanti)

Tutto, ora risparmiamo.
Vediamo le impostazioni di salvataggio

Figura 6 - Salva

E ora la fase successiva. ChiudereAdobe Illustrator e apri After Effects.

Importa in After Effects
File - Importa - File - seleziona il nostro file salvato Illustratore.
Scegliamo di importare livelli da Illustrator, se inseriamo filmati, otterremo un'immagine con livelli uniti, ma non ne abbiamo bisogno.

Figura 7 - Importa come composizione

Tutto importato.
Ora vediamo cosa abbiamo. Fare doppio clic su composizione , cosa si aprirebbe e vedremmo i livelli (se tutto è stato fatto correttamente, ci saranno diversi livelli). Abbiamo questo, guarda l'immagine

Figura 8 - Composizione aperta

E ora per cosa siamo qui oggi - Animazione.

Animazione dentro effetti postumi
Imposta il punto di rotazione nella parte superiore della freccia usando lo strumento Panoramica dietro ( tasto di scelta rapida- Y). Prendi un punto e spostalo dove vuoi. Di conseguenza, sembrerà così..

Figura 9 - Strumento Panoramica e Livelli

Questo è tutto, ora passiamo ai livelli per l'animazione.
Abbiamo bisogno di un livello Arrow e di un Head_cat.
Iniziamo con la freccia.
Espandi l'elenco, trova e fai clic sull'orologio. Quindi mettiamo il primo punto a zero secondi. In totale, l'animazione durerà 2 secondi.
Quindi, ecco le impostazioni che devi effettuare (metteremo 3 punti in totale)

Secondo	0	1	2
	+66	- 70	+66

Ecco come apparirà:

Figura 10 - Freccia di rotazione

Ora animiamo la testa del gatto.
Espandi head_cat e trova posizione.
Ci saranno 4 punti.
Cambierà solo l'ultima coordinata senza toccare il resto.

Secondo	0.1	0.17	1.12	2.0
posizione	689.3	729.3	729.3	689.3

Diamo un'occhiata alla foto.

Figura 11 - Posizionare la testa

Quindi, il principio dell'animazione era così. La freccia oscilla da un lato all'altro, non appena si avvicina al gattino, tira la testa su se stesso, indugia un po' in questa posizione, quindi lo riporta al suo posto.

La fase finale

Produzione
Devi creare un prodotto finito dal tuo lavoro.
Andiamo al menù Aggiungi alla coda di rendering
Si apre il pannello Rendering e nel Modulo di output (due clic) seleziona il formato di output. Ho preso *.mov

Figura 12 - Rendering

Clicca sul pulsante RENDER e ottieni il risultato (non dimenticare di specificare il percorso).
È tutto.