[Resolvido] BackGround - imgs com transição basica

[Alexandre_Cruz 4]

http://forum.imasters.com.br/index.php?showtopic=305705 - tópico para retirar dúvidas

 

arquivo para download em .fla - http://www.megaupload.com/pt/?d=20TNYZ1X

 

NOTA: Antes de mais nada você deve possuir o flash para criar os arquivos.

 

Uma outra dica; se voce quiser deixar seu site em full screen (pelo menos seu fundo com imagens en transição), só funciona através de uma interação do usuário, mouse ou teclado

CODE

 

package {

 

import flash.display.MovieClip

import flash.events.Event;

import flash.events.MouseEvent;

import flash.display.Stage;

 

public class FullScreen extends MovieClip{

 

public function FullScreen(){

stage.addEventListener(MouseEvent.MOUSE_DOWN,mDown);

}

private function mDown(e:MouseEvent){

stage.displayState = "fullScreen";

}

}

___________________________________________________

Crie um documento flash em branco.

 

-Defina o BackGround como Preto.

-Mantenha o frame rate em 12 fps

-Altere as dimensões para 1024 px - 768 px

 

http://img376.imageshack.us/my.php?image=imagem1ht7.jpg

 

______________________________

 

Importe para a biblioteca (Ctrl+L) as imagens que você quer no seu background usando o seguinte caminho:

 

File>Import>Import to Library

 

http://img376.imageshack.us/my.php?image=imagem5ji0.jpg

 

Agora você deve selecionar todas as imagens que voce quer usar e deixa-las na biblioteca.

 

Feito isso prepare sua timeline (linha do tempo) da seguinte forma:

 

http://img222.imageshack.us/my.php?image=imagem3dq0.jpg

 

Note que o documento deve ter keyframes (inseridos palo F7) nos quadros 1,5,25 e 30.

 

Agora vá na sua biblioteca e seleciona a 1ª imagem de seu background, arraste a imagem em qualquer lugar

 

Agora você deve clicar com o botão direito e selecionar a opção "convert to symbol" (converter para símbolo)

crie um graphic (gráfico) e pronto.

 

Feito isso defina a imagem da seguinte forma:

 

http://img379.imageshack.us/my.php?image=imagem4ec8.jpg (olha na parte inferior esquerda)

__________________________

 

Agora você ja possue em sua biblioteca um symbol e na time line im keyframe com a 1ª img em symbol

 

Bom, voutando ao assunto...

 

Você deve copiar o keyframe (clicando com o botão direito do mouse sobre o 1° frame (ou quadro),

"copy frames", agora vá ao frame n° 5, clique sobre ele e escolha "paste frames".

Faça o mesmo com os frames 25 e 30.

 

http://img379.imageshack.us/my.php?image=imagem4ec8.jpg - é a mesma imagem mas note agora na linha do tempo sobre o texto acima

 

Bem agora voce tem de fazer uma transição para cada imagem.

 

Lembre-se, nos primeiros passos você criou um simbol com a 1ª imagem.

 

agora na timeline, vá em qualquer lugar entre os frames 1 e 5 (de preferencia no meio) e com o botão direito do mouse clique sobre um dos frmaes e selecione a 1ª opção - "creat a motion twin" (ou algo parecido)

 

agora uma flecha passará entre os frames 1,2,3,4 e 5. isso indica que o Flash fará uma ligação entre o 1° frame e o último selecionado.

 

veja a linha do tempo dessa imagem:

 

http://img376.imageshack.us/my.php?image=imagem5lt9.jpg

 

Bem feito isso vá ao 1° frame novamente, nele voce deve clicar na imagem que a pouco você escolheu.

Defina as propriedades assim:

 

http://img376.imageshack.us/my.php?image=imagem5lt9.jpg - agora note na parte inferior

 

Note que a imagem teve alteração apenas na área "color" - Alpha 100%

 

Esse "Alpha" representa quanto por cento da imagem você pode ver se você definir como 0% a imagem ficará transparente. (nesse caso a cor de fundo sobreporá essa transparencia)

 

defina essas coisas nas imagens dos frames 5 e 25

 

já nos frames 1 e 30 defina o aplha como 0%

 

http://img376.imageshack.us/my.php?image=imagem6zn0.jpg

___________________________

 

Pronto agora voce fez a 1ª imagem.

Agora você deve repetir os passos acima com outra imagem.

 

MAS...

 

voce deve fazer outro layer (veja como faze-lo na img abaixo)

 

http://img379.imageshack.us/my.php?image=imagem7dp9.jpg

 

Agora note que ao fazer o layer ele será preenchido em branco até o frame 30 (onde acaba o 1° layer)

Comece seu trabalho com a segunda imagem no frame 31 (fingindo que o frame 31 é o 1° do começo do tópico)

Repita os passos sempre da seguinte forma:

 

30 frames são os nescessários.

use o 1°

pule 4, pule mais 20 e mais 5 depois e em todos esses anteriores faça keyframes