[Tutorial] Tu web dinamica en Flash desde 0. Parte II

Componente Progress Bar

El componente de barra progreso es un recurso bástate ágil para trabajos de importación de archivos. El uso de este componente nos ahorra bastante tiempo en ejecutar loaders propios y claro tiempo en su configuración y escribir el código para que flash lo interprete.

Bueno, a lo que nos interesa la configuración. A este componente le asignaremos el nombre de instancia de: "my_pb". (Si sois observadores se habrán dado que cuenta que en el código arriba expuesto tiene varios llamados:

CÓDIGO

var my_pb:mx.controls.ProgressBar; //Definimos la variable my_pb

//Definimos las Propiedades

my_pb._visible = false; //Si visible o falso

my_pb.indeterminate = true;

my_pb.setSize(160, 30); //El tamaño

my_pb.source = my_ldr; //A que objeto aplica, en este caso el loader.

my_pb.mode = "polled"; //el modo

//Creamos la function a partir de la variable ya definida.

var pbListener:Object = new Object();

pbListener.complete = function(evt:Object) {

evt.target._visible = false;

};

my_pb.addEventListener("complete", pbListener);

Y ahora vamos a las propiedades en el inspector de componentes:
Imagen IPB

La onda es que debe de quedar de la forma anterior; son prácticamente los mismos del componente Tree, solo varían las algunos elementos.

Loader

Este componente nos muestra siempre un objeto, imagen o película en terminada posición, es decir cumple la función de un LoadMovie; solo lo hace diferente por el método y el modo de configuración.

Seleccionamos este y le asignamos le siguiente nombre de instancia: "my_ldr" y ahora al igual que el Progress Bar ya esta definido en el código expuesto líneas arriba.

CÓDIGO

var my_ldr:mx.controls.Loader; //definimos la variable

//-------------------------------------------esta es la funcion de tree

treeDP_xml.load("gallery_tree.xml");

var treeListener:Object = new Object();

treeListener.change = function(evt:Object) {

    var treeNode:XMLNode = evt.target.selectedItem;

    if (treeNode.attributes.src != undefined) {

  my_pb._visible = true;

  my_ldr.load(treeNode.attributes.src); //Aqui se define que es lo que mostrara el loader

    }

};

my_tree.addEventListener("change", treeListener);

Bien las propiedades son las siguientes:
Imagen IPB

Bien ahora tenemos nuestros tres componentes principales, Progress Bar, Loader y Tree; para probar el funcionamiento, no vamos a nuestra carpeta en windows donde deben de estar los siguientes archivos:

tu_sitio/galeria_tree.fla
tu_sitio/galeria_tree.swf
tu_sitio/galeria_tree.xml
tu_sitio/imagen1.jpg
tu_sitio/imagen2.jpg
tu_sitio/imagen3.jpg
tu_sitio/imagen4.jpg
tu_sitio/imagen5.jpg

Desde luego intercambiando los nombres que vosotros han escogido y el número de imágenes que tengáis para mostrar y si las tienen en sub carpetas quedaría así:

tu_sitio/xml/galeria_tree.xml
tu_sitio/imágenes/imagen1.jpg
tu_sitio/imágenes/imagen2.jpg
tu_sitio/imágenes/imagen3.jpg
tu_sitio/imágenes/imagen4.jpg
tu_sitio/imágenes/imagen5.jpg
tu_sitio/galeria_tree.swf
tu_sitio/galeria_tree.swf

Revisado esto, volvemos al flash y presionamos ctrl.+ enter para hacer una vista previa del archivo ya en función. Te darás cuenta que el archivo ya funciona, veras como en la parte inferior ya esta una carpeta con el nombre que le hayas asignado y si presionas en ella, aparecerán las imágenes que definiste en tu archivo XML.

Nota: Hago esta acotación para anexar que este es solo un ejemplo simple con carga de imágenes, sin embargo se puede usar el componente Tree como menú, solo modificando un poco el código y hacer cargas de SWF en lugar de JPGs. Todo es cosa de practica y un poco de ingenio.

4ª Parte. Textos Dinámicos.

Anteriormente una de las cosas mas frustrantes de flash eran los textos, en un principio te enviaba el texto como vector y generalmente tenia un terminado demasiado malo, además que para actualizar la web y cambiar los textos de las noticias por ejemplo, era necesario trabajar directamente en la película, lo que causa una perdida de tiempo y labores excesivas.

Tiempo después se integro la opción de trabajar con salidas de texto HTML e incluso cargar el contenido del texto con un archivo externo. ¡Que maravilla! Y todos los "flasheros" del mundo fuimos sumamente felices. Sin embargo como antes mencionaba en otros textos, ninguna estado de felicidad es permanente, pues la salida del texto era muy mala y generalmente configurarlo era cosa de locos.

Últimamente flash permite integrar contenidos directamente de bases de datos, "esto hasta el momento si es la gloria", y además también permite corregir el diseño visual mediante un archivo CSS, lo cual es en realidad genial.

En este tutorial no me meteré con bases de datos (por ahora) porque eso el algo complejo, sin embargo si me explicare como cargar un HTML definiendo su estilo mediante CSS, y de paso utilizaremos el componente UIScrollBar para controlarlo.

Comenzamos creando otra capa la cual llamaremos 'texto'. Seleccionamos la herramienta texto (T) creamos un cuadro "texto" valga la repetición, en la parte superior de nuestra película, tratando de cuadrarlo al nivel del componente Tree y ahí mismo cargamos el componente UIScrollBar justo aun lado de el.

Seleccionamos nuestro cuadro te texto y le asignamos el nombre de instancia de "my_text", como en los casos anteriores de este modo identificara el programa al cuadro de texto.
Imagen IPB

Con el botón derecho del Mouse (ctrl.+ clic en Mac) buscamos la opción "Scrollable" o "Desplazamiento permitido" le damos las propiedades que se muestran en la imagen. Ahora presionamos F9 para abrir nuestra ventana de acciones y le insertamos el siguiente código:

CÓDIGO

//Ahora comenzamos con la importacion de texto desde HTML

//al cual le daremos formato por propieaddes CSS

var myStyle:TextField.StyleSheet = new TextField.StyleSheet();

//creamos la variable myStyle

myStyle.load("estilo.css"); //cargamos el archivo CSS

my_text.styleSheet = myStyle;

//Definimos las propiedades de nuestro cuadro de texto

my_text.multiline= true;

my_text.wordWrap = true;

my_text.html = true;

var story:XML = new XML(); //creamos la variable historia de XML

story.ignoreWhite = true;

story.load("galeria.html"); //cargamos el archivo HTML

story.onload = function () {

my_text.htmlText = story;

}

Con esto le decimos a Flash que debe definir el estilo del texto según las propiedades definidas en el archivo "estilo.css" y que cargue el texto sin propiedades del archivo HTML.

Bien aquí dejo el código del archivo que use para definir el estilo del archivo cargado por el flash.

"estilo.css"

CÓDIGO

title {

    font-family:Arial, Helvetica, sans-serif;

    font-size:10px;

    font-weight:200;

}

body {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

.cursiva {

    font-family:Arial, Helvetica, sans-serif;

    font-size:10px;

    font-style:italic;

}

.des {

    font-family:Arial, Helvetica, sans-serif;

    font-size:10px;

    font-weight: bold;

    color:#006600;

}

td {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

th {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

form {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    }

input {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

textarea {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

select {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

ul {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    list-style-type: square;

    list-style-position: outside;

}

li {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

ol {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    list-style-type: decimal;

    list-style-position: outside;

}

.small {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 8px;

}

.big {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    font-weight: bold;

}

.bodystyle {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

}

.box1 {

    padding: 3px;

    border-width: thin;

    border-style: solid;

    border-color: #CCCCCC #666666 #666666 #CCCCCC;

}

.box2 {

    border-width: 3px;

    border-style: solid;

    padding: 5px;

}

a:link {

    font-family:Arial, Helvetica, sans-serif;

    font-size:10px;

    outline:double;

    color:#FF3300;

}

Y pues ya encaminado el ratón, aquí el archivo HTML

"galeria.html"

CÓDIGO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>

<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>

<body>

Galeria con Flash 8 

Este es un ejemplo ya activo de como funsionan los componentes ProgressBar, Tree, UIScrollBar y loader; a trabajar con el entorno de programacion Action Script II y XML, asi como crear un preloader simple con barra de desplazamiento. 

Para este ejemplo utilce unas fotos (de muy mala calidad por cierto) para la demostracion de galeria, pues si hubiera usado las que bienen con este ejemplo original (las de Macromedia) lo mas seguro es que me haya metido en problemas y eso es lo ultimo que queremos, por eso utilice las fotos del concierto de Gabarge. El diseño tambien es malo, peor eso no es lo que interesa si no el ejemplo traducido... No? 

Bueno en realidad es una traduccion, adaptacion y explicacion del ejemplo de "Gallery Tree" que viene en esta version de Macromedia Flash 8 Profesional, solo que le agregue elementos "extras" para hacer un tutorial completo y ademas que sea compatible con la version Flash MX 2004. A continuacion dejo una lista de lo que pretendo aprendamos en esta version: 

<ul>

 <li>Preloader: Como crear nuestro propia barra de precarga personalizada. </li>

 <li>Componente Tree: Como utilizar este componente para crear menus de arbol mediante XML</li>

 <li>XML: Crear nuestros archivos como interprete entre Flash y otros metodos.</li>

 <li>Action Scrpit II: Una rapida descripcion del uso de de AS II.</li>

 <li>Componente Loader: Utilizacion del componente Loader para imagenes.</li>

 <li>Texto Dinamico: Utilizacion de textos dinamicos. HTML y CSS en un flash de forma dinamica.</li>

 <li>CSS: Breve explicacion de lenguaje CSS.</li>

</ul>

 Espero que lo que aqui se ve, sirva de ayuda a los foreros en su viaje de aprendisaje por el mundo de Flash. Si gustan desean aprender mas y obtener mas informacion sobre este tutorial, no dudeis en consultar, para estamos en <a href="http://www.forocreativo.net" target="_blank">ForoCreativo.Net</a>, <a href="http://www.foro-creativo.com" target="_blank">Foro-Creativo.Com</a>, <a href="http://www.mandrivia.net">Mandrivia.Net</a> y <a href="http://www.darkartforum.net" target="_blank">DarkArtForum.com</a>. 

</body>

</html>

Si sois observadores encontraran que este archivo HTML se esta definiendo como XHTML y el navegador lo tratara como XML en las etiquetas personalizadas, en este archivo no hay ninguno, sin embargo se podrían haber incluido sin problemas. Su función practica seria por ejemplo para obtener la información mediante una base de datos por ejemplo MySql; pero eso lo veremos en otro tutorial.

5ª Parte Conclusiones

Bien señores llegamos a la parte en la que todos vosotros sois mucho mejores que yo, "el diseño"; por lo cual aquí no tengo mucho que comentar.

Bien este es un ejemplo bastante simple de cómo crear nuestras galerías en flash de forma dinámica. Si vos eres nuevo en esto de la programación y los modos dinámicos, pensaras que es demasiado complejo, sin embargo una vez perdiéndole el miedo y tomando el hilo, nos percataremos que existen miles de ventajas de trabajar con numeritos en nuestros sitios, en lugar de hacerlo de forma tradicional; una de ellas es ahorro de tiempo al momento de actualizar.

Bien con esto termino mi primer tutorial sobre Flash Profesional 8, espero en los días posteriores a este, subir algunos otros más; si me es posible, hasta llegar a poder construir sitios profesionales en este espectacular programa.

Saludos.