Scarica il programma per la creazione dell'animazione flash. Creando animazione flash. Trasformiamo un oggetto in un simbolo per un'animazione semplice

Questo articolo ti dirà come con semplici passi Inizia la conoscenza S. Adobe Flash. CS5. Lezione di tema animazione semplice, lo creeremo senza interferenze nella complessità dell'interfaccia e del programma.

Creazione di un nuovo documento flash

Apri il programma e crea nuovo documento "ActionScript 3.0".

Disegna un oggetto per la successiva animazione

Ora disegna un cerchio. Selezionare lo strumento "ovale" sul pannello a destra e salire il tasto sinistro del mouse e il pulsante "Maiusc" sulla tastiera disegna su un cerchio di sfondo bianco.

Utilizzando lo strumento Tool Selection, allociamo l'oggetto appena stato creato facendo clic su di essa o catturare nella selezione quadrata.

Trasformiamo un oggetto in un simbolo per un'animazione semplice

Per ulteriori lavori, è necessario convertire un oggetto in un simbolo. Poiché il cerchio è già evidenziato, premere il tasto destro del mouse e dentro menù contestuale Seleziona "Contorno al simbolo".

Dall'elenco "Tipo", scegli "Graphic"

Ora il quadrato blu dovrebbe apparire intorno al nostro oggetto.

Crea un'animazione classica (Tween classica)

Per creare un'animazione, è necessario designare il "fotogramma chiave".

Sul pannello inferiore c'è una scala di animazione, selezionare il venticinquesimo frame e premere il tasto destro del mouse, nel menu di scelta rapida visualizzato, selezionare "Inserisci il fotogramma chiave".

Evidenziamo il cerchio e teniamo il pulsante sinistro del mouse, spostarlo a destra.

Evidenziamo il primo fotogramma sulla scala di animazione e nel menu principale sopra, nel punto "Inserisci", selezionare "Classic Tween".

Visualizza l'animazione creata

Ora possiamo vedere l'animazione. Nel menu principale, nel paragrafo "Controllo", selezionare "PLAY".

Aggiungiamo l'effetto "scomparsa" del cerchio. Per fare ciò, selezioniamo l'oggetto e nel riquadro destro nel menu "Effetto colore", selezionare "Alfa", impostiamo il valore "0".

Vediamo cosa è successo. Vai al punto "Controllo", seleziona "PLAY".

Siamo costantemente affrontati con l'animazione flash - su Internet e nelle trasmissioni televisive. Creazione di una semplice animazione flash utilizzando la tecnologia Flash - un compito abbastanza semplice, come il flash offre molto strumenti utiliche semplifica l'intero processo. Se vuoi creare un'animazione o un cartone animato flash, puoi farlo schizzo in un paio d'ore.

Passi

Parte 1

Animazione Flash Flash.

Fondamenti di animazione del campione. Questo metodo è considerato il metodo principale per creare un'animazione "tradizionale", in cui ogni frame successivo include uno, ma un'immagine leggermente modificata. Durante la riproduzione di tutti i fotogrammi, l'immagine "prende in vita". Lo stesso metodo è usato da animatori, disegnando cartoni animati dalla mano e richiede più tempo di Tweing (vedere la prossima sezione).

• Per impostazione predefinita, la flash riproduce 24 fotogrammi al secondo (FPS). Ciò significa che in un secondo secondo 24 fotogrammi verranno mostrati, ma non tutti dovrebbero essere necessariamente diversi. È possibile modificare questo parametro (se vuoi) per 12 fotogrammi al secondo, ma a 24 fotogrammi al secondo, l'animazione verrà riprodotta più "senza intoppi".

