asd

30

Oct

Pintar movieClip con ActionScrip usando la clase colorTransform

Publicado por: LeoBaraldi

Como sabrán en las versiones de flash MX la clase color nos permitía cambiar el color de un movieClip desde AS, esta clase a quedado inutilizada desde la versión 8 en adelante y ha sido reemplazada por la clase ColorTransform.
Para ver un ejemplo concreto de cómo trabaja dicha clase, vamos a dibujar un movieCip en nuestro escenario y le cambiaremos el color desde el ActionScript. A esto le vamos a sumar la posibilidad de que el usuario pueda elegir el color a pintar.
Algo a tener en cuenta antes de continuar es saber que la clase color utilizaba como “color” un valor hexadecimal y en cabio la clase “ColorTransform” usa un valor RGB (rojo, verde y azul) por lo tanto vamos a tener que hacer una función que se encargue de transformar nuestro valores hexadecimales a RGB.
A continuación expongo el código con los cometarios de cada sección:

Clic para ver Texto Plano
Actionscript:
  1. //importamos las clases necesarias
  2. import flash.geom.Transform;
  3. import flash.geom.ColorTransform;
  4. //creamos una variable para Transform y le asignamos el elemento a pintar
  5. var trans:Transform = new Transform(rect);
  6. //creamos una variable con el color inicial
  7. var color:Number = 000000;
  8. //llamamos la función encargada de pasar nuestro color hexadecimal a RGB
  9. var ConvColor:Object = deEXaRGB(color);
  10. //Esta es la función que se encarga de traspasar el modo HEX a RGB
  11. function deEXaRGB(valor) {
  12. var pre = "0x";
  13. var RGB = new Object();
  14. RGB.red = (pre+valor>> 16) & 0xFF;
  15. RGB.green = (pre+valor>> 8) & 0xFF;
  16. RGB.blue = pre+valor & 0xFF;
  17. return RGB;
  18. }
  19. //creamos una función cosa que podamos volver a llamarla cada ves
  20. //que cliquemos el colorPikup
  21. function pintar() {
  22. //acá almacenamos los valores RGB, como pueden ver recuperamos los valores desde un objeto
  23. //"ConvColor" y simplemente concatenamos el objeto con el atributo, ejmp: ConvColor.red (rojo)
  24. var blueColorTransform:ColorTransform = new ColorTransform(0, 1, 1, 1, ConvColor.red, ConvColor.green, ConvColor.blue, 0);
  25. trans.colorTransform = blueColorTransform;
  26. }
  27. //pintamos por primera vez
  28. pintar();
  29. //creamos un detector para nuestro Color picker
  30. cpicker.addListener(this);
  31. this.change = function(evt:Object) {
  32. //almaceno el color seleccionado
  33. color = evt.getRGB();
  34. //hago la conversion
  35. ConvColor = deEXaRGB(color);
  36. //vuelvo a pintar el cuadrado
  37. pintar();
  38. };
  39. //NOTA: PARA ESTE EJEMPLO USE UN COLOR PICKER DE "sephiroth", ESTE ES UN COMPONENTE
  40. //QUE PUEDEN DESCARGARLO DESDE ESTA URL: http://www.sephiroth.it/file_detail.php?id=147#

ver ejemplodescargar archivos
categorias: ActionScript 2 Coment.: 10

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

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