Cool efecto tutoriais Flash!

Resumo

Neste tutorial vai aprender como crear un reflexo de auga para aplicar nun Movieclip movemento.

Aquí o resultado final:

Requisitos

Flash 8, Flash CS3 ou Flash CS4.

Nota: As imaxes nese tutorial están feitos en Flash CS3. Funciona exactamente o mesmo en Flash 8. Este tutorial é ActionScript 2 (ActionScript Aínda que non sexa obrigatorio).

Paso 1 - Instalar o compoñente do efecto

Baixo o efecto reflexo de auga aquí. Por favor, siga as instrucións de instalación e arrastra o compoñente do panel de compoñentes para a biblioteca do seu arquivo fla ..

Paso 2 - Crear Movieclip Pato

Importar a imaxe pato [Ctrl-R] ou "File" -> "Import" -> "Importar on Stage ...". Asegúrese de que o pato é unha imaxe PNG. Con fondo transparente.

Seleccione a imaxe deste e convertelo en un pulse F8 Movieclip [] ou co botón dereito sobre o MovieClip -> "Convert to Symbol ...". Deixa o movieclip o nome de "pato".

Paso 3 - Crear animación Movieclip

Crear un novo movieclip con [Ctrl-F8] ou Inserir -> "New Symbol ...". Nome este Movieclip animación ".

Arrastra o Movieclip pato da súa biblioteca para o primeiro cadro na liña do tempo. Agora pulsa no recadro 60 e crear un novo marco clave [preme F6] ou co botón dereito e "Insert Keyframe".

Prema no marco clave recén criada e selecciona o MovieClip pato na pantalla. Agora move esta Movieclip coa tecla do cursor a dereita (digamos 100px). Podes consultar a nova posición no taboleiro de información.

Voltar para o primeiro marco da liña do tempo. No taboleiro de propiedade Tween escolla: "Movemento". Se fai clic en algún lugar na liña do tempo agora, vostede ve que o pato Movieclip se está movendo de esquerda a dereita.

Paso 4 - Inserta Movieclip animación na timeline principal

Agora prema en "Scene 1" para voltar á timeline principal. Se o pato Movieclip aínda está alí, eliminar-lo.

Move o movieclip a animación da súa biblioteca para o primeiro marco da liña do tempo.

Define o nome de instancia do movieclip a "animation_mc" (pode escoller un diferente se quere. Asegúrese de que o nome da instancia é única). Sen un nome de instancia, o compoñente é capaz de detectar o MovieClip.

Paso 5 - Aplicar compoñente efecto

Crear unha nova capa, seleccione o primeiro recadro e arrastra o compoñente a partir da súa biblioteca para o movieclip animación. O compoñente pode axustar automaticamente.

Define o parámetro do compoñente dentro do panel inspector de compoñentes como na imaxe. Movieclips Todos con nomes de instancia neste cadro están listados na sección "target Movieclip" lista de selección. Desde que ten só un Movieclip, o compoñente asume, que pretende aplicar o efecto sobre o MovieClip "animation_mc".

Nota: Estes axustes non son aplicados a este exemplo dun compoñente de efecto. Se chamar o compoñente no outro movieclip (outro lugar dentro do fla. Ou nun novo proxecto) ten que configurar as opcións de novo.

Agora exportación (Ctrl prema [-ENTER] ou ...). Vai ver que a cabeza do pato é cortado de algunha maneira. Iso porque o compoñente ten exactamente o tamaño do movieclip Pato. Pero dende que a onda de reflexión ha aumentar o tamaño iso non vai caber máis nada.

Paso 6 - Axuste Movieclip animación

Para corrixir iso, vai introducir unha forma invisible no fondo do pato MovieClip, que o tamaño por riba do Movieclip un pouco.

Voltar para o movieclip pato cun dobre clic nel na súa biblioteca.

Crear unha nova capa de abaixo da capa de interpolación.

Seleccionar a ferramenta rectángulo e debuxar unha forma con o ancho do Pato. A altura debe ser un pixel pouco maior, entón o pato pixel (aproximadamente 10). Pode axudar a definir o icono esquema na liña do tempo, para ver só as dimensións da imaxe de pato.

Coa forma seleccionada, abra o panel de cores e establecer o alpha a 0.

Cando probar o filme agora, vai ver que o reflexo é aplicado sobre o pato burato.

Paso 6 - Engadir a imaxe de fondo

Crear unha nova capa embaixo da capa con animación ea compoñente. Importar unha imaxe corresponder. Agora podes mudar a posición do movieclip animación para facelo caber dentro co fondo.

Descargar

Prema aquí para baixar o arquivo fla deste tutorial. Nota: O fla. Inclúe a versión de proba do compoñente de efecto, que só funciona no IDE Flash (Flash 8, Flash CS3 e Adobe Flash CS4), pero non dentro do navegador.

Tamén pode descargar o auga Efecto reflexo aquí.