1. Installa Flash Professional. Ci sono molti programmi per la creazione di animazioni flash, ma il più potente è Adobe Flash Professional CC. Puoi installare gratuitamente versione di prova Questo programma o utilizza un altro prodotto (se non si desidera registrarsi su Adobe Creative Cloud). Successivamente, questo articolo descrive come lavorare con Flash Professional.

   Dal momento che l'animazione del fotogramma richiede più immagini (che differiscono leggermente l'una dall'altra), è necessario creare queste immagini manualmente. Per fare ciò, utilizzare Adobe Flash Professional o disegnare immagini in qualsiasi editor grafico.

   • Se vuoi che le dimensioni delle tue immagini cambino facilmente senza perdita della loro qualità, creare immagini nel vettore, e non in grafico raster.. Immagini vettoriali Ridisterli quando si cambia la loro dimensione (cioè eviterai pixelizzazione o levigatura). Immagini di raster. - Queste sono immagini tradizionali, come foto, immagini disegnate e così via. Quando si tenta di aumentare tali immagini, otterrai un'immagine fortemente distorta.

2. Crea il primo fotogramma. Quando inizi a Adobe Flash Professional, vedrai una tela vuota (strato) e una timeline vuota. Mentre la cornice aggiunge, la timeline verrà riempita automaticamente. Puoi lavorare con i livelli proprio come lo fai in Photoshop.

   • Prima di aggiungere un'immagine, creare uno sfondo di base della tua animazione. Rinominare lo "livello 1" nello "sfondo" e poi fissarlo. Crea un secondo strato e chiamalo come preferisci. Sarà uno strato su cui creerai un'animazione.
   • Aggiungere il disegno alla tela della prima cornice. È possibile importare un disegno dal tuo computer, oppure è possibile utilizzare strumenti di disegno per creare un disegno direttamente nel programma.
   • Il primo frame è un telaio "chiave". Il telaio chiave è una cornice che include l'immagine e costituisce la base ("Bony") animazione. Creerai un nuovo fotogramma chiave ogni volta che modifichi l'immagine.
   • I telai chiave sulla timeline sono designati in un punto nero.
   • Non è necessario un telaio chiave in ogni cornice successiva. Creare un telaio chiave ogni quattro o cinque fotogrammi per fare una buona animazione.

3. Convertire l'immagine in un simbolo. In questo caso, è possibile aggiungere un'immagine in una cornice più volte. Questo è particolarmente utile se è necessario aggiungere rapidamente molti dello stesso tipo di immagini in un fotogramma (ad esempio, pesce in acquario).

   • Evidenzia il disegno. Clic fare clic con il tasto destro Mouse nel disegno e seleziona "Converti in simbolo" (convertire in simbolo). L'immagine verrà aggiunta alla biblioteca, che semplificherà il suo utilizzo in futuro.
   • Rimuovere il disegno. Non preoccuparti: puoi aggiungerlo a una cornice semplice trascinando dalla libreria. Quindi puoi aggiungere una sola immagine nel telaio più volte.

4. Aggiungi fotogrammi vuoti. Se il tuo primo fotogrammi chiave è pronto, inserire i frame vuoti, quindi procedere alla creazione di un secondo fotogramma chiave. Premere F5 (quattro o cinque volte) per aggiungere fotogrammi vuoti dopo il primo fotogramma chiave.

   Creare un secondo fotogramma chiave (dopo aver aggiunto diversi fotogrammi vuoti). Ci sono due vari metodi Rendilo: puoi copiare un fotogramma chiave esistente e creare piccole modifiche a esso, oppure puoi creare un fotogramma chiave vuoto e aggiungere una nuova immagine ad esso. Se si utilizza un disegno creato in un altro programma, usa il secondo modo. Se si inserisce un'immagine creata utilizzando Adobe Flash Professional Drawing Tools, utilizzare il primo metodo.

   • Per creare un fotogramma chiave usando il contenuto del fotogramma chiave precedente, premere F6. Per creare un fotogramma chiave vuoto, fare clic con il tasto destro del mouse sull'ultimo fotogramma sulla timeline e selezionare "Inserire il fotogramma chiave vuoto" (inserire un telaio del tasto vuoto).
   • Dopo aver creato un secondo fotogramma chiave, è necessario apportare modifiche alla sua immagine in modo che l'animazione "venisse alla vita". Se si utilizzano strumenti di disegno Adobe Flash Professional, selezionare lo strumento Trasforma per evidenziare l'elemento del disegno (ad esempio, la mano di un personaggio) e cambiarlo.
   • Se si inserisce una nuova immagine in ogni fotogramma chiave, assicurarsi che sia nel posto giusto (in base alla sequenza logica dei fotogrammi).

