asd

28

Oct

Centrar movie clip segun resolucion y cambio de estado del navegador

Publicado por: LeoBaraldi

Esta es una consulta que me llego a mi mail de las tantas que llegan, les pido que tengan paciencia que de a poco voy contestando. La consulta en si es como hacer que un clip de película se centre en la ventana del navegador independientemente a la resolución que el usuario este utilizando.

A esto le sumamos que el objeto se debe centrar también si se cambia el estado de la venta (tamaño) asi que también vamos a necesitar algún método para detectar dicho evento.publicacion-centrar-movieclip.jpg

Antes de exponer el código es necesario que aclare unas cosas o requerimientos.

La película debe estar en html con la propiedad “No escalar” y su alto como ancho debe ser del 100% del tamaño de la ventana del navegador.

Así mismo debe estar centrada la película en las posiciones 0,0 que serian izquierda, top.

Puntualmente en este caso lo que hice fue crear un prototipo para los MovieClip que con solo llamarlo e indicarle la posición que pretendemos nuestro AS se encargara de los restantes eventos. A este prototipo se le suma también como parámetro la posibilidad de poder manipular un margen de separación para las distintas posiciones.

No voy a explicar los pasos y función del prototipo porque es muy simple y no lo veo relevante simplemente cópienlo en su línea de tiempo y lo pueden utilizar de la siguiente manera:

Mipelicula_mc.centrar(“centro-top”, 10)
Esta línea se encargara de indicarle al prototipo como debe interactuar con la película “Mipelicula_mc” , como ven en este caso pase dos parámetros “centro-top” para que este elemento se posicione en el eje “X” al centro y el eje “Y” a un margen superior de 10 pixeles.
Podes hacer cuantas llamadas quieras del prototipo y cada llamada con diferentes posiciones. Así mismo desde cualquier parte de tu swf :)

Las opciones de posiciones son las siguientes:

izq-top: izquierda, superior “x=100%, y=0%” (se puede indicar margen)
izq-centro: izquierda, centro “x=100%, y=50%” (se puede indicar margen)
izq-inf: izquierda, inferior o base “x=100%, y=100%” (se puede indicar margen)

centro-top: centro, superior “x=50%, y=0%” (se puede indicar margen)
centro: centro, centro “x=50%, y=50%” (NO se puede indicar margen)
centro-inf: centro, inferior “x=50%, y=100%” (se puede indicar margen)

der-top: derecha, superior “x=0%, y=0%” (se puede indicar margen)
der-centro: derecha, centro “x=0%, y=50%” (se puede indicar margen)
der-inf: derecha, inferior o base “x=0%, y=100%” (se puede indicar margen)

Clic para ver Texto Plano
Actionscript:
  1. MovieClip.prototype.centrar = function(pos:String, margen:Number) {
  2. Stage.scaleMode = "noScale";
  3. var ancho:Number = Stage.width;
  4. var alto:Number = Stage.height;
  5. var peli:MovieClip = this;
  6. //
  7. switch (pos) {
  8. case "izq-top" :
  9. this._x = margen;
  10. this._y = margen;
  11. break;
  12. case "izq-centro" :
  13. this._x = margen;
  14. this._y = (alto/2)-(this._height/2);
  15. break;
  16. case "izq-inf" :
  17. this._x = margen;
  18. this._y = alto-(this._height+margen);
  19. break;
  20. case "centro-top" :
  21. this._x = (ancho/2)-(this._width/2);
  22. this._y = margen;
  23. break;
  24. case "centro" :
  25. this._x = (ancho/2)-(this._width/2);
  26. this._y = (alto/2)-(this._height/2);
  27. break;
  28. case "centro-inf" :
  29. this._x = (ancho/2)-(this._width/2);
  30. this._y = alto-(this._height+margen);
  31.  
  32. break;
  33. case "der-centro" :
  34. this._x = ancho-(this._width+margen);
  35. this._y = (alto/2)-(this._height/2);
  36. break;
  37. case "der-top" :
  38. this._x = ancho-(this._width+margen);
  39. this._y = margen;
  40. break;
  41. case "der-inf" :
  42. this._x = ancho-(this._width+margen);
  43. this._y = alto-(this._height+margen);
  44. break;
  45.  
  46. }
  47. //
  48. var escuchador:Object = new Object();
  49. escuchador.onResize = function() {
  50. ancho = Stage.width;
  51. alto = Stage.height;
  52. //
  53. switch (pos) {
  54. case "izq-top" :
  55. peli._x = margen;
  56. peli._y = margen;
  57. break;
  58. case "izq-centro" :
  59. peli._x = margen;
  60. peli._y = (alto/2)-(peli._height/2);
  61. break;
  62. case "izq-inf" :
  63. peli._x = margen;
  64. peli._y = alto-(peli._height+margen);
  65. break;
  66. case "centro-top" :
  67. peli._x = (ancho/2)-(peli._width/2);
  68. peli._y = margen;
  69. break;
  70. case "centro" :
  71. peli._x = (ancho/2)-(peli._width/2);
  72. peli._y = (alto/2)-(peli._height/2);
  73. break;
  74. case "centro-inf" :
  75. peli._x = (ancho/2)-(peli._width/2);
  76. peli._y = alto-(peli._height+margen);
  77. break;
  78. case "der-centro" :
  79. peli._x = ancho-(peli._width+margen);
  80. peli._y = (alto/2)-(peli._height/2);
  81. break;
  82. case "der-top" :
  83. peli._x = ancho-(peli._width+margen);
  84. peli._y = margen;
  85. break;
  86. case "der-inf" :
  87. peli._x = ancho-(peli._width+margen);
  88. peli._y = alto-(peli._height+margen);
  89. break;
  90. }
  91. };
  92. Stage.addListener(escuchador);
  93. };
  94. //aqui indico las posiciones para mis peliculas
  95. cuadrado_mc.centrar("centro");
  96. pie_mc.centrar("der-inf",10);
  97. logo_mc.centrar("der-top",10);

ver ejemplodescargar archivos
categorias: Prototipos Coment.: 15

15 Respuestas

    Pablo Dice:
    26th Noviembre, 2007 at 1:20 pm

    Al descargarlo y abrirlo me da un error de "Formato de archivo inesperado" y no se puede abrir.

    Saludos

    Gracias

    LeoBaraldi Dice:
    26th Noviembre, 2007 at 2:56 pm

    Los files estan en formato 9.0, por eso no puedes habrirlos. Usa flash Profecional 9

    /ndrs Dice:
    28th Noviembre, 2007 at 12:44 pm

    hola yo tengo CS3 y tambien me sale el mismo error ke a Pablo.
    esta muy bueno el tutorial pero como soy medio nuevo se hizo una pekeña ensalada con la cuestion del actionScript, por eso em gustaria poder ver el fla. gracias = y saludos.

    Mauricio Prada Dice:
    23rd Abril, 2008 at 11:52 pm

    Tengo Adobe Flash CS3 Professional y me sale error. Quisiera que volvieran a subir el ejemplo, gracias.

    racosoft Dice:
    28th Abril, 2008 at 10:45 am

    antes ke nada gracias por los tutoriales, yo tambien he tenido problemas con el archivo y lo he intentado abrir en el cs3; me gustaria ver el .fla para entenderlo mejor. gracias!

    LeoBaraldi Dice:
    19th Mayo, 2008 at 6:13 pm

    Si!!! el archivo esta dañado! quien lo necesite envie un mail a info@leobaraldi.com.ar o sino copien y peguen el codigo en un proyecto de flash vacio y funciona!!!

    evil Dice:
    30th Octubre, 2008 at 1:57 pm

    ok, muchas gracias por el trozo de codigo, funciona perfectamente, aunque, el tema que me falla a mi es que en el primer momento, al cargar todos los objetos, cuando quiero mostrar algun mc centrado, el primero falla, y hasta que no le doy para mostrar otro o redimensiono la pagina no se ve en el centro...
    alguna idea?

    gracias.

    mile Dice:
    27th Noviembre, 2008 at 4:52 pm

    hola tengo un problema similar pero tengo la pagina html con swf, entonces no se si esto mismo me funciona.

    LeoBaraldi Dice:
    27th Noviembre, 2008 at 9:09 pm

    Sera que cuando se muestra el primer elemento todavía no tiene el compilador de flash disponible el prototipo.
    Carguen el prototipo primero, en la primera línea de su _root, en el primer frame, después centren los elementos cuando quieran, volví a subir el fla porque estaba dañado parece!
    Mile: Te va a funcionar bien! ;) siempre y cuando hagas lo que digo más arriba!

    israel Dice:
    8th Febrero, 2009 at 3:16 pm

    Hola:

    No me funciona tu proyecto fla de la forma deseada. Cuando hago el Swf y rescalo la ventana el objeto se va a la parte de abajo y no se centra en la pelicula.

    Un saludo

    LeoBaraldi Dice:
    10th Febrero, 2009 at 10:17 pm

    Estima Israel: sera este el problema¿? "La película debe estar en html con la propiedad “No escalar” y su alto como ancho debe ser del 100% del tamaño de la ventana del navegador.

    Así mismo debe estar centrada la película en las posiciones 0,0 que serian izquierda, top."

    Julian Moreno Dice:
    24th Marzo, 2009 at 9:34 pm

    que buen tuto... qusiera saber si esto es posible hacerlo para un pryecto multimedia, es decir que funcione cuando genere un .exe

    se que estas indicaciones solo funcionan si esta en un html pero hay posibilidad de modificarlo para que funciones en una multimedia???

    gracias por la colaboracion....

    LeoBaraldi Dice:
    25th Marzo, 2009 at 12:38 am

    Deberia funcionarte sin ningun problema ;)

    EC Dice:
    14th Junio, 2009 at 9:54 pm

    muy bueno... gracias, me ayudo un monton!!!!!

    maxi Dice:
    30th Junio, 2010 at 6:29 am

    ok...pero, por ejemplo si quisiera poner simplemente una imagen de fondo y evitar ese molesto borde blanco que SIEMPRE queda, como hago??
    Tiene algo que ver la Diagramacion liquida??

    gracias

Publicar comentario

IMPORTANTE: Los comentarios son moderados. A la brevedad seran subidos.

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi