Ciao a tutti! Oggi cercherò di fare una descrizione delle funzionalità 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 degli interessanti chip che ho scoperto in questo programma. Ho raccolto le informazioni pezzo per pezzo mentre le studiavo per metterle tutte in un post. Devo ammettere subito che non sono un utente illustratore super esperto, solo negli ultimi sei mesi lo uso nel disegno (prima disegnavo tutto in flash). Molti lamentano che l'illustratore sia 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, cosa mi è piaciuto dell'illustratore e cosa ho scoperto per me stesso che non è in flash.
1. Inizierò con il più semplice, ma allo stesso tempo necessario. Prova a disporre gli oggetti in cerchio in flash. In precedenza era Strumento decorativo, ma è stato rimosso, apparentemente considerato non necessario. Abbiamo deciso che sarebbe stato più divertente farlo a mano. Illustrator ha questa funzione: Effetto - Distorci&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: su un oggetto grafico quando selezionato in un angolo (in tutti gli angoli) appare punto bianco e un segno di linea arrotondata. Trascina il mouse, regola secondo i tuoi gusti.

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

5. Irruvidire

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

6 Increspato e gonfio(Tirare dentro e gonfiare)
Un esempio nella foto qui sotto:

7. Estensione del modulo (percorso offset)

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

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

9. Pennello texture (pennelli texture)

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

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

10. Dividi in griglia

Un'altra funzione utile è la funzione Split to Grid (Object-Path-Split to Grid), che consente di tagliare il modulo in segmenti uguali. Cosa ci ricorda questo? Esatto: finestre in un grattacielo. Quanto a me, una cosa interessante per disegnare, ad esempio, paesaggi urbani;)

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

12. Sposta (destra - Trasforma - Sposta)

Scosta oggetto di impostare la distanza. Se lo si desidera, è possibile creare immediatamente una copia che verrà posizionata alla distanza desiderata dall'oggetto selezionato in orizzontale/o verticale. Una versione precedente di Flash aveva un plug-in che lo faceva questa funzione. Purtroppo non ricordo il suo nome.

È molto conveniente creare modelli senza soluzione di continuità in Illustrator ( Oggetto-Pattern-Crea). 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 pattern in dozzine di varianti, con pochi elementi grafici a portata di mano. In più prime versioni i programmi dovevano essere eseguiti manualmente, come in flash fino ad ora.

(Nota: il modello può essere trasformato in un oggetto vettoriale modificabile utilizzando la funzione parse ( Oggetto-Espandi Aspetto).

14. Oggetto Mosaico (Mosaico)

Creazione palette dei colori in base all'immagine esistente. Importa l'immagine che ti piace nell'illustrazione (Apri), quindi 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 una distanza l'uno dall'altro e applichiamo 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, collegare automaticamente, ecc. forme selezionate. Quanto a me, non è molto conveniente, lo uso più spesso Costruireformaattrezzo.

(tavole da disegno)

18.Pannello strumenti personalizzato

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

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

19. Isometrico con stili grafici

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

Ciò che Illustrator ha in comune con flash è la possibilità di salvare un oggetto in un simbolo (simbolo) e questo simbolo può essere trasferito anche in flash senza problemi (aprire un file .ai in flash, tramite 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 mi sforzi di abituarmici in 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;)

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

E non abbiamo bisogno di niente per questo. Organizzazione competente di livelli ed esportazione lavoro finale in formato swf, in cui ogni livello viene convertito in un fotogramma di animazione. Nel tutorial di oggi disegneremo un'animazione del 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 realizzato due posizioni di fotogrammi in un documento separato, un cerchio di riferimento, che è 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 dell'animazione. E nel primissimo strato, devi solo copiare il fotogramma del film. Posizionalo al centro dell'area di lavoro.

Ora crea un secondo livello e copia al suo interno il fotogramma del film, in cui i fori ai bordi sono realizzati con uno spostamento. Ha anche bisogno di essere centrato.

Da questi due livelli è già possibile ottenere l'animazione di un 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.

Allo stesso modo, 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, il che non è molto comodo per il lavoro. Pertanto, puoi disattivare alcuni livelli facendo clic sull'icona a forma di 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 dell'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 un leggero tremolio al movimento del film, 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 costituito da settori dal documento delle parti del cartone animato e posizionalo sul primo strato sopra il fotogramma del film.

Se rimuovi la selezione dal cerchio, sembrerà un tutt'uno. Questo è esattamente ciò di cui abbiamo bisogno.

Ma poiché è costituito da settori separati, è possibile, cambiando il loro colore, creare animazioni in modo molto rapido e semplice. Per fare ciò, copia questo cerchio sul secondo livello e alleggerisci il primo settore. Ti ricordi che la pellicola trema durante il movimento, quindi non è necessario posizionare il cerchio esattamente al centro dell'inquadratura. Posizionalo 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. 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 renderlo diverso su ogni fotogramma, basta ruotarlo di 90 gradi. Come avrai intuito, dobbiamo aggiungere texture a tutti i 12 fotogrammi.

Se sei già piuttosto stanco di copiare, allora posso accontentarti: è rimasto ben 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 su 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 Vai!!!, abbiamo bisogno di ancora più livelli. Non 12, ma fino a 48. Per fare ciò, è necessario creare altre tre copie di livelli già pronti con l'animazione del film.

E poi tutto è semplice. Attiva il primissimo strato 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 alcuni 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: livelli AI su frame SWF. È questa opzione che trasforma i livelli di Illustrator in fotogrammi di animazione. Successivamente, fai clic sul pulsante Avanzate.

Si apriranno impostazioni aggiuntive. 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 di Illustrator 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 realizzare una semplice animazione in Adobe Illustrator non è così difficile come sembra a prima vista.

Ma per creare lunghi video o applicazioni interattive, è ancora meglio usare Adobe Flash o altri editor flash. Ad esempio, ho realizzato questo gatto in un vecchio MacromediaFlash che ho scavato al lavoro.

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

Romano detto dacasca soprattutto per il blog Appunti di un illustratore di microstock

Iscriviti alla nostra newsletter per non perderti 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 Anima i vettori SVG utilizzando il leggero plug-in Jquery Lazy Line Painter.

fonte

Per completare e comprendere appieno questo compito, è auspicabile una conoscenza di base di HTML, CSS, Jquery, ma non richiesta se si desidera solo animare SVG) Cominciamo!

