Layout líquido (ou fluido) no Flash CS4

Por várias vezes fui questionada em como fazer um layout em Flash que se adapta-se em todas as resoluções e eu sempre respondo que este layout tem que ser pensado desde o início desta forma e depois a parte de implementação acaba sendo a mais fácil.

Vejo muito na Internet, também, vários modelos de "como fazer" este layout no Flash... o que acaba nos remetendo ao ActionScript e não temos como fugir disso...

Procurei de uma forma bem simples e prática elaborar este tutorial para que essa montagem não seja nenhum "trauma".

Então, vamos lá...

1 - Com um novo documento no Flash, importe a sua imagem de fundo do layout ou desenhe uma forma dentro do flash para que seja o seu fundo;

2- Transforme este objeto em um MovieClip com o ponto de registro no centro do símbolo e coloque o nome de instância de "mc";

Lembre-se: esta foto é seu fundo e tem que cobrir todo seu palco(stage).

3- Crie uma nova layer e no painel action digite:

stage.scaleMode = StageScaleMode.EXACT_FIT;
stage.addEventListener(Event.RESIZE, tamanho);

function tamanho(evt:Event):void{
posicaoMC();}

addChild(mc);

posicaoMC();

function posicaoMC():void{
mc.x = stage.stageWidth/2;

mc.y = stage.stageHeight/2;

}

Se você testar seu swf agora vai ver que quando pedido tela cheia o fundo adapta-se e preenche toda a janela.

Não esqueça que seu a Div que terá seu swf do site tem que ter as medidas em porcentagem (%) ou "em", que são unidades de medidas relativas.

Você, também, pode selecionar a opção File > Publish Settings no Flash e marcar que quer executar o HTML em Tela Cheia e deixar suas dimensões em %.

Não me preocupei em explicar a parte do código, pois quem esta trabalhando com ActionScript 3.0 o entenderá, mas qualquer dúvida estou a disposição...


