Come creare un nuovo fotogramma in Adobe Flash. Come creare animazioni flash. Comprendere lo script di azione

Scarica flash dal sito Potere diversi modi. Ma alcuni di essi sono piuttosto macchinosi, altri richiedono l’uso di plugin, programmi e siti web. Nel frattempo, esiste un metodo molto elegante e semplice, la cui implementazione non richiede molto tempo.

Innanzitutto, definiamo il motivo per cui abbiamo bisogno di un colore e di cosa si tratta. Veloceè una presentazione multimediale realizzata utilizzando il programma Adobe Flash O . Questi file sono chiamati filmati flash, anche se possono essere molto più di un semplice filmato.

Possono essere interi mini-programmi: banner che reagiscono al movimento del mouse del visitatore, piccoli giochi, cosiddetti giochi flash, test con risultati e così via.

Oppure possono essere semplicemente clip video o audio.

L'estensione standard per i file flash è SWF. E quando troviamo questi video sui siti web, non possiamo scaricarli così facilmente come le immagini, con il tasto destro del mouse. Dovrai lavorare un po' di più.

Scarica flash dal sito

Vai alla pagina del sito web che contiene il file flash che ti serve. Dopo di che:

Apri il codice della pagina

Fare clic con il tasto destro sulla pagina e selezionare Visualizza il codice della pagina . Altre due opzioni per aprire il codice della pagina: clicca CTRL+U, oppure scrivere prima dell'indirizzo della pagina vedi la fonte:

Cerca l'indirizzo del video SWF nel codice

Per fare ciò, abilita la ricerca utilizzando i tasti di scelta rapida CTRL+F e inserisci nel campo di ricerca .swf. Quindi premere accedere .

Trova l'indirizzo stesso, che sarà simile a:

http://site.ru/papki/rolik.swf
o così:

/papki/rolik.swf

Se hai la seconda opzione, l'indirizzo è relativo, non assoluto. Deve essere posizionato a sinistra dell'indirizzo pagina iniziale luogo.

Controllo dell'indirizzo

Incolla l'indirizzo del video flash nella barra degli indirizzi di qualsiasi browser in una nuova scheda. Dovrebbe apparire un video.

Trasforma l'indirizzo in un collegamento

Se appare il video, copia l'indirizzo in un blocco note e trasformalo in un collegamento, ovvero aggiungivi il codice appropriato.

Di conseguenza, l'iscrizione nel blocco note sarà simile a questa:

Collegamento

Scarica il video flash sul tuo computer

Apri il file salvato nel browser. Ci sarà un collegamento al suo interno. Fai clic destro su di esso, seleziona Salva collegamento con nome... o Salva tramite collegamento... e salva il video flash sul tuo computer.

Per guardarlo, aprilo in un browser o utilizza un flash player, ad esempio Macromedia Flash Player .

Altre opzioni

Sebbene l'opzione sopra descritta mi sembri la più interessante, fornirò comunque altri modi per salvare flash sul tuo computer.

• Utilizzando il sito http://save2go.ru. Inserisci l'indirizzo della pagina in cui si trova il tuo filmato flash e fai clic Salva dal sito . Di seguito verrà visualizzato il collegamento al video. Fare clic con il tasto destro e selezionare Salva collegamento come... O Salva tramite collegamento... .
• Utilizzando un plug-in del browser, ad es. Downloadhelper Per Firefox .
• Utilizzando programmi di download, ad esempio, Scarica Maestro. Per prima cosa devi trovare l'indirizzo del video flash, quindi inserirlo nel downloader.

Puoi avere informazioni più dettagliate nelle sezioni “Tutti i corsi” e “Utilità”, a cui puoi accedere tramite il menu in alto del sito. In queste sezioni gli articoli sono raggruppati per argomento in blocchi contenenti le informazioni più dettagliate (per quanto possibile) sui vari argomenti.

Puoi anche iscriverti al blog e conoscere tutti i nuovi articoli.
Non ci vuole molto tempo. Basta cliccare sul link qui sotto:

Ti sei mai chiesto cosa si nasconde dietro la bellissima animazione dei banner su Internet? O i nuovi cartoni animati creati con l'aiuto della tecnologia informatica? Molto spesso sono basati sulla "carne", o più precisamente, è così che viene tradotto il nome della tecnologia Flash dall'inglese. Oggi parleremo dell'animazione flash per il sito web:

Tecnologia flash

La struttura multimediale è stata sviluppata da Macromedia. Ma dopo il suo assorbimento (fusione), tutti i diritti sulla tecnologia furono trasferiti al nuovo proprietario: Adobe Systems.

Area di applicazione moderna di Adobe Flash:

• La creazione di applicazioni web è una direzione abbastanza nuova. Implica l'uso totale o parziale di Flash per creare siti Web. Se applicata parzialmente, questa tecnologia crea elementi di design individuali: vari menu interattivi, pulsanti animati, ecc.