5. Ripeti il \u200b\u200bprocesso. Dopo aver creato due fotogrammi chiave, ripetere il processo: aggiungi alcuni fotogrammi vuoti tra ciascuno fotogrammi chiave E assicurati che l'animazione venga giocata "senza intoppi".

   • Fare piccoli cambiamenti. Le modifiche più piccole (inosservate), la Smoother L'animazione è riprodotta. Ad esempio, se si desidera che il personaggio solleva la mano, il secondo telaio del tasto non deve includere il disegno, su cui il carattere è rappresentato con la mano già sollevata. Invece, utilizzare più fotogrammi chiave per spostarsi da mani abbassate a una mano rialzata. In questo caso, l'animazione sarà più liscia.

6. Convertire un'immagine. Se hai creato fotogrammi chiave e una traiettoria, è possibile convertire un'immagine in modo che sia modificato senza problemi quando la traiettoria twin si muove. È possibile modificare la forma, il colore, la pendenza, la dimensione e qualsiasi altro parametro immagine.

   • Seleziona una cornice in cui l'immagine verrà trasformata.
   • Aprire il pannello Proprietà del disegno. Per fare ciò, premere F3.
   • Modificare i valori dei parametri nella finestra Proprietà del disegno. Ad esempio, è possibile modificare l'ombra o il colore, aggiungere filtri, ridimensionare.
   • Puoi anche utilizzare lo strumento di trasformazione gratuito (trasformazione gratuita) per cambiare il disegno mentre si prega di.

7. Aggiungi i colpi finali. Controllare l'animazione creata premendo Ctrl + Invio. Assicurarsi che il disegno (carattere) cambia correttamente e che l'animazione sia riprodotta con la velocità corretta. Se l'animazione viene riprodotta troppo rapidamente, ridurre il valore FPS o aumentare la durata della spago.

   • Il FPS predefinito è 24, quindi prova a ridurre questo valore fino a 12. Modificare il valore FPS sul pannello Proprietà. Tuttavia, con FPS \u003d 12, l'animazione può essere giocata senza problemi.
   • Per cambiare la durata del gemello, selezionare un livello contenente gemello e con il cursore, modificare la durata della spago. Se si desidera raddoppiare la durata del gemello, spostare il cursore su 48 fotogrammi. Non dimenticare di inserire lo sfondo in fotogrammi vuoti in modo che lo sfondo non scomparirà nel mezzo dell'animazione. Per fare questo, selezionare fo nuovo strato, Fare clic sull'ultimo fotogramma dell'animazione (sulla timeline), quindi premere F5.

Parte 3.

Aggiunta di effetti audio e musica

1. Scrivi o scarica effetti sonori e musica. Puoi aggiungere effetti sonori all'animazione per renderlo più spettacolare. La musica farà un'animazione più eccitante e può trasformare una buona animazione nel magnifico. Supporti flash vari formati file audio, tra cui AAC, MP3, WAV e AU. Seleziona un formato che garantisce alta qualità Suono con dimensioni minime del file.

   • Il formato MP3 garantisce un'elevata qualità del suono con dimensioni minime del file. I file di formato WAV sono grandi.

2. Importare i file audio nella libreria per essere in grado di aggiungere rapidamente suoni e musica in animazione. Fai clic su "File" - "Importa" (Importa) - "Importa in libreria" (importazione in libreria). Trova il file audio sul tuo computer. Assicurati che il file audio abbia un nome facile da ricordare in modo da poterlo trovare rapidamente.

   Creare un nuovo livello per ciascun file audio. Non è necessario aggiungere il suono agli strati esistenti, ma l'inserimento del file audio su un livello separato ti consentirà di controllare meglio la colonna sonora dell'animazione.

   Creare un fotogramma chiave da cui inizierà la riproduzione audio. Sullo strato con audio, selezionare il fotogramma dell'animazione da cui inizierà la riproduzione audio. Premere F7 per inserire un telaio del tasto vuoto. Ad esempio, se si desidera inserire un file audio che verrà riprodotto durante l'animazione, selezionare il primo fotogramma sul livello con un file audio. Se aggiungi la voce di un personaggio, selezionare una cornice in cui il personaggio inizia a parlare.

