TU WEB DINAMICA EN FLASH desde CERO

Dreamer · Administrador Registrado: 18 Dic 2006 Mensajes: 1594

TU WEB DINAMICA EN FLASH desde CERO

ien, después de mucho prometerlo dejo aquá mi primer tutorial sobre la nueva versión de Macromedia Flash Profesional 8, y en este a diferencia de otros que he hecho, ahora si intentare hacer algo ?completo?; bueno lo suficiente para tener al menos un espacio para nuestra sitio, y como todos somos creativos y artistas por estos lares, todos tenemos trabajos y todos queremos nuestra galería y pues he aquá una opción para hacerlo.

Bien, antes de comenzar, explicare que este tutorial funcionara prácticamente perfecto para la versión MX 2004 (versión 7), aunque como no lo he probado en este, no se si funcione correctamente, pero en teoría si lo hará.

Para este tutorial utilice el archivo gallery_tree.fla que viene en la carpeta de ejemplos de la versión antes citada. Traduje el tutorial y lo adapte para complementar lo que queremos hacer aquá, nuestro sitio web.

Aclaradas ya las cuestiones previas, sin más rodeos nos vamos directamente al tutorial, este a diferencia de otros que algunos ya conoc?is lo he hecho más complejo, pero lo intentare explicar de forma que todos lo entendamos (yo me incluyo), en este tutorial pretendo que aprendamos lo siguiente:

* Preloader: Como crear nuestro propia barra de precarga personalizada.
* Componente Tree: Como utilizar este componente para crear menús de ?rbol mediante XML
* XML: Crear nuestros archivos como interprete entre Flash y otros métodos.
* Action Scrpit II: Una rápida descripción del uso de de AS II.
* Componente Loader: Utilización del componente Loader para imágenes.
* Componente ProgressBar: Como utilizar la barra de carga prediseíada por el programa.
* Texto dinámico: Utilización de textos dinámicos. HTML y CSS en un flash de forma din?mica.
* CSS: Breve explicación e introducción al lenguaje CSS.

Al finalizar este tutorial nuestra web de galeria debe quedar mas o menos asi: Terminado, tambien aqui les dejo los archivos del tutorial.

Bueno, ya aclarados los pre?mbulos y definiendo que es lo que se supone aprenderemos, comenzamos.

1? Parte Las Propiedades

Antes de comenzar cualquier trabajo en flash debemos definir bien las propiedades de nuestra pel?cula, ya que después trabajaremos sobre esto y hacer en cambios en un futuro nos puede causar dolores de cabeza o simplemente, un buen tiempo perdido.

Para este tutorial utilice las siguientes propiedades:

tamaño: 600x400 píxeles
Fondo: Blanco (#FFFFFF)
Velocidad de Fotograma (FrameRate): 15 fps
Version: Flash placer 8
Orden de Descarga: ?Bottom up?
Action Script: 2
Calidad JPEG: 80
AudioStream: MP3 16 kbps, mono
Audio Evento: MP3 16 kbps, mono

Estas son las propiedades que yo cre? convenientes para nuestra pel?cula.

2? Parte El Preloader

Bueno, vamos a entrar de lleno a esto del flash y atender? a que quienes están leyendo esto, tienen un breve conocimiento de Flash, mínimo las nociones b?sicas y un poco de entendimiento del Código de Action Scriop II.

En nuestra escena en el primer fotograma creamos un rectángulo pequeño con la herramienta ?Rectangle Tool? ? que nos quede mas o menos del siguiente tamaño: 160x8 px, si no queda así vamos al menú de propiedades y lo ajustamos.

Ya que tenemos nuestro rectángulo, lo seleccionamos aplic?ndole doble clic, para que seleccione el relleno y las líneas y con el segundo botón presionamos la opción ?Convert to Symbol? (Convertir en S?mbolo) y en la ventana emergente seleccionamos la opción Movie Clip y le ponemos el nombre de: ?Barra?.

después de esto, veremos que cambio un poco la forma en que se selecciona, el rectángulo; de nuevo le damos doble clic, y nos manda a un escenario con otra línea de tiempo, pero con la diferencia que aun lado del nombre de la escena 1, aparece ?Barra? seleccionado, esto quiere decir que estamos sobre el MovieClip barra y no sobre el escenario principal.

En nuestra línea de tiempo seleccionamos hasta el fotograma 100 y presionamos F5 para insertar fotogramas. En el fotograma 100, presionamos F6 para insertar un ?keyFrame? pero copiando nuestro fotograma anterior. Ahora aquá viene algo delicado, regresamos a nuestro fotograma 1, y solo seleccionamos el relleno de rectángulo hasta hacerlo prácticamente invisible:

Y con el fotograma 1 seleccionado, en el panel de propiedades, buscamos la el menu Tween (Animación) y seleccionamos la opción: Shape (Transformación). Si hemos hecho todo de forma correcta, al presionar ?Enter? y reproducir esta línea de tiempo, parecera que se va llenando de izquierda a derecha hasta que en el fotograma 100, se vea completamente lleno.

Teniendo nuestro MC(así llamare los MovieClip en delante) que será nuestra barrita de carga, regresamos al escenario principal y seleccionamos la herramienta texto (T).

Insertamos un texto ?100%? y nos vamos la pestaía de propiedades: la cual debe de quedar así:

Ahora simplemente nos basta crear otro pequeño texto simple, con la palabra Loading o Cargando, para que el usuario sepa lo que esta pasando.

Creamos otra capa en la línea de tiempo y la renombramos como íaCCIONES? y presionamos (F9) para abrir nuestra ventana de acciones. En esta insertamos el siguiente Código:

function cargando() {

// Declaración de variables

var total, cargados, porcentaje;

// A la variable "total" se le asigna el tamaño de la pelicula en bytes

total = _root.getBytesTotal();

// A la variable "cargados" se le asignan el total de bytes hasta el

//momento descargados de la web

cargados = _root.getBytesLoaded();

//Por medio de una regla de tres obtiene el porcentaje cargado y redondea el valor con la función

//"Math.floor"

porcentaje = Math.floor((cargados*100)/total);

//Asigna al campo de texto porcentaje_txt el porcentaje cargado

porcentaje_txt.text = porcentaje+" %";

//Mueve la barra de carga al frame correspondiente al porcentaje

barra_mc.gotoAndStop(porcentaje);

//Si la cantidad de bytes cargados es igual a la cantidad total de bytes

if (cargados == total) {

//Hacer que se deje de ejeuctar esta función

clearInterval(hiloPrecarga);

//Iniciar la pelicula

play();

}

}

// setInterval nos servira para que la función "cargando" se ejecute cada 1 milisegundo

// Asi, nuestra función revisara constantemente la cantidad de bytes descargados

// y solo iniciara la pelicula hasta que la descarga termine

// la variable "hiloPrecarga" nos servira para saber que esta corriendo nuestra función

// y frenar su ejecución cada milisegundo por medio de "clearInterval"

var hiloPrecarga = setInterval(cargando, 1);

//Evita que inicie la pelicula

stop();

Y ahora para que esto funcione, solo falta agregar el nombre de las instancias a los objetos del preloader (barra y 100%) los cuales debe tener los siguientes nombres de instancias: Barra = barra_mc y el texto dinámico 100% = porcentaje_txt

?Y listo! Ahora solo falta insertar otra escena (Insert>Scene) para continuar.

3? Parte. Los Componentes

Componente Tree

Bueno, ya tenemos nuestro preloader, ya podemos pasar de lleno a lo que nos interesa, como hacer nuestro sitio web, así que; al mal paso, darle prisa y es por esto que nos meteremos de lleno a los componentes.

Como antes mencionaba utilizaremos 4 componentes para nuestro sitio, Loader, ProgressBar, Tree y UIScrollBar.

Insertamos de nuestro panel de componentes en nuestro escenario principal Loader, ProgressBar y Tree todos en una misma capa, la que llamaremos ?components? quedando más o menos así:

El orden no importa para nada en el funcionamiento, solo le di este por mera estática, más adelante veremos por que.

Seleccionamos el componente ?Tree? y le aplicamos las siguientes propiedades:

tamaño: 216.14x102.8 px Coordenadas: x= 25.5 y= 239.4 Nombre de Instancia: my_tree

Y con los siguientes parámetros en el inspector de componentes:

En al primera parte de la Imagen VI, tenemos la paestaía ?Parameters? seleccionada y las propiedades:

multipleSeleccion: false; esto evita que se puedan seleccionar mas dos objetos del menú, en una galería de imágenes seria desastroso cargar varias al mismo tiempo.

rowHeight: 20; define el tamaño de las columnas.

En la segunda parte de la imagen, encontramos la pestaía ?Schema? y un recuadro en blanco con los botones íagregar? (+) y ?quitar?(-). Presionamos en agregar y nos aparecerá abajo un recuadro con lo parámetros, debe quedar exactamente así, para que nuestro menú funcione.

field name: dataProvider es nombre de nuestro vinculo, el cual hará una llamada a nuestro archivo XML, el cual crearemos mas delante.

data type: XML; seleccionamos el tipo de datos a cargar, en este caso XML

validation options: {ignoreWhite} ignora los campos blancos del Código y viene por defecto.

required: si el archivo a cargar es requerido o no, para el funcionamiento, en este caso es verdadero.

read only: Solo leer el archivo. En este caso Falso.

kind: False. formatter: False. storage type: Complex.

Listo, ya determinamos las propiedades de nuestro componente y como obtendrá los datos a mostrar, ahora solo basta determinar cuales son, es aquá donde entra el XML, mas delante explicare como funciona, por ahora solo dejo el archivo: Gallery_tree.xml

<?xml version="1.0"?>

<tree>

<node label="Concierto Garbage">

<node label="En el Slam" src="g1.jpg" />

<node label="El After" src="g2.jpg" />

<node label="El escenario" src="g3.jpg" />

<node label="El escenario II" src="g4.jpg" />

<node label="Duke Ericcson y yo" src="g5.jpg" />

</node>

</tree>

Este archivo lo guardamos en la misma carpeta de nuestra pel?cula.

En el archivo XML, en la primera etiqueta determinamos el tipo de lenguaje y la versión activa <?xml version='1.0'?>

después crearemos nuestras propias etiquetas y estas funcionaran de la siguiente manera, <tree> será la etiqueta principal, <node> funcionara como menú principal y <node> en jerarquía menor, y con la etiqueta de ?src? determina la url de donde se obtendrán las imágenes y bajo que nombre se deben mostrar.

Nota: No es indispensable que tengan nombres seriados las imágenes, sin embargo es recomendable, para evitar posibles errores de interpretación.

Nuestro archivo XML esta dictando que las imágenes se obtendrán del mismo directorio que nuestra pel?cula, sin embargo; puedes estar en sub carpetas, solo asign?ndole su ruta relativa ?./imágenes/g1.jpg? por ejemplo.

Ahora regresamos a nuestro escenario principal y creamos otra capa a la que llamaremos íacciones?, aquá presionamos de nuevo F9 para abrir nuestro panel de acciones y escribiremos el siguiente Código:

var my_pb:mx.controls.ProgressBar;

var my_ldr:mx.controls.Loader;

var my_tree:mx.controls.Tree;

my_pb._visible = false;

my_pb.indeterminate = true;

my_pb.setSize(160, 30);

my_pb.source = my_ldr;

my_pb.mode = "polled";

var pbListener:Object = new Object();

pbListener.complete = function(evt:Object) {

evt.target._visible = false;

};

my_pb.addEventListener("complete", pbListener);

var treeDP_xml:XML = new XML();

treeDP_xml.ignoreWhite = true;

treeDP_xml.onLoad = function(success:Boolean) {

if (success) {

my_tree.dataProvider = this.firstChild;

}

};

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

}

};

my_tree.addEventListener("change", treeListener);

stop();

Este el Código completo para todos lo componentes, nos fijaremos solo lo referente a tree; aunque este es Código completo para los otros dos componentes.

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>

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.

Fuente:
http://www.tallerwebmaster.com/Tutorial-...
_________________
Agradecer no cuesta nada