PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais Avançados

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX
Dificuldade: Avançado
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.

Ficheiro Swf

Clique com o botão direito do rato sobre o filme para visualizar o menu de opções


Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF

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();

 

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

 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados