Veja também

Related Posts Plugin for WordPress, Blogger...

Redes Sociais

segunda-feira

Efeito de Transição Rolo em Flash

Neste tutorial você vai aprender como criar uma linda página de rolo efeito de transição de imagem usando máscara em Adobe Flash.






Page Roll Image Transition Effect in Flash


Vamos começar! 
Abra um novo documento Flash com Action Script 2.0.
 
Criando Transição Onda Página

Passo 1: Configurando Propriedades do Documento
Agora selecione Modificar na barra de menu e selecione Documento ou diretamente Você pode pressionar Ctrl + J para abrir as propriedades do documento.
 
Criando Transição Onda Página

Agora, mudar as dimensões do palco de 700 × 438, FPS = 30 ea cor de fundo = preto como mostrado na figura abaixo. Para começar com os tutoriais baixar o arquivo source.zip que irá lhe fornecer os arquivos necessários a serem utilizados no tutorial.
 
Criando Transição Onda Página

Passo 2: Importar imagens necessárias
Primeiro, importe as imagens baixadas utilizados a partir da fonte. Para fazer isso,ao menu Arquivo> Importar Select> Select Import to Library.
 
Criando Transição Onda Página

Passo 3: Posicionando imagens para a fase
Antes de começar, já temos a camada 1, agora o nome da camada como 1. Arraste a imagem img1 da biblioteca para o palco.
 
Criando Transição Onda Página

Alinhar a imagem para o centro da fase utilizando o painel de alinhar. Tenha em mente que para alinhar qualquer item para o centro do palco, verificar o "Alinhar para encenar" caixa de seleção.
 
Criando Transição Onda Página

Passo 4: Criando Transition1
Pressione Ctrl + F8 para criar um novo símbolo. Digite o nome Transition1 e selecionar tipo de clipe de filme.
 
Criando Transição Onda Página

Você vai entrar no clipe de filme Transition1 e renomeie a camada como img1. Em seguida, selecione as F8 de imagem e de Imprensa.
 
Criando Transição Onda Página

Arraste img2 imagem da biblioteca e Pressione F8 para criar um novo símbolo. Nome este símbolo como img2. Mas não reter este símbolo no palco a partir de agora. Tenha isso em biblioteca.
Passo 5: Criando Transition1 - Organizando elementos
Insira uma nova camada e nomeie como img1_mask.
 
Criando Transição Onda Página

Agora crie um retângulo com a dimensão são os seguintes.
Abra o painel de proprietários. Para abrir o painel de propriedades, Vá ao menu Window> Selecione as propriedades.
W = 40
H = 450
X = -390
Y = -225
 
Criando Transição Onda Página

Agora insira uma nova camada novamente e nomeá-lo como img1_flip.
 
Criando Transição Onda Página

Agora copie img1 imagem pressionando CTRL + C e Colar no img1_flip camada utilizando ctrl + shift + V. Em seguida, vá ao menu modify> Transform horizontal> Flip.
 
Criando Transição Onda Página

Agora, mova a imagem invertida para a esquerda até que se sai do palco. Não deixe um espaço único pixel entre ambas as imagens, como indicado na imagem de referência abaixo.
 
Criando Transição Onda Página

Agora insira uma nova camada e nomeie como img1_flip_mask.
 
Criando Transição Onda Página

Agora crie um retângulo com a dimensão são os seguintes.
Abra o painel de proprietários. Para abrir o painel de propriedades, Vá ao menu Window> Selecione as propriedades.
W = 61
H = 438
X = -411
Y = -219
 
Criando Transição Onda Página

Agora copie este retângulo pressionando ctrl + C e insira uma nova camada e nomeie como gradient_effect. Em seguida, cole a imagem copiada, pressionando CTRL + SHIFT + V.
Agora, aplique a cor gradiente para o retângulo. Para fazer isso, vá ao menu Window> cor ou pressione ALT + SHIFT + F9 para abrir o painel de cores.
 
Criando Transição Onda Página

Depois de aplicar o gradiente, selecione o balde de cor à esquerda e 7E7E7E digite na caixa de código de cores destaque no painel de cores como dado abaixo.
 
Criando Transição Onda Página

Agora pressione entre os dois baldes e digite # FFFFFF na caixa de código de cores destaque no painel de cores. Em seguida, defina alfa para 0%.
 
Criando Transição Onda Página

Passo 6: Criando Transition1 - Aplicando Forma e Classic Tween
Agora selecione o quadro 99 de todas as camadas exceto a camada img1 como dado na referência abaixo. Em seguida, pressione F6 para inserir quadro chave. Depois que o quadro seleto de 100 img1 única camada e pressione F5 para inserir moldura.
 
Criando Transição Onda Página

Agora aplique animação. Para fazer isso, selecione qualquer quadro entre os quadros 1 a 99 e não o botão direito e selecione Criar Tween Forma Aplique interpolação de forma a,. Gradient_effect camada, img1_flip_mask camada, ea camada img1_mask.
 
Criando Transição Onda Página

Agora selecione qualquer quadro entre o quadro 1 e 99 de camada img1_flip e criar Tween Classic. Para fazer isso, clique direito> selecione Criar Tween Classic.
 
Criando Transição Onda Página

Passo 7: Criando Transition1 - Criação de animação
Agora Selecione a camada gradient_effect, camada img1_flip_mask, e os elementos de camada img1_flip e esquerdo desça cada um deles, premindo o botão de destaque dada na imagem de referência abaixo.
 
Criando Transição Onda Página

Em seguida, movê-los para a direita até que ele sai do palco, como indicado na imagem de referência abaixo.
 
Criando Transição Onda Página

Seleccione o rectângulo colocado sobre a camada de img1_mask e, em seguida aumentar a largura do rectângulo utilizando a ferramenta de transformação livre para cobrir a imagem.
 
Criando Transição Onda Página

Passo 8: Criando Transition1 - Aplicando máscara
Agora Selecione a camada img1_mask e não Botão direito do mouse, selecione a máscara. Faça o mesmo com camada img1_flip_mask.
 
Criando Transição Onda Página

Passo 9: Preparação de transição na linha do tempo principal
Clique na Scene para sair do clipe de filme transition1.
 
Criando Transição Onda Página

Agora vá para o painel de propriedades e selecione o gráfico, como indicado na imagem de referência abaixo.
 
Criando Transição Onda Página

Então venha para baixo no painel de propriedades e selecione o jogo uma vez a partir do LOOPING, como indicado na imagem de referência abaixo.
 
Criando Transição Onda Página

Agora insira uma nova camada e nomeie como 2. Em seguida, selecione o quadro 225 de ambas as camadas e pressione F5 para inserir moldura.
 
Criando Transição Onda Página

Agora copie o transition1 de layer1 pressionando CTRL + C. Insira um novo quadro-chave pressionando F6 e, em seguida, cole o transition1 copiado pressionando CTRL + SHIFT + V. Selecione o clipe e não o botão direito e selecione Duplicate Symbol ...
 
Criando Transição Onda Página

Digite o nome Transition2.
 
Criando Transição Onda Página

Agora clique duas vezes na transition2 para entrar no clipe.
Agora vá para o painel de propriedades e selecione a imagem no primeiro frame e pressione swap.
 
Criando Transição Onda Página

Uma caixa de símbolo swap irá aparecer em seguida, selecione img2 e pressione ok. Ele irá substituir o símbolo img1 img2 de símbolo.
Faça este método em cada símbolo para substituir img1 img2 que com.
 
Criando Transição Onda Página

Pressione Ctrl + Enter. Você vai ver o efeito algo assim.







 














Site de Origem: http://blog.entheosweb.com/tutorials/page-roll-image-transition-effect-in-flash/

Um comentário :

  1. Bom dia! Pelo que eu vi so tem duas imagens teria como vc me mostrar como colocar a terceira imagem?

    ResponderExcluir