O layout líquido (também conhecido como layout fluido, entre outros nomes) é uma técnica usada para posicionar os elementos da página de acordo com o tamanho da área do conteudo Flash no navegador ou no Flash Player.
Existem 4 coisas importantes que se devem fazer:
• definir o tipo de escala do stage;
• definir o tipo de alinhamento do stage;
• criar um ouvinte que detecte o redimensionamento do stage;
• detectar as medidas do stage (altura e largura).
Definindo o tipo de escala:
A classe StageScaleMode possui as constantes que definem os tipos de escala do stage: EXACT_FIT, NO_BORDER, NO_SCALE, SHOW_ALL. O layout líquido só funciona com NO_SCALE, ou seja, sem escala, justamente para que as medidas do stage possam variar sem sofrer nenhum tipo de escala.
Definindo o tipo de alinhamento:
A classe StageAlign possui as constantes que definem os tipos de alinhamento do stage: BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT, TOP, TOP_LEFT, TOP_RIGHT. O alinhamento define onde vai estar posicionado o ponto de origem (x:0,y:0). O tipo usado com maior frequencia é o TOP_LEFT, que deixa o ponto de origem no canto superior esquerdo.
Criando um ouvinte:
Você pode definir a posição inicial dos elementos de acordo com o tamanho do stage, mas o interessante do layout líquido é redefinir o posicionamento quando houver um redimensionamento do stage. Para isso, se cria um ouvinte que detecte quando ele é redimensionado:
stage.addEventListener(Event.RESIZE, nomeDaFuncao)
Detectando as medidas:
Duas propiedades da classe Stage são usadas para detectar a largura e altura do stage: stageWidth, stageHeight. O valor de stageWidth é a largura e o valor de stageHeight é a altura.
Muito bem… agora que já expliquei como funciona, vem a parte de trabalhar com os elementos e considerar o lugar ideal para o ponto de origem em cada um deles. Por exemplo, digamos que estou usando o alinhamento TOP_LEFT e quero deixar um objeto centralizado. Se o conteúdo desse objeto estiver centralizado em relação ao seu ponto de origem (do objeto, não do stage!), o código sería:
objeto.x = stage.stageWidth/2 objeto.y = stage.stageHeight/2
Mas se o conteúdo do objeto estiver posicionado a partir do seu ponto de origem, o código sería:
objeto.x = stage.stageWidth/2 - objeto.width/2 objeto.y = stage.stageHeight/2 - objeto.height/2
Porém, não existe uma regra que defina o certo ou errado sobre isso. O ideal é ver qual forma é a mais fácil de trabalhar em cada caso.
Pelo fato de poder variar a posição do conteúdo do elemento em relação ao seu ponto de origem, existem muitas formas de programar e cada caso é um caso. Então, vou disponibilizar dois exemplos com algumas dessas formas e a partir deles você pode fazer as variações que quiser.
Exemplos de Layout Líquido (salvo como CS3)
Baixado 2452 vezes
Tamanho 18.17 kB
Observação: para não acharem que é obrigatório, não usei nenhuma classe de tween nos exemplos, porém, é muito recomendado o seu uso para poder suavizar os movimentos.
IMPORTANTE #1: para o layout líquido funcionar no navegador, o conteúdo Flash não pode ter o tamanho definido em pixéis (ou seja, medidas exatas) e deve estar em porcentagem, como é feito no caso do Fullbrowser.
IMPORTANTE #2: o termo stage é uma propiedade da classe DisplayObject. Ao omitir o objeto da propiedade, ela fará referência ao stage do escopo (contexto) em que se encontra. Por isso, ao usar essa propiedade da mesma forma (omitindo o objeto) em um SWF carregado, ela não fará referência ao Stage Principal.
em 10 de agosto de 2010
Ótimo post, do Igor parabéns o/
Bem queria deixar algo sobre isso, layout liquido é sim muito útil, para resposicionar itens do swf, para melhor aproveitar a area do navegador, e não deixar o layout do site “quadrado”, mas vale lembrar também que se bem usado, pode-se criar várias utilidades, valorizando ainda mais o site em flash :)
em 11 de agosto de 2010
Ae igor! :)
Layout líquido é sempre útil e um pouco trabalhoso, é bom mesmo dar uma explicada pro pessoal saber os conceitos básicos antes de aplicar.
Bom post! Abraço!
em 11 de agosto de 2010
Grande Igor, ótimo artigo.
Porem e possível sim acessar o stage dentro de DisplayObjects carregados dentro de um DisplayObjectContainer.
Mas, para acessar o stage, e preciso que o DO esteja em algum outro DO ou seja, que ele seja filho de algum pai (addChild).
Descobri isso a pouco tempo, pois sempre achei que cada DO tinha seu próprio stage, porem o stage esta mais para um _root mesmo (AS2).
[]‘s
em 11 de agosto de 2010
Valeuuu, Eder! :)))
=================================================
Eai, Allan…
Brigadao pelo comentario!
Realmente, o stage pode ser acessado sim através de uma referencia (caminho relativo, passado como parametro ao swf carregado, entre outras formas)… o que eu quis dizer foi o termo em si “stage”, ou seja, q a pessoa nao poderá usar um codigo IDENTICO no swf carregado (terá q fazer essas mudanças para referenciar). Mas foi uma boa observaçao, vou mudar um pouco a explicaçao pra ficar mais claro o q quero dizer… hehehe… valeu!! :D
[]‘s
em 16 de agosto de 2010
Só conferindo…. ehehe
Show de Bola Iguis!
em 16 de setembro de 2010
Então Gente Bonita;
Esse Site Aqui ô Já ta Nos Favoritos,
Sempre que Precisar de Alguma coisa sobre o Flash vou Vim Aqui Primeiro,
Parabéns Aos Seus Criadores,
Continuem Assim, Que Deus Abençõe VoCês!!!
em 17 de fevereiro de 2011
Tenho uma duvida..
Bom eu estou criando menu com barra no fundo
ate agora consegui fazer tudo certo, centralizado e tal.
Mas abaixo do menu quero colocar uma imagem que fike até o final da pagina acima da
barra de Rodape,
ou seja:
Feichando a tela
Abaixo do Menu
Em Cima do Ropapé
Se Puder me ajudar ficarei agradecido.
Obrigado, e está otimo o site,
é o meu favorito!
em 17 de fevereiro de 2011
Ola, Jonathan… obrigado pelo comentario!
Se vc já definiu a posição do menu e do rodapé, vc pode usa-los como referencia para a imagem… por exemplo:
o codigo pode variar dependendo do ponto de registro da imagem, mas a ideia é essa… usar outros objetos como referencia.
em 9 de março de 2011
Boa noite Igor,
Cara.. assim como os outros seu site ja esta nos meus favoritos !
Otimas explicações e tem sido muito importantes para eu e meu trabalho !
Mais cara eu estou com uma duvida.
Estou desenvolvendo um site com layout liquido. Posicionei todos os MovieClips e quando abrimos o site em diferentes resoluções os objetos fica certinho, mais o meu background q é uma imagem, nao esta redimencionando. Transformei ela em movieclip com o ponto de origem no meio e o defini para ela:
background.x = stage.stageWidth/2
background.y = stage.stageHeight/2
Não sei mais o que eu faço. Tem uma ideia do que posso estar fazendo errado ?
Agradeço a atenção.
Abração.
em 10 de março de 2011
Olá, Rafael…
Você está definindo os valores ‘x’ e ‘y’ de background, entao o unico q está fazendo é definir o posicionamento, nao o tamanho. Você precisa trabalhar com os valores ‘width’ e ‘height’ de background, q indicam largura e altura, respectivamente.
Dá uma olhada neste link: http://www.flashpedia.com.br/2010/08/ajustar-o-tamanho-do-fundo-proporcionalmente/ …nele explica isso q vc quer fazer.
Muito obrigado pelo comentario e pela visita!
Um grande abraço.
em 15 de abril de 2011
Ótimo post! Parabéns!
Porém tenho um problema. Ao colocar a imagem de fundo, ele altera a qualidade. Esta imagem de fundo, é vetorizada em Corel. São uns “carinhas” feitos em traço e curvas. Gostaria de saber, porque as curvas em traço ficam distorcidas ?
Obrigado!
em 15 de abril de 2011
Olá Felipe.
O vetorizado que vc diz é vetor mesmo, ou vetor tranformado em imagem?
As causas da distorção podem ser duas:
1 – Em caso de imagem, não estar habilitado o “smoothing” (clique na imagem com botão direito na library, propriedades, ‘allow smoothing’)
2 – Proporção errada (Você deve obedecer a proporção da imagem redimensionando largura e altura pelos mesmos valores)
em 16 de abril de 2011
Perfeito! Eder, obrigado! Deus te abençoe!
E o que significa esse tal de “smoothing”, eim ? nem deveria existir isso.. rs
Obrigado!
Abraços!
em 9 de maio de 2011
Grande Eder, bom dia!
Eu denovo! rsrs
Cara, porque os vídeos importados para o flash, em extensão .flv, também sofrem com a distorção, quando em layout liquido?
Existe algo como o “allow smoothing” para eles ? Não consegui achar!
Obrigado! Abraços.
em 30 de maio de 2011
Felipe,
chame o video via AS3 e use a propiedade smoothing da classe Video.
em 17 de junho de 2011
Igor,
Meu trampo foi feito em AS2. E, só manjo AS2. Se souber como chamar um AS3 num AS2, e como aplicar o código, faz um tuto pra nós aí ?!
Grande abraço
em 19 de junho de 2011
Felipe, AS2 nao carrega AS3. Nao tem jeito.
O AS3 carregr AS2, mas mesmo assim sao muito limitados os recursos.
Abraço.
em 6 de julho de 2011
Olá…para todos que postam neste site, por sinal muito bom.
sou novo na área de AS3 e tenho visto e usado as sugestões que a mim serve.
Uma perguntinha para (Igor Amendola); Onde se aplica as acões do layout líquido?
na camada de fundo, no flash todo ou tem um local especifico, porque ainda não consegui acertar…Agradeço se puder me ajudar com isto. Ahh, quero saber se posso estar postando minha URL aqui para que possa ver pois, assim ficaria mais fácil me ajudar.
Obrigado.
em 6 de julho de 2011
Olá, Rodrigo…
O actionscript em si pode ser aplicado de varias formas: na timeline principal, na timeline de algum movieclip, em um arquivo externo… mas a forma q vc vai aplicar depende da estrutura do teu projeto e da tua habilidade na criaçao de projetos.
O importante q vc deve saber é o seguinte: se aplicar na timeline um codigo q faz referencia a alguma objeto, eles devem estar no mesmo numero de frame, independente da ordem das camadas. As camadas so servem pra organizar o nivel de profundidade dos objetos visuais, e a ordem delas nao afeta o codigo.
Neste post disponibilizo dois exemplos, os quais tem o codigo actionscript aplicado no primeiro frame da timeline principal. Da uma olhada neles pra ver como diz nesses casos.
E pode postar tua URL, sim.
Obrigado pelo comentario e um abraço!
em 26 de janeiro de 2012
Olá,
Estou com uma dúvida em um trabalho que comecei a fazer.. segui todas as recomendações sobre o layout liquido, só que acontece um erro que não estou conseguindo resolver.
Coloquei o código do LL em cada item do meu menu. Exemplo;
Home – O que é? – Nossa Rede Anunciantes
O projeto está programado para que assim que abrir o HOME abra automaticamente, dai quando clico no botão o que é, ele me da esse erro:
TypeError: Error #1009: Não é possível acessar uma propriedade ou um método de uma referência de objeto nula.
at home_fla::MainTimeline/
redimensionar()
Ja pesquisei sobre o assunto, e vi uma solução falando à respeito do stage.removeListener …
mas não consegui de fato resolver, e o pior é que este erro faz com que a programação que fiz perca as suas funções.
poderia me ajudar?
em 30 de janeiro de 2012
Olá, Thiago…
Isso acontece pq vc está tentando chamar o stage e ele ainda nao está acessivel qnd vc está chamando ele. pra isso há duas possiveis soluçoes:
- passar o stage do swf principal por parametro aos swf carregados.
- nos swf carregado criar um ouvinte com tipo de event ADDED_TO_STAGE pra detectar quando o SWF é iniciado e ja tem acesso ao stage…
addEventListener(Event.ADDED_TO_STAGE, funcao)
em 3 de fevereiro de 2012
Valeu Igor… eu sei que era uma dúvida besta, mas me ajudou bastante.
Obrigado.