5. Transformação num Smart-Clip
Para começar, temos de sair da edição do Movie Clip
"peças" e voltar para a cena principal (Ctrl+E).
Na biblioteca (Library), clica no Movie Clip "peças"
com o botão direito do rato e escolha "Define Clip Paramaters".
A partir de aqui vamos criar o famoso Smart-Clip !
Clica no botão "+"
No campo "Name" escreve "imagem"
Clica no botão "+"
No campo "Name" escreve "posx"
Clica no botão "+"
No campo "Name" escreve "posy"
Depois clica em "OK"
imagem, posx e posy são variáveis.
"imagem" vai corresponder ao número da "keyframe"
sobre o qual encontra-se uma peças do puzzle.
"posx" e "posy" correspondem à posição
X e Y desta peça do puzzle.
Acabámos de criar um Smart-Clip !
Poderás observar a mudança de aspecto do Movie Clip "peças"
na biblioteca.
Agora o seu aspecto deverá ser este : 
Antes de continuar temos de fazer 2 coisas :
- Utilizar a variável "imagem" no Clip :
Esta variável vai definir qual peça do puzzle será
vista.
Agora basta na primeira keyframe do Movie Clip "peças"
pôr a seguinte action :
gotoAndStop
(imagem);
- Segunda coisa, dar as actions necessárias ao botão invisível...
Este código deve:
Servir para o drag-n-drop das peças.
Gerir as sobreposições (Swapdepths).
Utilizar as variáveis "posx" e "posy" para
saber onde está.
Utilizar as coordenadas do cursor.
Comparar estes 2 últimos dados para verificar se a peças
está no lugar certo.
Gerar um "enquadramento" para facilitar a montagem do puzzle.
6. O drag-n-drop
Para deslocar um elemento em flash, temos de fazer 2 coisas:
- Um script que chama e define os comandos (Start e Stop Drag)
- Um Movie Clip que será o elemento "Dragável"
(já está feito)
Aqui está o código do Drag que deves colocar no botão
"invisível" (no clip "peças").
on (press) {
startDrag (this);
}
on (release) {
stopDrag ();
}
7. O SwapDepths
Este código gere a sobreposição dos clips.
on(press) {
this.swapDepths(1)
}
... Em resumo, colocar este código sobre o botão vai permitir
ver ao Movie Clip "peças" passar para 1º plano quando
é clicado pelo rato.
Adiciona este script ao evento "press" do botão invisível
acima da action "startDrag(this)":
if (this._x<>posx & this._y<>posy)
{
startDrag (this);
}
Este código condiciona o Drag do Movie Clip se este não
estiver na posição correcta. Vai verificar a posição
em X, Y do Movie Clip e compara com as variáveis "posx"
e "posy" que estão configurados no smart-clip.
Código a inserir para o estado "release" do botão
abaixo da action stopDrag ():
if (this._x>posx-15 & this._x < posx+15
& this._y>posy-15 & this._y < posy+15 ) {
this._x = posx;
this._y = posy;
}
Este código gere o enquadramento do Movie Clip movido quando é
largado. Se este é largado a menos de 15 pixeis da sua posição
em X, Y.
8. Aqui está o código completo para o botão invisível
Se não foste colocando o código no botão ou se
estás com alguma duvida, selecciona o botão, abre a janela
"Actions" (Ctrl+Alt+A), põe-na no modo "expert",
copia o código abaixo e cola-o na janela "Actions".
9. Configuração das peças
Volta à cena principal. Vamos agora colocar sobra a cena tantos
Movie Clips "peças" quanto peças do puzzles existirem.
Para cada um deles vamos inserir os parâmetros do smart-clip. Isto
é atribuir valores às variáveis (imagem, posx e posy).
Como?
Através da janela "Clip Parameters" (clique
direito sobre cada instância do Smart Clip e escolhe: panels >
clip parameters) atribuir os valores às variáveis na janela:
imagem = o número da keyframe desejada
posx = a posição em X da peça do puzzle presente
na keyframe escolhida
posy = a posição em Y da peça do puzzle presente
na keyframe escolhida
(utiliza as anotações feitas no ponto 2 (Criação
das peças)).
Repete esta operação para todas as peças (instancias
do Smart Clip), tendo atenção em bem numerá-las e
com as coordenadas correctas.
No .FLA, não verás diferença entre as instancias
do Smart Clip, mas uma vez publicado todas assumirão as suas próprias
propriedades.
|
