Cristalab

Efecto de estática en televisión con ActionScript 3

Por: Carloz.Yanez + 27.04.2008

Un efecto popular y vistoso es el de una televisión sin recepción o señal, el cual es muy fácil de crear empleando sólo código.

En este tip crearemos una clase en ActionScript 3 que nos generará este efecto.

Esta es la clase, explicada con comentarios dentro del código:

Código :


package Classes
{
   //Importamos los paquetes que necesitaremos
   
   import flash.display.*;
   import flash.utils.Timer;
   import flash.events.TimerEvent;
   
   //Nombramos la clase que será heredada de la Clase Sprite para poder utilizar el método addChild
   
   public class TvEffect extends Sprite
   {
      //Creamos las variables
      
      private var X:Number; //Almacenará la posición x de el efecto
      private var Y:Number; //Almacenará la posición y de el efecto
      
      private var bmd:BitmapData; //Contendrá los datos para crear el Bitmap, en este caso sus medidas
      private var seed:int; //Guardará el RandomSeed utilizado para el método Noise, que es el que utilizaremos para crear nuestro efecto tv
      private var bmp:Bitmap; //Nuestra instancia de Bitmap
      
      private var timer:Timer = new Timer(1); //Objeto Timer que hará cambiar el Noise para producir el efecto tv
      
      //Creamos la función que nos pedirá los datos de nuestro efecto, estos son: ancho, alto, posición x y posición y
      
      public function setEffect(w:Number, h:Number, xPos:Number, yPos:Number):void
      {
         X = xPos;
         Y = yPos;
         
         bmd = new BitmapData(w, h); //Con los datos obtenidos creamos nuestro BitmapData
      }
      
      /*Esta función se encarga del efecto, lo que hace es  aplicar el método Noise a el objeto BitmapData para generar pixeles aleatorios
      y guardarlos en la instancia de nuestro Bitmap, posicionarla y añadirla al escenario*/
      
      private function main(event:TimerEvent):void
      {
         seed = int(Math.random() * int.MAX_VALUE);
         
         bmd.noise(seed, 0, 0xFF, BitmapDataChannel.RED, true); //Es importante dejar este último valor en \"true\" para que los pixeles sean en escala de grises

         bmp = new Bitmap(bmd);
         bmp.x = X;
         bmp.y = Y;
         
         addChild(bmp);
      }
      
      //Esta funcion inicia el efecto
      
      public function init():void
      {
         timer.addEventListener(TimerEvent.TIMER, main);
         timer.start();
      }
   }
}


Para llamarla lo hacemos así:

Código :


import Classes.TvEffect;

var tve:TvEffect = new TvEffect();

tve.setEffect(ancho, alto, x, y);
tve.init();
      
addChild(tve);


Aqui está un ejemplo:

Etiquetas flash actionscript_3

Comentarios | Enviar un comentario
Muy buen tip, mmmm creo que lo voy a ocupar en un proyecto que hay en puerta miau
Por: flashreloco
funciona horrible,0 optimizacion, 0 convenciones en tu codigo.
al pasp de los segundos tilda el browser.
compruebenlo ustedes mismos.
Por: zequi-blog
Ommm, la verdad no funciona muy bien, el intento esta bien interesante.

Pero no es nada práctico, además hace que el navegador se ponga lento
Por: esutoraiki
Chicos hay formas y formas de decir que no esta bueno.
Carlos sinceramente es verdad que vuelve lokito al browser, es mas me esta costando escribir =P

Soy de los que les gusta mucho hacer cosas solo en AS pero a veces (sean ejemplos complejos o muy simples) es mucho mas conveniente mezclar AS con la libreria o la linea de tiempo =)

De todas maneras el ejemplo vale para demostrar que AS RULEZ =D
Hagan esto con JavaScript a ver si no se vuelven locos antes!!!
Por: raxiro
Muy buena programación pero lástima que no sea práctico.
Hay que investigar a ver si hay otra manera de hacerlo sin que el browser se aloque.
Por: Lunaty
Alparecer en este caso agregar una animacion puede resultar muy bien...
Pero es buen tip, sin duda a alguien le servira... Lastima que come procesador...
Thumbs up
Por: M@U
Carloz, el problema es que pones un delay de 1 milisegundo al Timer, lo que asesina invariablemente el procesador. Ponle 100 milisegundos y verás como cambia el ejemplo.
Por: Freddie

Freddie :

Carloz, el problema es que pones un delay de 1 milisegundo al Timer, lo que asesina invariablemente el procesador. Ponle 100 milisegundos y verás como cambia el ejemplo.


Precisamente fué lo que modifiqué ayer, también se puede realizar el efecto con un for y el método setPixel, pero me parece que se ve mucho mejor de esta manera.

Aquí está el SWF con el timer ajustado a 100 milisegundos (espero que un BOFH me haga favor de actualizar el tip).

Disculpen el ejemplo, lo tuve que probar en un otros ordenadores porque en el mío no se traba. Ownzed!
Por: Carloz.Yanez
..y eso que es AS3 (no ActionScript 1 ó 2) Shock
Por: [s_s]&[sos]-blog
Si, Freddie tiene razon!!
Por: quien yo?-blog
¿Para cuando el [b]AS4/b]? con potencia de C++ Juaz!! xD

Grax Carlos, pensé que AS3 no se colgaba Muy Feliz (con Pentium IV).
Por: [s_s]&[sos]-blog
... Aquí está el SWF con el timer ajustado a 100 milisegundos...


Carlos, intenta ponerle:

Código :

stage.scaleMode = StageScaleMode.NO_SCALE;


Lo vi en mi CoreDuo con la ventana maximinizada y se fue al 100%
Por: eldervaz
...(espero que un BOFH me haga favor de actualizar el tip).

Lo puse para ser descargado y que el tip fuese actualizado, de otra forma lo hubiese llamado con BBCode.
Por: Carloz-blog
noten el addChild(bmp); en el timer Aw Crap Aw Crap Aw CrapS Aw Crap Aw Crap Aw Crap
Por: EzeQL-blog
EzeQL ordenó este tip, sin embargo, para corregir el actual puedes tener en tu main:

Código :

private function main(event:TimerEvent):void
{
   seed = int(Math.random() * int.MAX_VALUE);         
   bmd.noise(seed, 0, 0xFF, BitmapDataChannel.RED, true);
}

y..

Código :

public function init():void
{      
   bmp = new Bitmap(bmd);
   bmp.x = X;
   bmp.y = Y;
   trace(bmp)
   addChild(bmp);
   timer.addEventListener(TimerEvent.TIMER, main);
   timer.start();
}

por otro lado, usa el timer en 50 donde a mi parecer logras el efecto

Código :

private var timer:Timer = new Timer(50);


Ahora, de usarlo como lo tienes, estás llenando el DisplayObjectContainer con más y más Bitmap, sólo basta con poner en tu main

Código :

trace(this.numChildren)

para q veas como vas agregando child mandando el procesador a mil

Buen aporte EzeQL
Por: eldervaz
Interesante efecto...

PD1: ¿No seria mejor un gif?
PD2: Mi procesador... ha muerto...
Por: Bleend

[s_s]&[sos]-blog :

..y eso que es AS3 (no ActionScript 1 ó 2) Shock
Aun en AS2 no se cuelga tan feo si lo sabes ejecutar...
Por: M@U
Pues yo hice un efecto similar con pura línea de tiempo y no atoré al browser jjeje, aunque si... NO MA !!! ESTA DE LOCOS EL CÓDIGO!!!

/em muere por aprender AS 3.0 bien T_T
Por: Stockman
muy buen ejemplo , gracias Carloz
Por: gonpru
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.