anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Album Interativo no Flash

Para este projeto, usaremos 6 imagens para compor o álbum, uma imagem de fundo e ActionScript3.0.

Passo 1

Abra o Flash e clique em “ActionScript 3.0”

Passo 2

Com o arquivo aberto, altere as propriedades do projeto clicando em “Editar”.

 Passo 3

Altere a Lagura : 900 – Altura : 500 – Taxa de quadros ( velocidade de reprodução do seu projeto): 32

Passo 4

Importe as imagens para a Biblioteca do Flash. Neste caso, não importe diretamente para o Palco, para que as imagens sejam selecionas quando necessário.

Passo 5

Vamos ordenar as imagens. Arraste para o Palco a imagem “Fundo Madeira “.
A) Alinhe correspondendo a largura e altura
B) Alinhe no centro horizontal.
C) Alinhe na borda superior

Passo 7

Crie uma nova Camada e arraste a imagem 1.jpg para o Palco

Passo 8

Redimencione a imagem utilizando a ferramenta “transformação livre”

Passo 9

Insira as demais imagens posicionando aleatoriamente no palco

Passo 10

Selecione todas as imagens da Camada 2 e clique com o botão direito do mouse nas imagens [selecionadas] e clique na opção “Distribuir camadas “

Passo 11

Agora as imagens estão em camadas diferentes, exclua a Camada 2 clicando com o botão direito do mouse “Excluir camada”

Passo 12

Clique na Camada 1.jpg, remova a visualização e bloqueie as Camadas 2.jpg, 3.jpg, 4.jpg, 5.jpg e 6.jpg

Passo 13

Com a imagem selecionada, clique com o botão direito

Passo 14

Clique na ferramenta “Tinteiro”

Passo 15

Configure a cor do traçado para branco e altura do traçado para 5

Passo 16

Clique em cima da imagem para adicionar uma borda como nas fotos Polaroid

Passo 17

Repita o mesmo processo para as demais imagens, até que fiquem como na figura abaixo

Passo 18

Selecione todas as camadas, menos a camada “Fundo”, em “Junção” altere para “Mitre”, para que as bordas fiquem retangulares.

Passo 19

Clique na camada 1.jpg, selecione a foto que esta na camada, vamos converter esta foto em um objeto do tipo botão. Clique no menu “Modificar” > “Converter em símbolo”

Passo 20

Adicione um nome ao botão, no exemplo, escolhi “Foto01”

Passo 21

Repita o mesmo processo para os outros botões.

Passo 22

Com os botões prontos, vamos adicionar filtro de sombra, que esta localizado no Painel de Propriedades. Configure como mostra na figura.

Passo 23

Repita o mesmo para os outros botões.

Passo 24

Vamos adicionar animação aos botões, clique na camada 1.jpg, clique 2x no botão. Nesta etapa você vai visualizar as fases do botão, a imagem do botão está separada.

Passo 25

Insira um quadro-chave clicando com o botão direito do mouse em cada uma das fases dos botões, como mostra na figura.

Passo 26

Clique em “Sobre”, tecle F8 (ou menu Modificar > Converter em símbolo), altere para “Clipe de mídia”

Passo 27

Entre no “Clipe de mídia” clicando 2x, insira um Quadro-chave no quadro de nº 10, clique com o botão direito no intervalo dos quadros e insira a “Interpolação Clássica”

Passo 28

Clique no quadro nº 10, clique na “Ferramenta Transformação livre”, aumente um pouco a imagem pressionando a tecla SHIFT para aumentar proporcionalmente, tecle a tecla ENTER para visualizar o efeito.

Passo 29

Clique no menu Janela > Ações e digite o Action que esta na figura abaixo

Passo 30

Clique no quadro de nº 1, altere a Atenuação do quadro para 100

Passo 31

Nesta fase você já pode visualizar que imagem salta quando você posiciona o mouse na imagem, tecle as teclas CTRL + ENTER para ver o efeito

Passo 32

Agora vamos copiar o mesmo efeito que esta no “Sobre” para a fase do botão “Acima”. Selecione os quadros de 1 a 10, clique com o botão direito do mouse e clique na opção “Copiar Quadros”

Passo 33

Saia do “Clip de Filme”, clique na fase do botão “Acima”, selecione a imagem, transforme a imagem em “Clip de Filme” nomeando de “Foto01-Acima”

Passo 34

Entre no “Clip de Filme” e cole os quadros que foram selecionados, para isso clique com o botão direito do mouse sobre os quadro nº 1 e escolha a opção “Colar quadros”

Passo 35

Selecione a os quadros e clique na opção “Inverter quadros”, remova o action do quadro 1 e adicione no quadro 10.

Passo 36

Repita os passos 24 ao 34 para os demais botões.

Passo 37

Nosso trabalho esta quase acabando, vamos adicionar um pequeno código Action script 3.

Passo 38

Clique no botão “Fragmentos de Código”, clique em “Ações”, clique 2x em “Trazer objeto” para abrir o código

Passo 39

Altere a linha do código de CLICK para ROLL_OVER

Passo Final

Feche a tela do Action, e tecle CTRL + ENTER para ver o resultado final.

Espero que tenham gostado do artigo, o arquivo .fla e .swf estão disponíveis neste link -> (album), curtam, e comentem please! 😉

Próximo

Postagem Relacionada

Como criar um Vídeo Player no Flash
Você quer inserir um player de vídeo com controles personalizados em suas páginas da web?  Com este