Neste post vou explicar 3 formas de usar a repetição de uma imagem para preencher o fundo: usando um MovieClip da biblioteca, usando um arquivo (externo) de imagem e desenhando com a classe BitmapData.
Criar o fundo no swf é muito útil, principalmente em sites que usam fullbrowser. É por isso que vou usar a classe Capabilities para definir o tamanho do preenchimento. As propiedades screenResolutionX e screenResolutionY se referem (respectivamente) aos tamanhos de largura e altura da resolução do monitor. Além disso, assim o fundo ocupará toda a tela caso se ative o fullscreen.
Em todos exemplos coloquei o código stage.align = “TL” para que o fundo sempre esteja alinhado ao canto superior esquerdo, mesmo que o swf seja exibido em um tamanho diferente do qual foi publicado.
Você poderia obter o mesmo resultado configurando uma imagem de fundo no HTML e deixando o wmode=”transparent”, mas essa configuração do wmode pode fazer que apareçam bugs em alguns browsers, como problemas de acentuação em formulários.
Usando um MovieClip da biblioteca
Primeiro se cria o MovieClip que será a imagem em repetição. Para que funcione corretamente, o conteúdo de dentro do MovieClip deve estar em uma posição de valores positivos, tanto no eixo ‘x’ como no eixo ‘y’, ou seja, a partir do ponto x:0,y:0. Se o conteúdo for criado no palco e depois transformado em MovieClip (F8), selecione o ponto de registro superior esquerdo.
Nas propiedades avançadas do MovieClip, selecione a opção Exportar para ActionScript e coloque o nome de classe: Image.
Feito isso, use o seguinte código:
1 2 3 4 5 6 7 8 9 10 11 12 | stage.align = "TL" var img:Image = new Image() var bg:Shape = new Shape() var matrix:Matrix = new Matrix() var bmd:BitmapData = new BitmapData(img.width, img.height, true, 0x00000000) bmd.draw(img) bg.graphics.beginBitmapFill(bmd, matrix,true) bg.graphics.drawRect(0,0,Capabilities.screenResolutionX,Capabilities.screenResolutionY) bg.graphics.endFill() addChildAt(bg,0) |
Pronto, agora é so publicar e ver o resultado:
Para baixar este exemplo e os outros deste post:
Exemplos de criação de backgrounds
Baixado 671 vezes
Tamanho 28.13 kB
Usando um arquivo (externo) de imagem
Na mesma pasta em que salvou o arquivo FLA, coloque a imagem que vai ser usada e deixe com o nome: img.jpg (neste exemplo usei uma imagem de extensão JPG, mas você também pode usar GIF ou PNG, basta trocar a extensão no código).
Feito isso, use o seguinte código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | stage.align = "TL" var bmd:BitmapData; var bg:Shape = new Shape() var matrix:Matrix = new Matrix() var loader:Loader = new Loader() loader.load(new URLRequest("img.jpg")) loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete) function loaderComplete(e:Event) { bmd = new BitmapData(loader.width, loader.height) bmd.draw(loader.content) bg.graphics.beginBitmapFill(bmd, matrix,true) bg.graphics.drawRect(0,0,Capabilities.screenResolutionX,Capabilities.screenResolutionY) bg.graphics.endFill() addChildAt(bg,0) } |
Pronto, agora é so publicar e ver o resultado:
Para baixar este exemplo e os outros deste post:
Exemplos de criação de backgrounds
Baixado 671 vezes
Tamanho 28.13 kB
Usando a classe BitmapData para desenhar
Nos dois exemplos anteriores se usou o método draw() da classe BitmapData para copiar o MovieClip da biblioteca ou a imagem carregada. Porém, essa classe possui outros métodos e alguns permitem criar desenhos bitmaps, seja trabalhando com pixeis ou áreas maiores. Neste exemplo se usará o método fillRect() para criar o desenho, além de definir a cor de fundo através do método construtor. Para isso, use o seguinte código:
1 2 3 4 5 6 7 8 9 10 11 12 | stage.align = "TL" var bg:Shape = new Shape() var matrix:Matrix = new Matrix() var bmd:BitmapData = new BitmapData(10,10, false, 0x009933) bmd.fillRect(new Rectangle(0,0,5,5),0x00CC33) bmd.fillRect(new Rectangle(5,5,5,5),0x00CC33) bg.graphics.beginBitmapFill(bmd, matrix,true) bg.graphics.drawRect(0,0,Capabilities.screenResolutionX,Capabilities.screenResolutionY) bg.graphics.endFill() addChildAt(bg,0) |
Pronto, agora é so publicar e ver o resultado:
Para baixar este exemplo e os outros deste post:
Exemplos de criação de backgrounds
Baixado 671 vezes
Tamanho 28.13 kB
Observação: você pode usar o objeto da classe Matrix para girar a imagem no ângulo de rotação que desejar. Vale lembrar que o Flash trabalha com radianos, então use Math.PI para calcular o ângulo. Por exemplo:
matrix.rotate(Math.PI/2) // girar 90 graus matrix.rotate(Math.PI/3) // girar 60 graus matrix.rotate(Math.PI/4) // girar 45 graus
Se pegamos o último exemplo e aplicamos uma rotação de 45 graus, o resultado será:
em 2 de abril de 2010
wowa!
valeu por mais uma Igor.
É um tipo de coisa que acho interessante de usar e ainda não tinha feito…
Magnifico.
em 2 de abril de 2010
Excelente Igor.
VocÊ tem postado artigos que a gente sempre precisa, e este está de parabéns também.
Muito bom, abraço!
em 2 de abril de 2010
[...] This post was mentioned on Twitter by Flash Pedia, Eder Lima. Eder Lima said: Criando um fundo usando repetição com ActionScript 3 http://www.flashpedia.com.br/2010/04/criar-fundo-com-repeticao-de-imagem/ #flashpedia [...]
em 2 de abril de 2010
Parabéns, ótimo post como sempre.
\o
em 3 de abril de 2010
Muito bom!
em 3 de abril de 2010
[...] This post was mentioned on Twitter by Flash Pedia, Eder Lima and Leo Cavalcante, Leo Cavalcante. Leo Cavalcante said: RT @flashpedia: Criando um fundo usando repetição com ActionScript 3 http://www.flashpedia.com.br/2010/04/criar-fundo-com-repeticao-de-i … [...]
em 5 de abril de 2010
Legal, sempre bom ter um artigo desses em pt pra ajudar a galera. vlw Igor
em 12 de abril de 2010
valeuuu pelos recados :)))
em 23 de julho de 2010
muito legal!
so acho q faltou o StageScaleMode.NO_SCALE!
interessante que nao precisa usar um ENTER_FRAME listener com esse Capabilities.screenResolution……
em 23 de julho de 2010
zak, obrigado pela visita e pelo comentario!
eu so trabalho com StageScaleMode.NO_SCALE, mas nao usei ele neste caso pq apesar de nao funcionar da mesma forma, isso tb funciona nos outros modos de escala… entao, se eu colocasse, poderia ser q usuarios inexperientes se confundissem achando que so funciona com “noScale”.
em 31 de agosto de 2010
Fala Igor, muito maneiro seu código. Mas tem uma coisa que eu gostaria que você me explicasse, quando eu publico o html o bg fica do tamanho do stage definido no palco, como faço para que ele se adapte a resolução da janela do browser? Eu vi seu outro post sobre layout liquido, mas nada que tinha lá me ajudou.
em 1 de setembro de 2010
Flavio, acho que o que você quer é Fullbrowser… no meu post sobre Layout Liquido tem um link pro post do Fullbrowser… nao sei se vc tb conferiu ele, é este:
http://www.flashpedia.com.br/2009/09/swfobject-fullscreen-e-fullbrowser/
:)
em 27 de setembro de 2010
Igor, antes de mais nada, parabéns pelo trabalho! Sempre de grande valia!
Gostaria de saber se existe alguma forma de, usando uma imagem (interna ou externa) essa imagem seja repetida somente na horizontal (eixo X) até que preenchesse toda a largura do browser. Estou usando layout liquido nesse projeto.
Grande abraço!
em 28 de setembro de 2010
Roberto, vc tinha escrito “Flavio”, mas acredito q a mensagem era pra mim… por isso editei e mudei pra “Igor”… hehehe…
Enfim, o quarto parametro do método bg.graphics.drawRect() é quem define a altura da repetiçao… entao, no primeiro exemplo vc pode usar algo como:
bg.graphics.drawRect(0,0,Capabilities.screenResolutionX, img.height)
no segundo exemplo:
bg.graphics.drawRect(0,0,Capabilities.screenResolutionX, loader.height)
e no terceiro exemplo:
bg.graphics.drawRect(0,0,Capabilities.screenResolutionX, 10)
Abraço!
em 2 de outubro de 2010
Ótimo artigo…
Aproveitando, Teria como fazer em as3 um preenchimento radial que ficasse claro no meio e escuro nos cantos, usei um bitmap com alpha com gradiencia preta e branca mas não consegui redimencinar!!!
Abraço
em 4 de outubro de 2010
Rodrigo, obrigado pelo seu comentario!
Vc ja conseguiu montar o codigo pra criar esse preenchimento radial? Se conseguiu isso, o q vc precisa fazer é repedir o codigo no ouvinte de redimensionamento… ou seja, no addEventListener(Event.RESIZE… vc vai colocar o codigo pra recriar o preenchimento radial.
Se vc está com dificuldade de deixar o preenchimento radial centralizado, trabalhe com os tamanhos de largura e altura do stage (stage.width e stage.height).
Abraço
em 4 de outubro de 2010
Vlw com imagem eu consegui escalar, gostaria de ver sem o uso de imagem se tem alguma dica, até poderia fazer um artigo…
Abraço
em 7 de outubro de 2010
Rodrigo, nao entendi o q quer dizer “sem o uso de imagem”.
Se é sobre o preenchimento radial, trabalhe com Graphics.beginGradientFill() para criar o efeito… e como citei acima, use o tamanho do stage para preencher tudo.
Se quiser saber mais sobre esse metodo, visite:
http://help.adobe.com/pt_BR/Flash/CS5/AS3LR/flash/display/Graphics.html?allClasses=1#beginGradientFill%28%29
em 28 de dezembro de 2010
Legal esse site, para flash é o melhor de todos, coloca alguma coisa de flash com php avançado, muito legal mesmo, ja ta nos favoritos
em 26 de maio de 2011
Otimo tutorial Igor, Igor uma coisa, gostaria que tivesse uma foto atras dessa textura pegando o fundo inteiro como este site: http://www.brzdesign.com/.
Como poderia ser feito?
Obrigado.
em 30 de maio de 2011
cristiano,
na flashpedia tem um post sobre isso:
http://www.flashpedia.com.br/2010/08/ajustar-o-tamanho-do-fundo-proporcionalmente/
valeu!
em 27 de julho de 2011
Igor tentei passar para uma classe mas acho que errei ou faltou algo, da o erro
Line 36 1120: Access of undefined property Capabilities.
Será que faltou algum import ou variavel errada?
Abraço
http://pastebin.com/71pAbPEu
em 27 de julho de 2011
Olá, Rodrigo… faltou um import:
import flash.system.Capabilities;
abraço!
em 27 de julho de 2011
Extenso esse import…
Deu certo obrigado
em 28 de novembro de 2011
Obrigado pelo belo tutorial,
Abraço!
em 28 de novembro de 2011
Igor, consegui utilizar seu código, mas gostaria que meu conteúdo que será usado em FULLBROWSER ficasse no centro, mudei o alinhamento de TL para T, mas ai a parte da esquerda (left) não é preenchida pelo fundo, como posso resolver?
Obrigado, abraço!
em 28 de novembro de 2011
Olá, Felipe.
Você pode resolver trocando esta linha:
…por isto:
Isso deverá resolver.
Obrigado pelo comentario e participaçao no blog.
Valeu! Abraço