Português:Como começar
From Gaia Framework Wiki
Contents |
Download e Instalação
Antes de tudo, faça o download e instale o arquivo MXP mais recente do Gaia Framework. Já com o Gaia instalado, inicie o Flash e no menu selecione Windows > Other Panels > Gaia Framework. É recomendável também limpar o cache dos arquivos ASO.
Tudo pronto? Vamos começar!
Criando um Projeto Gaia
O primeiro passo para a criação de um novo projeto Gaia é escolher qual versão do Actionscript se quer usar. Clique em Create AS3 ou Create AS2. Isso te levará ao painel Project.
O painel Project
A primeira coisa que você precisa fazer é dar um nome ao seu projeto. Você pode mudar o nome do projeto quando quiser, então pode deixar o padrão por enquanto.
Pasta do Projeto
A seguir, selecione a pasta onde o projeto será criado. Você pode ter criado essa pasta anteriormente, ou criá=la agora, dentro da caixa de diálogo que abre ao clicar no botão.
Propriedades
Tendo nomeado seu projeto e escolhido uma pasta, é hora de configurar suas propriedades básicas. Você pode definir as dimensões, alinhamento, taxa de frames e cor do Stage. Note que você pode mudar qualquer um desses valores mais tarde, e com um clique o Gaia irá aplicar as mudanças em todos os seus arquivos do Flash.
Caminho das pastas
O último passo, opcional, é modificar o caminho das pastas do seu projeto. O Gaia utiliza como default os padrões do mercado:
* lib - Para arquivos .fla * bin - Para arquivos .swf, .html, etc. * src - Para arquivos .as (classes)
Outra configuração popular é a seguinte:
* src - Para arquivos .fla * src/classes - Para arquivos .as * deploy - Para arquivos .swf, .html, etc.
Você pode preferir outros nomes, como "flash" para seus arquivos Flash, ou colocar as classes na mesma pasta, por exemplo "flash/classes". Algumas pessoas preferem "www" como sua pasta para publicação. Gaia é flexível o bastante para permitir que você defina os nomes de pasta como preferir.
Você pode também customizar o local do arquivo site.xml. Por enquanto, deixe este campo vazio.
Clique em Create New Project e o Gaia irá criar seu projeto em poucos segundos, e automaticamente selecionar a aba Scaffold. Nós voltaremos a ela em breve. Agora, vamos dar uma olhada nos arquivos que o Gaia gerou.
Arquivos do Projeto
Como você pode ver, o Gaia criou toda a estrutura de pastas no painel.
- A pasta lib contém main.fla, preload.fla.
- A pasta bin é onde vão todos os arquivos publicados
- A pasta src contém todas as classes do framework
- A pasta templates contém os arquivos de template fla e as classes
- A pasta project.gaia é um xml de configuração que contém toda a informação sobre o seu projeto.
Abra a pasta bin.
Neste momento, ela contém um arquivo index.html, um arquivo preload.swf, um arquivo site.xml, e uma pasta chamada js, onde estão SWFObject e SWFAddress.
Se você abrir o index.html, verá que o swf já está inserido usando SWFObject, com suas dimensões e alinhamento incluídos.
Vamos ver o arquivo site.xml.
Site XML
Gaia usa um arquivo chamado site.xml, para definir a estrutura do site.
Abra o arquivo site.xml no editor de xml de sua preferência. Veja o default do site.xml:
<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>
Ramificações
O Gaia usa branches (ramificações, como uma árvore) como uma metáfora para como estrutura os sites. Os branches funcionam como caminho de pastas ou urls, com barras "/" separando cada page id.
O xml acima é um site com apenas um único branch: "index/nav/home".
Um branch consiste em page nodes, onde se pode ter quantos nodes forem necessários como filhos. Cada page node representa um swf que irá carregar como parte daquela ramificação.
São carregados branches inteiros, desde o index à página final de um único branch. No exemplo acima, você não pode carregar o branch "index/nav" pois a página "nav" tem pelo menos um child, neste caso uma página com a id "home". Se você tentar carregar "index/nav", o Gaia vai automaticamente carregar "index/nav/home". Você pode ignorar este comportamento usando o atributo landing no page node.
Informações detalhadas sobre os nodes do site.xml e seus atributos podem ser encontradas na seção Site XML da documentação.
Estrutura do XML
Antes de iniciarmos a customização do site.xml, vejamos sua estrutura e como isso se relaciona à maneira que o Gaia carrega seu conteúdo. Gaia carrega arquivos em ordem do topo de um branch até seu final, empilhando os swfs, então os "child" clips estarão no topo de seus "parent" clips. Você pode ignorar este comportamento usando o atribudo depth como descrito abaixo.
Site Node
O node raiz (root node) do site.xml é chamado <site>. O <site> node não tem atributos requeridos, e possui os atributos opcionais title e menu que podem ser definidos por você.
Página Index
O primeiro child do <site> node é um <page> node com o id="index". Uma das poucas convenções do Gaia é nomear a primeira página como "index".
A página "index" é especial por dois motivos: ela pode ser configurada para carregar independentemente e ter uma transição antes de carregar outras páginas, e também pode carregar embaixo de todas as outras páginas por padrão.
Páginas
No template site.xml, o primeiro child da página "index" é um page node com o id "nav". A página "nav" foi configurada para funcionar como uma navegação global: ela carrega sobre todas as outras páginas, tendo definido o atributo opcional "depth" como "top" e, mais importante, nessa configuração isso é persistente por ser o único child da página "index" e portanto parte de todas as ramificações abaixo.
A próxima página é nossa última página no branch de exemplo, e neste caso, é chamada de "home". Esta página tem um atributo título definido como "Home". Isso vai aparecer na barra de título do browser, onde você vê a string %PAGE% no atributo title do site node. Isso também é conhecido como "terminal page" por ser o último child do branch.
Apenas as terminal pages do branch (ou páginas com landing="true") vão ter seus títulos exibidos na barra do browser, então você só precisa colocar um título nas terminal pages para substituir o %PAGE% token.
O preloader passa os títulos de cada página individual que está carregando em seu evento de progress, então você pode colocar um título em todas as páginas para esse propósito. Este tópico está na seção Preloader.
Adicionando Páginas ao Site XML
Um site com apenas um branch não é bem um site, então vamos adicionar mais algumas 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>
Agora, temos três inacreditáveis branches! Veja quais são:
- "index/nav/people/friends"
- "index/nav/people/family/tree"
- "index/nav/home"
Perceba que apenas o último child em cada branch tem um título. Além disso há um atributo "menu" no <site> node e em alguns page nodes.
Se no clique do botão direito você quer ter um menu de contexto para navegar pelo site, adicione o atributo "menu" ao site node e defina como "true".
Se você quer mostrar uma página em particular no menu de contexto, configure menu="true" no page node e dê ao node um título.
Nota: Páginas sem título não serão mostradas no menu de contexto.
Também, como você pode ver, o page node Family tem o menu de contexto ativado, mas essa não é a página final do branch. Sem problemas, o Gaia irá mostrar "Family" no menu de contexto, mas irá levar a "index/nav/people/family/tree".
Tudo certo! Temos o suficiente na estrutura do site para o scaffold do nosso site de teste, então vamos em frente. Copie e cole o xml acima no seu arquivo site.xml e salve o arquivo.
Scaffolding
Agora, uma parte importante; Scaffolding!
Class Package
Volte para o painel Gaia Framework dentro do Flash. A aba Scaffold já está selecionada, e no topo está o campo de entrada do pacote Class, já preenchido com "pages".
Se você não tem familiaridade com class packages, não se preocupe pois é fácil. A regra básica é pegar o domínio do website e invertê-lo, e então adicionar o nome do projeto.
Por exemplo, se o site do seu cliente é company.com, e o projeto é chamado de website, seu class package seria:
com.company.website
Para os projetos do Gaia, é recomendado adicionar "pages" ao final de seus class packages. Então, ficaria assim:
com.company.website.pages
Por enquanto, mantenha no class package o atributo "pages".
Scaffold Project
Agora, tudo que você precisa fazer é clicar no botão Scaffold Project e o Gaia cuida do resto!
Gaia Scaffolding cria todos os FLAs para o site baseado nos nomes dos .swf em seu site.xml. Isso configura todos seus caminhos na pasta de publicação (bin), adiciona os arquivos de cada página no painel Publish, cria uma classe para cada página e define a classe como document class de cada página no Flash. O AS2 scaffolding cria arquivos exclude.xml para cada página do Flash, reduzindo drasticamente o tamanho dos arquivos swf.
Tendo gerado todos os arquivos do site, a aba Publish fica disponível, o Gaia publica o site inteiro e abre o arquivo main.fla.
Usando seu menu do botão direito, você pode navegar pelo site e assistir a transição na mudança de páginas.
Você pode abrir as pastas lib e bin e ver todos os arquivos Flash e swf, e pode olhar, dentro da pasta src, a pasta "pages" e ver todas as classes que o Gaia gerou, nomeadas com cada page id.
Parabéns, você já construiu seu primeiro site com o Gaia Framework em poucos minutos!
Agora, é hora de ver a documentação sobre Páginas para aprender mais sobre como o Gaia funciona.
