Formatos de video. MPEG, FLV y AVI.

Como existe diferentes tipos de formato de imágenes tales como TPEG, TIFF, GIF etc. También para los videos, entender porque y como funcionan dichos formatos ayudara considerablemente lograr mejores resultados en nuestra Web.

Que es un vídeo MPEG:

Las siglas MPEG corresponden a Moving Picture Experts Group el cual es un grupo de trabajo encargado de impulsar estándares con respecto al uso de las imágenes.

Los videos en dicho formato tienen por característica una compresión que los hace más livianos al momento de transportar. El sistema de compresión consiste de la fragmentación de los datos y el almacenamiento de aquellos que son diferentes, los cuales se repitan son quitados logrando una mejora en el peso total del archivo.

En la antigüedad este sin dudas fue uno de los formatos más adecuados y prometedores para la Web. Actualmente se considera desestimado con respecto a otros formatos como H264 o OGG Theodora que prestan mejor calidad / rendimiento.

Que es un vídeo AVI:

El formato AVI (siglas en inglés de Audio Video Interleave) es el formato propuesto por Microsoft desde 1992 como contenedor de videos y audio.

El video o audio no necesariamente tiene que ser AVI, ya que este es un contenedor, el códec que interpreta el flujo puede reproducir otros formatos como DivX, MP3, AC3 etc.

La propiedad más importante de este formato es sin dudas su capacidad de contener varios flujos de información en el mismo fragmento de datos. Esta capacidad se denomina interleave y es la que nos da la posibilidad de cuando vemos una película poder cambiar el audio de un idioma a otro. Por ende quiere decir que el cuadro y el sonido van vinculados unos con  el otro.

Este formato aun sigue siendo muy popular dado que la distribución de películas hogareñas en su mayoría CD-ROM contó con versiones en AVI DviX logrando muy buena calidad sin requerir un DVD-R.

En la actualidad es muy raro ver la implementación de AVI en Web.

Que es un vídeo  FLV:

Flash Video es un formato contenedor a igual que AVI diseñado para transmitir video en la Web. El formato fue creado por la empresa Macromedia y continuado por Adobe después de su adquisición. Flash video puede ser reproducido por el Flash Player principalmente aunque si se instala los códec de ffdshow tambien se pueden reproducir en otros player como Windows media. Actualmente Flash Player se encuentra en casi toda la población de equipos por lo tanto es un formato muy popular lo que llevo a sitios como YouTube, Yahoo video y Google video a utilizarlo como reproductor estándar.

La calidad del video en general es buena, después de las version 8 se introdujo un nuevo códec de compresión On2 TrueMotion lo que incremento la calidad considerablemente. Las últimas versiones de FVL ya trabajan con soporte H264 brindando calidad en alta definición (HD).

¿Entonces que formato de vídeo usamos para Internet?

Claro esta que para web lo ideal es usar Flash video, por sus prestaciones tanto en peso / calidad y la nueva disponibilidad de soportar video en HD. Pero no solo esas cualidades son las que lo destaca del resto, tenemos que considerar que Flash Video puede interactuar con el lenguaje de programación que interpreta el Flash Player (ActionScript).

Este ultimo nos abre un océano de posibilidades, desde la manipulación del tiempo, eventos, a interactividad. El video como secuencia lineal con Flash video ya no lo es mas, y pasa se ahora un medio interactivo con el usuario.

También Flash video cuenta con la posibilidad de manejar canales alpha (transparentes) para lograr montajes sobre fondos croma  y el poder transmitir en Flash video en modo streaming (vivo) a una cantidad de usuarios al mismo tiempo.

Actualmente es el formato de mayor uso, penetración y compatibilidad, desde películas, programas en vivo hasta salas de chat con audio y video, son las posibilidades que brinda Flash Video.

El reproductor de FLV.

Para reproducir un video en formato FLV, puede realizarlo desde una aplicación de terceros como por ejemplo Mplayer, o incorporar el video en un archivo FLA (Flash). También puede leerlos en modo streaming utilizando algún reproductor.

¿Como convierto archivos AVI, MPEG a FLV?

Cuando se instala el programa de desarrollo Adobe Flash, el mismo incluye una aplicación llamada Flash Video Encoder. Esta es la encargada de convertir formatos como AVI, MPEG, MOV, MP4, MP3 etc. a formato FLV.

También existen aplicaciones de conversión de terceros. Aunque lo recomendable es usar la de Adobe si es que queremos conseguir buenos resultados.

