Siguiendo con los nuevos filtros aparecidos con Flash 8, en esta ocasión vamos a ver un ejemplo de uso de DropShadowFilter. La clase DropShadowFilter permite añadir una sombra a diversos objetos de Flash. Cuenta con varias opciones para el estilo de la sombra, incluida sombra interior o exterior y modo de extractor. La sintaxis es la siguiente:

DropShadowFilter([distance:Number], [angle:Number], [color:Number], [alpha:Number], [blurX:Number], [blurY:Number], [strength:Number], [quality:Number], [inner:Boolean], [knockout:Boolean], [hideObject:Boolean])

El ejemplo parte de lo visto en otras anotaciones:

- Drag con easing
- BlurFilter II

1.- Creamos un clip de película dentro del cual creamos un botón que nos permitirá añadir las acciones pertinentes para el arrastre del clip. Asociado al dicho botón añadimos el siguiente actionscript:

on (press) {
	arrastrar = true;
	xd = _x-_root._xmouse;
	yd = _y-_root._ymouse;
}
on (release, releaseOutside) {
	arrastrar = false;
	xfinal = _root._xmouse;
	yfinal = _root._ymouse;
}

2.- Asociado al clip, en función de si estamos arrastrando o no el clip de película le asociamos unas fórmulas de easing tanto que controlen la posición del clip, como la sombra y la profundida (SwapDepths)

onClipEvent (load) {
	xfinal = _x;
	yfinal = _y;
	import flash.filters.DropShadowFilter;
}
onClipEvent (enterFrame) {
var dsf:DropShadowFilter = new DropShadowFilter(DesX, 40, 0xCCCCCC, 30, DesX, DesY, 1, 3, false, false, false);
//DropShadowFilter([distance:Number], [angle:Number], [color:Number], [alpha:Number], [blurX:Number], [blurY:Number], [strength:Number], [quality:Number], [inner:Boolean], [knockout:Boolean], [hideObject:Boolean])

this.filters = [dsf];
if (arrastrar) {
		this.swapDepths(_root.getNextHighestDepth());
		x = _root._xmouse+xd;
		y = _root._ymouse+yd;
		DesY = 0.75*Math.abs(difY) + difX/7;
    		DesX = 0.75*Math.abs(difX) + difY/7;
		difY = (_ymouse-this._y)/7;
         		difX = (_xmouse-this._x)/7;
	} else {
		x = xfinal+xd;
		y = yfinal+yd;
		if (DesX > 0){
		DesY--
		DesX--
		}
	}
	_x = _x+(x-_x)/3;
	_y = _y+(y-_y)/3;
}

Descargar archivo » »

En este segundo ejemplo se va a combinar la aplicación de BlurFilter con fórmulas de "easing" para dar un efecto de desenfocado en función del movimiento del puntero del ratón.

1.- Creamos un clip de película, en mi caso un cuadrado, al que damos como nombre de instancia "Cuadro_mc".
2..- En un fotograma añadimos el siguiente código.

import flash.filters.BlurFilter;
this.onEnterFrame = function() {
    var blur:BlurFilter = new BlurFilter(DesX, DesY, 5);
    Cuadro_mc.filters = [blur];
    DesY = 0.75*Math.abs(difY) + difX/5;
    DesX = 0.75*Math.abs(difX) + difY/5;
    difY = (yPos-Cuadro_mc._y)/5;
    difX = (xPos-Cuadro_mc._x)/5;
    Cuadro_mc._y += difY;
    Cuadro_mc._x += difX;
    yPos = _ymouse;
    xPos = _xmouse;
};

Descargar archivo » »

Este es el primer tutorial que incorporo sobre Flash 8. Últimamente he tenido un poco abandonado el Flash y quiero iniciar una serie de tutoriales, abarcando sobre todo las novedades que aporta esta nueva versión de Flash. Para este primer post, he decidido abordar un pequeño ejemplo de lo que se puede realizar con la clase Blurfilter, uno de los filtros que se han añadido a Flash para poder invocarlos dede actionscript.

La clase BlurFilter permite aplicar un efecto visual de desenfoque a diversos objetos en Flash. El efecto de desenfoque suaviza los detalles de una imagen. El desenfoque puede oscilar desde un ligero efecto hasta el desenfoque gaussiano similar al de Photoshop, con un aspecto brumoso como el que se obtiene al mirar a través de un cristal semiopaco. Cuando la propiedad quality de este filtro se define como 1, el resultado es un ligero efecto. Cuando la propiedad quality se define como 3, se aproxima a un filtro de desenfoque gaussiano.

Sintaxis:

BlurFilter([blurX:Number], [blurY:Number], [quality:Number])

donde:
blurX: es la cantidad de desenfoque horizontal.
blurY: es la cantidad de desenfoque vertical.
quality: es el número de veces que debe realizarse el desenfoque.

Para este primer ejemplo se ha creado un desenfoque que se aplicará sobre tres clips de película: "Foto1_mc", "Foto2_mc" y "Foto3_mc" que se aplicará al pasar el ratón por encima de ellos y desaparecerá al quitar el ratón.

Sobre un fotograma, aplicar el siguiente actionscript:

//IMPORTO LOS FILTROS
//PARA PODER HACER USO DE ELLOS
import flash.filters.*; 
//CREO UNA INSTANCIA DE
//LA CLASE BLURFILTER
//LLAMADA DESENFOQUE
var Desenfoque:BlurFilter = new BlurFilter(5,5,3);
//CREO UNA FUNCION AL EVENTO ONROLLOVER
//QUE APLICA EL FILTRO
Foto1_mc.onRollOver = function() {
	this.filters = [Desenfoque];
};
//QUITO EL FILTRO
Foto1_mc.onRollOut = function() {
	this.filters = [null];
};

