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

Efecto alpha en imagen

Autor: Carlos Carmona

Resultado

Vamos a ello. Abrimos una nueva película de flash y vamos a crear un nuevo clip de película, para ello, apretamos alt + F8, le damos un nombre y nos aseguramos que esté seleccionada la opción "clip de película".

Ahora tenemos que crear el objeto al que le aplicaremos el efecto, en nuestro caso es una imagen hecha en photoshop, (nuestro logo), así que lo importamos, archivo>importar lo seleccionamos y ya lo tenemos en flash. Ahora tenemos que convertirlo en clip de película, lo seleccionamos y apretamos F8, le damos un nombre y que esté seleccionada la opción de clip de película.

Ok, vamos ya a meter el código, click derecho del ratón sobre el clip de película, y metemos este código:

onClipEvent (load) {
        var visible = 1;
        var cant = 100;
}

onClipEvent (enterFrame) {
        if (visible == 1) {
                _alpha = cant;
                cant -= 1;
                if (cant == -1) {
                        visible = 0;
                }
        } else {
                _alpha = cant;
                cant += 1;
                if (cant == 101) {
                        visible = 1;
                }
        }
}

Explicación del código (Para los que quieran aprender).

El código:

onClipEvent (load) {
var visible = 1;
var cant = 100;
}

Viene a decir: "En este clip (onClipEvent), cuando cargue la película (load) creamos dos variables, visible inicializada a 1 y cant inicializada a 100". La variable visible es de caracter booleano, es decir, sus valores solo pueden ser dos, verdadero o falso. En flash, los booleanos tienen por defecto el valor true o false, sin embargo, un servidor esta acostumbrado al booleano del lenguaje de programación "C", donde los booleanos son 1 o 0, pero vamos, como si queremos que el valor sea a o b, como lo controlaremos nosotros no hy diferencia. Y cant, será el valor de _alpha, que es la propiedad que hace referencia a la opacidad del objeto. Continuemos...

El código:

onClipEvent (enterFrame) {
if (visible == 1) {
_alpha = cant;
cant -= 1;
if (cant == -1) {
visible = 0;
}
} else {
_alpha = cant;
cant += 1;
if (cant == 101) {
visible = 1;
}
}
}

Dice: "En este clip (onClipEvent), cada vez que se lea un nuevo fotograma [12 fotogramas por segundo si no lo cambiamos] (enterFrame), si la variable visible vale 1 (if (visible == 1)) entonces, la transparencia u opacidad del objeto valdrá lo que contenga la variable cant [cuando _alpha valga 100 el objeto no será nada transparente, cuando valga 0 será invisible, en los puntos intermedios irá disminuyendo la visibilidad] (_alpha = cant) y después de hacer esto, a lo que habia dentro de cant, le resto 1 (cant -=1). Ahora hacemos una comprobación, vamos a ver si el objeto es ya invisible, en tal caso, invertiriamos el efecto para ir dandole cada vez más opacidad; Cuando cant valga -1, no volverá a ejecutarse ese trozo de código, por que, en la comprobación (if (cant == -1)), como se cumplirá, cambiaremos el valor de la variable visible a 0, (visible = 0), y como el código anterior solo se ejecutaba si la variable visible era igual a 1, no volvera, de momento, a ejecutarlo.

Luego continua, (else), que quiere decir, "si no", [si visible no es igual a 1], voy subiendo la opacidad, asignando a _alpha el contenido de cant (_alpha = cant) e incrementando cant en 1 a cada pasada, (cant += 1). Volvemos a hacer la misma comprobación que antes, solo que a la inversa; si la variable cant ha superado los 100, (if (cant == 101)), ponemos la variable visible a 1, y así volvemos a ejecutar nuevamente el trozo de código que se encarga de hacer el clip transparente... y así una y otra vez...

Nota

Tal y como está el código, la propiedad _alpha irá incrementandose y decrementandose de 1 en 1. Tal vez vaya muy lento, si quereis que vaya más rápido, en las líneas cant += 1 y cant -= 1 cambiad el 1 por un nº mayor.

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

Un saludo.