Es importante destacar que para convertir formatos de video a Flash video, es necesario tener instalado QuickTime, ya que este nos brindara de los códec secundarios que requiere el Flash Video Endoder.

Incluir videos de Youtube en tu swf, descagar video youtube con flash, lista personalizada de videos youtube en flash

(08-10-2009) NOTICIA!: Nuevamente el problema de que no se veian los videos ya esta solucionado! descarguen los nuevos files ;)

Navegando por la pagina de unijimpe me encontré con un tuto en php para descargar video de youtube simplemente indicando el valor de id del video, me pareció una excelente idea más si dicha idea podíamos aprovecharla en flash para crear un reproductor con nuestra propia lista de videos y un reproductor armado por nosotros mismos.

reproductor.jpg

Bueno ante que todo se agradece a unijimpe por el php que dio origen a todo el AS que desarrolle.

Es muy simple de utilizar, para flash simplemente utilizamos la clase NetStream y para indicar los videos que deseamos, construimos un archivo de tipo xml para indicar la lista de videos de youtube a reproducir. Con la posibilidad de también cargar un titulo y pequeña descripción del video.

En la estructura del xml, el atributo id=”” dentro de las comillas debe ir el id de video que vemos en youtube, en la siguiente imagen se resalta lo que deben copiar y pegar.
Puede pasar que la url sea así: http://youtube.com/watch?v=NyoCQ9WA0PY&feature=related en ese caso el id es el la parte resaltada en bold http://youtube.com/watch?v=NyoCQ9WA0PY&feature=related

id.jpg

Entre las etiquetas CDATA indicamos la descripción del video como así en el atributo titulo el valor o cadena de texto para dicho título.

El xml utilizado:

  1. <![CDATA[Presentación equipo subaru rally 2007 para el campeonato del mundo 2008]]>
  2. </video>
  3. <video id="GF4qad2sj00" titulo="Capusotto">
  4. <![CDATA[Me encanta este video!]]>
  5. </video>
  6. <video id="6qEcX01WrNk" titulo="Previa de Soda en Cba">
  7. <![CDATA[Se presento soda y fue toda una fiesta, impresionante!]]>
  8. </video>
  9. <video id="do1dAX-IVTE" titulo="El bananero - Harry Potter">
  10. <![CDATA[Aca un video para morirse de risa del amigo elbananero]]>
  11. </video>
  12. <video id="qAWFk63Lrmw" titulo="Battlefield 2142 U2">
  13. <![CDATA[Este un video que lo puse porque si nomas no tenia ganas de buscar ni de escribir]]>

Actionscript utilizado para el reproductor:

ActionScript
< view plain text >
  1. //Dominio donde esta alojado nuestro php
  2. var dominio:String = "";
  3. //nuestro php propiamente dicho
  4. var FilePHP:String = "phpyoutube.php";
  5. //nuestro xml con la lista de videos
  6. var FileXML:String = "videos.xml";
  7. //el valor de id del video en youtube
  8. var id:String = "";
  9. //
  10. var contador:Number = 0;
  11. //
  12. var miXML:XML = new XML();
  13. miXML.ignoreWhite = true;
  14. //
  15. var ListVideos:Array = new Array();
  16. miXML.onLoad = function(ok) {
  17. if (ok) {
  18. ListVideos = this.firstChild.childNodes;
  19. cantVideos_txt.text = "total videos: "+String(ListVideos.length);
  20. id = ListVideos[0].attributes.id;
  21. cargarVideo();
  22. loadDtaVdo();
  23. //
  24. } else {
  25. }
  26. };
  27. miXML.load(dominio+FileXML);
  28. //aca recibimos el resultado del php
  29. var result_lv:LoadVars = new LoadVars();
  30. result_lv.onLoad = function(success:Boolean) {
  31. if (success) {
  32. /*********************************************/
  33. //desde aqui el cambio realizado para el 08-10-2009
  34. var varsTemp:LoadVars = new LoadVars()
  35. varsTemp.decode(String(this))
  36. var urlText:String = varsTemp.toString()
  37. urlText = urlText.substr(35,urlText.length)
  38. urlText = urlText.split('%2C').join(',');
  39. urlText = urlText.split('%2E').join('.');
  40. urlText = urlText.split('%2F').join('/');
  41. urlText = urlText.split('%3F').join('?');
  42. urlText = urlText.split('%3D').join('=');
  43. urlText = urlText.split('%3A').join(':');
  44. my_ns.play(urlText);
  45. //hasta aqui el cambio realizado para el 08-10-2009
  46.  
  47. } else {
  48. trace("Error connecting to server.");
  49. }
  50. };
  51. //enviamos los datos al php
  52. var send_lv:LoadVars = new LoadVars();
  53. function cargarVideo() {
  54. status_txt._visible = true;
  55. status_txt.text = "cargando...";
  56. send_lv.item = id;
  57. send_lv.type = 0;
  58. send_lv.sendAndLoad(dominio+FilePHP,result_lv,"GET");
  59. }
  60. //el encargado de cargar y reproducir el video
  61. var my_video:Video;
  62. var my_nc:NetConnection = new NetConnection();
  63. my_nc.connect(null);
  64. var my_ns:NetStream = new NetStream(my_nc);
  65. my_video.attachVideo(my_ns);
  66. //suavizado del video
  67. my_video.smoothing = true;
  68. //duracion del buffer
  69. my_ns.setBufferTime(4);
  70. //duracion del video
  71. my_ns.onMetaData = function(infoObject:Object) {
  72. //trace(Math.floor(infoObject.duration));
  73. };
  74. //enviamos datos de que esta sucediendo
  75. my_ns.onStatus = function(infoObject:Object) {
  76. if (infoObject.code == "NetStream.Buffer.Full") {
  77. status_txt._visible = false;
  78. }
  79. if (infoObject.code == "NetStream.Play.Start") {
  80. status_txt._visible = true;
  81. buffer();
  82. }
  83. if (infoObject.code == "NetStream.Play.Stop") {
  84. status_txt.text = "Video finalizado!";
  85. }
  86. if (infoObject.code == "NetStream.Play.StreamNotFound") {
  87. status_txt.text = "No se encontro el video!!!";
  88. }
  89. };
  90. //con esto sabemos si ya esta el buffer listo!
  91. function buffer() {
  92. this.onEnterFrame = function() {
  93. var porcentaje:Number = Math.min(Math.round(my_ns.bufferLength/my_ns.bufferTime*100), 100);
  94. status_txt.text = "Buffer:"+porcentaje+"%";
  95. if (porcentaje == 100) {
  96. delete this.onEnterFrame;
  97. }
  98. };
  99. }
  100. //un efectito fade
  101. MovieClip.prototype.fade = function(direccion:String, velocidad:Number) {
  102. if (direccion == "in") {
  103. var efecto = mx.transitions.easing.Regular.easeIn;
  104. this.mi_Tween = new mx.transitions.Tween(this, '_alpha', efecto, this._alpha, 100, velocidad, true);
  105. } else {
  106. var efecto = mx.transitions.easing.Regular.easeOut;
  107. this.mi_Tween = new mx.transitions.Tween(this, '_alpha', efecto, this._alpha, 0, velocidad, true);
  108. }
  109. };
  110. //creamos la funcionalidad de los botones y cargamos los datos de la info
  111. function loadDtaVdo() {
  112. for (var i = 0; i&lt;2; i++) {
  113. this["video"+i].fdoFicha_mc._alpha = 0;
  114. this["video"+i]._alpha = 0;
  115. this["video"+i].fade("in",0.5);
  116. var temp = this["video"+i].fdoFicha_mc;
  117. this["video"+i].reproducir_mc.fondo = temp;
  118. this["video"+i].mini_mc.loadMovie("http://img.youtube.com/vi/"+ListVideos[contador].attributes.id+"/1.jpg");
  119. this["video"+i].titulo_txt.text = ListVideos[contador].attributes.titulo;
  120. this["video"+i].descripcion_txt.text = ListVideos[contador].firstChild;
  121. //
  122. this["video"+i].reproducir_mc.id = ListVideos[contador].attributes.id;
  123. this["video"+i].reproducir_mc.onRelease = function() {
  124. video0.fdoFicha_mc._alpha = 0;
  125. video1.fdoFicha_mc._alpha = 0;
  126. this.fondo.fade("in",0.5);
  127. id = this.id;
  128. cargarVideo();
  129. //
  130. };
  131. if (this["video"+i].reproducir_mc.id == id) {
  132. this["video"+i].fdoFicha_mc.fade("in",0.5);
  133. }
  134. if (contador == ListVideos.length-1) {
  135. contador = 0;
  136. } else {
  137. contador++;
  138. }
  139. }
  140. }
  141. //accion boton siguiente
  142. siguiente_btn.onRelease = function() {
  143. loadDtaVdo();
  144. };
  145. //

Visor de fotos panorámicas 360º AS2

A pedido de Nicolás Pisano, autor del sitio Postal Social, Profesor de Diseño y tipografía del Instituto Superior Aguas de la Cañada, me hace llegar la necesidad de este controlador para visualizar fotos panorámicas en 360º. Para empezar vale aclarar que el ejemplo es muy simple y en la web se encuentran disponibles muchos más ejemplos, pero como todo me gusta hacer las cosas por mi cuenta y usar el cerebelo para algo más que llevar pelo, aunque después del corte de cabello, por fin mi mamá pudo (18 años despues) decir “por fin te cortaste como un hombrecito…” pero bueno esa es otra cuestión y mucho más complicada que este AS.

En principio no hay nada de lo de siempre, un movieClipLoader, unos onEnterFrame, una carga de XML. Se planteo cargar la imagen y repetirla a modo que nos quede 2 imágenes. Luego se coloco una después de otra y se detecto la posición de ambas para que siempre estén juntas sea antes de una o después de la otra según en el sentido que se desplace. En el AS van a poder apreciar mejor el funcionamiento concreto.
Nota: estoy rindiendo así que la versión en AS3 se las debo para la semana que viene! ;)

ActionScript
< view plain text >
  1. //para cargar una img externa
  2. var mcLoader:MovieClipLoader = new MovieClipLoader();
  3. var escuchar:Object = new Object();
  4. //por si necesitamos indicar un dominio ext
  5. var DOMINIO:String = "";
  6. //nuestro xml
  7. var URLxml:String = "360.xml";
  8. //variables nesarias...
  9. var ancho:Number = 0;
  10. var vel:Number = 0;
  11. var miArray:Array = new Array();
  12. var miXML:XML = new XML();
  13. miXML.ignoreWhite = true;
  14. //el famoso onLoad del xml (es mas lindo en AS3 trabajar con xml)
  15. miXML.onLoad = function(ok) {
  16.     if (ok) {
  17.         miArray = this.firstChild;
  18.         ancho = Number(miArray.attributes.ancho);
  19.         init();
  20.     } else {
  21.     }
  22. };
  23. miXML.load(DOMINIO+URLxml);
  24. //inicializamos los comportamientos
  25. function init() {
  26.     for (var i:Number = 0; i<2; i++) {
  27.         //creamos los 2 contenedores
  28.         var temp:MovieClip = this.attachMovie("cont", "cont"+i, this.getNextHighestDepth());
  29.         temp.createEmptyMovieClip("int_mc",10);
  30.         //los acomodamos
  31.         temp._x = ancho*i;
  32.         //cargamos la misma imagen en los 2 contenedores
  33.         mcLoader.loadClip(DOMINIO+miArray.attributes.img,temp.int_mc);
  34.         //detectamos donde está el contenedor y si es necesario (a quien te hace acordar¿?) rotarlo
  35.         temp.onEnterFrame = function() {
  36.             this._x += vel;
  37.             if (this._x>ancho) {
  38.                 this._x -= ancho*2;
  39.             }
  40.             if (this._x<ancho*-1) {
  41.                 this._x += ancho*2;
  42.             }
  43.         };
  44.     }
  45.     //función encargada de detectar la posc. del mouse y velocidad de movimiento del cont.
  46.     this.onEnterFrame = function() {
  47.         vel = int(((this._xmouse-Stage.width/2)/-Stage.width)*10);
  48.     };
  49.     //imprimimos el campo de texto para el titulo
  50.     if (miArray.attributes.titulo != "") {
  51.         this.createTextField("titulo_txt",this.getNextHighestDepth(),0,0,10,10);
  52.         var textFormat:TextFormat = new TextFormat();
  53.         var aling:String = miArray.attributes.alingText;
  54.         titulo_txt.autoSize = true;
  55.         textFormat.font = "Arial";
  56.         textFormat.color = Number(miArray.attributes.colorFont);
  57.         textFormat.size = 10;
  58.         textFormat.rightMargin = 5;
  59.         textFormat.leftMargin = 5;
  60.         titulo_txt.text = miArray.attributes.titulo;
  61.         titulo_txt.background = true;
  62.         titulo_txt.backgroundColor = Number(miArray.attributes.colorBack);
  63.         titulo_txt.setTextFormat(textFormat);
  64.         //alineamos el campito
  65.         switch (aling) {
  66.             case "top-left" :
  67.                 titulo_txt._x = 0;
  68.                 titulo_txt._y = 0;
  69.                 break;
  70.             case "top-right" :
  71.                 titulo_txt._x = Stage.width-titulo_txt._width;
  72.                 titulo_txt._y = 0;
  73.                 break;
  74.             case "button-left" :
  75.                 titulo_txt._x = 0;
  76.                 titulo_txt._y = Stage.height-titulo_txt._height;
  77.                 break;
  78.             case "button-right" :
  79.                 titulo_txt._x = Stage.width-titulo_txt._width;
  80.                 titulo_txt._y = Stage.height-titulo_txt._height;
  81.                 break;
  82.         }
  83.     }
  84. }
  85. //estas son verduras (listeners) para la imagen cuando se carga,
  86. //esto ya es figurita repetida, en otros tutos esta explicado como funciona
  87. escuchar.onLoadInit = function(target:MovieClip) {
  88. };
  89. escuchar.onLoadStart = function(target:MovieClip) {
  90.     load_mc._x = (Stage.width/2)-(load_mc._width/2);
  91.     load_mc._y = (Stage.height/2)-(load_mc._height/2);
  92.     load_mc._visible = true;
  93. };
  94. escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
  95.     load_mc._visible = false;
  96. };
  97. mcLoader.addListener(escuchar);

