Tu Web Dinamica en Flash desde Cero Final
Tutorial Photoshop
Tutorial por Solo Photoshop
SoloPhotoshop
TUTORIALES FLASH
TU WEB DINAMICA EN FLASH desde CERO Finalización
Por Kitsch, http://www.javiernavarro.be/
Bien, con esto estamos terminando este tutorial de Macromedia Flash Profesional 8, para la creación de un sitio desde cero, utilizando componentes.
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:
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:
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.
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:
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.
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:
//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”
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”
<!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ñ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 "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: </p>
<ul>
<li><span class="des">Preloader</span>: Como crear nuestro propia barra de precarga personalizada. </li>
<li><span class="des">Componente Tree</span>: Como utilizar este componente para crear menus de arbol mediante XML</li>
<li><span class="des">XML</span>: Crear nuestros archivos como interprete entre Flash y otros metodos.</li>
<li><span class="des">Action Scrpit II</span>: Una rapida descripcion del uso de de AS II.</li>
<li><span class="des">Componente Loader</span>: Utilizacion del componente Loader para imagenes.</li>
<li><span class="des">Texto Dinamico</span>: Utilizacion de textos dinamicos. HTML y CSS en un flash de forma dinamica.</li>
<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>
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.
Por consultas o sugerencias sobre esta entrega, puedes ir a nuestro foro
Comentarios de Tu Web Dinamica en Flash desde Cero Final
↑ Tutorial
RUFO11
2006-10-05 12:01
kikuek
2006-10-20 10:28
rojaslrp
2006-10-31 18:22
gracias
pressesman
2006-12-06 15:11
Muchas gracias
luismarcos
2006-12-11 19:25
nataskid
2006-12-20 23:36
muchas gracias de antemani
chartman79
2007-01-13 00:50
Muchas gracias
David Milich
2007-03-26 09:10
masmorsa
2007-08-02 21:13
Si quisiera agregar en my_text una descripción o anécdota de la foto que se carga, ¿cómo podría hacerlo?
camilobotia
2008-02-20 11:02