Completa il Blinkie con le interpolazioni di Flash Motion

• Aprile 26, 2024

L'ultima volta che abbiamo lavorato all'animazione Flash Blinkie, avevamo appena finito gli effetti di testo. L'ultimo effetto di testo che si è verificato nell'animazione è stato l'aspetto e la scomparsa del nome del sito Web "J3 Designs". Scompare dal palco a sinistra con un effetto di transizione della linea temporale (Transizione 3 sulla linea temporale). C'era una ragione per questo e stai per scoprire qual era quella ragione.

Ricorda che, come parte dei dettagli del design, abbiamo quelle due coccinelle. Bene, è tempo di metterli al lavoro. Quando abbiamo creato i livelli per il nostro progetto Blinkie, abbiamo aggiunto la coccinella d'oro al livello Bug 1. Ora, la prima cosa che faremo è aggiungere la seconda coccinella a un nuovo livello che chiameremo Bug 2. Vogliamo che questa coccinella rossa appaia da sotto il cameo. Pertanto, dovremo posizionare il nuovo livello sotto il livello Dettagli statici.

Apri blinkie2.fla in Flash CS3 e mettiamoci al lavoro. Vogliamo che la coccinella inizi a muoversi da sotto il cameo quando il nome del sito Web inizia a scomparire. Vogliamo che il testo stia scomparendo a causa della coccinella. Quindi aggiungeremo questa nuova coccinella sul Frame 110, che è quando il testo inizia a scomparire.

1. Fare clic su File - Importa - Importa in libreria per aprire la finestra di dialogo Importa e aggiungere la coccinella rossa alla nostra libreria.
   
   
2. Aggiungi un nuovo livello sotto il livello Dettagli statici e chiamalo "Bug 2". Aggiungi un fotogramma chiave (Inserisci - Linea temporale - Fotogramma chiave) al fotogramma 110. Trascina la coccinella rossa dalla Libreria sotto il cameo e per il momento non è visibile.
   
   Vogliamo che questa coccinella si sposti a sinistra finché non scompare dal palco mentre il testo scompare. Quindi, quando arriviamo al Frame 160, vogliamo che la coccinella sia completamente a sinistra e fuori dal palco.
   
   
3. Fai clic sul fotogramma 160 sul livello Bug 2, aggiungi un fotogramma chiave e trascina la coccinella rossa a sinistra e completamente fuori dal palco. Fare clic con il tasto destro tra Frame 110 e 160 e scegliere Crea interpolazione di movimento dal menu a comparsa.
   
   Prova il film e dovresti vedere il testo scomparire mentre la coccinella si sposta su di esso. Una volta che la coccinella rossa è fuori dal palco, sposteremo la coccinella d'oro (livello Bug 1) verso l'alto e verso destra fino a quando scompare anche dal palco.
   
   
4. Fai clic sul fotogramma 160 sul livello Bug 1 e aggiungi un fotogramma chiave per il punto di partenza per l'animazione della coccinella d'oro. Usiamo 20 fotogrammi per spostare la coccinella d'oro fuori dal palco. Fare clic sul fotogramma 180 e aggiungere un fotogramma chiave. Sposta la coccinella d'oro su e giù dal palco.
   
   
5. Fare clic con il tasto destro tra Frame 160 e 180 e creare un Motion Tween. Fare clic sul riquadro 180 e aggiungere un riquadro ai livelli Dettagli statici e Sfondo per rendere nuovamente visibili i contenuti di questi livelli.
   
   Infine, vogliamo riportare la coccinella d'oro nella sua posizione originale nella parte inferiore sinistra del palco. Ma non vogliamo che il bug si sposti dall'alto del palco. Vogliamo che salga da sotto il palco. Quindi dobbiamo prima posizionare la coccinella d'oro a sinistra e sotto il palco. Quindi tutto ciò che dobbiamo fare è spostarlo verso l'alto nella sua posizione originale in modo che l'animazione possa ripetersi. Useremo 10 fotogrammi per spostare la coccinella in posizione.
   
   
6. Torna indietro al fotogramma 1 del livello Bug 1 e seleziona la coccinella d'oro. Fai clic su Modifica - Copia per salvare la posizione originale della coccinella d'oro.
   
   
7. Sempre sul livello Bug 1, aggiungi un fotogramma chiave al fotogramma 190. Fai clic su Modifica - Cancella per rimuovere la coccinella d'oro che è già lì. Quindi, fai clic su Modifica - Incolla sul posto per riportare la coccinella d'oro nella posizione originale.
   
   
8. Sempre sul livello Bug 1, fai clic sul fotogramma 181 e aggiungi un fotogramma chiave. Quindi, rimuovere la coccinella d'oro che è già lì. Riporta la coccinella d'oro nella posizione originale su questa cornice (Incolla in posizione). Quindi trascina questa coccinella sotto il palco. Aggiungi una interpolazione di movimento tra i frame 181 e 190 che sposterà questa coccinella su e sul palco.
   
   
9. Fare clic sul riquadro 190 e aggiungere un riquadro ai livelli Dettagli statici e Sfondo per rendere nuovamente visibili i contenuti di questi livelli.
   
   

Prova e salva il blinkie come blinkie3.fla. Quindi pubblica il tuo blinkie come file .swf e goditi il ​​tuo nuovo blinkie.

J3 Designs

Copyright 2018 Adobe Systems Incorporated. Tutti i diritti riservati. Le schermate dei prodotti Adobe sono state ristampate con l'autorizzazione di Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Catalyst Flash e Flash Paper è / sono [a] marchi registrati o marchi commerciali di Adobe Systems Incorporated negli Stati Uniti e / o in altri paesi.