Incluir HTML en Flash

Una de las tareas mas comunes es la posibilidad de incluir tags html en flash. Para ello hay una serie de tags soportados los cuales podemos utilizar para dar formato a nuestros campos de texto.

Tags Soportados
Obviamente Flash no soporta todos los tags html, pero si una variedad muy interesante que nos permitirá formatear correctamente los textos.

  • <a>: son enlaces de texto que puede llamar a un URL.
  • <b>: texto en negrita.
  • <font>: fuente de los textos, soporta el tipo de letra, tamaño y color.
  • <i>: texto en itálica o cursiva.
  • <p>: párrafo, acepta alineación a la derecha, izquierda y centro.
  • <u>: texto subrayado.
  • <br>: salto de linea
  • <img>: para incluir imágenes externas (JPEG, GIF, PNG), SWFs y MovieClip en los campos de texto.
  • <li>: elemento de de una lista. Solo se aceptan listas sin orden y no es necesario utilizar ol o ul.
  • <span>: solo disponible para aplicas estilos CSS.

Aplicando HTML en Flash
Para poder aplicar html el flash, es necesario que el campo de texto donde vamos a insertar sea del tipo html y luego asignamos el contenido con la propiedad htmlText. Entonces si tenemos un campo de texto llamado detalle, entonces:

[as]
detalle.html = true;
detalle.htmlText = «Hola unijimpe«;
[/as]

Luego si deseamos por ejemplo deseamos cargar un archivo externo que contiene un texto html. Entonces sea que tengamos un archivo llamado content.txt que contiene el siguiente texto.

