Flash

Formulrio E-mail Flash+PHP
Hoje, irei a mostrar a vocs como criar um formulrio de E-mail usando PHP e Flash. Irei mostrar como criar esse formulrio para os usurios do ActionScript 2 e do ActionScript 3. Pr requisitos para esse tutorial:

Flash CS3 usando ActionScript 3, Flash 8 ou Flash MX 2004 Conhecimento bsico de ActionScript 2 ou 3 Servidor que de suporte a PHP e a funo Mail
Criao do PHP
Antes de chegarmos a criao de nosso arquivo PHP, vocs precisam verificar se o servidor em que usam d suporte a funo mail do PHP. Para verificar isso, basta criar um arquivo PHP usando a funo mail, como no exemplo abaixo:
<?php mail("seu email@dominio.com.br", "assunto", "mensagem"); ?>
Aps a criao desse arquivo, hospedem ele em seu servidor visualize ele em seu browser. Se ao abrir o arquivo, nenhuma mensagem aparecer voc tem suporte a funo mail do PHP e pode criar um formulrio, se aparecer alguma mensagem de erro vocs no podero criar o formulrio. A imagem a seguir mostra o erro que exibido pelo PHP quando no tem suporte a funo mail.
Vocs podem estar se perguntando, porque tem servidor que no d suporte a funo mail do PHP. Simples, controle contra SPAM. Existem vrios usurios que aproveitam para ficar enviando mensagens sem que ns tenhamos conhecimento. Aos que podem usar a funo, vamos a criao do arquivo PHP que vai receber os dados vindos do Flash e enviar o E-mail. Salvem esse arquivo com o nome de contato.php.
<?php /* Valores enviados pelo Flash */ /* Para esse tutorial irei enviar 5 valores */ /* Fiquem livres a enviar quantos valores quiserem */ $nome = utf8_decode(@$_POST['nome']); $email = utf8_decode(@$_POST['email']); $cidade = utf8_decode(@$_POST['cidade']); $assunto = utf8_decode(@$_POST['assunto']); $mensagem = utf8_decode(@$_POST['mensagem']); $news = utf8_decode(@$_POST['news']); $programas = utf8_decode(@$_POST['programas']); /* Coloquem seu E-mail aqui */ $para = "seu email@dominio.com.br"; /* Aqui uma pequena verificao para evitar que enviem E-mails sem valores */ if ($nome != "" && $email != "" && $cidade != "" && $assunto != "" && $mensagem != "") { /* Montamos o E-mail */ /* Criei um exemplo bem simples de E-mail usando HTML */ /* Fiquem livres para modificar conforme desejam */ $corpo = '<html><head><title>'.$assunto.'</title></head><body>'; $corpo .= 'Nome: '.$nome.'<br />E-mai: '.$email.'<br />Quer receber a Newsletter:
'.$news.'<br />'; $corpo .= 'Programas usados: '.$programas.'<br />'; $corpo .= 'Cidade: '.$cidade.'<br />Assunto: '.$assunto.'<br />Mensagem: '.$mensagem; /* Aqui modificamos o tipo de E-mail para o formato HTML */ $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; /* Aqui mudamos o cabealho para exibir o E-mail de quem enviou */ $headers .= 'From:'. $email . "\r\n"; /* Por fim enviamos o E-mail com os dados recebidos do Flash */ mail($para, $assunto, $corpo, $headers); /* Retornamos um Ok para o Flash */ print 'erro=0'; /* Caso os campos no sejam preenchidos */ } else { /* Retorna o erro ao Flash */ print 'erro=1'; } ?>
Pulando para o Flash

Chegou a hora de ir para o Flash. Como disse no comeo do tutorial, esse tutorial serve tanto para usurios do ActionScript 3 quanto para usurios do ActionScript 2. Para esse tutorial comearei com um palco de tamanho 470300, criem duas camadas, aes e objetos.
Montem o layout que preferir para o Formulrio, a quantidade de campos livre, assim como o uso de Componentes. Vou aproveitar esse tutorial e mostrar como usar os Componentes ComboBox, CheckBox e RadioButtons. O layout que montei est abaixo, as linhas em vermelho so as instancias dos objetos, lembre-sem de colocar os objetos no primeiro frame da camada objetos.
Os botes possuem instancia de limpar_btn e enviar_btn respectivamente. Os CheckBoxs possuem instancia de dream_ch, fire_ch, flash_ch, illus_ch e photo_ch respectivamente.
Com os nossos objetos no palco, vamos ao ActionScript. Primeiro, aos usurios que usam o ActionScript 2. Colem as aes abaixo no primeiro frame da camada aes:
/* Criamos um Array para preencher o ComboBox cidades */ var cidades:Array = ["So Paulo", "Rio de Janeiro", "Belo Horizonte", "Porto Alegre", "Outra cidade"]; /* Preenchemos o ComboBox com os valores do Array */ cidade_cb.dataProvider = cidades; /* Criamos um Array para preencher o ComboBox assunto */ var assunto:Array = ["Dvidas", "Sugestes", "Elogios", "Reclamaes", "Outros"]; /* Preenchemos o ComboBox com os valores do Array */ assunto_cb.dataProvider = assunto; /* Criamos uma varivel para armazenar os valores do CheckBox selecionados */ var programas:String = new String(); /* Criamos uma instancia para a Classe LoadVars */ var envia:LoadVars = new LoadVars(); /* Ao clicar do boto enviar */ enviar_btn.onPress = function() { /* Verifica se preencheu o campo nome */ if (nome_txt.text == "") { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo Nome corretamente"; /* Verifica se preencheu o campo email */ } else if (email_txt.text == "") { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo E-mail corretamente"; } else if ((email_txt.text.indexOf("@") == -1 || email_txt.text.indexOf(".") == -1)) { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo E-mail corretamente"; /* Verifica se preencheu o campo mensagem */ } else if (mensagem_txt.text == "") { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo Mensagem corretamente"; /* Verifica se selecionou a opo sim ou opo no do RadioButton */ } else if (sim.selected == false && nao.selected == false) { /* Mostra a mensagem de erro */ status_txt.text = "Selecione Sim ou No"; /* Se tudo estiver ok */ } else { /* Envia para o PHP a variavel nome com os dados do campo nome */ envia.nome = nome_txt.text; /* Envia para o PHP a variavel email com os dados do campo email */ envia.email = email_txt.text; /* Envia para o PHP a variavel cidade com o valor selecionado no ComboBox cidade */ envia.cidade = cidade_cb.value; /* Envia para o PHP a variavel assunto com o valor selecionado no ComboBox assunto */ envia.assunto = assunto_cb.value; /* Envia para o PHP a variavel mensagem com os dados do campo mensagem */ envia.mensagem = mensagem_txt.text; /* Verifica se a opo sim foi selecionado no RadioButton */ if (sim.selected == true) { /* A opo sim foi selecionada */ /* Envia para o PHP a variavel news com o valor sim */ envia.news = "sim"; /* Verifica se a opo no foi selecionado no RadioButton */ } else if (nao.selected == true) { /* A opo nao foi selecionada */ /* Envia para o PHP a variavel news com o valor no */ envia.news = "no"; } /* Verifica se o CheckBox Dreamweaver foi selecionada */ if (dream_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Dreamweaver */
programas = "Dreamweaver, "; } /* Verifica se o CheckBox Fireworks foi selecionada */ if (fire_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Fireworks */ programas += "Fireworks, "; } /* Verifica se o CheckBox Flash foi selecionada */ if (flash_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Flash */ programas += "Flash, "; } /* Verifica se o CheckBox Illustrator foi selecionada */ if (illus_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Illustrator */ programas += "Illustrator, "; } /* Verifica se o CheckBox Photoshop foi selecionada */ if (photo_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor PhotoShop */ programas += "Photoshop."; } /* Envia para o PHP a variavel programas o valor da varivel programas */ envia.programas = programas; /* Avisa que est mandando o E-mail */ status_txt.text = "Enviando mensagem"; /* Enviamos as variveis ao PHP e carregamos a mensagem que vai vir do PHP */ envia.sendAndLoad("http://localhost/contato.php, envia, POST); } }; /* Assim que o PHP for carregado */ envia.onLoad = function(ok) { /* Se carregou tudo certinho */ if (ok) { /* Se deu tudo ok no PHP */ if (this.erro == 0) { /* Chamamos a funo limpa */ limpa(); /* Mostra mensagem de sucesso */ status_txt.text = Mensagem enviada com sucesso; } else { /* Mostra mensagem de erro */ status_txt.text = Erro ao enviar E-mail; } } }; /* Ao clicar do boto limpar */ limpar_btn.onPress = function() { /* Chamamos a funo limpa */ limpa(); }; /* Funo responsvel por limpar os campos do formulrio */ function limpa() { /* Zeramos a varivel programas */ programas = ; /* Apagamos os campos de texto */ nome_txt.text = ; email_txt.text = ; mensagem_txt.text = ; status_txt.text = ; /* Voltamos a selecionar o primeiro item dos ComboBox */ assunto_cb.selectedIndex = 0; cidade_cb.selectedIndex = 0;
/* Deixamos os RadioButtons no selecionados */ sim.selected = false; nao.selected = false; /* Deixamos os RadioButtons no selecionados */ dream_ch.selected = false; fire_ch.selected = false; flash_ch.selected = false; illus_ch.selected = false; photo_ch.selected = false; }
Agora para os usurios do ActionScript 3. Colem as aes abaixo no primeiro frame da camada aes.
/* Importamos a Classe DataProvider */ import fl.data.DataProvider; /* Criamos um Array para preencher o ComboBox cidades */ var cidades:Array = ["So Paulo", "Rio de Janeiro", "Belo Horizonte", "Porto Alegre", "Outra cidade"]; /* Preenchemos o ComboBox com os valores do Array */ cidade_cb.dataProvider = new DataProvider(cidades); /* Criamos um Array para preencher o ComboBox assunto */ var assunto:Array = ["Dvidas", "Sugestes", "Elogios", "Reclamaes", "Outros"]; /* Preenchemos o ComboBox com os valores do Array */ assunto_cb.dataProvider = new DataProvider(assunto); /* Criamos uma varivel para armazenar os valores do CheckBox selecionados */ var programas:String = new String(); /* Criamos uma instancia da Classe URLVariables */ var variaveis:URLVariables = new URLVariables(); /* Criamos uma instancia da Classe URLRequest */ var objEnvia:URLRequest = new URLRequest(); /* Criamos uma instancia da Classe URLLoader */ var objRecebe:URLLoader = new URLLoader(); /* Adicionamos um listener ao boto limpar */ limpar_btn.addEventListener(MouseEvent.MOUSE_DOWN, limparPress); /* Funo disparada quando se clica no boto limpar */ function limparPress(event:MouseEvent):void { /* Chamamos a funo limpa */ limpa(); } /* Adicionamos um listener ao boto enviar */ enviar_btn.addEventListener(MouseEvent.MOUSE_DOWN, enviarPress); /* Funo disparada quando se clica no boto enviar */ function enviarPress(event:MouseEvent):void { /* Verifica se preencheu o campo nome */ if (nome_txt.text == "") { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo Nome corretamente"; /* Verifica se preencheu o campo email */ } else if (email_txt.text == "") { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo E-mail corretamente"; /* Verifica se preencheu o campo mensagem */ } else if ((email_txt.text.indexOf("@") == -1 || email_txt.text.indexOf(".") == -1)) { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo E-mail corretamente"; } else if (mensagem_txt.text == "") { /* Mostra a mensagem de erro */ status_txt.text = "Preencha o campo Mensagem corretamente"; /* Verifica se selecionou a opo sim ou opo no do RadioButton */ } else if (sim.selected == false && nao.selected == false) { /* Mostra a mensagem de erro */ status_txt.text = "Selecione Sim ou No"; /* Se tudo estiver ok */ } else { /* Envia para o PHP a variavel nome com os dados do campo nome */ variaveis.nome = nome_txt.text;
/* Envia para o PHP a variavel email com os dados do campo email */ variaveis.email = email_txt.text; /* Envia para o PHP a variavel cidade com o valor selecionado no ComboBox cidade */ variaveis.cidade = cidade_cb.value; /* Envia para o PHP a variavel assunto com o valor selecionado no ComboBox assunto */ variaveis.assunto = assunto_cb.value; /* Envia para o PHP a variavel mensagem com os dados do campo mensagem */ variaveis.mensagem = mensagem_txt.text; /* Verifica se a opo sim foi selecionado no RadioButton */ if (sim.selected == true) { /* A opo sim foi selecionada */ /* Envia para o PHP a variavel news com o valor sim */ variaveis.news = "sim"; /* Verifica se a opo no foi selecionado no RadioButton */ } else if (nao.selected == true) { /* A opo nao foi selecionada */ /* Envia para o PHP a variavel news com o valor no */ variaveis.news = "no"; } /* Verifica se o CheckBox Dreamweaver foi selecionada */ if (dream_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Dreamweaver */ programas = "Dreamweaver, "; } /* Verifica se o CheckBox Fireworks foi selecionada */ if (fire_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Fireworks */ programas += "Fireworks, "; } /* Verifica se o CheckBox Flash foi selecionada */ if (flash_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Flash */ programas += "Flash, "; } /* Verifica se o CheckBox Illustrator foi selecionada */ if (illus_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor Illustrator */ programas += "Illustrator, "; } /* Verifica se o CheckBox Photoshop foi selecionada */ if (photo_ch.selected == true) { /* A opo foi selecionada */ /* Armazena na varivel programas o valor PhotoShop */ programas += "Photoshop."; } /* Envia para o PHP a variavel programas o valor da varivel programas */ variaveis.programas = programas; /* Avisa que est mandando o E-mail */ status_txt.text = "Enviando mensagem"; /* Dizemos que os dados a serem enviados est na varivel variaveis */ objEnvia.data = variaveis; /* Usaremos o mtodo POST */ objEnvia.method = URLRequestMethod.POST; /* Passamos o endereo a ser enviado */ objEnvia.url = "http://localhost/contato.php; /* Dizemos que os dados sero do tipo texto */ objRecebe.dataFormat = URLLoaderDataFormat.TEXT; /* Enviamos as variveis ao PHP */ objRecebe.load(objEnvia); /* Adicionamos um listener a variavel objRecebe */ /* O listener ser disparado quando terminar de carregar o arquivo PHP */
objRecebe.addEventListener(Event.COMPLETE, onLoadRecebe); } } /* Quando o arquivo PHP for carregado */ function onLoadRecebe(event:Event):void { /* Recupera a mensagem que ser enviada pelo PHP */ var resultado:URLVariables = new URLVariables(event.currentTarget.data); /* Se deu tudo ok no PHP */ if (resultado.erro == 0) { /* Chama a funo limpa */ limpa(); /* Exibe mensagem de sucesso */ status_txt.text = Mensagem enviada com sucesso.; } } /* Funo que limpa os campos do formulrio */ function limpa() { /* Zeramos a varivel programas */ programas = ; /* Apagamos os campos de texto */ nome_txt.text = ; email_txt.text = ; mensagem_txt.text = ; status_txt.text = ; /* Voltamos a selecionar o primeiro item dos ComboBox */ assunto_cb.selectedIndex = 0; cidade_cb.selectedIndex = 0; /* Deixamos os RadioButtons no selecionados */ sim.selected = false; nao.selected = false; /* Deixamos os RadioButtons no selecionados */ dream_ch.selected = false; fire_ch.selected = false; flash_ch.selected = false; illus_ch.selected = false; photo_ch.selected = false; }
Abaixo, um exemplo de como ser o E-mail que voc receber por quem usar o formulrio.
Consideraes finais
Espero que tenha conseguido tirar a dvida dos que sempre tentaram criar um formulrio mas nunca conseguiam, o erro mais comum no ter suporte a funo mail do PHP, por isso no funcionavam achando sempre que o problema estava no Flash quando o problema era o PHP.
Menu DropDown Animado

Data de publicao: 24-04-2008
Visitas: 3341
Francisco Colunistas desde: 2007 Matrias publicadas: 24
Passo 1 Com um novo documento Flash aberto, comearemos criando o efeito que aplicaremos quando o mouse passar sobre (over) um item de submenu. Crie um Smbolo de MovieClip e nomeie-o como Efeito Submenu. Passo 2 Crie uma nova layer e nomeie as duas existentes como AS e Retngulo. Passo 3 Com o frame 1 da layer Retngulo selecionado, clique na Rectangle Tool (R) e desenhe um retngulo sem contorno (stroke) com 100px de largura e 20px de altura, posicionando-o em X: 0 e Y: 0 atravs do painel Properties. Passo 4 Clique no frame 1 da layer Retngulo e altere a altura (H) do retngulo que acabamos de desenhar nela para 1 e posicione-o em Y: 10. Passo 5 Crie um Tween Shape entre o frame 1 e 6 da layer Retngulo. Passo 6 Crie um keyframe no frame 6 da layer AS e inclua o seguinte comando nele: stop(); Pronto, nosso efeito MouseOver est finalizado e utilizaremos mais adiante. Passo 7 Crie um Smbolo de Boto e denomine-o Subitem 1. Passo 8 Crie mais uma layer e renomeie as duas agora existentes como Texto e Hit e Efeito Over. Crie novos keyframes no frame Hit da layer Texto e Hit e no frame Over da layer Efeito Over. Passo 9
Clique no frame Up da layer Texto e Hit, selecione a Text Tool e digite o Static Text: Subitem 1, posicionando-o em X: 0 e Y: 0. Passo 10 Clique no frame Hit da layer Texto e Hit, selecione a Rectangle Tool e desenhe um retngulo com 100px de largura e 20px de altura posicionando-o em X: 0 e Y: 0 atravs do painel Properties. Passo 11 Crie um keyframe no frame Over da layer Efeito Over e arraste uma instncia do MC (MovieClip) Efeito Submenu que criamos inicialmente, posicionando-o em X: 0 e Y:0.
Passo 12 Duplique o boto Subitem1 e altere seu nome e texto para Subitem2. Analogamente, crie o boto Subitem3. Agora temos 3 botes que usaremos a seguir.
Passo 13 Crie um novo smbolo MC e nomeie-o como Submenu. Crie 5 novas layers e denomine-as como: Subitem 1, Trao 1, Subitem 2, Trao 2, Subitem 3 e Base. Passo 14 Clique no frame 1 da layer Subitem 1 e arraste uma instncia do boto Subitem1 para o Stage, posicionandoo em X: 0 e Y: 0. Siga procedimento anlogo para os botes Subitem2 e Subitem3, modificando apenas suas posies Y, respectivamente para 20 e 40.
Passo 15 Nas layers Trao 1 e Trao 2, com o auxlio da Line Tool (N), desenhe os traos divisrios com espessura (stroke) 1 e comprimento (W) 100. Posicione-os em X:0 e Y: 20 e X:0 e Y:40, respectivamente. Passo 16 Com o auxlio da Rectangle Tool (R), crie um retngulo, sem contorno (stroke), com 100px de largura (W) e 60px de altura (H) no frame 1 da layer Base, posicionando-o em X: 0 e Y: 0.
Passo 17 Crie um novo smbolo MC e nomeie como Item Notcias. Crie mais uma layer e renomeie-as para Texto e Base. Passo 18 Na layer Texto, com a Text Tool (T), insira o texto Notcias ( nosso item principal do menu) e posicione-o em X: 24 e Y: 1. Na layer Base, com o Rectangle Tool (R), desenhe um retngulo, sem contorno (stroke), com 100px de largura (W) e 20px de altura (H), posicionando-o em X: 0 e Y: 0.
Passo 19 Crie um novo smbolo MC e nomeie como Menu Notcias. Crie mais duas layers e renomeie-as para: Ttulo, Mscara e Subitens. Passo 20
No frame 1 da layer Ttulo, arraste uma instncia do mc Item Notcias para a posio X: 0 e Y:0. Atribua hit como nome de instncia deste objeto.
Passo 21 Clique no frame 1 da layer Mscara e com a Rectangle Tool (R), desenhe um retngulo, sem contorno (stroke), com 100px de largura (W) e 60px de altura (H), posicionando-o em X: 0 e Y: 20. Passo 22 Clique no frame 1 da layer Subitens e arraste uma instncia do MC Submenu para o Stage, posicionando-a em X: 0 e Y: -60. Atribua drop como nome de instncia deste objeto.
Passo 23 Transforme a layer Mscara em uma mscara.
Passo 24
Antes de prosseguirmos, vamos alterar um pequeno detalhe: no menu File > Publishing Settings (Ctrl+Shift+F12), na aba Flash, altere Actionscript version para Actionscript 2.0. Passo 25 Clique no mc Item Notcias, e altere o instance behavior para Button. A seguir, tecle F9 e digite o cdigo a seguir:
on (rollOver) { if (!drop.roll) { drop.roll = true; } else { drop.roll = false; } } Passo 26 Clique no mc Submenu, tecle F9 e digite o cdigo a seguir: onClipEvent (load) { roll = false; menu = false; open = false; this._visible = false; y_start = this._y; y_stop = 20; y_max = y_stop+this._height; } onClipEvent (enterFrame) { mouse_x = _parent._xmouse; mouse_y = _parent._ymouse; menu_left = this._x; menu_right = this._x+this._width; menu_top = 0; menu_bottom = this._y+this._height; if (menu_left<mouse_x && mouse_x<menu_right && menu_top<mouse_y && mouse_y<menu_bottom) { menu = true; } else {
menu = false; }// end if if ((roll || open) && (!open || menu)) { this._visible = true; speed = (y_max-menu_bottom)*0.500000; if (y_stop-1<this._y) { this._y = y_stop; open = true; roll = false; } else { _y = _y+speed; }// end if } // end if if (open && !menu) { speed = (y_max-menu_bottom)*0.700000+1; if (this._y<y_start+1) { _y = y_start; open = false; this._visible = false; } else { _y = _y-speed; }// end if } // end if Nosso item de menu est pronto para usar. Passo 27 V para a Scene 1, arraste o mc Menu Notcias para o Stage, tecle Ctrl+Enter para ver o item de menu funcionando. Utilize esse mesmo procedimento para criar os outros itens de menu, tomando o cuidado para que as bases (retngulos de fundo dos itens de menu) tenham o mesmo tamanho (aqui usamos largura 100px, lembrase?), pois caso contrrio haver sobreposio dos itens do submenu.
Fazendo um relgio em flash com Actionscript 2.0

Data de publicao: 19-04-2008 Visitas: 1864
Jean Carlos Colunistas desde: 2008 Matrias publicadas: 4 Bom, primeiramente devemos entender como vai funcionar nosso relgio, ele ser digital e analgico, no digital alm de mostrar a hora tambm ir exibir o dia da semana e a data. Para comearmos a fazer nosso relgio, primeiro temos que fazer o desenho, podemos usar o prprio flash ou qualquer editor de imagem. Depois de feito o desenho do relgio, vamos criar cinco campos de texto dinmicos, instanciados como hora_txt, minuto_txt, segundo_txt, semana_txt e dia_txt, aps isso vamos instanciar os ponteiros, ponteiro_hora, ponteiro_minuto e ponteiro_segundo. Obs.: O ponto de registro dos ponteiros tem que estar como centralizado inferior. Actionscript O relgio ser feito em um nico frame, ento devemos fazer para que o aplicativo atualize o tempo todo naquele nico frame, para isso vamos usar o onEnterFrame que ir atualizar o cdigo infinitamente, enquanto o relgio estiver aberto. this.onEnterFrame = function() { }; Todo nosso cdigo ira ficar dentro dessa funo. Dentro da funo vamos criar as variveis onde iro conter os valores para que o relgio funcione. this.onEnterFrame = function() {
var horario:Date = new Date(); hora = horario.getHours(); minuto = horario.getMinutes(); segundo = horario.getSeconds(); }; Dentro da funo foram inseridas quatro variveis, onde a primeira recebe todos os valores da propriedade Date();, na segunda varivel de nome hora vai receber o valor getHours(); da varivel horario, a varivel minuto receber o valor getMinutes(); e segundo receber getSeconds(); tambm da varivel horario. Agora vamos chamar as variveis nas entrncias dos ponteiros para ele funcionar, ficando assim: this.onEnterFrame = function() { var horario:Date = new Date(); hora = horario.getHours(); minuto = horario.getMinutes(); segundo = horario.getSeconds(); _root.ponteiro_hora._rotation = hora * 30; _root.ponteiro_minuto._rotation = minuto * 6; _root.ponteiro_segundo._rotation = segundo * 6; }; A instancia ponteiro_hora recebe a varivel hora que e multiplicada por 30. Para que o ponteiro_hora d uma volta completa a cada 12 horas, vamos dividir 360 por 12 que e igual a 30, o mesmo ser usado para os ponteiros minuto e segundo, s que ao invs de ser dividido por 12 ser divido por 60 que ser igual a 6. A instancia ponteiro_minuto recebe a varivel minuto e a instancia ponteiro_segundo recebe a varivel segundo que so multiplicadas por 6. Nosso relgio analgico est pronto. Agora vamos fazer a programao do relgio digital. Para o digital funcionar, vamos chamar as variveis hora, minuto e segundo nas instancias hora_txt, minuto_txt e segundo_txt, ficando assim: this.onEnterFrame = function() { var horario:Date = new Date(); hora = horario.getHours(); minuto = horario.getMinutes(); segundo = horario.getSeconds(); //Analgico _root.ponteiro_hora._rotation = hora * 30; _root.ponteiro_minuto._rotation = minuto * 6; _root.ponteiro_segundo._rotation = segundo * 6; //Digital _root.hora_txt.text = hora; _root.minuto_txt.text = minuto; _root.segundo_txt.text = segundo; };
Bom, basicamente nosso relgio j est pronto! Mas agora falta fazer o relgio exibir o dia da semana e a data, para fazer isso vamos utilizar um lao de repetio switch para verificar o dia da semana e exibir na caixa de texto. Primeiro vamos criar uma varivel onde ira buscar o valor getDay();, assim: semana = horario.getDay(); switch (semana) { case 1 : _root.semana_txt.text = Segunda; break; case 2 : _root.semana_txt.text = Tera; break; case 3 : _root.semana_txt.text = Quarta; break; case 4 : _root.semana_txt.text = Quinta; break; case 5 : _root.semana_txt.text = Sexta; break; case 6 : _root.semana_txt.text = Sbado; break; default : _root.semana_txt.text = Domingo; break; } Dentro de cada case a instancia semana_txt recebe da varivel semana um texto correspondente a cada dia da semana de acordo com o numero. Ex.: 1 = segunda, 2 = tera etc Agora s falta colocar o dia. Para isso vamos criar uma varivel chamada dia onde recebera o valor getDate da varivel horrio. E colocar o valor da varivel dia na instancia dia_txt, ficando assim: dia = horario.getDate(); _root.dia_txt.text = dia; Nosso cdigo completo: this.onEnterFrame = function() { var horario:Date = new Date(); hora = horario.getHours(); minuto = horario.getMinutes(); segundo = horario.getSeconds(); //Analgico _root.ponteiro_hora._rotation = hora * 30; _root.ponteiro_minuto._rotation = minuto * 6; _root.ponteiro_segundo._rotation = segundo * 6;
//Digital _root.hora_txt.text = hora; _root.minuto_txt.text = minuto; _root.segundo_txt.text = segundo; //Semama semana = horario.getDay(); switch (semana) { case 1 : _root.semana_txt.text = Segunda; break; case 2 : _root.semana_txt.text = Tera; break; case 3 : _root.semana_txt.text = Quarta; break; case 4 : _root.semana_txt.text = Quinta; break; case 5 : _root.semana_txt.text = Sexta; break; case 6 : _root.semana_txt.text = Sbado; break; default : _root.semana_txt.text = Domingo; break; } // Dia dia = horario.getDate(); _root.dia_txt.text = dia; };
Globo Rodando
Passo 1 Abra o Flash e inicie um novo projeto com o tamanho e configuraes de frame rate que desejar (eu usei 12 fps). Passo 2 Encontre uma imagem de um globo e a importe (Ctrl+R) para o Flash. Voc pode copiar a imagem a seguir, se quiser.
Passo 3
Com o globo selecionado, pressione Ctrl+B (Break Apart) para separar as partes da imagem. Crie uma nova layer acima da layer 1, selecione-a e desenhe um crculo pouco menor que o tamanho do globo.
Passo 4 Use a Selection Tool (V) e d um clique duplo na layer 1 para renome-la como globo. Passo 5 D um clique duplo na layer 2 e renomeie-a como mapa mundi. Passo 6 Importe a imagem do mapa mundi a seguir para o Flash (selecione a layer mapa mundi e pressione Ctrl+R para import-la para o Stage, ou atravs do menu, File > Import to Stage).
Passo 7 Pressione Alt+Shift para duplicar a imagem e reposicione-a para que fique como segue.
Passo 8
Selecione as duas imagens do mapa mundi, pressione F8 (Convert to Symbol) para convert-las num smbolo de MovieClip.
Passo 9 Clique sobre a Selection Tool (V) e d um clique duplo no MC no Stage. Agora voc est dentro do MC.
Passo 10 Enquanto os mapa mundis esto ainda selecionados, pressione novamente F8 para convert-los em um Smbolo Grfico.
Passo 11 Clique no frame 30 e pressione F6. Ento, usando o mouse ou as teclas de direo, posicione o mapa_mundi_gr como a seguir:
Passo 12 D um clique com o boto direito do mouse em qualquer frame entre os dois keyframes na timeline e opte por Create Motion Tween no menu de contexto. Passo 13
Crie uma nova layer, clique no frame 30 e pressione F6 e abra o Action Script Panel (F9). Digite o seguinte cdigo: gotoAndPlay(1); Passo 14 Volte para a cena principal (Scene 1). Passo 15 Crie uma nova layer acima da mapa mundi e nomeie-a como crculo. Trave-a e oculte a layer do mapa mundi, selecione a layer 3 e clique na Oval Tool (O). Para cor de contorno (Stroke), escolha nenhuma, para cor de preenchimento (Fill) escolha uma qualquer e desenhe um crculo um pouco menor que o crculo do globo. Selecione a layer crculo e a converta em uma mscara (clique com o boto direito do mouse sobre ela e escolha a opo correspondente)
Passo 16 Oculte a layer mapa mundi. Passo 17 Crie uma layer acima da layer crculo e nomeie-a como brilho. Passo 18 Selecione novamente a Oval Tool (O), desenhe um crculo com aproximadamente 10030 pixels posicionado sobre o globo. Com o crculo ainda selecionado, abra o Color Mixer Panel (Shift+F9) e configure como segue:
Passo 19 Tecle Ctrl+Enter para ver o efeito final.
Galeria de Imagens ActionScript 3

Ol Comunidade. Nesse meu primeiro tutorial voltado aos usurios do Flash CS3 e do ActionScript 3, irei mostrar criar uma Galeria de Imagens com XML. Essa galeria possui o mesmo efeito usado em um tutorial que fiz um tempo atrs usando ActionScript 2. Esse tutorial para mostrar e ensinar algumas coisas sobre o ActionScript 3. Aos que nunca fizeram o tutorial, eis o link:
Galeria de Imagens com XML ActionScript 2 Pr-requisitos para esse tutorial

Flash CS3 usando ActionScript 3 Conhecimento bsico de ActionScript 2 ou 3
Outro requisito para esse tutorial ler uma matria que eu fiz sobre as mudanas do ActionScript 3. Nesse artigo vocs encontraro as principais mudanas e vo ajudar e muito no entendimento desse tutorial:
Algumas diferenas e novidades no ActionScript 3

Criando o XML
Vamos ao XML que conter nossas Imagens e seus ttulos. Salve o arquivo com o nome de imagens.xml.
<?xml <imagens> <foto> <imagem>imagem.jpg</imagem> <texto>Moto </foto> <foto> <imagem>imagem1.jpg</imagem> <texto>Mclaren </foto> <foto> <imagem>imagem2.jpg</imagem> <texto>Capacete </foto> <foto> <imagem>imagem3.jpg</imagem> <texto>Ferrari </foto> <foto> <imagem>imagem4.jpg</imagem> <texto>Loro</texto> </foto> <foto> <imagem>imagem5.jpg</imagem> <texto>Trator </foto> <foto> <imagem>imagem6.jpg</imagem> <texto>Carroa </foto> </imagens> antiga</texto> do Stio</texto> Shumacher</texto> Senna</texto> do Senna</texto> Ayrton Senna</texto> version="1.0" encoding="utf-8"?>
Criando nossa Galeria
Vamos criar nossa galeria. Voc poder fazer da maneira que desejar. Comecei com um palco com dimenes de 550420. Os nome em Vermelho so os nomes de instncia de cada objeto.
holder: MovieClip em branco borda: MovieClip com um retngulo desenhado dentro dele preloader: MovieClip com uma barra desenhado dentro dele porcento: campo de texto dinamico ant: MovieClip para servir como boto prox: MovieClip para servir como boto texto: campo de texto dinamico Os objetos podem posicionados em qualquer camada de seu arquivo, s tomem cuidado para posicionar o MovieClip holder acima do MovieClip borda. Uma coisa muito importante. Quando criar o MovieClip borda, ele tem que ter seu ponto de registro no meio. Como na Imagem:
Com nossos MovieClips criados e instanciados vamos ao ActionScript. Coloquem isso no frame dos os objetos criados anteriormente:
/* import import /* /* var /* var Criamos Importamos Criamos uma a Classe varivel uma responsvel para pelos o eventos total = para = a Classe new import armazenar total:Number instancia dadosXML:XML da de Importamos a Classe Tween */
fl.transitions.Tween; fl.transitions.easing.*; Classe fotos no XML Tween XML */ */ */ XML(); fl.transitions.TweenEvent; undefined;
/* /* var /* var /* /* var /* /* /* /* /* /*
Criamos Essa Criamos Criamos Essa Adiciono O evento Quando
uma Classe
instancia vai para
para carregar = saber para a
Classe nossas new
Loader imagens foto atual
*/ */ */ 0; */ */ */ */ */ */
loader:Loader uma ima Classe um ser varivel fotoAtual:Number instancia vai
Loader();
qua
a = Classe
URLoader XML URLLoader arquivo XML monta
carregar = para a a
nosso new da a instancia de chama arquivo
arquivo Classe o funo XML arquivo XML no primeira
carregaXML:URLLoader EventListener chamado de quando
URLLoader();
terminar
carregar
terminar Carregegamos
carregar, o ao nosso carregar
carregaXML.addEventListener(Event.COMPLETE, carregaXML.load(new Funo chamada o arquivo new o total = Chama a funo mostraImagem chamando a de fotos function Armazenamos = Armazenamos dadosXML /* total /* } /* /* /* /* /* /* /* loader.load(new /* /* Carregamos Deixamos o a imagem MovieClip holder.addChild(loader); holder com = alpha igual a Funo responsvel por carregar imagem para a as imagens j da do carregada Classe mostraImagem(0); monta(event:Event)
monta); URLRequest("imagens.xml")); XML */ { */ XML imagem */ */ XML(event.target.data); dadosXML.foto.length();
XML
*/ { */ */ */ */ */ */
function Descarrega Adiciono Quando Adiciono Quando o o um loader.unload();
mostraImagem(atual:Number):void qualquer EventListener for
instancia chamar a
Loader
/* Esse listener ser acionado sempre que a imagem estiver sendo carregada */ listener um acionado, para a funo da loadProgress Loader loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, EventListener for instancia chamar a dentro do a loadProgress);
Classe
/* Esse listener ser acionado assim que a imagem terminar de ser carregada */ listener Carregamos acionado, funo imagem MovieClip holder 0 loadComplete loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
URLRequest(dadosXML.foto.imagem[atual])); */ */ 0;
holder.alpha */ /* Removemos o evento CLICK dos
/* Usamos o removeEventListener para desativar o evento CLICK da Classe MouseEvent MovieClips prox e ant */
prox.removeEventListener(MouseEvent.CLICK,
proxPress);
ant.removeEventListener(MouseEvent.CLICK, /* Desativamos os botes = = responsvel uma uma o por exibir o progresso para para saber = preloader = a = responsvel o = o MovieClip = = new new borda para para o mesmo poder "width", 1, Tween(borda, o new new Tween(holder, Tween(holder, o = new o = o = new new "height", 1, MovieClip "x", 1, = "y", 1, MovieClip Tween(ant, "y", 1, MovieClip Tween(prox, campo de "y", 1, texto "y", 1, prox Back.easeOut, ant Back.easeOut, Back.easeOut, holder.y, Back.easeOut, holder holder.x, = Back.easeOut, 16px por porcentagem conforme a do carregamento quando tamanho da da ant e prox.enabled ant.enabled } /* /* var /* var /* Modifica carregada preloader.scaleX /* } /* /* texto.text /* /* var var /* var var /* var /* var /* var Aumentamos tww:Tween twh:Tween Acrescentamos Funo exibir texto a da tamanho fazer do imagem Exibe porcento.text carregada Criamos Funo
antPress); prox */ false; false; imagem */ { carregou imagem estiver */ */ sendo */ carregado/tamanho; */ Math.round(carregado/tamanho*100)+"%"; carregada imagem MovieClip uma holder */ { */ */ */ true); borda.height, true); */ borda.xtrue); borda.ytrue); */ ant.y, true); */ prox.y, true); dinamico */ texto.y, true); Back.easeOut, Event.bytesLoaded; o Event.bytesTotal; imagem
function Criamos
loadProgress(Event:ProgressEvent) varivel varivel do saber = carregado:Number tamanho:Number tamanho MovieClip
function Mostramos
loadComplete(event:Event)
dadosXML.foto.texto[fotoAtual]; borda
Tween(borda,
Back.easeOut,
borda.width,
holder.width+16, holder.height+16, Movemos twhx:Tween twhy:Tween
holder.width/2, holder.height/2, Movemos twant:Tween Movemos twpro:Tween Movemos twtxt:Tween
(borda.y+holder.height/2)+8,
(borda.y+holder.height/2)+8, Tween(texto,
(borda.y+holder.height/2)+8+ant.height,
/* Adicionamos um EventListener para uma das instancias da Classe Tween criadas */ /* Esse listener ser disparado assim que o MovieClip holder terminar de se mover */ /* Quando o listener for acionado, chamar a funo termina */
twhx.addEventListener(TweenEvent.MOTION_FINISH, } /* /* /* /* var /* */ /* } /* /* Funo chamada quando o os MovieClip holder tiver um alpha de Quando o listener for acionado, chamar a funo Funo chamada quando o o o efeito new um texto em MovieClip holder MovieClip = do = um = alpha "alpha", para a ao MovieClip 0, da campo porcento terminar de ser
termina); movido */ { preloader */ 0; */ ""; holder 1, 1, Tween */ true); */ Regular.easeOut, instancia
function Escondemos Apagamos Damos twha:Tween Adicionamos preloader.scaleX porcento.text
termina(Event:TweenEvent)
Tween(holder, EventListener
Classe
/* Esse listener ser disparado assim que o MovieClip holder tiver um alpha de 100% alphaTerminou */
twha.addEventListener(TweenEvent.MOTION_FINISH,
alphaTerminou); 100% */ { novamente */ antPress); prox e ant */ true; true; proxPress);
function Adicionamos
alphaTerminou(Event:TweenEvent) EventListener
prox.addEventListener(MouseEvent.CLICK, ant.addEventListener(MouseEvent.CLICK, /* Habilitamos os MovieClips = = um ser EventListener disparado for para que os o MovieClips Mouse for a prox e prox.enabled ant.enabled } /* /* /* Adicionamos Esse listener o Quando
ant eles
*/ */ */
assim
clicado funo
sobre
listener
acionado,
chamar
mudaImagem
prox.addEventListener(MouseEvent.CLICK, ant.addEventListener(MouseEvent.CLICK, /* /* Usando a propriedade a buttonMode ter a fazemos = = que se a foto carrega atual a a uma menor < varivel funo que outra o total com que do os Passem mozinha
proxPress); antPress); MovieClips Mouse */ */ true; true; imagem de imagens */ { */ { */ */
prox.buttonMode ant.buttonMode /* function /* if /* /* } } function fotoAtual++; Chama Verifica (fotoAtual Incrementamos Funo
proxPress(event:MouseEvent):void (total-1)) fotoAtual mostraImagem
mostraImagem(fotoAtual);
antPress(event:MouseEvent):void
/* if /*
Verifica
se
foto a a
atual >
maior 0)
que
*/ { */ */
(fotoAtual Decrementa Chama
varivel funo
fotoAtual mostraImagem
fotoAtual--; /* } } mostraImagem(fotoAtual);
Consideraes Finais
O objetivo desse tutorial fazer uma comparao da mesma galeria feita em ActionScript 2 dessa vez usando o ActionScript 3, ver quais funes mudaram, novas regras, etc. No entrei em muitos detalhes sobre algumas funes pois esse no era o ojetivo principal, entrarei com mais detalhes em futuros tutoriais usando o ActionScript 3. Uma dica aos que querem comear a aprender ActionScript 3, pegue seus projetos, tutoriais e aplicaes feitas em ActionScript 2 tentem converter para o ActionScript 3. Apesar das novidades, no to complicado aprender se j tiver uma base no ActionScript 2, vocs iro se surpreender.
Carregar swf externo com AS3 CARREGAR SWF EXTERNO COM AS3
Neste tutorial veremos como carregar um swf externo com o AS3, pois o LoadMovie no mais suportado nesta verso do ActionScript.
O logotipo o swf externo que foi carregado dentro de um outro swf que denominei carregador.
Passo 1
Crie um novo documento Flash (fla) com as dimenses 550400 px.
Passo 2
Crie uma layer e nomeie as duas do seu arquivo como AS e Fundo.
Passo 3
Selecione o primeiro frame da layer AS (clique nele), abra o painel Actions (tecle F9) e digite o seguinte cdigo: 1. // cria uma instncia do Loader 2. var carregador:Loader = new Loader(); 3. // armazena na varivel arquivo o nome do swf externo a ser carregado 4. var arquivo:String = arquivoExterno.swf; 5. // cria uma instncia do URLRequest, que carregar o swf armazenado na varivel arquivo 6. var requisicao:URLRequest = new URLRequest(arquivo); 7. // define onde o swf exteno ser carregado 8. carregador.x = 175; 9. carregador.y = 80; 10. // Carrega o swf solicitado 11. carregador.load(requisicao); 12. // Inclui o swf carregado no Stage 13. this.addChild(carregador);
Passo 4
Crie um novo documento Flash com as dimenses 200237 e salve-o com o nome arquivoExterno.swf.
Passo 5
Insira uma imagem qualquer (pois apenas um exemplo) e gere o swf (Ctrl+Enter).
Passo 6
Gere o swf do carregador.fla (Ctrl+Enter) e ver que o arquivoExterno.swf foi carregado na posio definida por ns.
Criao de Games
Marcio Silva Colunistas desde: 2007 Matrias publicadas: 6
Criao de games
Ol pessoal, Que tal comear a aprender a arte de criar aqueles joguinhos bem legais feitos em flash? Comearei uma sequncia de tutorias que mostraro os mais importantes fundamentos para comear a desenvolver um game.
Pr-requisitos:
Conhecimento bsico em ActionScript

Objetivo:
capacitar os leitores quanto aos aspectos referentes a comandos bsicos para a movimentao de um personagem, mapa de tiles, deteco de coliso, gravidade, frico entre outros. Todos esses fundamentos so muito importantes para a construo de games divertidos. Mas vamos por partes, primeiramente abordarei neste tutorial um fundamento muito importante e muito bsico que a movimentao de persogagens e um incio de deteco de coliso. No fim desse tutorial teremos feito um joguinho simples como o que est abaixo.
Ento vamos ao que interessa!
Crie um novo arquivo (CTRL+N) D um clique no primeiro frame e coloque o cdigo abaixo
1. 2. 3. 4. 5. 6. var cont:Number = new Number(); var cont2:Number = new Number(); cont=0; //contadores de tiros count2=0; //contadores de exploses onEnterFrame=function() {
7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26.
/*verificamos quais teclas o usurio est precionando E tambm verificando quais os limites da tela */ if(Key.isDown(Key.LEFT) && nave._x >=20) nave._x -=20; if(Key.isDown(Key.RIGHT) && nave._x <500) nave._x +=20; if(Key.isDown(Key.UP) && nave._y >20) nave._y -=20; if(Key.isDown(Key.DOWN) && nave._y <330) nave._y +=20;} onMouseDown = function() { /*quando ocorre o clique do mouse, mostra um tiro saindo da nave*/ _root.cont++; _root.tiro.duplicateMovieClip(tiro+_root.cont,_root.cont,_root.cont); //duplicamos o tiro /*fazemos com que a rplica aparea na frente da nave*/ _root[tiro+_root.cont]._y = nave._y+10; _root[tiro+_root.cont]._x = nave._x+10; } Observaes referentes ao cdigo
Quando o iniciar o joguinho a funo onEnterFrame invocada, ela fica esperando o pressionamento de teclas, e toma as decises necessrias para a movimentao correta do personagem que iremos criar logo abaixo. No cdigo tambm tem uma funo que serve para capturar cliques do mouse na tela (onMouseDown). Quando ocorrer um clique ser fieta uma duplicata do movieclip chamado tiro.
Criao dos movieClips para o jogo (tiro, inimigo, nave e exploso)
Vamos criar agora o movieClip que representar o tiro. Crie um crculo fora do stage, de modo que ele no aparea na animao final. Selecione-o e pressione F8, para transformar em movieClip.D o nome de tiro. Certifique-se que o movieClip crculo se chama realmente tiro. Para issso basta clicar no crculo e verificar na barra de propriedades.
Agora clique no crculo e coloque o cdigo abaixo:

1. onClipEvent(enterFrame) 2. { 3. if(_name != tiro)//verificao que serve para que sejam executados apenas as cpias do tiro, no o verdadeiro 4. { 5. this._y-=30; 6. if(this._y <0)//se o tiro passou do y=0 removemos o tiro 7. this.removeMovieClip(); 8. if(this.hitTest(_root.inimigo)) //verifica se tiro colidiu com o inimigo 9. { 10. _root.inimigo.life=0; //zeramos o life, um tiro s fatal 11. this.removeMovieClip(); //sumimos com o tiro da tela 12. } 13. } 14. }
No cdigo, importante destacar o uso do mtodo hiTest(), que muito importante para a deteco de coliso. Ele responsvel em dizer se dois movieClips colidiram ou no. Agora criaremos a nave que pilotaremos, no nosso caso s um quadradinho. Da mesma forma que voc criou o tiro, crie 2(dois) quadradinhos, um ficar na parte superior fora do stage e outro dentro do stage na parte inferior.Ttransforme-os em movieClips e nomeie o que est no stage de nave e o que est fora de inimigo. Por fim faa a figura que respresentar a exploso, ficar prximo ao movieclip tiro. Chame-a de exploso. Veja como nosso stage ficar abaixo:
Agora vamos so cdigo do inimigo, d dois cliques no inimigo. No primeiro frame coloque:
1. var life:Number = 100;
Esse o life do inimigo. Agora volte cena principal e selecione o inimigo. Aperte F9 depois coluque o seguinte cdigo:
1. onClipEvent(enterFrame)
2. { 3. /*Verificamos se o inimigo morreu, vendo se o seu life menor ou igual a zero*/ 4. if(life<=0) 5. { 6. _root.cont2++; 7. /*Criamos uma exploso, pois o inimigo morreu*/ 8. _root.explosao.duplicateMovieClip(explode+_root.cont2, _root.cont2,_root.cont2); _root[explode+_root.cont2]._x = this._x; 9. _root[explode+_root.cont2]._y = this._y; 10. this._x = random(300); //o inimigo volta numa posio randmica 11. this._y = -150; 12. this.life = 100; //voltamos o life do inimigo 13. } 14. else 15. { 16. this._y+=10; //avana o inimigo em sua direo 17. if(this._y > 300) //verifica se o inimigo ultrapassou o limite mximo da tela 18. { 19. /*Se o inimigo ultrapassou sua nave, vc pode fazer o que quizer a partir daqui 20. eu optei por fazer o inimigo comea de novo a descer. 21. */ 22. this._y = -20; 23. this.removeMovieClip(); 24. } 25. } 26. }
O cdigo acima indica que quando o life do inimigo acabar vai ser feita uma duplicata do movieClip exploso que vai aparecer exatamente no local onde houve a coliso com o tiro. Seno ocorre coliso alguma ele entra no else e continua avanando em direo nave que controlamos. Por fim o cdigo da exploso:
1. onClipEvent(enterFrame) 2. { 3. /*essa verificao serve para que apenas as exploso que sero criadas dinamicamente 4. sejo executadas*/ 5. if(_name != explosao) 6. { 7. if(this._alpha > 0) //serve para dar um efeito de exploso 8. this._alpha -= 5; 9. else 10. this.removeMovieClip(); 11. } 12. }
Bem similar so cdigo do tiro a exploso s com as duplicatas, aplicamos apenas uma diminuio no alpha at que chegue a zero a deletamos a instancia duplicada da exploso. Se tiver seguido corretamente os passos, o joguinho est pronto!Use sua criatividade para fazer variaes desse exmplo. Divirta-se!
Criao de games - Megaman Parte 1

Ol comunidade, Estou de volta com novas colunas sobre criao de games, destacando os que usam conceitos de fsica, matemtica e outras reas que esto intimamente ligadas a esta rea to fascinante. No meu ltimo tutorial mostrei a criao de um simples joguinho que tratava de coliso e movimentao de um modelo na tela e que disparava tiros contra inimigos. O objetivo era apenas dar um pontap inicial para quem no sabia nada sobre games, dessa forma propiciando uma pequena base para aqueles mais iniciantes. Neste tutorial, tratarei de conceitos um pouco mais elaborados, mas que so de fcil compreenso
Pr-requisitos: Objetivo:
Propiciar ao leitor o conhecimento necessrio para que este possa desenvolver seus prprios jogos de plataforma. Ao logo da construo do game sero mostrados e comentados cada conceito novo que for mostrado, preocupando-se em no s mostrar como faz, mas tambm por que funciona, dvida que fica geralmente na cabea de quem est no incio do aprendizado ou at mesmo quem j tem algum conhecimento na rea. O objetivo aqui desenvolver uma fase completa de um game que segue o formato de plataforma, estilo Super Mrio.
Conceitos:
Nesta primeira parte iremos abordar a tcnica de animao de personagens utilizando sprites, criar interao do usurio com um modelo baseado em sprites, o famoso scrolling, simulao de gravidade e tcnicas de tratamento de coliso em jogos de plataforma. Os sprites nada mais so do que vrios quadros de uma animao nos games 2D, a animao de personagens
feita quadro a quadro, como o Macromedia Flash trabalha com quadros muito prtico manipular sprites de uma animao na ferramenta.
Contedo
Ento, mo na massa!
O Personagem
Antes de mais nada devemos obter as figuras para o tutorial, existem vrios sites pela internet que fornecem sprites para download gratuitamente, claro que se voc bom em designer de personagens pode fazer os seus prprios. Mas muitos games em flash disponveis na internet so adaptaes de games j existentes e consagrados, que nosso caso, onde iremos utilizar sprites do jogo do Megaman. Recomendo o Sprite Kingdom, de onde tirei os sprites para esta coluna. Salve o arquivo com os sprites do link acima e abra no Macromedia Fireworks. Os passos seguintes sero repetidos para cada estado do personagem, voc deve ter percebido no arquivo que voc baixou que cada linha trata-se de uma ao do Megaman, com exceo das duas primeiras, vejamos a figura abaixo:
Figura 1 - Representa a chegada do Megaman Na Figura 1 podemos observar que seguindo a numerao indicada obtemos uma animao do Megaman quando ele entra no cenrio de jogo. Ento para ver essa animao funcionando basta contruir um movieclip com 26 frames, note que cada quadro da animao ser mapeado para um frame do timeline do flash . Para fazer isso devemos seguir os seguintes passos:

Com a imagem que voc baixou do Sprite Kingdom aberta no Macromedia Fireworks selecione o quadro 1 utilizando a ferramenta Marquee Tool, cuide para que apenas o primeiro quadro seja selecionado; Com o primeiro quadro selecionado aperte CTRL + C para copiar; Abra um documento em branco no Macromedia Flash 8 e v em Insert new Symbol ou CTRL + F8, chame-o de entrada; transforme o 1 primeiro frame em Key Frame apertando F6; Agora CTRL + V na rea do stage, pronto o primeiro quadro agora est no primeiro frame, todos os outros que viram tero como base este primeiro frame para que a animao fique perfeita; Repita o processo de copiar e colar agora para o segundo quadro da figura aberta no fireworks e cole agora no segundo frame no flash, esse processo deve ser feito at que os 26 sprites estejam na animao. Sero 26 Key Frames No decorrer deste processo se quiser visualizar como est ficando, clique no primeiro frame do timeline aperte ENTER, assim voc poder ver que ajustes devero ser feitos para que animao fique perfeita. Por que pode ser que uma figura de um frame anterior tenha ficado mais baixa que a atual que voc est colocando e outros probleminhas de alinhamento podem aparecer.
Depois desse processo voc j deve ter percebido que o Macromdia Flash muito bom para fazer animao de personages 2D. Bom, agora devemos fazer as animaes para o Megaman correndo e pulando, vai seguir a mesmo processo descrito acima, criando um novo movieclip vazio, o estadocorrendo eu chamei de correndo_dir e o pulando de pulando_dir, o dir no final indica direita para facilitar na hora de escrever o Action Script.
S para vocs conferirem, as seqncias de imagens para correndo_dir e pulando_dir seguem abaixo:
Figura 2 - Sprites para correndo_dir.
Figura 3 - Sprites para pulando_dir. At agora construmos apenas as principais aes que o Megaman ter, agora vamos contruir o Movieclip que ser realmente o Megaman e que ns iremos manipular via Action Script, no mundo dos games podemos cham-lo de Modelo. Para isto aperte CTRL + F8 e chame esse movie clip vazio de megaman. Como este ser o movieclip principal ele ter todos estados possveis do Megaman dentro do jogo: correr para esquerda e direita, pular para esquerda e direita, e ficar parado olhando para esquerda e para direita e o estado de entrada que construmos anteriormente. Portanto devemos ter 7 Key Frames no timeline. Veja abaixo:
Figura 4 -Timeline com os Key Frames. Coloque em cada frame o seu respectivo nome.

Frame 1 chame de entrada Frame 2 chame de correndo_dir Frame 3 chame de correndo_esq Frame 4 chame de pulando_dir Frame 5 chame de pulando_esq Frame 6 chame de parado_dir Frame 7 chame de parado_esq
Vamos agora associar as animaes para cada ao, quase parecido com o processo de copiar e colar para montar as animaes mas agora voc ir usar as animaes que criou anteriormente. Com o frame entrada selecionado pegue da Library a animao que tambm se chama entrada e coloque no centro do stage, como nas animaes este primeiro servir como base para o alinhamento das demais animaes. A animao correndo_dir tambm j est pronta, foi feita nos passos anteriores basta colocar no seu respectivo frame, da mesma forma a pulando_dir. Para fazer a correndo_esq e a pulando_esq, voc vai utilizar uma instncia das verses para direita, mas como o personagem nas outras verses est virado para a direita basta usar a ferramenta Free Transform Tool e usar o mouse para inverter o sentido do movieclip. Para isto basta clicar no movieclip e acionar a ferramenta Free Transform Tool, clique no lado esquerdo da figura e arraste para o lado direito, isso faz com que a figura inverta de direo. Por fim, para fazer o parado_dir e o parado_esq basta copiar o ltimo sprite do movieclip entrada para o frame parado_dir, copie este mesmo sprite para o parado_esq s que neste invertendo sua direo com a ferramenta Free Transform Tool do flash como feito anteriormente. A menos dos devidos ajustes que voc possa fazer para deixar as animaes bem alinhadas, o nosso personagem est praticamente pronto, s mecheremos nele na etapa de codificao.
O Cenrio
Da mesma forma que os sprites, os cenrios podem ser encontrados em sites na especializados na internet,
eu utilizei um que est no site Background HQ. A montagem do cenrio mais fcil que o personagem, para fazer este tutorial usei apenas parte do cenrio, pois ele muito grande, por isso eu disponibilizei a verso que vou utilizar neste link. Na verdade o cenrio nada mais do que uma imagem de plano de fundo, que servir como molde para desenhar os obstculos e a plataforma. Volte para a cena principal do nosso documento flash, agora vamos colocar todas a layers que precisaremos para manipular o jogo, cada layer vai ter 3 Key Frames. Faa como a imagem abaixo:
Figura 5 - Nome de cada layer com seus Key Frames. Por enquanto o primeiro frame de cada layer no iremos utilizar, Para comear a montagem do jogo. Supondo que voc j baixou o cenrio no fim deste tutorial, insira um novo smbolo do tipo mocieclip e cole a imagem do cenrio que voc baixou.
Figura 6 - Movieclip terreno. Veja que a figura ficou no movieclip que acabei de criar, certifique-se que voc fez exatamente igual. Volte cena e agora apenas arraste-o da biblioteca para o stage. Alinhe na posio x=0 e y=0 e certifique-se que este mc est na layer Terreno e no seu segundo frame. D o nome para esta intncia de terreno de terreno_mc. Pronto, o terreno j est no lugar certo. Agora teremos uma a plataforma onde o personagem vai ficar durante todo o jogo, essa plataforma vai simular o piso do terreno. Para isto crie um novo movieclip vazio chamado de plataforma. Agora preste muita ateno! O segredo do jogo funcionar corretamente est como voc faz os prximos passos. Nesse movieclip vazio fao um quadrado qualquer, isso mesmo, um quadrado qualquer. Volte cena e arraste para o stage este novo movieclip chamado de plataforma que ficar no segundo frame da layer Plataforma, d o nome para esta nova instncia da plataforma de plataforma_mc. Se voc der dois cliques
no mc plataforma_mc o terreno vai ficar como se fosse marcada dagua, assim o terreno ser seu molde para desenhar sobre ele a plataforma, agora voc no vai utilizar aquele quadrado qualquer. Utilizando a ferramenta Rectangle Tool desenhe sobre as superfcies que o Magaman ir ficar apoiado, esses retngulos simularam a base onde o personagem pode caminhar. Veja abaixo:
Figura 7 - Movieclip plataforma_mc (cor banca) sobre o terreno_mc. Veja que eu coloquei a plataforma na altura que o personagem pode caminhar, a parte de cima de cada retngulo onde vai ficar os ps do Megaman. Pra terminar essa brincadeira com as imagens, vamos agora fazer o mc que vai representar as paredes do cenrio. O processo para a construo das paredes fictcias, ou seja, retngulos que representaro as paredes e onde o personagem vai colidir, ser feito como foi feito com a plataforma. Crie de novo um mc vazio chamado paredes e coloque um quadrado qualquer, volte cena e arraste-o para o stage de modo que fique no segundo frame da layer Paredes , d novamente dois cliques nesse novo mc, o que muda agora que voc no mais vai colocar retngulos onde o Magaman pisa, e sim onde ele pode colidir de frente simulando uma parede. Chame essa instancia de paredes que voc acabou de arrastar para o stage de paredes_mc. Veja como ficou:
Figura 8 - Em branco plataforma_mc e em azul paredes_mc. Quando comear a testar as colises algumas modificaes devem ser feitas na largura na altura desses quadrados. Note que a idia para simular paredes cobrir de retngulos azuis tudo obstculo que o Megaman pode colidir, no importa que esses retngulos fiquem bonitinhos por cima do terreno, o que importa que eles no deixem o Megaman passar pelas paredes e nem sumir cho a dentro (Os ajustes so feitos quando comear a etapa de teste do game).. Onde ele no consegue colidir de frente no necessrio colocar paredes. Agora falta colocar o Megaman no cenrio. V a sua biblioteca e coloque no stage o movieclip megaman, ele foi feito em etapas anteriores. Chame essa instncia de magaman_mc. Se voc der dois cliques nesse mc, voc vai entrar no modo de edio, veja que ele composto de de 7 frames. Devemos colocar um stop() no primeiro frame para que a animao comee a executar quando o game comear. Ainda com o megaman aberto para edio, v no frame pulando_dir que por sua vez possui o mc pulando_dir d dois cliques nesse mc para edio. J este mc, se voc o construiu corretamente, tem 19 frames que a quantidade de quadros da ao de pular. No ltimo frame colque o seguinte cdigo:
1. 2. 3. 4.
if(_root.direcao == direita) _parent.gotoAndStop(parado_dir); else _parent.gotoAndStop(parado_esq);
Isso far com que quando animao de pular saiba em que direo ficar parada depois que acabar, no precisa fazer para o pulando_esq, j que ele uma instncia de parado_dir.
O Cdigo
Esta etapa que passamos agora no desenvolvimento de jogos chamada de MODELAGEM, todo jogo, no importa em que plataforma voc o faa, tem essa etapa, principalmente os games 3D. Assim voc pode passar essa etapa para um colega seu que sabe muito de design de cenrios e personagens, depois voc d vida ao jogo com a codificao. Para codificar o jogo s usei uma arquivo de Action Script (AS), logo crie um arquivo de AS e chame-o de Megaman.as. Seu cdigo est logo abaixo:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. stop(); /* Variveis globais * Aqui esto presentes as variveis que fazem o * controle dos estados * em que o jogo se encontra */ var velSaltar:Number = 20; var velAndar:Number = 0; var pulando:Boolean = false; var caindo:Boolean = false; var morreu:Boolean = false; var velMax:Number = 10; var direcao:String = ; var entrada:Boolean = true; /*fazemos com que as layers que representam as paredes * e a plataforma no apaream na hora que * o jogo for executado */ plataforma_mc._visible = false; paredes_mc._visible = false; /* Todo o controle do personagem Megaman*/ megaman_mc.onEnterFrame = function() { //verifica se ainda no acabou a entrada do Megaman if(entrada) return; /*verifica coliso com alguma parede do lado direito ou esquerdo * Se houve coliso faz uma anulao do passo que ele deu para frente */ if( colisao_paredes(_root.paredes_mc, this, velAndar)) this._x-=velAndar; /* simples simulao de gravidade * Se ele no tiver em cima da plataforma ento ele vai caindo * sem acelerao */ if ( !colisao_plataforma(_root.plataforma_mc, this) && !pulando) this._y += 6; //se velocidade positiva estou andando para a //direita seno estou indo para esquerda
39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95.
if (velAndar>0) direcao = direita; else if (velAndar<0) direcao = esquerda; //s pula se no tiver pulando, claro if ( Key.isDown(Key.SPACE) && !pulando ) { pulando = true; /*mostra a animao pulando para direita se o personagem * est indo para a direita, caso contrrio para a esquerda */ if(direcao == direita) megaman_mc.gotoAndStop(pulando_dir); else megaman_mc.gotoAndStop(pulando_esq); } if( Key.isDown( Key.LEFT) ) { if ( velAndar > -velMax ) //no deixa o personagem acelerar muito velAndar; if(!pulando) megaman_mc.gotoAndStop(correndo_esq); } else if( Key.isDown( Key.RIGHT) ) { if( velAndar < velMax ) velAndar++; if(!pulando) megaman_mc.gotoAndStop(correndo_dir); } else if(!pulando and !entrada ) { //se no tiver acontecendo nada ele fica parado if(direcao == direita) megaman_mc.gotoAndStop(parado_dir); else megaman_mc.gotoAndStop(parado_esq); velAndar = 0; } /* nosso personagem no carro mas tem acelerao, que .85 * mude para um valor alto e veja o resultado */ velAndar *= .85; /*esta funo faz o bendito scrolling*/ movimento(this, terreno_mc, plataforma_mc, paredes_mc, velAndar); if( pulando ) { /* mais fsica aqui, veja na figura 9 o que acontece aqui*/ this._y -= velSaltar; velSaltar -= 1.8; if (velSaltar<0) caindo = true; if (velSaltar <-15) velSaltar = -15; } /* indica que o personagem emcima da plataforma, logo ele no est * caindo e nem pulando claro! E setamos novamente
96. */ 97. if ( colisao_plataforma( _root.plataforma_mc, this) && caindo) 98. { 99. velSaltar = 20; 100. pulando = false; 101. caindo = false; 102. } 103. }; 104. function colisao_plataforma(obj1:Object, obj2:Object) 105. { 106. return obj1.hitTest(obj2._x, obj2._y+60, true); 107. } 108. function colisao_paredes(obj1:Object, obj2:Object, vel:Number) 109. { 110. return (obj1.hitTest(obj2._x-5, obj2._y+60, true) or obj1.hitTest(obj2._x+40, obj2._y+60, true)) 111. } 112. function movimento(personagem_obj:Object, terreno_obj:Object, 113. limite_obj:Object,paredes_obj:Object, velocidade:Number) 114. { 115. if(direcao == direita) 116. { 117. /*se obedecer a condio abaixo, quem anda o cenrio*/ 118. if(personagem_obj._x > 200 and terreno_obj._x >=-1853) 119. { 120. terreno_obj._x -= velocidade; 121. limite_obj._x -= velocidade; 122. paredes_obj._x -= velocidade; 123. } 124. else 125. personagem_obj._x += velocidade; 126. } 127. if(direcao == esquerda) 128. { 129. if(personagem_obj._x < 100 and terreno_obj._x < 0) 130. { 131. terreno_obj._x -= velocidade; 132. limite_obj._x -= velocidade; 133. paredes_obj._x -= velocidade; 134. } 135. else 136. personagem_obj._x += velocidade; 137. } 138. }
Agora para funcionar o jogo, v layer Action no segundo frame da cena principal e coloque como segue abaixo:
1. stop(); 2. /*incluso do cdigo do game*/ 3. #include Megaman.as
queles que mataram essa aula de fsica a figura abaixo mostra uma parte da fsica que diz: Tudo que sobe tem que descer, a idia que o cdigo das linhas 91 97 simular desacelerao de um corpo quando este lanado de baixo para cima, que nada mais do que a gravidade atuando sobre o corpo que sobe, chega um momento que a velocidade chega a zero e depois inverte o sinal fazendo com que o corpo mude direo e comece a cair, o que foi codificado uma aproximao desse efeito bem superficial , veja na figura abaixo
como a magnitude da velocidade vai diminuindo, isto , a cada passo de tempo seu valor vai se reduzindo at zerar e mudar de sentido (sinal). Esse moviemnto chamado de Movimento Uniformemente Variado (MUV).
Figura 9 - Velocidade no decorrer do pulo.

Consideraes Finais
Vimos durante o texto diversos conceitos referentes ao desenvolvimento de games de plataforma, claro que o modo de fazer no nico, voc pode achar vrias formas de fazer, mas os conceitos sempre sero o mesmos. Voc viu como fazer scrolling, uma pequena simulao fsica, que permite mais suavidade ao pulo do personagem, claro que quanto mais detalhes nessa simulao fica mais prximo da realidade. Espero que voc tenha assimilado os conceitos mais bsicos e mais importantes desse tipo de game. Calma que tem mais, voc percebe que ainda falta os inimigos, fazer o Megaman atirar colocar um timer entre outros, para ficar bem parecido com o game real. Mas isso fica para uma prxima, nas prximas semanas estarei postando a constinuao deste artigo.
Criao de Games - Megaman Parte 2 Criao de games - Megaman Parte 2

Estou de volta trazendo a continuao do tutorial de criao de games - Megaman, tendo como foco a criao de um game de plataforma. Na primeira parte do tutorial, Criao de Games - Megaman parte 1, aprendemos algumas tcnicas como a utilizao de sprites, fizemos uma simulao do pulo do personagem, o to prucurado scrolling da tela que cuja a idia bem tranquila e os princpios bsicos de construo de jogos de plataforma. Portanto, assumo desde de j que voc j possui os pr-requisitos listados abaixo.
Pr-requisitos: Objetivo:
O abjetivo desta segunda parte a incluso de novos elementos dentro do nosso joguinho, lembrando que o bsico, use sua imaginao para deixar o joguinho ainda mais interessante. Como o interesse aqui puramente o aprendizado, no estamos desenvolvendo um jogo comercial que necessita de mais otimizaes. No entanto, uma vez que assimilado todos os conceitos apresentados, conseguir facilmente desenvolver seus jogos de forma comercial. A construo das animaes feita ao a ao do personagem, para cada ao um movie clip diferente, claro que possivel criar um nico mc que pode ser controladoo via Action Script, mas vamos aprender uma coisa de cada vez. Veja o jogo pronto:
Conceitos:
Apresentarei neste artigo noes legais como como fazer o tiro que o Megaman vai disparar, a temporizao destes tiros, um timer para marcar o tempo de jogo, a incluso de inimigos no cenrio e um pouquinho sobre IA em games. Logo nosso jogo estar completo com os itens bsicos para este tipo de game.
Contedo
J vou supor que voc tenha visto o artigo anterior caso no tenha acesse (Criao de Games - Megaman parte 1), agora iremos adicionar ao projeto anterior, os elementos mencionados acima (tiro, timer, inimigos). Para isso, abra o arquivo do jogo que fizemos no ltimo artigo e vamos l! Primeiramente, vamos construir os tiros que sero dados tanto pelo megaman quanto pelos seus inimigos. Insira um novo smbolo do tipo movie clip, chame-o de tiro_mega, ao fim deste tutorial segue um link para que baixem as imagens que utilizei ou clique aqui para baixar. Da mesma forma que o outro artigo monte a animao do tiro baseado na folha de sprites abaixo:
Figura 1 - Folha de sprites para o tiro_mega. Depois do movie clip pronto, volte para a cena e arraste-o da library, se ela no estiver aparecendo aperte CTRL + L. Iremos implementar as aes do tiro semelhante ao que eu fiz no meu primeiro turorial, aquele da nave. Ento, devemos posicionar esse tiro fora do stage, redimensione o seu tamanho para 15px de altura e 15px de largura, chame essa instncia de tiro_mc. Veja abaixo como posicionei no stage.
Figura 2 - Posio inicla adequada para o tiro_mega. Agora vamos programar as aes desse tiro. Selecione o movie clip tiro_mc e aperte F9 para editar seu Action Script onde os inimigos que esto sendo referenciados no cdigo sero criados nos passos seguintes, o cdigo segue abaixo:
1. onClipEvent( enterFrame ) 2. { 3. if(_name != tiro_mc) 4. { 5. //verifica coliso com inimigo 1 6. if(this.hitTest(_root.terreno_mc.inimigo_1_mc)) 7. { 8. _root.terreno_mc.inimigo_1_mc.barra_mc._xscale -= 5; 9. this.removeMovieClip(); 10. } 11. else 12. { 13. if(direcao == direita) 14. this._x += 25; 15. else 16. this._x -= 25; if(this._x >2000 || this._x < -5) 17. this.removeMovieClip(); 18. } 19. } 20. }
Tambm precisaremos de um tiro que ser dado por um dos inimigos do megaman que ser feito mais a frente. O processo o mesmo, pegue a folha de sprites, insira um novo movie clip vazio e chame-o de tiro_2, depois da animao pronta, volte cena e arraste-o da library para o stage e d o nome de instncia de tiro_fogo_mc. Veja abaixo como ficou:
Figura 3 - Folha de sprites para tiro_2.
Figura 4 - Veja o posicionamento na cena. O cdigo para este tiro segue abaixo com algumas modificaes para testar a coliso com o megaman em vez do inimigo, claro. E se o life do megaman chegar ao fim vai para frame 3 ou frame de Game Over. Eu chamei de gameOver o ltimo frame da layer terreno.
1. onClipEvent( enterFrame ) 2. { 3. if(_name != tiro_fogo_mc) 4. { 5. if(_root.life_mc._xscale <= 0) 6. { 7. _root.gotoAndStop(gameOver); } 8. if(this.hitTest(_root.megaman_mc)) 9. { 10. _root.life_mc._xscale -= 5; 11. this.removeMovieClip(); 12. } 13. else 14. { 15. if(direcao == direita) 16. this._x += 25; 17. else 18. this._x -= 25; 19. if(this._x >2000 || this._x < -5) 20. this.removeMovieClip(); 21. } 22. } 23. }
Note que existe uma varivel direcao que no foi declarada em lugar nenhum e est sendo usada em nosso AS dos dois tiros, ela foi criada no arquivo Megaman.as. Portanto, abra-o e insira o seguinte cdigo nas linhas iniciais onde so declaradas as variveis utilizadas no nosso game, aproveite e declare variveis de controle que serviro para controlar o nmero de tiros e o tempo de intervalo entre cado tiro, veja abaixo como ficou.
1. 2. 3. 4. 5. 6. stop(); /* Variveis globais * Aqui esto presentes as variveis que fazem o * controle dos estados * em que o jogo se encontra */
7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.
var velSaltar:Number = 20; var velAndar:Number = 0; var pulando:Boolean = false; var caindo:Boolean = false; var morreu:Boolean = false; var velMax:Number = 10; var direcao:String = ; var entrada:Boolean = true; var contTiros:Number = 0; /*Contador de tiros*/ var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/ /*adiciona classe MovieClip um atributo que indica a direo para onde est indo*/ MovieClip.prototype.direcao = esquerda; . . .
Agora vamos construir um timer que ficar contando o tempo, vai ser um timer bem simples em termos de beleza, mas que voc poder facilmente customiz-lo a seu gosto. Primeiramente insira um campo texto na parte superior central do nosso stage, sinta-se vontade em colocar onde achar mais adequado dentro do stage a localizao no vai influenciar, e mude suas propriedades para que seja um campo texto do tipo dinmico. Mais algumas linhas sero adicionadas no arquivos Megaman.as, como j temos o tiro em mos e uma varivel que controla o intervalo de tempo dos tiros, podemos implementar a ao de disparar tiros. Abaixo est o cdigo que implementa o disparo.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. . . . //s pula se no tiver pulando, claro if ( Key.isDown(Key.SPACE) && !pulando ) { pulando = true; /*mostra a animao pulando para direita se o personagem * est indo para a direita, caso contrrio para a esquerda */ if(direcao == direita) megaman_mc.gotoAndStop(pulando_dir); else megaman_mc.gotoAndStop(pulando_esq); } /*########### Novas Linhas adicionadas ##########*/ tempo = Math.round(getTimer()/1000); _root.tempo_txt.text = tempo; if( Key.isDown( Key.CONTROL) && (getTimer() - tiroInterval) > 200 ) { _root.contTiros++; _root.tiro_mc.duplicateMovieClip(tiro+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o tiro if(direcao == direita) { if(!Key.isDown( Key.RIGHT) ) this.gotoAndStop(atirando_dir); _root[tiro+_root.contTiros]._y = this._y+35; _root[tiro+_root.contTiros]._x = this._x+50; } else { if(!Key.isDown( Key.LEFT) ) this.gotoAndStop(atirando_esq);
33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45.
_root[tiro+_root.contTiros]._y = this._y+35; _root[tiro+_root.contTiros]._x = this._x-10; } tiroInterval = getTimer(); /*atribuindo direcao para o tiro*/ _root[tiro+_root.contTiros].direcao = direcao; atirando = true; } /*#################################################*/ if( Key.isDown( Key.LEFT) ) . . .
Agora vamos adicionar os inimigos. Neste artigo vou adicionar apenas 2 inimigos para que voc tenha uma noo de como implementar uma pequena Inteligncia Artificial (IA) nos seus inimigos, a implementao de IA em games pode ser feita de diversas formas, aqui apresentarei uma idia bem simples onde voc poer usar sua criatividade e implement-la de uma forma mais rebuscada. O primeiro Inimigo est representado no gif abaixo:
Figura 5 - Primeiro inimigo. Uma forma de utilizar sprites foi visto na ltimo artigo, era baseada na folha de sprites onde tinhamos que colocar um a um os sprites em cada frame. Agora veremos outra forma de usar sprites a partir de gifs animados. Com uma imagem gif pronta fcil obter seus sprites pelo flash que far sozinho o processo da passagem da animao para o timeline. Primeiro vamos criar um movie clip vazio e chame-o de inimigo1. Agora v no menu arquivo ->import ->import to stage ou simplesmente CTRL + R e selecione o arquivo img3.gif que forneci no link ao fim deste artigo. Clique em abrir e automaticamente o flash far o milagre de colocar cada quadro da animao no seu respectivo frame. Que bacana hein!.
Figura 6 - Timeline e o stage depois do import.
Vamos criar agora o outro inimigo, volte ao stage e insira um novo movie clip chamado inimigo2, abaixo segue a imagem do nosso inimigo nmero 2:
Figura 7 - Segundo inimigo.img5.gif Depois que ocoreu o import seu time e stage devem ficar assim:
Figura 8 - Timeline e o stage depois do import da segunda imagem. Agora com as animaes bases prontas iremos criar o mc que iremos controlar via Action Script. Portanto, na cena principal insira um novo mc chamado inimigo_1. Neste mc, crie duas layers uma chamada barra e outra chamada imagem. Na layer imagem, no primeiro frame desta layer coloque o mc que fizemos agora pouco chamado inimigo1 chame este primeiro frame de esquerda (aperte F9 neste frame e coloque um stop(); no Action Script) e o segundo desta mesma layer de direita e o terceiro frame chame de morto, este ltimo indica o estado de quando sua barra de fora chegar ao fim. O mc inimigo1 j est direcionado para a esquerda, como foi visto no artigo anterior basta usar a ferramenta Free Transform Tool para inverter a direo. Para mais detalhes veja o artigo anterior, e no frame morto no coloque nada deixe-o em branco sem nada no stage. Fica aqui como um teste criar uma animao de exploso ou qualquer coisa que parea que o inimgo explodiu. Agora vamos construir a barra de life do inimigo_1, na sua layer barra, usando a ferramenta Rectangle Tool desenhe um retngulo acima da cabea do personagem de forma que esse desenho pertena layer barra, transforme essa barra em mc apenas selecionando e apertando F8 chamando-a de barra_life. Por fim d o nome de instncia de barra_mc. Depois de todo esse processo com o primeiro frame selecione aperte F6 para criar um key Frame cpia do primeiro. Aps todo esse processo veja como ficou:
Figura 9 - Inimigo 1 no stage e seus respectivos frames. Para fazer o outro inimigo voc vai aplicar o mesmo processo, volte cena principal e crie um movie clip chamado inimigo_2, crie as mesma layers e d o mesmo nome pra elas. Utilize o mc inimigo2 para fazer a animao para a esquerda e inverta o mc para fazer a animao para direita. Coloque tambm o stop() no primeiro frame da layer imagem e barra de life no precisa fazer por que ela j est pronta na library. Basta arrast-la para o primeiro frame da layer barra e dar o nome novamente de intncia de barra_mc e apertar F6 com o primeiro frame selecionado para fazer uma cpia para o segundo. Depois de criado esses dois mcs volte para a cena principal e d um duplo clique no mc terreno_mc, assim ele ser aberto para edio e aqui que vamos colocar nossos inimigos. Mas voc poderia ter imaginado coloc-los diretamente na cena criando uma nova layer, por exemplo chamada de inimigos; isso sim possvel mas invivel dependendo do nmero de inimigos no cenrio por que ser complicado aplicar o scrolling em todos esses objetos. Continuando, com o terreno_mc aberto para edio arraste o mc inimigo_1 da library para o stage. D o nome de instncia de inimigo_1_mc. A posio onde vai ficar o seu inimigo depende de como voc vai programar seu Action Script de modo que ele no ultrapasse barreiras que ele no possa ou estipular limites at onde possa ir, eu estipulei um valor mximo e um valor mnimo para que o personagem possa andar no eixo x. D um clique seu inimigo_1_mc e com ele selecionado aperte F9 para program-lo com o cdigo abaixo:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. onClipEvent(load) { /*velocidade inicial do inimigo_1_mc*/ var speed = 2; }onClipEvent(enterFrame) { /*no tem mais barra de life, ento morreu*/ if(this.barra_mc._xscale <=0) this.gotoAndStop(morto); else { /*pequena simulao de inteligncia artificial*/ atack = Math.random(); if(this.hitTest(_root.megaman_mc)) _root.life_mc._xscale -= .5; /*realiza um ataque se o nmero randmico for divisvel por 15*/ if(Math.round(atack*10000) % 15 == 0) speed = 10; /*persegue o megaman*/ if(_root.megaman_mc._x > _root.terreno_mc._x+this._x)
21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. } 38. }
{ this.gotoAndStop(direita); this._x +=speed; } else { this.gotoAndStop(esquerda); this._x -=speed; } if(this._x < 100) this._x +=speed; else if(this._x > 600) this._x -=speed; speed = 2; if(speed > 100) speed = 0;
No cdigo acima fiz com que o inimigo fique fazendo umas aceleradas para frente como se fosse um ataque e o cdigo tambm faz com o inimigo fique sempre andando atrs do megaman se este estiver na sua linha de ataque. Cada vez que o inimigo_1_mc encosta no megaman ele tira 0.5 do life. Para o inimigo_2_mc algumas adaptaes so necessrias no cdigo acima, primeiro eu admiti que no vou diminuir o life do megaman quando encostar neste inimigo s o tiro que este dar que vai diminuir, o intervalo x que o inimigo_2_mc pode andar tambm diferente eu o coloquei na parte final da fase. E tambm atualizo a varivel direcao para eu saber para onde este inimigo vai atirar. A imagem de como fica no stage depois desse processo de montagem das animaes do personagem e o cdigo seguem abaixo:
Figura 10 - Inimigo 2 no stage e seus respectivos frames.

1. 2. 3. 4. 5. 6. 7. onClipEvent(load) { /*velocidade inicial do inimigo_2_mc*/ var speed = 2; }onClipEvent(enterFrame) { /*no tem mais barra de life, ento morreu*/
8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. }
if(this.barra_mc._xscale <=0) this.gotoAndStop(morto); else { /*pequena simulao de inteligncia artificial*/ atack = Math.random(); if(this.hitTest(_root.megaman_mc)) _root.life_mc._xscale -= .5; /*realiza um ataque se o nmero randmico for divisvel por 15*/ if(Math.round(atack*10000) % 15 == 0) speed = 10; /*persegue o megaman*/ if(_root.megaman_mc._x > _root.terreno_mc._x+this._x) { this.gotoAndStop(direita); direcao = direita; this._x +=speed; } else { this.gotoAndStop(esquerda); direcao = esquerda; this._x -=speed; } if(this._x < 1446) this._x +=speed; else if(this._x > 2040) this._x -=speed; speed = 2; if(speed > 100) speed = 0; }
Vale ressaltar que o cdigo das aes desses inimigos so os que podem mais serem implementados de forma diferente, eu optei para as aes da forma que est acima codificada, o inimigo_1_mc com o corpo e inimigo_2_mc ataca com um tiro de fogo. Lembre-se que ambos esto no mc terreno_mc. Por fim vamos fazer a personagem que voa disparar o tiro de fogo que fizemos acima, v a sua library e procure pelo mc inimigo2 que est na figura 8. Insira o cdigo abaixo no frame 25, mas por que no frame 25? Se voc observar a animao nesse frame que a personagem sofre uma espcie de solavanco devido a um tiro que de forma imaginria ela tenha dado.
1. _root.contTiros++; _root.tiro_fogo_mc.duplicateMovieClip(tiro+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o tiro 2. x_terreno = _root.terreno_mc._x; 3. x_inimigo = _root.terreno_mc.inimigo_2_mc._x; 4. /*Verifica para onde ela est olhando e atira*/ 5. if(_root.terreno_mc.inimigo_2_mc.direcao == direita) 6. { 7. _root[tiro+_root.contTiros].direcao = direita; 8. _root[tiro+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58; 9. _root[tiro+_root.contTiros]._x = x_terreno + x_inimigo+90; 10. } 11. else 12. {
13. 14. 15. 16. 17. }
_root[tiro+_root.contTiros].direcao = esquerda; _root[tiro+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58; _root[tiro+_root.contTiros]._x = x_terreno + x_inimigo+10; _root[tiro+_root.contTiros]._xscale = - 2*_root[tiro+_root.contTiros]._width;
Voc conseguiu entender a linha 17 deste cdigo? Sim? No? O que ela faz? At agora quando a gente desejava que um personagem ficasse virado para os dois sentidos crivamos duas frames e depois utilizando a ferramenta Free Transform Tool invertia o sentido da figura da esquerda para a direita ou vice e versa. Agora fizemos essa inverso via Action Script com uma linha de cdigo, o mais impressionante que funciona. Falei muito de uma tal barra de life do megaman mais ainda no fizemos. Ento, v ao stage da cena e cria um retngulo da cor que quiser parecido com o que foi feito para os inimigos, transforme em movie clip chamando-o de barra d o nome de instncia de life_mc. Posicione no topo um pouco direita perto do timer e se prefeir coloque uma imagem do megaman que voc desejar ao lado do life s pra ficar claro que aquele life do megaman. Veja como ficou:
Figura 11 -Posio do life e o primeiro inimigo. Por ltimo s falta fazer as animao do megaman atirando e o cdigo que far ele disparar os tiros. Para fazer a animao vamos usar o arquivo de imagens que segue logo ao fim desse artigo. L tem vrias imagens do megaman atirando correndo e tudo mais. Acredito que voc j est ficando bom nesse processo de copiar e colar para montar animaes. Use a folha de sprite abaixo, OBS: eu no usei toda a sequncia de animao para fazer ele atirando, usei apenas os prites que esto abaixo.
Figura 12 - Folha de sprites para atirando parado.
Figura 13 - Folha de sprites para atirando correndo. Os dois mcs vazios que voc ir criar para fazer as animaes vo se chamar respectivamente atirando e atirando_correndo. Agora iremos incorporar esses mcs ao megaman propriamente dito que aquele que est no stage e que estamos controlando via Action Script e que se chama megaman_mc. Portanto, v cena principal e d um duplo clique no megaman_mc e adicione mais 4 frames aos frames existentes e chame-os respectivamente de: atirando_dir, atirando_esq, correndo_atirando_dir e correndo_atirando_esq. Cuidado com esses nomes sempre utilizo para referenci-los no Action Script. As animaes para os frames atirando_dir e correndo_atirando_dir j esto pronta (atirando e atirando_correndo), ou seja, a direo em que o personagem est olhando j est correta. Para fazer as animaes para esquerda ser usada a mesma tcnica que consistia em usar a ferramenta Free Transform Tool para inverter o sentido da animao
que j est pronta, se tiver ainda dvidas quanto a esta parte consulte novamente a parte 1 deste artigo. Depois de cada coisa no seu lugar, voc agora precisa apenas colocar o seguinte cdigo no ltimo frame do mc atirando para que quando voc atirar saiba para que lado deva parar e de tirar :
1. 2. 3. 4. 5. _root.atirando = false; if(_root.direcao == direita) _parent.gotoAndStop(parado_dir); else _parent.gotoAndStop(parado_esq);
E para o mc atirando_correndo coloque no ltimo frame:

1. _root.atirando = false; 2. moada, agora falta apenas o cdigo do corao do nosso game com as novas modificaes e com a parte de tiros, com a possibilidade de correr atirando e pular atirando todas j incorporadas no cdigo, ento a est: "codigo" title="AS">stop(); 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. /* Variveis globais * Aqui esto presentes as variveis que fazem o * controle dos estados * em que o jogo se encontra */ var velSaltar:Number = 20; var velAndar:Number = 0; var pulando:Boolean = false; var caindo:Boolean = false; var morreu:Boolean = false; var atirando:Boolean = false; var velMax:Number = 10; var direcao:String = ; var entrada:Boolean = true; var contTiros:Number = 0; /*Contador de tiros*/ var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/ /*adiciona classe MovieClip um atributo que indica a direo para onde est indo*/ MovieClip.prototype.direcao = esquerda; /*fazemos com que as layers que representam as paredes * e a plataforma no apaream na hora que * o jogo for executado */ plataforma_mc._visible = false; paredes_mc._visible = false; /* Todo o controle do personagem Megaman*/ megaman_mc.onEnterFrame = function() { //verifica se ainda no acabou a entrada do Megaman if(entrada) return; if(this._y > 350) _root.gotoAndStop(gameOver); /*verifica coliso com alguma parede do lado direito ou esquerdo * Se houve coliso faz uma anulao do passo que ele deu para frente */ if( colisao_paredes(_root.paredes_mc, this, velAndar)) this._x-=velAndar;
39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94.
/* simples simulao de gravidade * Se ele no tiver em cima da plataforma ento ele vai caindo * sem acelerao */ if ( !colisao_plataforma(_root.plataforma_mc, this) && !pulando) this._y += 6; //se velocidade positiva estou andando para a //direita seno estou indo para esquerda if (velAndar>0) direcao = direita; else if (velAndar<0) direcao = esquerda; //s pula se no tiver pulando, claro if ( Key.isDown(Key.SPACE) && !pulando ) { pulando = true; /*mostra a animao pulando para direita se o personagem * est indo para a direita, caso contrrio para a esquerda */ if(direcao == direita) megaman_mc.gotoAndStop(pulando_dir); else megaman_mc.gotoAndStop(pulando_esq); } if( Key.isDown( Key.CONTROL) && (getTimer() - tiroInterval) > 200 ) { _root.contTiros++; _root.tiro_mc.duplicateMovieClip(tiro+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o tiro if(direcao == direita) { if(!Key.isDown( Key.RIGHT) ) this.gotoAndStop(atirando_dir); _root[tiro+_root.contTiros]._y = this._y+35; _root[tiro+_root.contTiros]._x = this._x+50; } else { if(!Key.isDown( Key.LEFT) ) this.gotoAndStop(atirando_esq); _root[tiro+_root.contTiros]._y = this._y+35; _root[tiro+_root.contTiros]._x = this._x-10; } tiroInterval = getTimer(); /*atribuindo direcao para o tiro*/ _root[tiro+_root.contTiros].direcao = direcao; atirando = true; } if( Key.isDown( Key.RIGHT) && atirando) { if( velAndar < velMax ) velAndar++; if(!pulando) megaman_mc.gotoAndStop(correndo_atirando_dir); } else if( Key.isDown( Key.LEFT) && atirando) {
95. 96. 97. 98. 99. } 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147. 148. 149. 150. 151.
if ( velAndar > -velMax ) //no deixa o personagem acelerar muito velAndar; if(!pulando) megaman_mc.gotoAndStop(correndo_atirando_esq); else if( Key.isDown( Key.RIGHT)) { if( velAndar < velMax ) velAndar++; if(!pulando) megaman_mc.gotoAndStop(correndo_dir); } else if( Key.isDown( Key.LEFT) ) { if ( velAndar > -velMax ) //no deixa o personagem acelerar muito velAndar; if(!pulando) megaman_mc.gotoAndStop(correndo_esq); } else if(!pulando && !entrada && !atirando) { //se no tiver acontecendo nada ele fica parado if(direcao == direita) megaman_mc.gotoAndStop(parado_dir); else megaman_mc.gotoAndStop(parado_esq); velAndar = 0; } /* nosso personagem no carro mas tem acelerao, que .85 * mude para um valor alto e veja o resultado */ velAndar *= .85; /*esta funo faz o bendito scrolling*/ movimento(this, terreno_mc, plataforma_mc, paredes_mc, velAndar); if( pulando ) { /* mais fsica aqui, veja na figura 9 o que acontece aqui*/ this._y -= velSaltar; velSaltar -= 1.8; if (velSaltar<0) caindo = true; if (velSaltar <-15) velSaltar = -15; } /* indica que o personagem emcima da plataforma, logo ele no est * caindo e nem pulando claro! E setamos novamente */ if ( colisao_plataforma( _root.plataforma_mc, this) && caindo) { velSaltar = 20; pulando = false; caindo = false; } }; function colisao_plataforma(obj1:Object, obj2:Object) { return obj1.hitTest(obj2._x, obj2._y+60, true);
152. 153. 154. 155. 156. 157. 158. 159. 160. 161. 162. 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174. 175. 176. 177. 178. 179. 180. 181. 182. 183.
} function colisao_paredes(obj1:Object, obj2:Object, vel:Number) { return (obj1.hitTest(obj2._x-5, obj2._y+60, true) or obj1.hitTest(obj2._x+40, obj2._y+60, true)) } function movimento(personagem_obj:Object, terreno_obj:Object, limite_obj:Object,paredes_obj:Object, velocidade:Number) { if(direcao == direita) { /*se obedecer a condio abaixo, quem anda o cenrio*/ if(personagem_obj._x > 200 and terreno_obj._x >=-1853) { terreno_obj._x -= velocidade; limite_obj._x -= velocidade; paredes_obj._x -= velocidade; } else personagem_obj._x += velocidade; } if(direcao == esquerda) { if(personagem_obj._x < 100 and terreno_obj._x < 0) { terreno_obj._x -= velocidade; limite_obj._x -= velocidade; paredes_obj._x -= velocidade; } else personagem_obj._x += velocidade; } }
"text-align: justify;">
Consideraes Finais
"text-align: justify;">Bom pessoal, ento isso. espero que tenham gostado fiz o mximo par ser claro e objetivo, dificilmente vocs encontraram um tutorial completo e comentado passo-a-passo de como contruir uma fase inteira de um game. Claro que poderiam ser abordados ainda mais assuntos, mas seria muito trabalho repetido e estenderia muito este artigo. Procurei abordar o que necessrio para se criar um game deste gnero. Agora coloque sua imaginao e criatividade e modfique o quanto quiser e aperfeioe para fique ainda melhor, como havia dito antes quero que entendam a tcnica e no apenas aprender a fazer o jogo do Megaman, o meu intuito que possam criar qualquer jogo com uma folha de sprites na mo e muita criatividade. "text-align: justify;">O Frame gameover eu no fiz por que fica a seu cargo decidir o que acontecer depois que o jogo acaba, no meu caso mostrei apenas meu nome e endero de email com o ttulo do artigo. O barulho que voc ouve no incio do jogo apenas um arquivo inicio.wav que coloquei no primeiro frame do megaman_mc s pra dar mais emoo. Pra utiliz-lo basta import-lo para a biblioteca via menu file>import->to library. "text-align: justify;">Se encontrarem problemas, vocs tero em mos o mesmo cdigo que usei para o exemplo funcional que est no incio deste artigo. Olhe com cuidado cada etapa pois so muitos detalhes onde a falta de um causar um erro no game. Creio que no seja facil para quem est comeando, mas estude bem os artigos anteriores para que se familiarize com a forma de como se programa um game. Fa vrias
vezes se possvel, a prtica estimula a compreenso. Autor: Mrcio Silva - Colunista de Flash & ActionSctipt MXSTUDIO.
ZOOM
Neste tutorial aprenderemos como aplicar zoom numa imagem, objeto,etc usando o ActionScript 2.0. Ao passar o mouse sobre o boto a imagem aumenta, ao mover o mouse para fora dele, a imagem volta a ficar pequena.
Download (arquivo fonte )Passo 1 Crie um novo documento Flash, navegue at Modify > Document (Ctrl+J) e configure Width com 330 px e Height com 440 px. Altere o Frame Rate definindo-o como 20 fps (Frames per Second).
Obs.: escolhi estes valores para altura e largura devido imagem escolhida. Uma dica: se trabalhar com uma imagem diferente, escolha a mesma largura dela e uma altura um pouco maior para incluir o boto, ok? Passo 2 D um clique duplo na layer 1 para renome-la como fundo. Inclua uma nova layer e nomeie-a zoom. Coloque um fundo qualquer para ilustrar (por exemplo um retngulo com a cor de sua preferncia).
Passo 3 Trave a layer fundo clicando na coluna na direo do cadeado, selecione a layer zoom, navegue at File > Import > Import to Stage (Ctrl+R) e importe uma imagem qualquer (ou um objeto).
Passo 4 Com a imagem ainda selecionada, pressione F8 no teclado (para converter em Smbolo) e a converta em um Movie Clip.
Passo 5 Abra o Properties Panel (Ctrl+F3) e nomeie a instncia do MovieClip (chamaremos de MC daqui por diante) como zoom.
Passo 6 D um clique duplo na instncia do MC (zoom) ou clique com o boto direito do mouse e opte por Edit in Place. Passo 7 Clique no frame 120, pressione F6, abra o Action Script Panel (F9) e digite o comando: stop();
Passo 8 Selecione o logotipo do frame 1 e escolha a Free Transform Tool (Q) e diminua a imagem.
Passo 9 Clique novamente no frame 1 e no Properties Panel (Ctrl+F3) configure Tween como Motion.
Passo 10 Volte para a Scene 1 e insira uma nova layer nomeando-a como boto.
Passo 11 Clique sobre o frame 1 da layer boto, selecione a Text Tool (T) e escreva Zoom. Com o texto ainda selecionado, pressione a tecla F8 para convert-lo em um boto.
Passo 12 Com o boto ainda selecionado, abra o Action Script Panel (F9) e digite o seguinte cdigo: on (rollOver) { _root.mouse_over_zoom = true; } on (rollOut) { _root.mouse_over_zoom = auxiliar; Passo 13 Insira uma nova layer nomeando-a como AS. Selecione o primeiro frame, abra o Action Script Panel (F9) e digite o seguinte cdigo: _root.zoom.onEnterFrame = function() { // Este zoom o MC e no o boto! if (mouse_over_zoom) { _root.zoom.nextFrame(); } else { _root.zoom.prevFrame(); } }; Passo 14 Teste seu filme (Ctrl+Enter).
Flash - Conhecendo o Flash CS3 - Parte 3

Ol Comunidade. Nessa terceira parte da srie de arquivos sobre o Flash CS3, irei falar sobre o ActionScript 3.0. Mostrar algumas mudanas em relao ao ActionScript 2.0, mostrar as novidades e algumas outras coisas. Mais uma vez, para a visualizao dos exemplos nesse tutorial necessrio o Plugin do Flash Player 9.
Novo painel de Aes
Finalmente, novos recursos foram adicionados no painel Actions do Flash CS3, recursos que iro facilitar e muito a vidas dos programadores em ActionScript. Agora, possvel esconder uma determinada parte de seu cdigo, evitando assim que o programador se perca nas inmeras linhas de ActionSript criado, agilizando o trabalho e tornando-o mais produtivo. Para usar esse recurso, basta selecionar o trecho do seu cdigo que deseja esconder e clicar no sinal de menos para esconder o trecho do seu cdigo.
Outra possibilidade usar o menu:
1:
Esconde
cdigo
entre
as
chaves,
{}.
2: Esconde o cdigo selecionado, selecione Alt para esconder o que no estiver selecionado. 3: Mostrar todo o cdigo.
Outro recurso interessante a possibilidade de adicionar comentrios. Para usar esse recurso basta selecionar o trecho do seu cdigo que deseja comentar e clicar no balozinho Apply block comment.
Para comentrios simples (em uma linha) basta usar o boto Apply line comment.
possvel remover um comentrio do seu cdigo, basta selecionar o comentrio que voc no quer mais usar e clicar no balo Remove comment.
Compiler Erros
Talvez, a melhor novidade do Flash a possibilidade de encontrar aonde est seu erro. Antigamente, sempre que aparecia algum erro tnhamos que ficar procurando para ver o que poderia estar errado, agora basta clicar duas vezes na mensagem de erro que a linha errada mostrada, economizando um bom tempo dos programadores.
O ActionScript 3.0
Agora vou falar um pouco sobre o ActioScript 3.0. Diferentemente do que a maioria pensava (inclusive eu), as diferenas entre o ActionScript 3.0 e o ActionScript 2.0 no so to grandes assim, muita coisa do ActionScript 2.0 continua.
1) Propriedades
O primeiro destaque fica com as Propriedades. No ActionScript 2 quando queramos mudar alguma propriedade de um MovieClip, como Alpha, Visible, X, Y, etc, utilizva-mos o underline antes da propriedade.
1. instanciaMC._x = 50;
2. instanciaMC._y = 50; 3. instanciaMC._alpha = 100;
Agora, no ActionScript 3 o underline foi removido das propriedades.

1. instanciaMC.x = 50; 2. instanciaMC.y = 50; 3. instanciaMC.alpha = 1;
Em algumas propriedades, a forma como os valores so passados foi mudado, a propriedade alpha por exemplo no ActionScript 2 aceitava nmeros de 0 a 100, agora no ActionScript 3 aceita nmeros de 0 a 1. Ento se precisamos usar 40% de transparencia, o cdigo ficaria assim:
1. instanciaMC.alpha = 0.4;
Fora, que algumas propriedades mudaram de nome, por exemplo _xscale e _yscale passaram a ser chamados por scaleX e scaleY, aceitando somente nmeros de 0 a 1.
2) Propriedades Globais
Outro mudana importante fica por quanta das Propriedades Globais, que tambm esto sem o underline. As propriedades _global e _level foram removidas, o propriedade _root foi trocada por stage, entre outras mudanas.
3) Eventos de Manipulao (Event Handling)

Talvez, umas das maiores mudanas do ActionScript 3 seja os eventos de manipulao, eventos como onPress, onRelease, onRollOver, onRollOut, etc. No ActionScript 3 esses eventos no existem mais, agora quando precisamos utilizar esses eventos devemos usar o addEventListener.
1. 2. 3. 4. instanciaMC.addEventListener(MouseEvent.CLICK, funcaoPress); function funcaoPress(event:MouseEvent) { /* Aes do boto */ }
No exemplo acima, para o MovieClip com instancia de instanciaMC, quando se clicar do Mouse em cima dele vai chamar a funo funcaoPress. Alm do evento CLICK existem outros eventos como o MOUSE_DOWN, MOUSE_UP, MOUSE_OVER, MOUSE_OUT, etc, todos na Classe MouseEvent. Outra mudana considervel com relao a aes em MovieClips, Botes, Componentes, etc. Usando o ActionScript 3 no se pode mais selecionar um MovieClip por exemplo e adicionar uma ao nele.
Agora s se pode colocar aes no frame, evitando assim que alguma ao se perca quando se remove um determidado MovieClip ou Boto e evitando que seu swf trave (muitas aes sobre objetos pode travar seu swf).
4) Importando Smbolos da Biblioteca

No ActionScript 2, quando precisvamos importar um MovieClip da biblioteca por exemplo, utilizvamos o mtodo attachMovie. Agora no ActionScript 3 esse mtodo foi removido e agora usamos o mtodo addChild. Outra mudana fica com o Linkage.
Reparem que agora no preenchemos mais o campo Identifier e sim o campo Class. Esse campo o nome da Classe que utilizaremos para esse MovieClip. Se voc no estiver usando uma Classe para esse MovieClip que voc quer importar, utilize um nome para identificar esse smbolo (como fazamos no campo Identifier). Com isso, o Flash cria um esqueleto da Classe para usar o nome do smbolo. Agora para importar usamos:
1. var minhaInstancia = new minhaClasse(); 2. addChild(minhaInstancia);
Reparem que eu crio uma instancia da Classe que foi criada quando exportei o MovieClip. Vamos a um outro exemplo para um maior entendimento. Iremos criar um novo MovieClip com o nome pequeno, exportaremos esse MovieClip para que possamos importa-lo da biblioteca. Preencheremos os campos como na imagem:
Agora, para importar esse MovieClip usaremos:

1. var mc = new pequeno(); 2. addChild(mc);
Com isso importo o MovieClip para o palco, se quiser adiciona-lo em um outro MovieClip basta colocar a instancia desse MovieClip na frente do addChild. No exemplo, irei importar o MovieClip recebe dentro do MovieClip com instancia de master:
1. var mc = new pequeno(); 2. master.addChild(mc);
5) Carregando Imagens e SWFs

Agora para carregar imagens e SWFs no ActionScript 3 no usaremos mais loadMovie, loadMovieNum ou a Classe MovieClipLoader, j que foram substituidas pela Classe Loader. Pode at parecer ser algo ruim remover o loadMovie e a Classe MovieClipLoader, mas se pensarmos direito, agora s temos uma funo que carrega imagens e SWFs, bem melhor para os iniciantes que no vo ficar perdidos entre vrias funes que fazer a mesma coisa. Para carregar uma imagem bem simples, criaremos um MovieClip em branco com instancia de holder, usamos o seguinte cdigo:
1. var loader:Loader = new Loader(); 2. loader.load(new URLRequest(imagemLogo.jpg)); 3. holder.addChild(loader);
Outro exemplo:
1. 2. 3. 4. var loader:Loader = new Loader(); var endereco:URLRequest = new URLRequest(imagemLogo.jpg); loader.load(endereco); holder.addChild(loader);
6) Abrindo pginas
O comando getURL outro comando removido do ActionScript 3. Agora para abrir uma nova pgina usaremos o mtodo navigateToURL:
1. navigateToURL(new URLRequest(http://www.mxstudio.com.br), _blank);
Outro exemplo:
1. var endereco = http://www.mxstudio.com.br; 2. var request:URLRequest = new URLRequest(endereco); 3. navigateToURL(request, _blank);
7) Carregando arquivos XML

Agora usar arquivos XML no ActionScript 3 muito mais fcil e prtico. No ActionScipt 2 os ns de cada item do XML tinham que ser achados usando childNodes, firstChild, nodeValue, nodeName entre outras propriedades da Classe XML. Agora no ActionScript 3 os ns so acessados com o nome de cada n, facilitando e muito aos que esto comeando a usar XML no Flash. Vamos a um exemplo de como usar XML no ActionScript 3. Comearemos criando nosso arquivo XML, de o nome de arquivo.xml.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. <?xml version=1.0 encoding=utf-8?> <musicas> <faixa> <artista>The Beatles</artista> <nomeMusica>Cant Buy Me Love</nomeMusica> <nomeCd>Beatles 1</nomeCd> </faixa> <faixa> <artista>Red Hot Chili Peppers</artista> <nomeMusica>Californication</nomeMusica> <nomeCd>Californication</nomeCd> </faixa> <faixa> <artista>Pearl Jam</artista> <nomeMusica>Alive</nomeMusica> <nomeCd>Ten</nomeCd> </faixa> </musicas>
Criaremos um MovieClip com o nome de mc, esse MovieClip ser importado da biblioteca, portando seguiremos a seguinte configurao:
Dentro desse MovieClip criaremos trs campos de texto dinamico, eles iro receber os dados do XML. Os nomes em vermelho so as instancias dos campos.
Por fim, no primeiro frame de nosso arquivo colocaremos a seguinte ao:

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. var total:Number; var xml:XML = new XML(); var xmlArquivo:URLLoader = new URLLoader(); xmlArquivo.load(new URLRequest(arquivo.xml)); xmlArquivo.addEventListener(Event.COMPLETE, monta); function monta(event:Event) { xml = new XML(event.target.data); total = xml.faixa.length(); for (var i=0; i<total; i++) { var MC:MovieClip = new mc(); addChild(MC); MC.x = MC.width*i+MC.x+i; MC.campo1.text = xml.faixa.nomeMusica[i]; MC.campo2.text = xml.faixa.artista[i]; MC.campo3.text = xml.faixa.nomeCd[i]; } }
E o resultado ser algo parecido com esse:
Classes no ActionScript 3
A estrutura de uma Classe criada com ActionScript 3 no muito diferente de uma Classe criada com ActionScript 2. Talvez a maior mudana seja o uso da palavra package para iniciar uma Classe. No ActionScript 2, se uma Classe estava dentro de um pacote, voc precisava passar o pacote no nome da Classe.
1. class flash.display.BitmapData { 2. /* Minhas aes aqui */ 3. }
No ActionScript 3, basta declarar a qual pacote essa Classe pertence.

1. 2. 3. 4. 5. package flash.display { public class BitmapData { /* Minhas aes aqui */ } }
O mesmo vale para Classes que ficam em pastas, nesse exemplo a Classe que estou criando est na pasta mxstudio:
1. 2. 3. 4. 5. package mxstudio { public class minhaClasse { /* Minhas aes aqui */ } } Consideraes finais
Deu para perceber que houve muitas mudanas no ActionScript, mudanas para melhorar a performance de uma aplicao e tornar o ActionScript uma linguagem de programao mais completa. Eu recomendo a leitura do ActionScript 2.0 Migration reference da Adobe, que mostra o que ficou, o que mudou, o que saiu, etc. Espero que tenham gostado dessa terceira parte dos tutoriais sobre o Flash CS3, procurei nesse artigo mostrar as mudanas mais bsicas do ActionScript, as demais mudanas vocs podero encontrar no link que passei, no Help do Flash e no prprio painel de Compiler Erros que apresenta o problema e a soluo. Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, l voc podero encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com
Conhecendo o Flash CS3 - Parte 2

Natan D. Alves
Colunistas desde: 2007 Matrias publicadas: 13
Flash - Conhecendo o Flash CS3 - Parte 2

Ol Comunidade. Nessa segunda parte da srie de arquivos sobre o Flash CS3, vou mostrar a voc sobre as novidades com interao do Flash com os produtos da Adobe como Photoshop, Ilustrator e Fireworks, vou falar sobre 9slice scaling, Filtros, sobre a criao de animaes MotionTween via ActionScript e sobre os novos componentes do Flash. Para a visualizao dos exemplos desse tutorial necessrio que tenha instalado o Plugin do Flash Player 9.
Importando arquivos do Photoshop e Illustrator
Agora possvel importar diretamente no Flash arquivos do Illustrator (AI) e Photoshop (PSD). Anteriormente no Flash 8 quando se importava algum arquivo PSD o Flash importava como se fosse uma imagem, ignorando tudo o que voc fez impossibilitando a edio no Flash. No Flash CS3 diferente, quando se importa um arquivo PSD ou AI no Flash, voc ver vrias opes de importao. Por exemplo, podemos no importar determinado objeto, importar um determinado smbolo em um MovieClip, editar, etc. Vamos a um exemplo importando um arquivo do Photoshop. Iniciaremos um novo arquivo, para importar o arquivo iremos em File > Import > Import to Stage ou Import to Library. Quando selecionar o arquivo a seguinte tela aparece:
1: 1: Todas as camadas e objetos do arquivo PSD foram mantidos, podemos selecionar qual item da camada importar, at mesmo a camada inteira importar no flash.
2: Podemos escolher o que fazer com o Objeto a ser importado. Podemos importar um determinado objeto em um MovieClip, mudar a qualidade de uma imagem, edio ou no de algum texto, etc. 3: Podemos importar o arquivo em camadas ou frames, manter a ordem das camadar e modificar o tamanho do palco do Flash para se adaptar ao tamanho original do arquivo PSD. Para arquivos do Illustrator, o processo de importao o mesmo de um arquivo PSD.
1:Como para arquivos do Photoshop, podemos escolher o que importar no Flash, desde imagens, texto, bitmap, etc. 2: podemos importar uma imagem como um Bitmap para edita-las, importar um contedo em um MovieClip, etc. 3: Podemos importar o arquivo em camadas ou frames, importar como smbolo ou uma simples imagem de bitmap.
Importando arquivos do Fireworks
Aos usurios do Fireworks no se preocupem, o Flash CS3 tambm importa arquivos PNG do Fireworks. O processo de importao o mesmo de arquivos PSD e AI, basta ir em File > Import > Import to Stage ou Import to Library. Ao selecionar o arquivo a seguinte imagem aparecer:
Agora, podemos importar o arquivo png como um nico arquivo bitmap, importar uma determinada pgina do Fireworks, importa em MovieClips e em frames ou importar em MovieClips e Cenas, manter ou editar um objeto e mante ou editar um texto.
9-slice scaling
Uma novidade bem legal do Flash CS3 o 9-slice scaling. Basicamente, 9-slice scaling significa 9 fatias de dimensionamento, ou seja, basta delimitar uma rea que poder ser modificada. Um exemplo bsico acontecia quando crivamos um MovieClip como um boto. Se tnhamos que aumentar ou diminuir esse MovieClip, no podamos dimensionar ele usando a ferramenta Scale (Q), porque tudo que estava no MovieClip iria aumentar, estragando nosso boto.
Com o 9-slice scaling, isso j no acontece. Basta arrastar essas barras na posicao que desejar. A rea que no ser modificada a rea do meio.
Para utilizar esse recurso, quando criar seu MovieClip ou Boto, abra a aba Advanced e selecione a opo enable 9-slice scaling.
Filtros
Agora possvel copiar e colar Filtros de um Objeto para outro, economizando um tempo precioso de criao j que anteriormente para cada Objeto criado deveria colocar o Filtro manualmente, o que era trabalhoso e chato. Para utilizar, basta abrir o Painel Filters, aplicar um filtro a um Objeto (como um MovieClip por exemplo) e depois clicar no boto Copy Filter e selecionar Copy Selected para copiar o Filtro selecionado ou Copy All para copiar todos os Filtros aplicados.
Depois s colar os filtros no Objeto desejado clicando no boto Paste Filters.
Criando animaes MotionTween via ActionScript
Uma das maiores e mais legais novidades do Flash CS3 a possibilidade de criar animaes MotionTween via ActionScript. Para fazer isso simples, crie uma animao MotionTween que preferir, selecione o primeiro frame e segure a tecla Shift e clique no ltimo frame (selecionando todos os frames da animao), depois vai em Edit > Timeline > Copy Motion as ActionScript 3, ou clicar com o boto direito do Mouse na Time-line e selecione o comando Copy Motion as ActionScript 3.
Ao selecionar o comando, O Flash abrir uma nova tela perguntando qual a instancia do MovieClip a ser animado com esse ActionScript.
Agora basta criar um MovieClip com a mesma instancia passada no passo anterior e abrir o painel Actions e colocar as aes no frame que o MovieClip criado est.
Novos Componentes
No Flash CS3 chegamos a terceira gerao dos Componentes UI (user interface), inexplicavelmente a Adobe no atualizou os componentes Accordion, Alert, DataChooser, DateField, Menu, MenuBar, Tree e Window. No Flash CS3 novos Componentes foram feitos, ColorPicker, Slider e TileList. Mesmo assim, no existia motivo para a Adobe no ter atualizado eles, resta agora criar o seu prprio componente para substituir os Componentes removidos. Ainda possvel utilizar os Componentes V2, basta criar um arquivo ActionScript 2.0.
Apesar da mancada, a Adobe foi legal conosco. Diferentemente do que acontecia com a segunda gerao dos Componentes, agora podemos personalizar os Componentes com maior facilidade. Basta arrastar o Componente para o palco e clicar duas vezes em cima dele (ou clicar com o boto direito e ir em Edit) para que possa editar o Componente da maneira que achar melhor.
Consideraes finais
impossvel no se animar com as novidades do Flash CS3. Todas elas visam melhorar a produtividade e tornar a vida dos Designers e dos Programadores muito mais fcil. Para os que no possuem o novo Flash, basta ir no site da Adobe e fazer o Download do Trial para se animar com as novidades. Espero que todos tenham aproveitado o artigo, procurei mostrar as melhores novidades na parte de criao do Flash CS3. No prximo artigo irei falar um pouco sobre o novo ActionScript 3, mostrar algumas coisas bsicas sobre as mudanas do ActionScript 2 para ActionSctipt 3. Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, l voc podero encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com
Flash - Conhecendo o Flash CS3 - Parte 1.

Ol Comunidade. Nessa primeira parte da srie de artigos sobre o Flash CS3, estarei mostrando as novidades visuais, os novos painis e sobre as novas ferramentas do Flash CS3.
Cara nova
Comearemos pela nova tela de boas vindas:
1: Menu para abrir os arquivos recem utilizados. 2: Menu de criao com tipos de arquivos pr-estabelecidos. 3: Menu de criao com base em Templates com novas opes para portteis. 4: rea de informaes de ajuda assim e links teis no site da Adobe Agora vamos analisar as mudanas na interface do Flash. O que mais chama ateno da nova interface so os novos painis. O Flash passa a receber painis semelhantes a outros produtos do Creative Suite 3, que visa uma maior organizao e maior facilidade de trabalho com multiplos programas. O painel de Ferramentas foi mudado para uma nica coluna. Esse novo painel economiza um bom espao de sua tela.
Podemos mudar a aparencia do painel, basta clicar na Seta dupla que tem acima do painel para mudar a aparencia de uma para duas colunas de ferramentas.
Outro destaque fica para os painis laterais. Agora podemos mudar a aparecencia dos paineis para que aparea texto, cones ou texto e cones.
possvel mudar a aparencia desses painis clicando nas Setas Duplas no topo do painel.
Outra maneira clicar e arrastar no prendedor at que voc fique contente com a aparencia do painel.
Vamos falar um pouco sobre uma nova ferramenta adicionada no Flash, a ferramenta que possibilita a criao de formas personalizadas, formas como retangulos e crculos que agora podem ter bordas arredondadas de forma fcil e da maneira que desejar.
O destaque fica para a possibilidade da criao de bordas arredondadas mas com mais controle, escolhendo qual lado deseja ter uma borda. Uma nova ferramente foi melhorada no Flash CS3, a ferramenta Pen Tool. Agora, a Pen Toll est muito parecida com a Pen Toll do Ilustrator e muito mais simples e prtica na hora de criar algum vetor no Flash.
Consideraes Finais
Espero que todos tenham aproveitado esse artigo, procurei mostrar mais as novidades visuais dos painis e novas ferramentas. No prximo artigo irei falar sobre as novas possibilidades de integrao do Flash com outros produtos da Adobe (como Ilustrator e Photoshop), sobre a criao de animaes via ActionScript e sobre os novos Componentes. Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, l voc podero encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com Um abrao a todos e at a prxima. Autor: Natan D. Alves - Moderador do Frum de Flash & ActionSctipt MXSTUDIO
NIMAO COM SOMBRA

Com recursos muito simples podemos fazer algumas animaes interessantes em Flash.
Obs.: devido a um grande nmero de pessoas que fazem perguntas bsicas (como criar um keyframe, como criar um smbolo grfico, etc), a partir deste tutorial estaremos linkando essas tarefas bsicas a exemplos de como desenvolver a respectiva tarefa. Por exemplo, no item 1 deste tutorial, se no souber como definir o frame rate, basta clicar sobre o link respectivo e uma nova janela ser aberta mostrando como proceder. Eventualmente novas tarefas sero acrescentadas, de acordo com as necessidades dos tutoriais.
Criando a cidade
1. Crie um novo documento Flash com as dimenses 580 x 427 px. Defina seu frame rate para 24 fps. 2. Importe a imagem de uma cidade para o Stage.
3. Renomeie a layer para cidade. 4. Trave essa layer e crie uma nova layer nomeando-a como contorno.
Obs.: travamos a layer cidade para que no corramos o risco de selecion-la e desloc-la indevidamente. 5. Selecione a Line Tool (N) e defina uma cor contrastante para o trao (por exemplo o vermelho) e trace o contorno dos prdios da cidade.
6. Preencha o interior do contorno com a cor preta (#000000).
7. Selecione a Selection Tool (V), clique no interior do contorno que acabamos de criar para selecion-lo (apenas o preenchimento) e transforme-o num smbolo graphic nomeando-o como cidade_gr.
Criando o reflexo da cidade
8. Duplique o smbolo grfico cidade_gr e arraste-o para baixo.
Edite o smbolo cidade_gr e apague o contorno (linha vermelha), pois ele no serve para mais nada. 9. Como as duas instncias do smbolo esto na mesma layer, vamos separ-las, uma em cada layer. 10. Apague a layer original (contorno) e renomeie as duas novas layers para silhueta (a de cima) e sombra (a de baixo).
11. Selecione a instncia do smbolo grfico cidade_gr que est na layer sombra e no menu, navegue at Modify > Transform > Flip Vertical para girar verticalmente esta instncia. A seguir ajuste a sua posio como segue:
Obs.: uma alternativa a este procedimento usar a Free Transform Tool (Q) para obter o mesmo resultado. 12. Selecione a Selection Tool (V), clique sobre a instncia do smbolo grfico cidade_gr que est na layer sombra e altere o Brightness para 85%.
13. Crie uma nova layer e denomine-a cu.
14. Selecione a Rectangle Tool (R) e desenhe um retngulo com cor de preenchimento #84E7FF, 580 px de largura e 250 de altura, posicionado em X: 0 e Y:0 e depois reposicione a layer cu logo abaixo da layer sombra.
15. Transforme o retngulo que acabamos de desenhar num smbolo grfico denominando-o ceu_gr (o procedimento anlogo ao que fizemos anteriormente com o cidade_gr). 16. Crie uma nova layer, denominando-a mar e posicione-a entre as layers cu e sombra. 17. Clique no frame 1 da layer mar, arraste uma instncia do ceu_gr da Library para ele e reposicione-o como segue:
18. Altere o Brightness do ceu_gr da layer mar para 85%.
Criando a animao do balo
19. Crie uma nova layer e denomine-a balo.
20. Crie uma silhueta de balo ou importe para o Flash no frame 1 da layer balo posicionando-a como segue.
21. Transforme o balo num smbolo grfico e denomine-o balao_gr. 22. Clique no frame 300 da layer balo, segure a tecla Shift e tecle no frame 300 da layer cidade e tecle F5 para criar novos frames.
23. Selecione o frame 300 da layer balo e tecle F6 para criar um keyframe nele. Agora temos uma cpia do balao_gr neste frame. 24. Reposicione a instncia do balao_gr do frame 300 como segue:
25. Crie um motion tween entre os frames 1 e 300 da layer balo.

Criando a animao da sombra do balo
26. Crie uma nova layer e denomine-a sombra do balo posicionando-a entre as layers mar e sombra. 27. No primeiro frame desta layer, insira uma instncia do balao_gr, posicionando-o no reflexo do cu em posio anloga ao balo:
28. Altere seu Brightness para 85% e faa um Flip Vertical.
29. Faa um procedimento anlogo ao que fez para criar a animao do balo para criar a animao da sombra.
30. Delete a layer cidade, pois no mais necessria. 31. Teste seu filme teclando Ctrl+Enter.
Intro
INTRO
Aprenderemos a construir uma Intro que pode ser usada numa Galeria de Fotos, por exemplo
Download Arquivo fonte 1. Crie a seguinte estrutura de layers em seu novo arquivo Flash de dimenses 625 x 415 px (criei o meu com fundo preto):
2. V at o frame 570 da layer AS, crie um Keyframe em Branco teclando F7. 3. Abra o painel Actions (tecle F9) e digite o seguinte cdigo: stop(); O objetivo que a animao pare nesse ponto (ao chegar ao seu final). 4. No menu, navegue at Insert > New Symbol (Ctrl + F8), nomeie o novo smbolo como Academia de Xadrez (Vertical). 5. Clique sobre a Text Tool (T) e digite www.academiadexadrez.com, com as seguintes configuraes:
Para conseguir esse efeito, no painel Properties, aps o texto ter sido digitado, clique em Change orientatin of text opte por Vertical, Left to Right e a seguir, clique no boto Rotation. 6. Volte para a cena principal, clique no frame 60 da layer Ttulo Vertical e insira um keyframe nele. 7. Arraste uma instncia do Academia de Xadrez (Vertical) para esse keyframe configurando como segue:
8. Tecle no frame 70, tecle F6 para criar um keyframe idntico ao que acabamos de criar. 9. Clique com o boto direito do mouse entre qualquer um destes keyframes que criamos e opte por Create Motion Tween. 10. Clique no keyframe 60, e no painel Properties, configure como a seguir:
11. V at o frame 570 e tecle F5 para criar um frame no mesmo. O objetivo que este ttulo permanea na
animao at o final dela. 12. Vamos agora colocar um link para a repetio da animao quando ela chegar ao final, caso o usurio clique nele. Crie um keyframe no frame 570 das layers BI e Repetir (Selecione os dois frames segurando o Shift e tecle F5). 13. No frame 570 da layer Repetir, digite o texto com o mesmo nome dela. 14. No frame 570 da layer BI, crie um boto invisvel (s com o Hit) com as configuraes a seguir:
15. Clique no frame 570 da layer AS, abra o painel Actions (F9) e acrescente o cdigo do boto. Aps inseri-lo, deve obter um cdigo como a seguir: stop(); repetir_bt.onRelease=function(){ gotoAndPlay(1); } Ao clicar neste boto a animao reiniciar.
Preparando as animaes
16. Crie um novo MovieClip (Insert > New Symbol, escolha MovieClip) e denomine-o como Animao 00. 17. Crie a seguinte estrutura de layers:
18. Clique no frame 79 da layer AS, crie um keyframe (F7), abra o painel Actions e digite o seguinte cdigo: stop(); Afinal, no queremos que a animao fique em loop. 19. Selecione os frames 79 das layers restantes (segurando a tecla Shift enquanto clica no primeiro e ltimo frame a ser selecionado) e crie frames teclando F5.
20. No frame 1 da layer Animao de Trao Inferior desenhe um trao com o Line Tool (N) e configure como segue no painel Properties:
21. Transforme-o em um smbolo grfico teclando F8 e denominando-o como Linha Horizontal gr (observe se escolheu graphic no painel que se abriu). 22. Clique no frame 20 e crie um keyframe (F6) . 23. Clique novamente no frame 1 e reconfigure o trao (no painel Properties) como segue:
24. Clique com o boto direito do mouse entre qualquer frame entre o 1 e o 20 e opte por Create Motion Tween. Com isso, o trao crescer na tela. 25. No frame 21 da layer Ttulo, digite Academia de Xadrez depois de clicar na Text Tool (T) e transforme-o num smbolo grfico com o mesmo procedimento que fizemos anteriormente:
26. Crie um novo keyframe no frame 30 (F6). 27. Volte ao keyframe 21 e troque a cor do texto para Branco (#FFFFFF). Faa isso mudando o parmetro Color no painel Properties para Tint e escolhendo no quadradinho ao lado a cor desejada. 28. Clique entre qualquer um dos keyframes que estamos trabalhando e crie um Motion Tween como fizemos anteriormente. 29. Clique no frame 31 da layer Site, crie um keyframe (F7), digite o texto www.academiade xadrez, transforme-o num smbolo grfico (denomine-o Site) posicionando-o como a seguir:
30. Crie um keyframe (F6) no frame 40, posicionando o texto como segue:
31. Crie um Motion Tween entre eles como fizemos anteriormente. 32. Agora faremos um procedimento anlogo para animar o slogan. O texto que usaremos Onde os Reis se encontram. As duas instncias deste smbolo grfico que criamos (chamamos de Slogan) estaro nos frames 31 e 40 assim como o anterior e haver um Motion Tween entre eles. Para facilitar, eis a posio inicial e final dos mesmos, respectivamente:
Pronto! Nossa primeira animao est pronta para ser inserida na cena principal. 33. Volte cena principal, clique no frame 1 da layer 00 que est sob a pasta Animaes e insira uma instncia do MovieClip Animao 00 nele. Para isso basta arrast-la da Library para o Stage, posicionando como segue:
34. Clique no frame 79 e crie um frame (F5). Caso seja necessrio, exclua todos os frames desta layer a partir do 80, assim s teremos frames do 1 ao 79.
Criando objetos que sero usados nas animaes
- Fade In/Out
35. Crie um novo smbolo Grfico e denomine-o como Quadrado que consiste em um quadrado preto de 100100 pixels, posicionando-o em X:0 e Y:0. No o coloque no Stage ainda. 36. Crie um novo smbolo de MovieClip e denomine-o como Quadrado Pto-Am. 37. Chame suas duas layers de AS e Quadrado Fade. 38. No primeiro frame da layer Quadrado Fade, arraste uma instncia do smbolo grfico Quadrado posicionando-o em X:-50 e Y:-50.] 39. Clique no frame 6 da mesma layer e tecle F6 para criar uma cpia do keyframe 1.
Criando as animaes com as imagens
35. Crie um novo MovieClip (Insert > New Symbol, escolha MovieClip) e denomine-o como Animao 01. 36. Crie a seguinte estrutura de layers:
Obs.: para criar a camada de mscara, clique com o boto direito do mouse sobre ela e opte por Mask no menu de contexto. 37. Crie um keyframe na layer Fundo 1 e arraste para ele uma instncia de uma imagem previamente importada para a library, posicionando-a em X: -312.5 e Y: -207.5. Observe que a imagem tem o mesmo tamanho do Stage (625 x 415px). 38. Clique no frame 60 e insira um frame (F5). 39. Clique no frame 60 da layer Grade e tecle F5 para inserir frames at a. 40. Volte ao frame 1 da mesma layer e arraste uma instncia da Grade* para o Stage, posicionando-a no mesmo lugar da imagem. (*) Grade uma imagem de 625 x 415 px que preparei num software externo (no meu caso foi no Fireworks, mas poderia ser tambm no Photoshop ou similares), voc pode obter uma cpia desta imagem no fonte deste tutorial. Basicamente um retngulo onde recortei retangulos menores com bordas arredondadas. 41. Agora vamos criar a mscara para a animao da imagem miniatura. Crie um keyframe no frame 22 da layer Mscara, arraste uma instncia do smbolo grfico Grade Duplo Hor gr* para a mesma e posicione-o em X: 107.5 e Y: -207.5. (*)No Fireworks eu criei previamente um retngulo com o tamanho de dois quadrados de nossa grade,
importei-o para o Flash, transformei-o em smbolo grfico denominando-o Grade Duplo Hor gr. 42. Clique no frame 53 e crie frames at ele teclando F5. Nossa mscara est pronta. 43. Crie um keyframe no frame 22 da layer Miniatura 01 e arraste uma istncia do M01 gr (imagem importada previamente para a Library, depois de ser preparada no Fireworks), posicionando-o em X: 312.5 e Y: -207.5 que a posio inicial da animao. 44. Crie uma cpia do keyframe no frame 31 teclando F6, mas reposicione-o com as mesmas coordenadas da Mscara. 45. Crie um Motion Tween entre qualquer um destes frames, mas desta vez, altere o Ease para 100. 46. Crie uma cpia do keyframe no frame 44 e no 53 teclando F6. 47. Clique no frame 53, selecione a miniatura e reposicione-a em X: -102.5 e Y: -206.5, assim a miniatura entrar pela esquerda e sair pela direita. Se necessrio, exclua os frames 54 a 60 das duas layers que acabamos de trabalhar. Agora precisamos colocar na layer Fade In/Out o respectivo efeito. Ento vamos fazer uma pausa para preparlo como um smbolo de MovieClip, pois ele ser usado nas outras animaes, assim diminumos o tamanho do arquivo.
- Criando o Fade In/Out
48. Crie um novo smbolo de Movie Clip (Insert > New Symbol; Ctrl + F8) e denomine-o como Fade InOut. 49. Crie a seguinte estrutura de layers:
Para ficar mais fcil a localizao, chameia as colunas da esquerda para a direita com nome de letras e as linhas de baixo para cima com nmeros de 1 a 4. 50. Crie um novo smbolo de MovieClip e denomine-o Quadrado Pto-Am. 51. Neste MC (MovieClip), crie a seguinte estrutura de layers:
52. Crie um keyframe no frame 6 da layer AS, abra o painel Actions (F9) e digite: stop(); 53. Crie um novo smbolo Grfico e denomine-o como Quadrado. Desenhe um quadrado preto com bordas arredondadas (ou importe-o, se o desenhou fora do Flash). 54. Clique no frame 6 desta mesma layer e mude a propriedade Color da cpia do smbolo Grfico que acabamos de copiar neste frame para Tint (cor: #FFFF00, amarelo). 55. Clique em qualquer frame entre o 1 e o 6 para criar um Motion Tween. 56. Volte para o MC Fade In-Out e no frame 1 da layer a4, arraste uma instncia do Quadrado Pto-Am para a posio X:-312 e Y:-207.5 57. Use o mesmo procedimento anterior que utilizamos para criar o Quadrado Pto-Am para criar o smbolo de MC chamado Quadrado Am-Transp, s que o quadrado inicial Amarelo e o final
transparente (Alpha = 0%). 58. Voltando para o MC Fade In-Out, crie um Keyframe no frame 13 da layer a4 e arraste uma instncia do Quadrado Am-Transp para ele na mesma posio do anterior. Com isso faremos o quadrado sumir. 59. Faremos agora procedimentos anlogos alterando os posicionamentos como segue: Layer a3 Quadrado Pto-Am {Frame 2; X:-312.5; Y:-10.5} Quadrado Am-Transp {Frame 14; X:-312.5; Y:-102.5} Layer b4 Quadrado Pto-Am {Frame 2; X:-207.5; Y:-207.5} Quadrado Am-Transp {Frame 14; X:-207.5; Y:-207.5} Layer a2 Quadrado Pto-Am {Frame 3; X:-312.5; Y:2.5} Quadrado Am-Transp {Frame 15; X:-312.5; Y:2.5} Layer b3 Quadrado Pto-Am {Frame 3; X:-207.5; Y:-102.5} Quadrado Am-Transp {Frame 15; X:-207.5; Y:-102.5} Layer c4 Quadrado Pto-Am {Frame 3; X:-102.5; Y:-207.5} Quadrado Am-Transp {Frame 15; X:-102.5; Y:-207.5} Layer a1 Quadrado Pto-Am {Frame 4; X:-312.5; Y:107.5} Quadrado Am-Transp {Frame 15; X:-312.5; Y:107.5} Layer b2 Quadrado Pto-Am {Frame 4; X:-207.5; Y:2.5} Quadrado Am-Transp {Frame 15; X:-207.5; Y:2.5} Layer c3 Quadrado Pto-Am {Frame 4; X:-102.5; Y:-102.5} Quadrado Am-Transp {Frame 15; X:-102.5; Y:-102.5} Layer d4 Quadrado Pto-Am {Frame 4; X:2.5; Y:-207.5} Quadrado Am-Transp {Frame 15; X:2.5; Y:-207.5} Layer b1 Quadrado Pto-Am {Frame 8; X:-207.5; Y:107.5} Quadrado Am-Transp {Frame 16; X:-207.5; Y:107.5} Layer c2 Quadrado Pto-Am {Frame 8; X:-102.5; Y:2.5} Quadrado Am-Transp {Frame 16; X:-102.5; Y:2.5} Layer d3 Quadrado Pto-Am {Frame 8; X:2.5; Y:-102.5} Quadrado Am-Transp {Frame 16; X:2.5; Y:-102.5}
Layer e4 Quadrado Pto-Am {Frame 8; X:107.5; Y:-207.5} Quadrado Am-Transp {Frame 16; X:107.5; Y:-207.5} Layer c1 Quadrado Pto-Am {Frame 9; X:-102.5; Y:107.5} Quadrado Am-Transp {Frame 17; X:-102.5; Y:107.5} Layer d2 Quadrado Pto-Am {Frame 9; X:2.5; Y:2.5} Quadrado Am-Transp {Frame 17; X:2.5; Y:2.5} Layer e3 Quadrado Pto-Am {Frame 9; X:107.5; Y:-102.5} Quadrado Am-Transp {Frame 17; X:107.5; Y:-102.5} Layer f4 Quadrado Pto-Am {Frame 9; X:212.5; Y:-207.5} Quadrado Am-Transp {Frame 17; X:212.5; Y:-207.5} Layer d1 Quadrado Pto-Am {Frame 10; X:2.5; Y:107.5} Quadrado Am-Transp {Frame 18; X:2.5; Y:107.5} Layer e2 Quadrado Pto-Am {Frame 10; X:107.5; Y:2.5} Quadrado Am-Transp {Frame 18; X:107.5; Y:2.5} Layer f3 Quadrado Pto-Am {Frame 10; X:212.5; Y:-102.5} Quadrado Am-Transp {Frame 18; X:212.5; Y:-102.5} Layer e1 Quadrado Pto-Am {Frame 11; X:107.5; Y:107.5} Quadrado Am-Transp {Frame 18; X:107.5; Y:107.5} Layer f2 Quadrado Pto-Am {Frame 11; X:212.5; Y:2.5} Quadrado Am-Transp {Frame 18; X:212.5; Y:2.5} Layer f1 Quadrado Pto-Am {Frame 12; X:212.5; Y:107.5} Quadrado Am-Transp {Frame 18; X:212.5; Y:107.5} Ao final, deve ter algo parecido com isso:
60. Volte para o frame 1 do MC Anim 01 e arraste uma instncia do MC Fade In-Out que acabamos de criar para a posio X: -312.5 Y:-207.5 Se necessrio, exclua todos os frames desta layer do 26 em diante, deixando frames apenas do 1 ao 25. 61. Crie um keyframe no frame 60 da layer AS, abra o painel Actions (F9) e digite: stop(); 62. De maneira anloga voc preparar os MCs Animao 02, Animao 03, , Animao 10. 63. Volte para a cena principal e crie um keyframe no frame 80 da layer 01 (dentro da pasta Animaes). Obs.: se houver algum frame a partir do 80 na layer 00 exclua-os! 64. Arraste uma instncia do MC Animao 01 para a posio X:0 Y:0 e exclua todos os frames a partir do 141 desta layer. 65. Crie um keyframe no frame 128 da layer 02. 66. Arraste uma instncia do MC Animao 02 para a posio X:0 Y:0 e exclua todos os frames a partir do 189 desta layer.
67. Crie um keyframe no frame 176 da layer 03. 68. Arraste uma instncia do MC Animao 03 para a posio X:0 Y:0 e exclua todos os frames a partir do 236 desta layer. 69. Crie um keyframe no frame 223 da layer 04. 70. Arraste uma instncia do MC Animao 04 para a posio X:0 Y:0 e exclua todos os frames a partir do 284 desta layer. 71. Crie um keyframe no frame 271 da layer 05. 72. Arraste uma instncia do MC Animao 05 para a posio X:0 Y:0 e exclua todos os frames a partir do 332 desta layer. 73. Crie um keyframe no frame 319 da layer 06. 74. Arraste uma instncia do MC Animao 06 para a posio X:0 Y:0 e exclua todos os frames a partir do 380 desta layer. 75. Crie um keyframe no frame 367 da layer 07. 76. Arraste uma instncia do MC Animao 07 para a posio X:0 Y:0 e exclua todos os frames a partir do 428 desta layer. 77. Crie um keyframe no frame 415 da layer 08. 78. Arraste uma instncia do MC Animao 08 para a posio X:0 Y:0 e exclua todos os frames a partir do 476 desta layer. 79. Crie um keyframe no frame 463 da layer 09. 80. Arraste uma instncia do MC Animao 09 para a posio X:0 Y:0 e exclua todos os frames a partir do 524 desta layer. 81. Crie um keyframe no frame 511 da layer 10. 82. Arraste uma instncia do MC Animao 10 para a posio X:0 Y:0 83. D um Ctrl+Enter para testar a animao e pronto. Para incrementar voc pode colocar uma msica de fundo, mas se fizer isso, no esquea de fazer tambm um Preload, ok?
menu tsunami com XML
Pr-Requisitos
Macromedia Flash 8, conhecimento avanado de actionscript, conhecimento da sintaxe XML.
Contedo
Menus Tsunami so feitos desde o flash 5. Existem muitos para baixar na internet. Mas eu resolvi fazer um porque meu amigo bitubas, um desenvolvedor muito bom, disse que a maioria dos arquivos encontrados na net hoje em dia so muito antigos e no funcionam no Flash 8 porque agora o actionscript est case sensitive. Ento esse tutorial o resultado de uma pesquisa que eu fiz com os menus tsunamis disponveis na internet. Eu baixei vrios, editei e montei meu prprio efeito. Aviso aos navegantes, ele no est 100%, tem um bug ou outro, mas d pra usar sem problemas. Vamos d uma olhada no bicho:
Veja que fazer um menu desse bem simples, mas exige ateno ao tutorial e um pouco de conhecimento de actionscript, principalmente ter fresquinho na cabea conceitos de _x, _y, _xscale e _yscale. Vamos l. Crie um filme 215 x 400 com 30 FPS e insira um retngulo 180 x 340 nas posies 17 x 40 (a parte de cima, vc deixa em branco para colocar o cabealho que quiser). Se voc quiser dar esse efeito blur, basta convert-lo para movieclip e aplicar um filtro de Blur 5 High quality. Agora crie um MC chamado tsunami insira-o no stage nas posies 20 x 50 e instancie-o como tsunamiMenu. Nele crie um campo de texto dinmico com instncia texto. Escolha a fonte (eu usei NewsGoth Cn BT) e coloque o tamanho 15 em negrito. Coloque Anti-alias for animation e coloque os embeds (?) necessrios. Converta esse texto para um MC chamado itens, intancie com o mesmo nome e deixe-o nas posies 0 x 0 do MC tsunami. Ainda no MC tsunami, crie uma nova camada abaixo dos textos. V na biblioteca e crie um MC chamado area. Esse MC deve estar em branco. Insira esse MC na camada que voc criou nas posies 00, instancie-o com o mesmo nome. Agora abra o MC itens e converta novamente o texto para o MC item e instancie-o com o mesmo nome. At agora, seu stage deve ter seguido essa hierarquia e est segundo a imagem abaixo:
Ento. Basicamente isso tudo que tem pra se fazer no Flash. Agora vamos ao actionscript. Vamos comear com o MC area dentro do MC tsunami: onClipEvent (load) { _root.noLimite = nao; } onClipEvent (enterFrame) { if (_root._xmouse>=_root.tstunamiMenu._x) { if (_root._xmouse<=(_root.tstunamiMenu._x)+_root.tstunamiMenu._width) { _root.noLimite = sim; } else { _root.noLimite = nao; } } else { _root.noLimite = nao; } } OBS: insira essas aes no MC e no no frame. Esse cdigo calcula os limites do menu e avisa atravs da varivel noLimite se os limites _x e _width do menu esto corretos. Eu usei sim e nao para deixar o cdigo mais auto-explicativo. Feito isso, vamos para o MC itens, nele ns vamos construir nosso objeto XML e chamar os dados para dentro do flash:
var nomes:Array = []; var urls:Array = []; var tsunamiXML:XML = new XML(); tsunamiXML.ignoreWhite = true; tsunamiXML.onLoad = function(foi) { if (foi) { for (var t = 0; t<tsunamiXML.childNodes[0].childNodes.length; t++) { nomes.push(tsunamiXML.childNodes[0].childNodes[t].attributes.text); urls.push(tsunamiXML.childNodes[0].childNodes[t].attributes.url); item.duplicateMovieClip(item+t, t); item._visible = false; } for (var i = 0; i<tsunamiXML.childNodes[0].childNodes.length; i++) { eval(item+i).i = i; eval(item+i).texto.text = nomes[i]; eval(item+i)._y = eval(item+(i-1))._y + 30 eval(item+i).onRollOver = function(){ this._alpha = 50 } eval(item+i).onRollOut = function(){ this._alpha = 50 } eval(item+i).onRelease = function(){ getURL(urls[this.i],_blank) } } } }; tsunamiXML.load(tsunami_menu.xml); OBS: insira essas aes no frame. Como vocs podem ver, esse foi um parse normal. Primeiro criamos duas arrays (?) vazias. Depois criamos o objeto tsunamiXML e colocamos um FOR (?)para popular as arrays com o contedo dos atributos do XML (no caso text e url). Depois ns duplicamos o MC item e mudamos os seu _y para ficarem um debaixo do outro. Pra finalizar colocamos um efeito rollOver e rollOut nos botes. No onRelease, pedimos para abrir a URL armazenada dentro da array. Por fim, carregamos o tsunami_menu.xml. Falando nele, vamos ver a sua sintaxe? <?xml version=1.0 encoding= UTF-8 ?> <menu> <button text=superjG.net url=http://www.superjg.com /><button text=MXstudio url=http://www.mxstudio.com.br /> <button text=Gmail url=http://www.gmail.com /> <button text=Google url=http://www.google.com /> <button text=rafael rinaldi url=http://www.rafaelrinaldi.com /> <button text=flashmasters url=http://www.flashmasters.com.br /> <button text=youtube url=http://www.youtube.com /> <button text=orkut url=http://www.orkut.com /> <button text=gotoAndLearn() url=http://www.gotoandlearn.com />
<button text=site do BBB7 url=http://www.globo.com/bbb /> <button text=adobe url=http://www.adobe.com /> </menu> Para Finalizar, vamos colocar umas aes no MC item: onClipEvent (load) { inicialY = _y; nivelCor = 50; alvo = 100; alvoY = inicialY; corItem = new Color(this); corItemTransform = corItem.getTransform(); } onClipEvent (enterFrame) { distanciaY = Math.floor(Math.abs((_y-_parent._ymouse))); distanciaY2 = Math.floor(_y-_parent._ymouse); if (distanciaY<50) { if (_root.noLimite == sim) { alvo = 200-distanciaY; nivelCor = 100-distanciaY; alvoY = inicialY+(distanciaY2*.1); } else { alvo = 100; nivelCor = 50; alvoY = inicialY; } } else { alvo = 100; nivelCor = 50; alvoY = inicialY; } alvoAdd = Math.floor((alvo-_xscale)*.3); _xscale += alvoAdd; _yscale += alvoAdd; yplus = Math.floor((alvoY-_y)*.3); _y += yplus; corItemTransform.ra = nivelCor; corItemTransform.ga = nivelCor; corItemTransform.ba = nivelCor; corItem.setTransform(corItemTransform); } Comeamos definindo algumas variveis iniciais como o primeiro Y, ou Y base para todos, o nivel inicial de cores (perceba no swf que h uma mudana de cores). No enterFrame ns criamos uma distancia do Y baseado na diferena entre _ymouse e o _y desse mc. Perceba que existem duas distancias. Isso foi feito para termos uma diferena entre as distncias, ento a que entra nosso easing. Depois verificamos se o menu est dentro dos limites (lembra daquelas aes l em cima). Se estiver, ns colorimos com uma nova cor baseada na distancia de Y. Caso contrrio, porque ns estamos no topo, ento voltamos para as configuraes iniciais setadas l em cima. Alm disso, ns aumentamos a _xscale e _yscale do item usando a varivel alvoAdd que a diferena entre o Y atual e o _xscale multiplicado pelo easing. Por fim, colorimos o item com o nvel de cor correspondente ao _y. Dessa forma, os itens ficam sempre no mesmo nvel de cor, diferenciando apenas a saturao.
isso a. Est desvendado um dos grandes mistrios do mundo do flash, de forma simplificada e rpida pra voc. Esse tutorial pode ser meio dificil de se entender de primeira, mas repita os passos vrias vezes at conseguir, afinal assim que se aprende. No prximo artigo: como fazer planos de fundo redimensionveis no flash? , at l Autor: Joo Guilherme Ribeiro - Colunista Flash do Portal MXSTUDIO
EFEITO DE TRANSIO PARA SITES

EFEITO DE TRANSIO PARA SITES
Clique no boto para ver a animao Download do arquivo fonte (inicial) Obs.: o download do arquivo fonte final pode ser feito atravs do link ao final desta matria. O efeito apresentado acima pode ser utilizado como transio entre sees de seu site. A maior parte do trabalho para obter um efeito como este no localiza-se no Flash, mas no Photoshop ou outro software de tratamento de imagem, pois a animao praticamente feita quadro a quadro. 1. Abra o arquivo transicao_inicial.fla que voc baixou na sua mquina atravs do link acima. Para nos concentrarmos no foco de nossa matria, a arte e os elementos que sero utilizados neste tutorial j se encontram na Library. Observe tambm que j esto criadas as layers e seus respectivos nomes. FUNDO DA PGINA
2. Na layer Fundo de Pgina, clique no frame 70 e tecle F5 para criarmos os frames at esse ponto. A seguir, clique no frame 1 e arraste uma instncia do smbolo graphic fundo da pgina para o Stage. Posicione-o em x = 0 e y = 0 no painel Properties. BOTES 3. Na layer Boto Voltar, clique no frame 70, tecle F7 para criar um keyframe branco. 4. No menu, navegue at Window > Common Libraries > Buttons e arraste uma instncia do flat blue back (est dentro da pasta playback flat) para o Stage configurando-o como na figura a seguir:
5. Crie um keyframe no frame 70 da layer AS, tecle F9 e digite o seguinte cdigo: stop();repetir_btn.onRelease = function () { gotoAndPlay(2); }; 6. Na layer Boto Iniciar , clique no frame 1, tecle F7 para criar um keyframe branco. 7. No menu, navegue at Window > Common Libraries > Buttons e arraste uma instncia do flat blue play (est dentro da pasta playback flat) para o Stage configurando-o como na figura a seguir:
8. Crie um keyframe no frame 1 da layer AS, tecle F9 e digite o seguinte cdigo: stop();iniciar_btn.onRelease = function () { play(); }; 9. Na layer Logotipo, crie um keyframe no frame 70 e arraste uma instncia do LOGO_06 para ele.
10. Crie um keyframe no frame 70 da layer Contedo e com a ferramenta Text Tool (T) digite o seguinte texto: www.academiadexadrez.com Mergulhe nessa voc tambm 11. Na layer Volta da pgina de contedo, crie um keyframe no frame 53. 12. Arraste uma instncia do fig01 para o Stage, configurando-o como a seguir:
13. Crie um keyframe no frame 70 da mesma layer e configure o fig01 deste frame da seguinte maneira:
14.
Crie um Motion Tween entre os frames 53 e 70 clicando com o boto direito do mouse entre eles e optando por Create Motion Tween. 15. Na layer Movimento da gua, frame 26, crie um keyframe e arraste para ele uma instncia do onda do mergulho, configurando da seguinte maneira:
16. Crie um outro keyframe na layer Movimento da gua, agora no frame 34, e configure o onda do mergulho deste frame da seguinte maneira:
17. Crie um Motion Tween entre os frames 26 e 34 clicando com o boto direito do mouse entre eles e optando por Create Motion Tween. 18. Crie um outro keyframe na layer Movimento da gua, agora no frame 42, e configure o onda do mergulho deste frame da seguinte maneira:
19. Crie um Motion Tween entre os frames 26 e 34 clicando com o boto direito do mouse entre eles e optando por Create Motion Tween. 20. Crie um outro keyframe na layer Movimento da gua, agora no frame 44, e configure o onda do mergulho deste frame da seguinte maneira:
21.
Crie um Motion Tween entre os frames 42 e 44 clicando com o boto direito do mouse entre eles e optando por Create Motion Tween. 22. Crie um outro keyframe na layer Movimento da gua, agora no frame 45, e configure o onda do mergulho deste frame da seguinte maneira:
23. Crie um outro keyframe na layer Movimento da gua, agora no frame 47, e configure o onda do mergulho deste frame da seguinte maneira:
24. Repita o procedimento criando keyframes do frame 48 at o 52, configurando-os respectivmente da seguinte maneira:
Frame 48
Frame 49
Frame 50
Frame 51
Frame 52 25. Crie um keyframe no frame 26 da layer Fundo e arraste para ele uma instncia de fundo do mergulho, configurando-o como segue:
26. Crie um keyframe no frame 31 da layer Fundo e configurando-o como segue:
28. Crie um Motion Tween entre os frames 26 e 31 e tambm entre o 31 e o 53. 29. Crie um keyframe no frame 26 da layer Splash, arraste uma instncia do mergulho para o Stage e configure-o como segue:
33. Crie um Motion Tween entre cada um destes keyframes criados. 34. Crie um keyframe no frame 21 da layer Som da Folha Mergulhando e arraste para o Stage uma instncia do som 2 (configure Repeat como 0). 35. Crie um keyframe no frame 11 da layer Som do Lanamento da Folha e arraste para o Stage uma instncia do som 1 (configure Repeat como 0). Com o mouse no frame 12, crie mais um frame teclando F5. 36. Crie um keyframe no frame 6 da layer Folha em Moviemento e arraste para o Stage uma instncia do folha01, configurando como segue:
37. Clique no frame 8 e tecle F7 para criar um keyframe em branco. Arraste uma instncia do fig01 para o Stage, configurando como segue:
38. Crie novos keyframes em branco nos frames de 9 at 28, arrastando respectivamente em cada um o folha02 at o folha21 (um em cada frame!), configurando como segue:
frame 9
frame 10
frame 11
frame 12
frame 13
frame 14
frame 15
frame 16
frame 17
frame 18
frame 19
frame 20
frame 21
frame 22
frame 23
frame 24
frame 25
frame 26
frame 27
frame 28 Download do arquivo final DICA DE AS Copie e cole o cdigo a seguir num frame do seu .fla para obter a data de hoje: function minhaData () { agora = new Date(ano, mes, dia, h, min, seg, ms); dias_da_semana = new Array(Domingo, Segunda, Tera, Quarta, Quinta, Sexta, Sbado); meses = new Array(Janeiro, Fevereiro, Maro, Abril, Maio, Junho, Julho, Agosto, Setembro, Outubro, Novembro, Dezembro); dia_da_semana_hoje = dias_da_semana[agora.getDay()]; mes = meses[agora.getMonth()]; dia_do_mes_hoje = agora.getDate(); ano = agora.getFullYear(); data_inteira = dias_da_semana[agora.getDay()]+, + agora.getDate() + de +meses[agora.getMonth()]+ de +agora.getFullYear(); return data_inteira; } trace(minhaData());
Galeria de Imagens com XML 2

Natan D. Alves Colunistas desde: 2007 Matrias publicadas: 13

Ol Comunidade. Vamos a mais uma Coluna de Flash. Atendendo a pedidos, iremos criar uma Galeria de
Imagem com miniaturas, seguindo o mesmo efeito do Tutorial Passado:
Galeria de Imagem com XML Pr-requisitos para esse tutorial:

Flash MX 2004 ou Flash 8 Conhecimento com Interao com XML Criando o XML
Vamos ao XML que conter nossas as imagens maiores, as menores e seus ttulos. Salve como imagens.xml.
<?xml <imagens> <foto> <imagemG>imagem.jpg</imagemG> <imagemP>imagemp.jpg</imagemP> <texto>Moto </foto> <foto> <imagemG>imagem1.jpg</imagemG> <imagemP>imagemp1.jpg</imagemP> <texto>Mclaren </foto> <foto> <imagemG>imagem2.jpg</imagemG> <imagemP>imagemp2.jpg</imagemP> <texto>Capacete </foto> <foto> <imagemG>imagem3.jpg</imagemG> <imagemP>imagemp3.jpg</imagemP> <texto>Ferrari </foto> <foto> <imagemG>imagem4.jpg</imagemG> <imagemP>imagemp4.jpg</imagemP> <texto>Loro</texto> </foto> <foto> <imagemG>imagem5.jpg</imagemG> <imagemP>imagemp5.jpg</imagemP> <texto>Trator </foto> <foto> do Stio</texto> Shumacher</texto> Senna</texto> do Senna</texto> Ayrton Senna</texto> version="1.0" encoding="utf-8"?>
<imagemG>imagem6.jpg</imagemG> <imagemP>imagemp6.jpg</imagemP> <texto>Carroa </foto> </imagens> antiga</texto>
Criando nossa Galeria
Vamos criar nossa galeria. Crie o Layout que achar melhor. Comecei com um palco com dimenes de 550550. A disposio das camadas ser essa:
Os nomes em vermelho so as instancias dos objetos:
holder: MovieClip em branco, posicione na camada Contedo
preloader: MovieClip, posicione na Camada Contedo porcento: Campo de texto dinmico, posicione na Camada Contedo borda: MovieClip, posicione na Camada Contedo recebe: MovieClip em branco, posicione na Camada Recebe mascara: MovieClip, posicione na Camada Mscara scrollBar: Componente criado, posicione na Camada ScrollBar texto: Campo de texto dinmico, posicione na Camada Contedo Uma coisa muito importante. O MovieClip borda, precisa ter seu ponto de registro no meio. Como na imagem:
Vocs devem estar se perguntando. Que ScrollBar esse. Esse ScrollBar foi criado por um de nossos Colunistas, Hugo Ferreira da Silva. Ns vamos seguir as mesmas regras de criao dos MovieClips. Para os que no conhecem ou no tenham criado, segue o Link do Tutorial: ScrollBar para MovieClips e TextFields O tutorial ele criou um ScrollBar vertical, nesse tutorial criaremos um na horizontal. Portanto, posicione os MovieClips na horizontal, sem segredos. Mesmo assim, precisamos adaptar o cdigo para que o Scroll funcione na horizontal. Substitua os cdigos dele por esse:
import import /* _xscale /* var /* var /* /* /* var /* var /* pan.onPress /* startDrag(this, }; Inicia false, Mximo Quando Altera Tira Mnimo em em a _y _y = = o miny, track._width pan.useHandCursor miny:Number q pressionar maxy:Number = q o = o pan o function() arrastamento this._y, maxy, pan Posio Pode ser um alvo inicial sy:Number o tamanho = maozinha dos do Coloca no = movieclip = movieclip = da barra botes pode pode pan ir ir em ou um tamanho mx.transitions.Tween; mx.transitions.easing.*; normal textfield y */ _yscale=100; */ */ alvo._x; */ */ */ */ */ { */ this._y); track_width; track.useHandCursor=false; Math.round(track._x); _parent[alvo];
Math.round(track._x+track._width-pan._width);
/* pan.onRelease /* stopDrag(); }; /* track.onPress /* pan._x /* if pan._x } /* if pan._x } }; /* esquerda direita }; /* esquerda direita }; /* esquerda direita }; /* esquerda direita }; /* Se o Se o
Quando = para
soltar o
mouse () arrastamento
*/ { */
pan.onReleaseOutside=function
Quando Move
precionar = o = do valor = mximo
o function() pan volta
track
*/ { */
_xmouse-pan._width/2; para o mximo */ { maxy; mnimo = volta para o mnimo */ { miny; (pan._x>=maxy)
pan
passar
pan
passar
do
valor
(pan._x<=miny)
Quando
precionar = = =
btn_esq function()
*/ { true; false;
bt_esq.onPress
Quando =
soltar = =
btn_esq ()
*/ { false; false;
bt_esq.onRelease
bt_esqu.onReleaseOutside=function
Quando
precionar = = =
o function()
bt_dir
*/ { false; true;
bt_dir.onPress
Quando =
soltar = =
btn_dir ()
*/ { false; false;
bt_dir.onRelease
bt_dir.onReleaseOutside=function
Cria =
o (esquerda)
onEnterFrame function() de -= else ir alm do que pode
*/ { { */ { 10; {
this.onEnterFrame if /* if pan._x } Se no estiver a
ponto
(pan._x-1>miny)
pan._x } } /* if /* if pan._x } pan._x } } var var /* true); }; s:Number p:Number Move o = Se no estiver a Se
miny;
estiver (direita) ponto de += else = ir alm
descendo do que pode
*/ { */ { 10; { maxy;
(pan._x+1<maxy)
((pan._x-miny)/(maxy-miny))*100; = (alvo._width-mascara)/100; objeto */
var twScrool:Tween = new Tween(alvo, "_x", Back.easeOut, alvo._x, sy-(p*s), 0.8,
Outra coisa, precisamos dizer algumas coisas ao ScrollBar criado, quem ele deve mover, o tamanho da barra e o tamanho da mascara. Deixaremos igual a essa imagem:
Reparem uma coisa. Criei o scrollBar com largura de 450, ento devo deixar o campo Altura da Mascara com o tamanho do ScrollBar. O campo Alvo preenchemos com o MovieClip que queremos que faa o scroll, e Altura da Barra, pode at deixar em branco que no vai influenciar em nada para ns. Falta criarmos um MovieClip que vai receber as imagens pequenas:
alvo: MovieClip em branco, posicione na camada alvo barra: MovieClip, posicione na camada barra Com nossos MovieClips e ScrollBar criados e instanciados vamos ao ActionScript. Coloquem isso no primeiro frame na camada Actions:
/* import import /* var /* var /* var /* var /* var /* var /* /* Criamos Ignoramos Carregamos Outra Criamos uma Varivel varivel para um Outro pequenoListener:Object uma dadosXML:XML os varivel = espaos = o XML em = para o para carregado:Boolean para o MovieClipLoader = esse = para = o Listener new o new branco XML meuMCL:MovieClipLoader varivel pequenoMCL:MovieClipLoader Criamos Listener meuListener:Object new para new new as saber se = para as fotos fotos Importamos a Classe Tween */
mx.transitions.Tween; mx.transitions.easing.*; carregou maiores menores */ false; */ */ */ */ Object(); */ XML(); */ true; */ MovieClipLoader(); MovieClipLoader(); MovieClipLoader Object();
MovieClipLoader
dadosXML.ignoreWhite
dadosXML.load("imagens.xml"); /* /* if /* xmlNode /* total /* /* } /* } }; /* function /* var /* for /* var /* mc._x /* inicio++; /* mc.alvo); /* /* mc.bt.imagem /* mc.bt.legenda /* /* if /* Se Ao a pressionar = varivel (carregado Carregamos a carregado == Imagem for do mc.bt.onPress Pegamos a = da Imagem function() igual a true) selecionada true Pequena Deixamos o MovieClip barra a = legenda com = Pegamos imagem _yscale igual a 0 */ 0; */ i; */ i; */ { */ { */ mc.barra._yscale Carregamos a imagem pequena */ pequenoMCL.loadClip(xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue, Criamos (var Chamamos mc:MovieClip = Pocisionamos = Incrementamos um i o Varivel para inicio for = para 0; MovieClip cada Funo monta montaPequeno() posicionar o = item i<total; do pequeno XML i++) MovieClip pequeno */ { */ 0; */ { */ "pequeno"+i, */ */ Exibimos uma = mensagem "Erro de ao mensagem.text Chamamos Chamamos a funo montaPequeno(); carregaImagem else erro caso Carregar no o carregue o XML arquivo chamando a primeira imagem */ 0); { */ XML"; carregaImagem(0, Criamos uma varivel = a funo Dizemos qual = para o total de itens Quando Se o = no (ok) o primeiro no N XML teve XML for carregado erro */ { */ { */ */ */ this.firstChild; xmlNode.childNodes.length; montaPequeno() dadosXML.onLoad function(ok)
recebe.attachMovie("pequeno", ele inicio
recebe.getNextHighestDepth()); inicio*mc._width+inicio*10;
carregaImagem(this.imagem, /* carregado /* texto.text } }; } /* if scrollBar.unloadMovie(); } } /* /* var /* }; /* function /* /* /* /* /* holder); /* /* var /* porcento.text /* }; /* /* Para Quando usar a terminar = Classe Tween temos de que Deixamos o MovieClip preloader preloader._xscale Usamos Criamos o Listener uma para varivel o = com = o mesmo _xscale do saber para = quanto o progresso saber do Deixamos o preloader._xscale Deixamos Descarregamos Deixamos o o qualquer MovieClip = contedo holder imagem que esteja no preloader._visible holder.unloadMovie(); MovieClip a com = maior alpha igual Funo para MovieClip carregar preloader a com = preloader Imagem txt) _xscale igual Usamos Criamos Deixamos o o Listener uma para = saber para = barra com o progresso o igual = a do quanto varivel Verificamos se o ScrollBar menor que o Apagamos Carregado igual = o = texto a
this.legenda); falso */ false; */ "";
MovieClip
recebe
*/ {
(recebe._width<=scrollBar._width)
Carregamento totalBytes) carregou carregado
*/ { */ */
pequenoListener.onLoadProgress carregados:Number MovieClip
function(target_mc, saber _yscale
loadedBytes,
varivel
Math.round(loadedBytes/totalBytes*100); carregados; grande a visvel MovieClip a holder zero zero */ { */ 0; */ true; */ */ 0; selecionada */
target_mc._parent.barra._yscale
carregaImagem(arquivo,
holder._alpha Carregamos
meuMCL.loadClip(xmlNode.childNodes[arquivo].childNodes[0].firstChild.nodeValue, carregamento carregou */ */ */ */
meuListener.onLoadProgress = function(alvo:Object, bLoad:Number, bTotal:Number) { quanto porcentagem:Number Mostramos Math.round(bLoad/bTotal*100); carregou carregameto porcentagem+"%"; porcentagem; carregar function() criar variveis */ { */
meuListener.onLoadInit
/* Aqui iremos aumentar o MovieClip borda para o mesmo tamanho do MovieClip holder mais para var tww:Tween poder = new fazer Tween(borda, 1, uma "_width", borda Back.easeOut, 16 */ borda._width, true); 16 poder twh:Tween Aqui twhx:Tween Aqui twhx:Tween = new = new = new fazer Tween(borda, o "_x", o "_y", 1, o new MovieClip "_y", 1, o new MovieClip "_y", 1, o Tween(scrollBar, o = new campo Tween(texto, o twhx = o o o texto MovieClip a a varivel MovieClip = do campo = holder variavel = carregado = ficar com twha function() igual a true alpha igual acabar a 100 de texto porcento acabar de "_y", "_y", ScrollBar Back.easeOut, 1, de 1, texto se mover texto Back.easeOut, recebe Back.easeOut, Tween(recebe, mascara Back.easeOut, = Tween(mascara, 1, movemos Tween(holder, MovieClip Back.easeOut, holder holder._y, 1, movemos Tween(holder, MovieClip Back.easeOut, holder holder._x, uma "_height", borda Back.easeOut, */ true); */ borda._xtrue); */ borda._ytrue); */ mascara._y, true); */ recebe._y, true); */ scrollBar._y, true); */ texto._y, true); */ */ { */ false; */ ""; */ */ { */ true; borda._height,
holder._width+16, mais para var /* var /* var /* var /* var /* var /* var /* texto.text /* /* /* /* /* /* }; }; }; Quando Deixamos Apagamos Aqui deixamos Quando Deixamos = a twsP:Tween
/* Aqui iremos aumentar o MovieClip borda para o mesmo tamanho do MovieClip holder
holder._height+16,
holder._width/2,
holder._height/2, Movemos twma:Tween
(borda._y+holder._height/2)+16, Movemos twr:Tween =
(borda._y+holder._height/2)+16, Movemos = new
(borda._y+holder._height/2)+recebe._height+22, Movemos twtxt:Tween
(borda._y+holder._height/2)+recebe._height+47, Mostramos variavel
xmlNode.childNodes[txt].childNodes[2].firstChild.nodeValue; function() preloader invisivel
twhx.onMotionFinished preloader._visible porcento.text
var twha:Tween = new Tween(holder, "_alpha", Regular.easeOut, 0, 100, 0.6, true); twha.onMotionFinished carregado
} /* /* Adicionamos Adicionamos um um Listener Listener ao ao MovieClipLoader MovieClipLoader */ */ meuMCL.addListener(meuListener); pequenoMCL.addListener(pequenoListener);
Aqui um exemplo da Galeria funcionando

Consideraes Finais
Hoje aprendemos como criar uma galeria de imagem mostrando miniaturas, tudo vindo de um XML. Mais uma vez utilizamos a Classe Tween para criar efeitos de forma rpida e mais bonitas. Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, l voc podero encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com Um abrao a todos e at a prxima
ROLAGEM DE IMAGENS
ROLAGEM DE IMAGENS
Aprenderemos a construir um slider de imagens que faz com que as mesmas rolem para esquerda ou direita de acordo com a posio do mouse.
O tutorial est dividido em tarefas para que a compreenso fique mais fcil. Criando um boto invisvel
1. Crie um novo documento Flash com as dimenses 350px x 180px. 2. Preparemos os botes invisveis que utilizaremos sobre as imagens. No menu, navegue at Insert > New Symbol (Ctrl + F8) para criarmos um novo smbolo Button. Configure como segue e clique no boo OK: Name: Boto Invisvel Type: Button
3. Crie um Keyframe no Hit (tecle F7 aps clcar sobre o frame do Hit).
4. Desenhe um quadrado de 90 x 90 e centralize-o (s com preenchimento, sem contorno).
5. Clique no link Scene 1 para voltar edio do documento principal.

.: Criando o efeito MouseOver (contorno)
6. Crie um novo smbolo de MovieClip (MC) e nomeie-o como MouseOver contorno. Obs.: no esquea de que agora o Type Movie clip! 7. Com a Rectangle Tool (R), desenhe um quadrado de 9090, mas desta vez s com o contorno, sem o preenchimento e com espessura de 3,5. Use a cor laranja (#FF6600), por exemplo. Centralize-o.
.: Criando o efeito MouseOver (preenchimento)
8. Crie um novo smbolo de MovieClip (MC) e nomeie-o como MouseOver preenchimento . Obs.: no esquea de que o Type Movie clip! 9. Com a Rectangle Tool (R), desenhe um quadrado de 9090, mas desta vez com o preenchimento, sem o contorno. Use a cor laranja (#FF9900), por exemplo. Centralize-o.
.: Criando o efeito MouseOver para as imagens
10. Crie um novo smbolo de MovieClip (MC) e nomeie-o como MouseOver01 Obs.: no esquea de que o Type Movie clip! 11. Crie mais trs layers para que fique com quatro no total e nomeie-as como: AS, Boto Invisvel, MouseOver (contorno) e MouseOver (preenchimento). 12. Clique no primeiro frame da layer Boto Invisvel e arraste uma instncia do Boto Invisvel para ele e centralize-a. 13. Clique no frame 16 da mesma layer e tecle F7 para criar um novo keyframe em branco. 14. Clique no frame 30 e tecle F5 para criar um frame simples. 15. Clique no frame 1 da layer MouseOver (contorno) e arraste uma instncia do MC MouseOver contorno para ele. Centralize-a. 16. No painel Properties, altere a propriedade Color do MouseOver contorno para Alpha 0%. 17. Clique no frame 30 e tecle F6 para criar um keyframe idntico ao primeiro. 18. Clique no frame 15 e tecle F6 para criar um keyframe. Altere a propriedade Color dele para None. 19. Ainda na mesma layer, clique em qualquer um entre os frames 1 e 15 com o boto direito do mouse e escolha, no menu de contexto, a opo Create Motion Tween. Siga o mesmo procedimento para criar o Motion Tween entre os frames 15 e 30. 20. Clique no primeiro frame da layer MouseOver (preenchimento) e arraste uma instncia doMC MouseOver preenchimento para ele. Centralize-a. 21. No painel Properties, altere a propriedade Color do MouseOver preenchimento para Alpha 0%. 22. Clique no frame 30 e tecle F6 para criar um keyframe idntico ao primeiro. 23. Clique no frame 15 e tecle F6 para criar um keyframe. Altere a propriedade Color dele para None. 24. Ainda na mesma layer, clique em qualquer um entre os frames 1 e 15 com o boto direito do mouse e escolha, no menu de contexto, a opo Create Motion Tween. Siga o mesmo procedimento para criar o Motion Tween entre os frames 15 e 30. 25. Clique no frame 1 da layer AS, tecle F9 para abrir o painel Actions e digite o cdigo: stop(); 26. Crie um keyframe no frame 30 da layer AS e digite o cdigo: gotoAndStop(1);
27. Na layer Boto Invisvel, clique no frame 15 e insira um keyframe (tecle F6). 28. Clique novamente no frame 1 da mesma layer e a seguir sobre a instncia Boto Invisvel no Stage. 29. Abra o painel Actions (F9) e digite o seguinte cdigo: on (rollOver) { play (); _root.nomeImagem = Imagem 1; }on (rollOut) { play (); _root.nomeImagem = Onde os Reis se encontram!; } on (release){ if (_root.rolaMenu == 1){ _root.rolaMenu = 0 }else{ _root.rolaMenu = 1 } } 30. Ainda na mesma layer, clique no frame 15 e a seguir sobre a instncia Boto Invisvel no Stage. 31. Abra o painel Actions (F9) e digite o seguinte cdigo: on (rollOver) { stop(); _root.nomeImagem = Imagem 1; }on (rollOut, dragOut) { play(); _root.nomeImagem = Onde os Reis se encontram; } on (release) { if (_root.rolaMenu == 1) { _root.rolaMenu = 0; } else { _root.rolaMenu = 1; } } 32. Clique sobre o MC MouseOver01 na Library e com o boto direito do mouse e opte por Duplicate para
duplicar o MouseOver01. 33. Configure Name como MouseOver02 e Type como Movie clip. 34. Repita o procedimento anterior at que obtenha 13 MouseOvers (porque so 13 as imagens que vamos trabalhar neste projeto). Obs.: no esquea de mudar os cdigos nos Botes Invisveis (frame 1 e frame 15)alterando os valores de _root.nomeImagem para os rtulos correspondentes (Imagem 2, Imagem 3, etc.)
.: Montagem do Menu de Imagens
30. Importe as 13 imagens que sero usadas para a Library (File > Import > Import to Library) Dica: procure trabalhar com imagens com as mesmas dimenses (largura e altura). As imagens usadas neste tutorial j esto preparadas para que voc economize tempo, faa o download dos arquivos da matria. 31. No menu, navegue at Insert > New Symbol (Ctrl + F8) para criarmos um novo smbolo de Movie Clip. Configure como segue e clique no boo OK: Name: MenuFotos Type: Movie clip
32. Posicione as 13 imagens uma ao lado da outra (sugesto: coloque a primeira na posio x = 0 e y = -43)
33. Como provavelmente voc (assim como eu) colocou todas as imagens na mesma layer, selecione-as com a tecla Shift pressionada, clique com o boto direito do mouse sobre uma delas e no menu de contexto, opte por Distribute to layers para que cada uma fique em sua prpria layer. Exclua a layer excedente (sem contedo). 34. Clique na layer da primeira imagem e insira uma layer acima dela. Nomeie-a como MouseOver01. 35. No frame 1 da layer MouseOver01, arraste uma instncia do MC MouseOver01 da Library para o Stage. 36. No painel properties configure as seguintes propriedades: W: 128 H: 85 X: 0.0 Y: -43
Com essas configuraes posicionamos e redimensionamos o MouseOver01 de maneira que se sobrepe totalmente sobre a primeira imagem. 37. Siga o procedimento anlogo para as outras
12 imagens.
38. Volte para o Stage e crie mais 3 layers de maneira que fique com um total de 4. Nomeie-as como: AS, Menu de Fotos, Texto Dinmico e Ttulo. 39. Clique no primeiro frame da layer Menu de Fotos, arraste uma instncia do MC MenuFotos da Library para o Stage e configure as propriedades como segue no painel properties: nome da instncia: mcMenuFotos X: 0.2 Y: 12.6
40. Clique no primeiro frame da layer Texto Dinmico e a seguir na Text Tool (T) e insira um Dynamic Text com as seguintes propriedades: W: 242.0 H: 35.0 X: 55.0 Y: 105.0 Var: nomeImagem
41. Clique no primeiro frame da layer Ttulo e a seguir na Text Tool (T) e insira um Static Text tomando o cuidado de usar nmeros inteiros para configurar as coordenadas X e Y.
42. Clique no primeiro frame da layer AS, tecle F9 para abrir o painel Actions e digite o seguinte cdigo: // Evita o redimensionamento fscommand (allowscale, false); // Evita o menu de contexto, exceto os itens Settings e About Flash Player fscommand (showmenu, false); // Fora o tamanho original, sem tela cheia fscommand (fullscreen, false);xMenu = 0; //constantes usada para velocidade vel1 = 350; vel2 = 10; //use como largura o tamanho total do Menu Fotos somado com 4 largura = 1668; nomeImagem = Onde os Reis se encontram; // Flag, 1 significa menu em movimento; 0 significa menu parado
rolaMenu = 1; 43. Crie um keyframe no frame 2 da mesma layer e insira o cdigo: //Controle de velocidade de rolagem do menuif (rolaMenu == 1){ xmouse = _xmouse - (vel1 / 2); velocidade = (xmouse) / vel2; if (velocidade < 0) { velocidade = -(velocidade); } if (xmouse < 0) { xMenu = xMenu + velocidade; } if (xmouse > 0) { xMenu = xMenu - velocidade; } } 44. Crie um keyframe no frame 3 da mesma layer e insira o cdigo: if (xMenu > 0) { xMenu = 0; }if (xMenu < -(largura - vel1)) { xMenu = -(largura - vel1); } setProperty (mcMenuFotos, _x, xMenu); 45. Crie um keyframe no frame 4 da mesma layer e insira o cdigo: gotoAndPlay(2); 46. Clique no frame 5 da layer Menu de Fotos, segure a tecla Shift e clique no frame 5 da layer Ttulo. Com isso selecionamos um conjunto de frames. Tecle F5 para criar frames simples em todas as layers selecionadas
Flash Vdeo - Media Components Coluna Flash - Flash Vdeo - Media Components
Flash Platform - Developing a Simple Rich Media Player Desenvolvendo um Simples Tocador de Vdeo em Flash 8 Introduo
Estaremos definindo neste artigo algo mais concreto sobre Flash 8 e vdeo, mdia rica que nenhum outro pode propor, tanto em facilidade de desenvolvimento como retorno em menor prazo.
Pr-Requisitos
Este artigo pede um conhecimento bsico de ActionScript, mas necessrio ter uma familiaridade com o Flash.
Objetivo
Definir o uso de Flash Vdeo com e sem servidor, utilizando novos componentes providos junto ao Flash 8.
Conceitos
O Flash 8 trabalha diferentemente dos seus antecessores com vdeo, nesta verso qualquer um pode trabalhar com download progressivo de maneira profissional. No momento da importao o Flash j nos traz a opo desse tipo de uso com vdeo, mas no entrarei em detalhes sobre isso aqui. Estaremos utilizando o formato .flv nos vdeos que o nico formato real de vdeo no Flash. A vantagem de se utilizar esse formato, que a Frame Rate do vdeo pode ser diferente a do seu filme principal, alm da distribuio externa de arquivos, claro. Mas a principal vantagem que considero a possibilidade de streaming real, que na verso MX s era possvel com o Macromedia Flash Communication Server, como as actions netConnection e netStream. No vamos esquecer que o Flash 8 suporta vdeo com canal Alpha e filtros aplicados dentro do prprio Flash! Mas, o que e Streaming? Streaming e a distribuio em tempo real de vdeo ao vivo ou udio na internet. Esse streaming s pode ser transferido com o Flash utilizando o Macromedia Flash Media Server 2 (ou Macromedia Flash vdeo Streaming Service). A buferizao usada para armazenar dados, antes que o streaming comece a tocar ou continue tocando. Vdeos digitais so codificados e decodificados usando um CODEC (CODEC=COmpression (compresso) / DECompression (descompresso)). V deos e udios utilizam diferentes CODECs, mas so compilados dentro de um nico arquivo, o player precisa do mesmo CODEC para que possa ser assistido. Ento a vantagem do Flash 8. A nova verso j traz consigo o Macromedia Flash 8 vdeo Encoder que converte AVI, MOV, WMV, DV, MPEG em FLV, neste caso o cliente necessita apenas do mesmo Flash Player para visualizar esse contedo rico. Algumas das vantagens que a Macromedia traz com o Flash:

Nenhum JavaScript complexo e requerido; No necessita de checagem de plataforma; No necessita de pop up; Rpida buferizao e play 100% de controle sobre o player ; O player facilmente controlado com ActionScript; Player 100% customizvel; Captura de vdeo (fire-wire cameras, USB cameras, microfones);
Agora que conhecemos uma leve camada superficial sobre vdeo e alguns conceitos, vamos desenvolver um mini player
Contedo
No Macromedia Flash 8, num novo Flash Document: J iremos criar as layers que iremos trabalhar, algumas boas convenes a serem seguidas:

A layer do topo deve ser a de ActionScript, uso o nome as; Layers nunca so chamadas por actions, logo o nome descritivo deve sempre ser alterado de forma que fique fcil de entender, no importando espaos e acentuaes;
Layers que no so usadas em tempo de execuo devem ser alteradas para guides, para isso s clicar com o direito sobre a layer e pedir guide;
Em nossas layers: Na layer do topo, vamos chamar a layer de ~AS(actionScript). Tambm criaremos mais trs layers: UI Components, FLV Playback e controles, a ordem de cima para baixo :

as (corrigir para ~AS) UI Components FLV Playback controles
import mx.video.FLVPlayback; var _playback:FLVPlayback; Estamos importando a classe FLVPlayback e identificando o objeto visual que estar associado a classe, isso nos permite acessar as propriedades e mtodos dos componentes mais facilmente. Atravs das actions abaixo vamos dizer ao Flash qual filme chamar: 1. _playback.contentPath = sampleFLV/video.flv; Note que no contentPath, coloquei o vdeo em uma pasta separada, de nome sampleFLV. Isso adota uma prtica importante de organizao de arquivos do aplicativo. O nome do arquivo ser o arquivo de cada um, no meu caso o mesmo se chama video.flv. Vamos abrir novamente o painel de componentes e arrastar para a layer UI Components dois componentes List, que se encontram no n User Interface, esses componentes tero os nomes de instncias _filmes e _capitulos. Dentro do componente _filmes vamos editar seus labels e datas, que nada mais so que respectivamente rtulos e dados que sero armazenados, onde no caso de filmes, labels guardar os nomes descritivos dos filmes e data o endereo dos filmes. Para o componente _capitulos, iremos armazenar nomes descritivos para os captulos do filme correspondente e em data armazenaremos o tempo que corresponde a entrada do captulo, por exemplo 5 (5 segundos). As configuraes para _filmes so:

Label: Baby, Montain, Jamie; Data: sampleFlv/adrian.flv, sampleFlv/MtnBike.flv, sampleFLV/Jamie_on_White.flv;
_playback.playButton = _play; _playback.pauseButton = _pause; _playback.stopButton = _stop; _playback.seekBar = _seek; _playback.volumeBar = _volume; _playback.muteButton = _mute; Podemos testar e ver como reage com esses novos componentes, e um detalhe muito importante, com dois cliques nesses componentes de navegao, podemos editar formas e cores personalizadas, como acontecia com os componentes UI na verso MX. Tudo isso com apenas nove linhas de ActionScript. Na layer de ActionScript iremos agora adicionar alguns eventos que nos informam eventos ocorridos durante a execuo: 1. /*Estamos criando o campo de texto*/ 2. var texto:TextField = _root.createTextField(info, _root.getNextHighestDepth(), 11, 340, 0, 0); 3. /*O texto ser auto dimensionvel a partir da esquerda*/ 4. texto.autoSize = left; 5. /*O texto no ser selecionvel*/ 6. texto.selectable = false; 7. /*Estamos criando o estilo para o campo de texto*/ 8. var estilo:TextFormat = new TextFormat(); 9. /*Fonte*/ 10. estilo.font = Verdana; 11. /*Tamanho*/ 12. estilo.size = 12; 13. /*Negrito*/ 14. estilo.bold = true; 15. /*Cor do texto*/ 16. estilo.color = 0990000; 17. /*Sublinhado*/ 18. estilo.underline = true; Agora que j temos nosso texto precisamos adicionar eventos e conforme a ocorrncia apresenta-los no campo de texto, nosso componente possui alguns eventos, como ready e stateChange, veremos algo muito breve sobre isso. Assim como todo componente devemos adicionar ou objeto genrico que fica prestando ateno a eventos que ocorrem com o Objeto, ele quem nasce exclusivamente para escutar esses eventos,
chamaremos ele de ouvidor: 1. var ouvidor:Object = new Object(); Agora que est criado nosso objeto (abaixo das actions anteriores) devemos aplicar a este objeto os eventos que escutaremos, no caso ready e stateChange: 1. ouvidor.ready = function():Void { 2. //Exibe o tempo total do filme 3. texto.text = Tempo total: +_playback.totalTime; 4. //Aplica o estilo ao texto 5. texto.setTextFormat(estilo); 6. }; 7. ouvidor.stateChange = function():Void { 8. //Exibe o estado do filme, como por exemplo tocando, pausado, etc 9. texto.text = _playback.state; 10. //Aplica o estilo ao texto 11. texto.setTextFormat(estilo); 12. }; Aplicando agora o objeto ouvidor ao componente utilizado: 1. _playback.addEventListener(ready, ouvidor); 2. _playback.addEventListener(stateChange, ouvidor); Nosso cdigo final esse: 1. import mx.video.FLVPlayback; 2. var _playback:FLVPlayback; 3. _playback.contentPath = sampleFLV/betina.flv; 4. _playback.playButton = _play; 5. _playback.pauseButton = _pause; 6. _playback.stopButton = _stop; 7. _playback.seekBar = _seek; 8. _playback.volumeBar = _volume; 9. _playback.muteButton = _mute; 10. //Estamos criando o campo de texto 11. var texto:TextField = _root.createTextField(info, _root.getNextHighestDepth(), 11, 340, 0, 0); 12. //O texto ser auto dimensionvel a partir da esquerda 13. texto.autoSize = left; 14. //O texto no ser selecionvel 15. texto.selectable = false; 16. //Estamos criando o estilo para o campo de texto 17. var estilo:TextFormat = new TextFormat(); 18. //Fonte 19. estilo.font = Verdana; 20. //Tamanho 21. estilo.size = 12; 22. //Negrito 23. estilo.bold = true; 24. //Cor do texto 25. estilo.color = 0990000; 26. //Sublinhado 27. estilo.underline = true; 28. var ouvidor:Object = new Object();
29. ouvidor.ready = function():Void { 30. //Exibe o tempo total do filme 31. texto.text = Tempo total: +_playback.totalTime; 32. //Aplica o estilo ao texto 33. texto.setTextFormat(estilo); 34. }; 35. ouvidor.stateChange = function():Void { 36. //Exibe o estado do filme, como por exemplo tocando, pausado, etc 37. texto.text = _playback.state; 38. //Aplica o estilo ao texto 39. texto.setTextFormat(estilo); 40. }; 41. _playback.addEventListener(ready, ouvidor); 42. _playback.addEventListener(stateChange, ouvidor);
Consideraes Finais O uso direto de filtros no vdeo no permitido, para isso transforme o vdeo em MovieClip e aplique filtros e Blend Modes como desejar, s no esquea de mudar na ActionScript a referncia ao objeto.
FLASH - Banner expansvel Montando a estrutura do Banner

Primeiro vamos definir o tamanho de nosso MovieClip e o Frame Rate dele.
As camadas devem ficar assim:
Na camada tela vamos criar um MovieClip de 467.9 width por 230.7 height e vamos instancia-lo como tela, vamos colocar ele na posio _X = 0.0 e _Y = -231.4, d um duplo clique nesse MovieClip tela e com o shpe selecionado navamente tranforme em MovieClip, vamos a animao, a suas camadas devem ficar dessa forma:
No primeiro frame da camada Base Azul, voc tem o MovieClip na posio atual de _X = 0.0 e _Y = 231.4, no frame 20 voc deve colocar a posio desse MovieClip em _X = 0.0 _Y = 299.6, clique no primeiro frame da camada Base Azul novamente, na paleta Propriets clique em EDIT e configure como nas figuras abaixo:
depois disso ainda na camada Base Azul clique no frame 35 e precione F6. Agora na camada Texto adcione um texto no frame 20, na posio de _X 44.0 e _Y = 137.9 e depois clique no frame 35 e coloque na posio _X = 44.0 e _Y = 387.9, agora crie a animao, feito isso clique novamente no frame 20 da camada Texto e configure da seguinte forma:
Agora na camada Action voc coloca a ao de stop(). vamos voltar a tela principal do nosso banner e vamos criar um boto para ativa esse MovieClip, o meu ficou assim:
Vamos converte-lo em MovieClip e dar o nome de Intancia de Ativa, pronto a nossa estrutura de banner j est pronta agora vamos adicionar o codigo na camada Actions. 1. // parando a animao no primeiro Frame 2. stop(); 3. // declarando o MovieClip ativa 4. var ativa:MovieClip; 5. // Quando passar o Mouse sobre 6. ativa.onRollOver = function() { 7. // Criar uma instancia de OnEnterFrame sobre o MovieClip tela 8. _root.tela.onEnterFrame = function() { 9. // Avanar um Frame 10. _root.tela.nextFrame(); 11. // se o frame atual for igual ao Frame total 12. if (this._currentframe == this._totalframes) { 13. // deletar a instancia de onEnterFrame 14. delete this.onEnterFrame; 15. } 16. }; 17. }; 18. // Quando retirar o Mouse 19. ativa.onRollOut = function() { 20. // Criar uma instancia de OnEnterFrame sobre o MovieClip tela 21. _root.tela.onEnterFrame = function() { 22. // Retrocede um Frame 23. _root.tela.prevFrame(); 24. // se o frame atual for igual a 1 25. if (this._currentframe == 1) { 26. // deleta a instancia de onEnterFrame 27. delete this.onEnterFrame; 28. } 29. }; 30. };
Conhecendo o Flash 8 - Parte 1

Nessa primeira parte da srie de artigos sobre o Flash 8, estarei mostrando quais foram as novidades visuais da nova ferramenta. Veremos a nova disposio de alguns painis, as mudanas com ferramentas e a nova opo de publicao Device voltada para emular dispositivos mveis. Vamos comear exatamente pelo comeo. Como assim pelo comeo? Pela tela de boas vindas:
1 - Menu para abrir arquivos recentemente utilizados. 2 - Menu de criao com tipos de arquivos pr-estabelecidos. 3 - Menu de criao com base em Templates com novas opes para portteis. 4 - rea de informaes de ajuda assim e links teis no site da Macromedia. Vamos agora analisar as mudanas na interface do Flash:
1 - Alterao na posio das ferramentas Free Transform e Fill Transform. 2 - Boto especfico para mostrar/ocultar a Timeline. 3 - Abas para painis com mais de uma opo, Properties e Align, por exemplo. 4 - Nova opo de publicao especfica para Portteis. Vamos dar uma olhada agora nas novidades das ferramentas, nesse caso da ferramenta Line:
1 - Novas opes para o estilo de final das linhas. 2 - Estilo com final arredondado. 3 - Estilo com final quadrado. Outra novidade referente a linhas no Flash 8 a opo de gradiente em linhas:
No Flash 8 ns temos uma nova opo para as ferramentas de desenho (Line, Pen, Oval, Rectangle, Pencil e Brush), seu nome Object Drawing:
1 - Com a opo Object Drawing selecionada. 2 - Toda vez que finalizarmos um desenho, ele ir se tornar um objeto protegido evitando-se assim aqueles problemas com formas sobrepostas. A ferramenta Text tambm vem com suas novidades:
1 - Agora temos pontos de edio que nos possibilitam modificar o tamanho do campo de texto sem redimensionar o texto ao mesmo tempo, de forma semelhante a que usvamos a ferramenta Free Transform em um componente. 2 - Caixa para controle do Anti-alias a ser usado. Agora vamos falar um pouco sobre a nova opo de publicao, o menu Device. Esse menu voltado especificamente a publicao de contedo para portteis, para isso temos como premissa bsica a verso Lite do Flash Player
Nesse menu temos opes para escolher o tipo de contedo (Standalone Player, Browser) e o aparelho com o qual o iremos fazer a emulao.
Aqui temos a emulao de um Nokia N-Gage rodando contedo para Standalone Player. Talvez a primeira certeza que temos quando analisamos o Flash 8 que as principais novidades so referentes a parte visual, seja em ferramentas seja em efeitos. Outra constatao ver o empenho da Macromedia em possibilitar um desenvolvimento para portteis muito mais completo. Sem sombra de dvidas essa verso do Flash ser de longe a melhor ferramenta de desenvolvimento interativo para Web, proporcionado riqueza tanto na experincia do usurio quanto na diversidades de dispositivos a que se tem suporte no processo de criao. Espero que todos tenham aproveitado esse artigo, visei mostrar os principais novidades do Flash 8 fora os to esperados Filtros, assunto do nosso prximo artigo. Um abrao a todos e eventuais dvidas postem no frum.
Danilo Santana Administrador do Portal MXSTUDIO Moderador de Flash & ActionScript
Conhecendo o Flash 8 - Parte 2 (Filtros)

Nessa segunda parte da srie de artigos sobre o Flash 8, vou mostrar para vocs a novidade mais esperada pela maioria dos desginers, a utilizao de Filtros. Como esse artigo destina-se a explicar de forma sucinta os apectos gerais, no vou fazer um how to nem me aprofundar no que cada filtro faz. De incio temos de saber onde e como podemos usar os filtros. O painel Filtros foi criado como filho do painel Properties e tem como opes principais: Drop Shadow, Blur, Glow e Bevel. Ns s podemos inserir filtros em objetos que possam ser referenciados por programao, ou seja, Movie Clips e Buttons. No existe limitao quanto a se aplicar os filtros separadamente, na figura abaixo vocs podem ver que foram aplicados dois filtros ao mesmo tempo:
1 - Objeto do tipo Movie Clip selecionado. 2 - Aba Filtros e a relao dos filtros aplicados. No caso Drop Shadow e Blur. 3 - Com um filtro selecionado, abre-se as Opes de Manipulao desse filtro. Durante a elaborao desse artigo pensei na melhor forma de mostrar o que realmente se pode fazer usando de forma sensata alguns filtros. Cheguei a concluso que a soluo era criar uma aplicao usando filtros, mas como iria se tratar puramente de elementos visuais, preferi utilizar um arquivo de exemplo do prprio Flash 8 no qual bolas de bilhar (a bola 8) se chocam. Nesse arquivo fazendo-se uso de filtros como Drop Shadowe Blur mais alguns sons, simula-se de forma realista colises de bolas. Abaixo capturei uma imagem que mostra a aplicao de filtros em uma das bolas durante a animao:
1 - Movie Clip bola selecionado. 2 - Aplicao e manipulao de Filtros. Vocs podem visualizar o SWF desse exemplo:
Para aqueles que j tem o Flash 8 instalado, o fonte desse exemplo encontra-se em : X:\Arquivos de programas\Macromedia\Flash 8\Samples and Tutorials\Samples\Graphics\AnimationAndGradients Outro exemplo utilizando Blur e Glow:
Mas talvez um dos fatos mais favorveis para a utilizao de filtros est na liberdade na forma de cri-lo e manipul-lo. Ns podemos fazer isso de duas formas: 1 Utilizando a aba Filters no painel Properties como ilustrado anteriormente. 2 Fazendo-se uso de programao. No caso da segunda opo, precisamos apenas importar as classes referentes aos filtros desejados e programar nossos efeitos. Mais uma vez irei fazer uso de um exemplo do Flash 8, s que dessa vez fiz vrias alteraes como a insero dos controles de Glow e retirada do carregamento de imagens:
Nesse exemplo manipulamos dinamicamente a aplicao dos filtros, basta marcar o filtro desejado e alterar os parmetros para se visualizar o efeito Novamente para aqueles que j tiverem o Flash 8 instalado, o arquivo que serviu de base para esse exemplo pode ser encontrado no seguinte caminho: X:\Arquivos de programas\Macromedia\Flash 8\Samples and Tutorials\Samples\ActionScript\Filters Tenho certeza que de cada 4 designer no mnimo 2 diriam que os filtros so a novidade mais empolgante. Agora podem estar certos de que esses novos recursos sero usados a exausto, e isso fatidicamente nos levar a trabalhos que iro abusar de filtros e efeitos, cabe a ns termos o bom senso para uma criao sensata e equilibrada. Para aqueles que ainda no usam o Flash 8 eu deixo o recado: Baixem o Trial, faam seus testes e criem cada vez mais experincias agradveis para o usurio. Espero que todos tenham aproveitado as informaes e at o prximo artigo que ir tratar das incrveis melhorias de vdeo no Flash 8. Peo que eventuais dvidas sejam postadas no frum. Um abrao a todos e at a prxima.
Conhecendo o Flash 8 - Parte 3 (Video)

Ol pessoal! Finalizando essa srie sobre os novos aspectos do Flash 8 eu vou falar sobre as melhorias que firmam a
Plataforma Flash como a melhor soluo para video na Web. A melhor forma de compreender as melhorias fazer um exemplo, pensando nisso procurei um video que facilitasse a exemplificao desses novos recursos. Um filme no muito grande mas com video e audio. Optei por um filme com 4.818 KB mostrando as periprcias de um jogador comum de futebol. Antes de comearmos a trabalhar, vou dar um panorma sobre o uso de video no Flash e suas novidades para a verso 8. Para aqueles que nunca trabalharam com video no Flash aqui vai uma pequena explicao sobre as formas de se dispor vdeo para a Web atravs dele: SWF - Importao do vdeo dentro do seu documento e publicao em SWF. >>>> Alm de ser fcil, no requer softwares adicionais. FLV - Carregamento do arquivo FLV durante a exibio do seu contedo (Download Progressivo). >>>> Alm de servir como falso streaming, nos possibilita o uso de cue points e de vdeos maiores. FCS - Carregamento no servidor de streaming (Flash Communication Server). >>>> Possibilita controle do streaming assim como deteco de banda e conexes simultneas. Nesse artigo vamos ver a segunda opo, o uso de arquivos FLVs carregados do servidor e exibidos em um player no nosso SWF. Agora que vocs j sabem quais so as formas de se trabalhar com vdeo no Flash, vou lhes contar as novidades que a nova verso trouxe. Primeiramente ns temos o Flash 8 Video Encoder, uma ferramenta que nos possibilita gerar nossos FLVs de forma rpida e fcil. Ele vem junto com o Flash e pode ou no ser instalado junto com a ferramenta. Durante esse artigo irei falar mais sobre o Encoder. Outra grande novidade (talvez a maior) o novo codec de vdeo, o On2 VP6 que o ncleo dessa revoluo de vdeo no Flash 8. Com o VP6 conseguimos compactaes incrveis, mas vou mostrar isso mais adiante. Agora chega de explicaes e vamos botar a mo na massa. Nosso primeiro passo ser coverter o vdeo WMV em FLV utilizando o Flash 8 Video Encoder. Com o Flash 8 e seu Encoder instalados, vocs podem abr-lo na pasta Macromedia do menu Iniciar.
1 - Boto Add para selecionar com quais arquivos iremos trabalhar. 2 - Descrio do arquivo adicionado como caminho absoluto, configurao de compactao e status. 3 - Boto Settings para as configuraes de compactao. Depois de adicionar o vdeo ao Encoder, selecionem Settings para fazer as configuraes necessrias.
1 - Escolha da configurao de codificao. 2 - Boto Show/Hide Advanced Settings nos mostra mais opes para a codificao. 3 - Opes de vdeo como qualidade e codec a ser utilizado. Selecionando a aba Cue Points, podemos definir esses pontos que servem como captulos em nosso vdeo:
1 - Aba Cue Points. 2 - Botes para adio e remoo de cue points. 3 - Linha do tempo do vdeo para delimitao dos cue points. 4 - Cue Point sendo adicionado e configurado. Clicando em OK, resta agora iniciar a compactao:
1 - Boto Start/Stop Queue. 2 - Informaes referentes ao arquivo de entrada, o de sada e dados sobre a compactao. 3 - Demonstrativo de progresso e tempo estimado de trmino. Com a concluso da compactao resta-nos saber qual foi a diferena de tamanho do WMV para o FLV. No caso como eu configurei para que o vdeo ficasse um pouco mais modesto, chegamos ao incrvel valor de 2.330 KB no nosso FLV.
A reduo foi de mais de 50% e vale dizer que eu poderia ter sido ainda mais rigoroso nas configuraes de
compactao. Bom passada a positiva surpresa do tamanho de nosso FLV, vamos agora abrir nosso Flash 8 e utilizar um componente para exib-lo:
1 - Selecione o componente FLVPlayBack, especfico para reprodues de FLV na verso 8. 2 - Arraste o componente para o palco. 3 - Abra o painel Component Inspector na aba Parameters. 4 - No parmetro contentPath referencie o arquivo FLV a ser carregado (recomendo que ele esteja na mesma pasta). Se vocs publicarem o vdeo j ser exibido mas sem nenhum controle dos quais estamos acostumados, logo, vamos inserir controles de vdeo como volume, play e stop alm de botes para navegao dos captulos:
1 - Selecione o parmetro skin. 2 - Exibe-se um preview da skin selecionado. 3 - Escolha a skin a ser utilizada, no meu caso: SteelExternalAll.swf. 4 - D um OK e confirme a aplicao da skin. Obs: Um adendo quanto ao uso de skins que depois de inser-la no seu arquivo j salvo em uma pasta e publicado, voc ver que foi gerado um swf com o nome da skin selecionada, isso significa que a skin na verdade um arquivo externo que carregado durante a exibio para aplicar os elementos visuais que voc escolheu. Pronto tendo um FLV j gerado, em menos de 5 minutos voc cria uma aplicao para reproduz-lo atravs de download progressivo. Difcil?! Creio que nem um pouco e com os devidos testes e exemplos tenho certeza que todos os interessados estaro aptos a criar esse tipo de contedo de forma rpida, fcil e sem maiores dores de cabea. Abaixo vocs podem visualizar o arquivo que criei para esse artigo, lembrem-se esse vdeo ficou com apenas 2.330 KB contra os 4.818 KB do WMV. Obviamente ele est voltado aqueles que possuem uma banda de pelo menos 150 kbps o que no nada hoje em dia. E pensar que eu li h alguns dias que um provedor j fornece 100 mbps no Japo
A propsito, o vdeo tem 1:54 min e mais uma vez eu afirmo: 2.330 KB!! Espero que ter desmistificado possveis dificuldades na criao e visualizao de arquivos FLVs pelo Flash alm de ter apresentado nosso poderoso Video Encoder e seus FLVs. Faam seus testes e espero em breve ver vrias aplicaes utilizando esses recursos to valiosos. Em caso de dvidas utilizem nossos fruns. Um abrao a todos e at a prxima. Danilo Santana Administrador do Portal MXSTUDIO Moderador de Flash & ActionScript
Seqencial Preloader - Porcentagem

Renan Fretta Colunistas desde: 2007 Matrias publicadas: 22 Neste artigo explicarei como criar um preloader com porcentagem.
Vamos direto a prtica 1) Crie um arquivo com o nome Principal.fla. 2) Crie as camadas de acordo com a imagem abaixo.
3) Inclua uma foto no segundo quadro da camada Foto
4) Inclua o Script no primeiro quadro da camada Actions, como a imagem abaixo.
5) Insira um campo de texto dinmico no primeiro quadro da camada Preloader, associe a vriavel pct, como mostra a imagem abaixo.
6) Com o campo de texto selecionado, tecle F8. Selecione a opo Movie Clip e o Registration do Centro. Clique no boto OK.
7) Com o Movie Clip selecionado, instancie de preloader.
Agora crie o arquivo preloader.as e coloque-o no mesmo diretrio do arquivo principal.fla. Digite os comandos como mostra a imagem abaixo.
9) Pronto! Agora abra o arquivo Principal.fla e tecle CTRL + ENTER, quando voc visualizar a imagem tecle novamente CTRL + ENTER para testar o seu preloader. Caso queira configurar a taxa de simulao de download, clique no menu View >>> Download Settings e escolha a velocidade de download.
Seqencial Preloader - Barra de Progresso

Neste artigo explicarei como criar um preloader com a barra de progresso, para isso necessrio que voc tenha em mos os arquivos do artigo anterior: Seqencial Preloader - Porcentagem. Vamos direto a prtica 1) Abra o arquivo Principal.fla. 2) Abra o Movie Clip Preloader. Crie a camada Contorno e Barra. Na camada barra desenhe um retngulo de 100px por 20px, depois recorte seu contorno e coloque na camada Contorno. Clique na Barra, sem o contorno, e precione a tecla F8. Digite no campo Name: Barra, escolha o radiobutton Movie Clip e escolha o primeiro Registration da segunda linha. Pressione OK.
var preloader:MovieClip; // Nosso MovieClip var numero:Number = new Number(0); // Varivel numero iniciada com o valor 0 function Init() { // Funo Init _root.stop(); // Para o filme onEnterFrame = function () { // Ao entrar no quadro executar a funo var bl:Number = _root.getBytesLoaded(); // bl recebe os bytes carregados var bt:Number = _root.getBytesTotal(); // bt recebe os bytes totais if (bl>4 && bt>4 && bl>=bt) { // Se os bytes carregados forem maior que 4 e os bytes totais forem maior que 4 e bytes carregados forem maior que bytes totais delete onEnterFrame; // Destri o evento EnterFrame
_root.nextFrame(); // V para o prximo quadro preloader.unloadMovie(); // Destri o MovieClip preloader da memria } else { // Seno numero = Math.floor(bl/bt*100); // A varivel numero vai receber o arredondamento dos bytes carregados divididos pelos bytes total multiplicados por 100 preloader.pct = numero+%'; // O campo dinmico vai receber a varivel numero mais o caracter % preloader.barra._width = numero; // O tamanho da barra ser o valor da varivel nmero } }; } Init(); // Chamamos a funo Init
Usando Movieclips como Mascaras

Efeitos interessantes usando Mscaras, Todos ns sabemos da maravilha que a mscara no Flash, hoje vamos explorar um pouco a idia de se usar esse recurso usando movieclips como mscaras. Para fazer esse tutorial fcil, precisaremos apenas de 3 imagens com o mesmo tamanho. Preparando o trabalho: Comeando nosso trabalho, vamos criar um novo arquivo no Flash, com o mesmo tamanho em altura e largura que tiverem as imagens, depois vamos importar as imagens para a Biblioteca (Library), clicando em File / Import / Import to Library. Comeando: Com as imagens inseridas na Biblioteca, iremos agora criar um movieclip que ser nosso primeiro efeito, cliquem em Insert / New Symbol / e na janela vamos dar o nome de animao 1, marcar a opo movie clip e clicar em OK, ento entraremos na timeline do movieclip. Apertando a tecla F11, abriremos a Biblioteca (Library), e dela vamos clicar e arrastar a primeira imagem para o movieclip e colocar a imagem nas posies 0 em x e 0 em y:
Vamos dar o nome pra esse layer de Imagem 1, e poderemos trancar ele e criar um novo layer com o nome Mascara, nele vamos desenhar um retangulo sem bordas que alcance a largura toda da imagem, depois de criado o retangulo, aperte as teclas Shift + F9 para abrir a janela color mixer, escolhe a opo Solid em Fill Color (cor de preenchimento), e deixe a transparencia em 50%:
Vamos selecionar esse retangulo e apertar a tecla F8, vamos salvar ele como movieclip, com o nome de mascara 1 sem aspas. Agora que nosso retangulo um movieclip, vamos dar um duplo clique nele para entrar na sua timeline, a barra de navegao dever estar assim:
Mais uma vez vamos selecionar esse quadrado dentro do movieclip, vamos apertar a tecla F8, e salvar ele como movieclip, com o nome barra 1 sem aspas, ele ficar conforme a imagem abaixo:
Agora vamos criar vrias cpias desse retangulo at que ele cubra toda a imagem, muito cuidado para no ficar nenhum espao entre eles: Certo:
Errado:
Notem que na figura acima os movieclips dos retangulos no cobriram direito a imagem pois h alguns espaos entre eles, ento deixem bem encostados para no dar problemas com a mscara. Aps ter multiplicado os retangulos e cobrir a imagem com eles, vamos selecionar todos eles a apertas as teclas Ctrl + Shift + D, o mesmo que clicar com o boto direito do mouse sobre eles e clicar em Distribute to Layers , fazendo isso o Flash vai distribuir cada retangulo num layer diferente, ento agora vamos fazer uma animao simples com esses retangulos, vamos clicar no mais alto e achar o layer correspondente a ele, que dever ser o primeiro debaixo para cima:
Ento a ordem ser essa, vamos deixar esse primeiro layer onde est e os decima vamos deixar 2 frames de distncia entre um e outro:
Depois de feito isso, vamos apertar a tecla F5 embaixo do ultimo frame criado, vamos repetir essa operao em todos os layer, por ultimo, no layer vazio que sobrar encima, vamos dar o nome dele de aes e criar um frame vazio (F7) encima do ltimo frame, e colocar a ao: stop(); Vejam o resultado de como ficar esse movieclip:
Se apertar a tecla Enter, percebero que os retangulos comearo a cobrir a imagem decima para baixo, agora vamos voltar para o movieclip animao 1, e vamos criar mais um layer acima do layer nomeado como mascara, depois disso clique com o boto direito do mouse no primeiro frame no
layer mscara e clique em Copy Frames, logo em seguida clique com o boto direito do mouse sobre o novo layer criado e clique em paste frames, ento ter dois layers duplicados no movieclip:
Vamos renomear o Layer criado acima para Luz e com o do meio vamos clicar com o boto direito do mouse sobre ele e clicar em Mask:
Agora vamos voltar pra timeline principal, e vamos arrastar o movieclip da biblioteca pro palco, vamos deixa-lo nas posies 0 em x e y:
Vou tirar apenas a ao stop(); no meu arquivo, para mostrar o resultado at agora, mas no tire no seu arquivo, se voc testar ele deve ficar assim, s no ficar continuo como o desse exemplo:
Ento ele carrega a mscara nessa ordem que a do movieclip e fica com o branco por cima por causa daquele layer Luz, agora vamos finalizar esse efeito, vamos abrir a Biblioteca, clicar sobre o nome do movieclip Barra 1 que aquele retangulo e vamos clicar em Edit, ento veremos o triangulo no palco, vamos clicar no frame 5 desse movieclip, e vamos apertar a tecla F6 para fazer uma cpia do frame 1 para o frame 6, agora cliquem no frame 1, e nas propriedades coloque a opo Shape no Tween, assim sua timeline dever ficar verde como no exemplo:
No primeiro frame vamos selecionar o retangulo e apertar a tecla Q, depois mantenha a tecla Alt pressionada e vamos deixar o retangulo mais fino, s que alinhado ao centro:
E no ultimo frame vamos abrir a paleta de cores denovo (Color Mixer) e vamos escolher a cor slida branca, s que ao invs de 50% agora vamos deixar com 0%, totalmente transparente:
Se o retangulo sumir, no se desespere, ele est ali, s que agora est transparente, agora crie um novo layer, e no frame 5 aperte a tecla F7 para criar um frame em branco, e nele coloque a ao: stop(); Voltem a timeline principal e testem a animao denovo, ela dever estar assim, s que sem loops claro:
Agora que viram que deu certo a primeira imagem, podem remover o movieclip da timeline principal, porque depois vamos inserir os 3 de uma vez s, depois de remover, vamos clicar em Insert / New Symbol e vamos criar um novo movieclip com o nome de Animao 2. Com a Biblioteca aberta, arraste a segunda imagem para o movieclip que est vazio, colocando-a na posio 0 em x e y como fizemos com a imagem anterior, feito isso tranque esse layer da imagem e crie um novo layer com o nome Macara.Nesse layer desenhe um quadrado branco com 50% de transparencia, como no movieclip anterior, e tambem
coloque-o na posio 0 em x e y:
Selecione esse quadrado, e apertando a tecla F8, vamos transforma-lo em um movieclip com o nome Mascara 2, agora clique duas vezes sobre o quadrado para entrar na timeline do movieclip Mascara 2, e nele vamos selecionar o quadrado denovo e vamos apertar novamente a tecla F8 e salvar ele como movieclip com o nome quadrado 1, e como o retangulo vamos multiplicar ele na imagem toda at cobrir a imagem:
Com todos os movieclips selecionados no palco, vamos clicar em Modify / Timeline / Distribute to Layers (Ctrl + Shift + D) assim ficar cada movieclip num layer diferente. Vamos embaralhar os layers, alterando eles bastante de posies, para que a sequencia dos quadrados que forem aparecer fiquem trocadas, ou se quiserem podem seguir uma
ordem, para embaralhar clicar e arrastar os layers para cima ou para baixo, depois de embaralhar bastante, vamos fazer como no primeiro movieclip, comeando debaixo para cima, vamos fazer aquela escadinha, dando espao de dois frames entre um frame que contem um quadrado e o outro:
Aperte a tecla F5 em todos os frames abaixo do ultimo que foi criado.No layer acima que sobrou, vamos dar o nome de Aes para esse layer e no ltimo frame onde acaba o ultimo quadrado vamos apertar a tecla F7 para criar um novo frame em branco e nele vamos colocar a ao stop(); De um duplo clique em qualquer um dos quadrados para entrar na timeline do movieclip Quadrado, vamos selecionar o quadrado e apertar a tecla F8 mas uma vez, dessa vez vamos salvar ele como grafico, com o nome de Quadrado, em seguida, clique no frame 6 e aperte a tecla F6 para fazer uma cpia do frame 1 no frame 6, cliquem no frame 1 e na barra de propriedades, mude o Tween para Motion, em seguida selecionem o objeto e vamos clicar em Modify / Transform / Rotate 90 CCW (Ctrl + Shift + 10), aparentemente ele no fez nada, mas se testar a timeline ver que ele andou 90 graus sentido ante horrio, agora com a ferramenta Free Transform Tool, vamos comprimir esse quadrado, mantenha a tecla Shift pressionada para ele diminuir em direo ao centro do quadrado:
No ltimo frame, clique no quadrado, e na barra de propriedades no campo color, selecione o alpha e deixe ele em 0% (totalmente transparente).Crie um novo layer com o nome de aes, crie um novo frame no frame 6, e coloque a ao: stop(); Volte para a timeline do movieclip Mascara 2, e depois para o movieclip Animao 2, chegaremos a essa timeline:
Crie mais um layer acima do layer Mascara, com o nome de Luz, copie o primeiro frame do layer mascara e colar no primeiro frame do layer Luz, uma maneira fcil de fazer isso dar um clique no frame depois manter pressionado a tecla Alt e clicar e arrastar o frame do layer Mascara, pro frame do layer Luz, automaticamente o layer Luz mudar seu nome para Mascara, mas s renomear denovo que no tem problema. Cliquem com o boto direito do mouse sobre o layer Mascara e cliquem em Mask, assim o movieclip ser mascara da imagem que est por baixo, quem quiser testar o efeito s voltar para a timeline, arrastar o movieclip para o palco e testar, o resultdo dever ser esse: Quem fez o teste, delete o movieclip da timeline para ele ficar
apenas na Biblioteca, agora vamos criar o terceiro e ultimo movieclip. Clique em Insert / New Symbol / e vamos criar um Movieclip com o nome Animao 3 e clicar em Ok, assim ja estaremos na timeline desse movieclip.Abra a Bilblioteca e puxe a ultiam imagem para o palco desse movieclip, deixando a imagem na posio 0 (zero) em x e y:
Tranque esse layer e crie mais um com o nome Mascara, nele vamos desenhar um retangulo com a mesma altura da imagem do lado direito, vamos fazer ele na cor branca com 60% de transparencia, como fizemos nos anteriores (que estavam com 50% de transparencia):
Selecione esse retangulo e salve ele como um movieclip com o nome de Mascara 3, de um duplo clique pra entrar na timeline desse movieclip, selecione novamente o retangulo e salve ele como movieclip com o nome barra 3, agora vamos fazer cpias
dele no palco e cobrir a imagem com eles:
Depois de selecionar todos os movieclips no palco, clique com o boto direito do mouse sobre eles e clique em Distribute to layers, como nos outros movieclips ele ir distribuir os movieclips cada um em um frame, agora vamos fazer diferente e fazer uma escada com espao de dois frames at a metade dos retangulos, depois a mesma voltando, ento at a metade ela vai, e da metade pra l ela volta:
Depois disso deixe todos os frames estticos at o ultimo usando no movieclip, e no primeiro frame l encima vamos criar um frame em branco no ultimo frame e colocar a ao: stop(); Feito tudo isso de um duplo clique em qquer movieclip do palco para editar o retangulo, certifique-se que voc est na timeline Scene 1 >> Animao 3 >> Mascara 3 >> Barra 3, clique no frame 6 e aperte a tecla F6 pra fazer uma cpia do
frame 1 no frame 6:
Clique no primeiro frame e mude o tween para Shape, selecione o retangulo no palco e nas propriedades deixe o H com o valor de 5 pixel, agora selecione o retangulo no frame 6, abra a paleta do Color Mixer, e coloque a transparencia do preenchimento para 0, deixando o objeto todo apagado:
Crie mais um layer com o nome Aes e no ultimo frame coloque a ao: stop(); Agora volte para a timeline do Movieclip Mascara 3, nele criamos aquelas duas escadinhas de frames, ento vamos inverter os movieclips que estaro desse ponto pra cima:
Ento da metade dos layers pra cima, vamos clicar no frame, depois clicar no objeto que tem nele que est no palco, e vamos clicar em Modify >> Transform >> Flip Vertical, ento esses movieclips ficaro de ponta cabea, como nesse exemplo:
Repita a operao at o ultimo frame decima, assim ficaro metade normal e metade de ponta cabea:
Volte para a timeline do movieclip Animao 3, faa um novo layer acima do layer Mascara e copie o primeiro frame do layer Mascara para o primeiro frame do layer acima, depois disso de o nome ao layer decima de Luz e clique com o boto direito do mouse encima do layer Mascara e no menu que se abrir, clique em Mask, e assim esto prontos nossos 3 movieclips, vamos agora voltar a timeline principal do swf que ainda est vazia. Vamos criar 5 Layers, o primeiro debaixo pra cima se chamar Imagem de fundo, nele iremos criar um frame em branco no segundo frame, para isso s clicar no segundo frame e apertar a tecla F7, feito isso vamos abrir a Biblioteca apertando a tecla F11, e vamos puxar a imagem usada no ultimo movieclip para o palco, e colocar ela na posio 0 em x e y, mas preste ateno pois ser s a imagem e no o movieclip que criamos:
Em seguida selecione a imagem e transforme ela em um movieclip com o nome img_fundo, e de o nome de instancia para esse movieclip de img_fundo sem aspas:
Clique no terceiro frame desse Layer e aperte a tecla F5 para deixar ele esttico at o frame 3, depois disso vamos pro segundo Layer onde daremos a ele o nome de Animao 1, vamos criar um frame em branco no segundo frame desse layer e vamos arrastar uma cpia do movieclip Animao 1 da biblioteca para o palco, deixando na posio 0 em x e y, ele dever ficar exatamente encima da imagem que ficou por baixo, caso no fique, pode ser a mascara no movieclip que no est na posio 0, se a posio 0 em x e y no se encaixar prfeitamente, coloque a olho mesmo at ajustar, depois disso clique no terceiro frame e tambem aperte a tecla F5 para deixar os dois estticos. Depois disso vamos para o terceiro Layer, o nome dele ser Animao 2, vamos fazer um novo frame no terceiro frame desse layer, e vamos fazer o mesmo procedimento, arrastar o movieclip Animao 2 e coloca-lo no palco na posio 0 em x e y, depois de ajustara sua posi se por acaso for preciso, vamos clicar no frame 4 e apertar a tecla F5 para manter a animao esttica nos frames 3 e 4. Vamos para o quarto Layer, com o nome de Animao 3, vamos criar um frame em branco no frame 4, e arrastar o movieclip Animao 3 da biblioteca para o palco, depois de ajustar ele nas posies tambem vamos deixar o frame 5 esttico, apertando a tecla F5:
No ultimo Layer, vamos dar o nome de Aes, e vamos colocar essa ao no primeiro frame: _root.numero = 1; Em seguida crie um novo frame no frame 2, que vai receber a seguinte ao: stop(); _root.img_fundo._visible = false; if (_root.numero == 2) { _root.img_fundo._visible = true; } comeco = setInterval(avancar, 3000); function avancar(){ if (_currentFrame == 4) { clearInterval(comeco); _root.numero = 2 gotoAndStop(2);} else { nextFrame(); } } Detalhando o cdigo: Acima criamos uma funo que far com que a cada 3 segundos a timeline ande 1 Frame, mostrando assim uma animao a cada 3 segundos. A ao _root.img_fundo._visible = false; torna aquele movieclip imagem de fundo transparente na primeira passagem, e a partir da segunda passagem (loop) ele aparecer por baixo da primeira animao pra parecer que continuao do final da animao. Ento criamos a ao: if (_root.numero == 2) { _root.img_fundo._visible = true; } Ela que dizer que se o numero do _root que criamos no frame receber o valor 2, ento a imagem de fundo que criamos ficar visvel, isso acontecer a partir da segunda vez que se repetir o efeito. comeco = setInterval(avancar, 3000); function avancar(){
if (_currentFrame == 4) { clearInterval(comeco); _root.numero = 2 gotoAndStop(2);} else { nextFrame(); } } Acima se declarou o intervalo da funo avanar para 3000, ento se cada 1000 corresponde a 1 segundo, isso far com que a cada 3 segundos a funo seja executada. Ento ela faz uma condio dizendo que se o frame atual for o frame 4, ela vai quebrar esse intervalo, e o valor do numero de _root vai passar a ser 2, assim fazendo aparecer o movieclip na segunda passagem, e o clearInterval que faz parar o Intervalo, serve apenas, para quando recomear a funo pra ela no dobrar, seno ela comea a pular 2 frames por vez, depois 3, at ficar maluca a funo, ento s um anti-bug. E por fim, se for verdadeiro de o frame atual ser o 4, ele vai mandar pro frame 2, onde recomaa a funo. No else vemos que at chegar no frame 4 ele s vai caminahndo para o prximo frame com a ao nextFrame at chegar no frame 4. No final dessa jornada, seu trabalho resultar nisso: Qualquer duvida s perguntar no forum, espero que aproveitem bem este tutorial e abusem da criatividade de se trabalhar com mscaras e movieclips.

Flash

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Flash

Transféré par

Droits d'auteur :

Formats disponibles

Formulrio E-mail Flash+PHP

Pulando para o Flash

Menu DropDown Animado

Francisco Colunistas desde: 2007 Matrias publicadas: 24

Passo 23 Transforme a layer Mscara em uma mscara.

Fazendo um relgio em flash com Actionscript 2.0

Francisco Colunistas desde: 2007 Matrias publicadas: 24

Passo 19 Tecle Ctrl+Enter para ver o efeito final.

Galeria de Imagens ActionScript 3

Galeria de Imagens com XML ActionScript 2 Pr-requisitos para esse tutorial

Flash CS3 usando ActionScript 3 Conhecimento bsico de ActionScript 2 ou 3

Algumas diferenas e novidades no ActionScript 3

Criando nossa Galeria

/* /* var /* var /* /* var /* /* /* /* /* /*

Criamos Essa Criamos Criamos Essa Adiciono O evento Quando

instancia vai para

para carregar = saber para a

Classe nossas new

Loader imagens foto atual

loader:Loader uma ima Classe um ser varivel fotoAtual:Number instancia vai

URLoader XML URLLoader arquivo XML monta

nosso new da a instancia de chama arquivo

arquivo Classe o funo XML arquivo XML no primeira

carregaXML:URLLoader EventListener chamado de quando

carregar, o ao nosso carregar

monta); URLRequest("imagens.xml")); XML */ { */ XML imagem */ */ XML(event.target.data); dadosXML.foto.length();

function Descarrega Adiciono Quando Adiciono Quando o o um loader.unload();

mostraImagem(atual:Number):void qualquer EventListener for

holder.alpha */ /* Removemos o evento CLICK dos

loadProgress(Event:ProgressEvent) varivel varivel do saber = carregado:Number tamanho:Number tamanho MovieClip

holder.width+16, holder.height+16, Movemos twhx:Tween twhy:Tween

holder.width/2, holder.height/2, Movemos twant:Tween Movemos twpro:Tween Movemos twtxt:Tween

termina); movido */ { preloader */ 0; */ ""; holder 1, 1, Tween */ true); */ Regular.easeOut, instancia

function Escondemos Apagamos Damos twha:Tween Adicionamos preloader.scaleX porcento.text

alphaTerminou); 100% */ { novamente */ antPress); prox e ant */ true; true; proxPress);

proxPress); antPress); MovieClips Mouse */ */ true; true; imagem de imagens */ { */ { */ */

proxPress(event:MouseEvent):void (total-1)) fotoAtual mostraImagem

(fotoAtual Decrementa Chama

Crie um novo documento Flash (fla) com as dimenses 550400 px.

Marcio Silva Colunistas desde: 2007 Matrias publicadas: 6

Conhecimento bsico em ActionScript

Agora clique no crculo e coloque o cdigo abaixo:

Criao de games - Megaman Parte 1

Figura 2 - Sprites para correndo_dir.

if(_root.direcao == direita) _parent.gotoAndStop(parado_dir); else _parent.gotoAndStop(parado_esq);

Figura 9 - Velocidade no decorrer do pulo.

Criao de Games - Megaman Parte 2 Criao de games - Megaman Parte 2

Figura 3 - Folha de sprites para tiro_2.

Figura 6 - Timeline e o stage depois do import.

Figura 10 - Inimigo 2 no stage e seus respectivos frames.

13. 14. 15. 16. 17. }

_root[tiro+_root.contTiros].direcao = esquerda; _root[tiro+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58; _root[tiro+_root.contTiros]._x = x_terreno + x_inimigo+10; _root[tiro+_root.contTiros]._xscale = - 2*_root[tiro+_root.contTiros]._width;

Figura 12 - Folha de sprites para atirando parado.

E para o mc atirando_correndo coloque no ltimo frame:

Flash - Conhecendo o Flash CS3 - Parte 3

Outra possibilidade usar o menu:

2. instanciaMC._y = 50; 3. instanciaMC._alpha = 100;

Agora, no ActionScript 3 o underline foi removido das propriedades.

3) Eventos de Manipulao (Event Handling)

4) Importando Smbolos da Biblioteca

Agora, para importar esse MovieClip usaremos:

5) Carregando Imagens e SWFs

7) Carregando arquivos XML

monta); URLRequest("imagens.xml")); XML / { / XML imagem / / XML(event.target.data); dadosXML.foto.length();

holder.alpha / / Removemos o evento CLICK dos

termina); movido / { preloader / 0; / ""; holder 1, 1, Tween / true); */ Regular.easeOut, instancia

alphaTerminou); 100% / { novamente / antPress); prox e ant */ true; true; proxPress);

proxPress); antPress); MovieClips Mouse / / true; true; imagem de imagens / { / { / /

((pan._x-miny)/(maxy-miny))100; = (alvo._width-mascara)/100; objeto /

this.legenda); falso / false; / "";

meuMCL.loadClip(xmlNode.childNodes[arquivo].childNodes[0].firstChild.nodeValue, carregamento carregou / / / /

} /* /* Adicionamos Adicionamos um um Listener Listener ao ao MovieClipLoader MovieClipLoader / / meuMCL.addListener(meuListener); pequenoMCL.addListener(pequenoListener);