Rispetto alle risorse convenzionali basate su HTML, i siti Flash presentano alcune funzionalità che ne limitano l'utilizzo. Questi includono gli elevati costi di sviluppo, le richieste di risorse del server, lunghi tempi di caricamento con una connessione Internet lenta e alcuni altri aspetti:

• Implementazione di funzionalità multimediali: per ascoltare audio e riprodurre video su siti Web, vengono spesso utilizzati lettori multimediali creati sulla base di Flash. Il loro sviluppo prevede l'utilizzo di uno dei linguaggi di scripting (solitamente JavaScript):

• Nella pubblicità online, la tecnologia viene spesso utilizzata per creare banner animati. Implicano non solo la riproduzione di pubblicità multimediale, ma anche una sorta di interazione con l'utente sulla base del gioco.

Nozioni di base e strumenti per lo sviluppo Flash

Per creare animazioni flash, vengono spesso utilizzati gli strumenti tradizionali di Adobe:

• Adobe Flash Professional – un programma per la creazione di animazioni interattive (animatore);
• Adobe Flash Builder: un ambiente per la creazione di interfacce di applicazioni Web;
• Adobe Flash Player è un lettore integrato nel browser per la riproduzione di Flash.

Oltre a ciò, numerosi dispositivi possono riprodurre contenuti multimediali di questo tipo. applicazioni di terze parti. I più popolari sono Gnash, QuickTime e alcuni altri:

Questa tecnologia consente di visualizzare qualsiasi tipo di grafica ( raster, vettoriale, 3D). Supporta anche lo streaming di dati audio e video. Specialmente per dispositivi mobili un peso leggero Versione flash Light.

Lo standard principale per i file Flash è l'estensione SWF. L'abbreviazione sta per Small Web Format. Il video registrato in Flash ha le estensioni file FLV, F4V.

Lo sviluppo dell'animazione interattiva in Flash si basa su Grafica vettoriale. È grazie a ciò che è stato possibile implementare il supporto per la piattaforma multimediale e l'indipendenza della qualità dell'animazione dalla risoluzione dello schermo.

La dimensione del file dell'applicazione Flash è la stessa per tutti gli utenti, indipendentemente da caratteristiche tecniche risoluzione dello schermo).

L'animazione interattiva in Flash si basa sul morphing (tipo vettoriale), in cui è presente un flusso lento tra i fotogrammi chiave. Per riprodurre i dati viene utilizzato un flash player, il cui funzionamento è per molti versi simile a quello di macchina virtuale JavaScript. La componente software della tecnologia è implementata utilizzando il linguaggio ActionScript.

Gli svantaggi della tecnologia includono i seguenti punti:

• Carico pesante processore macchina cliente. Ciò è dovuto alla scarsa efficienza della macchina virtuale Flash, che è integrata nel browser dell'utente insieme al player;
• Alta probabilità di errori: la riproduzione di animazioni Flash può verificarsi con un'alta probabilità di errori. Inoltre, i guasti nella riproduzione Flash influiscono negativamente sul funzionamento dell'intera applicazione client (browser). Ciò è dovuto a un controllo insufficiente sulla tolleranza agli errori del codice del programma durante la creazione di applicazioni Flash;
• Mancata indicizzazione: tutto il contenuto testuale visualizzato nel contenuto Flash non viene indicizzato. Questa limitazione è particolarmente problematica per quelle risorse create sulla base di questa tecnologia.

Recensione di software di creazione Flash di terze parti

Come applicazione prototipo su cui dimostreremo le nozioni di base Creazione flash, È stato preso Quindi pensa SWF Più veloce. Secondo molti professionisti, il programma è il più comprensibile e più facile da imparare.

Oltre alla creazione e alla modifica, l'editor flash “può” funzionare con tutti gli altri tipi di animazione web (GIF, HTML e altri standard):

Dopo l'installazione, vai all'interfaccia intuitiva del programma. Sfortunatamente, dopo aver vagato per tutti gli angoli, non abbiamo trovato il cambio della lingua dell'interfaccia.

Per capire come realizzare animazioni flash in questa applicazione, utilizzeremo i modelli integrati. La finestra di dialogo "Nuovo da modello" viene visualizzata immediatamente dopo l'avvio del programma. Inoltre può essere richiamato tramite la voce del menu principale "File". Tra le opzioni offerte, abbiamo scelto di creare un banner:

Nella finestra successiva della procedura guidata, dall'elenco a discesa è necessario selezionare un modello in base al quale verrà creata l'animazione. Sotto c'è un piccolo riquadro in cui viene riprodotto il modello selezionato:

Nei passaggi successivi, devi impostare le dimensioni del banner e inserire 5 frasi di testo che verranno riprodotte nell'animazione. Inoltre, è necessario specificare l'indirizzo della risorsa a cui l'utente verrà indirizzato cliccando sul banner:

