Creazione di un'animazione di interpolazione di forme. Esercitazione “Creazione di animazioni di moduli in Flash” Guida metodologica “Imparare a creare animazioni nelle lezioni di informatica. Algoritmo per creare un pulsante per fermare una clip

La grafica delle forme è stata di tendenza negli ultimi anni. Tuttavia, dietro la grande popolarità c'è il meticoloso lavoro di animazione di ogni elemento dell'area di lavoro.

Se non hai mai fatto animazioni di forme prima, ora è il momento!

Ne abbiamo raccolti 30 che ti aiuteranno a padroneggiare il principio dell'animazione delle forme, oltre a insegnarti come creare ed esportare illustrazioni vettoriali adatte per ulteriori animazioni.

Animazione Feliz de Shapes con testi

Animazione della sequenza - Tutorial Adobe After Effects

Ripetitore livello di forma (radiale) – Tutorial Adobe After Effects

Tutorial – Suggerimenti rapidi 03 – Cerchi 2D e tratto tratteggiato

Animazione della scena dell'infografica Episodio 1 After Effects

Tutorial Earth Hour After effects

Creazione di modelli animati utilizzando il ripetitore dei livelli di forma in After Effects

Summit 1.2 - Introduzione alla grafica animata - After Effects

Come importare e animare un file vettoriale in After Effects

Introduzione ad Ancor Point. Animazione del palmo

Come creare ingranaggi?

Salvietta radiale di transizione di forma

Conto alla rovescia e conto alla rovescia in Adobe After Effects

Lavorare con lo script Lines Creator

I cerchi sono tutto! Lezione 1. Crea un'introduzione

I cerchi sono tutto! Lezione 2

I cerchi sono tutto! Lezione 3: Corrispondenza dei colori in Adobe Kuler

I cerchi sono tutto! Lezione 4

Effetto cerchi di diffusione

Animazione della forma

Creazione di un video di forma semplice

Creazione di un'icona animata sagomata

Creazione di una semplice introduzione di forme

Spettacolare animazione della forma dello smartphone

Fantastica animazione della forma

Creazione di un semplice morph di forma

Forme! Creazione di modelli animati utilizzando il ripetitore dei livelli di forma

Animazione di forma elegante

Come creare un banner animato

Descrizione:

Obiettivi della lezione:
1. educativo – per farsi un'idea del processo di riempimento delle cornici con un cambio di forma, che viene utilizzato per trasformare le figure disegnate tra i punti di inizio e di fine delle cornici
2. sviluppando - sviluppare capacità intellettuali per analizzare e confrontare le informazioni ricevute, sviluppare capacità creative durante la creazione di animazioni
3. educativo - coltivare una percezione estetica della realtà, l'amore per la screen art, formare capacità di autocontrollo.

Attrezzatura e materiale didattico: PC, programma Flash, proiettore multimediale, materiale dimostrativo, presentazione elettronica, compiti.

Struttura e corso della lezione:

Organizzare il tempo. Verifica degli studenti e della loro preparazione per la lezione.
Controllo dei compiti
Cos'è l'animazione? Quali tipi di animazione conosci, i loro vantaggi e svantaggi? Come viene eseguita l'animazione in movimento?
Nell'ultima lezione, abbiamo familiarizzato con l'animazione in movimento. Oggi continueremo il nostro studio sull'animazione. Scrivi l'argomento della lezione: Creazione di un'animazione del modulo in Flash.
Impostazione degli obiettivi. Gli obiettivi della lezione sono formulati
(Il file viene visualizzato – Crea animazioni di forme in Flash.ppt – diapositiva 1).
Spiegazione del nuovo materiale, le sue note, che mostrano l'attuazione delle operazioni di base
Animazione della forma con riempimento del primo e dell'ultimo fotogramma chiave Interpolazione delle forme.
Risagoma riempimento cornice viene utilizzato per trasformare le forme del disegno tra i punti iniziale e finale. Flash può eseguire un'operazione di riempimento cornice di rimodellamento solo sulle forme. Puoi riempire cornici per più forme su un unico livello. Ma per un'organizzazione chiara, è necessario che ogni forma si trovi su un livello separato, se successivamente torni a questo frammento di animazione per apportare determinate modifiche, il lavoro sarà semplificato. (Il file viene visualizzato diapositiva 2). Gli studenti scrivono un breve riassunto. ( Inoltre, tutte le operazioni vengono visualizzate sullo schermo utilizzando un proiettore multimediale.)
Per creare un'animazione di forma calcolata, è necessario effettuare le seguenti operazioni:
1. Disegna un oggetto in un fotogramma chiave.
2. Trovandosi nel primo frame, utilizzare il pannello " Portafoto", seleziona un oggetto forma, modificare l'attenuazione.
3. Specificare la cornice finale e includere il comando fotogramma chiave pulito, questo può essere fatto cliccando con il tasto destro del mouse sulla cornice, che sarà la chiave, apparirà un elenco in cui selezionare fotogramma chiave pulito. Posiziona l'immagine al suo interno, quindi riproduci l'animazione. Per fare ciò, seleziona la voce di menu " Controllo " squadra " Riproduzione» o premere il tasto accedere sulla tastiera. Successivamente, verrà riprodotta l'animazione.
Una volta che hai due fotogrammi chiave, rendi attivo il primo (basta accedervi) e seleziona " Portafoto" nella lista Interpolazione corda forma:
I fotogrammi sulla sequenza temporale dovrebbero diventare verdastri e una freccia dovrebbe estendersi dal primo fotogramma al secondo.
Di conseguenza, otterrai una serie di fotogrammi intermedi che rifletteranno il passaggio dalla prima forma alla seconda. (Il file viene visualizzato – Creazione di animazioni in movimento in Flash.ppt – diapositiva 3):
In questa animazione, il cerchio si trasforma in una specie di mezzaluna. Sul primo fotogramma chiave viene disegnato un cerchio e sull'altro fotogramma chiave (questo è il decimo fotogramma della scena) una mezzaluna. Nel pannello" Portafoto» ci sono due parametri allentamento(accelerazione) e miscela(Transizione)
allentamento(accelerazione) imposta l'accelerazione esponenziale inversa. Il valore di questo parametro può variare da -100 a + 100. Ciò significa che se si specifica un valore negativo allentamento(accelerazione), la velocità aumenterà (Vedi Fig. 4). E viceversa, se allentamento(accelerazione) sarà positivo, l'animazione rallenterà (vedi figura 5).

Parametro miscela(Transizione) , definisce l'algoritmo di transizione: distribuzione(distribuzione, generale) e Angolare(angolare). Il primo cerca di ammorbidire il più possibile, smussare il passaggio da una figura all'altra. Il secondo cerca di mantenere le proporzioni degli angoli. Se la transizione non ti soddisfa, puoi sperimentare questa impostazione.
Consolidamento del materiale ricoperto.
(Il file viene visualizzato – Creazione di animazioni in movimento in Flash.ppt – diapositiva 4).
Creazione dell'animazione della forma: "Fiore notturno"
Riassumendo la lezione.
Ragazzi, vi suggerisco di guardarvi il lavoro dell'altro. Presta attenzione ai vantaggi e agli svantaggi delle diverse animazioni. Le singole animazioni vengono mostrate a tutti coloro che utilizzano un proiettore. Si discutono momenti positivi, errori, eventuali carenze.
Ripetiamo i punti principali della lezione.
Con quale programma abbiamo continuato la nostra conoscenza oggi? Come creare un'animazione di forma? Qual è l'estensione del file di animazione? Ti sono piaciute le funzionalità del programma e dove potresti usarle?
Analisi delle risposte degli studenti; argomentazione e valutazione.
Compiti a casa: astratto; riflettere e preparare il materiale per la propria animazione

Bibliografia

Macromedia Flash 5 / Libro + Videocorso: Esercitazione- M.: I migliori libri. A cura di V.B. Komyagin.
Flash 8. Proprio come 2x2. AA. Borisenko
INTERNET: www.flashblog.ru; www.adobe.com

Cos'è l'animazione. Sequenza temporale. fotogrammi chiave. Operazioni del personale. Tipi di animazione. Animazione del fotogramma. Animazione in movimento. Animazione del modulo. Anima con effetti timeline

L'animazione è l'illusione del movimento creata utilizzando una serie di immagini fisse successive leggermente diverse l'una dall'altra. Anche nel Rinascimento si è notato che con un rapido cambio di immagini si crea l'effetto del movimento.

La sequenza temporale viene utilizzata per creare l'animazione ( Sequenza temporale) su cui si trovano tutti i fotogrammi, così come la "testina di riproduzione dei fotogrammi", un piccolo rettangolo pieno nell'area della timeline con i numeri dei fotogrammi (vedi Fig. Riso. uno). Durante la riproduzione di un film, la testa si muove automaticamente.

I frame sono chiave e statici. I fotogrammi chiave, di regola, contengono l'immagine (determinano il contenuto del film). Tali riquadri sono indicati da cerchi neri 1 . I restanti fotogrammi sono statici (vengono riprodotti come se "per niente").

Riso. 1

L'impostazione della timeline viene eseguita utilizzando il pulsante, che ha le seguenti modalità:

- Minuscolo(Molto piccolo);

- piccolo(Poco);

- Normale(Normale);

- medio(Media);

- larga(Larga).

È possibile eseguire varie operazioni con i frame (copia, eliminazione, ecc.). Per le operazioni con un solo fotogramma è sufficiente prima cliccarci sopra con il mouse, con più fotogrammi consecutivi, che vanno selezionati cliccando prima sul primo e poi, premendo il tasto, sull'ultimo.

È possibile impostare un determinato frame come chiave utilizzando il tasto funzione F6 o utilizzando i comandi del menu principale Inserire - Sequenza temporale - fotogramma chiave(Inserisci - Sequenza temporale - Fotogramma chiave).

Per eliminare un frame (frames), dopo averlo selezionato (loro) selezionare la voce nel menu contestuale Rimuovi cornici(Cancella frame) o eseguire i comandi del menu principale Modificare - Sequenza temporale - Rimuovi cornici(Modifica - Sequenza temporale - Elimina fotogrammi).

Per spostare i fotogrammi, puoi spostarli con il mouse, come mostrato in Riso. 2.

Riso. 2

La copia dei frame viene eseguita utilizzando il contesto (item Copia cornici(Copia cornici)) o menu principale ( Modificare - Sequenza temporale - Copia cornici(Modifica - Timeline - Copia fotogrammi)). L'incollaggio dei fotogrammi copiati viene eseguito in modo simile utilizzando il comando Incolla i fotogrammi(Inserire cornici). Naturalmente, è necessario specificare il punto di inserimento sulla timeline.

Per inserire un fotogramma chiave statico e vuoto, utilizzare i tasti funzione e rispettivamente.

Per impostazione predefinita, l'animazione si verifica all'aumentare del numero di fotogrammi. Per invertire la direzione dell'animazione, seleziona i fotogrammi e seleziona la voce nel menu contestuale Cornici inverse(Inverti fotogrammi). È inoltre possibile utilizzare i comandi del menu principale Modificare - Sequenza temporale - Cornici inverse(Modifica - Timeline - Inverti fotogrammi).

Tipi di animazione

In Macromedia Flash sono possibili i seguenti tipi di animazione:

Animazione fotogramma per fotogramma;

Interpolazione di movimento ( interpolazione di movimento);

Animazione forma ( forma);

Animazione utilizzando effetti timeline.

Consideriamo ogni tipo di animazione separatamente.

Ferma l'animazione in movimento

L'animazione fotogramma per fotogramma viene implementata utilizzando una serie di fotogrammi chiave successivi, ognuno dei quali deve essere creato "a mano" ( Riso. 3).

Riso. 3

Animazione in movimento (interpolazione di movimento )

Con tale animazione, un oggetto si sposta da un luogo all'altro. Per crearlo, è necessario specificare solo i fotogrammi chiave di inizio e fine, tutti i fotogrammi intermedi verranno determinati automaticamente dal programma. Diamo un'occhiata più da vicino alla tecnologia per creare tale animazione.

Disegniamo un cerchio sul campo di lavoro, sulla timeline il primo fotogramma diventerà automaticamente quello chiave.

Fare clic sul fotogramma chiave con il tasto destro del mouse e selezionare il comando dal menu contestuale Crea interpolazione di movimento(Crea animazione in movimento). Intorno al cerchio viene formato un bordo blu, il che significa che l'oggetto è raggruppato. Selezionare quindi sulla timeline, ad esempio, il 30° fotogramma (specificare la durata del filmato) e con il tasto destro del mouse premuto selezionare il comando Inserire - fotogramma chiave(Inserisci fotogramma chiave) - Nella timeline viene visualizzata una linea orizzontale con una freccia all'estremità, a indicare che il movimento è stato creato. I fotogrammi intermedi vengono automaticamente colorati in blu.

Pannello Proprietà(Proprietà) puoi anche impostare parametri di animazione aggiuntivi:

- Ruotare(Rotazione) specifica il senso di rotazione - orario ( CW) o contro ( CWW), o nessuna rotazione ( Nessuno). È possibile anche il valore Auto (l'oggetto viene ruotato una volta nel senso di rotazione dell'angolo più piccolo);

- Facile(Rallentare); se il valore del parametro è positivo, il movimento durante l'animazione verrà rallentato, se negativo - accelerato;

- Orienta al percorso(Orientamento relativo al percorso) permette di orientare il movimento dell'oggetto rispetto ad una determinata traiettoria ed altre.

Animazione della forma (Forma Twee n)

L'animazione della forma ti consente di trasformare senza problemi un oggetto in un altro. Può essere applicato solo a oggetti non raggruppati. Per modificare la forma di più oggetti, è necessario posizionarli sullo stesso livello. Consideriamo tutto con un esempio.

Disegniamo un cerchio sul desktop, selezioniamo una lunghezza del filmato di 30 fotogrammi, per fare ciò, clicchiamo sul 30° fotogramma, torniamo al primo fotogramma chiave e sul pannello Proprietà(Proprietà) nell'elenco Tween, selezionare la modalità forma(Forma), apparirà una linea orizzontale con una freccia all'estremità, le cornici intermedie verranno colorate colore verde, questo significa che l'animazione della forma è stata creata, nell'ultimo fotogramma chiave disegneremo un quadrato anziché un cerchio.

Proviamo il film: vedremo come il cerchio si trasforma dolcemente in un quadrato. Per indicare la specificità del cambiamento di forma (il flusso dei punti di un oggetto nei punti di un altro), è necessario creare i cosiddetti etichette di suggerimento. Li conosceremo più avanti in un esempio concreto.

Anima con effetti timeline

Nella versione Macromedia Flash MX 2004, è diventato possibile creare animazioni utilizzando effetti incorporati. Gli effetti possono essere applicati a testo, forme, gruppi, grafica, bitmap e pulsanti. Possono essere utilizzati anche per le clip, ma in questo caso l'effetto è incorporato nella clip.

Per applicare l'effetto, selezionare l'oggetto ed eseguire il comando Inserire - Effetti della sequenza temporale(Inserimento - Effetti Timeline); quindi scegli il tipo di effetto: assistenti(aiutanti) effetti(Effetti), transizione - Trasformare(Transizione - Trasformazione). Effetti di gruppo assistenti non sono animati. Semplicemente creano duplicati dell'oggetto dato e li posizionano a una certa distanza l'uno dall'altro, oppure creano un flusso uniforme dell'oggetto nel suo duplicato.

Dopo aver selezionato l'effetto, appare una finestra di dialogo in cui è possibile impostare i parametri per la sua manifestazione.

Quando si crea un effetto, viene creato automaticamente un livello in cui viene trasferito l'oggetto (il nome del livello è lo stesso del nome dell'effetto). In base all'oggetto viene creato un simbolo grafico che viene scritto nella libreria nella cartella effetti(Effetti).

Parte pratica

1. Progetto “Omino in movimento”.

2. Progetto “Movimento lungo una curva chiusa”.

3. Progetto “Trasformare una figura in una lettera”.

1. Progetto “Uomo in movimento”

Creiamo un filmato in cui l'animazione in movimento ( interpolazione di movimento) l'omino si muoverà.

Prima di creare un progetto, è necessario avere una buona idea di quali singoli elementi sarà composto "l'eroe del nostro film". Dopotutto, ogni dettaglio deve muoversi durante la riproduzione del film. È necessario riflettere su un momento del genere - quali elementi dovrebbero essere in primo piano e quali - sullo sfondo. Per una rappresentazione più visiva, è preferibile disegnare prima un disegno su un foglio di carta.

Quindi, lascia che il nostro piccolo uomo sembri addosso Riso. 4.

Riso. 4

Tale immagine può essere ottenuta dalle forme più semplici: cerchi, ellissi e rettangoli.

Iniziamo a disegnare. Disegniamo l'intera persona su un livello, quindi distribuiamo le singole parti sui livelli, c'è una tale opportunità nel programma. Per prima cosa, disegna la testa (circonferenza) e la squadra Modificare - Converti in simbolo(Cambia - Converti in carattere) convertilo in un carattere, accettando il tipo ( Comportamento) carattere un filmato(Simbolo); chiamiamo questo simbolo testa.

Quindi creeremo un oggetto che fungerà da "corpo". Esegui il comando Inserire - Nuovo simbolo(Inserire - Nuovo simbolo) e impostare i parametri su on Riso. 5. Dopo aver cliccato sul pulsante OK entriamo nella modalità di modifica dei simboli, disegniamo un rettangolo (vedi Fig. Riso. 6a). È necessario prestare attenzione al fatto che il centro di ogni oggetto disegnato nella modalità di modifica coincide con il punto di registrazione, indicato dal segno "+".

Riso. 5

Il simbolo creato va nella libreria dei film. Andiamo sulla scena e la trasferiamo nell'area di lavoro.

Quindi creiamo una "coscia" allo stesso modo (notare che il rettangolo è disegnato con gli angoli arrotondati) e copiando otteniamo il secondo stesso elemento ( Riso. 6b). Otteniamo anche due gambe e, infine, scarpe (vedi. Riso. 4). Daremo nomi a tutti i simboli secondo Riso. 8.

Il risultato è un uomo! Non preoccuparti della bellezza e della credibilità del disegno, la cosa più importante per noi è capire l'idea di animazione e incarnarla nel film.

Riso. 6

Quindi, l'omino è nel primo fotogramma chiave su un livello. Distribuiamo tutte le figure che lo compongono in livelli: per questo eseguiamo il comando Modificare - Sequenza temporale - Distribuisci a livelli(Cambia - Timeline - Distribuisci a livelli) - vedi Riso. 7.

Riso. 7

Come risultato dell'esecuzione di questo comando, i livelli dovrebbero trovarsi come mostrato in Riso. 8.

Riso. 8

Lo strato inferiore sarà lo sfondo del nostro film. Scegli una foto per lui a tua discrezione.

Dopodiché, devi decidere la lunghezza del film e indicare i fotogrammi che mostreranno le varie posizioni di una persona durante il movimento. Per fare ciò, seleziona i seguenti fotogrammi: 5°, 9°, 13° e 17°. Ciò significa che la lunghezza del filmato sarà di 17 fotogrammi e che i fotogrammi con nome dovrebbero essere impostati (usando il tasto funzione F6 in tutti i livelli tranne il livello sfondo.

Ora diamo un'occhiata a come dovrebbero apparire questi fotogrammi chiave. Nella prima cornice, il disegno dovrebbe essere come in Fig. 4, nel 5 - come su Riso. 9a, nel 9° - come su Riso. 9b, nel 13 - come su Riso. 9° secolo e nel 17° - come su Riso. 9 anni.

a B C D)

Riso. 9

È auspicabile alzare leggermente il "corpo" e la "testa" nel 5° e 13° fotogramma degli strati "corpo" e "testa" per un movimento più realistico. Potrebbe essere necessario correggere alcuni frame.

Successivamente, creeremo un'animazione in movimento nei fotogrammi chiave. Per fare ciò, fare clic con il tasto destro del mouse sul fotogramma chiave e selezionare il comando dal menu contestuale Creare - interpolazione di movimento(Crea - Animazione in movimento). Di conseguenza, la sequenza temporale assumerà la forma mostrata in Riso. 10.

Riso. 10

Il film è pronto e può essere testato.

2. Progetto “Rotazione di un satellite intorno alla Terra”

Il modello della Terra con un satellite in orbita sarà rappresentato nella forma mostrata in Riso. 11.

Riso. 11

Descriviamo le fasi principali della creazione di un progetto che utilizza l'animazione in movimento (Motion Tween).

1. Con pannello mix di colori r (Color Mixer) imposta il riempimento radiale selezionando due colori dalla barra del gradiente: verde e marrone.

2. Disegna un cerchio senza contorno, con il riempimento selezionato nel passaggio 1, che fungerà da "Terra". Chiamiamo il livello pianeta (Riso. 12).

Riso. 12

3. Creiamo uno sfondo (il livello più basso), che può essere qualsiasi immagine che imiti il cielo.

4. Disegniamo (con lo strumento ovale) traiettoria dell'orbita sotto forma di un'ellisse di qualsiasi colore senza riempimento, ad es. barra degli strumenti di gestione del colore ( colori) sarà simile Riso. 13.

Riso. 13

5. Per ruotare la traiettoria di 45 °, è necessario raggrupparla, poiché quando si attraversano aree, la figura è divisa in parti. Seleziona le singole parti della traiettoria con il mouse premendo il tasto. Per raggrupparli, scegli il comando Modificare - gruppo(Cambia - Gruppo) - è apparsa una cornice blu. Ruotiamo l'oggetto raggruppato di 45° (vedi Fig. Riso. undici). Per fare ciò, puoi utilizzare il pannello Trasformare(Trasformazione) eseguendo il comando Finestra - Pannelli di progettazione - Trasformare(Finestra - Pannelli Design - Trasformazione) ed entrando nel campo Ruotare(Rotazione) Valore angolo -30° ( Riso. 14).

6. Poi di nuovo spezzeremo la traiettoria in parti separate a comando Modificare - Spezzare(Cambia - Dividi). Per simulare il movimento lungo un percorso chiuso, è necessario specificare i punti di inizio e fine del movimento. Per fare ciò, disegna un'altra ellisse più piccola e sovrapponila all'orbita ( Riso. quindici). L'area formata all'intersezione di due ellissi verrà cancellata con la chiave.

Riso. 15

7. Utilizzando lo strumento e il tasto, selezionare le parti indesiderate della piccola ellisse ed eliminarle. Quindi, abbiamo una traiettoria che ha un inizio e una fine.

8. Selezionare la parte più vicina della traiettoria (vedi. Riso. 16), copialo ( Modificare - copia) e incollalo nello stesso posto ( Modificare - Incolla sul posto) su un livello separato con il nome del pezzo. Rendi invisibile questo livello facendo clic sul punto sotto l'icona nel pannello dei livelli.

Riso. 16

9. Selezionare tutte le parti della traiettoria e, con il tasto destro del mouse premuto, selezionare il comando Taglio(Taglia) e posizionalo su un livello separato con il nome orbita nello stesso posto Modificare - Incolla sul posto).

10. Sopra lo strato orbita creare un livello denominato satellitare. Su di esso creeremo un oggetto "satellitare", che sarà una clip. Per fare ciò, esegui il comando Inserire - Nuovo simbolo(Inserisci - Nuovo simbolo), specificare il tipo di simbolo un filmato(Clip), e diamo il nome satellitare. Nella modalità di modifica, disegna un cerchio senza contorno, seleziona un riempimento e non dimenticare che il centro dell'oggetto coincide con il punto di registrazione ("+"), altrimenti il satellite non sarà bloccato sull'orbita.

11. Ritorna sul palco, trasferisci il simbolo satellitare sul campo di lavoro e impostarlo sul punto di partenza nell'orbita, da dove inizierà a muoversi, - Riso. 17.

Riso. 17

12. Creiamo un'animazione del movimento del satellite, per fare ciò, fai clic con il tasto destro del mouse sul fotogramma chiave nel livello satellitare e seleziona la voce nel menu contestuale Creare - interpolazione di movimento(Crea - Animazione in movimento), spostati, ad esempio, al 40° fotogramma e seleziona il comando nello stesso menu Inserire - fotogramma chiave(Inserisci - Fotogramma chiave). Apparirà una freccia orizzontale, a indicare che l'animazione è stata creata. Nell'ultimo fotogramma chiave, sposta il satellite al punto finale della traiettoria e riducilo di dimensioni (vedi Fig. Riso. 18).

Riso. 18

13. In tutti gli altri livelli realizzeremo la stessa lunghezza del film, per questo premiamo semplicemente il tasto F6.

Se avvii il film ora, il satellite "correrà" fino al punto finale del percorso più breve. Affinché il satellite si muova lungo l'intera traiettoria, creeremo sopra il livello satellitare strato guida speciale ( guida) cliccando sull'icona ( Aggiungi la guida al movimento) nella parte inferiore del pannello Livelli. E già su questo livello trasferiremo i frame dal livello orbita.

Viene mostrata la sequenza dei livelli del filmato sulla timeline Riso. 19.

Riso. 19

Proviamo il filmato (premendo la combinazione di tasti + ) e poi miglioriamolo.

14. Facciamo nascondere il satellite passando per la parte corrispondente dell'orbita. Per fare ciò, devi creare almeno quattro livelli satellitare nuovi fotogrammi chiave (ad esempio 21, 25, 27 e 29 - fig. 20) e modificare la trasparenza del satellite nel pannello Proprietà(Proprietà) selezionando dall'elenco colore Valore (colore).
alfa (vedi Riso. 21) e impostando il valore di trasparenza nei frame specificati rispettivamente a 68, 57, 28 e 9%.

Riso. 21

15. Per nascondere la parte invisibile dell'orbita, dovresti scambiare gli strati del pianeta (dovrebbe essere più alto) e orbita. Strato guida guida dovrebbe essere invisibile e il pezzo di livello, al contrario, dovrebbe essere visibile, ad es. sulla timeline apparirà così: Riso. 22–23. È necessario cambiare il colore della sezione dell'orbita sul livello del pezzo (simile al passaggio 7).

Riso. 22

Riso. 23

16. Miglioriamo il nostro "pianeta". Nascondi temporaneamente tutti i livelli tranne il livello pianeta. Scegliamo uno strumento

Barra degli strumenti. Ti permette di cambiare il riempimento.

Fare clic sul primo fotogramma chiave del livello pianeta, quindi sul "pianeta" - apparirà un cerchio con indicatori che controllano il gradiente. “Prendi” il marker centrale con il mouse e trascina il gradiente verso il basso in diagonale, a circa 45° fino al punto di contatto con l'orbita (vedi Fig. Riso. 24).

Riso. 24

Le stesse azioni devono essere eseguite nell'ultimo fotogramma, solo il gradiente in esso deve essere "trascinato" verso l'alto (vedi Fig. Riso. 25).

Riso. 25

17. Resta da organizzare l'animazione. Per fare ciò, fai clic sul primo fotogramma chiave del livello. pianeta e sul pannello Proprietà(Proprietà) nell'elenco Gemello(Animazione) scegli Movimento(Movimento).

18. Proviamo il film.

3. Progetto "Trasformare un rettangolo in una lettera"

In questo progetto, il rettangolo si trasforma in una lettera, ad es. viene applicata l'animazione del modulo.

1. Sul livello, che chiameremo rettangolo, disegna un rettangolo senza contorno e scrivi una lettera accanto ad esso, ad esempio, e (Riso. 26).

Riso. 26

2. Dividiamo la lettera in parti a comando Modificare - Spezzare(Cambia - Dividi).

3. Sovrapporre la lettera al rettangolo, quindi fare clic sull'icona

sulla barra degli strumenti e allungare la lettera in base all'altezza e alla larghezza del rettangolo come mostrato in Riso. 27.

Riso. 27

4. Senza annullare la selezione, nel menu contestuale, seleziona il comando Taglia (Taglia), dopodiché posizioneremo la lettera su un livello separato tramite comando Modificare- Incolla sul posto(Modifica - Incolla nello stesso posto).

5. Nascondi il livello con la lettera facendo clic sul punto sotto l'icona.

6. Sulla timeline, seleziona, ad esempio, il 35° fotogramma in entrambi i livelli e rendili chiave (premendo il tasto F6).

7. Seleziona il primo fotogramma chiave nel livello lettera, copialo selezionando la voce nel menu contestuale Copia cornici(Copia fotogrammi) e incolla l'ultimo fotogramma chiave del livello rettangolo a comando Incolla i fotogrammi(Inserire cornici). Si è scoperto che nel primo fotogramma chiave del livello rettangolo viene disegnato un rettangolo e, nell'ultimo fotogramma chiave dello stesso livello, una lettera. Il livello delle lettere può ora essere eliminato.

8. Ora creiamo l'animazione. Fare clic sul primo fotogramma chiave e nel pannello Proprietà(Proprietà) nell'elenco Gemello(Animazione) scegli forma(Il modulo). È apparsa una linea orizzontale con una freccia e le cornici sono diventate verdastre, indicando che è stata creata l'animazione della forma.

È necessario specificare quale punto del rettangolo deve spostarsi in quale punto della lettera. Per questo, ci sono i cosiddetti etichette di suggerimento. Per impostarli, selezionare il primo fotogramma chiave ed eseguire il comando Modificare - forma -Aggiungi un suggerimento di forma(Modifica - Modulo - Aggiungi suggerimento modulo). Apparirà un segno rosso con la lettera a ( Riso. 28).

Riso. 28

Aggiungiamo un'altra etichetta: per fare ciò, fai clic con il pulsante destro del mouse sull'etichetta esistente e seleziona il comando nel menu di scelta rapida Aggiungi suggerimento(Aggiungi suggerimento), deselezionare, fare clic sul segno rosso (con la lettera b) e trascinarlo con il mouse nell'angolo in alto a destra del rettangolo (vedi Fig. Riso. 29).

Dopodiché, passiamo all'ultimo fotogramma chiave. Fare clic sul campo di lavoro bianco e solo dopo spostare il punto rosso nella stessa posizione nell'angolo in alto a destra della lettera e.

Creiamo altre due etichette allo stesso modo (vedi Fig. Riso. 30) sul rettangolo e indicarne la posizione sulla lettera.

Riso. 30

Proviamo il film.

Nota. Puoi invitare gli studenti a presentarsi agli effetti della sequenza temporale.

1 Sono anche possibili fotogrammi chiave "vuoti". Sono indicati da un cerchio vuoto. - ca. ed.

Nell'ultima lezione vi abbiamo presentato l'interpolazione di movimento automatica (interpolazione di movimento), e ora continueremo a parlare dell'animazione automatica e a guardare l'animazione automatica dell'interpolazione di forma (interpolazione di forma). Va notato che il termine Shape Tween è tradotto in modo diverso in diverse pubblicazioni, in particolare si trova il nome "animazione di riempimento di frame con cambio di forma". Tuttavia, è molto difficile tradurre con precisione questa combinazione, poiché tween è un'abbreviazione di between (tra). Quindi, significa che questo tipo di animazione è costruito sulla base del fotogramma iniziale e finale e tutto ciò che c'è tra questi fotogrammi viene interpolato secondo uno o un altro algoritmo. L'animazione delle forme consente di creare l'effetto di scorrere da una forma all'altra modificando la posizione, le dimensioni e il colore delle forme.

Va notato che l'animazione di modellatura può essere applicata solo a forme, non a gruppi, istanze o bitmap. Per applicare l'animazione di cambio forma a questi oggetti, è necessario prima dividerli (spezzarli) in componenti. Per comprendere i principi della creazione di animazioni di cambio forma automatiche, considera semplice esempio, in cui la mela si trasformerà in una pera. Disegna un percorso chiuso con un riempimento a forma di mela, come mostrato in fig. uno.

Riso. 1. Contorno con un riempimento radiale

Quindi fare clic sul nome del livello dell'oggetto disegnato (in questo caso, il nome del livello predefinito è Livello 1) - il livello verrà selezionato (Fig. 2) e la finestra Tween apparirà in basso nel pannello Proprietà, in di cui hai bisogno per selezionare la voce Forma.

Riso. 2. Nel menu Interpolazione, selezionare Forma

Ora aggiungiamo il fotogramma finale: lascia che la modellatura avvenga su 30 fotogrammi. Inserire un fotogramma chiave nel 30° fotogramma e posizionare un percorso chiuso a forma di pera lì (Figura 3). Si noti che nel nostro esempio, l'iniziale e l'ultimo fotogramma differiscono non solo per la forma del contorno, ma anche per il colore di riempimento.

Riso. 3. Posiziona la forma risultante nel 30° fotogramma

Dopo aver determinato il fotogramma finale della trasformazione, nel pannello Timeline, lo spazio tra il primo e il 30° fotogramma è diventato verde chiaro e una freccia si è allungata all'interno di questo spazio, che indica la creazione di un'animazione di cambio forma, ovvero, la creazione del prossimo film.

Riso. 4. Nella finestra Facilità, è impostata la modalità di accelerazione/decelerazione dell'animazione

Analogamente a come viene implementato nell'animazione di interpolazione automatica, nell'animazione di modellatura automatica è possibile impostare l'animazione in modo che rallenti o acceleri. Dimostriamo questa possibilità con il nostro esempio. Seleziona il livello e fai clic sul triangolo accanto alla casella Facilità (Fig. 4), a seguito del quale apparirà uno slider che ti consente di impostare la modalità di accelerazione/decelerazione. Per velocizzare il movimento è necessario inserire un numero negativo da -1 a -100, e per rallentare il processo di trasformazione, inserire un numero positivo da 1 a 100. Impostare il parametro Easing, ad esempio, uguale a +100, e prendi il prossimo film

Riso. 5. Menu a discesa Miscela

Presta attenzione alla possibilità di scegliere la natura dell'animazione, che è impostata nel menu a discesa Miscela (Fig. 5). In questo menu, puoi scegliere due opzioni: Distributiva, in cui le forme intermedie saranno più lisce, e Angolare, in cui le forme saranno angolari.

Utilizzo di suggerimenti nell'animazione del modulo

Nel paragrafo precedente, abbiamo studiato il processo di animazione del cambio forma, in cui una mela si trasforma in una pera. Sarebbe logico un processo di morphing, in cui un ramoscello si trasforma in un ramoscello e un frutto in un frutto, mentre il programma genera frame di trasformazione intermedi, "non sapendo nulla" della struttura di mele e pere. Pertanto, se vogliamo mantenere una logica di morphing, dobbiamo dire al programma quali aree dovrebbero essere ereditate. A tale scopo, il programma Flash utilizza i cosiddetti suggerimenti (shape hints) - indicatori di controllo con i quali è possibile controllare il processo di modellatura. I suggerimenti segnano i punti che dovrebbero entrare in se stessi nelle figure iniziali e finali. I suggerimenti sono contrassegnati da lettere (da "a" a "z").

Diamo un'occhiata a come possiamo migliorare la nostra animazione usando i suggerimenti.

Selezionare il primo fotogramma chiave ed eseguire il comando Modifica => Forma => Aggiungi suggerimento forma, per cui il suggerimento iniziale apparirà sulla figura sotto forma di un cerchio rosso con la lettera “a”. Spostiamo il suggerimento nel punto più alto del ramo (Fig. 6).

Riso. 6. Procedura di installazione dei suggerimenti

Riso. 7. Nell'ultimo fotogramma, imposta il punto in cui dovrebbe andare il suggerimento

Passa all'ultimo fotogramma chiave e scoprirai che il suggerimento finale appare sotto forma di un cerchio verde con la lettera "a" all'interno del contorno della forma risultante. Spostare il suggerimento nel punto che dovrebbe corrispondere al primo punto contrassegnato (Fig. 7). Dopo aver inserito un suggerimento sulla curva nell'ultimo fotogramma, nel primo fotogramma il suggerimento cambierà colore (da rosso a giallo) - questo significa che è stata stabilita una corrispondenza tra i suggerimenti. Ripetere questo processo aggiungendo più suggerimenti (Figura 8). Ricevere migliori risultati i suggerimenti devono essere posizionati in senso antiorario, partendo dall'angolo in alto a sinistra della figura.

Riso. 8. Posizione dei suggerimenti nella figura risultante

Riso. 29. Creare un clip filmato ramo

Poiché il nostro compito è costruire un albero animato, che a sua volta è costituito da rami, trasformiamo il ramo che abbiamo creato in un clip filmato eseguendo il comando Modifica => Converti in simbolo (Fig. 29). Ora è possibile costruire un albero dall'insieme di clip "rami" (Fig. 30). Come si può vedere dalla figura. 30, la clip del ramo viene applicata ripetutamente con varie trasformazioni (ruota, specchia e ridimensiona).

Riso. 30. Un albero è costruito sulla base di filmati "rami".

Riso. 41. Aggiunta di istanze di simboli alla copia del simbolo 1 dello stage

Puoi anche duplicare un simbolo usando la sua istanza. Dimostriamolo con lo stesso esempio. Selezionare un'istanza del Simbolo 1 sullo stage ed eseguire il comando Modifica => Simbolo => Simbolo Duplica (Fig. 42).

Riso. 42. Simbolo duplicato in base all'istanza

Riso. 43. Pannello simboli duplicati

Successivamente, apparirà un altro simbolo: Symbol1 copy 2 (Fig. 43). Fare doppio clic sul nome del nuovo simbolo nella finestra della libreria, che aprirà la finestra per la modifica del nuovo simbolo. Cambiamo la posizione della foglia nell'ultimo fotogramma, andiamo alla scena principale e aggiungiamo diverse istanze del nuovo simbolo. Di conseguenza, otterremo la versione finale

Il morphing differisce dai precedenti tipi di animazione in quanto funziona esclusivamente con oggetti grafici (vettoriali) e non con personaggi.
Penso che tutti abbiano visto un modo semplice per cambiare facilmente la forma sui siti flash (flusso regolare di un quadrato in un cerchio),

Questi sono tutti elementi grafici, non credo che qualcuno lo farà, è più interessante guardare un'immagine in png, come cambia forma, trasformandosi in un altro png, ma il morphing con un raster non funziona. Un certo algoritmo delle azioni dovrebbero essere eseguite.
Te lo dico con il mio esempio.
Creiamo un documento, importiamo nella libreria le immagini che ci servono, preparate in anticipo nelle dimensioni e su sfondo trasparente, sottolineo subito che l'immagine deve essere senza sfumature, senza ombre e preferibilmente poco colorata (il programma non potrà per calcolarlo), chissà cos'è un vettore, che rappresenta quante macchie di sfumature di colore ci sono in un'immagine, quindi devi essere d'accordo sul fatto che il programma Flash non è destinato al lavoro di base con un vettore.
Quindi, tutto è stato caricato nella libreria, andiamo... inserisci - crea un simbolo - nel simbolo stesso con la bibl. inserisci l'immagine, seleziona, quindi -modifica-bitmap-vettorizza.

Si aprirà una finestra, se hai un valore di soglia di 100, correggilo di 10, ma il valore è l'area più piccola, puoi sperimentare, il valore predefinito è 1, ma ci vorrà troppo tempo per il calcolo del programma (ogni colore punto), quindi a seconda dell'immagine che hai, della complessità del colore, cambia questo valore e guarda facendo clic sull'anteprima, l'importante è che la qualità non sia molto distorta, nel mio esempio, come se 25 fosse un po' troppo , ma la qualità non ha sofferto molto, se sei soddisfatto del risultato premi ok.

Senza deselezionare, premere - copia-

e vai alla scena di montaggio, seleziona 1 fotogramma e sul palco - inserire.

È meglio spostarsi con le frecce sulla tastiera, o in modo che l'intera immagine sia selezionata e la freccia mostri il mirino, altrimenti la sposterai pezzo per pezzo, questo è già un vettore, non un simbolo.
Seleziona il primo fotogramma e seleziona - crea un'animazione di forma, quindi intorno al fotogramma 60 inseriamo un fotogramma chiave vuoto.Sulla scala, la traccia è composta da punti.

Ripeti l'azione con la seconda immagine (incolla-crea simbolo-vettorizza-...copia...), torniamo sullo stage, selezioniamo il frame desiderato (ne ho 60),
fare clic sulla scena e fare clic su - inserire, la traccia cambia sulla scala.

Ho detto e mostrato un semplice esempio, ma in aggiunta ci sono più strumenti di editing quando si lavora con il morphing, come l'aggiunta di suggerimenti (punti) per un morphing preciso e uniforme, la modifica dei punti di ancoraggio, la distorsione, l'arrotondamento ... ecc., se qualcuno è interessato Posso descrivere il significato di questi strumenti.
Giochiamo, guardiamo Ecco una semplice animazione del form.