Introdução

Muitas pessoas usam ficheiros externos swfs hoje em dia, porque este são uma boa forma de estruturar um site e de o gerir, mas tenho também a vantagem de o mesmo ser de tamanho reduzido. Estes ficheiros swfs conseguem também dividir um site em secções: cada ficheiro externo swf, associa-se a uma secção.

Estes ficheiros são dinamicamente lidos para dentro do filme quando entramos dentro de uma secção do site. Quando pomos a questão que ultimamente tem vindo a ser feita, de como criar transições leves e funcionais entre ficheiros externos em swf? Vamos tentar expor-vos a melhor forma de o fazer, neste tutorial.

Downloads:

Ficheiro Fla Tutorial em PDF

Heis um exemplo do que pretendemos criar:

O nosso objectivo

Cada swf irá conter uma pequena animação, uma frame na qual irá parar, e uma animação chamada outro. Quando o filme principal é lido, o primeiro swf será executado. De seguida irá ler a animação de introdução e irá parar numa certa frame. Quando o utilizador pressionar um botão (localizado na timeline) para uma diferente secção ser lida, o ficheiro swf será avisado de que é preciso ler a animação chamada outro. Quando esta animação chamada outro acabar de ser lida, o novo swf irá igualmente ler a sua animação e parar na frame antes do outro. Quando um utilizador voltar a pressionar outro botão, o mesmo processo se irá repetir. Isto resulta em transições entre ficheiros swf.

Como funciona

O sistema é baseado em duas variáveis: midframe e _root.currMovie.

midframe é a variável na primeira frame na timeline principal de cada ficheiro swf. Esta variável guarda o número da frame na qual o ficheiro swf irá parar. Cada swf contém a sua variável, e pode ser diferente para cada swf, não sendo forçosamente necessário. Esta variável será usada com os botões: quando pressionamos um botão de uma outra secção, irá ser verificado se o swf corrente, está posicionado na midframe. Se assim for, o swf corrente será ordenado para accionar a função play() – o que significa que a animação outro irá começar, porque a animação outro começa na frame seguinte à midframe.

_root.currMovie é uma variável que contém o nome da secção que está correntemente a ser vista. Está criada na _root, porque a sua variável terá de ser acedida por ambos os swfs e pelo filme principal. Esta variável é usada por 3 razões:

1. A primeira razão envolve os botões: quando pressionamos um botão na nossa timeline, esse botão precisa de verificar quando uma secção é ordenada para ser lida, se não é a que está actualmente a ser visionada, ou se nenhum swf está a ser lido automaticamente no início do filme principal, se o _root.currMovie não está definido. Se não estiver definido, então isto quer dizer que não existe nenhuma secção lida até ao momento, e que um botão correspondente deverá ser lido, logo o _root.currMovie deverá ser atribuído para o nome desta secção. Em primeiro lugar irá verificar se foi ou não definido, e caso não tenha sido definido, de seguida verifica se não é diferente da secção que está correntemente a ser mostrada.

2. A Segunda razão está interligada com a primeira. Quando um botão é pressionado, e o código no botão irá verificar se o swf requerido, se é diferente com o que está a ser visto. Se for verdadeiro, teremos de ver verificar se o filme corrente está na posição correcta ou mais à frente da midframe. Caso esteja mais à frente do que a midframe, isto permite ao utilizador para que possa o filme que está a ser lido quando o filme outro está a ser visionado, por exemplo quando acidentalmente pressionamos o botão errado. Assim sendo se a frame corrente está na midframe ou algure na animação outro (mais à frente do que a midframe), então o _root.currMovie terá de ser o nome da nova secção, e o swf corrente terá de ser ordenado igualmente para ser lido – se está na midframe, irá começar a ler a animação outro. Caso a animação outro estiver já a ser lida, então o comando play() não terá qualquer efeito porque este já está a ser lido.

3. Devem estar a perguntar-se de que forma é que o novo swf está a ser lido então agora. Quando um botão é pressionado, o _root.currMovie é actualizado para a nova secção e o swf correspondente é ordenado para ser lido. Devido a isto, o _root.currMovie será o nome da nova secção no final da animação outro. Esta é a forma como usaremos o ficheiro swf para ser lido na nova secção no fim da animação outro. Iremos ler um ficheiro swf com o nome de valor _root.currMovie, mais o “.swf”. Isto significa que os valores que damos a _root.currMovie deverão ser os nomes dos nosso ficheiros swfs, sem “.swf”.

Exemplo: Se temos os swfs, “main.swf, “about.swf”, “work.swf” e “contact.swf”, então os valores que serão atribuídos a _root.currMovie serão “main”, “about”, “work” e “contact”. Caso contrário, as transições não irão funcionar.

