Resumo

Neste tutorial você vai aprender como criar um slideshow, que tem um flicker / fuzz / TV quebrada transição entre as imagens.

Aqui o resultado final:


Requisitos

Flash 8, Flash CS3 ou Flash CS4.
3 imagens (neste caso 550 × 400, as imagens disponíveis no tutorial arquivo zip)

Nota: As imagens nesse tutorial são feitos em Flash CS3. Ela funciona exatamente da mesma no Flash 8 ou Flash CS4. Este tutorial é Actionscript 2 (embora ActionScript não é necessário).

Passo 1 - Instalar o componente do efeito

Baixe o TV Efeito Fuzz aqui. Por favor, siga as instruções de instalação e arraste o componente do painel de componentes para a biblioteca do seu arquivo FLA..

Arrastar componente em biblioteca

Passo 2 - Importação de imagens

Importação de todas as três imagens de "Arquivo" -> "Import" -> "Importar para biblioteca ...".

Importar imagens

Passo 3 - Converter imagens em Movieclip

Criar um novo movieclip [pressione Ctrl-F8] ou "Inserir" -> "New Symbol ...", o nome de "image01" e colocar a primeira imagem no primeiro quadro deste MovieClip. Repita esta etapa para as outras imagens, o nome desses Movieclips "image02" e "image03". BTW, a nomeação depende de você.

Criar novo movieclip ...

... o nome do Movieclip ...

... e arrastar a imagem na timeline do movieclip

Biblioteca com movieclips e imagens

Passo 4 - Criar primeira transição

Agora clique em "Scene 1" para voltar para a timeline principal.

Voltar para a principal linha do tempo

Renomeie a camada já existente para "img01". Criar mais camadas e nomeá-los "img02" e "transition01". Mais uma vez a nomeação é apenas para uma melhor visão. Você pode escolher outros nomes, se quiser.

Renomear camadas

Arraste as duas primeiras Movieclips imagem da biblioteca para a camada respectivos.

Drag Movieclips em camadas

Clique no primeiro quadro da camada "transition01". Arraste o componente de televisão Efeito Fuzz da sua biblioteca para o palco. O componente irá ajustar automaticamente para o canto superior esquerdo do seu MovieClip.

Arrastar componente na camada

Para cada camada, clique no frame 50 e crie um quadro [F5] ou com o botão direito e "Insert Frame".

Criar um quadro ...

... em todas as camadas

É importante dar a imagem de nomes de instância Movieclips, caso contrário, o componente de efeito não é capaz de detectá-los. Clique na imagem Movieclip um por um e um conjunto de nomes de instância, neste caso "image01" e "image02" (você pode escolher um nome diferente se você quiser).

Definir nome de instância do movieclip primeiro

Definir nome de instância do movieclip segunda

Clique na TV Efeito Fuzz no palco e abrir o painel inspector componente prima SHIFT [-F7] ou "Window" -> "Component Inspector". Todos Movieclips com nomes de instância neste quadro estão listados na seção "Iniciar Movieclip" End Movieclip lista e selecione ". Escolha "image01" como "Start Movieclip" e "image02" como "Fim Movieclip".

Iniciar opções Movieclip

Definições de transição

Exportar o filme flash [pressione Ctrl-Enter] ou "comando" -> "Test Movie". A transição está acontecendo desde a primeira imagem para o segundo.

Resultado

Passo 5 - Adicione segunda transição

Criar mais três camadas e nomeá-los "img03", "img04" e "transition02".

Crie mais uma camada

Em cada camada, clique no frame 51 (um fotograma após a transição anterior terminou) e inserir um keyframes [pressione F6] ou com o botão direito e "Insert Frame".

Inserir moldura ...

... para todas as camadas

Vamos reutilizar a segunda imagem MovieClip, desde a segunda transição deve começar com ele. Clique no quadro-chave recém-criada na camada "img03" e arrastar o MovieClip "image02" a partir da biblioteca para o palco. Clique no quadro-chave recém-criada na camada "img04" e arrastar o MovieClip "image03" da biblioteca para o palco.

Drag Movieclips para as camadas criadas

Agora defina os nomes de instância desta imagem Movieclips a "image03" e "image04".

Definir nome de instância da primeira imagem

Definir nome da instância da imagem segundo

É um pouco confuso conjunto de camadas e os nomes de instância de um número até então o nome do Movieclip original. Mas, para melhor visão e para manter o número de erros de baixo potencial, é melhor tratar o Movieclips da segunda transição tão completamente novos movieclips.

Selecione a camada "transition02" e arrastar o componente a partir de sua biblioteca para o palco. Mais uma vez, o componente snap automaticamente.

Arrastar componente no palco

Clique no componente no palco, abrir o painel Inspetor de componente e selecione "image03" como "Start Movieclip" e "image04" como "Fim Movieclip".

Configurações dentro do painel inspector componente

Para a camada de três novos criar uma moldura no quadro 100 [F5] ou com o botão direito e "Insert Frame".

Inserir quadros em todas as três camadas

Quando você exportar o seu filme flash agora, você verá que tanto a transição são apresentados antes do filme é podada.

Resultado

Passo 6 - Adicione uma pausa entre as duas transições de imagem

Para ter tempo um pouco mais entre as transições de deixar os quadros-chave da camada "img01" e "transition01 intocada". Estender o comprimento da camada "img02" (a imagem que a transição termina com) adicionando uma moldura no quadro 80 [F5] ou com o botão direito e "Insert Frame".

Inserir frame

Inserir frame

Agora selecione todo o bloco da segunda transição (de modo que você pode, clicando quadro 51 de "transition01" e com a chave SHIFT pressionada clicar frame 100 de "img04") e mova o bloco buraco para frame 81.

Selecione camadas ...

... arraste o bloco para frame 81 ...

e liberá-lo

Você pode fazer o mesmo para a segunda transição.

Baixar

Clique aqui para baixar o fla. Deste tutorial. Nota: O FLA. Inclui a versão de avaliação do componente de efeito, que só funciona no IDE Flash (Flash 8, Flash CS3 e Adobe Flash CS4), mas não dentro do navegador.

Você também pode baixar a TV Efeito Fuzz aqui.

Aqui você pode encontrar um vídeo tutorial de como implementar um efeito diferente.

  • Share / Bookmark