Adicionando componentes interativos no Flash Catalyst

• Abril 26, 2024

Neste tutorial, concluiremos a apresentação de slides do portfólio na Adobe^R Instantâneo^R Catalisador^R. Se você está acompanhando, criamos nossos botões e estamos prontos para adicionar os efeitos especiais. À medida que navegamos pelo portfólio, queremos que o botão do logotipo visível fique esmaecido e os outros botões visíveis. Portanto, precisamos informar ao Catalyst qual botão é para qual página e quando escurecer os botões. Em seguida, adicionaremos um efeito de transição Fade entre as páginas.

Primeiro, escureceremos o botão do logotipo atual. Quando o logotipo 1 estiver visível no estado da Página1, queremos que o botão correspondente seja esmaecido. Precisamos fazer isso nos três estados ou páginas de nosso portfólio.

1. Clique no ícone Página1 no painel Páginas / Estados para trabalhar nessa página. Clique na imagem em miniatura que agora é o nosso botão do logotipo 1. No painel Propriedades, defina Opacidade como 40. Como o centro do tapete embaixo do botão é preto, isso fará com que o botão pareça esmaecido.

2. Clique no ícone Página2 no painel Páginas / Estados. Repita a etapa anterior para a Página2 escurecendo apenas o botão que corresponde ao logotipo 2. Clique no ícone Página3 no painel Páginas / Estados e repita esta etapa.

Clique em Arquivo - Executar projeto para testar nosso novo efeito. Quando você clica nos botões, o logotipo correspondente deve estar visível e esse botão deve estar esmaecido.

A última coisa que adicionaremos à nossa navegação é uma transição de desbotamento entre páginas, usando a Linha do tempo. Volte à Página1 clicando no ícone Página1. Dê uma olhada nas camadas da Linha do tempo e você verá que temos uma camada para cada transição possível entre as três páginas.

Página1> Página2
Página1> Página3
Página2> Página1
Página3> Página1

3. Clique na camada Página1> Página2. Você verá que o Catalyst nos deu as opções de transição para os logotipos 1 e 2 (esmaecidos) e os botões 1 e 2. Como nos afastaremos do logotipo 1, temos a opção Fade Out. Mas mudaremos para o logotipo 2. Temos uma opção Fade In para esse logotipo.

Nós adicionaremos apenas o efeito Fade Out ao logotipo 1 e o efeito Fade In ao logotipo 2. Não precisamos do efeito Fade aplicado aos nossos botões. No entanto, você pode usar esse efeito em outro projeto.

Clique no botão Transição suave na parte inferior da linha do tempo. Você verá que os controles Fade Out / In foram estendidos para meio segundo em todas as camadas. Ainda na camada Página1> Página2, precisamos desativar o efeito para os dois botões. Empurre o controle deslizante para a esquerda de cada botão.

Clique na camada Página1> Página3. Repita a etapa anterior para os dois botões e logotipos. Repita novamente para a camada Página2> Página1 e Página3> Página1.

Isso cuida de todas as transições para o estado Página1. Mas temos três estados em nosso portfólio. Precisamos fazer isso novamente para os outros dois estados. Clique no ícone Página2 no painel Páginas / Estados.

Dê uma olhada nas camadas na Linha do tempo. Você notará que as configurações que acabamos de definir para o estado Página1 são transferidas para o estado Página2 para as transições entre Página1> Página2 e Página2 e Página2> Página3. Só precisamos adicionar a transição entre Página2> Página3 e Página3> Página2.

4. Repita as etapas anteriores para aplicar as transições aos logotipos no estado da Página2. Você deve fazer isso para cada camada na Linha do tempo.

5. Clique no ícone Página3 no painel Páginas / Estados. Você notará que as configurações de transição foram transferidas dos outros dois estados. Se tivéssemos mais páginas, precisaríamos trabalhar nas camadas desse estado. Mas como esse é o último dos três estados, estamos todos prontos.

Teste seu projeto novamente. Se tudo estiver funcionando, estamos prontos para salvar nosso arquivo como LogoPortfolio.fxp.

6. Precisamos dizer ao Catalyst para gerar os arquivos que exibirão nosso portfólio Flash. Clique em Arquivo - Publicar no SWF. Navegue até o local correto no seu disco rígido e salve o seu projeto. Você verá que o Catalyst fornece duas pastas. Na pasta implantar na web, temos os arquivos necessários para executar o portfólio em um servidor web. No local de execução, temos os arquivos para executar o portfólio em nossa área de trabalho.

Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram impressas com permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / são marcas comerciais registradas ou marcas comerciais da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.

Instruções De Vídeo: Custom skins - Fireworks, Flash Catalyst & Flash Builder Pt1 (Abril 2024).