Así es el XML donde pasamos todos los parámetros

  1. <360 titulo="Prueba LeoBaraldi" alingText="button-right" colorBack="0x000000" colorFont="0xFFFFFF" img="pano.jpg" ancho="2062"></360>

Los atributos del xml son muy simples pero por si las moscas explico:
titulo: Aquí colocas un titulo si quieres, sino lo hay el flash no imprime la caja de texto
alingText: Que posición se ubica la caja de texto (top-left – top-right – button-left – button-right)
colorBack: Color de fondo de la caja (valor hexadecimal) ejemplo: 0xFF0000 = rojo
colorFont: Color de la fuente
img: Url o nombre del archivo de imagen, puede ser jpg, png, gif o swf
ancho: Colocas el ancho de la imagen que vas a cargar

De mas esta decir que si quieres modificar las medidas del swf simplemente abre el fla, cambia las medidas publícalo y listo! no es necesario nada más!

Formulario Whois para multiples dominios

En el post anterior publique un SWF para consultar dominios .com.ar y dado a las consultas por uno que consulte otros dominios acá les dejo esta nueva versión para múltiples dominios (com.ar, net, com, tv, org, info y ws) más un formulario de registro si es que el cliente quiere encargarlo.

Se requiere php, Flash9

ActionScript
< view plain text >
  1. String.prototype.findstring = function(string) {
  2. if (this.indexOf(string) != -1) {
  3. resultado_mc.gotoAndStop(3);
  4. return true;
  5. } else {
  6. resultado_mc.gotoAndStop(2);
  7. return false;
  8. }
  9. };
  10. //
  11. dominio_txt.restrict = "a-z 0-9^.@";
  12. var whoisAr:String = "whois.php";
  13. var whoisAll:String = "whoisphp/example.php";
  14. //aca indicamos el html o lo que sea donde este formulario para registrar el dominio
  15. var urlFormDisponible:String = "formulario-contratar.php";
  16. var resultado:String = "";
  17. var Dominios:Array = new Array();
  18. Dominios.push(".com.ar",".com",".net",".org",".info",".ws",".tv",".biz");
  19. var dominioSlect:String = ".com.ar";
  20. resultado_txt.html = true;
  21. //
  22. function comprobar(nombre) {
  23. resultado_txt.text = "";
  24. loading_mc._visible = true;
  25. resultado_mc._visible = false;
  26. //
  27. var my_lv:LoadVars = new LoadVars();
  28. if (dominioSlect != ".com.ar") {
  29. my_lv.query = nombre+dominioSlect;
  30. my_lv.sendAndLoad(whoisAll,my_lv,"GET");
  31. my_lv.onLoad = function() {
  32. resultado = unescape(my_lv.toString());
  33. if (_root.resultado.findstring("No match for") || _root.resultado.findstring("Not found") || _root.resultado.findstring("NOT FOUND")) {
  34. resultado_txt.htmlText = "<strong><span style="color: #006600;">Nombre DISPONIBLE! Si quieres contrar este nombre, hace <span style="text-decoration: underline;"><a href="&quot;+urlFormDisponible+&quot;?plan=6&amp;dominio=&quot;+dominio_txt.text+dominioSlect+&quot;">clic AQUI!!!</a></span></span></strong>";
  35. } else {
  36. resultado_txt.htmlText = "<strong><span style="color: #660000;">Nombre NO DISPONIBLE! Intenta con otro nombre o otro tipo de dominio.</span></strong>";
  37. }
  38. comprobar_btn.enabled = true;
  39. loading_mc._visible = false;
  40. resultado_mc._visible = true;
  41. };
  42. } else {
  43. my_lv.nombre = nombre;
  44. my_lv.sendAndLoad(whoisAr,my_lv,"GET");
  45. my_lv.onLoad = function() {
  46. resultado = unescape(my_lv.toString());
  47. if (_root.resultado.findstring("disponible")) {
  48. resultado_txt.htmlText = "<strong><span style="color: #006600;">Nombre DISPONIBLE! Si quieres contrar este nombre, hace <span style="text-decoration: underline;"><a href="&quot;+urlFormDisponible+&quot;?plan=6&amp;dominio=&quot;+dominio_txt.text+dominioSlect+&quot;">clic AQUI!!!</a></span></span></strong>";
  49. } else {
  50. resultado_txt.htmlText = "<strong><span style="color: #660000;">Nombre NO DISPONIBLE! Intenta con otro nombre o otro tipo de dominio.</span></strong>";
  51. }
  52. comprobar_btn.enabled = true;
  53. loading_mc._visible = false;
  54. resultado_mc._visible = true;
  55. };
  56. }
  57. }
  58. //
  59. comprobar_btn.onRelease = function() {
  60. if (dominio_txt.text != "") {
  61. this.enabled = false;
  62. comprobar(dominio_txt.text);
  63. } else {
  64. resultado_txt.htmlText = "<strong><span style="color: #ff0000;">Introduce un nombre a buscar...</span></strong>";
  65. resultado_mc.gotoAndStop(1);
  66. }
  67. };
  68. loading_mc._visible = false;
  69. //
  70. for (i=0; i
  71. combo.addItem({data:Dominios[i], label:Dominios[i]});
  72. }
  73. var cbListener:Object = new Object();
  74. cbListener.change = function(evt_obj:Object):Void  {
  75. var currentlySelected:Object = evt_obj.target.selectedItem;
  76. dominioSlect = currentlySelected.data;
  77. };
  78. combo.addEventListener("change",cbListener);

