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

<i><u>Componente Progress Bar</u></i>

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: "<i>my_pb</i>". (Si sois observadores se habrán dado que cuenta que en el código arriba expuesto tiene varios llamados:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

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) {

&nbsp;&nbsp;&nbsp;&nbsp;evt.target._visible = false;

};

my_pb.addEventListener("complete", pbListener);

<!--c2--></div><!--ec2-->
Y ahora vamos a las propiedades en el inspector de componentes:
<img src="http://img264.imageshack.us/img264/3587/t70xi.jpg" border="0" alt="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.

<i><u>Loader</u></i>

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: "<i>my_ldr</i>" y ahora al igual que el Progress Bar ya esta definido en el código expuesto líneas arriba.

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->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) {

&nbsp;&nbsp;&nbsp;&nbsp;var treeNode:XMLNode = evt.target.selectedItem;

&nbsp;&nbsp;&nbsp;&nbsp;if (treeNode.attributes.src != undefined) {

&nbsp;&nbsp;my_pb._visible = true;

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

&nbsp;&nbsp;&nbsp;&nbsp;}

};

my_tree.addEventListener("change", treeListener);

<!--c2--></div><!--ec2-->
Bien las propiedades son las siguientes:
<img src="http://img258.imageshack.us/img258/2614/t87lr.jpg" border="0" alt="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:

<i>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</i>

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í:

<i>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</i>

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.

<!--coloro:red--><span style="color:red"><!--/coloro--><b>Nota</b>: 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.<!--colorc--></span><!--/colorc-->

<b>4ª Parte. Textos Dinámicos.</b>

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 "<i>my_text</i>", como en los casos anteriores de este modo identificara el programa al cuadro de texto.
<img src="http://img326.imageshack.us/img326/9721/t96bm.jpg" border="0" alt="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:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->//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 () {&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;my_text.htmlText = story;

}

<!--c2--></div><!--ec2-->

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.

<i>"estilo.css"</i>
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->title {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size:10px;

&nbsp;&nbsp;&nbsp;&nbsp;font-weight:200;

}

body {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}

.cursiva {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size:10px;

&nbsp;&nbsp;&nbsp;&nbsp;font-style:italic;

}

.des {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size:10px;

&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;

&nbsp;&nbsp;&nbsp;&nbsp;color:#006600;

}

td {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}



th {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}



form {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

&nbsp;&nbsp;&nbsp;&nbsp;}



input {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}



textarea {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}



select {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}



ul {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

&nbsp;&nbsp;&nbsp;&nbsp;list-style-type: square;

&nbsp;&nbsp;&nbsp;&nbsp;list-style-position: outside;

}



li {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}



ol {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

&nbsp;&nbsp;&nbsp;&nbsp;list-style-type: decimal;

&nbsp;&nbsp;&nbsp;&nbsp;list-style-position: outside;

}



.small {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 8px;

}



.big {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;

}



.bodystyle {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

}



.box1 {

&nbsp;&nbsp;&nbsp;&nbsp;padding: 3px;

&nbsp;&nbsp;&nbsp;&nbsp;border-width: thin;

&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;

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

}



.box2 {

&nbsp;&nbsp;&nbsp;&nbsp;border-width: 3px;

&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;

&nbsp;&nbsp;&nbsp;&nbsp;padding: 5px;

}

a:link {

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

&nbsp;&nbsp;&nbsp;&nbsp;font-size:10px;

&nbsp;&nbsp;&nbsp;&nbsp;outline:double;

&nbsp;&nbsp;&nbsp;&nbsp;color:#FF3300;

}

<!--c2--></div><!--ec2-->

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

<i>"galeria.html"</i>
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><!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>

<p class="big">Galeria con Flash 8</p><br/>

<p align="left">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.</p><br/>

<p align="left">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&ntilde;o tambien es malo, peor eso no es lo que interesa si no el ejemplo traducido... No?</p><br/>

<p align="left">Bueno en realidad es una traduccion, adaptacion y explicacion del ejemplo de &quot;Gallery Tree&quot; que viene en esta version de Macromedia Flash 8 Profesional, solo que le agregue elementos &quot;extras&quot; 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: </p>

<ul>

&nbsp;&nbsp;<li><span class="des">Preloader</span>: Como crear nuestro propia barra de precarga personalizada. </li>

&nbsp;&nbsp;<li><span class="des">Componente Tree</span>: Como utilizar este componente para crear menus de arbol mediante XML</li>

&nbsp;&nbsp;<li><span class="des">XML</span>: Crear nuestros archivos como interprete entre Flash y otros metodos.</li>

&nbsp;&nbsp;<li><span class="des">Action Scrpit II</span>: Una rapida descripcion del uso de de AS II.</li>

&nbsp;&nbsp;<li><span class="des">Componente Loader</span>: Utilizacion del componente Loader para imagenes.</li>

&nbsp;&nbsp;<li><span class="des">Texto Dinamico</span>: Utilizacion de textos dinamicos. HTML y CSS en un flash de forma dinamica.</li>