Dopo aver compilato il progetto e chiuso la finestra della procedura guidata, puoi visualizzare il video risultante nel player integrato. Per farlo clicca sulla freccia verde in alto:

Dopo aver chiuso il lettore, diamo uno sguardo più da vicino all'interfaccia dell'applicazione. Tieni presente che è composta da due finestre principali: quella in alto serve per modificare il periodo di tempo del video, mentre quella in basso è una normale finestra redattore grafico. Ciascuno degli elementi si trova su un livello separato, che può essere modificato utilizzando gli strumenti standard situati sulla barra laterale.

Finora abbiamo esaminato i filmati Flash che vengono riprodotti senza l'intervento dello spettatore dall'inizio alla fine. Tuttavia, Flash ti consente anche di creare applicazioni interattive, in cui l'utente può controllare la visualizzazione dei contenuti. In questa lezione inizieremo a esplorare gli elementi del linguaggio di scripting Action Script e vedremo come può essere utilizzato per creare applicazioni interattive. Ad esempio, creiamo un album fotografico con elementi di interfaccia interattivi. Ma prima di iniziare a descrivere Action Script, dovremmo parlare di un altro tipo di simbolo che finora abbiamo ignorato: i simboli dei pulsanti. Per costruire un'interfaccia interattiva, sono semplicemente necessari.

Creazione di pulsanti

Il pulsante è un clip filmato interattivo di quattro fotogrammi. Quando assegniamo un tipo Pulsante a un simbolo, Flash crea una sequenza temporale di quattro fotogrammi per il nuovo simbolo:

Lo stato Up è un frame corrispondente alla situazione in cui il pulsante non è premuto e il puntatore del mouse non si trova sopra il pulsante;

Cornice di stato superiore che illustra l'aspetto del pulsante quando il puntatore del mouse è posizionato sopra il pulsante, ma il pulsante non viene premuto;

Nello stato Giù questo riquadro mostra l'aspetto del pulsante quando viene premuto;

Lo stato colpito definisce l'area in cui il pulsante risponde al clic del mouse; quest'area non è visibile nella clip.

Per creare un pulsante, esegui il comando Inserisci => Nuovo simbolo (puoi digitare la scorciatoia da tastiera Control+F8). Nella finestra di dialogo Crea nuovo simbolo visualizzata, immettere un nome per il simbolo del pulsante (ad esempio, ma1) e selezionare il tipo di simbolo Pulsante.

Flash passerà alla modalità di modifica dei caratteri, fornendo fotogrammi Su, Sopra, Giù e Colpito. Il primo fotogramma, Su, diventa un fotogramma chiave vuoto. Disegniamo una vista non premuta del pulsante in questo riquadro (Fig. 1).

Riso. 1. Pulsante del telaio UP

Selezioniamo il secondo fotogramma, contrassegnato come Over e corrispondente allo stato in cui il cursore si trova sopra il pulsante. Inseriamo un fotogramma chiave in questo fotogramma (usando il comando Inserisci => Fotogramma chiave), a seguito del quale apparirà un fotogramma chiave che ripete completamente il contenuto dell'Up-frame. Cambiamo il colore del pulsante, come mostrato in Fig. 2.

Fig 2. Pulsante sovra-fotogramma

Allo stesso modo, aggiungi il fotogramma successivo (Down frame) e disegna lo stato premuto del pulsante (Fig. 3).

Riso. 3. Pulsante Down-frame

Per ora non disegneremo nulla nel riquadro Hit, ma torneremo su questo riquadro un po' più tardi.

Andiamo nella scena principale, chiamiamo la libreria utilizzando il comando Finestra => Libreria e creiamo un'istanza del simbolo del pulsante trascinandolo sullo stage (Fig. 4.)

Riso. 4. Crea un'istanza di pulsante trascinandola dalla libreria

Di conseguenza, otteniamo il seguente film. Come si può vedere da questo filmato, la pressione di un pulsante avviene non solo quando clicchiamo con il mouse sull'area centrale (di lavoro) del pulsante, ma anche quando clicchiamo sulla cornice attorno ad esso. Ciò è dovuto al fatto che se il frame Hit non viene disegnato, l'area di lavoro del pulsante corrisponderà al frame Up.

Affinché il pulsante possa essere premuto solo nell'area di lavoro, è necessario definire questa zona nel riquadro Hit, ovvero disegnare il pulsante senza cornice (vedere Fig. 5)

Riso. 5. Pulsanti dei fotogrammi selezionati

Dopo aver aggiunto l'Hit-frame richiesto, otterremo il seguente filmato, in cui quando si fa clic sul frame, il pulsante non viene premuto.