Foto2_mc.onRollOver = function() {
	this.filters = [Desenfoque];
};
Foto2_mc.onRollOut = function() {
	this.filters = [null];
};
Foto3_mc.onRollOver = function() {
	this.filters = [Desenfoque];
};
Foto3_mc.onRollOut = function() {
	this.filters = [null];
};

Descargar archivo » »

Para crear un reloj que pueda mostrar diversos husos horarios, utilizaremos el UTC o Tiempo Universal Coordinado; la zona horaria de referencia respecto a la cual se calculan todas las otras zonas del mundo. Así por ejemplo para:

- España: la hora penínsular de invierno es UTC+1; el horario de verano o de ahorro de luz solar (en la que los relojes de adelantan una hora) es UTC+2. - México: el horario de invierno del Centro de México es UTC-6; el horario de verano o de ahorro de luz solar (en la que los relojes de adelantan una hora) es UTC-5.

En el ejemplo vamos a crear un reloj UTC, que será facilmente adaptable a cada realidad horaria. 1. - Creamos una caja de texto dinámico a la que le damos el nombre de variable "MostrarReloj". 2 .- En un fotográma, ponemos las siguientes acciones:

Reloj = new Date();
Hora = Reloj.getUTCHours(); 
if (Reloj.getUTCMinutes()<10) {
       Minutos = "0" + Reloj.getUTCMinutes();
}
else {
       Minutos = Reloj.getUTCMinutes();
}
if (Reloj.getUTCSeconds()<10) {
       Segundos = "0" + Reloj.getUTCSeconds();
}
else {
       Segundos = Reloj.getUTCSeconds();
}
MostrarReloj = Hora + " : " + Minutos + " : " + Segundos
//Frecuencia de Refresco
Refresco= setInterval(tiempo,1000);
function tiempo() {
       Reloj = new Date();
       if (Reloj.getUTCMinutes()<10) {
              Minutos = "0" + Reloj.getUTCMinutes();
  }
       else {
              Minutos = Reloj.getUTCMinutes();
}
       if (Reloj.getUTCSeconds()<10) {
              Segundos = "0" + Reloj.getUTCSeconds();

  }
       else {
              Segundos = Reloj.getUTCSeconds();
  }
       Hora = Reloj.getUTCHours();
       MostrarReloj = Hora + " : " + Minutos + " : " + Segundos
  }

Mini Slide Navigation es un menú de navegación horizontal creado con CSS y Javascript que tiene la particularidad de que el indicador de posición se desliza.

Yo hice algo muy parecido para una versión de este blog, pero con un ligero efecto de easing en el deslizador con Flash. Dos alternativas con ventajas e inconvenientes en los dos casos. A continuación, muestro un tutorial sobre la creación del menú con Flash. Es conveniente haber leído anteriores tutoriales sobre Flash y XML que hay en el blog, o tener nociones sobre esta materia.

1.- Creamos un documento XML con el nombre "menu.xml", donde pondremos las opciones de menu.

<content>
	<page src="index.php" titulo="Principal"/>
	<page src="#" titulo="Portafolio"/>
	<page src="#" titulo="Servicios"/>
	<page src="#" titulo="Contacto"/>
</content>

2.- Sobre una película en blanco, creamos un nuevo símbolo. Elegimos "clip de película" y le asignamos un nombre, por ejemplo "item_mc".
3.- Dentro de este clip de película, en una capa, creamos una caja de texto dinámico con el nombre de instancia "etiqueta_txt".
4.- Dentro del mismo clip de película y en otra capa creamos un botón -en mi ejemplo, invisible- con el nombre de instancia "Rectangulo_btn".
5.- Volvemos a la escena principal y abrimos el panel de biblioteca (CTRL+L). Seleccionamos el clip de película "item_mc", hacemos click con el botón derecho sobre él y elegimos la opción "Vinculación...". Habilitamos la opción "Exportar para Actionscript" y lo identificamos como "item_mc".
6.- Sobre el escenario creamos un rectángulo que hara las funciones de deslizador. Lo convertimos en clip de película y le damos como nombre de instancia "Rastro_mc".
7.- Ahora, tan sólo nos queda asignar acciones. Sobre un fotograma:

var t=0
var espacio = 70 //Espacio entre los botones
menuXml = new XML();
menuXml.ignoreWhite = true;
menuXml.onLoad = function(success) {
	if (success) {
	menuItem = menuXml.firstChild.childNodes;
		for (var i = 0; i<menuItem.length; i++) {
			Nombre = menuItem[i].attributes.titulo;
			Link = menuItem[i].attributes.src;
			posicionar()
}
}
};
menuXml.load("menu.xml");
posicionar = function(){
	if(t <= menuItem.length){
		this.attachMovie("item_mc", "item_mc"+t, t);
		this["item_mc"+t]._x = 10+(espacio*t);
		this["item_mc"+t]._y = 15;
		this["item_mc"+t].Enlace = Link; 
		this["item_mc"+t].etiqueta_txt.text = Nombre;
		this["item_mc"+t].Rectangulo_btn.onRelease=function(){
			getURL(this._parent.Enlace);
		}
	t++
}
}

8- Seleccionamos el deslizador "Rastro_mc" y le asignamos las acciones para el efecto de easing

onClipEvent (load) {
	_x = 0;
	speed = 5;
}
onClipEvent (enterFrame) {
	endX = _root._xmouse;
	_x += (endX-_x)/speed;
}

Descargar Archivo » »