Una de las novedades que nos trajo FLASH 8 son los filtros muy similares a Adobe Photoshop como desenfoque, bisel, iluminación y sombreado, entre otros.
Para poder accesar a estos filtros de FLASH hay que importar el paquete flash.filters.* para todos ellos, pero sin embargo podemos llamar los necesarios:

import flash.filters*

Las ventajas ya son más que conocidas, el simple hecho de poder realizar efectos que antes ameritaban tener imágenes adicionales para dar un toque más orientado al diseño.

Una de las cosas que podríamos mencionar que complica las cosas es que tenemos que tener el player 8, pero como ya saben el mismo flash crea código para obligar al visitante a tener una versión mayor.

Inicialmente hice este artículo para entender a grandes rasgos las bondades de los filtros con ActionScript, porque el hecho de usar código para generar los efectos, brinda la posibilidad de hacer animaciones.

Comprender esta forma de trabajar es simple, pasaremos a explicar parte por parte sólo el primer efecto:

Importamos el paquete a usar

import flash.filters* 

Le damos los valores iniciales:

var distancia:Number = 15;//Distancia de la sombra
var angulo:Number = 45;// angulo de la sombra
var color = 0x000000;// color de la sombra
var alpha:Number = 0.9;//ALPHA pero valor maximo 1
var blurX:Number = 16;//blur del eje X maximo 255
var blurY:Number = 16;//igual q blurX
var fuerza:Number = 1;//la fuerza de impresion de la sombra MAX 255
var calidad:Number = 3;//calidad de la sombra, valores validos: 1-2-3
var sombra_interior:Boolean = false;//obvio
var fondo_transparente:Boolean = false;//obvio
var ocultar_mc:Boolean = false; //obvio

Creamos nuestro constructor de la clase importada o deseada:

var t:DropShadowFilter = new DropShadowFilter(
	distancia,
	angulo,
	color,
	alpha,
	blurX,
	blurY,
	fuerza,
	calidad,
	sombra_interior,
	fondo_transparente,
	ocultar_mc
	);

Ahora, insertamos en forma de ARREGLO a nuestra instancia del filtro usado:

var array1:Array = new Array();
array1.push(t);
mc.filters = array1;

CONTROL + ENTER 

Realmente, no es muy complicado entendiendo bien el uso de cada parámetro, aquí les dejo el código de varios filtros al mismo tiempo:

import flash.filters.*;
      //----------------------------------
      var distancia:Number = 15;//Distancia de la sombra
      var angulo:Number = 45;// angulo de la sombra
      var color = 0x000000;// color de la sombra
      var alpha:Number = 0.9;//ALPHA pero valor maximo 1
      var blurX:Number = 16;//blur del eje X maximo 255
      var blurY:Number = 16;//igual q blurX
      var fuerza:Number = 1;//la fuerza de impresion de la sombra MAX 255
      var calidad:Number = 3;//calidad de la sombra, valores validos: 1-2-3
      var sombra_interior:Boolean = false;//obvio
      var fondo_transparente:Boolean = false;//obvio
      var ocultar_mc:Boolean = false; //obvio
      //sombra------------------------------------------------------------
	var t = new DropShadowFilter(distancia
			angulo,
			color,
			alpha,
			blurX,
			blurY,
			fuerza,
			calidad,
			sombra_interior,
			fondo_transparente,
			ocultar_mc);
		var array1:Array = new Array();
		array1.push(t);
		mc.filters = array1;
	//relieve------------------------------------------------------------
	color1 = 0xFFFF00;
	color2 = 0x0000FF;
	alpha1 = 0.8;alpha2 = 0.8;
	bisel = "inner";//Tipo de bisel. Los valores válidos son    "inner", "outer" y "full"
	var r = new BevelFilter(
		distancia,
		angulo,
		color1,
		alpha1,
		color2,
		alpha1,
		blurX,
		blurY,
		fuerza,
		calidad,
		bisel,
	ocultar_mc);
	var array2:Array = new Array();
	array2.push(r);
	mc2.filters = array2;
	//blur------------------------------------------------------------
	var u = new BlurFilter(blurX, blurY-16, calidad);
	ar array3:Array = new Array();
	array3.push(u);
	mc3.filters = array3;
	//iluminacion------------------------------------------------------------
	inner_p=false
	var p = new    GlowFilter(
		color,
		alpha,
		blurX,
		blurY,
		fuerza,
		calidad,
		inner_p,
	ocultar_mc);
	var array4:Array = new Array();
	array4.push(p);
	mc4.filters = array4;
	//resplandor1------------------------------------------------------------
	var colors:Array = [0xff0000, 0x000000, 0xff00ff];
	var alphas:Array = [0.5, 0, 0.5];
	var ratios:Array = [0, 128, 255];
	angulo_luz=45;
	distancia_z=5;
	blurX_z=5;
	blury_z=5;
	fuerza_z=5;
	calidad_z=2;
	var z = new GradientBevelFilter(distancia_z,
		angulo_luz,
		colors,
		alphas,
		ratios,
		blurX_z,
		blurY_z,
		fuerza_z,
		calidad_z,
		bisel,
	ocultar_mc);
	var array5:Array = new Array();
	array5.push(z);
	mc5.filters = array5;
	//resplandor2
	var colors:Array = [0xFFFFFF, 0xFF0000, 0xFFFF00, 0x00CCFF];
	var alphas:Array = [0, 1, 1, 1];
    var ratios:Array = [0, 63, 126, 255];
	var n = new GradientGlowFilter(0,
		45,
		colors,
		alphas,
		ratios,
		55,
		55,
		2.5,
		2,"outer",
	ocultar_mc);
	var array6:Array = new Array();
	array6.push(n);
	mc6.filters = array6;

Espero les sirva, aquí les dejo el ejemplo. No se olviden de dejar sus comentarios para conocer sus impresiones del artículo.

Este artículo fue publicado originalmente en  eldervaz.com por elder h. vásquez rettis.

No es óptimo poner el preload en el swf externo, así que aquí les dejo un preload reutilizable para cualquier momento. La idea la surge a partir de leer tutorial de Freddie® así que recomiendo darle un vistazo para tener las cosas claras desde un inicio.

var  vacio: MovieClip  = this . createEmptyMovieClip ("vacio", 1);
vacio. _x  = 80;
var  loop: MovieClip  = this . createEmptyMovieClip ("loop", 0);
var  vacio: MovieClip ;
linea. _xscale  = 0;
reloj. _alpha =0 

//--------------------------------> mi funcion precarga
function  cargador(foto) {
 vacio. loadMovie (foto);
 reloj. _alpha =100
 loop. onEnterFrame  = function () {
  total = vacio. getBytesTotal ();
  cargados = vacio. getBytesLoaded ();
  t = Math . floor ((cargados*100)/total);
  campo. text  = t;
  linea. _xscale  = t;
  reloj. gotoAndStop (t);
   if (t>=100) {
     delete  loop. onEnterFrame ;
     campo. text  = "";
     linea. _xscale  = 0;
     reloj. _alpha =0;
   }
  };
 } 

//---------------------------------> botones que llaman la función
b1. onPress  = function () {
    cargador("foto1.jpg");
};
b2. onPress  = function () {
    cargador("foto2.jpg");
};
b3. onPress  = function () {
    cargador("foto3.jpg");
};

Bien, ahora les explicare un poco, si leyeron el tutorial de Freddie® verán que es CASI similar, los cambios son sencillo, sólo en vez de usar _root uso un MC (movieclip) para cargar dentro los jpg o swf externos que queramos. Cómo así? bueno con una función llamada cargador, que recibe de parámetro el nombre de lo que vamos a cargar.

Además, aquí estoy utlizando onEnterFrame y un if para detener el onEnterFrame.

Después lo que debemos hacer, es llamar desde nuestro botón a nuestra función y pasarle el nombre del archivo que deseamos precargar.

b1. onPress  = function () {
    cargador( "foto1.jpg" );
};

