Efecto de profundidad con Clases View Comments
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | class Profundidad extends MovieClip { //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:
1 2 3 4 5 6 7 8 | var objetos_arr:Array = []; objetos_arr.push(todo_mc.nivel1); objetos_arr.push(todo_mc.nivel2); objetos_arr.push(todo_mc.nivel3); //static function ini(_objetos_arr:Array, _xProf:Number, _yProf:Number, _easy:Number) 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….
