Comunidad de diseño web y desarrollo en internet

Capas de profundidad y movimiento de contenido en Flash

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. Todo funcionando a partir de una clase.

Para empezar veamos como está armada la clase:

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 que 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:

var objetos_arr:Array = [];
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 famoso y tan querido Ctrl + Enter y si hicimos todo bien deberia verse algo como el ejemplo de arriba.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate