Flash Aplicaes Ricas

Desenvolvida exclusivamente para o Apostilando.com por Marcos Paulo Furlan

NDICE
NDICE .......................................................................................................................................... 2 APLICAES STAND ALONE.................................................................................................... 3

Abaixo seguem os comandos do FS Command ......................................... 4

BANNERS ALEATRIOS ............................................................................................................ 5 LENDO ARQUIVOS XML ............................................................................................................. 6 USABILIDADE ............................................................................................................................ 16

Texto Esttico ........................................................................................... 17 Texto Dinmico ......................................................................................... 17 Texto de Entrada....................................................................................... 18 Botes ....................................................................................................... 19 Movie Clips................................................................................................ 19
CLASSE DEPTHCONTROL....................................................................................................... 20 UTILIZANDO SWAPDEPTHS .................................................................................................... 21 COMPONENTE ACCORDION ................................................................................................... 23 GALERIA DE IMAGENS COM XML .......................................................................................... 26 GOOGLE MAPS NO FLASH...................................................................................................... 29 GALERIAS CUER E TILTVIEW ................................................................................................. 33

Cuer.............................................................................................................. 33 TiltViewer ...................................................................................................... 36

GALERIA COM COM BRIDGE .................................................................................................. 39

APLICAES STAND ALONE

Importante, para aproveitar o contedo deste material necessrio j estar familiarizado com o Adobe Flash. Se ele ainda for novidade para voc, acesse nosso site e baixe a apostila de Flash bsico.

Podemos utilizar o Flash para aplicaes executveis, ou seja, podemos usar todos os recursos do Flash para criao de aplicaes executveis. Esse recurso muito utilizado para criao de CD- multimdia. Basta apenas aps terminar o seu filme no assistente de publicao marcar a opo Windows Projector.

A ao utilizada pelo Flash para esse recurso FSCOMMAND que est dentro do painel de aes na pasta Browser / Network.

A instruo FS Command nos permite enviar comandos de dentro do FLASH para outros programas externos a ele. Com ele podemos controlar o Stand-Alone Player do Flash e qualquer outra aplicao que possuir controles Active X como o JavaScript na WEB, o Director, O Visual Basic, o C++ e outros. O FS Command nos permite especificar dois parmetros: commands e arguments. Existem comandos e argumentos pr-definidos que podemos usar sem ter que digitar, e que funcionam somente para o Stand Alone Player. O Stand Alone Player um recurso do Flash que nos permite basicamente visualizar uma animao sem precisar utilizar o Flash. Esse recurso reproduz as animaes exatamente como elas iro aparecer num Browser ou em uma aplicao Active X. Quando clicamos sobre um arquivo com extenso SWF o Stand Alone Player abre uma janela e reproduz a animao, sem abrir o Flash. Esta janela chamada de PROJETOR. Podemos tambm publicar o filme como projetor, este assunto veremos mais adiante.

Abaixo seguem os comandos do FS Command

Quit - Fecha o Projetor Fullscreen (true ou false) - True exibe a animao em tela cheia, False retorna ao tamanho normal Allowscale (true ou false) - True permite que a animao seja escalada de forma que ela preencha todo o tamanho do projetor. False a animao sempre ser exibida em seu tamanho original sem poder ser escalada. Showmenu (true ou false) - True permite a exibio completa do boto direito no projetor. False exibe somente a opo about flash player no projetor. Trapallkeys (true ou false) Habilita / Desabilita teclas como ESC e CTRL. Exec (caminho do arquivo) - Executa um aplicativo do projetor.

BANNERS ALEATRIOS
Abra o Flash e crie um novo documento (File > New ou Ctrl + N) com o tamanho 180 x 150 (Banner Rectangle). Caso seja necessrio, v ao menu, em Modify > Document (ou Ctrl + J) e altere as dimenses do documento.

Depois de criado o projeto do seu banner, salve-o como 0 (zero) e gere o swf dois arquivos o 0.fla (arquivo de projeto) e o 0.swf (que ser usado no navegador). Com o 0.fla aberto, altere a cor de fundo e salve-o como 1.fla e novamente tecle Ctrl + Enter para gerar o 1.swf. Crie os arquivos 2.swf at 5.swf. Abra um novo documento flash (File > New ou Ctrl + N) e salve como base.

Este arquivo far o papel de base, onde os banners sero carregados. Clique no primeiro frame do banner.fla e tecle F9 (isto abrir o panel Actions). Digite o seguinte cdigo

// A opo floor da classe Math Arredonda o nmero para o inteiro inferior mais prximo. //o numero 2 pelo fato de termos trs banners e sempre comear por zero banner = Math.floor(2*Math.random()); loadMovieNum (banner + ".swf", 1);

LENDO ARQUIVOS XML

Antes de comearmos a explicar como integrar o Flash com XML, voc precisa entender melhor como funciona o XML (eXtensible Markup Language). A grande vantagem de utilizarmos XML est no fato de no necessitar de uma outra linguagem ou banco de dados para enviar dados para o Flash. O Flash consegue ler facilmente um XML. Lembrando que impossvel editar ou remover tag's do XML pelo Flash. Para melhor compreender o XML, vamos analisar este cdigo: <?xml version="1.0" encoding="iso-8859-1"?> <galeria> <foto imagem="flash.jpg" legenda="Flash"/> <foto imagem="flex.jpg" legenda="Flex"/> <foto imagem="air.jpg" legenda="AIR"/> <foto imagem="silverlight.jpg" legenda="Silverlight"/> <foto imagem="ajax.jpg" legenda="Ajax"/> </galeria> Veja que na primeira linha declaramos a verso do XML e o encoding que d suporte a acentos, assim podemos colocar acentos em nossas tags. Na segunda linha abrimos a tag "galeria", informando que ali comea a galeria de fotos. Da 3 7 linha esto as fotos e as legendas. Para cada foto voc tem que declarar dessa maneira.

<foto - para indicar o incio de uma nova foto; imagem="flash.jpg" - para declarar o local do arquivo; legenda="Flash" - para informar o texto correspondente imagem; /> - declara o trmino da foto. Salve seu xml como "arquivo.xml" (sem aspas) e vamos ao Flash. Em um novo filme renomeie sua camada atual para AS Digite o seguinte cdigo System.useCodepage = true; // habilita acentos; var arquivo:XML = new XML(); // cria a varivel para ler o xml; arquivo.load("arquivo.xml"); // manda a varivel ler o arquivo.xml salvo anteriormente; arquivo.ignoreWhite = true; // ignora espaos em branco no XML arquivo.onLoad = function() { // aps a leitura do XML, executa a ao: trace(this); // mostra o contedo na janela de sada. } Vamos ento "entrar" nas linhas do XML. Para melhor explicar, entenda que no XML a contagem comea do 0, ou seja, a linha 1 na verdade a linha 0. Troque o cdigo pelo seguinte: System.useCodepage = true; var arquivo:XML = new XML(); arquivo.load("arquivo.xml"); arquivo.ignoreWhite = true; arquivo.onLoad = function() { trace(this.childNodes[0]); } Repare que agora ele mostrou somente o que esta entre <galeria> ... </galeria>. Mas por que isso? Simples, porque informamos que ns queramos tudo o que estiver no primeiro n do XML. Cada childNodes representa um n no XML. Vamos alterar mais um pouco System.useCodepage = true;

var arquivo:XML = new XML(); arquivo.load("arquivo.xml"); arquivo.ignoreWhite = true; arquivo.onLoad = function() { trace(this.childNodes[0].childNodes[0]); } Com isso ele acessa a primeira linha das fotos. Agora para exibir as informaes no palco, faa o seguinte: Crie um clipe de filme, arraste-o para o palco e instancie-o de "imagem". Crie um campo de texto dinmico e instancie-o de "legenda". Mude seu cdigo para: System.useCodepage = true; var arquivo:XML = new XML(); arquivo.load("arquivo.xml"); arquivo.ignoreWhite = true; arquivo.onLoad = function() { imagem.loadMovie(this.childNodes[0].childNodes[0].attributes.imag em); legenda.text = this.childNodes[0].childNodes[0].attributes.legenda; }

Para fazer com que ele mostre a segunda imagem e segunda legenda mude as duas ultimas linhas para:

imagem.loadMovie(this.childNodes[0].childNodes[1].attributes.imagem); legenda.text = this.childNodes[0].childNodes[1].attributes.legenda;

Vamos aprimorar nosso arquivo com botes de avanar e voltar e um preloader. Link para baixar extenso:

http://www.4shared.com/file/Hwyo2kLL/files_MovieClipTween119a.html Instale-a pelo extension mannager.

Crie mais dois MCS com formato de flecha para servirem de botes de Avanar e Voltar. Crie tambm uma animao para servir de preloader. Instancie as setas como voltar e avanar. Instancie o preloader como carregando. Abra o cdigo do nosso arquivo Agora precisamos importar a classe instalada e criar uma varivel para nos auxiliar na contagem das fotos. Coloque este cdigo nas duas primeiras linhas: #include "lmc_tween.as" i=0;

Na primeira linha importamos classe e na segunda declaramos uma varivel.

Agora precisamos criar 3 funes. Uma para carregar a foto, uma para alinhar os objetos ao centro do palco (opcional) e outra para ativar o preloader. Acrescente a seguinte ao aps essas duas linhas: function alinhar() { // alinhar a foto ao meio do palco horizontalmente imagem.tween("_x",Stage.width/2-largura/2,2,"easeElastic"); // alinhar a foto ao meio do palco verticalmente imagem.tween("_y",Stage.height/2-altura/2,2,"easeElastic"); // alinhar o preloader ao meio do palco horizontalmente carregando.tween("_x",Stage.width/2,2,"easeElastic"); // alinhar o preloader ao meio do palco verticalmente carregando.tween("_y",Stage.height/2,2,"easeElastic"); } // cria a funo para carregar function carrega() { // carrega a imagem imagem.loadMovie(arquivo.childNodes[0].childNodes[i].attributes.i magem); // carrega a legenda legenda.text = arquivo.childNodes[0].childNodes[i].attributes.legenda; } // cria a funo para o preloader aparecer function preloader() { carregando.tween("_alpha",100,2,"easeElastic"); } Como ns criamos uma varivel e estas 3 funes, lgico que o cdigo inicial, vindo do outro artigo, tambm vai mudar. Substitua o antigo por: System.useCodepage = true; // declara a varivel para ler o XML var arquivo:XML = new XML(); // l o arquivo.xml

10

arquivo.load("arquivo.xml"); // ignora espaos em brancos no xml arquivo.ignoreWhite = true; arquivo.onLoad = function() { // largura do arquivo largura = arquivo.childNodes[0].childNodes[i].attributes.largura; // altura do arquivo altura = arquivo.childNodes[0].childNodes[i].attributes.altura; // pegar quantas fotos tem total = arquivo.childNodes[i].childNodes.length; alinhar(); carrega(); preloader(); } Selecione o clipe de filme que est recebendo as fotos, instanciado como imagem. V nas aes dele e coloque: // ao carregar a foto onClipEvent (load) { // fica transparente this._alpha = 0; // e vai ficando visvel this.tween("_alpha",100,2,"easeElastic"); // o preloader some. _root.carregando.tween("_alpha",0,1,"easeElastic"); } Agora precisamos colocar somente os cdigos dos botes. Esse cdigo verificar em qual foto se encontra; caso esteja na ltima e tente avanar uma foto, ele volta para a primeira; caso esteja na primeira e tente voltar, ele ir para a ltima. Coloque isso no final do cdigo: // ao clicar no avanar avancar.onRelease = function() {

11

//se j estiver na ltima foto if (i == total-1) { // volta pra primeira i = 0; // seno } else { // vai para a prxima i++; } // ativa o preloader preloader(); // carrega a foto carrega(); // alinha a foto no meio alinhar(); }; // ao clicar no boto voltar voltar.onRelease = function() { // se estiver na primeira foto if (i == 0) { //quando clicar pra voltar, vai pra ltima i = total-1; // seno } else { //volta uma foto i--; } // ativa o preloader preloader(); // carrega a foto carrega(); // alinha a foto no meio

12

alinhar(); }; Veja como ficou o cdigo completo: #include "lmc_tween.as" i = 0; function alinhar() { // alinhar a foto ao meio do palco horizontalmente imagem.tween("_x",Stage.width/2-largura/2,2,"easeElastic"); // alinhar a foto ao meio do palco verticalmente imagem.tween("_y",Stage.height/2-altura/2,2,"easeElastic"); // alinhar o preloader ao meio do palco horizontalmente carregando.tween("_x",Stage.width/2,2,"easeElastic"); // alinhar o preloader ao meio do palco verticalmente carregando.tween("_y",Stage.height/2,2,"easeElastic"); } // cria a funo para carregar function carrega() { // carrega a imagem imagem.loadMovie(arquivo.childNodes[0].childNodes[i].attributes.i magem); // carrega a legenda legenda.text = arquivo.childNodes[0].childNodes[i].attributes.legenda; } // cria a funo para o preloader aparecer function preloader() { carregando.tween("_alpha",100,2,"easeElastic"); } System.useCodepage = true; // declara a varivel para ler o XML var arquivo:XML = new XML(); // l o arquivo.xml

13

arquivo.load("arquivo.xml"); // ignora espaos em brancos no xml arquivo.ignoreWhite = true; arquivo.onLoad = function() { // largura do arquivo largura = arquivo.childNodes[0].childNodes[i].attributes.largura; // altura do arquivo altura = arquivo.childNodes[0].childNodes[i].attributes.altura; // pegar quantas fotos tem total = arquivo.childNodes[i].childNodes.length; alinhar(); carrega(); preloader(); };

// ao clicar no avanar avancar.onRelease = function() { //se j estiver na ltima foto if (i == total-1) { // volta pra primeira i = 0; // seno } else { // vai para a prxima i++; } // ativa o preloader preloader(); // carrega a foto carrega(); // alinha a foto no meio alinhar();

14

}; // ao clicar no boto voltar voltar.onRelease = function() { // se estiver na primeira foto if (i == 0) { //quando clicar pra voltar, vai pra ltima i = total-1; // seno } else { //volta uma foto i--; } // ativa o preloader preloader(); // carrega a foto carrega(); // alinha a foto no meio alinhar(); }; Cdigo no MC imagem // ao carregar a foto onClipEvent (load) { // fica transparente this._alpha = 0; // e vai ficando visvel this.tween("_alpha",100,2,"easeElastic"); // o preloader some _root.carregando.tween("_alpha",0,1,"easeElastic"); }

15

USABILIDADE
O Flash sempre foi muito questionado quando se fala em acessibilidade, mas mesmo desde os tempos da Macromedia isso vem sendo aprimorado no Flash. Um das principais informaes a serem colocadas em seu filme est na janela de Propriedades. Para abrir essa janela clique na opo Size do palco de seu Flash

Ao clicar nessa opo ele abre uma janela onde voc deve preencher;

Title: Como o nome diz nesse campo deve ser colocado o ttulo do filme. Description: Deve ser preenchido com a descrio de seu filme. O Flash tambm possui uma janela de Acessibilidade. Menu Window, Other

16

Panels, Acessibility.

Por padro, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. No sendo necessrio fazer nenhuma modificao. Mas importante observar que as opes do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado.

Texto Esttico
Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem: "Current selection cannot have accessibility applied to it" ou seja: "A seleo atual no tem acessibilidade aplicada a ela". importante deixar ativa a opo "selectable", que possibilita a seleo do texto, isto permite que usurio selecione o texto e facilita acessibilidade para alguns leitores de tela. Esse boto fica disponvel na barra de propriedades de texto.

Texto Dinmico
Os campos de texto do tipo Dynamic Text, quando com a opo "Make object Accessible" ou seja "Torne o objeto acessvel", estiver ativada, permitir ao

17

leitor de tela ler exatamente o contedo escrito no mesmo. Mas se achar necessrio poder contar com mais duas configuraes: Description - Utilize esta opo para definir uma pequena descrio do campo, o qual deve ser feita apenas se o campo necessitar de maiores explicaes, o que na maioria das vezes no necessrio. Tab ndex - Utilizado para definir a ordem que o objeto ser selecionado quando o usurio navegar utilizando as teclas TAB e SHIFT+TAB.

Texto de Entrada
Configuramos o painel Accessibility da mesma forma que faramos na linguagem (X)HTML, onde indicado definir um "Name" - um rtulo para o campo de texto, para que o usurio saiba o que est preenchendo, e quando for necessrio coloque uma descrio no campo "Description", como por exemplo: "Campo obrigatrio". Alm destas duas opes ainda temos os campos: Shortcut - que serve para definir um atalho, um acesso rpido ao campo, o que feito definindo uma letra ou nmero, como por exemplo: "A". O atalho para o usurio ser a tela ALT juntamente com a letra ou nmero definido, no nosso exemplo o atalho "ALT + A".

18

Tab index - No caso de formulrios muito importante definir a ordem da tabulao para que o usurio tenha uma ordem lgica definida ao preencher os campos. Caso contrrio ele ficar preso ordem de criao dos campos.