E quindi i passaggi che dobbiamo seguire:

1. Crea la struttura di file corretta
2. Scarica e collega il plug-in
3. Disegna una fantastica grafica al tratto in Adobe Illustrator
4. Converti la nostra immagine in Lazy Line Converter
5. Incolla il codice risultante in main.js
6. Aggiungi un po' di CSS a piacere

1. Creare la struttura file corretta
Il servizio Initializr ci aiuterà in questo, dove è necessario selezionare i parametri come nell'immagine qui sotto.

• Classic H5BP (piastra caldaia HTML5)
• Nessun modello
• Solo HTML5 Shiv
• minimizzato
• Classi .IE
• Cornice cromata
• Quindi fai clic su Scaricalo!

2. Scarica e collega il plug-in

Poiché initializr viene fornito con l'ultimo libreria jquery, dall'archivio che dobbiamo scaricare dal repository del progetto Lazy Line Painter, solo 2 file devono essere trasferiti al nostro progetto. Il primo è "jquery.lazylinepainter-1.1.min.js" (la versione del plug-in potrebbe differire) si trova nella radice della cartella risultante. Il secondo è example/js/vendor/raphael-min.js.

Questi 2 file vengono inseriti nella cartella js. E li includiamo nel nostro index.html prima di main.js in questo modo:

3. Disegna una bella immagine di contorno in Adobe Illustrator

1. Disegna la nostra immagine di contorno in Illustrator (il modo più semplice per farlo è con lo strumento Penna)
2. È necessario che i contorni del nostro disegno non si chiudano, perché per il nostro effetto abbiamo bisogno di un inizio e di una fine
3. Non dovrebbe avere riempimenti
4. La dimensione massima del file è 1000×1000 px, 40kb
5. Ritagliamo fino ai bordi dell'oggetto Oggetto>Tavole da disegno>Adatta ai bordi delle tavole da disegno
6. Salva come SVG (le impostazioni di salvataggio standard vanno bene)

Ad esempio, puoi utilizzare le icone nell'allegato.

4. Converti la nostra immagine in Lazy Line Converter
Basta trascinare e rilasciare l'icona nella casella sottostante.
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 basta incollare il codice risultante in file vuoto principale.js
Opzioni:
strokeWidth — spessore del contorno
strokeColor - colore del contorno
Puoi anche cambiare la velocità di disegno di ciascun vettore modificando il valore del parametro durata (default 600)

6. Aggiungi un po' di CSS a piacere
Rimuovi il paragrafo da index.html

Ciao mondo! Questo è Boilerplate HTML5.

E invece inseriamo un blocco in cui si svolgerà la nostra animazione

quindi aggiungi alcuni CSS al file main.css per un aspetto più gradevole:

Corpo ( sfondo:#F3B71C; ) #icons ( posizione: fisso; alto:50%; sinistra:50%; margine: -300px 0 0 -400px; )

salvare tutti i file.
Ora apri index.html in un browser moderno e goditi l'effetto.

P.S. durante l'esecuzione su una macchina locale, l'avvio dell'animazione potrebbe essere ritardato di alcuni secondi.

Il formato di file Flash (SWF) è basato su grafica vettoriale ed è progettato per una grafica scalabile e compatta per il web. Poiché questo formato di file si basa sulla 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 Esporta (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 immagine rispetto al comando Esporta (SWF), ma utilizza le opzioni del comando Esporta utilizzate più di recente (vedere ).

Tieni a mente le seguenti linee guida quando prepari un oggetto per il salvataggio come SWF.

Usa l'app Device Central per vedere come apparirà una grafica di Illustrator nell'app Flash Player su vari dispositivi portatili.

Inserire oggetto grafico Illustratore

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

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

Contorni e forme

• Spessore del tratto

  Definizioni di gradienti

  Testo (compresi i font OpenType)

  Immagini correlate

• Modalità di fusione

Inoltre, Illustrator e Flash supportano le seguenti funzionalità 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 inserita nel solito modo.

Quando importi o incolli la grafica di Illustrator, puoi utilizzare varie opzioni per salvare determinati effetti (come un'ombra proiettata dal 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 la grafica in proprio formato Illustrator (AI) e importarlo con alta fedeltà in Flash utilizzando File > Importa nello stage o File > Importa nella libreria.

Se File illustratore contiene più tavole da disegno, selezionare la tavola da disegno da importare nella finestra di dialogo Importa di Flash e specificare le impostazioni per ciascun livello in quella tavola da disegno. Vengono importati tutti gli oggetti nella tavola da disegno selezionata Programma istantaneo come un unico strato. Quando importi un'altra tavola da disegno dallo stesso file AI, gli oggetti di quella tavola da disegno vengono importati in Flash come nuovo livello.

Quando importi la grafica di Illustrator come file AI, EPS o PDF, Flash conserva gli stessi attributi di quando incolli la grafica di Illustrator. Inoltre, se il file 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.

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 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 del 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 realizzato due posizioni di fotogrammi in un documento separato, un cerchio di riferimento, che è 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 dell'animazione. E nel primissimo strato, devi solo copiare il fotogramma del film. Posizionalo al centro dell'area di lavoro.

Ora crea un secondo livello e copia al suo interno il fotogramma del film, in cui i fori ai bordi sono realizzati con uno spostamento. Ha anche bisogno di essere centrato.

Da questi due livelli è già possibile ottenere l'animazione di un 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.

Allo stesso modo, 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, il che non è molto comodo per il lavoro. Pertanto, puoi disattivare alcuni livelli facendo clic sull'icona a forma di 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 dell'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 un leggero tremolio al movimento del film, dobbiamo spostare leggermente i fotogrammi ricevuti in direzioni diverse. Per fare ciò, attiva solo il livello con cui lavorerai al 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 delle parti del cartone animato e posizionalo sul primo strato sopra il fotogramma del film.

Se rimuovi la selezione dal cerchio, sembrerà un tutt'uno. Questo è esattamente ciò di cui abbiamo bisogno.

Ma poiché è costituito da settori separati, è possibile, cambiando il loro colore, creare animazioni in modo molto rapido e semplice. Per fare ciò, copia questo cerchio sul secondo livello e alleggerisci il primo settore. Ti ricordi che la pellicola trema durante il movimento, quindi non è necessario posizionare il cerchio esattamente al centro dell'inquadratura. Posizionalo 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. 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 renderlo diverso su ogni fotogramma, basta ruotarlo di 90 gradi. Come avrai intuito, dobbiamo aggiungere texture a tutti i 12 fotogrammi.

Se sei già piuttosto stanco di copiare, allora posso accontentarti: è rimasto ben 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 su 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 Vai!!!, abbiamo bisogno di ancora più livelli. Non 12, ma fino a 48. Per fare ciò, è necessario creare altre tre copie di livelli già pronti con l'animazione del film.

E poi tutto è semplice. Attiva il primissimo strato 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 alcuni 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: livelli AI su frame SWF. È questa opzione che trasforma i livelli di Illustrator in fotogrammi di animazione. Successivamente, fai clic sul pulsante Avanzate.

Si apriranno impostazioni aggiuntive. 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 di Illustrator 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 realizzare una semplice animazione in Adobe Illustrator non è così difficile come sembra a prima vista.

Ma per creare lunghi video o applicazioni interattive, è comunque meglio utilizzare 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. Questo codice è supportato dai browser moderni e non richiede l'uso di un flash player.

Romano detto dacasca soprattutto per il blog

Iscriviti alla nostra newsletter per non perderti nulla di nuovo: