Efecto de profundidad con Clases
Este tutorial conciste en armar una Clase para poder darle un efecto de profundidad o moviemiento a nuestros sitios.
Un ejemplo claro de lo que me refiero es este estupendo sitio www.dedededo.com.ar.
La idea es tener varios niveles de profundidad en nuestra pelÃcula de flash separados por MovieClips y que según la posición del mouse esos niveles se muevan teniendo en cuenta su profundidad
Para empezar veamos como esta armada la clase:
Clase Profundidad.as
{
//Propiedades
var yProf:Number;
var xProf:Number;
var easy:Number;
var objetos_arr:Array;
//Constructor
public function Profundidad()
{
//creamos el array q contiene los MC a mover
objetos_arr = [];
}
//Metodos
public function ini(_objetos_arr:Array, _xProf:Number, _yProf:Number, _easy:Number):Void
{
this.yProf = _yProf;
//profundida en Y (menor valor mayor profundidad)
this.xProf = _xProf;
//profundida en X (menor valor mayor profundidad)
this.easy = _easy;
//valor del efecto easy (menor valor mayor lentitud)
this.objetos_arr = _objetos_arr;
//Array con los nombres de los MovieClips
PosActuales();
// Funsion interna q guarda las posiciones iniciales de los MC
this.onEnterFrame = function()
{
for (var i:Number = 0; i < objetos_arr.length; i++)
{
var obj:Object = objetos_arr[i];
//MC a mover
var mov:Number = i + 1;
// valor de movimiento y profundidad
//movimiento en X
obj.xPos = (_xmouse - (Stage.width / 2)) * mov / 3;
//destino del MC
obj.xvel = easy / mov;
// velocidad del easy segun la profundidad
obj.xdest = obj[“xPosNivIni_” + i] - obj.xPos / xProf;
//destino del MC segun profundidad
obj._x += (obj.xdest - obj._x) / obj.xvel;
//calculo de movimiento del MC con easy
//movimiento en Y, igual al del X
obj.yPos = (_ymouse - (Stage.height / 2)) * mov / 3;
obj.yvel = easy / mov;
obj.ydest = obj[“yPosNivIni_” + i] - obj.yPos / yProf;
obj._y += (obj.ydest - obj._y) / obj.yvel;
}
};
}
private function PosActuales():Void
{
//recorre todos los MC y guarda las posiciones iniciales de c/us
for (var i:Number = 0; i < objetos_arr.length; i++)
{
objetos_arr[i][“xPosNivIni_” + i] = objetos_arr[i]._x;
objetos_arr[i][“yPosNivIni_” + i] = objetos_arr[i]._y;
}
}
//Setters y Getters
//cambiamos la profundidad en X
public function set _xProf(num:Number):Void
{
this.xProf = num;
}
public function get _xProf():Number
{
return this.xProf;
}
//cambiamos la profundidad en Y
public function set _yProf(num:Number):Void
{
this.yProf = num;
}
public function get _yProf():Number
{
return this.yProf;
}
//cambiamos el valor de velocidad del easy
public function set _easy(num:Number):Void
{
this.easy = num;
}
public function get _easy():Number
{
return this.easy;
}
}
Esta Clase cuenta con una metodo llamado ini() que se encarga de crear el efecto. A este metodo hay que pasarle 4 parametros los cuales son: _objetos_arr, _xProf, _yProf , _easy._objetos_arr: Es un array simple que contendra la ruta de los distintos MovieClips que seran cada nivel ( no se si entiende ). Importante destacar que el orden que tengan en el array será el orden de profundidad.
_xProf: Es un valor numerico que indica la cantidad de movimiento o profundidad que tendra en el eje X. Mientras más chico el valor más movimiento tendra en ese eje.
_yProf: Lo mismo que el parametro anterior pero en el eje Y.
_easy: Valor numerico que indica la velocidad del efecto de easy. Tambien mientras más chico el valor, más rapido sera el mivimiento.Cada parametro, menos _objetos_arr, pose un metodo setter y getter para poder cambiarlo en cualquier momento y variar el efecto.
La explicación detallada de lo que hace cada parte de la clase se puede ver en los comentarios de la misma.
Una vez que tenemos la Clase armada hay q usarla. Para eso abrimos un documento nuevo de Flash y creamos un MovieClip que contendra los demas MovieClips (o niveles). Y le ponemos un nombre de instancia ( en este ejemplo “todo_mc” … muy creativo lo mio).
Vamos a la Libreria de Flash y le asignamos en las propiedades de este MC, la Clase Profundidad (que debe estar en la misma carpeta que el .fla, o cambiar la ruta predeterminada que usa Flash para buscar las Clases).
Luego ingresamos a ese MC y creamos tantos MC como querramos teniendo en cuenta que cada uno será un nivel distinto.
A cada MC le ponemos un nombre de instancia ( en este caso “nivel1″, “nivel2″, ect) y los ponemos uno en cada Layer por un tema de prolijidad.
Volvemos a la linea de tiempo principal donde está el MC “todo_mc” y en un keyframe escribimos lo siguiente:
objetos_arr.push(todo_mc.nivel1);
objetos_arr.push(todo_mc.nivel2);
objetos_arr.push(todo_mc.nivel3);
todo_mc.ini(objetos_arr,1,1,50);
Claramente generamos un Array con las rutas de cada MC que hará de nievel y ejecutamos el metodo ini() de la Clase con los parametros que querramos o necesitemos usar.
Le damos al famos y tan querido Ctrl + Enter y si hicimos todo bien deberia verse algo como el ejemplo que les dejo a continuación!.
Acá les dejo el ejemplo y los archivos del tutorial….
el 9 de Julio del 2006 a las 20:05
Hola.. Esta muy interesante este efecto, lo he intentado, pero me sale un error que dice **Error** Symbol=todo_mc, layer=Layer 1, frame=1:Line 5: The class ‘Profundidad.as’ could not be loaded.
todo_mc.ini(objetos_arr,1,1,50);.
en realidad no se mucho de Flash, pero si me interesa aprender bien.
Espero alguien me pueda ayudar… muchas gracias.
el 9 de Julio del 2006 a las 13:29
Hola Oskr, por lo que veo del error, lo que te esta faltando es asignarle al movieClip la clase.
Para eso dale click derecho al movie que estas usando en la libreria y selecciona propiedades, ahà selecciona el casillero “Exportar para ActionScript” y en el campo de “Clase de AS 2.0″ escribà “Profundidad”, le das ok y tendrÃa que andar
Saludos
el 9 de Julio del 2006 a las 15:32
Excelente, no sé por qué no dà con tu sitio hace tiempo, tus proyectos con clases me encantan y me sirvén aún más.
el 9 de Julio del 2006 a las 15:19
Hola soy Raúl, es efecto muy wapo q me lo estba desaroyando para una min galreia, pero no logro inmovilizar el fecto, los movieclips al clickar un boton, vamos q no se como podrÃa desactivar y activar la función, tengo un mÃnimo mu mÃnimo de actionscript,… si alguien le pudiera darle un vistazo y hexarme una mano…
muchas grácias y saludos!!!