Botes
O Boto tem as mesmas opes que foram vistas nos campos de texto, ento basta configur-lo da mesma forma, mas importante salientar a importncia de determinar o rtulo do boto no campo "Name" do painel Accessibility, para este boto do exemplo o Name seria "Voltar" e nos casos que forem necessrios determine a descrio no campo Description, aqui poderamos utilizar: "Clique para voltar para o slide anterior". Para botes com a funo de navegao de slides, como "Voltar" e "Avanar" importante definir corretamente o Tab index e um Shortcut.

Movie Clips
Como o MovieClip pode, desde ter a simples funcionalidade de um boto at ter a funo de recipiente de partes ou de toda uma animao, a opo "Make child objects accessible" permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem tambm estar com as suas opes de acessibilidade definidas.

19

CLASSE DEPTHCONTROL
Ela no foi documentada pela macromedia (como algumas outras) e nem pela Adobe, chama-se mx.behaviors.DepthControl.

Ela simplesmente controla os nveis (como o nome j diz) dos objetos no palco, e de uma forma bem mais fcil de utilizar do que swapDepths(); e getDepth(), pois com ela no importa o nmero do nvel em que o objeto est, voc s informa para onde o movieClip quer ir.

A utilizao simples, s fazer a chamada: mx.behaviors.DepthControl.bringToFront(MovieClip)

Os parmetros possveis de utilizao so: sendToBack(): O MovieClip vai para o menor nvel. bringToFront(): O MovieClip vai para o maior nvel. sendBackward(): Desce o MovieClip um nvel. bringForward(): Sobe o MovieClip um nvel. trackDepths(): Gera um array com os nveis superiores e inferiores ao MovieClip. Esse mtodo s pode ser acessado dentro da classe, pois por padro, definida como private.

20

Vamos a um exemplo

Em um novo filme do Flash desenhe trs objetos quaisquer, converta-os em MC e instancie-os como objeto_mc, objeto2_mc e objeto3_mc. Deixe cada um em sua prpria Layer. Crie tambm uma layer para as aes. Vamos programar nosso filme: //importando a classe DepthControl import mx.behaviors.DepthControl; objeto_mc.onPress=objeto2_mc.onPress=objeto3_mc.onPress function(){ //travar o mouse ao centro this.startDrag(); //utilizar uma funo da classe DepthControl DepthControl.bringToFront(this); this.play(); //ao soltar o mouse, destrava o objeto this.onRelease = function(){ this.stopDrag(); } } O legal interagir com vdeo, ou udio, ao clicar ele comear a tocar =

UTILIZANDO SWAPDEPTHS
SwapDepths faz parte da classe Movie Clip, o objetivo dele semelhante ao DepthControl, ou seja, permite alterar o nvel de empilhamento dos MCs dentro do palco.

Vamos a um exemplo: Crie em um novo filme do flash trs MCS como se fossem janelas, no caso eu criei dentro do MCS botes com efeitos no click e no over. Instanciei-os como green_mc, yellow_mc e blue_mc.

21

Crie tambm uma camada de aes e vamos ao nosso cdigo. //cria a funo de ao pressionar o mouse green_mc.onPress = function(){ //define que o clipe ser arrastvel this.startDrag(); //cria a varivel x e incrementa 2 _root.x+=2; // aplica SwapDepths no MC this.swapDepths(_root.x); } green_mc.onRelease = function(){ this.stopDrag(); } blue_mc.onPress = function(){ this.startDrag(); _root.x+=2; this.swapDepths(_root.x); } blue_mc.onRelease = function(){ this.stopDrag();

22

} yellow_mc.onPress = function(){ this.startDrag(); _root.x+=2; this.swapDepths(_root.x); } yellow_mc.onRelease = function(){ this.stopDrag(); }

COMPONENTE ACCORDION
Em um novo projeto do Flash arraste uma instncia do componente accordion para o palco.

Depois delete-o , temos que fazer isso para que o mesmo tenha fique apenas na biblioteca. Renomeie sua layer atual para AS e adicione a seguinte ao.

//Atachamos o filme da biblioteca attachMovie("Accordion","movie",1); //definimos o tamanho de nosso objeto movie.setSize(300,300); //Para criar os botes de nosso menu movie.createChild("View","opcao1",{label:"Flash CS3"}); movie.createChild("View","opcao2",{label:"Flex 3"});

