Trabalhando com Layers - netoleal/ASF2 GitHub Wiki

Trabalhando com Layers

Trabalhando com Layers

O ASF permite a você criar layers na sua aplicação e em suas seções. As layers servem para controlar o posicionamento e toda a ordem hierarquica dentro da DisplayList.

Exemplo

<layers>
	<base>
		<top />
		<footer align="leftbottom" height="50"/>
	</base>
	<sections margins="300,50" />
	<loading align="centermiddle" width="0" height="0" margins="100,0" />
</layers>

Neste exemplo, existem 3 layers principais (base, sections e loading) e dentro da layer "base" existem duas sublayers (top e footer). Os atributos reconhecidos pelas layers são:

  • align Método de alinhamento da layer dentro de seu "parent". Você pode criar combinações de valores representando o eixo vertical e horizontal. A layer se posicionará no Stage e acompanhará automaticamente o Resize (caso haja). Esses valores são:
    • top Vertical no Topo
    • middle Vertical ao centro
    • bottom Vertical embaixo
    • left Horizontal à esquerda
    • right Horizontal à direita
    • center Horizontal ao centro
  • width Largura da layer
  • height Altura da layer
  • margins "left,top" Margens esquerda e superior da layer. Por exemplo: Caso o align seja "centermiddle" e o margins seja "50,20" a layer se posicionará no centro da tela com um deslocamento pra esquerda de 50 pixels e para baixo em 20 pixels. Valores negativos e percentuais são perfeitamente possíveis.
  • box "x,y,width,height" Retângulo para a layer considerar como sendo sua área limite de posicionamento.

Acessando Layers

Você pode acessar as layers para adicionar elementos na tela. Você tem acesso à propriedade layers a partir da aplicação principal e/ou da uma seção. Por exemplo: para acessar a layer footer do exemplo anterior (supondo que estamos falando de layers dentro de uma seção) poderíamos fazer das seguintes formas:

var footer:Footer = new Footer( );
section.layers.base.footer.addChild( footer );

ou (recomendável)

var footer:Footer = new Footer( );
section.layers.footer.addChild( footer );

As duas formas são possíveis. Ou seja, apesar da layer "footer" "fisicamente" existir DENTRO da layer "base" (inclusive na DisplayList), você pode acessá-la diretamente. Isso permite que você fique livre para mudar o posicionamento hierarquico dela no XML sem precisar alterar seu código fonte. Assim, sua aplicação fica bem mais dinâmica.

⚠️ **GitHub.com Fallback** ⚠️