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:MovieClip = new MovieClip() var matrix:Matrix = new Matrix() var bmd:BitmapData = new BitmapData(img.width, img.height) 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 251 vezes
Tamanho 28.44 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:MovieClip = new MovieClip() 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 251 vezes
Tamanho 28.44 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:MovieClip = new MovieClip() 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 251 vezes
Tamanho 28.44 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/
:)