Como isto é feito

Os seguintes passos vão dar uma ajuda para criarmos efeitos de transição para ficheiros lidos externamente em Flash.

Filme principal

Se já têm criados os botões e um filme principal, passem à frente os 2 seguintes passos.

1. Criem os vossos botões. Cada botão é relacionado para cada secção, por exemplo:

“Main”, “About”, “Work”, etc.

2. Criem um novo MovieClip e posicionem-lo na vossa stage. Este será o swf no qual todos os outros swfs irão ser lidos. O canto superior esquerdo do vosso ficheiro swf corresponderá ao ponto de registo do MovieClip – o ponto que podem ver na stage.

3. Seleccionem o MovieClip que acabaram de criar e atribuam o nome de “container” à sua <Instance Name>. Este é o MovieClip onde iremos ler os ficheiros swf.

4. Seleccionem um botão, e copiem para o painel das Actions, o seguinte código:

on (release) {
if (_root.currMovie == undefined) {
_root.currMovie = "main";
container.loadMovie("main.swf");
} else if (_root.currMovie != "main") {
if (container._currentframe >= container.midframe) {
_root.currMovie = "main";
container.play();
}
}
}

Este é o código para cada botão que irá verificar se tudo está correcto para que a animação outro possa ser lida e o próximo ficheiro swf possa ser lido. Notem que cada valor que é atribuído para o currMovie é o nome do ficheiro swf, sem o “.swf”.

5. Repitam cada um dos passos anteriores para cada botão que utilizem na vossa stage. Lembrem-se de mudar o valor atribuído a _root.currMovie e o nome do ficheiro swf que deverá ser lido. Para terem uma ideia, aqui fica um exemplo de como o código irá parecer cada vez que o botão lê o swf e o põe a funcionar:

on (release) {
if (_root.currMovie == undefined) {
_root.currMovie = "work";
container.loadMovie("work.swf");
} else if (_root.currMovie != "work") {
if (container._currentframe >= container.midframe) {
_root.currMovie = "work";
container.play();
}
}
}

A explicação deste código foi descrita na explicação dos 3 passos principais do _root.currMovie.

Se quiserem que a primeira secção seja lida automaticamente quando entramos no site, coloquem o código na primeira frame da timeline principal, onde gostaríamos que a primeira secção seja mostrada, e renomeiem a “nome_da_vossa_primeira_seccao” para o nome da vossa primeira secção:

root.currMovie = “your_first_section_name”;
container.loadMovie(_root.currMovie+”.swf”);

O ficheiro SWF

1. Criem a vossa animação de introdução, conteúdos (senão tiverem sido já criados) e a vossa animação outro na vossa timeline principal.

2. Seleccionem a frame onde está contido o vosso conteúdo e lembrem-se da sua framenumber.

3. Ainda com a frame seleccionada, abram a vossa janela de ActionScript e copiem para dentro da mesma o seguinte código:

stop();

4. Seleccionem a primeira frame da vossa timeline, e abram uma vez mais a vossa janela de ActionScript. Colem na mesma, o seguinte código, e recoloquem [ovossonumero] pelo numero que se lembram que colocaram no passo 2.

midframe = [yournumber];

Agora, seleccionem a última frame na vossa timeline e reabram a vossa janela da ActionScript. Colem o seguinte código nessa janela. Se tiverem utilizado outro nome para a <instance name> que não container, não se esqueçam de mudar o nome.

_root.container.loadMovie(_root.currMovie+”.swf”);

Adicionar Preloaders

Uma pergunta que vos pode surgir é a de como será possível adicionar um preloader a estes swfs, e apartir daí, como criar as transições entre eles. Isto é um passo muito fácil de se fazer. Assim que completarem este tutorial, irão ter 2 frames extra no início do vosso swf, antes da vossa animação de introdução. O que vos resta fazer é adicionar a definição midframe ao código do preloader que têm na primeira frame.

Devem ter cuidado todavia – uma vez que adicionaram 2 frames extras, a vossa midframe nunca mais será a mesma. Não se esqueçam de actualizar o número da vossa midframe.

O código do preloader da primeira frame irá ser semelhante ao seguinte:

midframe = [yourupdatednumber];
bytes_loaded = Math.round(this.getBytesLoaded());
bytes_total = Math.round(this.getBytesTotal());
getPercent = bytes_loaded/bytes_total;
this.loadBar._width = getPercent*100;
this.loadText = Math.round(getPercent*100)+"%";
if (bytes_loaded == bytes_total) {
this.gotoAndPlay(3);
}

Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.

Bons trabalhos!
Pedro Teixeira
pedro.teixeira@flashwebtraining.com