Tutorial: Creare effetto riflesso acqua con animazione
Scrivi commento 18 Novembre 2008
Sintesi
In questo tutorial vi spiegherà come creare un riflesso acqua da applicare su un movieclip in movimento.
Ecco il risultato finale:
Requisiti
Flash 8, Flash CS3 o Flash CS4.
Nota: Le schermate contenute in questo tutorial sono realizzati in Flash CS3. Funziona esattamente la stessa cosa in Flash 8. Questo tutorial è ActionScript 2 (anche se non ActionScript è richiesto).
Step 1 - Installare il componente effetto
Scarica il Effect Water Reflection qui. Si prega di seguire le istruzioni di installazione e trascinare il componente dal pannello componente nella libreria del file. Fla.
Passaggio 2 - Creare Movieclip anatra
Importare l'immagine anatra premere [Ctrl-R] o "File" -> "Importa" -> "Importa on Stage ...". Assicurarsi che l'immagine di anatra è un PNG. Con sfondo trasparente.
Selezionare questa immagine e convertirla in un movieclip [premere F8] o tasto destro del mouse sul MovieClip -> "Converti in simbolo ...". MovieClip dare il nome di "anatra".
Passaggio 3 - Creazione Animazione Movieclip
Creare una new MovieClip con [premere Ctrl-F8] o Inserisci -> "Nuovo simbolo ...". Nome Movieclip questa "animazione".
Trascinare il clip filmato anatra dalla libreria al primo fotogramma sulla timeline. Ora cliccate su frame 60 e creare un nuovo fotogramma chiave [premere F6] o tasto destro del mouse e "Inserisci fotogramma chiave".
Fare clic sul fotogramma chiave appena creata e selezionare il clip filmato anatra sulla tela. Ora spostare questa MovieClip con il tasto cursore a destra (diciamo 100px). È possibile controllare la nuova posizione nel pannello info.
Tornare al primo fotogramma chiave della linea temporale. Sul pannello di proprietà Select Tween: "Motion". Se si fa clic su qualche punto della timeline ora, si vede che l'anatra Movieclip si muove da sinistra a destra.
Fase 4 - Movieclip animazione Put sulla timeline principale
Ora cliccate su "Scena 1" per tornare alla linea temporale principale. Se l'anatra MovieClip è ancora lì, rimuoverlo.
Spostare il clip filmato animazione dalla libreria al primo fotogramma della linea temporale.
Impostare il nome di istanza del MovieClip per "animation_mc" (si può scegliere un nome diverso se si desidera. Assicurarsi che il nome di istanza è unica). Senza un nome di istanza, il componente è in grado di rilevare il MovieClip.
Fase 5 - componente Applica effetto
Creare un nuovo livello, selezionare il primo fotogramma e trascinare il componente effetto dalla libreria sul Movieclip animazione. Il componente verrà automaticamente snap.
Impostare il parametro del componente all'interno del pannello di ispezione dei componenti, come nello screenshot. Movieclips con tutti i nomi di istanza in questa cornice sono elencati nella sezione "Target Movieclip" nell'elenco di selezione. Dal momento che si dispone di un solo MovieClip, il componente assume, a cui si desidera applicare l'effetto sul MovieClip "animation_mc".
Nota: Queste impostazioni vengono applicate solo a questa istanza uno dei componenti effetto. Se si disegna il componente su un altro MovieClip (da qualche altra parte all'interno del fla. O in un nuovo progetto) è necessario impostare le impostazioni di nuovo.
Ora (export Ctrl premere [-ENTER] o ...). Vedrete che la testa del papero è in qualche modo tagliati. Thats perché il componente ha esattamente le dimensioni del Movieclip anatra. Ma dal momento che l'onda di riflessione che aumentare le dimensioni non si adattano più.
Fase 6 - Regolare Movieclip animazione
Per risolvere questo problema, si inserisce una forma invisibile in background di anatra MovieClip, che taglia la Movieclip un po '.
Tornare al Movieclip anatra con un doppio clic su di esso nella vostra libreria.
Creare un nuovo livello al di sotto del livello di interpolazione.
Selezionare lo strumento Rettangolo e disegnare una forma con la larghezza di anatra. L'altezza dovrebbe essere una qualche pixel più elevato poi l'anatra (circa 10 pixel). Potrebbe aiutare a impostare l'icona muta nella timeline, a vedere solo le dimensioni dell'immagine anatra.
Con la forma selezionata aprire il pannello dei colori e impostare l'alpha a 0.
Quando si prova il filmato adesso, vedrai che la riflessione è applicato l'anatra buco.
Fase 6 - aggiungere un'immagine di sfondo
Creare un nuovo livello al di sotto del livello con animazione e componente. Importare un'immagine che corrispondono. Ora è possibile cambiare la posizione della MovieClip animazione per renderlo in sintonia con la base.
Scaricare
Clicca qui per scaricare il FLA di questo tutorial. Nota: La fla. Comprende la versione di prova del componente effetto, che può funzionare solo in IDE Flash (Flash 8, Flash CS3 o Flash CS4), ma non all'interno del browser.
È inoltre possibile scaricare l'effetto acqua riflessione qui.






















Scrivi un commento