Posted 26/06/2005, 01:51
Hora de usar o Dreamweaver...
1- Crie uma tabela de 510x359, com borda de 1px preta. A tabela servirá só para marcar a área do quebra-cabeça.
2- Crie um DrawLayer e insira uma das peças do seu quebra-cabeça.
3- Adicione agora a ação Drag Layer para arrastar a figura.
Selecione a figura dentro do DrawLayer. Vá no painel Behaviors e adicione Drag Layer.
4- Use a ação OnLoad. Isso fará com que a Imagem já esteja ativada antes do click do Mouse.
6- Monte o quebra-cabeça com os Draw Layer.
Salve e mande um F12 para testar o Drag Layer.
7- Com tudo pronto, é hora de criar a rotina do jogo. Crie um botão para misturar as peças e outro para ordenar. uhhhh, faça isso usando a Linha de Tempo.
Adicione todos Draw Layer à Linha de Tempo com apenas dois quadros(frames) para cada Drae Layer.
Montando o Layout do Jogo.
Adicionamos ao html o espelho (Imagem Original), para orientar o jogador, um Botão para zuar as peças, e outro para mostrar o quebra-cabeça montado.
8- Vamos definir a posição dos Draw Layer para os dois botões do jogo.
Tendo montado o Quebra-Cabeça, posicione as camadas para a distribuição. Para isso, selecione o frame dois da Timeline, clicando em cima dele.
Arraste os Draw Layer para o campo "Peças" na imagem do painel. Sempre verifique se o frame 2 continua marcado.
Com esta sequência que você aplicará à todos os Draw Layer e terá o posicionamento para a distribuição das peças.
9- Aplicaremos behaviors aos botões do painel.
Use o Hotspot Tool para linkar a figura.
E com o Hotspot Tool selecionado, vá no painel Behaviors>Timeline>Go To TimeLine Frame e indique o frame 2. Agora, como evento do Mouse selecione OnClick. Isso fará com que você, ao clicar, rode a animação carregando a posição das camadas.
O mesmo faremos para o link "Ver quebra-cabeça montado". Adicionamos um Hotspot Tool.
Agora, em Behaviors>Timeline>Go To TimeLine Frame indique o frame 1. Atribua o Evento OnClick ao Mouse. As 32 camadas voltam ao frame 1 que forma o quebra-cabeça montado.
makerup comunicação e marketing