23

movie.createChild("View","opcao3",{label:"AIR"}); movie.createChild("View","opcao4",{label:"Silverlight"});

Crie agora 4 MCs com o nome de mcs1, mcs2,mcs3,mcs4 Depois v at a biblioteca e exporte-os para actionscript com o mesmo nome.

Adicione agora o cdigo abaixo para que o contedo dos MCS aparea em nosso componente.

movie.opcao1.createChild("mcs1","mcs1_mc"); movie.opcao1.mcs1_mc.move(75,50); movie.opcao2.createChild("mcs2","mcs2_mc"); movie.opcao2.mcs2_mc.move(75,50); movie.opcao3.createChild("mcs3","mcs3_mc"); movie.opcao3.mcs3_mc.move(75,50); movie.opcao4.createChild("mcs4","mcs4_mc"); movie.opcao4.mcs4_mc.move(100,50);

Vamos personalizar alguns recursos de nosso menu.

24

Podemos adicionar imagens ao nosso menu , crie as imagens no tamanho de 300x20.

Converta as suas imagens para mcs com os nomes: menu01, menu02, menu03 e menu04. exporte-as tambm para actionscript com esses mesmos nomes.

Vamos inicialmente alterar nosso cdigo para exibir as imagens:

movie.createChild("View","opcao1",{icon:"menu01"}); movie.createChild("View","opcao2",{icon:"menu02"}); movie.createChild("View","opcao3",{icon:"menu03"}); movie.createChild("View","opcao4",{icon:"menu04"});

Vamos criar um efeito de elstico na mudana de links

//Criando o efeito de elstico import mx.transitions.easing.*; trace("_global.styles.Accordion="+_global.styles.Accordion); _global.styles.Accordion.setStyle("openDuration",2000); _global.styles.Accordion.setStyle("openEasing",Elastic.easeOut);

Algumas outras alteraes que podemos fazer

Colocando o menu na horizontal

//menu na horizontal movie._rotation=-90; movie._x=400; movie._y=400;

O que voc pode observar que o texto no acompanha a mudana. No caso

25

 necessrio quebrar os textos para corrigir isso.

GALERIA DE IMAGENS COM XML

Vamos neste exemplo criar uma galeria de fotos com boto de avanar e voltar que busca as imagens em um arquivo XML. Inicialmente crie uma pasta e dentro dela coloque as suas imagens, para o exemplo criei cinco imagens no tamanho de 400x300px. Depois crie o seguinte arquivo XML.
<?xml version="1.0" encoding="iso-8859-1"?> <galeria> <foto imagem="imagens/001.jpg" titulo="Tnis 01" legenda="Fantasia 01"/> <foto imagem="imagens/002.jpg" titulo="Tnis 02" legenda="Fantasia 02"/> <foto imagem="imagens/003.jpg" titulo="Notebook" legenda="Fantasia 03"/> <foto imagem="imagens/004.jpg" titulo="Celular" legenda="Fantasia 04"/> <foto imagem="imagens/005.jpg" titulo="Tnis 03" legenda="Fantasia 05"/> </galeria>

Abra um novo documento no flash com o tamanho de 400x300px, crie mais 2 layers e nomeie as trs com os seguintes nomes (obedecendo a seqncia):

Actions Botes Espao

Layer Espao: Crie um MovieClip em branco e arraste para o palco, no canto superior esquerdo, instanciando com o nome de espaco

26

Layer Botes: Crie uma barra com preenchimento de 50% na cor que desejar no tamanho 400x50px e coloque-o no canto inferior esquerdo. Crie os botes que sero para passar para a imagem anterior ou prxima imagem e instancie com os nomes: anterior e proximo respectivamente. Com o ferramenta de textos crie 2 campos dinmicos de texto, instanciados com os seguintes nomes: titulo e legenda. A imagem dever ficar parecida com esta.

Clique no primeiro quadro da camada actions e pressione F9. Adicione o seguinte cdigo.
//Utilizado para que o flash interprete os acentos System.useCodepage = true;

//Declarao das variveis e tipos var espaco:MovieClip; var anterior:Button; var proximo:Button; var titulo:TextField;

27

var legenda:TextField; var j:Number = 0;

//Declarao do XML var arquivo:XML = new XML(); //Arquivo que ser carregado arquivo.load("fotos.xml"); //Ignorar espaos em branco do XML arquivo.ignoreWhite = true; //funo responsvel pela exibio das imagens function carregaItens(num:Number) { //verifica a quantidade de tens do XML qteXml = arquivo.childNodes[0].childNodes.length; //quando for clicando e chegar ao final das imagens, carrega a primeira novamente if(j>=qteXml){ j=0; //quando for clicando e chegar ao incio das imagens, carrega a ltima } else if(j<0){ j=qteXml-1; } //carregar a imagem dentro do MovieClip "espaco" espaco.loadMovie(arquivo.childNodes[0].childNodes[j].attributes.imagem); //atribuindo o valor ao DynamicText "titulo" titulo.text = arquivo.childNodes[0].childNodes[j].attributes.titulo; //atribuindo o valor ao DynamicText "legenda" legenda.text = arquivo.childNodes[0].childNodes[j].attributes.legenda; } //funo para carregar o prximo tem function exProx(){ j++; carregaItens(j); } //funo para carregar o tem anterior function exAnt(){

28

j--; carregaItens(j); }

//carregar o primeiro item da galeria arquivo.onLoad = carregaItens; //eventos dos botes proximo.onRelease = exProx; anterior.onRelease = exAnt;

GOOGLE MAPS NO FLASH

Antes de ir para o Flash, precisamos primeiro baixar a API que ser usada. Tudo o que precisam fazer acessar o site da API do Google Maps para o Flash no site do Google Code. http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/ Na pgina, vocs encontraro a API atravs do seguinte link: http://maps.googleapis.com/maps/flash/release/sdk.zip

29

No arquivo ZIP da API, contm duas pastar, uma chamada docs, que contm toda a documentao sobre a API, e uma pasta chamada lib, contendo dois arquivos SWC, um para os usurios do Flex (map_flex_1_9a.swc) e outro para os usurios do Flash (map_1_9a.swc). Como vamos usar a API no Flash, precisamos copiar o arquivo map_1_9a.swc e jogar na pasta aonde esto os Componentes do Flash. O caminho para os usurios do Flash CS3 :

(Windows)

C:/Arquivos

de

Programas/Adobe/Adobe

Flash

CS3/linguagem/Configuration/Components (Mac OS X) Macintosh HD/Applications/Adobe Flash

CS3/Configuration/Components

Onde linguagem o nome da pasta da linguagem na qual o Flash foi instalado. Para os usurios do Flash CS4 e CS5 o caminho um pouco diferente:

(Windows)

C:/Arquivos

de

Programas/Adobe/Adobe

Flash

CS4/Common/Configuration/Components (Mac OS X) Macintosh HD/Applications/Adobe Flash

CS4/Common/Configuration/Components. A ltima coisa que precisaremos fazer antes de ir ao Flash, gerar uma chave para usar a API. A chave gerada para os usurios que possuem alguma conta no Google. Para gerar a chave, acessem a pgina:

http://code.google.com/intl/pt-BR/apis/maps/signup.html

Na pgina, vocs precisam Ler e concordar com os termos e condies do Google, e digitar o endereo do site no qual ir usar o Google Maps. Aps ter digitado o seu site, uma chave ser criada. Essa chave ser usada no ActionScript.

30

Criem um arquivo em ActionScript 3, abram o painel Components e joguem o Componente Google Maps Library para o palco. Se quiserem, podem remover o componente do palco pois no h necessidade de mante-lo j que criaremos o mapa atravs do ActionScript 3.

Ao excluirmos, ele continua instanciado na biblioteca.

Para esse tutorial, criaremos um exemplo bsico do Google Maps, exibindo os controles de Zoom e tipos de mapa e iniciando o mapa atravs de uma localizao usando Latitude e Longitude. Copiem e colem as seguintes aes no frame no qual desejam que o mapa aparea. /* Importa as Classes necessrias */ import com.google.maps.Map;

31

import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.LatLng; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.ZoomControl; import com.google.maps.overlays.Marker; /* Criamos uma instancia da Classe Map */ var map:Map = new Map(); /* Inserimos nossa chave */ map.key = "SUACHAVE"; /* Definimos um tamanho para o Mapa */ map.setSize(new Point(stage.stageWidth, stage.stageHeight)); /* Adiciona o controle de zoom */ map.addControl(new ZoomControl()); /* Adiciona o controle de tipo de mapa */ map.addControl(new MapTypeControl()); /* Adiciona o Mapa ao palco */ this.addChild(map); /* Adicionamos um eventListener chamando o evento MAP_READY */ /* Esse evento ser disparado quando o Mapa estiver pronto para ser exibido */ /* O evento chama a funo mapOk */ map.addEventListener(MapEvent.MAP_READY, mapOk); /* Funo chamada pelo evento MAP_READY */ function mapOk(event:MapEvent):void { /* Criamos uma instancia da Classe Marker */ /* Passamos o local no qual queremos que o mapa esteja marcado */ /* O local passado usando Latitude e Longitude */ var marca:Marker = new Marker(new LatLng(-23.5635963, -

46.6538854)); /* Adiciona a marca ao Mapa */

32

map.addOverlay(marca); /* Centraliza o Mapa de acordo com a posio desejada */ map.setCenter(new LatLng(-23.5635963, -46.6538854), 16,

MapType.NORMAL_MAP_TYPE); } Publique seu filme e o disponibilize no servidor.

GALERIAS CUER E TILTVIEW

Vamos agora entender como funcionam duas opes de galeria que usam XML e se tornaram comuns de vermos em site

Cuer
O Cu3er http://getcu3er.com/ e o TiltViewer http://simpleviewer.net/tiltviewer/

33

O cu3er permite gerar slide shows com sequncias de imagens listadas em um arquivo XML.

O exemplo o seguinte:

A organizao das pastas a seguinte.

O que precisamos trabalhar no arquivo XML, no caso o config.xml. Alm claro da pasta images. Abra o arquivo XML. Observe que as primeiras linhas so referentes aos botes de avanar e voltar.

34

As linhas de mudana de imagens iniciam a partir do bloco Slides.

Observe que para cada bloco de slide voc pode mudar a transition, o slicing a direo. O ideal para saber o que pode ser modificado consultar a documentao direto no site. http://www.progressivered.com/cu3er/docs/ ou em

http://docs.getcu3er.com/cu3er/

35

TiltViewer
O TiltViewer um excelente alternativa para galerias de fotos interessantes. Veja o exemplo:

O primeiro cuidado deixar as fotos do mesmo tamanho e dentro de uma pasta. Para definir as imagens que vo aparecer no aplicativo abra o arquivo XML.

36

Observe que as imagens so colocadas em um bloco <photos>...</photos>, no primeiro bloco define-se o caminho da foto e um link para a foto, o ttulo da imagem. Estas informaes aparecem quando se clica na imagem ampliada e ele vira a foto e mostra estas informaes.

37

No exemplo da terceira imagem possvel adicionar um CDATA para trabalharmos o HTML <description><![CDATA[Utilizando <u>Sublinhado</u>, <i>Itlico</i>, Cdigos Quebra HTML. de <b>Negrito</b>, linha<br>e <font

color="#ff0000" size="60">Cor da Fonte</font>. Links.]]></description>

38

Ele mostra 9 fotos de cada vez, se tivermos mais imagens, ser mostrado uma seta indicando que existem mais fotos.

Feito isso basta enviar seus arquivos e imagens para seu servidor

GALERIA COM BRIDGE

A Adobe possui um programa em sua sute de aplicativos chamado Bridge. Ele permite que voc possa visualizar e obter informaes de arquivos que existam em seu computador e que possam ser lidos pelo programas Adobe que voc tem em seu computador.

Navegue pela esquerda at a pasta onde esto as suas imagens. Na parte superior temos um item chamado OUTPUT clique sobre ele.

39

Na direita temos duas opes, PDF que permite gerar um folha de contato de suas imagens em PDF, como tambm Galerias WEB, clique no boto WEB Gallery. Observe que ele mostra na direita as configuraes para criao de sua galeria.

Para testar as galerias, selecione as fotos e clique em Preview in Browser.

40

Selecione um modelo de galeria, preencha os dados como nome da galeria , local a ser salvo,etc. Clique no boto SAVE ao final das configuraes. Ao final clique em OK Na pasta que especificou sero mostrados todos os arquivos necessrios para que sua galeria funcione.

Basta public-los em seu site.

41

Com isso finalizamos nossa apostila de Flash criando aplicaes Ricas, busque dentro do site do apostilando outras apostilas relacionadas ao Flash e outras tecnologias.

42