Transición con eco entre clips

Vamos a hacer una transición entre clips de película, ya sean imagenes o texto, utilizando duplicateMovieClip y setProperty.

Para empezar, nos abrimos una nueva película de flash y nos creamos 2 capas, a una la llamamos imagen y a la otra AS (ActionScript). Nos situamos en la capa imagen, e importamos la imagen en cuestión, archivo>importar. La seleccionamos en el escritorio y con F8 la convertimos en clip de película. Una vez convertida en clip, lo seleccionamos si no lo está ya y le damos el nombre de instancia “imagen”, sin comillas:

Tutorial

Ahora hacemos doble click sobre la imagen para entrar en el modo edición. Vamos a crear el movimiento de entrada, parada y salida de la imagen con interpolaciones de movimiento. No voy a explicar como se hace una interpolación de movimiento ya que cuento con que el lector tenga un nivel básico, sino es así, aquí encontrarán un tutorial al caso.

El resultado de la interpolación sería, dependiendo de la velocidad que queramos, algo así:

Tutorial

Volvemos a la escena anterior:

Tutorial

En la capa AS, vamos a usar 3 fotogramas, así que necesitamos que la capa imagen dure también 3 fotogramas, asi que nos ponemos sobre el fotograma nº3 de la capa imagen y presionamos F5. Ahora vamos a meter el código en cuestión, vamos a crear 3 fotogramas claves vacios en los 3 primeros fotogramas de la capa AS. Para ello, nos ponemos encima de cada fotograma, click derecho del ratón>Insertar fotograma clave vacio, así 3 veces. En el primer fotograma clave vacio, hacemos click derecho del ratón y nos vamos a acciones, y ponemos:

var i = 1
var j = 6

Con esto simplemente nos declaramos 2 variables, una variable “i” inicializada a 1, y otra “j” inicializada a 6. Del mismo modo que antes, vamos a meter el código en el 2º fotograma clave vacio:

if ( Number (i) < Number ( Number (j)+1)) {
duplicateMovieClip ( “imagen” , “imagen” add i, i);
setProperty ( “imagen” add i, _alpha , 50-(i*(50/j)));
i = Number (i) + 1;
}

Aquí es donde está el “meollo” del asunto. Vamos a ver que es lo que hace este código. Voy a intentar explicar cada una de las funciones que entran en juego, de modo que el lector, comprendiendolas, pueda usarlas por iniciativa propia en sus creaciones:

Función Number (Argumento). Esta es una de las muchas funciones predefinidas que trae ActionScript. Esta función sirve para convertir el argumento en un número. Los valores que puede devolver son:

  • Si el argumento es un número, lo devuelve tal cual.
  • Si el argumento es un valor booleano, devuelve 1 para true y 0 para false.
  • Si el argumento es una cadena, lo convierte en número con formato exponencial. Por ejemplo: 2,584e2
  • Si el argumento no está definido, devuelve 0.

Función duplicateMovieClip (destino, nuevo, profundidad). Con esta acción se duplica un clip. Donde los valores son:

  • Destino: La ruta de destino y el nombre del clip que se va a duplicar.
  • Nuevo: El nombre del clip duplicado que se va a crear. (Cada instancia de un mismo clip debe tener nombre de instancia único).
  • Profundidad: Es el orden de apilamiento de las líneas de tiempo que se encuentran en el paquete, o si es una sola película, el orden en el que se van a apilar los clips. Hay que aplicar al duplicado una profundidad diferente a la del clip original, para evitar que sustituya al original.

Hay que tener en cuenta algunas cosas sobre esta función. Los clips duplicados siempre empiezan desde el fotograma 1, aunque el original comience desde otro fotograma. Las variables del clip original no se copian en el duplicado. Si se elimina el clip original el duplicado también se elimina. Para eliminar un duplicado, se utiliza con la acción removeMovieClip.

Función setProperty (Destino, Propiedad, Expresión) . Esta función nos sirve para modificar las propiedades de un clip de película.

  • Destino: La ruta de destino y el nombre del clip al que se va a modificar la propiedad.
  • Propiedad: La propiedad en cuestión que queremos modificar.
  • Expresión: El valor de la propiedad antes especificada.

Según lo dicho, vamos a ver que hace el código:

if (Number (i) < Number (Number (j)+1)) { Esto es, en palabras textuales, “Si el valor de i, (1 según especificamos en el fotograma anterior), es menor que el valor que dé el valor de j más 1, (j vale 6, más 1… mmmm… 7, luego si, 1 es menor que 7, así que como se cumple, entramos y seguimos ejecutando el código).”

duplicateMovieClip (“imagen”, “imagen” add i, i); Duplicamos el clip imagen, dandole el nuevo nombre “imagen1” (add concatena, es decir, convierte en una línea de texto, los valor que tenga, imagen y 1 que es el valor actual de i), y lo crea en la profundidad o nivel 1, (que es el valor actual de i).

setProperty (“imagen” add i, _alpha, 50-(i*(50/j))); Al clip duplicado imagen1, (“imagen” add i), le vamos a modificar la transparencia (la transparencia es la propiedad _alpha), dandole el velor del resultado de la operación especificada, os dejo a vosotros sacar el resultado de la operación, supongo que todos sabemos multiplicar, restar y dividir… 😛

i = Number (i) + 1; Con esto, simplemente, le damos a la variable i, el valor que ya tenía (Number (i)), más 1, es decir, cuando vuelva al comienzo del código, i valdra 2, luego 3… hasta llegar a 6, cuando i valga 6, no se cumplira la condición del if, ya que 6 no es menor que 6, con lo que no se duplicará más veces el clip. Por lo tanto, el valor que hayamos dado a j en el fotograma 1 será el número de ecos o duplicaciones del clip original.

Para terminar, en el fotograma clave vacío 3, ponemos este código:

gotoAndPlay (2);

Con esto, sencillamente pasamos del fotograma 3 al 2, y así continuamente, ya que si la película volviera a leer el fotograma 1, volvería a poner continuamente la variable i a 1, con lo que se duplicaría el clip infinitamente.

Decir, que este efecto se puede hacer con cualquier clip de película, ya sea una imagen, o texto, donde queda un efecto muy logrado.

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

Un saludo.

Deja un comentario