Eso es todo, en este caso use _xscale para hacer mi barrita preload, o usar el reloj para una animación mas personalizada.

Espero les sirva, aquí les dejo el zip y para ver el ejemplo aqui .

Ha pasado un año desde que publiqué el primer tutorial de FLV . A partir de eso he recibo varios mails preguntándome cosas al respecto, por lo que decidí hacer una ampliación del tema.

Es importante que para leer este nuevo tutorial, hayas pasado por el primer tutorial introductorio , así que manos al flash. Es preciso recordarte que el código que a continuación veremos sólo es aplicable a Macromedia Flash 2004 , y NO SE PUEDE USAR en versiones anteriores, no insistir.

var conexion:NetConnection = new NetConnection();
		conexion.connect(null);
		var stream:NetStream = new NetStream(conexion);
		mi_video.attachVideo(stream);		stream.play("tu.flv");		//aseguramos 10 seg de reproduccion		stream.setBufferTime(10);		onEnterFrame = function () {		bu_cargado.text = stream.bufferLength;		bu_total.text = Math.round(stream.bytesTotal/1024)/1000+" mb";
	};
//botones_----------------------------------- 
        seg.restrict=1-9// solo aceptamos numeros         btn1.onPress = function() {         stream.play("tu.flv");         };         btn1_1.onPress = function() {         stream.close();         };         btn2.onPress = function() {         stream.pause();         //obvio, para hacer pausa, ojo q es lo mismo para avanzar         }; 
        btn3.onPress = function() {         stream.seek(0);         // va al inicio (cero segundos)         };         btn4.onPress = function() {         stream.seek(seg.text);         // va al segundo q nosotros escribamos         };         //status         stream.onStatus = function(infoObject:Object) {         if (infoObject.code == "NetStream.Play.Stop") {         trace("acabo");         }         if (infoObject.code == "NetStream.Play.StreamNotFound") {         trace("encontro error");         }         }; 

Aquí lo único nuevo son las líneas de status, que nos permitirá tener un control dependiendo de lo que suceda con nuestro video FLV. Los siguientes eventos, envían una notificación que informan, sí ocurren ciertas actividades de NetStream (esto también está en la ayuda de flash).

En español esto sería así:

Cuando el video acabo el estado del video será: NetStream.Play.Stop y en este caso estamos haciendo un trace con un mensaje, pero quizás lo optimo sería mandarlo a un frame específico o reiniciar el video. Del mismo modo NetStream.Play.StreamNotFound nos indica que existió algún problema con el video y devuelve un mensaje de error.

Elegir varios videos

Ahora hagamos algo mejor, usando nuestro tutorial de combobox haremos un visor de varios videos, lo único es agregar estas líneas al final de nuestro código y un componente combobox al archivo: .fla.

mi_combo.addItem("video_1", 0); 

        mi_combo.addItem("video_2", 1); 
        mi_combo.addItem("video_3", 2); 
        alSeleccionar = new Object(); 
        alSeleccionar.change = function(evento) { 
        trace("Has seleccionado "+evento.target.value); 

        switch (evento.target.value) { 
        case 0 :stream.play("tu.flv"); 
        break; 
        case 1 :stream.play("yo.flv"); 
        break; 

        case 2 :stream.play("el.flv"); 
        break; 
        } 
        };
        //Listeners para cuando seleccionamos alguna opcion 
        mi_combo.addEventListener("change", alSeleccionar); 

Prácticamente lo que hacemos es agregar a nuestro combobox los nombres que aparecerán en nuestro componente y luego llamarlo con un Listener.

Pueden bajarse el FLA aquí y ver el ejemplo .

Cuando planificamos una web, siempre nos preguntamos si es conveniente colocar video dentro de los contenidos. Actualmente tenemos muchas formas de incluir estos contenidos, destacando la utilización de Flash por su facilidad para utilizar tecnología streaming. Antes de continuar, explicaremos a grosso modo algunos conceptos básicos:

Streaming:

El streaming nos permite escuchar y visualizar los archivos de audio y/o video mientras se van descargando en nuestros ordenadores, evitando así, la larga espera que se requiere para obtener un archivo completo.

El streaming funciona de una manera muy simple: nuestro ordenador al detectar un archivo con esta tecnología, comienza a descargarlo y va creando un buffer donde comienza a guardar la información, una vez que este buffer contenga una pequeña parte de los datos empezará a reproducir el audio o video mientras continúa el resto de la descarga. El Real Player y el Windows Media Player se han popularizado por el uso de esta tecnología, aunque para incluir contenidos en nuestras páginas web de cualquiera de estos players, necesitamos que el navegador tenga instalados los plug-ins.

Video en Flash vs otros reproductores con streaming:

En más de una ocasión hemos tenido la oportunidad de ver video en web, y en muchas de estas, lo hicimos utilizando algún programa de streaming. Si bien es funcional si tenemos el plug-in instalado, no sucede lo mismo cuando nuestro usuario no lo tiene y vamos a darle la tarea adicional de bajarlo e instalarlo para poder apreciar el video, acto que puede demorar unos minutos sagrados en Internet.

Con el caso de los videos que se muestran gracias a Flash también necesitamos que el usuario tenga el plugin del Flash Player. Pero la gran ventaja es que el flash player plugin se encuentra disponible en el 98% de computadoras que acceden a Internet pues viene preinstalado en la mayoría de navegadores

Formatos permitidos con Macromedia Flash

Con Macromedia Flash a partir de la versión MX 2004 podemos importar un video de diferentes formatos:

Si tienes instalado QuickTime 4 o posterior (Windows y Macintosh), pueden importarse los siguientes formatos de archivo de vídeo incorporado:

Si tienes instalado DirectX 7 o posterior (sólo en Windows), pueden importarse los siguientes formatos de archivo de vídeo incorporado

Formato FLV

Así como podemos importar video en Macromedia Flash, también podemos exportar un video ya introducido en nuestra librería, guardándolo con la extensión FLV que representa las siglas de Flash Video, formato al que en la versión de Flash MX sólo se tenía acceso con Flash Comunication Server.

Los FLV son archivos de video comprimidos con el códec de video Sorenson Spark que nos
garantiza su perfecto funcionamiento.

Sorenson Spark es un códec de vídeo en movimiento, incluido en Flash y que permite añadir contenido de vídeo incorporado a Flash. Spark es un codificador/decodificador de vídeo de alta calidad que disminuye enormemente el ancho de banda necesario para publicar imágenes en Flash y al mismo tiempo, aumenta la calidad de vídeo. Con la inclusión de Spark, Flash da un importante paso hacia adelante en materia de capacidad de vídeo. En Flash 5 o anteriores sólo se podía simular vídeo mediante imágenes secuenciales de mapa de bits.

Importando video en Flash

1. Abrimos Macromedia Flash MX 2004
2. Importamos con <CTRL> + R y buscamos nuestro video.
3. Nos aparece la ventana del asistente con dos opciones:

• Importar todo el video
• Editar primero el video, que nos permite cortar y/o hacer pequeños clip de nuestro video en cuestión, y muy fácil de aplicar y lo veremos en el anexo 1.

1. Suponiendo q nuestro video ya este editado, le damos a la primera opción (importar todo el video).
2. Nos aparece Perfil de compresión, para nuestro ejemplo escogemos 512, le damos al botón EDICIÓN. Las opciones para personalizar el ancho de banda van de 0 Kbps a 750 Kbps, y especifican la velocidad aproximada de descarga del vídeo, en kilobits por segundo. La configuración de calidad de vídeo, que oscila entre 0 y 100, especifica el nivel de compresión de todos los fotogramas. También es posible especificar una velocidad de fotogramas clave. La velocidad de descarga puede variar para lograr un nivel de compresión uniforme. Como verán, podemos jugar con el ancho de banda y la calidad, acto que nos permite manejar el peso de nuestro FLV. Pero en este caso, no moveremos nada, seleccionando el botón atrás.
3. Ahora veamos Configuración Avanzada, y vamos al botón EDICIÓN. Como todo en Flash MX 2004 es importante, obviaremos algunas cosas para centrarnos en la parte que tiene relevancia aquí: utilizaremos donde dice ESCALA para modificar el tamaño en que se apreciará nuestro video. Mi recomendación exagerando un poco es poner 300px o en todo caso seguir los lineamientos de acuerdo al diseño que ya se tiene planificado. Tenemos una vista previa que nos ayuda en todo momento. Pulsamos el botón siguiente.
4. Ponemos nombre a nuestra configuración con una descripción para recordarlo en otro momento. Botón Siguiente.
5. Y señores, el esperado FINALIZAR.

Nos saldrá un mensaje diciendo que necesitamos más fotogramas para nuestro video, seleccionando que SI. Apreciaremos que tenemos nuestro video en la línea de tiempo y en la librería apareció un nuevo elemento con icono de cámara de video. Ese es nuestro VIDEO INCORPORADO, que aun no es FLV, detalle que cambiaremos en el siguiente paso.

1. Abrimos nuestra librería o biblioteca y le damos clic derecho a nuestro video incorporado, vamos a propiedades y escogemos EXPORTAR, le damos la RUTA donde guardar nuestro FLV y listo.

Bien, tenemos nuestro FLV y ahora tenemos que reproducirlo, habiendo dos formas básicas de hacerlo: utilizando el componente MediaPlayBack o a través de ActionScript puro.

Con componente

1. Abrimos nuestro Flash MX 2004 y pulsamos <CTRL> + F7
2. Se verá la ventana de Componetes, seleccionando el (+) de MEDIA COMPONENTES y arrastramos al escenario o stage el componente MEDIAPLAYBACK.
3. Teniendo seleccionado el componente pulsamos <ALT> + F7
4. Se verá la ventana del Inspector de Componentes, teniendo la pestaña Parámetros seleccionada podemos escoger entre FLV o MP3, le damos FLV
5. En URL colocamos la dirección de nuestro archivo FLV (a Flash MX 2004 le falto una opción para examinar). Si esta en el mismo nivel de nuestro SWF solo escribimos: video.flv y si está en una carpeta le ponemos: mi_carpeta/video.flv

Y ahora corre tu Flash para verlo funcionar.

Con ActionScript

Antes de empezar, prepararemos todo en el flash para cargar el FLV externo:

1. Abrimos nuestro Macromedia Flash 2004 y apretamos <CTRL> + L, para abrir la librería o biblioteca
2. Y en la pestaña superior derecha de la ventana le damos a NUEVO VIDEO
3. Vemos que en la librería apareció un objeto nuevo con nombre por defecto "Video Incorporado"
4. Arrastramos este objeto a nuestro escenario y le colocamos nombre de instancia "mi_video"

Para esta forma de cargar un video FLV usaremos el siguiente código:

var conexion:NetConnection = new NetConnection();
conexion.connect(null);
var stream:NetStream = new NetStream(conexion);
mi_video.attachVideo(stream);
stream.play("video.flv");

Y ya tenemos todo listo, probemos la película.

Explicación del código:

Se crea la instancia "conexión" de la clase NetConnection que proporciona los medios para reproducir archivos FLV de flujo desde una unidad local o una dirección HTTP.

Con conexion.connect(null); abre una conexión local mediante la que puede reproducir archivos de vídeo (FLV) desde una dirección HTTP o desde el sistema de archivos local.

Creamos una instancia "stream" de la Clase NetStream que proporciona métodos y propiedades para reproducir archivos de Flash Video (FLV) del sistema de archivos local o de una dirección http

Ahora asociamos la instancia stream a nuestro objeto mi_video del escenario

Y terminamos con el método play() del objeto NetStream dándole la ruta de nuestro FLV

Descarga aquí el .FLA que usa sólo actionScript

Descarga aquí el .FLA con ambas formas (AS y componente)

Pueden ver un ejemplo de video FLV que bajo de 112 mb a 1.7 mb aqui