efecto lupa

Posteado el 02. Dec, 2010 por tuto in Flash

Esto es lo que te enseñaremos a realizar en este tutorial de Adobe flash.
Posicionate en la lupa, dale clic sostenido y muevete para donde desees y verás el efecto funcionando

PASO 1
Creamos un nuevo documento de Flash (ActionScript 2.0).

PASO 2
Vamos a la ventana Properites y colocamos los valores que se ven en la imagen.

PASO 3
Creamos una capa nueva y la nombramos mascara a la primera capa le colocamos el nombre de actions.

PASO 4
Dentro de la capa mascara creamos un cuadrado que cubra toda nuestra película, el color del cuadrado es a su gusto.

PASO 5
Damos clic derecho sobre el cuadro y vamos a la opción Convert to Symbol… y convertimos nuestro cuadrado en un Movie Clip con el nombre de masked_mc.

PASO 6
Vamos a la ventana Properties y en la opción de Instance Name colocamos el nombre masked_mc.

PASO 7
Damos doble clic sobre el cuadrado para ingresar al movie clip una vez dentro vamos a crear una nueva capa llamada imagen.

PASO 8
Dentro de la capa Imagen arrastramos la imagen que nos servirá para nuestro efecto.

PASO 9
Creamos una capa llamada Actios sobre todas las demas.

PASO 10
Nos posicionamos en el frame 1 y presionamos la tecla F9 y en la ventana colocamos el siguiente código Action Script.

stop();

PASO 11
Regresamos a nuestra Scene 1 y creamos una nueva capa llamada lupa.

PASO 12
Arrastramos a nuestro documento la imagen de una lupa y la colocamos en la esquina superior izquierda.

PASO 13
Convertimos en Movie Clip la imagen de la lupa y le colocamos el nombre de marco.

PASO 14
Sobre la lupa creamos un círculo que cubra por completo el área donde hará el efecto de lupa.

PASO 15
Convertimos a Movie Clip el círculo y le colocamos el nombre de lupa.

PASO 16
Ahora vamos a la ventana Properties y en el espacio de Instance Name le colocamos el nombre de lupa_mc.

PASO 17
Seleccionamos el movie clip que contiene la imagen de la lupa y presionamos la tecla Suprimir para borrarlo de nuestra película.

PASO 18
Ahora vamos a la capa Actios, nos posicionamos en el frame 1 y presionamos la tecla F9 y en la ventana copiamos el siguiente código Actions Script.

Code block

/ almacenamos en variables la posición del clip
// que va ser ampliado
var x0:Number = masked_mc._x;
var y0:Number = masked_mc._y;
// valores que restringen el arrast de la lupa
// tb se emplean para calcular el efecto dentro
// de la función generar_efecto_lupa()
var izda:Number = masked_mc._x-lupa_mc._width*0.5;
var dcha:Number = izda+masked_mc._width;
var arriba:Number = masked_mc._y-lupa_mc._height*0.5;
var abajo:Number = arriba+masked_mc._height;
// factor de ampliación, 2 equivale al 200%
var factor:Number = 2;
// creamos el clip ampliado
var ampliado_mc:MovieClip = masked_mc.duplicateMovieClip("ampliado", this.getNextHighestDepth());
// reescalamos según factor
ampliado_mc._width *= factor;
ampliado_mc._height *= factor;
// enmascaramos el clip ampliado
ampliado_mc.setMask(lupa_mc);
// adjuntamos el marco a la escena
var marco_mc:MovieClip = this.attachMovie("marco", "marco", this.getNextHighestDepth());
// recolocamos la lupa y el marco en su posición inicial
marco_mc._x = lupa_mc._x=x0;
marco_mc._y = lupa_mc._y=y0;
// función que genera el efecto
function generar_efecto_lupa() {
	// se basa en el cambio de posición
	// del clip lupa_mc cuando arrastramos
	marco_mc._y = lupa_mc._y;
	marco_mc._x = lupa_mc._x;
	ampliado_mc._x = ((lupa_mc._x-izda)*-masked_mc._width*(factor-1)/masked_mc._width)+x0;
	ampliado_mc._y = ((lupa_mc._y-arriba)*-masked_mc._height*(factor-1)/masked_mc._height)+y0;
}
// cuando detectamos movimiento de ratón creamos el efecto
lupa_mc.onMouseMove = function():Void  {
	generar_efecto_lupa();
};
// arrastramos la lupa dentro del área
// definida previamente
lupa_mc.onPress = function():Void  {
	startDrag(lupa_mc, false, izda, arriba, dcha, abajo);
};
lupa_mc.onRelease = function():Void  {
	stopDrag();
};
lupa_mc.onReleaseOutside = lupa_mc.onRelease;