Non hai pensato che si nascondesse dietro la bellissima animazione di banner su Internet? O per cartoni animati di nuovo stile creato da informatica? Molto spesso, si basano su "carne", è tradotto più accuratamente dalla tecnologia del nome inglese del nome inglese. Oggi parleremo di animazione flash per il sito:

Tecnologia flash

La base multimediale è stata sviluppata da Macromedia. Ma dopo il suo assorbimento (fusione), tutti i diritti alla tecnologia passati al nuovo proprietario - sistemi Adobe.

Regione dell'uso moderno Adobe Flash:

• La creazione di applicazioni Web è una direzione abbastanza nuova. Implica l'uso completo o parziale del flash per creare siti. Con un uso parziale utilizzando questa tecnologia, vengono creati elementi di design separati: vari menù interattivi, pulsanti animati, ecc.

Rispetto alle risorse ordinarie su hTML-BASED. I siti flash hanno alcune funzionalità che limitano la loro applicazione. Ciò può essere attribuito al maggior costo di sviluppo, requisiti di risorse del server, tempo di caricamento lungo con una connessione lenta con Internet e alcuni altri aspetti:

• Implementazione delle funzioni multimediali - Per ascoltare i siti audio e riproduzione sui siti, i lettori multimediali creati in base al flash sono spesso utilizzati. Il loro sviluppo include l'uso di uno dei linguaggi di scripting (più spesso JavaScript):

• In Internet Advertising - Più spesso, la tecnologia viene utilizzata per creare banner animati. Significa non solo la riproduzione della pubblicità multimediale, ma anche alcune interazioni con l'utente su base di gioco.

Fondamenti e strumenti per lo sviluppo del flash

Per creare un'animazione flash, la tradizionale toolkit da Adobe è più utilizzata:

• Adobe Flash Professional è un programma per la creazione di un'animazione interattiva (animatore);
• Adobe Flash Builder - Mercoledì per creare un'interfaccia applicazione Web;
• Adobe Flash Player. - Integrato al giocatore del browser per riprodurre il flash.

Oltre ad esso, riproduce il contenuto multimediale di questo tipo. applicazioni di terze parti. Il più popolare di loro sono Gnash, Quicktime e alcuni altri:

Questa tecnologia ti consente di visualizzare qualsiasi tipo di grafica ( raster, vettore, 3d). E supporta anche il relè di streaming dei dati audio e video. Specialmente per dispositivi mobili È stata sviluppata una versione leggera di Flash Lite.

Lo standard principale per i file flash è l'estensione SWF. L'abbreviazione è decifrata come piccolo formato web. Il video registrato in Flash ha estensioni di file FLV, F4V.

La base dello sviluppo dell'animazione interattiva per flash bugie grafica vettoriale. È stato per questo che è stato possibile implementare il supporto della piattaforma multimediale e l'indipendenza della qualità dell'animazione dalla risoluzione dello schermo.

Le applicazioni di dimensione del file flash sono le stesse per tutti gli utenti indipendentemente da caratteristiche tecniche Schermo (autorizzazioni).

L'animazione interattiva sul flash è basata su morphing (tipo vettoriale), in cui si verifica un flusso lento tra i fotogrammi chiave. Per riprodurre i dati, viene utilizzato un flash player, il cui lavoro è in gran parte simile al lavoro macchina virtuale JavaScript. Il componente del programma della tecnologia è implementato utilizzando la lingua ActionScript.

La mancanza di tecnologia include i seguenti punti:

• Carico forte acceso processore Auto client. Ciò è dovuto alla bassa efficienza della macchina virtuale flash incorporata con il lettore nel browser dell'utente;
• Alta probabilità di errori - L'animazione flash lampeggiante può verificarsi con un'elevata probabilità di evento di errore. Inoltre, i guasti di riproduzione flash influenzano negativamente il lavoro dell'intera applicazione client (browser). Ciò è dovuto a questo con insufficiente che controlla la tolleranza dei guasti del codice del programma durante la creazione di applicazioni flash;
• L'impossibilità di indicizzazione è tutto contenuto del testoVisualizzato nel contenuto del flash non partecipa al processo di indicizzazione. Questa restrizione è particolarmente problematica per tali risorse basate su questa tecnologia.

