CRIAO DE UM SITE COMPLETO EM FLASH

Introduo A criao de sites completamente em Flash uma boa indicadora do grau de experincia que algum pode ter com este software. Escusado ser dizer que a criao de sites completamente "flashados" poder ser um processo frustrante e muito cansativo. Este tutorial no ajudar no design do site, mas ajudar na parte tcnica, nos detalhes de utilizao (tais como ligaes entre pginas, criao de uma boa navegao) e outros problemas comuns na criao de um site em Flash. Antes de continuarmos com este tutorial, certifica-te que ests minimamente familiarizado com os seguintes conceitos: LoadMovie (carregar filme) Layers (camadas) Actions (aces) Botes (botes)

Neste tutorial vamos utilizar um site previamente criado e modific-lo para que este funcione correctamente.

2002 VISUALWORK Produes Multimedia, Lda. Todos os direitos reservados. Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa da VISUALWORK. FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos so marcas registadas da VISUALWORK Produes Multimedia, Lda.

Passos para criar um site completamente em Flash: Os passos seguintes vo ajudar-nos na criao de um site completamente em Flash: 1. Estrutura de um site em Flash A estrutura de um site completamente em Flash, neste tutorial, consiste no seguinte: Animao de Index A animao de index nada mais do que a base onde as "verdadeiras" animaes vo ser construidas. A animao de index vai conter apenas o menu de navegao e um movie clip vazio para carregamento (loading) de ficheiros SWF externos. Animaes de Contexto As animaes de contexto contm o "verdadeiro" contedo a ser carregado na animao de index. Como se pode compreender, um site completamente em flash composto por vrios ficheiros swf individuais. A animao de index carregada primeiro. Clicando num dos links da navegao vai fazer com que a respectiva animao de contedo seja carregada para o movie clip em branco, situado na animao de index. Se ests familiarizado com o loadMovie de certeza que te vais lembrar que podes carregar animaes num movie clip ou num nvel. Provavelmente tudo isto poder ser um pouco confuso. E se em vez de aprendermos algo abstracto, comessemos a meter a mo na massa? Foi criado um exemplo onde faltam muitas coisas, para que sejam adicionadas por ti. Vamos ento comear a criar o site a que nos referimos pouco: Comeamos por fazer o download do ficheiro fonte, que contm tudo o que necessrio para comear. Depois de teres feito o download, abre o ficheiro chamado inicio.fla. Surgir a estrutura bsica do site, onde sero adicionados os botes, links e o cdigo necessrio (tudo em instrues contidas neste tutorial). De que serve um site sem navegao? Vamos adicionar um menu de navegao. J existe uma base do menu de navegao desprovida de qualquer cdigo. Escolhe a layer "navigation". Pressiona a tecla F11 ou vai at Window | Library. Arrasta o simbolo "nav_background" da Library e larga-o no stage.

2002 VISUALWORK Produes Multimedia, Lda. Todos os direitos reservados. Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa da VISUALWORK. FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos so marcas registadas da VISUALWORK Produes Multimedia, Lda.

Certifica-te que o objecto est perfeitamente alinhado no topo-esquerdo. Para isso, basta seleccionar no painel Properties em baixo, e escrever 0 (zero) em ambos os campos X e Y. Agora precisamos de criar um lugar onde os SWFs externos vo ser carregados. Lembra-te que para usares o loadMovie, precisas de um alvo para onde carregar o movie clip pretendido. Vai at Insert | New Symbol. D um nome ao clip, escolhe Movie Clip, e clica em OK. Vers ento o clip aberto na rea de trabalho. Simplesmente clica onde diz Scene 1, para saires do mesmo (Scene 1 situa-se mesmo por baixo do nome das layers). Estamos de volta timeline principal.Criamos o movie clip mas no o adicionamos em nenhum local da nossa animao. Clica na layer "action". Pressiona a tecla F11 ou vai at Window | Library. A caixa Library aparece e selecionamos o movie clip recm criado, arrastando-o para a timeline principal. Mais uma vez, as coordenadas para X e Y so 0(zero) e 0(zero), tal e qual como na criao do menu de navegao. Dever de ser visvel um pequeno circulo vazio no topo-esquerdo da timeline. Seleciona o movie clip e d-lhe o nome de instncia (instance name) "contents". Se no lhe for dado este nome, o movie simplesmente no vai funcionar. Agora, que temos o nosso movie clip no local correcto, clicamos na layer "action" e arrastamo-la para baixo da layer "navigation". Agora j temos o interface da animao completo. Mas ainda temos de adicionar as aces, e mais tarde aprender as bases da criao do teu prprio site em Flash. Clica em seguinte para prosseguires para a segunda parte deste tutorial.

2. Adicionando actions Quase todas as animaes de Flash usam actions. Como tal, necessrio um conhecimento mnimo de programao em ActionScript para tirar o mximo partido do Flash. As seguintes seces de texto e cdigo ajudar-te-o a conseguir o que pretendes do Flash. Vamos adicionar o cdigo nossa animao de Flash e mais tarde o mesmo ser explicado. Certifica-te que tens o movie aberto:

2002 VISUALWORK Produes Multimedia, Lda. Todos os direitos reservados. Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa da VISUALWORK. FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos so marcas registadas da VISUALWORK Produes Multimedia, Lda.

Clica com o boto direito do rato no menu e escolhe Edit in Place. Estamos agora a editar o movie clip que contm os botes. Clica com o boto direito do rato no boto "locais" e seleciona Actions. Copia e cola o seguinte cdigo na caixa de dilogo Actions: on (release) { _root.contents.loadMovie("locations.swf"); } Faz o mesmo para o boto "musica", mas com seguinte cdigo: on (release) { _root.contents.loadMovie("music.swf"); } O mesmo para o boto "membros", com o seguinte cdigo: on (release) { _root.contents.loadMovie("membership.swf"); } E agora por ltimo, o mesmo para o boto "home", com o seguinte cdigo: on (release) { _root.contents.loadMovie("main_content.swf"); } Acabamos de adicionar o cdigo a todos os botes. Salva a animao e faz um preview no browser, indo a File | Publish Preview | HTML. Agora, clica nos bote. Note-se que as pginas individuais carregam na janela principal. Depois de ter acabado de explorar a animao, clique no boto de Refresh para visualizar a pgina de entrada de novo. Notou-se alguma coisa de extranho? Para o caso de ter passado despercebido, o problema o seguinte: Quando fazemos Refresh, o conteudo mostrado deveria de ser o mesmo de quando se clica no boto "home", mas no . Isto acontece porque quando o movie comea, nenhum SWF externo carregado. Para resover este pequeno problema fazemos o seguinte: Clicamos em Scene 1. Presumindo que ainda se est a editar os botes, no movie clip do menu. Se no for este o caso, ignora este passo. Clica com o boto direito do rato na keyframe da layer "action" e seleciona

2002 VISUALWORK Produes Multimedia, Lda. Todos os direitos reservados. Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa da VISUALWORK. FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos so marcas registadas da VISUALWORK Produes Multimedia, Lda.

Actions. Copia e cola o seguinte cdigo: _root.contents.loadMovie("main_content.swf"); Salva o ficheiro e faz o preview da animao no browser indo a File | Publish Preview | HTML.

Repara como o conteudo principal imediatamente carregado. Agora a explicao do funcionamento do cdigo. 3. O cdigo: explicao Para carregar os movie clips, bsicamente foram feitas duas coisas: Quando o utilizador clica num boto, carregado um ficheiro a partir de uma outra localizao. O ficheiro tem de ser carregado para uma localizao especfica.

nesta altura que d jeito saber um pouco de ActionScript. Tendo lido e usado a aco loadMovie, concerteza percebeste que esta funo exactamente aquilo que necessitas. O loadMovie, no Flash MX, tem a seguinte estrutura bsica: movieClipName.loadMovie("url to movie.swf"); MovieClipName no cdigo acima, o nome do movie clip para o qual o "url to movie.swf" vai ser carregado. Lgicamente que o "url to movie.swf" vai ser o nome e endereo do SWF externo. Agora vamos analizar o cdigo usado num dos botes. A seguinte poro de cdigo foi retirada do boto "home". on (release) { _root.contents.loadMovie("main_content.swf"); } Basicamente, a primeira linha que vai executar o cdigo restante, quando acontece um determinado evento (neste caso, quando largamos o boto do rato, aps termos carregado num boto). A segunda linha onde o cdigo loadMovie aparece. Este cdigo ligeiramente diferente do cdigo do loadMovie explicado em cima, mas mesmo assim muito similar. O nome do movie clip para o qual a animao main_content.swf vai ser carregada, chama-se contents. Foi adicionado "_root" antes de contents, porque o movie clip contents est localizado na timeline principal. Todos os outros botes tm cdigo similar. Apenas varia o nome do SWF externo. Por exemplo, o boto locais tem como nome do ficheiro externo, locations.swf. Todas as animaes podem ser visualizadas, bastando para isso ir ao directrio para o qual todos os ficheiros deste tutorial foram extraidos.
2002 VISUALWORK Produes Multimedia, Lda. Todos os direitos reservados. Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa da VISUALWORK. FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos so marcas registadas da VISUALWORK Produes Multimedia, Lda.

Agora que j completaste o tutorial, a tua pgina dever funcionar correctamente. Tenta fazer a tua prpria pgina e animaes. De certeza que neste momento j s capaz! Espero que este tutorial te tenha ajudado. Se tiveres alguma dvida ou questo, no hesites em utilizar os nossos Fruns de Discusso. Bons Flashes Bruno Gomes bruno.gomes@flashwebtraining.com

2002 VISUALWORK Produes Multimedia, Lda. Todos os direitos reservados. Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa da VISUALWORK. FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos so marcas registadas da VISUALWORK Produes Multimedia, Lda.