txt=Caracteristicas
Entre las características de Adobe Media Player tenemos:
  • Reproducción de archivos FLV desde tu computador.
  • Reproducción de vídeo Streaming o vídeo Online.
  • Doble click sobre un FLV y reproduce el video.
  • Thumbnails de los videos.
  • Extraido de: Adobe Labs

    Luego, utilizamos la clase LoadVars para hacer la carga del txt en nuestro flash de la siguiente forma:

    [as]
    var loadtxt:LoadVars = new LoadVars();
    loadtxt.load(«content.txt»);
    loadtxt.onLoad = function() {
    detalle.html = true;
    detalle.htmlText = this.txt;
    }
    [/as]

    Con lo cual obtenemos el siguiente resultado, en el cual hemos aplicado color, listas y enlaces al texto:

    [SWF]http://blog.unijimpe.net/wp-content/uploads/2007/11/html-flash.swf, 380, 190[/SWF]

    Si desean obtener mas información acerca de incluir html en flash pueden visitar la documentación en Using HTML text formatting in Flash CS3 Professional. Finalmente les dejo los archivos fuente de este post para descargar.

    Comentarios Total 31 comentarios

    Firewall
    Publicado: 10/11/2007 11:13 pm

    como simpre muy buenos tutos en tu blog

    El increíble CptSpiff
    Publicado: 13/11/2007 8:56 am

    Hola. Gracias por este tutorial el de subidas de archivos me vino genial.

    Sólo una observación, las palabras que están dentro de las etiquetas b o i no me aparecen.

    ¿Es algún fallo en el flashplayer?

    Muchas Gracias

    Ramiro Ramirez
    Publicado: 16/11/2007 4:01 pm

    Muy buenos los tutoriales, y bastante utiles.

    pablo
    Publicado: 21/11/2007 11:18 am

    Muy bueno a mi la que mas util me ha sido ultimamente ha sido textformat iamginate que tienes un parrafo con un titular bastante grande y luego texto pequeñajo y el salto de linea automatico del flash te lo mata

    blablablablablabla

    algo por el estilo tiene unas cuantas opciones de este palo que son bastante utiles eso si todo esto petardea como todo lo que hace adobe por ahora todavia no he sido capaz de poner una imagen en una linea sin que me haga salto de linea y otras cosas =)

    Incluir Html en Flash
    Publicado: 20/12/2007 2:02 am

    […] web de unijimpe a sacado un minitutorial de como incluir html en flash, aunque flash no soporta toda la cantidad de código html si una parte bastante importante que […]

    Dante
    Publicado: 13/05/2008 1:53 am

    Como haria para leer feeds rss?

    Carlos
    Publicado: 10/06/2008 10:43 am

    Hay manera de que ponga acentos, ya que no me los pone :(

    jjg
    Publicado: 30/06/2008 2:25 pm

    esta buenisimo este tuto

    Diseño Web Peru
    Publicado: 17/07/2008 7:17 pm

    Que buen aporte Gracias

    Cristina
    Publicado: 17/09/2008 5:45 pm

    ¿Se podrían cargar formularios en html dentro de flash?, solo consigo que me muestre el código del formulario, pero no el formulario en sí. Gracias de antemano.

    unijimpe
    Publicado: 17/09/2008 8:04 pm

    Hola Cristina, si te fijas en el post, hay una lista de los tags aceptados por flash (Que no son muchos) y entre ellos no figuran los tags para la creación de formularios. Los formularios los debes hacer en Flash.

    Gabriela
    Publicado: 06/10/2008 6:30 pm

    UNIJIMPE:
    Alguien sabe si en flash CS3 como puedo hacer para enlazar un archivo .html??? porque tengo una web hecha en flash, pero hice el pageflip y solo se abre en .html y para la misma tengo un enlace de googlemaps, pero me aparece el archivo en .html.
    HELP!

    Gracias, MUCHAS GRACIAS

    unijimpe
    Publicado: 08/10/2008 11:26 pm

    La verdad no entiendo lo que preguntas Gabriela, si eres mas clara te puedo ayudar.

    francisco
    Publicado: 13/11/2008 4:25 pm

    Muy buen tutorial, muchas gracias, lastima que no puedo hacer funcionar la carga del txt externo, no me da error en ningun momento, y aun asi no muestra nada. Chequé el nombre y nada, ayuda por favor
    gracias

    David
    Publicado: 21/03/2009 5:20 am

    Hay manera de que ponga acentos, ya que no me los pone :(
    ->contestando a esta cuenstion la solucion pasa por transformar el archivo de carga en utf8 con php es facil cargas el archivo de texto y lo muestras print utf8_encode(txt);
    y al flash le dices que carque el archivo php en vez del de texto, para saber cargar archivos de texto php consulta manuales que hay un monton.

    Daniel Torres
    Publicado: 02/07/2009 10:30 am

    me encanto muchas gracias

    akram
    Publicado: 29/07/2009 5:15 am

    hola soy akram y he deseñado una marca
    que se llama akramcreaciones
    y con esa marca he hechco un pagena web y esta pagena me ha servido muchesimo en deseñar esta pagena

    si quere alguno verla que entre en esta pagena:
    http://www.theakramweb.tk

    copyright©akramcreaciones
    todos los derechos reservados

    akram
    Publicado: 29/07/2009 5:20 am

    hola de nuevo
    http://www.theakramweb.piczo.com/movingfoto

    tambien esta pagena te ayudara en icnos para tu web

    copyright©akramcreaciones
    todos los drechos reservados

    gracios por su atencion a este comentario.

    Cufa
    Publicado: 07/08/2009 12:11 am

    Estoy intentando levantar el content.txt desde flash, le agrege un pero no me las levanta, no me toma el comando img, alguien me puede ayudar, necesito levantar un html con imagenes desde flash.

    Saludos Gracias

    Joan
    Publicado: 12/05/2010 12:46 pm

    Modificando el ejemplo, he observado que el tag <b> no funciona.

    Me podrían indicar como puedo hacer que funcione?

    Muchas gracias.

    Joan
    Publicado: 12/05/2010 12:47 pm

    Modificando el ejemplo, he observado que el tag «texto en negrita» no funciona.

    Me podrían indicar como puedo hacer que funcione?

    Muchas gracias.

    ruri
    Publicado: 13/06/2010 11:38 pm

    hola, muy interesante, era lo iba buscando, lastima q no se pueda aplicar otros tags.

    queria saber como puedo poner un widget dentro de un flash?? como x ejemplo del twitter, como podria hacer?

    gracias de antemano, esta muy buena la pag!

    avelino
    Publicado: 16/06/2010 5:49 pm

    hola esta muy bueno solo quisiera saber como insertar este codigo:
    Normal for given UID

    solo me sale la parte del h1 este es un codigo que quiero ingresar en mi aplicacion flash para facebook en todo juego que encuentro en facebook siempre aparece mi imagen de perfil dentro del flash osea nose como ingresarlo, pero el post esta muy bueno :) gracias

    sorry ahora lo puse separado el codigo (se activo) tras comentar

    Lex
    Publicado: 09/09/2010 7:25 am

    Usé esto junto a flashvars, pensé que no funcionaría… pero oh! sorpresa! funcionó de maravillas… Como sea, me alegra mucho que compartas lo que sabes… de algún modo he de retribuir la ayuda.

    Gracias.

    Diseño web en Tacna
    Publicado: 15/10/2010 9:04 am

    es justo lo que estaba buscando, solo una duda, se pueden poner parametros a esas etiquetas por ejemplo cosas asi, de todas maneras gracias por el aporte

    Diseño web en Tacna
    Publicado: 15/10/2010 9:05 am

    creo que no salio completo mi comentario me referia a widht, hight margin

    guillermogoya
    Publicado: 22/11/2010 5:20 am

    respecto a la consulta de CARLOS «Hay manera de que ponga acentos,»

    Sólo hay que embeber las fuentes en la caja de texto, concretamente El juego de caracteres latin 1, tiene acentos y ñ

    patagonik
    Publicado: 03/06/2011 11:51 am

    UNIJIMPE. siempre claros tus tutos. Perfectos. Pero como siempre sucede no todo es perfecto. usando AS2 le agrego aun campo de texto dinamico, codigo htlm, reconocido por flash p,img y font. a las imagenes dentro de un parrafo, no les reconoce su altura, es decir tengo 3 parrafos el primero y el ultimo son texto texto el del medio es una imagen . deberia verse:
    texto
    imagen
    texto
    Pero en realidad muestra a los tres parrafos como si fuesen de la misma altura ignorando la altura de la imagen. Quedando el segundo texto al lado de la imagen y no debajo Alguna Idea?

    jhfdsljkhfjksh
    Publicado: 25/09/2012 10:19 am

    esto no me sirvio de nada

    Luis
    Publicado: 30/10/2012 1:57 pm

    Ayuda…
    nesecito crear un link en html dentro de l mismo archivo flash claro pero que me dirija a un fotograma predeterminado ayuda porfa …

    Pablo
    Publicado: 26/12/2013 6:14 pm

    Como puedo alinear una imagen al lado de la otra en un flash con html desde un XML?

    Gracias

     

    Comentar

    En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
    Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

    (Requerido)

    (Requerido, no será publicado)

    (Requerido)

    (Tags aceptados: <a> <em> <strong> <code> <ul> <li>)