Los archivos fuentes, xhtml del formulario de registro y PHP los tienen todos disponibles en los files para descargar, recuerden de subir todo a su servidor para probarlo y en el formulario indicar la casilla de destino del mismo.

Hacer formulario Whois para dominios .com.ar

Bueno mirando y mirando no encontré nada, como saben mi herramienta preferida es flash y como esto lo necesitaba de urgencia para un trabajo que estoy armando dio como resultado en unas horitas un Whois para saber la disponibilidad de nombres de dominios .com.ar.
Bueno se los dejo porque vi muchas consultas sobre el tema, espero que sirva!

ActionScript
< view plain text >
  1. //simple proto para buscar una cadena
  2. String.prototype.findstring = function(string) {
  3. if (this.indexOf(string) != -1) {
  4. return true;
  5. } else {
  6. return false;
  7. }
  8. };
  9. //aca si queremos definir un dominio donde esta nuestro swf
  10. var dominio:String = "";
  11. //el php que hace la consulta
  12. var file:String = "whois.php";
  13. //almaceno el resultado
  14. var resultado:String = "";
  15. //compruebo si esta disponible
  16. function comprobar(nombre) {
  17. resultado_txt.text = "";
  18. loading_mc._visible = true;
  19. //
  20. var my_lv:LoadVars = new LoadVars();
  21. my_lv.nombre = nombre;
  22. my_lv.sendAndLoad(dominio+file,my_lv,"GET");
  23. my_lv.onLoad = function() {
  24. resultado = unescape(my_lv.toString());
  25. if (_root.resultado.findstring("disponible")) {
  26. resultado_txt.text = "&lt; -- SI esta disponible!";
  27. } else {
  28. resultado_txt.text = "&lt;-- NO disponible!";
  29. }
  30. comprobar_btn.enabled = true;
  31. loading_mc._visible = false;
  32. };
  33. }
  34. //accion del boton
  35. comprobar_btn.onRelease = function() {
  36. if (dominio_txt.text != "") {
  37. this.enabled = false;
  38. comprobar(dominio_txt.text);
  39. } else {
  40. resultado_txt.text = "&lt;--indica un dominio";
  41. }
  42. };
  43. loading_mc._visible = false;

Tambien para esto se utiliza un php que esta incluido en los files para descargar

Como usar archivos XML en Flash

Cuando nos encontramos con proyectos donde el cliente debe cargar datos de tipo dinámicos o datos que son sensibles a nuevos cambios la mejor manera de afrontar esos proyectos es usando XML, el potencia que tiene un XML es la posibilidad de manipular grande cantidades de información de una manera organizada y estructurada y simple de modificar, sin la necesidad de tocar nuestro SWF.

Para aquellos que quieran saber cómo construir un archivo de tipo XML o quieran saber cómo es su estructura les vendrá bien leer el siguiente artículo: http://www.leobaraldi.com.ar/2008/03/09/que-es-un-archivo-xml-y-escribir-archivos-xml
En este artículo veremos cómo cargar y gestionar un archivo XML para una galería de imágenes que el mismo roten con un intervalo de tiempo mas los controles habituales e información para cada imagen. En este caso también vamos a hacer uso de AS 2.0 recuerden que todos estos tutoriales vamos a ir pasándolos a AS 3.0 a medida que el tiempo surja.
Para utilizar XML flash cuenta con una clase nativa para ello, la cual nos permite manipular XML, nodos, métodos y parámetros de todo tipo. Como toda clase simplemente para comenzar a utilizarla debemos crear un nuevo objeto de tipo XML de la siguiente manera:
var miXML:XML = new XML();

Los siguientes pasos seria comenzar a levantar la información de nuestro XML y guardarla en el objeto XML que creamos (miXML), para ello usaremos el siguiente método load y el controlador onLoad para saber que sucede con nuestros datos. Ahora en mas la explicaciones van dentro del código cosa que vamos ir viendo paso a paso como trabajar el objeto XML.
Antes que todo vamos a necesitar por supuesto tener nuestro XML con su estructura y datos ya conformados, en este caso particular lo vamos a diseñar de la siguiente manera.

Importante: Nunca olvidarse de los cierre de cada nodo, sea padre o hijos!!!

Una vez que ya tenemos nuestro archivo XML con su estructura definida ya podemos pasar a nuestro AS, no es necesario por ahora que nuestro XML tenga todos los datos cargados, simplemente con que ya tengamos su estructura es suficiente para comenzar, después a su momento editaremos el XML con la información real requerida.

ActionScript
< view plain text >
  1. //System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
  2. var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
  3. var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
  4. miXML.ignoreWhite = true;//Que ignore las líneas en blanco que puedan existir entre nodos y nodos
  5.  
  6. //El siguiente paso sería cargar nuestro archivo XML atreves de un controlador (onLoad)
  7. miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
  8. if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
  9. trace("carga exitosa!!!")
  10. } else {//si la carga no se realizo ejecutamos lo siguiente
  11. trace("error al cargar XML");
  12. }
  13. };
  14. miXML.load(urlXML);//iniamos la carga de nuestro XML, la función superior se encargara
  15. //de detectar si se realizo con éxito o no

Hasta aquí lo único que se realizo fue la carga a nuestro SWF del XML, posteriormente ahora trabajaremos en el uso del mismo. El paso más importante a continuación es guardar todos los nodos hijos (foto) y su información en un Array, ser como que cada uno de los nodos con todos sus datos lo pusiéramos en una carpeta individual para cada nodo y todas estas carpetas dentro de un archivador que ser nuestro Array.

ActionScript
< view plain text >
  1. //System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
  2. var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
  3. var id:Number = 0;//esta variable de tipo numérica es para indicar que hijo queremos llamar, ya que
  4. //los Array funcionan como un casillero diferenciados por numero
  5. var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
  6. miXML.ignoreWhite = true;//Que ignore las líneas en blanco que puedan existir entre nodos y nodos
  7.  
  8. //El siguiente paso sería cargar nuestro archivo XML atreves de un controlador (onLoad)
  9. miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
  10. if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
  11. misNodos_Array = this.firstChild.childNodes;//creamos una variable de tipo array donde almacenamos
  12. //cada uno de los nodos. La partícula this hace referencia a miXML, firstChild es el nodo principal
  13. //de nuestro XML y childNodes son los nodos que están dentro del nodo principal
  14. //en definitiva le indicamos que solo guarde TODOS los nodos después del nodo principal.
  15. //si después de esta línea pusiéramos trace(misNodos_Array) el panel de salida nos muestra los
  16. //nodos almacenados en nuestro Array
  17. mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc); //cargamos el primer nodo
  18. //misNodos_Array[id] &lt; ----este es el nodo que llamamos, entre [ ] va el numero referencia a la posición
  19. //que ocupa en el array, en este caso (0) - .attributes.url &lt; --- con la partícula attributes indicamos
  20. //que atributo queremos cargar, en este caso la url que le corresponde al nodo 0
  21. comenzarIntervalo();//inicializamos el temporizador
  22. } else {//si la carga no se realizo ejecutamos lo siguiente
  23. trace("error al cargar XML");
  24. }
  25. };
  26. miXML.load(urlXML);//iniciamos la carga de nuestro XML, la función superior se encargara
  27. //de detectar si se realizo con éxito o no
  28. //FUNCION ENCARGADA DE CARGAR LAS FOTOS
  29. function loadImagen() {
  30. if (id //ultima foto que regrese a la primera y asi perpetuamente
  31. id++;//incremento el valor de id, este es la referencia a la posición del array
  32. } else {
  33. id = 0;//si llegue al final del array comienzo de nuevo el recorrido
  34. }
  35. mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc);//cargamos la imagen
  36. }
  37. //OTROS ELEMENTOS NECESARIOS
  38. this.createEmptyMovieClip("contenedor_mc",this.getNextHighestDepth());//creamos un contenedor donde enviar
  39. //nuestras imágenes
  40.  
  41. //ACCION DE CARGA POR INTERVALOS DE TIEMPO
  42. var intervalId:Number;
  43. var duracion:Number = 10000;//tiempo de espera entre foto y foto en milisegundos 1000=1 segundo
  44. function comenzarIntervalo():Void {
  45. if (intervalId != null) {
  46. clearInterval(intervalId);
  47. }
  48. intervalId = setInterval(this, "loadImagen", duracion);
  49. }
  50.  
  51. //GESTOR DE CARGA DE IMAGENES
  52. var mcLoader:MovieClipLoader = new MovieClipLoader();
  53. var escuchar:Object = new Object();
  54. escuchar.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {//porcentaje de carga de la imagen
  55. var persoTotal = bytesTotal;
  56. var cargados = bytesLoaded;
  57. var porcentaje = Math.round(cargados*100/persoTotal);
  58. var miFormat:TextFormat = new TextFormat();//formateo el campo de texto %
  59. miFormat.size = 40;
  60. miFormat.color = 0xFFFFFF;
  61. miFormat.font = "arial";
  62. porcentaje_txt.text = porcentaje+"%";
  63. porcentaje_txt.setTextFormat(miFormat);
  64. };
  65. escuchar.onLoadInit = function(target:MovieClip) {
  66. };
  67. escuchar.onLoadStart = function(target:MovieClip) {
  68. //creo el campo de texto para porcentaje
  69. target._parent.createTextField("porcentaje_txt",target._parent.getNextHighestDepth(),10,10,1,1);
  70. porcentaje_txt.autoSize = true;
  71. porcentaje_txt.background = true;
  72. porcentaje_txt.backgroundColor = 0x000000;
  73. descripcion_txt.text = "";
  74. descripcion_txt.removeTextField();
  75. };
  76. escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
  77. porcentaje_txt.removeTextField();
  78. //creo el campo de texto para la descripcion
  79. target._parent.createTextField("descripcion_txt",target._parent.getNextHighestDepth(),0,Stage.height-40,Stage.width,35);
  80. descripcion_txt.autoSize = false;
  81. descripcion_txt.textColor = 0xFFFFFF;
  82. descripcion_txt.background = true;
  83. descripcion_txt.backgroundColor = 0x000000;
  84. descripcion_txt.text = " "+misNodos_Array[id].attributes.titulo+" "+newline;
  85. descripcion_txt.text += " "+misNodos_Array[id].firstChild+" ";
  86. efectoBlur();
  87. };
  88. mcLoader.addListener(escuchar);
  89.  
  90. //EFECTO BLUR PARA CADA IMAGEN CARGADA
  91. function efectoBlur() {
  92. import flash.filters.BlurFilter;
  93. var blurX:Number = 30;
  94. var blurY:Number = 30;
  95. var quality:Number = 3;
  96. var filterArray:Array = new Array();
  97.  
  98. this.onEnterFrame = function() {
  99. var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
  100. filterArray.push(filter);
  101. contenedor_mc.filters = filterArray;
  102. blurX--;
  103. blurY--;
  104. filterArray = [];
  105. if (blurX&lt; =0 || blurY&lt;=0) {
  106. delete this.onEnterFrame;
  107. }
  108. };
  109. }

En el siguiente grafico pueden darse cuenta cómo funciona la estructura del XML y como flash la interpreta según este caso particular, pero el principio general es el mismo en todos los casos

En conclusión como pueden observar simplemente con pocas líneas de AS y un archivo XML hemos logrado una pequeña y simple galería que solo pesa 2kb y es totalmente actualizable desde afuera del SWF con solo modificar el XML . Estar de mas decir e imaginar las virtudes y posibilidades que dan el uso de archivos XML.