Comentários

  1. Muito Bom Ana Paula,Parabéns.

    ResponderExcluir
  2. Obrigada, estarei colocando algumas novidades e já incrementando para o Flash CS5.

    Abraços,

    Ana

    ResponderExcluir
  3. Bom Ana Paula, não deu muito certo aqui não, botei as dimençoes do swf 100%, e da div 100%, quando visualizei no navegador apareceu só a metade do swf...

    ResponderExcluir
  4. Olá Darllei!

    Duas coisas importantes:

    - Quando for transformar o teu fundo em MC deixe o ponto de registro no meio;
    - Quando pedir a publicação do HTML pelo flash (é a melhor forma neste caso) na opção html deixe marcado a opção Dimensions: percent;
    - Peça F12 pelo flash e vai ver que teu swf vai ocupar toda a tela.

    Espero ter ajudado

    Abraços,

    Ana

    ResponderExcluir
  5. Deu certo, o problema era o registro, não estava marcado no meio, valeu ai Anaaaa.

    ResponderExcluir
  6. Deu certo, o problema era o ponto de registro, estava marcado no meio e no canto direito, valeu Anaaaa!

    ResponderExcluir
  7. Olha eu aqui novamente, Surgiu outro problema. fiz deu certo, mas na hora de botar Botões não dá para clicar. Coloquei eles por cima do "MC" e não deu.

    ResponderExcluir
  8. Olá!

    Tudo que fizeres neste site, tem que ser dentro da timeline do MC para dar certo...

    Ana

    ResponderExcluir
  9. Bom, fiz dentro da mesma linha de tempo, coloquei os BT dentro e fora do MC, e nada não fica clicável, se poder fazer uma video aula e postar o link aqui agradeço. Abraços

    ResponderExcluir
  10. Olá Darlei!

    Coloquei os botões dentro do MC e funcionou perfeitamente...

    Abraços,

    Ana

    ResponderExcluir
  11. Consegui de outro jeito, Diminui o mc para 1px e deu certo , bt dentro do mc não funcionou.

    ResponderExcluir
  12. Olá, ao utilizar esse código, o fundo do meu site (mc) ficou aparecendo só metade, e essa metade ficou sobrepondo os outros elementos.
    oq pode ser isso?
    quando no lugar do
    mc.x = stage.stageWidth/2;
    mc.y = stage.stageHeight/2;

    se eu tirar esse /2, o fundo some...
    ai eu vou aumentando pra ver se chega a cobrir o palco todo, mas nao cobre nao
    me ajuda por favor?

    ResponderExcluir
  13. /\
    sobre o post acima, eu coloquei o ponto de registro no meio e agora ele aparece por completo no palco, o problema é que tapou tudo agora D:
    como eu faço para o fundo ficar no fundo?
    abraços

    ResponderExcluir
  14. Olá Daniel!

    Deixe esta camada por último (bem embaixo)...

    Abraços,

    Ana

    ResponderExcluir
  15. O que fazer para que a imagem de fundo nao perca a proporção, ela diminuir por inteiro. Evitar achata-la. eu vi nesse site aqui:
    http://www.taraswain.com/#/bridal-gallery

    Se puder me salvar dessa!
    obrigado

    ResponderExcluir
  16. Olá Fernando!

    Pode usar esta linha:

    stage.scaleMode = StageScaleMode.SHOW_ALL;

    Que a imagem não vai distorcer...

    Abraços,

    Ana

    ResponderExcluir
  17. Funcionou, mas nao como eu gostaria.
    Ela diminuiu a imagem, mas nao de acordo com o stage! (nao sei se vc entendeu). Por exemplo, se eu diminuir somente a largura, descobre e da pra ver o fundo branco em cima e embaixo.

    =/

    isso tem como arrumar ou preciso procurar outro código?

    ResponderExcluir
  18. Fernando eu arrumaria na posição das layers ou tens que ver outra forma de fazer mesmo...

    Sempre que preciso uso esta e da certo, pelo menso para o que eu quero...

    Abraços,

    Ana

    ResponderExcluir
  19. Oi Ana Paula

    Primeiramente "parabéns!!!" pela simplicidade e clareza do tutorial, muito bom.

    Estou com um pequeno problema, o mc ta centralizado no palco, mas ainda assim fica gerando uma borda no "lado esquerdo e no topo - mostrando o fundo branco do palco" o que poderia ser?

    eu mudei aqui o codigo
    de:
    mc.x = stage.stageWidth/2;
    mc.y = stage.stageHeight/2;
    ex link:
    http://maravistahospedagem.com.br/teste/teste_.html

    para:
    mc.x = stage.stageWidth/100;
    mc.y = stage.stageHeight/100;
    ex link:
    http://maravistahospedagem.com.br/teste/teste2.html

    pois não tava aparecendo o quadrado preto que fiz se deizar como acima no teu codigo "/2" ele fico no canto infeiror direito so a ponta dele
    agora quando mudei pra 100 funcionou mas fica essa borda branca do palco.

    coloquei neste link para que você possa me ajudar por favor



    muito obrigada
    bjs
    Flavia

    ResponderExcluir
  20. Olá Flavia!

    Já te mandei um e-mail e acrescentei um detalhe no tutorial para transformar o símbolo com o ponto de registro no meio...

    Abraços,

    Ana

    ResponderExcluir
  21. Bom dia.
    Ana Paula, obrigado por esse tópico interessante, mas só gostaria de pedir um esclarecimento. Esse código é para AS 3? Eu estou usando o 2 e não deu certo. Agradeço desde já.

    ResponderExcluir
  22. Por isso que aqui não funcionou. Você tem idéia de como isso ficaria no AS2?

    ResponderExcluir
  23. Olá!

    Faz muito tempo que não trabalho mais com o AS2... não tenho idéia mais como sefaz, mesmo...

    Podes tentar ver no help do Flash...

    Abraços,

    Ana

    ResponderExcluir
  24. Olá !
    Precisava de uma ajudinha se fosse possível . Quando testo o meu swf no Flash está tudo bem e ao exportar para HTML o meu swf e mesmo metendo a div em % só me aparece metade do swf . Como é que isso é possível ?
    Se me puder ajudar agradecia .


    Carlos

    ResponderExcluir
  25. Olá Carlos!

    Vá na opção Publish Settings e na aba HTML marque a opção Allow Full Screen no item Template; na opção Dimensions deixe marcada a opção Percent e peça para Publicar...

    Desta forma funciona, pois o Flash gera o HTML com os parâmetros para o HTML abrir em Tela Cheia.

    Abraços,

    Ana

    ResponderExcluir
  26. Mesmo assim não funciona .
    Eu enviei-lhe um e-mail , se me puder ajudar agradecia .

    Carlos

    ResponderExcluir
  27. Olá Carlos!

    Te respondi o e-mail com o arquivo funcionando... Tens que deixar o Flash Player 10 e não 9...

    Abraços,

    Ana

    ResponderExcluir
  28. Boa tarde!
    Preciso de uma ajuda!
    Fiz um site no CS3 e qdo vou publicar em Html ele funciona direitinho sem eu usar codigos...(qdo exporto e publico no CS5 a barra de rolagem do navegador some)
    Agora, qdo faço um novo site no flash CS5 e publico, o site aparece pela metade e sem a barra de rolagem do navegador.
    As opções estão todas corretas mas o problema persiste, ou seja o problema está no CS5!
    O que falta?
    Uso AS2!

    Desde já, agredeço!

    Jonathan

    ResponderExcluir
  29. Olá!

    Esse código é AS3 e tens que optar por usar o flash player 10... No mais funciona.

    Abraços,

    Ana

    ResponderExcluir
  30. Nossa muito boa essa explicação, estou procurando por isso há tempos, muito obrigado e parabéns!

    Abraço!

    ResponderExcluir
  31. Bom Dia Ana Paula, o seu codigo funcionou perfeitamente mas estou com duvida em questão ao resto do site, exemplo: eu entrei na MC e coloquei uma logo lah dentro, e gostaria de fazer ela nao esticar. Tem como voce ensinar a fazer isso?

    Att. Tiago

    ResponderExcluir
  32. Olá Jonathan!

    Dessa forma que vc quer, eu construiria diferente o código. Fica como está abaixo:

    addChild(mc);
    addChild(bola);

    posicaoMC();

    function posicaoMC():void{
    mc.scaleX=1.6;
    mc.scaleY=1.6;

    }

    O código perde a classe stage e mando aumentar apenas o mc.

    Quando for publicar o html vc muda o Scale: Default e não pede tela cheia para o Flash.

    Abraços,

    Ana

    ResponderExcluir
  33. Muito Obrigado, vou tentar fazer o que voce diz.
    Se funcionar (e sei que vai) vou ser seu seguidor numero 1.
    HAHA!
    Abraço e Obrigado mesmo!

    ResponderExcluir
  34. Bom nao Funcionou!

    Meu Esquema Esta Assim

    3 LAYERS:

    AS
    LOGO
    FUNDO

    Fundo > STANCE "MC"
    Logo > STANCE "LOGO"

    e as AS ESTÃO ASSIM TUDO!

    function tamanho(evt:Event):void{
    posicaoMC();}

    addChild(mc);
    addChild(logo);

    posicaoMC();

    function posicaoMC():void{

    mc.scaleX=1.6;
    mc.scaleY=1.6;

    }

    • FOI REMOVIDO AS 2 LINHAS de STAGE!


    no PUBLISH ESTA ASSIM

    Template: Flash Only

    Dimension: MATCH MOVIE
    Width: 1024
    Height:768

    Scale: Default

    Mas Quando Publico Fica do Lado Esquerdo.
    E Nao em Full, Se eu colocar 100% - 100%
    Ele deixa full mas distorce o Logo Tbm.

    Pode me Ajudar?

    ResponderExcluir
  35. Deixa somente o código que comentei nenhuma linha a mais nem a menos.

    Ana

    ResponderExcluir
  36. Oi Ana, primeiramente gostaria de parabenizar por dispor de seu rico conhecimento aos usuários. Bela iniciativa!
    Bom gostaria de uma ajuda, eu preciso que o swf se ajudeste a dimensao da tela do usuario, as que alguns componentes da animação nao se redimencionassem. Como nesse site : www.jorgevercillo.com.br, o player acompanha a dimensao da tela, entende?
    Isso seria aplicado a varios outros componetes que irao compor a animação total.

    Obrigado desde ja!

    ResponderExcluir
  37. Olá!

    Vc pode dar uma olhada nesta aula: http://designap.blogspot.com/2011/03/fullscreen-com-objetos-posicionados-no.html

    Abraços,

    Ana

    ResponderExcluir
  38. Kemoel Lima
    Realmente funciona, o problema de usar essa forma que compromete a qualidade. ;)

    sendo não muito legal.

    Abraços..

    ResponderExcluir
  39. Concordo. Mas isso depende da sua foto de fundo :)

    Abraços,

    Ana

    ResponderExcluir
  40. Ana Paula parabéns, eu fiz e deu tudo certinho,estou sempre acompanhado seus tutoriais nota 10, mais ana paula e o contéudo para acompanhar na mesma proporção com faz??
    um abraço

    Att:
    Marques

    ResponderExcluir
  41. Olá Marques!

    Dá uma olhada nessa vídeo aula: http://designap.blogspot.com/2011/03/fullscreen-com-objetos-posicionados-no.html

    Abraços,

    Ana

    ResponderExcluir
  42. DEU ESTE ERRO AKI PRAMIM OQ PODE SER

    identifier is expected after the ':'.
    function posicaoMC():void{

    Total ActionScript Errors: 2 Reported Errors: 2

    ResponderExcluir
  43. Ola Ana!!
    Tudo bem ?
    Obrigado pelas videos aulas que vc tem postado na internet pois com elas consegui fazer meu 1º site em flash!! eheheheheh!!!!!

    Tem uma questão que estou tentando resolver num site.

    Tenho um site com 1024 x 612 pixel.
    Dentro deste site tenho um container de 660 x 330 pixel que carregam meu swf externo(esta funcionando bem).

    A questão é que tenho uma página de produtos que é uma galeria(este é um dos meus swf externos).
    Quando chamo o swf ele carrega normal mas quando chamo a galeria ela vai do ponto de registro do container para direita e não cobre a página como eu queria.

    Minha galeria é feita com o FlashLightBoxAS3.
    No swf que tem a galeria quando cahmo ele no browser ele funciona perfeitamente com queria mas dentro do container não!!

    Poderia me ajudar ?

    ResponderExcluir
  44. Olá!

    Só analisando seus arquivos... se quiser me mandar por e-mail apmmiranda@gmail.com

    Abraços,

    Ana

    ResponderExcluir
  45. qdo faço um novo site no flash CS5 e publico, o site aparece pela metade e sem a barra de rolagem do navegador. poderia por favor dar mais detalhes da ação?

    ResponderExcluir
  46. Olá!

    Isso é na CSS do HTML que o Flash gera. Deve ser a parte overflow. Provavelmente vai ter que tirar essa regra.

    Abraços,

    Ana

    ResponderExcluir
  47. Olá,

    A informação #Cena_1 aparece na publicação na aba do navegador.
    Como retiro?

    Obrigado

    ResponderExcluir
  48. Mesmo com o titulo em branco a informação #Cena_1 aparece na publicação na aba do navegador.

    ResponderExcluir
  49. Fiz umas alterações em um site já existente usei mais a area do flash só que quando eu crio o swf a parte que eu criei não aparece como faço para aparecer tudo no caso eu acredito que teria que ter uma barra de rolagem?
    Obrigada

    ResponderExcluir
  50. Olá Adriele!

    Será que não foi gerado nenhum arquivo .js e vc tem que levar junto...

    Bjs

    Ana

    ResponderExcluir
  51. Boa tarde,

    Aqui deu certo mas com um pequeno erro, o palco não ocupa ainda toda a tela, fica uma pequena borda em volta..Coloquei o ponto de registo no centro e a resolução em percent, o que poderá estar faltando?

    Obrigado,
    Luis

    ResponderExcluir
  52. oi ana...... exemplo eu abro a pagina 1024x678 ai eu minimizo ela ai ela vai para 500x350 e ainda assim fica o site entero aberto tipo ele ter se resolucionar sozinho .... por favor me ajuda urgente meu msn juan-pedro2009@hotmail.com

    ResponderExcluir
  53. Ola, gostaria de saber o seguinte, para publicar o site, segui um tutorial seu onde a publicação era feita pelo drew.. pelo publish setting é feito como?

    ResponderExcluir
  54. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  55. Olá
    Ana eu gostaria de saber, se tem como fazer com que toda a estrutura se encaixe em qualquer tamanho de navegador.. porque ai só o fundo que vai se adaptar, ou estou errado ? rs
    aguardo respostas :D

    Rafael Roldi
    bjss

    ResponderExcluir

Postar um comentário

Deixe seu comentário ou dúvida:

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Letras entrelaçadas no Photoshop CS4