Gorgeous Page Roll Image Transition Effect in Flash

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

Detalhes Tutorial Programa : O Flash CS5

Tempo de conclusão prevista : 40 hr

Tutorial FLA File - File.fla Fonte

Página Rolo Imagem Efeito de Transição em flash

Vamos começar!

Abra um novo documento flash com action script 2.0.

Passo 1: Configurando Propriedades do Documento

Agora Selecione Modificar na barra de menu e selecione Documento ou diretamente Você podepressionar Ctrl + J para abrir as propriedades do documento.

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

Passo 2: Importar imagens necessárias

Primeiro, importe as imagens utilizadas baixadas da fonte. Para isso, Vá até o menu File> Import Select> Select Import to Library .

Passo 3: Posicionando imagens para o palco

Antes de começar, já temos a camada 1, agora o nome da camada como um. Arraste o img1 imagem da biblioteca para o palco.

Alinhar a imagem para o centro da etapa usando o painel de alinhamento. Tenha em mente que para alinhar qualquer item para o centro do palco, verificar o "Alinhar para encenar" caixa de seleção .

Passo 4: Criando Transition1

Pressione Ctrl + F8 para criar um novo símbolo . Digite o nome Transition1 e selecione tipo de clipe de filme .

Você vai entrar na Transition1 clipe de filme e renomeie a camada como img1. Em seguida, selecione a imagem e pressione a tecla F8 .

Arraste img2 imagem da biblioteca e Pressione F8 para criar um novo símbolo. Nomeie este símbolo como img2. Mas não manter este símbolo no palco a partir de agora. Tenha isso em biblioteca.

Passo 5: Criando Transition1 - elementos Organizando

Insira uma nova camada e nomeie como img1_mask.

Agora crie um retângulo com a dimensão são as seguintes.

Abra o painel de proprietários. Para abrir o painel de propriedades, Vá ao menu Janela> Selecionar as propriedades .
W = 40
H = 450
X = -390
Y = -225

Agora insira uma nova camada novamente e nomeá-lo como img1_flip .

Agora copie img1 imagem pressionando Ctrl + C e Colar no img1_flip camada usando ctrl + shift + V.Em seguida, vá ao menu Modify> Transform> Flip horizontal.

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

Agora insira uma nova camada e nomeie-a como img1_flip_mask .

Agora crie um retângulo com a dimensão são as seguintes.

Abra o painel de proprietários. Para abrir o painel de propriedades, Vá ao menu Janela> Selecionar as propriedades .
W = 61
H = 438
X = -411
Y = -219

Agora copie este retângulo pressionando ctrl + C e insira uma nova camada e nomeie comogradient_effect . Em seguida, cole a imagem copiada pressionando CTRL + SHIFT + V.

Agora aplique gradiente de cor para o retângulo. Para fazer isso, vá até o menu da janela> cor ou pressione Alt + Shift + F9 para abrir o painel de cores.

Depois de aplicar o gradiente, selecione o balde de cor à esquerda e tipo 7E7E7E na caixa de código de cores destaque no painel de cor como dado abaixo.

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%.

Passo 6: Criando Transition1 - Aplicação Forma e Classic Tween

Agora selecione quadro 99 de todas as camadas, exceto de img1 camada como dado na referência abaixo. Em seguida, pressione F6 para inserir quadro chave. Depois disso, selecione frame 100 deimg1 só camada e pressione F5 para inserir quadro.

Agora aplique animação. Para fazer isso, selecione qualquer quadro entre os quadros 1 a 99 e não mouse e selecione direito Create Shape Tween Aplique interpolação de forma on;. camada gradient_effect, img1_flip_mask camada e camada img1_mask.

Agora selecione qualquer quadro entre o quadro 1 e 99 de img1_flip camada e criar Tween Classic.Para fazer isso, clique direito> selecione Criar Tween Classic.

Passo 7: Criando Transition1 - Criação de animação

Agora Seleccione o gradient_effect camada , camada img1_flip_mask , e camada img1_flipelementos e deixou desça a cada um deles, premindo o botão de destaque, dada a imagem de referência abaixo.

Em seguida, movê-los para a direita até que ele sai do palco como indicado na imagem de referência abaixo.

Selecione o retângulo colocado sobre camada img1_mask e, em seguida, aumentar a largura do retângulo usando ferramenta de transformação livre para cobrir a imagem.

Passo 8: Criando Transition1 - Aplicação de Máscara

Agora selecione a img1_mask camada e não Botão direito do mouse e selecione a máscara . Faça o mesmo com img1_flip_mask camada.

Passo 9: Preparar a transição em timeline principal

Clique na cena para sair do clipe de filme Transition1.

Agora vá para o painel de propriedades e selecione o gráfico como indicado na imagem de referência abaixo.

Em seguida, vêm para baixo no painel de propriedades e selecione a jogar uma vez do LOOPING como indicado na imagem de referência abaixo.

Agora insira uma nova camada e nomeie-o como 2 . Em seguida, selecione o quadro 225 de ambas as camadas e pressione F5 para inserir quadro.

Agora copie o Transition1 de layer1 pressionando Ctrl + C. Coloque um novo quadro-chave pressionandoF6 e, em seguida, cole o código copiado Transition1 pressionando CTRL + SHIFT + V. Selecione o clipe e não o botão direito e selecione Duplicate Symbol ...