Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...

\n"; } } } lecturas();

          


Efecto Niebla

      

Autor: Carlos Carmona

Resultado

No tiene instalado el plugin de Flash necesario, haga click aquí para descargarlo gratuitamente.

Crear este convincente efecto niebla es más que simple, y a malas penas tiene código. Para empezar, vamos a necesitar dos imágenes de efecto nube en blanco y negro. Estas imágenes se crean facilmente, por ejemplo en Photoshop, sería: Filtro>Interpretar>Nubes de diferencia, y listo, pero para que sea más rápido, podeis descargaros estas:

Descargar imágenes.

Abrimos una nueva película de flash y vamos a crear 3 capas, siendo una de ellas una mascara y las otras dos estando sometidas a la capa. Una cosa así:

Tutorial

Para convertir una capa en mascara, solo hay que hacer click derecho sobre ella y darle a mascara.

Bien, ahora nos vamos al menu archivo y le damos a importar a biblioteca, e importamos las 2 imágenes. Antes de nada, vamos a poner el fondo de nuestra película de color negro:

Tutorial

Seleccionamos la capa "Nubes 1" y apretamos F11, se nos abrirá la biblioteca; agarramos la imagen nubes1 y la pasamos a nuestra película (coger y arrastrar). Seleccionamos la imagen y apretamos F8 para convertir en clip de película, le damos un nombre en la ventana que se nos abrirá y nos aseguramos que esté seleccionada la opción clip de película. Una vez convertido, vamos a darle un nivel de transparencia, para ello, seleccionamos el clip y abajo, en las propiedades, en color seleccionamos la opción "alfa" y le damos un valor de "68%":

Tutorial

Y para terminar con esta capa, vamos a darle el código para que rote, click derecho del ratón sobre el clip y nos vamos a acciones, e introducimos este código:

onClipEvent (enterFrame) {
        this._rotation++
}

//Este código, lo único que hace es que a cada fotograma nuevo que lee flash player
//rota la imagen 1 pixel más.

Con esto hemos terminado con esta capa, ahora hay que hacer exactamente lo mismo en la capa Nubes 2, añadiendo de la biblioteca la imagen nubes2, convirtiendola en clip, igual que antes, con las únicas diferencias de que el valor de alfa que le daremos en las propiedades será de "23%" y el código que meteremos hará que gire, pero en sentido opuesto, esto es:

onClipEvent (enterFrame) {
        this._rotation--
}

Ya por último, nos queda crear la máscara, realmente no haría falta, funcionaría exactamente igual sin máscara, pero con la máscara, si se maximiza el flash player no se verán los trozos sobrantes de las imágenes. Seleccionamos la capa Mascara, y dibujamos un rectángulo que sobresalga un poco de los límites que le hayamos dado a la película:

Tutorial

Los dos clips de nuves tienen que quedar uno exactamente sobre otro, pero no centrados sobre los límites de nuestra película, ya que las imágenes girarán sobre su centro, de modo que quedando algo ladeadas las imágenes, el resultado es más convincente, algo así:

Tutorial

NOTA:

Si las imágenes, en puesto de ser en blanco y negro, son en blanco y azul, un azul claro, tipo turquesa, y el fondo de la película lo ponemos del mismo color, (turquesa), el efecto final, en vez de niebla será agua, como un lago, con el agua moviéndose, tambien es muy interesante. Podría quedar algo así:

No tiene instalado el plugin de Flash necesario, haga click aquí para descargarlo gratuitamente.

Añadiéndole además un sonido de brisa marina y el canto de las gabiotas, quedaría muy bien.

Si lo deseas, puedes descargarte el archivo del ejemplo aquí.

Un saludo.

Scour Design ™ Todos los Derechos Reservados © Carlos Carmona Xhtml 1.1 Strict Válido!CSS Nivel 2 Válido! Nivel Triple-A de Conformidad con las Directrices de Accesibilidad Web (WAI)