Introdução

Neste tutorial, vamos dar-vos a conhecer como fazer um óptimo efeito gráfico através dos comandos de actionscript. Criar este efeito permite que a criação de um ficheiro seja de tamanho mais reduzido e igualmente mais fácil de alterar e personalizar caso, decidam usar nos vossos projectos.

Downloads:

Ficheiro Fla Tutorial em PDF

Prontos? Vamos da início ao nosso tutorial !

1. Vamos dar início a este projecto definindo de início, o layout do project. Para tal, deveremos defini-lo com os seguintes parâmetros:

Stage: 400 x 400
Stage Color: White (#FFFFFF)
Layers: 6 layers (deverão ficar como na imagem)

2. Junto com o ficheiro zip que está no site, encontraram 5 ficheiros de imagens que vamos utilizar no nosso projecto. Isto é claro, que é só uma proposta por nós feita. Podem utilizar as vossas imagens, mas devem ter presente que todas elas deverão ter o tamanho de 400 por 400.

3. Passaremos de seguida a por cada uma das imagens em cada uma das layers criadas no passo 1. Após terem inserido todas as imagens a serem utilizadas, deveremos converte-las todas para movie clip. Para tal cliquem sobre as imagens, uma a uma, e depois carreguem na tecla de F8.

Todas as imagens devem seguir uma sequência lógica de terminação, contendo todas o mesmo nome, mas uma terminação diferente. Por exemplo podem dar o nome de g_image1 ao converter a vossa imagem, mas todas as outras imagens que se seguem, deverão ter o mesmo nome mas o número seguinte. Exemplo g_image1, g_image2, ..., g_image5.

Na instance name, deverá ser dado grafico1 e por ai adiante até grafico5, tendo de ser igual o número de terminação com o número dado com o Movie Clip.

4. Precisamos de começar a criar o nosso efeito. Para tal deveremos clicar com o botão direito do rato sobre a primeira frame da layer Script Layer. Insiram o seguinte código no painel das Actions:

_root.createEmptyMovieClip("script_clip", 0);
script_clip.onLoad = function() {
mosx = 0;
mosy = 0;
};
script_clip.onEnterFrame = function() {
difx = mosx - _root._xmouse;
dify = mosy - _root._ymouse;
mosx -= difx / 8;
mosy -= dify / 8;
_root.graphic1._alpha = (mosx / 4) - (mosy / 4);
_root.graphic2._alpha = 100 - (mosx / 4) - (mosy / 4);
_root.graphic3._alpha = (mosy / 4) - 100 + (mosx / 4);
_root.graphic4._alpha = (mosy / 4) - (mosx / 4);
};

5. E temos o nosso tutorial criado. Podem de seguida testar o vosso projecto, não esquecendo de mover o rato ao longo do ecrã para ver a transição das layers. Para testarem o vosso projecto, deverão pressionar as teclas de Ctrl+Enter.