leitura do artigo >

20
ago

Ajustar o tamanho do fundo proporcionalmente

Anteriormente, expliquei como criar um fundo com repetição de imagens. Agora explicarei como usar 1 imagem de fundo que se ajustará ao tamanho da àrea do conteúdo Flash, mantendo a sua proporção para que ela não fique com aparência de “esticada”.

Comentários (3) Comentários(20) Categorias Action Script3

Anteriormente, expliquei como criar um fundo com repetição de imagens. Agora explicarei como usar 1 imagem de fundo que se ajustará ao tamanho da àrea do conteúdo Flash, mantendo a sua proporção para que ela não fique com aparência de “esticada”.

No exemplo usarei uma imagem JPG carregada externamente e aplicarei efeito de smoothing (para evitar que ela fique serrilhada). Porém, você também pode usar uma imagem sem smoothing, uma imagem da biblioteca, um video (externo ou da biblioteca), um MovieClip, etc. O importante deste post é conhecer o código que permite manter a proporção da imagem quando houver o ajuste.

Este recurso é usado muitas vezes em conjunto com o Layout Líquido. Por isso, criarei um ouvinte para que também ajuste o tamanho do fundo quando a área do conteúdo Flash for redimensionada. O tipo de escala e alinhamento serão os mesmos usados no post sobre layout líquido:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

stage.align = "TL"
stage.scaleMode = "noScale"
 
var bm:Bitmap;
var proporcao:Number;
 
var loader:Loader = new Loader()
loader.load(new URLRequest("imagem.jpg"))
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
 
function loaderComplete(e:Event) {
	bm = Bitmap(e.currentTarget.loader.content);
	bm.smoothing = true;
	proporcao = bm.width / bm.height
	addChildAt(bm, 0)
 
	resize()
}
 
stage.addEventListener(Event.RESIZE, resize)
 
function resize(e:Event=null):void {
	if ((stage.stageWidth/stage.stageHeight) <= proporcao) {
		bm.height = stage.stageHeight
		bm.scaleX = bm.scaleY
	} else {	
		bm.width = stage.stageWidth
		bm.scaleY = bm.scaleX
	}
}

Pronto!
Simples e fácil!!

…

No entanto, você pode fazer modificações no código acima para obter um resultado diferente. Suponhamos que ao invés da imagem sempre estar fixa no canto superior esquerdo, você quer que ela sempre fique centralizada no stage. Para fazer isso, crie um Sprite que servirá de contêiner para o Bitmap. Então, mude a posição do Bitmap dentro do Sprite de modo que o centro da imagem fique no ponto de origem (x:0,y:0) do Sprite. Por último, deixe o Sprite centralizado no stage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

stage.align = "TL"
stage.scaleMode = "noScale"
 
var bm:Bitmap;
var proporcao:Number;
var sp:Sprite = new Sprite()
 
var loader:Loader = new Loader()
loader.load(new URLRequest("imagem.jpg"))
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
 
function loaderComplete(e:Event) {
	bm = Bitmap(e.currentTarget.loader.content);
	bm.smoothing = true;
	proporcao = bm.width / bm.height
	addChildAt(sp, 0)
	sp.addChild(bm)
	bm.x -= bm.width/2
	bm.y -= bm.height/2
 
	resize()
}
 
stage.addEventListener(Event.RESIZE, resize)
 
function resize(e:Event=null):void {
	if ((stage.stageWidth/stage.stageHeight) <= proporcao) {
		sp.height = stage.stageHeight
		sp.scaleX = sp.scaleY
	} else {	
		sp.width = stage.stageWidth
		sp.scaleY = sp.scaleX
	}
	sp.x = stage.stageWidth/2
	sp.y = stage.stageHeight/2
}

E por aí vai…
Faça as mudanças de acordo com que você precisa.

IMPORTANTE: nós da FlashPedia encorajamos as pessoas a deixarem de usar o AS2 e começarem a usar AS3, pois a diferença entre ambas versões é muito grande e o AS3 já está muito mais avançado. Por isso, agradeço que não escrevam comentários pedindo a solução em AS2.

«
»
Postado em 20-08-2010 por
em Action Script3

Share

Comentários

  • Michel disse:
    em 1 de setembro de 2010

    Olá, muito bom!!!!
    Só uma dúvida: Quando compilo o meu swf a imagem de bg está ficando acima dos outros elementos do site, como faço pra deixá-la abaixo de todos os outros elementos. Obrigado.

  • Igor Amendola disse:
    em 1 de setembro de 2010

    Michel,
    Obrigado por me lembrar desse detalhe… basta usar addChildAt(item, 0)
    Já atualizei os dois códigos acima pra que aconteça isso e a imagem fique de fundo. Com esse codigo vc define o item como primeiro objeto na displayList (nivel zero), dai fica atras de todos.
    Valeu!

  • Uriel disse:
    em 2 de setembro de 2010

    Muito bom hein Igor! Está de parabéns pelo post.. Acompanho direto esse blog e tenho gostado MUITO das últimas atualizações, especialmente para o SWFAddress.

    Bacana é que com essa implementação da imagem ao fundo, você pode colocar uma camada bacana (um tile) por cima do background e ficar semelhante ao efeito padrão do Gaia Framework (um background com um tile que se repete fora a fora, aparentando uma grade). Eu já fiz essa técnica e ficou muito bacana!

  • Igor Amendola disse:
    em 2 de setembro de 2010

    Valeu, Uriel!
    Nao só eu, como os demais do blog ficamos contentes quando recebemos comentarios e vemos que nossos posts ajudam a outros. Gostariamos de ter mais tempo livre pra escrever mais coisas interessantes, mas por enquanto vamos nesse ritmo atual… hehehe…
    Obrigado! :D

  • Michel disse:
    em 2 de setembro de 2010

    Perfeito Igor,
    Parabéns e obrigado pelo tutorial. Show!

  • Gabriel disse:
    em 8 de setembro de 2010

    Igor tu é o CARA,eu já estava a dias pela net e não achava nada sobre como fazer isso só posso dizer uma coisa:

    OBRIGADO Brother!

  • Thiago Santos Messias disse:
    em 5 de novembro de 2010

    Ola Igor,

    Tenho uma pequena duvida.

    Fiz um site onde cada clique dado no menu os arquivos externos vao direto para a tela. Até ai tudo certo, so que eu gostaria de alinhar o conteudo de acordo com o stage (todo o resto do site esta com o padrao de layout liquido). Estou tendo dificuldades com esse código. Resumindo, gostaria de deixar o conteudo em layout liquido de acordo com os demais elementos. Poderia me ajudar.??

    Site.
    http://www.tsm-sp.com/rafbrasil4/

  • Igor Amendola disse:
    em 6 de novembro de 2010

    Olá, Thiago..
    Como este post é sobre ajustar o fundo… nao sei se vc ja leu o post sobre layout liquido… ja leu? O link é:
    http://www.flashpedia.com.br/2010/08/layout-liquido/
    Lá explica como funciona o layout liquido e tem dois exemplos mostrando algumas das coisas q se pode fazer…

  • luis fernandes disse:
    em 15 de novembro de 2010

    boas. a mim da-me um erro que não consigo entender :

    bitmap, loader e event -> the class or the event could not be loaded
    e diz que tem um “}” a mais.

    Pelo que vejo não é necessário chamar qualquer classe mas estarei enganado ?

    abraço e parabens pelo blog

  • Igor Amendola disse:
    em 16 de novembro de 2010

    Luis Fernandes,

    Esse erro aconteceu pq vc tentou usar o codigo em um FLA com AS2.
    Esse codigo é AS3.

    Abraço

  • Jonathan disse:
    em 17 de fevereiro de 2011

    Bom eu gostaria de saber como faz para char um Arquivo SWF como FUNDO.
    Tipo: eu vi um site que tem o fundo full browser que fica mudando.
    como faço isso?

  • Igor Amendola disse:
    em 18 de fevereiro de 2011

    jonathan…
    nao precisa ser um SWF… vc pode chamar o loader.load() a cada determinado tempo e q vai fazer carregar um novo fundo sobre o atual…
    agora to meio sem tempo, mas assim q eu puder eu edito este post e coloco um exemplo de como poderia ser feito.

  • Luciana disse:
    em 20 de março de 2011

    Oi Igor,
    qual o tamanho mínimo que a imagem jpg deve ter, para ficar com qualidade ao ser redimensionada?

  • Igor Amendola disse:
    em 20 de março de 2011

    Oi, Luciana.
    É dificil definir um tamanho minimo pq a boa qualidade tb depende de outros fatores. Por exemplo: digamos q vc trabalhou a imagem no Photoshop a exporta com 100dpi. Nao da o mesmo resultado se vc pegasse a mesma imagem na net q ja pode ter sido editada varias vezes e talvez tenha 72dpi.
    Tambem pode depender dos detalhes da imagem, o qual nos leva a outro exemplo: digamos q vc tem a imagem de uma paisagem e uma imagem vetorizada de um personagem de desenho animado. É mais facil perceber a baixa qualidade (serrilhado) na paisagem por ser uma imagem com mais detalhes.
    Outra coisa q deve se pensar é q hj em dia varias usam monitores grandes (tipo, eu q tenho um de 1920×1080), entao vc tb deve ver se quer considerar essas resoluçoes e testar o resultado nelas.
    Masss (pensando numa media), eu acho uma imagem com 1024×768 é uma boa opçao… porem, como comentei, seria bom fazer testes em diferentes resoluçoes pra ver os resultados.
    :D

  • Thallys disse:
    em 20 de janeiro de 2012

    Funciona certinho, mas um problema existe, quando eu abro com meu html ele nao faz o resize, poderia me ajudar ?

  • Igor Amendola disse:
    em 21 de janeiro de 2012

    Thallys, talvez vc criou o evento pro Resize mas nao ta chamando ele depois q carregou a imagem.
    Se usou um codigo similar ao do exemplo acima, tente colocar resize() no final do codigo.

  • Thallys disse:
    em 23 de janeiro de 2012

    EU consegui tudo blz, mas quando vou fazer as animações de inicio do site, o site nao se ajusta centralizado, vc sabe pqe ?

  • Thallys disse:
    em 23 de janeiro de 2012

    um exemplo é o seguinte, o site ta normal do jeito qe eu quero, mas quando eu jogo a linha de codigo: menu.baseMenu.x = -1500; o site alinha para esquerda.

  • Thallys disse:
    em 23 de janeiro de 2012

    Achei o problema, é que quando o objeto vai para esquerda ele da um resize no site tbm pra esquerda, até pq o objeto fica fora do palco, tem alguma solução para isso ?

  • Igor Amendola disse:
    em 25 de janeiro de 2012

    Thallys,
    Dá uma lida no post sobre Layout Liquido:
    http://www.flashpedia.com.br/2010/08/layout-liquido/

    Quando vc vai usar o Resize, vc precisa configurar todos os elementos q quer q se ajustem… o Flash nao faz o ajuste sem se vc nao especificar, ou seja, vc precisa especificar quais elementos vc quer q fiquem centralizados.
    Em alguns casos, vc pode fazer algo q pra facilitar o trabalho: colocando varios elementos dentro de um MovieClip, vc pode centralizar ele e assim tudo o q está dentro tb fica centralizado.
    :D

Escreva um Comentário

Seu nome

E-mail (não será publicado) (obrigatório)

Website

Comente

Spam protection by WP Captcha-Free