LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Efecto saturacion de luz usando ColorTransform

| 2 Comments

Hola a todos, ante que nada 2 cositas importantes: Primero disculpas por no estar colocando contenidos mas periódicamente ya que estoy gracias a Dios con mucho trabajo. Segundo este ejemplo esta hecho con flash 9 pero en action scrip 2.0 así que para abrir el archivo fla deben tener flash 9 o sino copien el código y peguelon en su proyecto en flash 8.

Trabajando en un proyecto para un cliente uno de los requerimientos del mismo hera poder crear unas películas dinámicamente pero cada película con diferente color. Para ello se me ocurrió usar la clase Color, pero O!!! sorpresa me entero que ya es una clase defazada para flash 8!!!! "que desactualizado estoy :(" . Defazada significa que fue reemplazada por otra clase nueva, pero esto no quita en la mayoría de los casos que nuestro AS 2.0 la pueda interpretar!. Así que mirando la nueva clase que se llama ColorTransform me encuentro que con la misma podemos manipular el offset de cada uno de los colores RGB. A consecuencia de esto me trajo a la memoria un prototype viejo en AS 1.0 que daba el efecto de quemar una imagen o fotografía, consiguiendo de este modo un efecto muy lindo a la hora de mostrar una foto.

Así que manos a la obra revivi dicho efecto renombrandolo como "Luz" usando esta nueva clase de AS 2.0.
Código mas excusas pur que :)

Actionscript:
  1. //definimos que es un proto y lo asociamos con los elementos que sean películas
  2. //le pasamos 2 parametros, dirección y velocidad del efecto
  3. MovieClip.prototype.luz = function(direccion:String, Velocidad:Number) {
  4. //La dirección es realidad sera afectada por los valores -255 a 255 pasando por 0 que es la foto en su estado normal
  5. var dir:Number = 0;
  6. //aquí recuperamos la velocidad
  7. var velocidad:Number = Velocidad;
  8. //un contador para detener posteriormente los procesos
  9. var contador:Number = 0;
  10. //evaluamos la dirección y sobreescribimos las variables con los únicos 2 valores que necesitamos
  11. if (direccion == "in") {
  12. dir = 255;
  13. contador = 0;
  14. } else {
  15. -255;
  16. contador = -255;
  17. }
  18. //Importamos las clases necesarias pa que funke!
  19. //
  20. import flash.geom.Transform;
  21. import flash.geom.ColorTransform;
  22. //creamos una función que llamaremos periódicamente para aplicar el efecto, como parametro pasamos el
  23. //nombre de instancia de la peli afectada
  24. function saturar(peli:MovieClip) {
  25. //creamos un nuevo objeto transform, y lo asociamos al mc (peli)
  26. var trans:Transform = new Transform(peli);
  27. //pasamos los valores que se deben aplicar a nuestra peli
  28. var luzColorTransform:ColorTransform = new ColorTransform(1, 1, 1, 1, dir, dir, dir, dir);
  29. //y los hacemos afectiva dicha coloración
  30. trans.colorTransform = luzColorTransform;
  31. //acá evaluamos pa que lado vamos
  32. if (direccion == "in") {
  33. dir--;
  34. } else {
  35. dir++;
  36. }
  37. if (dir == contador) {
  38. //si ya completamos el proceso detenemos la recurrencia a nuestra función
  39. clearInterval(intervalID);
  40. }
  41. }
  42. //
  43. //creamos una llamada periódica a una función pasando (nombre de la función, velocidad en ms, y la instancia del mc)
  44. var intervalID:Number = setInterval(saturar, velocidad, this);
  45. };

Como verán es muy simple, lo único que deben hacer es copiar este código y pegaro en el primer frame de su root. Como usa un setinterval no es necesario para la velocidad incrementar el frame rate.
Hasta aquí muy lindo!!! Pero como hago para aplicarlo a mis peli???????

Actionscript:
  1. //foto_mc[nombre de instancia].luz[nombre del proto]("in"[dirección], 1[velocidad])
  2. foto_mc.luz("in",1);

Para que sea el efecto tipo out o de salida en el parametro "in" coloca "out" o simplemente nada "", la velocidad es un numero cualquiera, así que prueba pasarle varios para ver cual es el mas adecuado para vos.

Actionscript:
  1. //foto_mc[nombre de instancia].luz[nombre del proto]("in"[dirección], 1[velocidad])
  2. foto_mc.luz("",1);

Puedes llamar a este proto la veces que quieras y cuando quieras con solo poner nombreInstancia.luz("in",1)

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, amplios conocimientos en CEO. Desarrollador de sitios multi plataformas, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Profesor de Diseño y Diseño Web en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

2 Comments

  1. El Ejemplo que colocas esta muy bien, de hecho ya lo trate de aplicar a un proyecto que estoy haciendo. Y me encontre que haciendo el ejemplo local funciona sin problemas y al subirlo a internet no hace lo que se supone tendria que hacer.

  2. se el mismo truco utilzando solo el el color avanzado sin utilizar tanto codigo

Deja un comentario

Required fields are marked *.

*