Cool Tutorials Efecte Flash!

Resum

En aquest tutorial aprendrem a crear un reflex d'aigua a aplicar en un movieclip en moviment.

Aquí el resultat final:

Requisits

Flash 8, Flash CS3 o Flash CS4.

Nota: Les captures de pantalla en aquest tutorial es fan en Flash CS3. Funciona exactament de la mateixa en Flash 8. Aquest tutorial és ActionScript 2 (ActionScript Encara que no és obligatori).

Pas 1 - Instal lar el component d'efecte

Descarregui el Efecte Reflex a l'aigua aquí. Si us plau, seguiu les instruccions d'instal lació i arrossegueu el component des del tauler de components a la biblioteca del seu arxiu. FLA.

Pas 2 - Crear movieclip ànec

Import la imatge de l'ànec [premeu Ctrl-R] o "Arxiu" -> "Importa" -> "Importa a l'escenari ...". Assegureu-vos que la imatge és un ànec. Png amb fons transparent.

Seleccioneu la imatge i convertir-la en F8 un [movieclip premsa] o feu clic dret sobre el movieclip -> "Convertir en símbol ...". Donar el movieclip el nom de "ànec".

Pas 3 - Crear animacions movieclip

Crear un nou clip de pel lícula amb [amb Control-F8] o Insereix -> "Nou símbol ...". El nom d'aquest "clip de pel lícula d'animació".

Arrossegueu el movieclip ànec de la seva biblioteca al primer fotograma de la línia de temps. Ara feu clic al fotograma 60 i crear un nou fotograma clau [premeu F6] o feu clic dret i "Inserir fotograma clau".

Feu clic al fotograma clau del recentment creat i seleccioneu el movieclip ànec en el llenç. Ara moveu el movieclip amb la tecla de cursor a la dreta (diguem 100px). Podreu comprovar la nova posició al panell d'informació.

Tornar a la primer fotograma clau de la línia de temps. Al tauler de la propietat Tween seleccionar: "Motion". Si fa clic en algun lloc de la línia de temps, veurà que l'ànec movieclip es mou d'esquerra a dreta.

Pas 4 - Col loqueu movieclip animació en la línia de temps principal

Ara feu clic a "Escena 1" per tornar a la línia de temps principal. Si l'ànec movieclip encara és allà, treure.

Moveu el clip de pel lícula d'animació de la biblioteca al primer fotograma de la línia de temps.

Establir el nom d'instància de l'movieclip a "animation_mc" (vostè pot triar un nom diferent si ho desitja. Assegureu-vos que el nom de la instància és única). Sense un nom d'instància, el component no és capaç de detectar el movieclip.

Pas 5 - Aplicar efecte component

Crear una nova capa, seleccioneu el primer fotograma i arrossegueu el component d'efecte de la biblioteca al movieclip animació. El component s'ajustaran automàticament.

Establiu el paràmetre del component dins del panell inspector de components com en la captura de pantalla. Tots els clips de pel lícula amb noms d'instància en aquest marc s'enumeren en la llista de "Objectiu movieclip" Select. Atès que només té un movieclip, el component suposa, que voleu aplicar l'efecte sobre el movieclip "animation_mc".

Nota: Aquests ajustaments només s'apliquen a aquesta instància d'un dels component d'efecte. Si dibuixa el component en un altre movieclip (en un altre lloc dins de l'arxiu. FLA o en un nou projecte) ha d'establir la configuració de nou.

Ara (a l'exportació [premeu Ctrl-Enter], o ...). Vostè veurà que el cap de l'ànec és d'alguna manera de tall. Això és perquè el component té exactament la mida del movieclip ànec. No obstant això, des de l'onada de reflexió augmentarà la mida no caben més.

Pas 6 - Ajust de clip de pel lícula d'animació

Per solucionar això, se li inseriu una manera invisible en el fons de l'ànec movieclip, que la mida de fins al movieclip una mica.

Tornar a la movieclip ànec fent doble clic a la seva biblioteca.

Crear una nova capa sota la capa d'interpolació.

Seleccioneu l'eina rectangle i dibuixar una forma amb l'amplada dels ànecs. L'alçada ha de ser un píxel alguns superiors als d'ànec (uns 10 píxels). Podria ajudar a establir la icona d'esquema en la línia de temps, per veure únicament les dimensions de la imatge de l'ànec.

Amb la forma seleccionada obrir el panell de color i establir el alfa a 0.

Al provar la seva pel.lícula ara, veuràs que la reflexió s'aplica en l'ànec forat.

Pas 6 - Afegir imatges de fons

Crear una nova capa sota de la capa amb l'animació i de components. Importa una imatge que coincideixen. Ara vostè pot canviar la posició del movieclip animació per fer-la encaixar en el fons.

Descarregar

Feu clic aquí per descarregar el fla d'aquest tutorial. Nota: El fitxer. Fla inclou la versió de prova del component d'efecte, que només funcionen en el IDE de Flash (Flash 8, Flash CS3 o Flash CS4), però no dins del navegador.

També podeu descarregar el Efecte Reflex a l'aigua aquí.