Publicidad
Tu Web Dinamica en Flash desde Cero
Tutorial Photoshop
Tutorial por Solo Photoshop
SoloPhotoshop
TUTORIALES FLASH
TU WEB DINAMICA EN FLASH desde CERO
Por Kitsch, http://www.javiernavarro.be/
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:
- 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.
Por consultas o sugerencias sobre esta entrega, puedes ir a nuestro foro
Comentarios de Tu Web Dinamica en Flash desde Cero
↑ Tutorial
black06
2006-12-17 14:02
jadm2007
2007-06-19 10:33
zions
2007-08-25 12:18
camilobotia
2008-02-20 10:58
camilobotia
2008-02-20 11:01