Español:Empezando
From Gaia Framework Wiki
Contents |
Descarga e Instalación
Primero, descargue el archivo más reciente de Gaia Framework MXP e instalelo. Cuando lo haya instalado, ejecute Flash y en la barra de menú seleccione Windows > Other Panels > Gaia Framework. Usted debería tambien borrar sus archivos ASO.
Todo listo? Empecemos!
Creando un Proyecto en Gaia
El primer paso cuando se está creando un proyecto en Gaia es seleccionar la versión de Actionscript sobre la cual usted va a trabajar. Haga click en Create AS3 ó Create AS2. Esto le conducirá al Project Panel.
Panel de Proyectos
Lo primero que tiene que hacer es darle un nombre a su proyecto. Usted puede cambiarlo cuando desee, por lo tanto puede dejarlo como está por defecto.
Carpeta del Proyecto
A continuación, seleccione una carpeta para crear su proyecto adentro. Usted tambien puede crear esta carpeta mas adelante, o dentro de la ventana de dialogo que abre cuando se hace click al botón.
Propiedades
Una vez que usted ha nombrado su proyecto y seleccionado una carpeta, es tiempo de configurar las propiedades básicas. Se pueden seleccionar las dimensiones, alineación, tasa de frames y color del stage. Note que usted puede cambiar estos valores despues y con un solo click Gaia aplicará los cambios a todos sus archivos de Flash.
Rutas de Carpetas
El ultimo paso es opcional y consiste en modificar la ruta de las carpetas en su proyecto. Por defecto, Gaia usa el estandar de la industria:
- "lib" - Para archivos .fla
- "bin" - Para archivos .swf, .html, etc.
- "src" - Para archivos .as (classes)
Otra configuración popular es:
- "src" - Para archivos .fla
- "src/classes" - Para archivos .as
- "deploy" - Para archivos .swf, .html, etc.
Usted puede preferir otros nombres, como "flash" para sus archivos Flash, o tambien puede preferir colocar los archivos de sus clases en la misma carpeta, de la forma "flash/classes". Muchas personas usan "www" como su ruta de carpeta de publicación. Gaia es lo suficientemente flexible para permitirle el uso de su convención preferida a la hora de nombrar las carpetas.
También puede configurar donde se ubica el site.xml. Por ahora, dejemos ese campo en blanco.
Haga click en Create New Project y Gaia creará el proyecto para usted en cuestión de segundos, y automaticamente se seleccionará la pestaña de Ensamblando. En breve hablaremos de eso. Por ahora, echemos un vistazo a los archivos que generó Gaia.
Archivos del Proyecto
Como puedes ver, Gaia ha creado todas las carpetas hechas en la ruta de carpetas del panel.
- La carpeta lib contiene main.fla, preload.fla.
- La carpeta bin es donde quedan los archivos que sean publicados
- La carpeta src contiene todas las clases para el framework
- La carpeta de templates contiene template.fla y archivos de clases.
- La carpeta project.gaia es una configuración de archivo en xml que contiene toda la información de su proyecto.
Abra la carpeta bin.
De momento, contiene un archivo index.html, un archivo preload.swf, un archivo site.xml, y una carpeta llamada js, donde contiene SWFObject y SWFAddress.
Si usted abre el archivo index.html, usted verá que el swf fue agregado usando SWFObject, y todas las dimensiones y alineado estan incluidos.
Veamos el archivo site.xml
Sitio XML
Gaia usa un archivo XML para definir la estructura del sitio llamada site.xml.
Abra el archivo site.xml en su programa de edicion favorito de archivos xml. El archivo site.xml luce por defecto de la siguiente forma:
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
Ramificaciones
Gaia usa ramificaciones (como un árbol) como metafora de como se estructura el sitio. Las ramificaciones trabajan como rutas de carpetas y URLs, seguidas de slashes que separan cada id de páginas.
El anterior xml es un sitio con solo una ramificación: "index/nav/home".
Una ramificación consiste en nodos de página, cada uno del cual puede tener otros nodos de páfina como sus hijos. Cada nodo de página representa un swf que deberá cargar como parte de esa ramificación.
Gaia carga la totalidad de las ramificaciones, desde la página index hasta la página final de una simple ramificación (página terminal). En el ejemplo de arriba, usted no puede cargar la ramificación "index/nav" porque la página "nav" tiene al menos un hijo, en este caso una página de id "home". Si tu tratas de cargar "index/nav" Gaia automáticamente cargará "index/nav/home". Usted puede anular éste comportamiento usando el atributo "landing" en el nodo de página.
Información detallada acerca de los nodos del site.xml y sus atributos puede ser encontrada en la sección Site XML de esta documentación
Estructura arbol XML
Antes de empezar a configurar el site.xml, echemos un vistazo a su estructura y como esta se relaciona cuando Gaia la carga en contenido. Gaia carga archivos en orden de arriba de la ramificación a debajo de la misma, (?STACKING?) los swfs de modo que los clips hijos queden arriba de los clips padres. Usted puede anular este comportamiento usando el atributo de profundidad (depth) como se describe a continuación.
Site Nodo
El nodo root del site.xml es llamado <site>. El nodo <site> no requiere atributos, y tiene titulo opcional y atributos de menu hechos para usted.
Index Página
El primer hijo del nodo <site> es un nodo <page> con el id="index". Una de las pocas convenciones de gaia es llamar a la primera página "index".
La página "index" es especial por 2 razones: puede ser configurada para cargarse ella misma y hacer "transition in" antes de que las otras páginas sean cargadas, y ella tambien se carga detrás de las otras páginas por defecto.
Páginas
En la plantilla del site.xml, el primer hijo de la página "index" es una pagina de nodo con el id "nav". La página "nav" ha sido configurada para funcionar como la navegación global: se carga encima de las otras páginas si se configura el atributo "depth" a "top" y, más importante, en su configuración es persistente porque es la unica hija de la página "index" y por lo tanto parte de cada ramificación en el arbol debajo de ella.
El hijo que sigue es nuestra última pagina en el ejemplo de ramificaciones y, en este caso, es llamada "home". Esta página tiene el atributo del titulo como "Home". Este aparecerá en la barra de titulo del navegafor donde tu ves la cadena simbolica %PAGE%. Esta tambien es conocida como "página terminal" ya que es el ultimo hijo en una ramificación.
Solo las páginas terminales de una ramificación (ó páginas con landing="true") pueden tener su titulo mostrado en la barra de titulo del navegador, entonces usted solo necesita poner un titulo en páginas terminales para que reemplacen la cadena simbolica %PAGE%.
El precargador (preloader) carga el titulo de las paginas individuales durante el evento de progreso de carga, entonces si usted desea poner un titulo en cada página para éste propósito, se puede, y este tema es tratado en la sección Precargador de esta documentación.
Agregando Páginas al Sitio XML
Un sitio con solo una ramificación no es mucho para un sitio, entonces agreguemosle más páginas!
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="people" src="people.swf">
<page id="friends" title="Friends" src="friends.swf" menu="true"/>
<page id="family" title="Family" src="family.swf" menu="true">
<page id="tree" title="The Family Tree" src="familytree.swf"/>
</page>
</page>
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
Ahora tenemos tres increibles ramificaciones! Ellas son
- "index/nav/people/friends"
- "index/nav/people/family/tree"
- "index/nav/home"
Observe que solo el ultimo hijo en cada rama tiene un titulo, y hay un atributo en el nodo <site> y tambien algunos otros nodos de páginas, "menu".
Si usted desea tener un menú de contexto con click derecho para navegar a través de su sitio, añada el atributo "menu" al nodo del sitio y dejelo en "true".
Si usted desea una página particular para mostrar en el menu contextual del click derecho, deje menu="true" en el nodo de página y dele tambien un titulo.
Nota: Páginas sin titulos no se mostrarán en el menú contextual.
Tambien, como puede ver, el nodo de página -family- tiene el menu contextual consigo, pero esta no es la página final de esa ramificación. Esto eta bien porque Gaia deberá mostrar "Family" en el menu contextual y navegar a "index/nav/people/family/tree".
Bien! Hemos tenemos suficiente estructura para un sitio para hacer scaffold y probrar nuestro sitio, entonces hagamoslo!. Copie y pegue el xml de arriba detro de su site.xml y guarde los cambios.
Ensamblando
Ok, es tiempo de la parte emocionante. Ensamblando!
Paquete de Clases
Regrese a Flash y especificamente al panel de Framework de Gaia. La pestaña de ensamblando ya está seleccionada, y en la parte superior esta el campo de relleno de Paquete de Clases con la palabra "pages" ya adentro.
Si no está familiarizado con Paquete de Clases, no se preocupe, es facil. La regla básica a seguir es tomar el dominio del cliente y voltearlo, y entonces añadir el nombre del proyecto.
Por ejemplo, si su cliente tiene el website company.com, y el proyecto del cliente se llama website, entonces su paquete de clases debe quedar:
com.company.website
Para proyectos Gaia, es recomendado añadir "pages" al final de sus class packages. Deberá quedar:
com.company.website.pages
Por ahora, deje el paquete de clases como viene por defecto "pages".
Ensamblando al Proyecto
Ahora, todo lo que tiene que hacer es hacer click al boton Scaffold Project y Gaia se encarga del resto!
El Scaffolding de Gaia crea todos los FLAs para el sitio basado en los nombres de .swf de su site.xml. Se quedan configuradas todas las rutas de publicación a la carpeta (bin), añade a su vez cada arhivo de página al panel de publicación (Publish Panel), crea tambien una clase para cada página y configura la clase como la document class de cada página flash. El ensamblando en AS2 crea el archivo exclude.xml para cada página Flash para reducir drasticamente el peso de los swf.
Solo cuando se ha terminado de generar todos los archivos del site, la pestaña de Publicación se vuelve disponible, y Gaia publica el sitio completo y abre el main.fla
Usando su click derecho, usted puede navegar a traves del sitio y ver las secciones con -transition in- y -transition out- como usted lo hizo.
Usted puede abrir las carpetas lib y bin y ver los archivos de Flash y los swf, y puede mirar dentro de la carpeta src la carpeta "paginas" y ver todas las clases de página que generó Gaia, nombradas con su respectivo id.
Felicitaciones, usted ha construido su primer sitio con Gaia Framework en solo pocos minutos!
Ahora, es tiempo de pasar a la sección Pages de la documentación para aprender más acerca de como funciona Gaia.
