09 07 06

Efecto de profundidad con Clases

Escrito por: WeeDo en AS2, Flash, Tutoriales

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

Necesita el Flash Player 9

Para empezar veamos como esta armada la clase:

Clase Profundidad.as

PLAIN TEXT
Actionscript:
  1. class Profundidad extends MovieClip
  2. {
  3.     //Propiedades
  4.     var yProf:Number;
  5.     var xProf:Number;
  6.     var easy:Number;
  7.     var objetos_arr:Array;
  8.    
  9.     //Constructor
  10.     public function Profundidad()
  11.     {
  12.         //creamos el array q contiene los MC a mover
  13.         objetos_arr = [];
  14.     }
  15.    
  16.     //Metodos
  17.     public function ini(_objetos_arr:Array, _xProf:Number, _yProf:Number, _easy:Number):Void
  18.     {
  19.         this.yProf = _yProf; //profundida en Y (menor valor mayor profundidad)
  20.         this.xProf = _xProf; //profundida en X (menor valor mayor profundidad)
  21.         this.easy = _easy; //valor del efecto easy (menor valor mayor lentitud)
  22.         this.objetos_arr = _objetos_arr; //Array con los nombres de los MovieClips
  23.         PosActuales(); // Funsion interna q guarda las posiciones iniciales de los MC
  24.        
  25.         this.onEnterFrame = function()
  26.             {
  27.                 for (var i:Number = 0; i<objetos_arr.length; i++)
  28.                 {
  29.                     var obj:Object = objetos_arr[i]; //MC a mover
  30.                     var mov:Number = i+1; // valor de movimiento y profundidad
  31.                     //movimiento en X
  32.                     obj.xPos = (_xmouse-(Stage.width/2))*mov/3; //destino del MC
  33.                     obj.xvel = easy/mov; // velocidad del easy segun la profundidad
  34.                     obj.xdest = obj["xPosNivIni_"+i] - obj.xPos/xProf; //destino del MC segun profundidad
  35.                     obj._x += (obj.xdest-obj._x)/obj.xvel; //calculo de movimiento del MC con easy
  36.                     //movimiento en Y, igual al del X
  37.                     obj.yPos = (_ymouse-(Stage.height/2))*mov/3;
  38.                     obj.yvel = easy/mov;
  39.                     obj.ydest = obj["yPosNivIni_"+i]-obj.yPos/yProf;
  40.                     obj._y += (obj.ydest-obj._y)/obj.yvel;
  41.                 }
  42.             };
  43.  
  44.     }
  45.    
  46.     private function PosActuales():Void
  47.     {
  48.         //recorre todos los MC y guarda las posiciones iniciales de c/us
  49.         for (var i:Number = 0; i<objetos_arr.length; i++)
  50.             {
  51.                 objetos_arr[i]["xPosNivIni_"+i] = objetos_arr[i]._x;
  52.                 objetos_arr[i]["yPosNivIni_"+i] = objetos_arr[i]._y;
  53.             }
  54.     }
  55.    
  56.     //Setters y Getters
  57.    
  58.     //cambiamos la profundidad en X
  59.     public function set _xProf(num:Number):Void
  60.     {
  61.         this.xProf = num;
  62.     }
  63.     public function get _xProf():Number
  64.     {
  65.         return this.xProf;
  66.     }
  67.    
  68.     //cambiamos la profundidad en Y
  69.     public function set _yProf(num:Number):Void
  70.     {
  71.         this.yProf = num;
  72.     }
  73.     public function get _yProf():Number
  74.     {
  75.         return this.yProf;
  76.     }
  77.    
  78.     //cambiamos el valor de velocidad del easy
  79.     public function set _easy(num:Number):Void
  80.     {
  81.         this.easy = num;
  82.     }
  83.     public function get _easy():Number
  84.     {
  85.         return this.easy;
  86.     }
  87.    
  88. }

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:

PLAIN TEXT
Actionscript:
  1. var objetos_arr:Array = [];
  2. objetos_arr.push(todo_mc.nivel1);
  3. objetos_arr.push(todo_mc.nivel2);
  4. objetos_arr.push(todo_mc.nivel3);
  5.  
  6. //static function ini(_objetos_arr:Array, _xProf:Number, _yProf:Number, _easy:Number)
  7.  
  8. 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....

Archivos del tutorial

4 comentarios sobre “Efecto de profundidad con Clases”

  • 1
    14 de Diciembre del 2006 - 20:05
    Oskr dijo:

    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.

  • 2
    15 de Diciembre del 2006 - 13:29
    WeeDo dijo:

    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

  • 3
    29 de Enero del 2007 - 15:32
    Rafeo dijo:

    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.

  • 4
    22 de Junio del 2007 - 15:19
    Raúl dijo:

    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!!!

Deje un comentario