&nbsp;&nbsp;<li><span class="des">CSS</span>: Breve explicacion de lenguaje CSS.</li>

</ul>

<p> 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>. </p>

</body>

</html><!--c2--></div><!--ec2-->
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.

<b>5ª Parte Conclusiones</b>

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.

<a href="http://www.forocreativo.net/ipb/index.php?showtopic=8499&hl=" target="_blank">Ver la parte I del Tutorial</a>

 

no entiendo nada de flash pero veo q te tomaste el laburo en hacer la dos partes del tuto

 

Si esta muy bueno el tutorial, lo que se genera es este sitio
<a href="http://www.forocreativo.net/tutoriales/kitschgalleries/gallery_tree.swf" target="_blank">http://www.forocreativo.net/tutoriales/kit...allery_tree.swf</a>

Y aca estan los archivos para bajarlos completo y estudiarlo
<a href="http://www.forocreativo.net/tutoriales/kitschgalleries/galleries.zip" target="_blank">http://www.forocreativo.net/tutoriales/kit...s/galleries.zip</a>

Si bien puede ser un tema complejo a quienes no se acostumbre a los codigos creo merece la pena conocer las basicas del flash

 

hua me encanta lo boy a poner en practica XD

 

muy bueno exelente!!!

Salu2

 

<!--coloro:#FFFFFF--><span style="color:#FFFFFF"><!--/coloro--><b>Gracias<!--colorc--></span><!--/colorc--><!--coloro:#FFFF00--><span style="color:#FFFF00"><!--/coloro-->kitsch<!--colorc--></span><!--/colorc--> <!--coloro:#FFFFFF--><span style="color:#FFFFFF"><!--/coloro-->vaya que me parecio un muy buen tutorial, magnifico diria yo, apenas lo vi y lo puse en práctica, para mi que no estoy familiarizado con esto si se me hizo un poco dificil y cometi algunos errores por ahi pero seguramente que me falta aprender muchas cosas y espero poder hacerlo en un futuro jeje, bueno aqui les dejo los resultados, es la primera vez que hago algo parecido en Flash y creo que tambien trabajare un poco mas las cuestiones de diseño. :unsure:

<a href="http://www.universosaiyajin.com/flash/p1/" target="_blank">http://www.universosaiyajin.com/flash/p1/</a>

Salu2.</b> :adios:

<!--colorc--></span><!--/colorc-->[/color]

 

<!--quoteo(post=133885:date=Aug 18 2006, 03:33 PM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Aug 18 2006, 03:33 PM) [snapback]133885[/snapback]</div><div class='quotemain'><!--quotec-->
Si esta muy bueno el tutorial, lo que se genera es este sitio
<a href="http://www.forocreativo.net/tutoriales/kitschgalleries/gallery_tree.swf" target="_blank">http://www.forocreativo.net/tutoriales/kit...allery_tree.swf</a>

Y aca estan los archivos para bajarlos completo y estudiarlo
<a href="http://www.forocreativo.net/tutoriales/kitschgalleries/galleries.zip" target="_blank">http://www.forocreativo.net/tutoriales/kit...s/galleries.zip</a>

Si bien puede ser un tema complejo a quienes no se acostumbre a los codigos creo merece la pena conocer las basicas del flash
<!--QuoteEnd--></div><!--QuoteEEnd-->

KIKE MUCHAS GRACIASPOR TOMARTE LA MOLESRTIA DE VER COMO QUEDA GRACIAS MUCHAS GRACIAS

 

Muy buen tutorial. Ahora me gustaría saber si existe alguna forma para que junto con la carga de la imagen a partir del Tree puedo hacer que me cargue un texto distinto para cada foto en el cuadro de texto.
Muchas Gracias

 

Si se puede claro, debes modificar el XML y el codigo actionscript para que lea esa nueva información.

 

alguna sugerencia?
resulta que estoy tratando de aprender a utilizar los códigos en base a tutoriales, pero no encotré todavia alguno que me explique a hacer eso, por eso me nutro de su sabiduría
Fuera de joda son realmente de gran ayuda


Tvarano -- Argentina

 

Entonces, debes comenzar por entender lo que es el XML, y con un ejemplo mas sencillo, mira estos tutoriales:

Prácticas y Ejemplos de XML, con Flash, PHP y MySQL
<a href="http://www.tallerwebmaster.com/Tutorial-Practicas-y-Ejemplos-de-XML-con-Flash-PHP-y-MySQL-c-74.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Pr...MySQL-c-74.html</a>

Menú Dinámico con XML y Adobe Flash
<a href="http://www.tallerwebmaster.com/Tutorial-Menu-Dinamico-con-XML-y-Adobe-Flash-c-95.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Me...Flash-c-95.html</a>

Menú Dinámico con XML y Adobe Flash Final
<a href="http://www.tallerwebmaster.com/Tutorial-Menu-Dinamico-con-XML-y-Adobe-Flash-Final-c-101.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Me...inal-c-101.html</a>

 

como hago para cambiar el colorcito de la progress bar? no puedo hacer que no sea verde

 

Con el componente, no tienes muchas opciones, pero puedes hacer uno personalizado