| Autor: |
Flash Web Training |
| Data de
Publicação: |
25/11/2003 |
|
|
Introdução
Neste tutorial, vamos explicar-vos como criar um site em
Flash, utilizando ficheiros externos de criados em Flash. Neles estão
incluídos um preloader e um efeito de transição,
ambos em ficheiros externos.
Clique com o botão direito do rato sobre o
filme para visualizar o menu de opções
Downloads:
Estrutura do Site
O site em Flash que pretendemos construir apartir deste tutorial, contém
essencialmente 3 partes:
- Index Animation
A animação do ficheiro Index é a vossa tela principal,
nela incluímos os botões, e um MovieClip em branco, para
dispormos a nossa informação.
- Content Animations
As content animations são animações que serão
que contêm o material a ser lido para mais tarde ser disposto no
filme principal.
- Transition Animations
Esta será a animação que será lida, quando
carregarmos em algum dos botões. Contém também uma
animação de preloader.
Interface:
1. Comecemos por abrir o ficheiro main.fla que vos disponibilizamos
no site num ficheiro zip. Seleccionem a layer botoes.
2. Carreguem nos botões de Ctrl+L, ou pressionem
a tecla de F11, para abrirem a janela da livraria. Vamos então
arrastar o but1 para o nosso filme e colocá-lo ao lado do lugar
onde vai decorrer todo o nosso filme.
3. Necessitamos agora de ajustar com precisão
as coordenadas onde queremos que estes botões se situem. Assim
sendo, vamos dar para a coordenada de X, o valor de 10, e para a coordenada
de Y, o valor de 50. Deveremos dar o nome de b1, à Instance Name.
4. Deveremos repetir estes últimos passos para
os botões que se encontram na livraria com o nome de but2 e but3.
As coordenadas para ambos os botões serão de:
b2 : X=10 ; Y=80
b3 : X= 10 ; Y=110
5. Acabando de fazer estas alterações
ao nosso filme, este será o nosso aspecto, quando finalizarmos.
6. Seleccionem a layer de mascara. Abram a vossa livraria
e arrastem para a stage o símbolo com o nome de mascara. Para melhor
posicionar-mos este novo elemento, deveremos dar-lhe as seguintes coordenadas:
X=100; Y=40
7. Seleccionem a layer de conteudo. Abram a vossa livraria
e arrastem para a stage o símbolo com o nome de mascara. Para melhor
posicionar-mos este novo elemento, deveremos dar-lhe as seguintes coordenadas:
X=100; Y=40
Devem dar o nome de conteudo na Instance Name.
8. Seleccionem a layer de transicao. Abram a vossa livraria
e arrastem para a stage o símbolo com o nome de mascara. Para melhor
posicionar-mos este novo elemento, deveremos dar-lhe as seguintes coordenadas:
X=240; Y=114
Devem dar o nome de transicao na Instance Name.
9. Acabamos de criar a layer da mascara para como mascara
para o conteúdo e transição de layer, porque somente
queremos que haja uma visibilidade das transições e dos
seus conteúdos.
Cliquem com o botão direito do rato sobre a layer mascara. Seleccionem
de seguida a opção de Mask. Como necessitamos ainda que
a nossa layer de conteudo seja igualmente mascarada, deveremos então
clicar com o botão direito do rato sobre a layer de conteudo e
de seguida escolher a opção de properties. Dentro desta
janela de properties, teremos então de escolher a opção
de Masked.
10. Terminamos então de trabalhar com o nosso
interface. Necessitamos de trabalhar com as actions para poder-mos dar
vivacidade ao nosso site.
11. Cliquem sobre a layer de actions. Com o botão
direito do rato vamos escolher a opção de Actions. Copiem
o código que de seguida vos disponibilizamos. Não se esqueçam
de manter os ficheiros todos que vos demos no ficheiro zip, no mesmo directório
em que estão a trabalhar este ficheiro.
b1.onRelease = function() {
if (_root.section != "profile.swf") {
_root.section = "profile.swf";
_root.transition.gotoAndPlay("closing");
}
};
b2.onRelease = function() {
if (_root.section != "gallery.swf") {
_root.section = "gallery.swf";
_root.transition.gotoAndPlay("closing");
}
};
b3.onRelease = function() {
if (_root.section != "photos.swf") {
_root.section = "photos.swf";
_root.transition.gotoAndPlay("closing");
}
};
12. Cliquem sobre a layer de conteudos.
Cliquem sobre o Movie Clip da layer conteudos. De seguida c Com o botão
direito do rato vamos escolher a opção de Actions. Copiem
o código que de seguida vos disponibilizamos.
onClipEvent (enterFrame) {
if (!loaded && this._url != _root._url) {
if (this.getBytesLoaded() == this.getBytesTotal()) {
loaded = true;
_root.transition.gotoAndPlay("opening");
}
}
}
13. Cliquem sobre a layer de transicao. Façam
um duplo clique sobre o Movie Clip transicao. Seleccionem a frame 1 da
layer actions. Com o botão direito do rato escolham a opção
de Actions. Deverão copiar o seguinte código para as Actions.
_root.section = "profile.swf";
14. Cliquem na frame 9 da layer actions. Vão
ao menu de Actions e copiem o seguinte código:
loadMovie(_root.section, _root.content);
stop();
15. Cliquem na frame 24 da layer actions. Deverão
de seguida copiar o seguinte código para dentro da janela de properties:
stop();
|
