Hosting & Domini

Esercitazione > Animazione delle istanze

Animazione delle istanze

Flash consente di animare le istanze in diversi modi, usando tecniche fotogramma per fotogramma o di interpolazione. Nell'animazione a interpolazione, si definisce l'aspetto di un'istanza in un fotogramma chiave, quindi si definisce l'aspetto nel fotogramma chiave successivo. Flash crea automaticamente l'animazione tra i due fotogrammi chiave. Di seguito si creeranno due diversi tipi di effetti di interpolazione: interpolazione movimento dell'aquilone e interpolazione forma del filo dell'aquilone.

Come è possibile sapere quale aquilone animare se il filmato dispone di nove combinazioni possibili per gli aquiloni (tre modelli di aquiloni moltiplicati per tre colori)? È necessario animare tutti e nove gli aquiloni? Fortunatamente no, in quanto è possibile usare un aquilone segnaposto per impostare l'animazione. Di seguito in questa esercitazione si creerà una funzione che determina quale aquilone è stato selezionato dall'utente. In base alle informazioni ricevute dalla funzione, nell'animazione il segnaposto viene sostituito da un clip filmato SWF esterno dell'aquilone selezionato.

Quale preparazione all'interpolazione, è necessario modificare il punto di registrazione dell'aquilone.

 
Cambiamento del punto di registrazione

Per impostazione predefinita, il punto di registrazione di un simbolo in un file SWF si trova nell'angolo superiore sinistro del simbolo.

L'esercitazione collega un segnaposto per l'aquilone a file esterni SWF che contengono gli aquiloni, i quali ruoteranno leggermente all'interno del filmato. È necessario spostare il punto di registrazione del segnaposto dell'istanza dell'aquilone, in modo che quando viene sostituito da un aquilone SWF, l'SWF ruoti attorno al punto centrale invece che attorno all'angolo superiore sinistro.

Il comando Modifica centro consente di definire un centro di rotazione dell'istanza diverso da quello del simbolo.

1	In corrispondenza del livello etichette della linea temporale, individuare il primo fotogramma con etichetta ciclo di volo dell'aquilone (Fotogramma 168) e fare clic sul fotogramma per spostare l'indicatore di riproduzione in tale posizione.
2	Selezionare l'aquilone che appare sullo stage.
3	Se il pannello Istanza non è aperto, fare clic sul pulsante Mostra istanza sulla barra di accesso rapido.
	Si noti che quando viene selezionato il simbolo dell'aquilone, nel pannello Istanza il nome del simbolo è placeholderKite e il nome dell'istanza è demoKite. Di seguito nell'esercitazione, dopo aver aggiunto codice ActionScript al filmato, l'aquilone selezionato dall'utente sostituirà l'istanza demoKite durante la riproduzione del filmato.
4	Scegliere Elabora > Trasformazione > Modifica centro.
	Il punto di registrazione diventa visibile e selezionato.
5	Sullo stage, trascinare il punto di registrazione, a forma di piccola croce, fino al centro (approssimativo) dell'aquilone.

 
Creazione di un'interpolazione movimento per l'aquilone

Dopo aver selezionato un aquilone l'utente fa clic sull'istanza del pulsante Vola per visualizzare la fattura mentre l'aquilone vola. Per ottenere l'effetto dell'aquilone che si libra nell'aria, è necessario aggiungere al filmato un'interpolazione movimento.

Nell'interpolazione movimento si definiscono proprietà dell'aquilone quali la posizione, le dimensioni e la rotazione di un'istanza a un certo punto della linea temporale, quindi si cambiano queste proprietà in fotogrammi chiave che si inseriscono nella linea temporale. Flash crea il contenuto dei fotogrammi tra i fotogrammi chiave.

 
Aggiunta del fotogramma chiave per la fine dell'animazione

Mentre si aggiungono fotogrammi chiave si noti che è possibile inserirli in qualsiasi punto in cui si desidera modificare l'animazione. A parte per il primo e l'ultimo fotogramma chiave, non è necessario inserire i fotogrammi chiave esattamente nei fotogrammi indicati nell'esercitazione.

1	In corrispondenza del livello aquilone nella linea temporale, verificare che l'indicatore di riproduzione si trovi sul Fotogramma 168.
	Si noti che il fotogramma chiave indica l'inizio dell'animazione. Si noti anche che la linea guida sullo stage mostra il tracciato seguito dall'aquilone. Nella linea temporale il tracciato si trova nel livello Guida:aquilone, che è un livello guida, ossia un livello speciale creato per agevolare il posizionamento degli oggetti sullo stage.
	Le linee guida hanno esclusivamente la funzione di semplificare il montaggio di media lungo un tracciato e non appaiono nel filmato Flash pubblicato. I livelli guida sono riconoscibili all'interno della linea temporale per l'icona associata.
2	Usare il menu a comparsa nella parte inferiore sinistra della finestra dell'applicazione per aumentare le dimensioni dello stage fino a 800%.
	Si noti ora che il tracciato non è continuo, ma presenta una piccola interruzione in corrispondenza della fine dell'animazione.
3	In corrispondenza del livello aquilone nella linea temporale, spostare l'indicatore di riproduzione sul Fotogramma 229, quindi scegliere Inserisci > Fotogramma chiave.
	Controllare la barra di stato nella parte inferiore della linea temporale per verificare di aver selezionato il fotogramma corretto.
	Un fotogramma chiave finale apparirà nel Fotogramma 228, che è il punto in cui l'interpolazione movimento ha fine.
4	Mantenendo invariata la grandezza dello stage e la posizione dell'indicatore di riproduzione sul Fotogramma 229 del livello aquilone, trascinare l'aquilone leggermente verso destra, in modo che il punto di registrazione si trovi sull'altro lato del tracciato.
	In tal modo si definisce il punto in cui l'aquilone si troverà alla fine dell'animazione.
5	Ridimensionare lo stage al 100%.

 
Definizione dell'interpolazione movimento

Ora che inizio e fine dell'animazione sono state definite, si userà il pannello Fotogramma per specificare che l'interpolazione sarà un'interpolazione movimento.

1	In corrispondenza del livello aquilone nella linea temporale, fare clic su un fotogramma qualsiasi compreso tra 168, l'inizio dell'animazione, e 228, la fine dell'animazione, in modo da selezionare solo i fotogrammi che si trovano tra i due fotogrammi chiave indicati.
2	Scegliere Finestra > Pannelli > Fotogramma, quindi scegliere Movimento dal menu a comparsa Interpolazione.
3	Verificare che Aggancia sia selezionato.
	Questa opzione garantisce che l'istanza aquilone rimanga agganciata alla linea guida per il punto di registrazione.
	La definizione dell'interpolazione movimento è corretta se nella linea temporale appare una linea continua tra i fotogrammi chiave e se i fotogrammi hanno uno sfondo blu chiaro.
	Una linea tratteggiata tra fotogrammi chiave indica che l'interpolazione non è stata definita correttamente, problema che accade di frequente quando si cancella accidentalmente un fotogramma chiave iniziale o finale.

 
Aggiunta di fotogramma chiave intermedi

Ora si aggiungeranno fotogramma chiave intermedi che definiscono dove l'animazione deve cambiare.

1	In corrispondenza del livello aquilone della linea temporale, con l'indicatore di riproduzione posizionato sul Fotogramma 175, premere F6 per inserire un fotogramma chiave.
	Sullo stage l'aquilone si è spostato lungo il tracciato fino alla posizione relativa al Fotogramma 175.
2	Sempre nel livello aquilone, inserire fotogrammi chiave nei Fotogrammi 184, 198, 207 e 214.

 
Modifica in scala e rotazione dell'aquilone

L'animazione diventa più realistica se l'aquilone modifica le dimensioni e ruota durante lo spostamento lungo il percorso. Per ottenere tale effetto, l'aquilone diventerà più grande o più piccolo e ruoterà in corrispondenza dei fotogrammi chiave inseriti.

1	Con il livello aquilone sempre selezionato, spostare l'indicatore di riproduzione indietro al Fotogramma 175.

Nota: Se i fotogrammi chiave sono stati inseriti in fotogrammi diversi da quelli specificati nell'esercitazione, scalare o ruotare l'aquilone nei punti in cui tali fotogrammi chiave sono stati posizionati.

2	Selezionare lo strumento Freccia nella casella degli strumenti e fare clic sul modificatore Scala. Sullo stage fare clic e trascinare una delle maniglie di ridimensionamento degli angoli esterni dell'aquilone per ingrandirlo leggermente.
3	Selezionare il modificatore Ruota. Sullo stage spostare il puntatore del mouse su una delle maniglie d'angolo dell'aquilone.
	Il puntatore assumerà la forma di quattro frecce ricurve.
4	Fare clic e trascinare la maniglia d'angolo per ruotare l'aquilone di circa 30° in senso orario.
5	Spostare l'indicatore di riproduzione sul Fotogramma 184. Sullo stage usare il modificatore Ruota per spostare l'aquilone di circa 60° in senso antiorario. Usare il modificatore Scala per rimpicciolire l'aquilone.
	Durante l'animazione sembrerà che l'aquilone voli più lontano.
6	Spostare l'indicatore di riproduzione sul Fotogramma 198. Sullo stage usare il modificatore Scala per rimpicciolire l'aquilone.
7	Per i fotogrammi chiave 207 e 214, usare lo strumento Scala per ingrandire l'aquilone.
8	Per visualizzare l'animazione del volo, trascinare l'indicatore di riproduzione dal Fotogramma 168 al Fotogramma 228.

Nota: Ricordarsi di salvare il lavoro di frequente.

 
Ripetizione ciclica dell'animazione

L'animazione dell'aquilone si ferma quando l'indicatore di riproduzione raggiunge il Fotogramma 228. Per fare in modo che l'aquilone continui a volare è necessario aggiungere l'attributo di ripetizione ciclica.

1	In corrispondenza del livello azioni della linea temporale, inserire un fotogramma chiave nel Fotogramma 228, quindi fare doppio clic per aprire il pannello Azioni fotogrammi.
2	Fare clic sull'icona Azioni per espandere la categoria, quindi fare doppio clic su goto nella lista.
3	Scegliere Etichetta fotogramma dal menu a comparsa Tipo.
4	Scegliere kite flight loop dal menu a comparsa Fotogramma.
	La linea temporale contiene un'etichetta chiamata kite flight loop. Il primo fotogramma all'interno dell'etichetta kite flight loop è il Fotogramma 168. In questo caso si sta specificando che l'indicatore di riproduzione va dal fotogramma 228, in cui è stato inserito il fotogramma chiave, indietro al Fotogramma 168, ossia l'inizio dell'animazione, in ripetizione ciclica.
5	Verificare che Vai a e riproduci sia selezionato, quindi chiudere il pannello Azioni fotogrammi.

 
Creazione di un'interpolazione forma per il filo dell'aquilone

Per animare l'aquilone si è usata l'interpolazione movimento. Per animare il filo dell'aquilone si userà l'interpolazione forma, ossia si disegnerà una forma, il filo in questo caso, in un determinato punto della linea temporale e la si modificherà in punti successivi. Per creare l'animazione Flash modifica la forma per i fotogrammi compresi tra il fotogramma chiave iniziale e finale.

1	In corrispondenza del livello filo della linea temporale, inserire un fotogramma chiave (F6) nel Fotogramma 168, che è il fotogramma in cui inizia l'interpolazione movimento dell'aquilone.
2	Selezionare lo strumento Matita nella casella degli strumenti. Fare clic sulla casella del colore accanto alla matita nella sezione Colori per visualizzare la finestra a comparsa e selezionare un colore giallo chiaro.
3	Scegliere Smussa dal modificatore Modalità matita.
4	Per aprire il pannello Tratto, scegliere Finestra > Pannelli > Tratto. Nel menu a comparsa della casella del tratto indicata da una doppia freccia, usare il cursore per selezionare 2 oppure digitare 2 nella casella di testo.
5	Sullo stage, disegnare una linea curva che parte dalla spola e arriva all'"occhiello", più o meno al centro dell'aquilone.
6	Se necessario, usare lo strumento Freccia per selezionare il filo sullo stage e selezionare più volte il modificatore Smussa fino a che la linea non assume l'aspetto di un filo.
7	Nella linea temporale, aggiungere un fotogramma chiave in posizione 230 del livello filo.
	Oltre al fotogramma chiave nel Fotogramma 230, appare un fotogramma chiave finale nel Fotogramma 229.
8	Nel Fotogramma 231, scegliere Inserisci > Fotogramma chiave vuoto in modo che il filo non appaia nel filmato da quel fotogramma in poi.

 
Definizione dell'interpolazione forma

In preparazione all'interpolazione forma, è utile bloccare i livelli aquilone, cielo e Guida: aquilone nella linea temporale per evitare lo spostamento accidentale degli oggetti sullo stage.

1	In corrispondenza del livello filo nella linea temporale, fare clic su un fotogramma qualsiasi tra il Fotogramma 168 e 229, in modo che da selezionare solo i fotogrammi che si trovano tra i due fotogrammi chiave indicati.
2	Se il panello Fotogramma non è aperto, scegliere Finestra > Pannelli > Fotogramma, quindi scegliere Forma dal menu a comparsa Interpolazione.
	Come nel caso dell'interpolazione movimento, una linea spessa tra i fotogrammi chiave indica che l'interpolazione è stata eseguita correttamente. La linea temporale indica l'interpolazione forma con uno sfondo verde chiaro.
3	Spostare l'indicatore di riproduzione sul Fotogramma 168. Trascinare lentamente l'indicatore di riproduzione verso destra lungo la linea temporale nel punto in cui il filo appare separato dall'aquilone. Aggiungere un altro fotogramma in questo punto della linea temporale.

Nota: Lo spazio tra aquilone e filo deve essere piuttosto marcato affinché sia necessario aggiungere un fotogramma chiave. Non è necessario aggiungere un fotogramma chiave per una separazione minima tra aquilone e filo.

4	Selezionare lo strumento Freccia nella casella degli strumenti. Se è selezionato l'intero filo, fare clic in un punto qualsiasi dello stage per deselezionarlo, quindi trascinare la parte superiore del filo in modo che appaia nuovamente attaccata all'occhiello.
5	Usare lo strumento Freccia, con il modificatore Smussa selezionato, per mantenere la forma curva della linea, selezionando e trascinando ad un punto che si trova approssimativamente al centro della linea.
	Si sta modificando l'animazione in modo che il filo dell'aquilone non appaia mai separato dall'aquilone.
6	Continuando a spostare lentamente l'indicatore di riproduzione verso destra, aggiungere un fotogramma chiave al livello filo ogni volta che si vede uno spazio marcato tra aquilone e filo, quindi ripetere i punti 4 e 5 secondo necessità fino a raggiungere la fine dell'animazione (Fotogramma 229).
7	Per visualizzare l'animazione, spostare l'indicatore di riproduzione sul Fotogramma 168 e scegliere Controlli > Riproduci. Terminata la visualizzazione dell'animazione, scegliere Controlli > Stop.

Nota: Ricordarsi di salvare il lavoro di frequente.