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

<img src="http://img30.imageshack.us/img30/4537/flash8profesional9uj.jpg" border="0" alt="Imagen IPB" />
<b>TUTORIAL SITIO WEB EN FLASH
Por Kitsch</b>

Bien, 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:

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

Al finalizar este tutorial nuestra web de galeria debe quedar mas o menos asi: <a href="http://www.forocreativo.net/tutoriales/kitschgalleries/gallery_tree.swf" target="_blank"> Terminado</a>, tambien aqui les dejo los <a href="http://www.forocreativo.net/tutoriales/kitschgalleries/galleries.zip" target="_blank">archivos del tutoria</a>.

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

<b>1ª Parte Las Propiedades</b>

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.

<b>2ª Parte El Preloader</b>

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.
<img src="http://img30.imageshack.us/img30/2723/t17ka.jpg" border="0" alt="Imagen IPB" />

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".
<img src="http://img278.imageshack.us/img278/8517/t25gv.jpg" border="0" alt="Imagen IPB" />

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:
<img src="http://img3.imageshack.us/img3/9854/t33hn.jpg" border="0" alt="Imagen IPB" />
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í:
<img src="http://img349.imageshack.us/img349/9135/t46sy.jpg" border="0" alt="Imagen IPB" />
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:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function cargando() {

&nbsp;&nbsp;&nbsp;&nbsp;// Declaración de variables

&nbsp;&nbsp;&nbsp;&nbsp;var total, cargados, porcentaje;

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

&nbsp;&nbsp;&nbsp;&nbsp;total = _root.getBytesTotal();

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

&nbsp;&nbsp;&nbsp;&nbsp;//momento descargados de la web

&nbsp;&nbsp;&nbsp;&nbsp;cargados = _root.getBytesLoaded();

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

&nbsp;&nbsp;&nbsp;&nbsp;//"Math.floor"

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

&nbsp;&nbsp;&nbsp;&nbsp;//Asigna al campo de texto porcentaje_txt el porcentaje cargado

&nbsp;&nbsp;&nbsp;&nbsp;porcentaje_txt.text = porcentaje+" %";

&nbsp;&nbsp;&nbsp;&nbsp;//Mueve la barra de carga al frame correspondiente al porcentaje

&nbsp;&nbsp;&nbsp;&nbsp;barra_mc.gotoAndStop(porcentaje);

&nbsp;&nbsp;&nbsp;&nbsp;//Si la cantidad de bytes cargados es igual a la cantidad total de bytes

&nbsp;&nbsp;&nbsp;&nbsp;if (cargados == total) {

&nbsp;&nbsp;//Hacer que se deje de ejeuctar esta función

&nbsp;&nbsp;clearInterval(hiloPrecarga);

&nbsp;&nbsp;//Iniciar la pelicula

&nbsp;&nbsp;play();

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

}

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

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

<b>3ª Parte. Los Componentes</b>

<u><i>Componente Tree</i></u>

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í:
<img src="http://img77.imageshack.us/img77/1604/t53yw.jpg" border="0" alt="Imagen IPB" />

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.
<img src="http://img325.imageshack.us/img325/7659/t60by.jpg" border="0" alt="Imagen IPB" />

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:
<u>Gallery_tree.xml</u>
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

<?xml version="1.0"?>

<tree>

&nbsp;&nbsp;&nbsp;&nbsp;<node label="Concierto Garbage">

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

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

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

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

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

&nbsp;&nbsp;&nbsp;&nbsp;</node>

</tree>

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

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.

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

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

&nbsp;&nbsp;&nbsp;&nbsp;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) {

&nbsp;&nbsp;&nbsp;&nbsp;if (success) {

&nbsp;&nbsp;my_tree.dataProvider = this.firstChild;

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

};



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

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

};

my_tree.addEventListener("change", treeListener);

stop();

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

<a href="http://www.forocreativo.net/ipb/index.php?showtopic=8507" target="_blank">Para continuar ir a la parte II.</a>

 

Felicidades por el tutorial, muy bueno!
Solo una cosa: no me puedo bajar los archivos del tutorial, me los puedes enviar por favor?

Gracias,

Dani

 

Sweret, cierto hay un problemita con el archivo zip del tutorial, vamos ver si kitsch los repone.

Bienvenido al foro un gusto tenerte por aca

 

Listo ya funcionan los links he reparado los enlaces, saludos

 

Lo siento es que cambie de host Busco los archivos y los subo

 