Per rendere interattivo un pulsante è necessario associare il fatto di premere il pulsante all'esecuzione di determinati comandi, ovvero descrivere un determinato scenario. Per creare script in Flash, esiste un linguaggio speciale chiamato Action Script. In questa lezione toccheremo solo una piccola parte delle capacità di questo linguaggio, e in futuro torneremo alla struttura e alla sintassi di Action Script man mano che gli esempi di creazione di film interattivi in ​​Flash diventeranno più complessi.

Comprendere lo script di azione

Action Script è un linguaggio di scripting, un insieme di istruzioni che controllano gli elementi di un filmato Flash. Gli script di azione possono essere incorporati in un film o archiviati esternamente file di testo con estensione AS.

Quando si incorpora una sceneggiatura in un film, è possibile incorporarla in diverse parti del film. Più specificamente, gli script di azione possono contenere fotogrammi chiave, istanze di pulsanti e istanze di clip filmato. Di conseguenza, gli script sono chiamati Azioni fotogramma, Azioni pulsante e Azioni clip filmato.

Gli script di azione vengono eseguiti quando si verificano determinati eventi avviati dall'utente o dal sistema. Il meccanismo che indica Programma istantaneo, quale istruzione deve essere eseguita quando si verifica un particolare evento è chiamata gestore di eventi.

Action Script ha una propria sintassi, proprio come JavaScript. Flash MX 2004 supporta assolutamente Action Script versione precedente Veloce.

Uno dei concetti principali di Action Script sono le azioni: comandi che impartiscono istruzioni durante l'esecuzione di un file SWF. Ad esempio, gotoAndStop() invia la testina di riproduzione a un fotogramma o a un segnale specifico. Dalla parola Actions deriva il nome del linguaggio: Action Script (letteralmente - script di azione). Acquisiremo familiarità con la maggior parte dei concetti di questa lingua in esempi specifici.

Album fotografico interattivo

Dimostriamo l'uso dei pulsanti per gestire un album fotografico: crea una serie di foto e aggiungi due pulsanti che faranno scorrere le foto avanti e indietro.

Posizioniamo la prima foto sulla timeline principale e aggiungiamo un pulsante dal set standard. Per accedere alla cartella desiderata, è necessario eseguire Comando di Windows=> Pannelli di controllo Librerie comuni => Pulsanti (Fig. 6).

Riso. 6. Aggiungi un pulsante da libreria standard

Come risultato dell'esecuzione di questo comando, verrà visualizzato un pannello contenente un ampio set di pulsanti predefiniti vari tipi. Selezioniamo, ad esempio, i Key Buttons (pulsanti simili ai tasti della tastiera), apriamo la cartella corrispondente, selezioniamo il pulsante tasto sinistro (Fig. 7) e creiamo un'istanza di questo pulsante (trascinandolo sullo stage).

Riso. 7. Elementi della cartella Pulsanti chiave

Tieni presente che quando posizioni un secondo pulsante (tasto destro) sullo stage e lo sposti per allinearlo al primo pulsante, il programma fornisce un suggerimento (una linea tratteggiata) che ti consente di posizionare con precisione il pulsante (Figura 8).

Riso. 8. Allineamento automatico dei pulsanti sullo stesso livello

Per aggiungere uno script è necessario richiamare l'editor Action Script utilizzando il comando Finestra => Pannelli di sviluppo => Azioni oppure premendo il tasto F9. Se prevedi di scrivere script frequentemente, questo è un comando da tastiera che vale la pena ricordare. Di conseguenza, verrà visualizzato l'editor Action Script (Fig. 9).

Riso. 9. Pannelli dell'editor degli script di azione

Se sperimenti evidenziando vari elementi sullo stage, monitorando contemporaneamente i messaggi nei pannelli dell'editor di Action Script, scoprirai che il programma ti suggerisce su quale elemento puoi “appendere” il codice. Se si seleziona un frame sullo stage, nell'angolo in alto a sinistra del pannello dell'editor appare la parola Azioni - Frame; se si clicca sul pulsante appare la parola Azioni - Pulsante, cioè il programma chiede che il codice inserito venga si riferiscono allo script del pulsante. E se selezioni una foto, nel campo destinato all'inserimento di uno script apparirà un messaggio: Alla selezione corrente non possono essere applicate azioni (non è possibile applicare uno script a questo oggetto selezionato).

Assegneremo uno script a un pulsante. IN ultime versioni ActionScript ha la capacità di scrivere codice centralizzato, ovvero codice che si trova in un unico posto, e questa capacità consente di comprendere meglio programmi di grandi dimensioni. Tuttavia, negli esempi semplici (che è quello che stiamo esaminando), assegnare uno script a un pulsante è perfettamente accettabile.

Quindi, per un pulsante freccia sinistra, dobbiamo formalizzare il seguente scenario: "Se il pulsante viene rilasciato su un determinato fotogramma, da questo fotogramma è necessario passare al fotogramma precedente." Secondo la sintassi del linguaggio Action Script (Fig. 10), apparirà così:

La prima riga contiene il gestore eventi del pulsante on(), che ha il formato:

Ora aggiungiamo diversi fotogrammi chiave in modo che i pulsanti creati nel primo fotogramma vengano copiati al loro interno e posizioniamo le fotografie necessarie nei fotogrammi appena creati.

Se lanciamo il filmato creato per l'esecuzione, i fotogrammi verranno riprodotti continuamente uno dopo l'altro, e quindi, prima di tutto, dovremo dare il comando “Stop” sul primo fotogramma. Per fare ciò, aggiungi il comando corrispondente al primo fotogramma (Fig. 11).

Riso. 11. Script assegnato al primo fotogramma

Nota: il comando non è più assegnato al pulsante, ma alla cornice. Il fatto che a un frame sia assegnato uno script viene annotato sulla riga di modifica principale: sopra il punto in grassetto nella designazione del frame appare una lettera minuscola "a".

Di conseguenza, abbiamo ottenuto il film successivo.

Se nell'album fotografico abbiamo solo pochi fotogrammi, allora due pulsanti - "Avanti" e "Indietro" - sono sufficienti, ma se l'insieme di foto è grande, è consigliabile avere anche pulsanti che colleghino all'inizio e fine del film. Nell'esempio seguente aggiungeremo i pulsanti corrispondenti: “Al primo fotogramma” e “All'ultimo fotogramma”. È possibile selezionare i pulsanti di un tasto mnemonico adatto dalla libreria standard di pulsanti dalla cartella Pulsanti circolari (Fig. 12).

Utilizzando l'esempio proposto, familiarizzeremo con un altro comando, gotoAndStop(), che ci consente di andare al frame desiderato e poi fermarci.

Riso. 12. Pulsanti dalla cartella Pulsanti circolari

Inseriremo un codice sul pulsante per passare al primo fotogramma (terzo da sinistra in Fig. 13), come mostrato in Fig. 13.

Riso. 13. Script per il pulsante "Nel primo fotogramma".

Nel caso di un album fotografico di cinque fotogrammi, aggiungere lo script di transizione “All'ultimo fotogramma” all'ultimo pulsante:

Scrittura automatizzata di script

Finora abbiamo digitato tutti i comandi manualmente, ma i pannelli dell'editor ActionScript forniscono una serie di servizi per la scrittura automatizzata degli script. Consideriamo queste possibilità.

Riso. 14. Strumenti di scripting automatizzati

Il pannello dell'editor di Action Script consente di selezionare, trascinare, riorganizzare ed eliminare i comandi.

Mostriamo come scrivere lo stesso script per il pulsante "Avanti" in modo automatico. Selezionando la cartella Movie Clip Control (finestra in alto a sinistra in Fig. 14), si può accedere al gestore dell'evento on, quindi è necessario fare doppio clic sulla voce corrispondente oppure trascinare l'espressione nel campo di scrittura dello script in Trascina e Modalità di rilascio.

Riso. 15. Suggerimento per completare un'espressione

Di conseguenza, sul campo di lavoro apparirà l'espressione richiesta e un suggerimento come questo (Fig. 15): si seleziona il comando desiderato dal menu e l'espressione viene completata automaticamente. Come si può vedere dal menu è possibile selezionare non solo la condizione associata ai pulsanti a schermo, ma è anche possibile selezionare dal menu Fig. Tasto 15 puntiPremere “ ", o premere il tasto " ”, che corrisponde alla pressione dei tasti della tastiera (freccia sinistra, freccia destra), ovvero è possibile creare un album fotografico che verrà “sfogliato” utilizzando i tasti della tastiera.

Riso. 16. Richiami dei pulsanti della tastiera

Usiamo il comando keyPress ” (Fig. 16), quindi andare nella cartella Timeline Control, selezionare il comando nextFrame e trascinarlo nel campo di lavoro (Fig. 17).

Riso. 17. Il comando nextFrame si trova nella cartella Timeline Control

Per un pulsante che porta il filmato all'inizio dell'album fotografico, è possibile selezionare come evento la pressione del tasto Home dal menu, quindi (Fig. 18) trascinare il comando gotoAndStop nel campo, a seguito del quale verrà visualizzato un altro apparirà un suggerimento sulla possibile sintassi di questo comando.

Le frecce nella descrizione comando consentono di visualizzare diverse opzioni di sintassi. Il programma prevede due opzioni (Fig. 18 e 19), ovvero propone di impostare una scena e un fotogramma oppure solo un fotogramma. Nel nostro caso è sufficiente specificare solo il Frame. Se il nome della scena viene omesso, l'impostazione predefinita è saltare al fotogramma della scena corrente.

Riso. 18. Suggerimento sulla possibile sintassi dei comandi

Riso. 19. La freccia triangolare consente di visualizzare le opzioni di sintassi

Dopo aver assegnato a tutti i pulsanti il ​​corrispondente pulsanti della tastiera, otterremo il seguente filmato, in cui lo sfogliamento delle foto avverrà dalla tastiera e il clic del mouse sui pulsanti sullo schermo non causerà alcuna conseguenza.

È possibile fornire uno scenario in cui eventi diversi porteranno alle stesse azioni? Si scopre che puoi: per fare ciò, devi elencare un elenco di nomi di eventi nel gestore eventi on. Se inserisci una virgola nell'elenco degli eventi dopo il primo evento, il programma stesso ti proporrà un menu (Fig. 20).

Riso. 20. Quando si inserisce una virgola nell'elenco degli eventi, viene visualizzato automaticamente un menu di comandi aggiuntivi

Aggiungiamo al primo evento (pressione di un pulsante della tastiera) un secondo evento (rilasciando il pulsante sullo schermo):

on(tasto premuto" ", pubblicazione)

Ripetiamo la procedura per i restanti pulsanti e come risultato otterremo un album fotografico in cui scorrere le foto utilizzando sia il mouse che la tastiera (il file FLA originale è reperibile dal link).

Nell'esempio considerato abbiamo utilizzato la transizione per numero di fotogramma, ma questo metodo non è sempre conveniente: se la numerazione dei fotogrammi cambia durante il processo di montaggio del film, la logica potrebbe non funzionare. È più conveniente utilizzare la transizione tramite contrassegno del fotogramma. Consideriamo un esempio che richiede non solo di sfogliare l'album, ma anche di spostarsi in sezioni diverse, ovvero una navigazione più complessa.

Lascia che l'album sia composto da disegni, grafica computerizzata e fotografie.

Etichettiamo il primo frame della sezione "disegni" Immagini; analogamente assegneremo le etichette "grafica" e "foto" ai primi frame delle altre sezioni.

Creiamo un livello per posizionare le etichette e chiamiamolo Lables. Per etichettare un frame, nel pannello Proprietà è necessario selezionare il tipo di etichetta Nome e annotarne il nome. Nel nostro caso, Immagini (Fig. 21). Allo stesso modo, posizioneremo i marcatori nei fotogrammi 5 e 10 (Fig. 22).

Riso. 21. Esempio di assegnazione di un'etichetta ad una cornice

Ora aggiungiamo un nuovo livello e chiamiamolo Azioni. Nel primo fotogramma chiave del livello Azioni, richiama il pannello Fotogramma azioni (premendo il pulsante F9) e inserisci il comando stop () (vedi Fig. 22)

Riso. 22. Sceneggiatura della prima ripresa

Aggiungiamo un altro livello chiamato Soggetti (soggetti), in cui daremo titoli ai riquadri corrispondenti: “Disegni” (Fig. 23), “Grafica” e “Foto”.

Riso. 23. Titolo per le cornici della sezione “Disegni”.

Ora aggiungiamo lateralmente i pulsanti del menu con nomi simili, che posizioneremo su un nuovo livello chiamato Menu.

Stampiamo la prima voce del menu "Immagini" dal bordo sinistro e convertiamola in un simbolo di pulsante. Utilizzando lo strumento Freccia, selezionare il blocco di testo “Immagini” ed eseguire il comando Modifica => Converti in simbolo (questo comando può essere eseguito anche utilizzando il tasto F8), nel pannello Converti in simbolo, impostare il tipo di simbolo Pulsante e definirne nome come PictureButton (Fig. 24 ).

Riso. 24. Assegnare il nome pictureButton al pulsante per accedere alla sezione delle immagini

Creiamo quattro frame per il pulsante "Disegni": il primo rappresenterà semplicemente il testo originale (Fig. 25), il secondo rappresenterà lo stesso testo solo in blu, salteremo il terzo frame (in questo caso il frame Giù sarà lo stesso del frame Over ), e nel frame Hit disegneremo un'area rettangolare che definirà l'area in cui verrà premuto il pulsante (Fig. 26).

Riso. 25. Up-frame del pictureButton

Riso. 26. Hit-frame del pulsante pictureButton

Ora dobbiamo allegare lo script al pulsante appena creato. Per fare ciò selezionare il pulsante nella Scena 1 e, premendo F9, richiamare il pannello Azioni, quindi inserire il codice mostrato in Fig. 27.

Riso. 27. Script per spostarsi su un frame con un'etichetta

Ci imbattiamo costantemente in animazioni flash – su Internet e nelle trasmissioni televisive. Creare una semplice animazione Flash utilizzando la tecnologia Flash è un compito abbastanza semplice, poiché Flash ne offre molte strumenti utili, che semplificano l'intero processo. Se vuoi creare un'animazione flash o un cartone animato, puoi disegnarlo in appena un paio d'ore.

Passi

Parte 1

Animazione flash fotogramma per fotogramma

Nozioni di base sull'animazione stop-motion. Questo metodo è considerato il metodo principale per creare un'animazione "tradizionale", in cui ogni fotogramma successivo include la stessa immagine, ma leggermente modificata. Quando tutti i fotogrammi vengono riprodotti, l'immagine “prende vita”. Questo è lo stesso metodo utilizzato dagli animatori di cartoni animati disegnati a mano e richiede più tempo rispetto al gemellaggio (vedere la sezione successiva).

• Per impostazione predefinita, Flash viene riprodotto a 24 fotogrammi al secondo (FPS). Ciò significa che verranno mostrati 24 fotogrammi in un secondo, ma non è necessario che tutti siano diversi. Puoi modificare questa impostazione (se lo desideri) su 12 fotogrammi al secondo, ma a 24 fotogrammi al secondo l'animazione verrà riprodotta in modo più fluido.

1. Installa Flash Professional. Esistono molti programmi per creare animazioni Flash, ma il più potente è Adobe Flash Professional CC. Puoi installarlo gratuitamente versione di prova questo programma o utilizzare un altro prodotto (se non desideri registrarti ad Adobe Creative Cloud). La parte restante di questo articolo descrive come utilizzare Flash Professional.

   Poiché l'animazione fotogramma per fotogramma richiede più immagini (leggermente diverse tra loro), è necessario creare queste immagini manualmente. Per fare ciò, utilizza Adobe Flash Professional o disegna immagini in qualsiasi editor grafico.

   • Se desideri che le tue immagini vengano ridimensionate facilmente senza perdere qualità, crea le tue immagini in grafica vettoriale anziché in grafica raster. Le immagini vettoriali si ridisegneranno man mano che vengono ridimensionate (il che significa che eviterai pixellazione o anti-aliasing). Le immagini raster sono immagini tradizionali, come fotografie, disegni e così via. Se provi a ingrandire tali immagini, ti ritroverai con un'immagine altamente distorta.

2. Crea il primo fotogramma. La prima volta che avvii Adobe Flash Professional, vedrai una tela (livello) vuota e una sequenza temporale vuota. Man mano che vengono aggiunti fotogrammi, la timeline si riempirà automaticamente. Puoi lavorare con i livelli proprio come fai in Photoshop.

   • Prima di aggiungere un'immagine, crea uno sfondo di base per la tua animazione. Rinominare "Livello 1" in "Sfondo" e quindi fissarlo. Crea un secondo livello e chiamalo come preferisci. Questo sarà il livello su cui creerai l'animazione.
   • Aggiungi un disegno alla tela del primo fotogramma. Puoi importare il disegno dal tuo computer oppure utilizzare gli strumenti di disegno per creare il disegno direttamente nel programma.
   • Il primo fotogramma è il fotogramma “chiave”. Un fotogramma chiave è un fotogramma che contiene un'immagine e costituisce la struttura portante di un'animazione. Creerai un nuovo fotogramma chiave ogni volta che cambi l'immagine.
   • I fotogrammi chiave nella timeline sono indicati da un punto nero.
   • Non è necessario un fotogramma chiave su ogni fotogramma successivo. Crea un fotogramma chiave ogni quattro o cinque fotogrammi per realizzare una buona animazione.

3. Converti l'immagine in un simbolo. In questo caso, puoi aggiungere l'immagine alla cornice più volte. Ciò è particolarmente utile se è necessario aggiungere rapidamente diverse immagini simili in un fotogramma (ad esempio, pesci in un acquario).

   • Seleziona il disegno. Fare clic con il tasto destro sull'immagine e selezionare "Converti in simbolo". L'immagine verrà aggiunta alla libreria, rendendone più facile l'utilizzo in futuro.
   • Elimina il disegno. Non preoccuparti: puoi aggiungerlo alla cornice semplicemente trascinandolo dalla libreria. In questo modo puoi aggiungere più volte lo stesso disegno a una cornice.

4. Aggiungi cornici vuote. Una volta pronto il primo fotogramma chiave, inserisci i fotogrammi vuoti e inizia a creare il secondo fotogramma chiave. Premi F5 (quattro o cinque volte) per aggiungere fotogrammi vuoti dopo il primo fotogramma chiave.

   Crea un secondo fotogramma chiave (dopo aver aggiunto alcuni fotogrammi vuoti). Ci sono due diversi modi per fare ciò: puoi copiare un fotogramma chiave esistente e apportarvi piccole modifiche, oppure puoi creare un fotogramma chiave vuoto e aggiungervi una nuova immagine. Se stai utilizzando un disegno creato in un altro programma, utilizza il secondo metodo. Se stai inserendo un'immagine creata utilizzando gli strumenti di disegno di Adobe Flash Professional, utilizza il primo metodo.

   • Per creare un fotogramma chiave utilizzando il contenuto del fotogramma chiave precedente, premere F6. Per creare un fotogramma chiave vuoto, fare clic con il pulsante destro del mouse sull'ultimo fotogramma nella timeline e selezionare Inserisci fotogramma chiave vuoto.
   • Una volta creato il secondo fotogramma chiave, devi apportare modifiche alla sua immagine per dare vita all'animazione. Se hai utilizzato gli strumenti di disegno di Adobe Flash Professional, seleziona lo strumento Trasforma per selezionare un elemento del disegno (ad esempio la mano di un personaggio) e modificarlo.
   • Se inserisci una nuova immagine ad ogni fotogramma chiave, assicurati che sia nel posto giusto (secondo la sequenza logica dei fotogrammi).

5. Ripeti il ​​processo. Dopo aver creato due fotogrammi chiave, ripeti il ​​processo: aggiungi alcuni fotogrammi vuoti tra ciascun fotogramma chiave e assicurati che l'animazione venga riprodotta senza intoppi.

   • Apporta piccole modifiche. Più piccole (più sottili) saranno le modifiche, più fluida sarà l'animazione. Ad esempio, se vuoi che un personaggio alzi la mano, il secondo fotogramma chiave non dovrebbe includere un disegno del personaggio con la mano già alzata. Utilizza invece più fotogrammi chiave per passare da una mano abbassata a una mano alzata. In questo caso, l'animazione sarà più fluida.

6. Trasforma il disegno. Se hai creato fotogrammi chiave e un tracciato, puoi trasformare l'immagine in modo che cambi gradualmente mentre ti sposti lungo il tracciato dell'interpolazione. Puoi modificare la forma, il colore, l'inclinazione, la dimensione e qualsiasi altro aspetto dell'immagine.

   • Seleziona una cornice in cui il disegno verrà trasformato.
   • Apri il pannello delle proprietà del disegno. Per fare ciò, premere F3.
   • Modificare le impostazioni nella finestra delle proprietà del disegno. Ad esempio, puoi cambiare tonalità o colore, aggiungere filtri, modificare la dimensione.
   • Puoi anche utilizzare lo strumento Trasformazione libera per modificare il disegno come preferisci.

7. Aggiungi il tocco finale. Prova l'animazione creata premendo Ctrl + Invio. Assicurati che il disegno (personaggio) cambi correttamente e che l'animazione venga riprodotta alla velocità corretta. Se l'animazione viene riprodotta troppo velocemente, riduci il valore FPS o aumenta la durata dell'interpolazione.

   • L'FPS predefinito è 24, quindi prova a ridurre questo valore a 12. Modifica il valore FPS nel pannello delle proprietà. Tuttavia, a FPS = 12, l'animazione potrebbe non essere riprodotta in modo sufficientemente fluido.
   • Per modificare la durata di un'interpolazione, seleziona il livello contenente l'interpolazione e utilizza il dispositivo di scorrimento per modificare la durata dell'interpolazione. Se vuoi raddoppiare la durata del gemello, sposta il cursore su 48 fotogrammi. Ricorda di inserire lo sfondo nei fotogrammi vuoti in modo che lo sfondo non scompaia nel mezzo dell'animazione. Per fare ciò, seleziona il livello di sfondo, fai clic sull'ultimo fotogramma dell'animazione (sulla timeline), quindi premi F5.

Parte 3

Aggiunta di effetti sonori e musica

1. Registra o scarica effetti sonori e musica. Puoi aggiungere effetti sonori alla tua animazione per renderla più d'impatto. La musica rende l'animazione più emozionante e può trasformare una buona animazione in un'ottima. Flash supporta una varietà di formati di file audio, inclusi AAC, MP3, WAV e AU. Scegli un formato che garantisca alta qualità suono con una dimensione di file minima.

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

2. Importa file audio nella libreria per aggiungere rapidamente suoni e musica alle tue animazioni. Fare clic su "File" - "Importa" - "Importa nella libreria". Individua il file audio sul tuo computer. Assicurati che il file audio abbia un nome facile da ricordare in modo da poterlo trovare rapidamente.

   Crea un nuovo livello per ogni file audio. Questo non è necessario e puoi aggiungere audio a livelli esistenti, ma incollare il file audio su un livello separato ti darà un maggiore controllo sulla traccia audio dell'animazione.

   Crea un fotogramma chiave che avvierà la riproduzione dell'audio. Nel livello audio, seleziona il fotogramma dell'animazione da cui inizierà la riproduzione del suono. Premi F7 per inserire un fotogramma chiave vuoto. Ad esempio, se desideri inserire un file audio che verrà riprodotto durante tutta l'animazione, seleziona il primo fotogramma sul livello del file audio. Se aggiungi la voce di un personaggio, scegli un'inquadratura in cui il personaggio inizia a parlare.