Panoramica del software di terze parti per creare flash

Come prototipo di un'applicazione su cui dimostreremo le basi creando flash. è stato preso Sothink SWF più velocemente. Secondo molti professionisti, il programma è più comprensibile e facile da esplorare.

Oltre a creare e modificare un flash, l'editor "sa" per lavorare con tutti gli altri tipi di animazione web (GIF, HTML e altri standard):

Dopo l'installazione, vai in un'interfaccia del programma amichevole. Sfortunatamente, dopo aver vagato per tutti i promotori dell'interfaccia, non abbiamo trovato.

Per capire come effettuare un'animazione flash in questa applicazione, utilizzare i modelli integrati. La finestra di dialogo Nuova Dimple Template appare immediatamente dopo l'avvio del programma. Inoltre, può essere chiamato tramite la voce del menu principale "File". Tra le opzioni proposte, abbiamo scelto la creazione di un banner:

Nella finestra successiva della procedura guidata dall'elenco a discesa, selezionare il modello per il quale si verificherà l'animazione. Sotto IT è una piccola cornice in cui viene riprodotto il modello selezionato:

Nei passaggi seguenti, è necessario impostare la dimensione del banner e inserire 5 frasi del testo che verrà riprodotta nell'animazione. Inoltre, è necessario specificare l'indirizzo della risorsa a cui l'utente condurrà il CIC sul banner:

Dopo aver compilato il progetto e la chiusura della finestra della procedura guidata, è possibile visualizzare il rullo risultante nel giocatore incorporato. Per fare questo, clicca sulla freccia verde in alto:

Dopo aver chiuso il giocatore, studiamo l'interfaccia dell'applicazione in modo più dettagliato. Si prega di notare che è composto da due finestre principali: la parte superiore è progettata per modificare l'intervallo di tempo del rullo, e il più basso rappresenta il solito editor grafico. Ciascuno degli elementi si trova su un livello separato, disponibile per il cambiamento usando strumenti standardsituato sulla barra laterale.

Programma gratuito per la creazione di animazione flash con applet finite.

Molti di voi, penso, un giorno ha cercato di creare i tuoi siti (e forse hai persino il proprietario di un portale molto popolare).

Un modo o un altro, tutti hanno trovato il problema del design spettacolare delle sue pagine web. E, dal momento che il codice HTML statico gradualmente va in passato, molti oggi prestano attenzione a tale tecnologie popolariCome JavaScript e Flash. Ti permettono di creare belle pagine dinamiche animate con funzionalità estese.

Per uno specialista non farà molte difficoltà a creare una piccola banner flash animata, tuttavia, cosa fare il resto dei non iniziati? Se lo studio scrupoloso dei linguaggi di programmazione non è incluso nei tuoi piani immediati, puoi sempre ricorrere all'aiuto di software specializzato. Oggi avremo familiarità con le basi del lavoro nel programma Maker Advanced Effect..

Questa utility ti consente di creare tutti i tipi di effetti flash e javascript, ed entrambi i nostri "da zero" e basati su modelli pronti! Effetto maker avanzato esiste in diverse edizioni, che differiscono nel numero di effetti finiti e del grado di libertà utente. Confronta la configurazione massima e gratuita:

Confronto dell'editor Flash Flash Flash Editor Advanced Effect Maker Free Edition con versione commerciale Edition commerciale

Il più grande difetto versione gratuita Programmi: la presenza di un tipo di preactorimento, che consente di visualizzare alcuni degli effetti preparativi solo dopo aver fatto clic sul banner creato. Questa è tutte le differenze in linea di principio e finiscono :).

Installazione del programma

L'installazione di Advanced Effect Maker si verifica in modo standard, quindi andiamo direttamente a lavorare direttamente con il programma:

Quando inizi prima, saremo offerti di familiarizzare con accordo di licenza. Per accettarlo, fai clic su "Sono d'accordo". Successivamente, è possibile procedere allo studio dell'interfaccia Utility:

Interfaccia e lavoro con editor

Nonostante inglese, tutto è semplice e chiaro. La finestra Advanced Effect Maker è divisa in due parti. A sinistra è solo due grandi pulsanti: Il primo ad entrare nella galleria di effetti accessibili e il secondo è aggiungere applet aggiuntive (questo è se si desidera acquistarli;)). Nella parte destra, vediamo la directory dei modelli disponibili con le sottosezioni e una finestra di anteprima, nonché l'effetto di modificare l'effetto.

Per iniziare a modificare il modello desiderato, è sufficiente fare clic sulla sua immagine, e se vuoi vedere come funziona, quindi fai clic sulla scritta "Anteprima" sotto l'immagine:

Quando si apre l'effetto desiderato, potrebbe essere visualizzato un messaggio su un file esistente. Se ciò accadesse, lo ignoro solo premendo il pulsante "OK":

Se il modello è stato aperto con successo, saremo in grado di vedere diverse schede che contengono tutti i tipi di impostazioni:

Impostazioni del programma e creazione di animazione

La prima scheda è "Generale". Qui sono contenuti impostazioni generali Progetto. Ciò è solitamente dimensioni (larghezza - larghezza e altezza - altezza), il nome (nome file), la qualità del file futuro (qualità), nonché la modalità finestra del rullo flash (modalità finestra).

La seconda scheda è "colore", come può essere visto dal nome, è responsabile per i colori utilizzati nel progetto. Qui tutto è estremamente chiaro, quindi passiamo ai successivi - "Messaggi":

Qui abbiamo due campi. Nel primo campo (a sinistra) entriamo nel testo che dobbiamo ritirare con un effetto speciale e nel secondo - un collegamento in cui l'utente passerà cliccando sul nostro banner. Plus Advanced Effect Maker è che possiamo inserire un numero illimitato di stringhe di testo (così come i collegamenti), ma il Minus principale è la mancanza di supporto per la lingua russa: (.

Seguito Due schede vengono utilizzate per controllare i font (font) e le proprietà di animazione (altri), rispettivamente. Una sfumatura: se si desidera utilizzare font TTF alternativi, dovranno essere pre-convertiti in compatibilità con Maker Advanced Effect. Per fare ciò, chiamare il menu "Strumenti" per chiamare lo strumento "Converti Fonts" e selezionando il carattere desiderato, fare clic sul pulsante "Converti":

Quando vengono effettuate tutte le modifiche, possiamo fare clic sul pulsante Crea applet. Dopodiché, due file verranno creati nella cartella di assegnazione del progetto: SWF (animazione diretta) e HTML (contiene istruzioni per l'introduzione dell'animazione ricevuta nel codice della pagina:

Conservazione dei risultati del lavoro

Tuttavia, questo non è tutto. Con Advanced Effect Maker, è possibile creare il proprio effetto sulla base di uno esistente, o completamente "da zero"! Per fare ciò, vai al menu "Strumenti" e attivare il Plugin Maker Articolo:

Qui, è necessario prima chiedere un nome per un nuovo progetto, così come alcuni altri parametri (opzionali). Successivamente, è possibile fare clic sul pulsante "Crea applet" e giriamo direttamente nella finestra dell'editor di effetti:

Qui ci sono diversi pulsanti che ti consentono di inserire un po 'del futuro effetto nella sceneggiatura. funzioni standard. Il problema consiste nel fatto che tutte le variabili e i valori necessari dovranno essere ispirati manualmente in modo indipendente, e alcune competenze di programmazione su ActionScript o JavaScript sono già necessarie :(.

CONCLUSIONI.

Advanced Effect Maker può venire a degustare i web designer dei principianti, perché ti permette di creare banner piuttosto spettacolari, menu animati, slideshow e persino giochi piccoli (tipo di punti) senza molto sforzo. Lo svantaggio nella forma di un modello di preapplicazione (se disponibile nell'effetto selezionato) può essere eliminato utilizzando speciali programmi di decompilazione del file SWF (incluso gratuitamente);).

Buona fortuna in tutti gli sforzi e il successo creativo!

P.S. È consentito copiare e citare liberamente questo articolo, a condizione di specificare Aperto collegamento attivo Alla fonte e alla conservazione della paternità di Ruslana Toruschny.