Ya funcionan los puse de mientras en FC cualquier cosa lo editas

 

Hola:

Alguien titne el zip con este magnifico tutorial.. gracias si me lo pueden enviar


mi email es tacubax@gmail.com

 

tacuba, bienvenido al foro y un gusto en tenerte por aca. Sobre tu duda, no necesitas el zip puedes venir a ver el tutorial cuantas veces lo necesites

 

Que tal Kitsch, he estado viendo este tutorial y segui paso a paso las instrucciones y dio resultado, solo que cuando quize cambiar los atributos del archivo XML para q en vez de q cargara imagnes cargara movies de flash empezaron los problemas, ya que mi primera acción fue colocar el "embed src" para indicar que era un archivo de flash, bien, no me reconocio el menu desplegable, lo regrese a su modo original en SRC y carga la pelicula pero inmediatamente se reinicia todo el gallery_tree, no se si haya alguna solución a esto, muchas gracias, espero q puedan ayudarme, hasta luego

 

Pues si hay solucion, solo es cosa de modificar un poco el codigo... mira estos ejemplos:

<a href="http://www.cristalab.com/tutoriales/50/tutorial-del-componente-tree-de-flash" target="_blank">http://www.cristalab.com/tutoriales/50/tut...e-tree-de-flash</a>
<a href="http://www.after-hours.org/blog/archives/2004/11/21/flash_mx_2004_componente_tree_i/" target="_blank">http://www.after-hours.org/blog/archives/2...ponente_tree_i/</a>

Por ahora estoy un poco atareado, pero en una chansita vere que puedo hacer

 

<!--quoteo(post=133687:date=Aug 17 2006, 08:04 PM:name=kitsch)--><div class='quotetop'>CITA(kitsch @ Aug 17 2006, 08:04 PM) [snapback]133687[/snapback]</div><div class='quotemain'><!--quotec-->
Pues si hay solucion, solo es cosa de modificar un poco el codigo... mira estos ejemplos:

<a href="http://www.cristalab.com/tutoriales/50/tutorial-del-componente-tree-de-flash" target="_blank">http://www.cristalab.com/tutoriales/50/tut...e-tree-de-flash</a>
<a href="http://www.after-hours.org/blog/archives/2004/11/21/flash_mx_2004_componente_tree_i/" target="_blank">http://www.after-hours.org/blog/archives/2...ponente_tree_i/</a>

Por ahora estoy un poco atareado, pero en una chansita vere que puedo hacer
<!--QuoteEnd--></div><!--QuoteEEnd-->

Gracias kitsch, checcaré los links que has dejado, ¡buen día!

 

Puedes poner un ejemplo de cómo quedaría la web al final? Hace falta tener también un programa como dreamweaver o frontpage?

Muchas gracias!!

 

Si te refieres a un ejemplo de como queda el tuto aca lo tienes

<a href="http://www.forocreativo.net/tutoriales/kitschgalleries/gallery_tree.swf" target="_blank">http://www.forocreativo.net/tutoriales/kit...allery_tree.swf</a>

 

Eso era, muchas gracias ^^

 

Esta al principio del tuto pero de pronto no muy visible por lo que veo

 

muy bueno el tutorial, estoy recien empezando en esto de flash ^^

<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec--> 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<!--QuoteEnd--></div><!--QuoteEEnd-->

esta parte no entendi, en donde se colocan esos nombres? :blush:

saludos

 

<img src="http://img81.imageshack.us/img81/3926/gallerytreegf0.jpg" border="0" alt="Imagen IPB" />

1) el archivo gallery_tree.fla tiene 2 escenas, una se llama preview que es la que contiene el cargador

2) dentro de este cargador, seleccionas la barra y en el nombre de instancia le pones "barra_mc"

3) luego seleccionas el texto de porcentaje como indica la imagen y le pones "porcentaje_txt"

 

gracias voy a probar

 

Hola

oigan a mi por el momento solo me interesa hacer el Preloader, todo bien hasta el momento del codigo
podrian ponerlo solo, sin las explicaciones o.o es que no se cual es la que debo de pegar y cual no x.x

Gracias

 

Sarel, bienvenida al foro.

Una pregunta si te interesa solo lo del preloader .... porque miras este tutorial y no el de preloader ??

Precarga Básica en Flash
<a href="http://www.tallerwebmaster.com/Tutorial-Precarga-Basica-en-Flash-c-45.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Pr...Flash-c-45.html</a>