Google Web after-hours

Contador en flash JSFL Traductor
Este es un viejo truco que empecé a utilizar antes de la versión MX de flash, cuando no existía la propiedad enabled, que como sabréis es utilizada para deshabilitar un objeto movieClip o button.

Problema
Veamos un caso en el que se hace necesario desactivar un número de objetos, de manera que no interfieran en el funcionamiento de otros. Un caso típico es el siguiente:

Tenemos en el escenario una serie de botones y cargamos un clip de película (vía loadMovie, attachMovie etc.

El clip de película que acabamos de cargar, está en un nivel más alto que el resto de objetos de nuestra película, sin embargo, cuando el cursor incide en una zona del clip de película que se corresponde a la posición de un objeto button o movieClip, tenemos un problema, el botón o clip de película que queda debajo no debería activarse, pero la hace.


r sobre la superficie del menú libre de botones, apreciarás como los botones que están debajo, siguen activados.

Solución 1 Usando la propiedad enabled

Para solventar este problema, disponemos de la propiedad enabled, por ejemplo si tenemos en nuestro escenario los botones btn1,btn2, para desactivarlos, este sería el código:

btn1.enabled=false
btn2.enabled=false
Pero puede darse el caso de tener muchos botones, como es el caso de nuestro ejemplo.

Primer inconveniente, son muchos botones y quizá no deseemos desactivarlos todos, para el ejemplo, vamos a ver como haríamos para desactivar todos los botones.

En principio, podemos escribir:

En el caso de los objetos movieClip

MovieClip.prototype.enabled= false

En caso de usar objetos button

Button.prototype.enabled = false
Perfecto, hemos desactivado todos los botones o clips de película, pero nos encontramos con un inconveniente, También hemos desactivado algunos botones que necesitamos.

En la solución 1, vemos que el problema se soluciona de forma relativamente sencilla, veamos una parte del código, concretamente, la que nos ocupa, desactivar lo que no necesitamos, activar lo que si necesitamos.
(El resto de código, puedes descargarlo al final del tutorial)


with (menu_mc) {
	// -- detectar que el cursor está en la zona del menú para deshabilitar botones
	this.onEnterFrame = function() {
		if (hitTest(_root._xmouse, _root._ymouse)) {
			MovieClip.prototype.enabled = false;
		} else {
			MovieClip.prototype.enabled = true;
		}
	};
	// -- habilitar los botones del menú
	hitArea_mc.enabled = true;
	info_btn.enabled = true;
	buscar_btn.enabled = true;
	comprar_btn.enabled = true;
	// -- iniciar arrastre menú
	hitArea_mc.onPress = function() {
		this._parent.startDrag();
	};
	// -- detener arrastre menú
	hitArea_mc.onRelease = hitArea_mc.onReleaseOutside=function () {
		this._parent.stopDrag();
	};
	// -- capturar eventos botones del menú
	info_btn.onRollOver =
	buscar_btn.onRollOver=
	comprar_btn.onRollOver=function () {
	};
}
Solución 2 Usando un botón invisible

Lo que hemos visto anteriormente, es lo correcto, pueden darse casos muy diversos, por ejemplo: el menú es cargado vía loadMovie, está en otro nivel, lo cual, tendremos que tener en cuenta en el momento de usar la propiedad enabled, pero la finalidad de este tutorial, más que estudiar el uso de enabled, es mostrar una solución más sencilla y que nos ahorrará código y lo mas importante, funciona siempre y en cualquier caso.

La solución, es tan sencilla como crear un botón invisible que ocupe el área del clip de película en el nivel superior, de manera que impide que los objetos que están por debajo sean activados.


Como podrás apreciar, el código es notablemente más sencillo, y nos ahorramos el evento onEnterFrame()supone un ahorro de recursos) al igual que con el ejemplo anterior, puedes descargar el fla, aquí veremos la parte que afecta a nuestro caso:

with (menu_mc) {
	// -- iniciar arrastre menú
	hitArea_mc.onPress = function() {
		this._parent.startDrag();
	};
	// -- detener arrastre menú
	hitArea_mc.onRelease = hitArea_mc.onReleaseOutside=function () {
		this._parent.stopDrag();
	};
	// -- para que no se note que usamos un botón invisible, establecemos que
        // --  el cursor no tenga forma de mano
	invisible_btn.useHandCursor = false;
	// -- capturar eventos botones del menú
	info_btn.onRollOver =
	buscar_btn.onRollOver=
	comprar_btn.onRollOver=function () {
	};
}

Descargar archivos:
http://www.after-hours.org/blog/tutoriales/truco_botones.zip (1037 hits)

7 Responses to 'movieClip.enabled versus invisible_button'

  1. Tmeister Says:

    En lo personal uso la segunda opcion, es mucho mas sencilla y eficiente….

    Saludos!! 8)

  2. hector Says:

    muy interesante, nunca se me ocurrio, siempre habia usado la primera opción, la cual no es muy fiable por cuestiones de niveles.

    Gracias por el tip toni… ;)

  3. Raúl Jiménez Says:

    Pues, mira, yo tenia justo ese problema en mi page, no habí a caí do en la cuenta de usar la propiedad enabled…

    Pos nada, ya se como arreglarlo, jeje.

    Un saludito

  4. Alfredo Says:

    Quisiera agregar que no es necesario hacer un botón, bastarí a con darle al MC una acción on(rollOver) vací a (en caso de que no se esté usando dicha función)

    Eso.

  5. tonilopez Says:

    Alfredo,

    lo que dices, no es muy práctico, solo piensa en el ejemplo, hay un montón de clips, ¿que harias? crear una variable para cada uno que controlase si tiene que estar activo o no?

    boton_mc.onRollOver=function(){
    if(activo){
    // – acciones
    }
    }

    Y en de alguna forma deberí as asinar el boleano ‘true’ o ‘false’ a la variable ‘activo’.

    En mi opinión, esto es demasiado aparatoso, y en todo caso para ello tenemos la propiedad enabled. Otra cosa, el botón, no harí a nada, pero seguiria apareciendo el cursor en forma de mano.

    El tip consiste en:

    desactivar los botones (aunque sea virtualmente) de manera que aparte de no ejecutar sus acciones, de la sensación que no están activados.

    Todo esto de la forma más sencilla. En mi opinión solo hay dos opciones:

    usar la propiedad enabled (con lo inconvenientes ya explicado en el tip)

    usar un botón invisible, que nos ahorra un montón de trabajo.

    En todo caso, lo podemos discutir :)

    Saludos.

  6. yannelcys Says:

    gracias voy a probar la segunda opción, para ver que tal me resulta y sino usare la primera, tengo dudas todavias pero probare para ver q tal, de nuevo mil gracias

  7. Juanjo Says:

    Gracias por tu ayuda, con el primer ejemplo me ha ido de maravilla.

    Un saludo