Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

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:

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:

Propiedades del Componente

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.

Cuadro de Texto con ScrollBar

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&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>

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

Ver la primer parte

Por consultas o sugerencias sobre esta entrega, puedes ir a nuestro foro

Comentarios de Tu Web Dinamica en Flash desde Cero Final

↑ Tutorial

  • RUFO11

    RUFO11

    2006-10-05 12:01

    ES BUENO QUE DELIMITEN EL PASO A PASO DE ESTA MANERA ASI ES QUE LAS PERSONAS QUE NO TIENEN MUCHA IDEA APRENDEN Y SE SIENTE BIEN
  • kikuek

    kikuek

    2006-10-20 10:28

    alguien me podria si en dreamweaver se puede seleccionar una area i crear un hipervinculo y como se hace gracias.
  • rojaslrp

    rojaslrp

    2006-10-31 18:22

    buen tutorial desde cero y paso a paso, me voy a poner manos a la obra le estare dando consultas y/o sugerencias

    gracias
  • pressesman

    pressesman

    2006-12-06 15:11

    Hola, como soy muy nuevo en este interesante foro, no he visto toso los tutoriales de Flash, quiero saber si eesposible que a mi correo me pudieran enviar ó de donde descargo los tutoriales completos del programa. ya que no se programar y no comprendo bien la parte del código.


    Muchas gracias
  • luismarcos

    luismarcos

    2006-12-11 19:25

    el action script tiene errores
  • nataskid

    nataskid

    2006-12-20 23:36

    no se si seria mucho pedir, si sepudriera anexar el resultado del ejemplo que se explica en cada tutorial ya que ahi funciona perfectamente. pero la reantemanolidad es otra OJO no pido el archivo para modificar, nada mas que se muestre el resultado de lo que se esta explicando
    muchas gracias de antemani
  • chartman79

    chartman79

    2007-01-13 00:50

    buen tutorial, interesante aporte
    Muchas gracias
  • David Milich

    David Milich

    2007-03-26 09:10

    Gracias!!! :-)
  • masmorsa

    masmorsa

    2007-08-02 21:13

    Muy bueno el tuto y muy bien detallado. Muchas Gracias!!!
    Si quisiera agregar en my_text una descripción o anécdota de la foto que se carga, ¿cómo podría hacerlo?
  • camilobotia

    camilobotia

    2008-02-20 11:02

    Que mas muchachos??, les cuento que soy nuevo en esta comunidad, segui el tutorial paso por paso, todo esta al pelo, nada de errores, anque son bueno en la parte de diseño, aun estoy crudo en la parte de action script, ya que todo lo que se es de manera empirica, estas comunidades son excelentes para tener la oportunidad de aprender sin necesidad de clavarse en un libro, buen paso a paso ;-)