Flash

Formulário E-mail Flash+PHP Hoje, irei a mostrar a vocês como criar um formulário de E-mail usando PHP e Flash. Irei mostrar como criar esse formulário para os usuários do ActionScript 2 e do ActionScript 3.

Pré requisitos para esse tutorial:

Flash CS3 usando ActionScript 3, Flash 8 ou Flash MX 2004 Conhecimento básico de ActionScript 2 ou 3 Servidor que de suporte a PHP e a função Mail

Criação do PHP

Antes de chegarmos a criação de nosso arquivo PHP, vocês precisam verificar se o servidor em que usam dá suporte a função mail do PHP. Para verificar isso, basta criar um arquivo PHP usando a função mail, como no exemplo abaixo:

<?php mail("seu [email protected]", "assunto", "mensagem");?>

Após a criação desse arquivo, hospedem ele em seu servidor visualize ele em seu browser. Se ao abrir o arquivo, nenhuma mensagem aparecer você tem suporte a função mail do PHP e pode criar um formulário, se aparecer alguma mensagem de erro vocês não poderão criar o formulário. A imagem a seguir mostra o erro que é exibido pelo PHP quando não tem suporte a função mail.

Vocês podem estar se perguntando, porque tem servidor que não dá suporte a função mail do PHP. Simples, controle contra SPAM. Existem vários usuários que aproveitam para ficar enviando mensagens sem que nós tenhamos conhecimento.

Aos que podem usar a função, vamos a criação 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 protected]"; /* Aqui uma pequena verificação 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 cabeçalho 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 não 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 começo do tutorial, esse tutorial serve tanto para usuários do ActionScript 3 quanto para usuários do ActionScript 2. Para esse tutorial começarei com um palco de tamanho 470×300, criem duas camadas, ações e objetos.

Montem o layout que preferir para o Formulário, 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 são as instancias dos objetos, lembre-sem de colocar os objetos no primeiro frame da camada objetos.

Os botões 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 usuários que usam o ActionScript 2. Colem as ações abaixo no primeiro frame da camada ações:

/* Criamos um Array para preencher o ComboBox cidades */var cidades:Array = ["São 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 = ["Dúvidas", "Sugestões", "Elogios", "Reclamações", "Outros"];/* Preenchemos o ComboBox com os valores do Array */assunto_cb.dataProvider = assunto;/* Criamos uma variável 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 botão 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 opção sim ou opção não do RadioButton */ } else if (sim.selected == false && nao.selected == false) { /* Mostra a mensagem de erro */ status_txt.text = "Selecione Sim ou Não"; /* 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 opção sim foi selecionado no RadioButton */ if (sim.selected == true) { /* A opção sim foi selecionada */ /* Envia para o PHP a variavel news com o valor sim */ envia.news = "sim"; /* Verifica se a opção não foi selecionado no RadioButton */ } else if (nao.selected == true) { /* A opção nao foi selecionada */ /* Envia para o PHP a variavel news com o valor não */ envia.news = "não"; } /* Verifica se o CheckBox Dreamweaver foi selecionada */ if (dream_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Dreamweaver */

programas = "Dreamweaver, "; } /* Verifica se o CheckBox Fireworks foi selecionada */ if (fire_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Fireworks */ programas += "Fireworks, "; } /* Verifica se o CheckBox Flash foi selecionada */ if (flash_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Flash */ programas += "Flash, "; } /* Verifica se o CheckBox Illustrator foi selecionada */ if (illus_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Illustrator */ programas += "Illustrator, "; } /* Verifica se o CheckBox Photoshop foi selecionada */ if (photo_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor PhotoShop */ programas += "Photoshop."; } /* Envia para o PHP a variavel programas o valor da variável programas */ envia.programas = programas; /* Avisa que está mandando o E-mail */ status_txt.text = "Enviando mensagem"; /* Enviamos as variáveis 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 função 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 botão limpar */limpar_btn.onPress = function() { /* Chamamos a função limpa */ limpa();};/* Função responsável por limpar os campos do formulário */function limpa() { /* Zeramos a variável 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 não selecionados */ sim.selected = false; nao.selected = false; /* Deixamos os RadioButtons não selecionados */ dream_ch.selected = false; fire_ch.selected = false; flash_ch.selected = false; illus_ch.selected = false; photo_ch.selected = false;}

Agora para os usuários do ActionScript 3. Colem as ações abaixo no primeiro frame da camada ações.

/* Importamos a Classe DataProvider */import fl.data.DataProvider;/* Criamos um Array para preencher o ComboBox cidades */var cidades:Array = ["São 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 = ["Dúvidas", "Sugestões", "Elogios", "Reclamações", "Outros"];/* Preenchemos o ComboBox com os valores do Array */assunto_cb.dataProvider = new DataProvider(assunto);/* Criamos uma variável 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 botão limpar */limpar_btn.addEventListener(MouseEvent.MOUSE_DOWN, limparPress);/* Função disparada quando se clica no botão limpar */function limparPress(event:MouseEvent):void { /* Chamamos a função limpa */ limpa();}/* Adicionamos um listener ao botão enviar */enviar_btn.addEventListener(MouseEvent.MOUSE_DOWN, enviarPress);/* Função disparada quando se clica no botão 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 opção sim ou opção não do RadioButton */ } else if (sim.selected == false && nao.selected == false) { /* Mostra a mensagem de erro */ status_txt.text = "Selecione Sim ou Não"; /* 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 opção sim foi selecionado no RadioButton */ if (sim.selected == true) { /* A opção sim foi selecionada */ /* Envia para o PHP a variavel news com o valor sim */ variaveis.news = "sim"; /* Verifica se a opção não foi selecionado no RadioButton */ } else if (nao.selected == true) { /* A opção nao foi selecionada */ /* Envia para o PHP a variavel news com o valor não */ variaveis.news = "não"; } /* Verifica se o CheckBox Dreamweaver foi selecionada */ if (dream_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Dreamweaver */ programas = "Dreamweaver, "; } /* Verifica se o CheckBox Fireworks foi selecionada */ if (fire_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Fireworks */ programas += "Fireworks, "; } /* Verifica se o CheckBox Flash foi selecionada */ if (flash_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Flash */ programas += "Flash, "; } /* Verifica se o CheckBox Illustrator foi selecionada */ if (illus_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor Illustrator */ programas += "Illustrator, "; } /* Verifica se o CheckBox Photoshop foi selecionada */ if (photo_ch.selected == true) { /* A opção foi selecionada */ /* Armazena na variável programas o valor PhotoShop */ programas += "Photoshop."; } /* Envia para o PHP a variavel programas o valor da variável 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 variável variaveis */ objEnvia.data = variaveis; /* Usaremos o método POST */ objEnvia.method = URLRequestMethod.POST; /* Passamos o endereço a ser enviado */ objEnvia.url = "http://localhost/contato.php“; /* Dizemos que os dados serão do tipo texto */ objRecebe.dataFormat = URLLoaderDataFormat.TEXT; /* Enviamos as variáveis 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 função limpa */ limpa(); /* Exibe mensagem de sucesso */ status_txt.text = “Mensagem enviada com sucesso.”; }}/* Função que limpa os campos do formulário */function limpa() { /* Zeramos a variável 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 não selecionados */ sim.selected = false; nao.selected = false; /* Deixamos os RadioButtons não 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 formulário.

Considerações finais

Espero que tenha conseguido tirar a dúvida dos que sempre tentaram criar um formulário mas nunca conseguiam, o erro mais comum é não ter suporte a função mail do PHP, por isso não funcionavam achando sempre que o problema estava no Flash quando o problema era o PHP.

Menu DropDown Animado Data de publicação: 24-04-2008

Visitas: 3341

Francisco

Colunistas desde: 2007

Matérias publicadas: 24

Passo 1

Com um novo documento Flash aberto, começaremos criando o efeito que aplicaremos quando o mouse passar sobre (over) um item de submenu. Crie um Símbolo de MovieClip e nomeie-o como Efeito Submenu.

Passo 2

Crie uma nova layer e nomeie as duas existentes como AS e Retângulo.

Passo 3

Com o frame 1 da layer Retângulo selecionado, clique na Rectangle Tool (R) e desenhe um retângulo sem contorno (stroke) com 100px de largura e 20px de altura, posicionando-o em X: 0 e Y: 0 através do painel Properties.

Passo 4

Clique no frame 1 da layer Retângulo e altere a altura (H) do retângulo 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 Retângulo.

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 Símbolo de Botão 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 retângulo com 100px de largura e 20px de altura posicionando-o em X: 0 e Y: 0 através do painel Properties.

Passo 11

Crie um keyframe no frame Over da layer Efeito Over e arraste uma instância do MC (MovieClip) Efeito Submenu que criamos inicialmente, posicionando-o em X: 0 e Y:0.

Passo 12

Duplique o botão Subitem1 e altere seu nome e texto para Subitem2. Analogamente, crie o botão Subitem3. Agora temos 3 botões que usaremos a seguir.

Passo 13

Crie um novo símbolo MC e nomeie-o como Submenu. Crie 5 novas layers e denomine-as como: Subitem 1, Traço 1, Subitem 2, Traço 2, Subitem 3 e Base.

Passo 14

Clique no frame 1 da layer Subitem 1 e arraste uma instância do botão Subitem1 para o Stage, posicionando-o em X: 0 e Y: 0. Siga procedimento análogo para os botões Subitem2 e Subitem3, modificando apenas suas posições Y, respectivamente para 20 e 40.

http://www.mxstudio.com.br/wp-content/uploads/2008/04/fig071.jpg


Passo 15

Nas layers Traço 1 e Traço 2, com o auxílio da Line Tool (N), desenhe os traços divisórios 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 auxílio da Rectangle Tool (R), crie um retângulo, 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 símbolo MC e nomeie como Item Notícias. Crie mais uma layer e renomeie-as para Texto e Base.

Passo 18

Na layer Texto, com a Text Tool (T), insira o texto Notícias (é nosso item principal do menu) e posicione-o em X: 24 e Y: 1. Na layer Base, com o Rectangle Tool (R), desenhe um retângulo, 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 símbolo MC e nomeie como Menu Notícias. Crie mais duas layers e renomeie-as para: Título, Máscara e Subitens.

Passo 20



No frame 1 da layer Título, arraste uma instância do mc Item Notícias para a posição X: 0 e Y:0. Atribua hit como nome de instância deste objeto.

Passo 21

Clique no frame 1 da layer Máscara e com a Rectangle Tool (R), desenhe um retângulo, 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 instância do MC Submenu para o Stage, posicionando-a em X: 0 e Y: -60. Atribua drop como nome de instância deste objeto.

Passo 23

Transforme a layer Máscara em uma máscara.

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 Notícias, e altere o instance behavior para Button. A seguir, tecle F9 e digite o código 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 código 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 ifif ((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 ifif (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 Notícias 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 (retângulos de fundo dos itens de menu) tenham o mesmo tamanho (aqui usamos largura 100px, lembra-se?), pois caso contrário haverá sobreposição dos itens do submenu.

Fazendo um relógio em flash com Actionscript 2.0 Data de publicação: 19-04-2008

Visitas: 1864

Jean Carlos



Bom, primeiramente devemos entender como vai funcionar nosso relógio, ele será digital e analógico, no digital além de mostrar a hora também irá exibir o dia da semana e a data.

Para começarmos a fazer nosso relógio, primeiro temos que fazer o desenho, podemos usar o próprio flash ou qualquer editor de imagem.

Depois de feito o desenho do relógio, vamos criar cinco campos de texto dinâmicos, instanciados como hora_txt, minuto_txt, segundo_txt, semana_txt e dia_txt, após 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 relógio será feito em um único frame, então devemos fazer para que o aplicativo atualize o tempo todo naquele único frame, para isso vamos usar o onEnterFrame que irá atualizar o código infinitamente, enquanto o relógio estiver aberto.

this.onEnterFrame = function(){

};

Todo nosso código ira ficar dentro dessa função. Dentro da função vamos criar as variáveis onde irão conter os valores para que o relógio funcione.

this.onEnterFrame = function(){

http://www.mxstudio.com.br/author/jean_carlos/

var horario:Date = new Date();hora = horario.getHours();minuto = horario.getMinutes();segundo = horario.getSeconds();};

Dentro da função foram inseridas quatro variáveis, onde a primeira recebe todos os valores da propriedade Date();, na segunda variável de nome ‘hora’ vai receber o valor getHours(); da variável horario, a variável ‘minuto’ receberá o valor getMinutes(); e ‘segundo’ receberá getSeconds(); também da variável horario.

Agora vamos chamar as variáveis nas entrâncias 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 variável 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 invés de ser dividido por 12 será divido por 60 que será igual a 6.A instancia ponteiro_minuto recebe a variável minuto e a instancia ponteiro_segundo recebe a variável segundo que são multiplicadas por 6.

Nosso relógio analógico está pronto. Agora vamos fazer a programação do relógio digital.

Para o digital funcionar, vamos chamar as variáveis hora, minuto e segundo nas instancias hora_txt, minuto_txt e segundo_txt, ficando assim:


//Analógico_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 relógio já está pronto! Mas agora falta fazer o relógio exibir o dia da semana e a data, para fazer isso vamos utilizar um laço de repetição switch para verificar o dia da semana e exibir na caixa de texto. Primeiro vamos criar uma variável 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 = “Terça”;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 = “Sábado”;break;default :_root.semana_txt.text = “Domingo”;break;}

Dentro de cada case a instancia semana_txt recebe da variável semana um texto correspondente a cada dia da semana de acordo com o numero.Ex.: 1 = segunda, 2 = terça etc

Agora só falta colocar o dia. Para isso vamos criar uma variável chamada dia onde recebera o valor getDate da variável horário. E colocar o valor da variável dia na instancia dia_txt, ficando assim:

dia = horario.getDate();_root.dia_txt.text = dia;

Nosso código completo:


//Analógico_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;

//Semamasemana = horario.getDay();switch (semana){case 1 :_root.semana_txt.text = “Segunda”;break;case 2 :_root.semana_txt.text = “Terça”;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 = “Sábado”;break;default :_root.semana_txt.text = “Domingo”;break;}// Diadia = horario.getDate();_root.dia_txt.text = dia;

};

Globo Rodando Data de publicação: 04-04-2008

Visitas: 6948

Francisco



Passo 1

Abra o Flash e inicie um novo projeto com o tamanho e configurações 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 círculo 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 através 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 símbolo 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” estão ainda selecionados, pressione novamente F8 para convertê-los em um Símbolo Gráfico.

Passo 11

Clique no frame 30 e pressione F6. Então, usando o mouse ou as teclas de direção, posicione o mapa_mundi_gr como a seguir:

Passo 12

Dê um clique com o botão 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 código:

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 círculo. 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 círculo um pouco menor que o círculo do globo. Selecione a layer círculo e a converta em uma máscara (clique com o botão direito do mouse sobre ela e escolha a opção correspondente)

Passo 16

Oculte a layer mapa mundi.

Passo 17

Crie uma layer acima da layer círculo e nomeie-a como brilho.

Passo 18

Selecione novamente a Oval Tool (O), desenhe um círculo com aproximadamente 100×30 pixels posicionado sobre o globo. Com o círculo 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 usuários 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 atrás 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 básico de ActionScript 2 ou 3

Outro requisito para esse tutorial é ler uma matéria que eu fiz sobre as mudanças do ActionScript 3. Nesse artigo vocês encontrarão as principais mudanças e vão ajudar e muito no entendimento desse tutorial:

http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=940



Algumas diferenças e novidades no ActionScript 3

Criando o XML

Vamos ao XML que conterá nossas Imagens e seus títulos. Salve o arquivo com o nome de imagens.xml.

<?xml version="1.0" encoding="utf-8"?>

<imagens>

<foto>

<imagem>imagem.jpg</imagem>

<texto>Moto Ayrton Senna</texto>

</foto>

<foto>

<imagem>imagem1.jpg</imagem>

<texto>Mclaren do Senna</texto>

</foto>

<foto>


<texto>Capacete Senna</texto>

</foto>

<foto>


<texto>Ferrari Shumacher</texto>

</foto>

<foto>


<texto>Loro</texto>

</foto>

<foto>


<texto>Trator do Sítio</texto>

</foto>

<foto>


<texto>Carroça antiga</texto>

</foto>

</imagens>

Criando nossa Galeria

Vamos criar nossa galeria. Você poderá fazer da maneira que desejar. Comecei com um palco com dimenções de 550×420. Os nome em Vermelho são os nomes de instância de cada objeto.


holder: MovieClip em brancoborda: MovieClip com um retângulo desenhado dentro delepreloader: MovieClip com uma barra desenhado dentro deleporcento: campo de texto dinamicoant: MovieClip para servir como botãoprox: MovieClip para servir como botãotexto: 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:

/* Importamos a Classe Tween */

import fl.transitions.Tween;

import fl.transitions.easing.*;

/* Importamos a Classe responsável pelos eventos da Classe Tween */

import fl.transitions.TweenEvent;

/* Criamos uma variável para armazenar o total de fotos no XML */

var total:Number = undefined;

/* Criamos uma instancia para a Classe XML */

var dadosXML:XML = new XML();

/* Criamos uma instancia para a Classe Loader */

/* Essa Classe vai carregar nossas imagens */

var loader:Loader = new Loader();

/* Criamos uma variável para saber qua a foto atual */

var fotoAtual:Number = 0;

/* Criamos ima instancia para a Classe URLoader */

/* Essa Classe vai carregar nosso arquivo XML */

var carregaXML:URLLoader = new URLLoader();

/* Adiciono um EventListener para a instancia da Classe URLLoader */

/* O evento será chamado quando a terminar de carregar o arquivo XML */

/* Quando terminar de carregar, chama a função monta */

carregaXML.addEventListener(Event.COMPLETE, monta);

/* Carregegamos o arquivo XML */

carregaXML.load(new URLRequest("imagens.xml"));

/* Função chamada ao carregar o arquivo XML */

function monta(event:Event) {

/* Armazenamos nosso arquivo XML */

dadosXML = new XML(event.target.data);

/* Armazenamos o total de fotos no XML */

total = dadosXML.foto.length();

/* Chama a função mostraImagem chamando a primeira imagem */

mostraImagem(0);

}

/* Função responsável por carregar as imagens do XML */

function mostraImagem(atual:Number):void {

/* Descarrega qualquer imagem já carregada */

loader.unload();

/* Adiciono um EventListener para a instancia da Classe Loader */

/* Esse listener será acionado sempre que a imagem estiver sendo carregada */

/* Quando o listener for acionado, chamará a função loadProgress */

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);

/* Adiciono um EventListener para a instancia da Classe Loader */

/* Esse listener será acionado assim que a imagem terminar de ser carregada */

/* Quando o listener for acionado, chamará a função loadComplete */

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

/* Carregamos a imagem */

loader.load(new URLRequest(dadosXML.foto.imagem[atual]));

/* Carregamos a imagem dentro do MovieClip holder */

holder.addChild(loader);

/* Deixamos o MovieClip holder com alpha igual a 0 */

holder.alpha = 0;

/* Usamos o removeEventListener para desativar o evento CLICK da Classe MouseEvent

*/

/* Removemos o evento CLICK dos MovieClips prox e ant */

prox.removeEventListener(MouseEvent.CLICK, proxPress);

ant.removeEventListener(MouseEvent.CLICK, antPress);

/* Desativamos os botões ant e prox */

prox.enabled = false;

ant.enabled = false;

}

/* Função responsável por exibir o progresso do carregamento da imagem */

function loadProgress(Event:ProgressEvent) {

/* Criamos uma variável para saber quando carregou */

var carregado:Number = Event.bytesLoaded;

/* Criamos uma variável para saber o tamanho da imagem */

var tamanho:Number = Event.bytesTotal;

/* Modifica o tamanho do MovieClip preloader conforme a imagem estiver sendo

carregada */

preloader.scaleX = carregado/tamanho;

/* Exibe a porcentagem carregada */

porcento.text = Math.round(carregado/tamanho*100)+"%";

}

/* Função responsável por exibir a imagem carregada */

function loadComplete(event:Event) {

/* Mostramos o texto da imagem */

texto.text = dadosXML.foto.texto[fotoAtual];

/* Aumentamos o MovieClip borda para o mesmo tamanho do MovieClip holder */

/* Acrescentamos 16px para poder fazer uma borda */

var tww:Tween = new Tween(borda, "width", Back.easeOut, borda.width,

holder.width+16, 1, true);

var twh:Tween = new Tween(borda, "height", Back.easeOut, borda.height,

holder.height+16, 1, true);

/* Movemos o MovieClip holder */

var twhx:Tween = new Tween(holder, "x", Back.easeOut, holder.x, borda.x-

holder.width/2, 1, true);

var twhy:Tween = new Tween(holder, "y", Back.easeOut, holder.y, borda.y-

holder.height/2, 1, true);

/* Movemos o MovieClip ant */

var twant:Tween = new Tween(ant, "y", Back.easeOut, ant.y,

(borda.y+holder.height/2)+8, 1, true);

/* Movemos o MovieClip prox */

var twpro:Tween = new Tween(prox, "y", Back.easeOut, prox.y,

(borda.y+holder.height/2)+8, 1, true);

/* Movemos o campo de texto dinamico */

var twtxt:Tween = new Tween(texto, "y", Back.easeOut, texto.y,

(borda.y+holder.height/2)+8+ant.height, 1, true);

/* 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 função termina */

twhx.addEventListener(TweenEvent.MOTION_FINISH, termina);

}

/* Função chamada quando o MovieClip holder terminar de ser movido */

function termina(Event:TweenEvent) {

/* Escondemos o MovieClip preloader */

preloader.scaleX = 0;

/* Apagamos o texto do campo porcento */

porcento.text = "";

/* Damos um efeito em alpha ao MovieClip holder */

var twha:Tween = new Tween(holder, "alpha", Regular.easeOut, 0, 1, 1, true);

/* Adicionamos um EventListener para a instancia da Classe Tween */

/* Esse listener será disparado assim que o MovieClip holder tiver um alpha de 100%

*/

/* Quando o listener for acionado, chamará a função alphaTerminou */

twha.addEventListener(TweenEvent.MOTION_FINISH, alphaTerminou);

}

/* Função chamada quando o MovieClip holder tiver um alpha de 100% */

function alphaTerminou(Event:TweenEvent) {

/* Adicionamos os EventListener novamente */

prox.addEventListener(MouseEvent.CLICK, proxPress);

ant.addEventListener(MouseEvent.CLICK, antPress);

/* Habilitamos os MovieClips prox e ant */

prox.enabled = true;

ant.enabled = true;

}

/* Adicionamos um EventListener para os MovieClips prox e ant */

/* Esse listener será disparado assim que o Mouse for clicado sobre eles */

/* Quando o listener for acionado, chamará a função mudaImagem */

prox.addEventListener(MouseEvent.CLICK, proxPress);

ant.addEventListener(MouseEvent.CLICK, antPress);

/* Usando a propriedade buttonMode fazemos com que os MovieClips */

/* Passem a ter a mãozinha do Mouse */

prox.buttonMode = true;

ant.buttonMode = true;

/* Função que carrega uma outra imagem */

function proxPress(event:MouseEvent):void {

/* Verifica se a foto atual é menor que o total de imagens */

if (fotoAtual < (total-1)) {

/* Incrementamos a variável fotoAtual */

fotoAtual++;

/* Chama a função mostraImagem */

mostraImagem(fotoAtual);

}

}

function antPress(event:MouseEvent):void {

/* Verifica se a foto atual é maior que 0 */

if (fotoAtual > 0) {

/* Decrementa a variável fotoAtual */

fotoAtual--;

/* Chama a função mostraImagem */

mostraImagem(fotoAtual);

}

}

Considerações Finais

O objetivo desse tutorial é fazer uma comparação da mesma galeria feita em ActionScript 2 dessa vez usando o ActionScript 3, ver quais funções mudaram, novas regras, etc. Não entrei em muitos detalhes sobre algumas funções pois esse não era o ojetivo principal, entrarei com mais detalhes em futuros tutoriais usando o ActionScript 3.

Uma dica aos que querem começar a aprender ActionScript 3, pegue seus projetos, tutoriais e aplicações feitas em ActionScript 2 tentem converter para o ActionScript 3. Apesar das novidades, não é tão complicado aprender se já tiver uma base no ActionScript 2, vocês irão se surpreender.

Carregar swf externo com AS3

CARREGAR SWF EXTERNO COM AS3Neste tutorial veremos como carregar um swf externo com o AS3, pois o LoadMovie não é mais suportado nesta versão do ActionScript.

O logotipo é o swf externo que foi carregado dentro de um outro swf que denominei “carregador”.

Passo 1Crie um novo documento Flash (fla) com as dimensões 550×400 px.

Passo 2Crie uma layer e nomeie as duas do seu arquivo como “AS” e “Fundo”.

Passo 3Selecione o primeiro frame da layer “AS” (clique nele), abra o painel Actions (tecle F9) e digite o seguinte código:

1. // cria uma instância do Loader2. var carregador:Loader = new Loader();3. // armazena na variável “arquivo” o nome do swf externo a ser carregado4. var arquivo:String = “arquivoExterno.swf”;5. // cria uma instância do URLRequest, que carregará o swf armazenado na variável “arquivo”6. var requisicao:URLRequest = new URLRequest(arquivo);7. // define onde o swf exteno será carregado8. carregador.x = 175;9. carregador.y = 80;10. // Carrega o swf solicitado11. carregador.load(requisicao);12. // Inclui o swf carregado no Stage13. this.addChild(carregador);

Passo 4

Crie um novo documento Flash com as dimensões 200×237 e salve-o com o nome “arquivoExterno.swf”.

Passo 5Insira uma imagem qualquer (pois é apenas um exemplo) e gere o swf (Ctrl+Enter).

Passo 6Gere o swf do carregador.fla (Ctrl+Enter) e verá que o “arquivoExterno.swf” foi carregado na posição definida por nós.

Criação de Games Data de publicação: 28-03-2007

Visitas: 3514

Marcio Silva



Criação de gamesOlá pessoal,

Que tal começar a aprender a arte de criar aqueles joguinhos bem legais feitos em flash? Começarei uma sequência de tutorias que mostraráo os mais importantes fundamentos para começar a desenvolver um game.

Pré-requisitos:

Conhecimento básico em ActionScript

http://www.mxstudio.com.br/author/marcio/

Objetivo:

capacitar os leitores quanto aos aspectos referentes a comandos básicos para a movimentação de um personagem, mapa de tiles, detecção de colisão, gravidade, fricção entre outros. Todos esses fundamentos são muito importantes para a construção de games divertidos.

Mas vamos por partes, primeiramente abordarei neste tutorial um fundamento muito importante e muito básico que é a movimentação de persogagens e um início de detecção de colisão.No fim desse tutorial teremos feito um joguinho simples como o que está abaixo.

Então vamos ao que interessa!

Crie um novo arquivo (CTRL+N)

Dê um clique no primeiro frame e coloque o código abaixo

1. var cont:Number = new Number();2. var cont2:Number = new Number();3. cont=0; //contadores de tiros4. count2=0; //contadores de explosões5. onEnterFrame=function()6. {7. /*verificamos quais teclas o usuário está precionando8. E também verificando quais os limites da tela9. */10. if(Key.isDown(Key.LEFT) && nave._x >=20)11. nave._x -=20;12. if(Key.isDown(Key.RIGHT) && nave._x <500)13. nave._x +=20;14. if(Key.isDown(Key.UP) && nave._y >20)15. nave._y -=20;16. if(Key.isDown(Key.DOWN) && nave._y <330)17. nave._y +=20;}18. onMouseDown = function()19. {20. /*quando ocorre o clique do mouse, mostra um tiro saindo da nave*/21. _root.cont++;22. _root.tiro.duplicateMovieClip(”tiro”+_root.cont,_root.cont,_root.cont); //duplicamos o tiro23. /*fazemos com que a réplica apareça na frente da nave*/24. _root[”tiro”+_root.cont]._y = nave._y+10;25. _root[”tiro”+_root.cont]._x = nave._x+10;26. }

Observações referentes ao código

Quando o iniciar o joguinho a função onEnterFrame é invocada, ela fica esperando o pressionamento de teclas, e toma as decisões necessárias para a movimentação correta do personagem que iremos criar logo abaixo. No código também tem uma função que serve para capturar cliques do mouse na tela (onMouseDown). Quando ocorrer um clique será fieta uma duplicata do movieclip chamado tiro.

Criação dos movieClips para o jogo (tiro, inimigo, nave e explosão)

Vamos criar agora o movieClip que representará o tiro. Crie um círculo fora do stage, de modo que ele não

apareça na animação final. Selecione-o e pressione F8, para transformar em movieClip.Dê o nome de tiro. Certifique-se que o movieClip círculo se chama realmente tiro. Para issso basta clicar no círculo e verificar na barra de propriedades.

Agora clique no círculo e coloque o código abaixo:

1. onClipEvent(enterFrame)2. {3. if(_name != “tiro”)//verificação que serve para que sejam executados apenas as cópias do tiro, não o

verdadeiro4. {5. this._y-=30;6. if(this._y <0)//se o tiro passou do y=0 removemos o tiro7. this.removeMovieClip();8. if(this.hitTest(_root.inimigo)) //verifica se tiro colidiu com o inimigo9. {10. _root.inimigo.life=0; //zeramos o life, um tiro só é fatal11. this.removeMovieClip(); //sumimos com o tiro da tela12. }13. }14. }

No código, é importante destacar o uso do método hiTest(), que é muito importante para a detecção de colisão. Ele é responsável em dizer se dois movieClips colidiram ou não.

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 faça a figura que respresentará a explosão, ficará próximo ao movieclip tiro. Chame-a de explosão. Veja como nosso stage ficará abaixo:

Agora vamos so código 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 código:

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 explosão, 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 posição randômica11. this._y = -150;12. this.life = 100; //voltamos o life do inimigo13. }14. else15. {16. this._y+=10; //avança o inimigo em sua direção17. if(this._y > 300) //verifica se o inimigo ultrapassou o limite máximo da tela18. {19. /*Se o inimigo ultrapassou sua nave, vc pode fazer o que quizer a partir daqui20. eu optei por fazer o inimigo começa de novo a descer.21. */22. this._y = -20;23. this.removeMovieClip();24. }25. }26. }

O código acima indica que quando o life do inimigo acabar vai ser feita uma duplicata do movieClip explosão que vai aparecer exatamente no local onde houve a colisão com o tiro. Senão ocorre colisão alguma ele entra no else e continua avançando em direção à nave que controlamos.

Por fim o código da explosão:

1. onClipEvent(enterFrame)

2. {3. /*essa verificação serve para que apenas as explosão que serão criadas dinamicamente4. sejão executadas*/5. if(_name != “explosao”)6. {7. if(this._alpha > 0) //serve para dar um efeito de explosão8. this._alpha -= 5;9. else10. this.removeMovieClip();11. }12. }

Bem similar so código do tiro a explosão só com as duplicatas, aplicamos apenas uma diminuição no alpha até que chegue a zero aí deletamos a instancia duplicada da explosão. Se tiver seguido corretamente os passos, o joguinho está pronto!Use sua criatividade para fazer variações desse exmplo. Divirta-se!

Criação de games - Megaman Parte 1Olá comunidade,

Estou de volta com novas colunas sobre criação de games, destacando os que usam conceitos de física, matemática e outras áreas que estão intimamente ligadas a esta área tão fascinante. No meu último tutorial mostrei a criação de um simples joguinho que tratava de colisão e movimentação de um modelo na tela e que disparava tiros contra inimigos. O objetivo era apenas dar um pontapé inicial para quem não 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 são de fácil compreensão

Pré-requisitos:

Objetivo:

Propiciar ao leitor o conhecimento necessário para que este possa desenvolver seus próprios jogos de plataforma. Ao logo da construção do game serão mostrados e comentados cada conceito novo que for mostrado, preocupando-se em não só mostrar como faz, mas também por que funciona, dúvida que fica geralmente na cabeça de quem está no início 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 Mário.

Conceitos:

Nesta primeira parte iremos abordar a técnica de animação de personagens utilizando sprites, criar interação do usuário com um modelo baseado em sprites, o famoso scrolling, simulação de gravidade e técnicas de tratamento de colisão em jogos de plataforma.

Os sprites nada mais são do que vários quadros de uma animação nos games 2D, a animação de personagens é feita quadro a quadro, como o Macromedia Flash trabalha com quadros é muito prático manipular sprites de uma animação na ferramenta.

Conteúdo

Então, mão na massa!

O Personagem

Antes de mais nada devemos obter as figuras para o tutorial, existem vários sites pela internet que fornecem sprites para download gratuitamente, é claro que se você é bom em designer de personagens pode fazer os seus próprios. Mas muitos games em flash disponíveis na internet são adaptações 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 serão repetidos para cada estado do personagem, você deve ter percebido no arquivo que você baixou que cada linha trata-se de uma ação do Megaman, com exceção das duas primeiras, vejamos a figura abaixo:

Figura 1 - Representa a chegada do Megaman

http://www.spritekingdom.com/sheet/megaman/32bit.gif


Na Figura 1 podemos observar que seguindo a numeração indicada obtemos uma animação do Megaman quando ele entra no cenário de jogo. Então para ver essa animação funcionando basta contruir um movieclip com 26 frames, note que cada quadro da animação 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 terão como base este primeiro frame para que a animação 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 animação. Serão 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 deverão ser feitos para que animação 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 Macromédia Flash é muito bom para fazer animação de personages 2D. Bom, agora devemos fazer as animações 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 vocês conferirem, as seqüências de imagens para correndo_dir e pulando_dir seguem abaixo:

Figura 2 - Sprites para correndo_dir.

Figura 3 - Sprites para pulando_dir.

Até agora construímos apenas as principais ações que o Megaman terá, agora vamos contruir o Movieclip que será realmente o Megaman e que nós 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 possíveis 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 construímos 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 animações para cada ação, quase parecido com o processo de copiar e colar para montar as animações mas agora você irá usar as animações que criou anteriormente. Com o frame entrada selecionado pegue da Library a animação que também se chama entrada e coloque no centro do stage, como nas animações este primeiro servirá como base para o alinhamento das demais animações. A animação correndo_dir também 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 instância das versões para direita, mas como o personagem nas outras versões 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 direção. 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 direção com a ferramenta Free Transform Tool do flash como feito anteriormente.

A menos dos devidos ajustes que você possa fazer para deixar as animações bem alinhadas, o nosso personagem está praticamente pronto, só mecheremos nele na etapa de codificação.

O Cenário

Da mesma forma que os sprites, os cenários podem ser encontrados em sites na especializados na internet, eu utilizei um que está no site Background HQ. A montagem do cenário é mais fácil que o personagem, para fazer este tutorial usei apenas parte do cenário, pois ele é muito grande, por isso eu disponibilizei a versão que vou utilizar neste link. Na verdade o cenário nada mais é do que uma imagem de plano de fundo, que servirá como molde para desenhar os obstáculos 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. Faça como a imagem abaixo:

Figura 5 - Nome de cada layer com seus Key Frames.

Por enquanto o primeiro frame de cada layer não iremos utilizar, Para começar a montagem do jogo. Supondo que você já baixou o cenário no fim deste tutorial, insira um novo símbolo do tipo mocieclip e cole a imagem do cenário que você baixou.

http://www.mxstudio.com.br/apoio/upload/Megaman.zip

http://www.bghq.com/bgs.php?system=psx&game=m/mmx6&mode=commander

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 posição 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 intância 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 atenção! O segredo do jogo funcionar corretamente está como você faz os próximos passos. Nesse movieclip vazio faço 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 instância da plataforma de plataforma_mc. Se você der dois cliques no mc plataforma_mc o terreno vai ficar como se fosse marcada d’agua, assim o terreno será seu molde para desenhar sobre ele a plataforma, agora você não vai utilizar aquele quadrado qualquer. Utilizando a ferramenta Rectangle Tool desenhe sobre as superfícies que o Magaman irá ficar apoiado, esses retângulos 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 retângulo é onde vai ficar os pés do Megaman. Pra terminar essa brincadeira com as imagens, vamos agora fazer o mc que vai representar as paredes do cenário. O processo para a construção das paredes “fictícias”, ou seja, retângulos que representarão 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ê não mais vai colocar retângulos 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 começar a testar as colisões algumas modificações devem ser feitas na largura na altura desses quadrados. Note que a idéia para simular paredes é cobrir de retângulos azuis tudo obstáculo que o Megaman pode colidir, não importa que esses retângulos fiquem bonitinhos por cima do terreno, o que importa é que eles não deixem o Megaman passar pelas paredes e nem sumir chão a dentro (Os ajustes são feitos quando começar a etapa de teste do game).. Onde ele não consegue colidir de frente não é necessário colocar paredes.

Agora falta colocar o Megaman no cenário. Vá a sua biblioteca e coloque no stage o movieclip megaman, ele foi feito em etapas anteriores. Chame essa instância de magaman_mc. Se você der dois cliques nesse mc, você vai entrar no modo de edição, veja que ele é composto de de 7 frames. Devemos colocar um stop() no primeiro frame para que a animação começe a executar quando o game começar. Ainda com o megaman aberto para edição, vá no frame pulando_dir que por sua vez possui o mc pulando_dir dê dois cliques nesse mc para edição. Já este mc, se você o construiu corretamente, tem 19 frames que é a quantidade de quadros da ação de pular. No último frame colque o seguinte código:

1. if(_root.direcao == “direita”)2. _parent.gotoAndStop(”parado_dir”);3. else4. _parent.gotoAndStop(”parado_esq”);

Isso fará com que quando animação de pular saiba em que direção ficar parada depois que acabar, não precisa fazer para o pulando_esq, já que ele é uma instância de parado_dir.

O Código

Esta etapa que passamos agora no desenvolvimento de jogos é chamada de MODELAGEM, todo jogo, não importa em que plataforma você o faça, tem essa etapa, principalmente os games 3D. Assim você pode passar essa etapa para um colega seu que sabe muito de design de cenários e personagens, depois você dá vida ao jogo com a codificação.

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 código está logo abaixo:

1. stop();2. /* Variáveis globais

3. * Aqui estão presentes as variáveis que fazem o4. * controle dos estados5. * em que o jogo se encontra6. */7. var velSaltar:Number = 20;8. var velAndar:Number = 0;9. var pulando:Boolean = false;10. var caindo:Boolean = false;11. var morreu:Boolean = false;12. var velMax:Number = 10;13. var direcao:String = “”;14. var entrada:Boolean = true; /*fazemos com que as layers que representam as paredes15. * e a plataforma não apareçam na hora que16. * o jogo for executado17. */18. plataforma_mc._visible = false;19. paredes_mc._visible = false;20. /* Todo o controle do personagem Megaman*/21. megaman_mc.onEnterFrame = function()22. {23. //verifica se ainda não acabou a entrada do Megaman24. if(entrada)25. return;26. /*verifica colisão com alguma parede do lado direito ou esquerdo27. * Se houve colisão faz uma anulação do passo que ele deu para frente28. */29. if( colisao_paredes(_root.paredes_mc, this, velAndar))30. this._x-=velAndar;31. /* simples simulação de gravidade32. * Se ele não tiver em cima da plataforma então ele vai caindo33. * sem aceleração34. */35. if ( !colisao_plataforma(_root.plataforma_mc, this) && !pulando)36. this._y += 6;37. //se velocidade positiva estou andando para a38. //direita senão estou indo para esquerda39. if (velAndar>0)40. direcao = “direita”;41. else if (velAndar<0)42. direcao = “esquerda”;43. //só pula se não tiver pulando, claro44. if ( Key.isDown(Key.SPACE) && !pulando )45. {46. pulando = true;47. /*mostra a animação pulando para direita se o personagem48. * está indo para a direita, caso contrário para a esquerda49. */50. if(direcao == “direita”)51. megaman_mc.gotoAndStop(”pulando_dir”);52. else53. megaman_mc.gotoAndStop(”pulando_esq”);54. }55. if( Key.isDown( Key.LEFT) )56. {57. if ( velAndar > -velMax ) //não deixa o personagem acelerar muito58. velAndar–;59. if(!pulando)

60. megaman_mc.gotoAndStop(”correndo_esq”);61. }62. else if( Key.isDown( Key.RIGHT) )63. {64. if( velAndar < velMax )65. velAndar++;66. if(!pulando)67. megaman_mc.gotoAndStop(”correndo_dir”);68. }69. else if(!pulando and !entrada )70. {71. //se não tiver acontecendo nada ele fica parado72. if(direcao == “direita”)73. megaman_mc.gotoAndStop(”parado_dir”);74. else75. megaman_mc.gotoAndStop(”parado_esq”);76. velAndar = 0;77. }78. /* nosso personagem não é carro mas tem aceleração, que é .8579. * mude para um valor alto e veja o resultado80. */81. velAndar *= .85;82. /*esta função faz o bendito scrolling*/83. movimento(this, terreno_mc, plataforma_mc, paredes_mc, velAndar);84. if( pulando )85. {86. /* mais física aqui, veja na figura 9 o que acontece aqui*/87. this._y -= velSaltar;88. velSaltar -= 1.8;89. if (velSaltar<0)90. caindo = true;91. if (velSaltar <-15)92. velSaltar = -15;93. }94. /* indica que o personagem emcima da plataforma, logo ele não está95. * caindo e nem pulando é claro! E setamos novamente96. */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 condição abaixo, quem anda é o cenário*/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. else125. 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. else136. 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. /*inclusão do código do game*/3. #include “Megaman.as”

Àqueles que mataram essa aula de física a figura abaixo mostra uma parte da física que diz: “Tudo que sobe tem que descer”, a idéia que o código das linhas 91 à 97 é simular desaceleração de um corpo quando este é lançado 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 direção e comece a cair, o que foi codificado é uma aproximação 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.


Vimos durante o texto diversos conceitos referentes ao desenvolvimento de games de plataforma, é claro que o modo de fazer não é único, você pode achar várias formas de fazer, mas os conceitos sempre serão o mesmos. Você viu como fazer scrolling, uma pequena simulação física, que permite mais suavidade ao pulo do personagem, é claro que quanto mais detalhes nessa simulação fica mais próximo da realidade.

Espero que você tenha assimilado os conceitos mais básicos 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 próxima, nas próximas semanas estarei postando a constinuação deste artigo.

Criação de Games - Megaman Parte 2

Criação de games - Megaman Parte 2Estou de volta trazendo a continuação do tutorial de criação de games - Megaman, tendo como foco a criação de um game de plataforma. Na primeira parte do tutorial, Criação de Games - Megaman parte 1, aprendemos algumas técnicas como a utilização de sprites, fizemos uma simulação do pulo do personagem, o tão prucurado scrolling da tela que cuja a idéia é bem tranquila e os princípios básicos de construção 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 inclusão de novos elementos dentro do nosso joguinho, lembrando que é o básico, use sua imaginação para deixar o joguinho ainda mais interessante. Como o interesse aqui é puramente o aprendizado, não estamos desenvolvendo um jogo comercial que necessita de mais otimizações. No entanto, uma vez que assimilado todos os conceitos apresentados, conseguirá facilmente desenvolver seus jogos de forma comercial. A construção das animações é feita ação a ação do personagem, para cada ação 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 noções legais como como fazer o tiro que o Megaman vai disparar, a temporização destes tiros, um timer para marcar o tempo de jogo, a inclusão de inimigos no cenário e um pouquinho sobre


IA em games. Logo nosso jogo estará completo com os itens básicos para este tipo de game.

Conteúdo

Já vou supor que você tenha visto o artigo anterior caso não tenha acesse (Criação 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 serão dados tanto pelo megaman quanto pelos seus inimigos. Insira um novo símbolo 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 animação 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 não estiver aparecendo aperte CTRL + L. Iremos implementar as ações do tiro semelhante ao que eu fiz no meu primeiro turorial, aquele da nave. Então, devemos posicionar esse tiro fora do stage, redimensione o seu tamanho para 15px de altura e 15px de largura, chame essa instância de tiro_mc. Veja abaixo como posicionei no stage.

Figura 2 - Posição inicla adequada para o tiro_mega.

Agora vamos programar as ações desse tiro. Selecione o movie clip tiro_mc e aperte F9 para editar seu Action Script onde os inimigos que estão sendo referenciados no código serão criados nos passos seguintes, o código segue abaixo:

1. onClipEvent( enterFrame )2. {3. if(_name != “tiro_mc”)4. {5. //verifica colisão com inimigo 16. 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. else12. {13. if(direcao == “direita”)14. this._x += 25;15. else

http://www.mxstudio.com.br/apoio/upload/files_megaman.zip



16. this._x -= 25; if(this._x >2000 || this._x < -5)17. this.removeMovieClip();18. }19. }20. }

Também 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 animação pronta, volte à cena e arraste-o da library para o stage e dê o nome de instância de tiro_fogo_mc. Veja abaixo como ficou:

Figura 3 - Folha de sprites para tiro_2.

Figura 4 - Veja o posicionamento na cena.

O código para este tiro segue abaixo com algumas modificações para testar a colisão 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. else14. {15. if(direcao == “direita”)16. this._x += 25;17. else18. this._x -= 25;19. if(this._x >2000 || this._x < -5)20. this.removeMovieClip();21. }22. }

23. }

Note que existe uma variável direcao que não 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 código nas linhas iniciais onde são declaradas as variáveis utilizadas no nosso game, aproveite e declare variáveis de controle que servirão para controlar o número de tiros e o tempo de intervalo entre cado tiro, veja abaixo como ficou.

1. stop();2. /* Variáveis globais3. * Aqui estão presentes as variáveis que fazem o4. * controle dos estados5. * em que o jogo se encontra6. */7. var velSaltar:Number = 20;8. var velAndar:Number = 0;9. var pulando:Boolean = false;10. var caindo:Boolean = false;11. var morreu:Boolean = false;12. var velMax:Number = 10;13. var direcao:String = “”;14. var entrada:Boolean = true;15. var contTiros:Number = 0; /*Contador de tiros*/16. var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/17. /*adiciona à classe MovieClip um atributo que indica a direção para onde está indo*/18. MovieClip.prototype.direcao = “esquerda”;19. .20. .21. .

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 localização não vai influenciar, e mude suas propriedades para que seja um campo texto do tipo dinâmico. Mais algumas linhas serão adicionadas no arquivos Megaman.as, como já temos o tiro em mãos e uma variável que controla o intervalo de tempo dos tiros, podemos implementar a ação de disparar tiros. Abaixo está o código que implementa o disparo.

1. .2. .3. .4. //só pula se não tiver pulando, claro5. if ( Key.isDown(Key.SPACE) && !pulando )6. {7. pulando = true; /*mostra a animação pulando para direita se o personagem8. * está indo para a direita, caso contrário para a esquerda9. */10. if(direcao == “direita”)11. megaman_mc.gotoAndStop(”pulando_dir”);12. else13. megaman_mc.gotoAndStop(”pulando_esq”);14. }15. /*########### Novas Linhas adicionadas ##########*/16. tempo = Math.round(getTimer()/1000);17. _root.tempo_txt.text = tempo;18. if( Key.isDown( Key.CONTROL) && (getTimer() - tiroInterval) > 200 )

19. {20. _root.contTiros++;21. _root.tiro_mc.duplicateMovieClip(”tiro”+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o

tiro22. if(direcao == “direita”)23. {24. if(!Key.isDown( Key.RIGHT) )25. this.gotoAndStop(”atirando_dir”);26. _root[”tiro”+_root.contTiros]._y = this._y+35;27. _root[”tiro”+_root.contTiros]._x = this._x+50;28. }29. else30. {31. if(!Key.isDown( Key.LEFT) )32. this.gotoAndStop(”atirando_esq”);33. _root[”tiro”+_root.contTiros]._y = this._y+35;34. _root[”tiro”+_root.contTiros]._x = this._x-10;35. }36. tiroInterval = getTimer();37. /*atribuindo direcao para o tiro*/38. _root[”tiro”+_root.contTiros].direcao = direcao;39. atirando = true;40. }41. /*#################################################*/42. if( Key.isDown( Key.LEFT) )43. .44. .45. .

Agora vamos adicionar os inimigos. Neste artigo vou adicionar apenas 2 inimigos para que você tenha uma noção de como implementar uma pequena Inteligência Artificial (IA) nos seus inimigos, a implementação de IA em games pode ser feita de diversas formas, aqui apresentarei uma idéia 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 gif’s animados. Com uma imagem gif pronta é fácil obter seus sprites pelo flash que fará sozinho o processo da passagem da animação 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 animação 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 número 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 animações 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 força 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 direção. Para mais detalhes veja o artigo anterior, e no frame morto não coloque nada deixe-o em branco sem nada no stage. Fica aqui como um teste criar uma animação de explosão ou qualquer coisa que pareça 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 retângulo acima da cabeça do personagem de forma que esse desenho pertença à layer barra, transforme essa barra em mc apenas selecionando e apertando F8 chamando-a de barra_life. Por fim dê o nome de instância de barra_mc. Depois de todo esse processo com o primeiro frame selecione aperte F6 para criar um key Frame cópia do primeiro. Após 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 animação para a esquerda e inverta o mc para fazer a animação para direita. Coloque também o stop() no primeiro frame da layer imagem e barra de life não 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 intância de barra_mc e apertar F6 com o primeiro frame selecionado para fazer uma cópia para o segundo.

Depois de criado esses dois mc’s volte para a cena principal e dê um duplo clique no mc terreno_mc, assim ele será aberto para edição 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 é possível mas é inviável dependendo do número de inimigos no cenário por que será complicado aplicar o scrolling em todos esses objetos. Continuando, com o terreno_mc aberto para edição arraste o mc inimigo_1 da library para o stage. Dê o nome de instância de inimigo_1_mc. A posição onde vai ficar o seu inimigo depende de como você vai programar seu Action Script de modo que ele não ultrapasse barreiras que ele não possa ou estipular limites até onde possa ir, eu estipulei um valor máximo e um valor mínimo 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 código abaixo:

1. onClipEvent(load)2. {3. /*velocidade inicial do inimigo_1_mc*/

4. var speed = 2;5. }onClipEvent(enterFrame)6. {7. /*não tem mais barra de life, então morreu*/8. if(this.barra_mc._xscale <=0)9. this.gotoAndStop(”morto”);10. else11. {12. /*pequena simulação de inteligência artificial*/13. atack = Math.random();14. if(this.hitTest(_root.megaman_mc))15. _root.life_mc._xscale -= .5;16. /*realiza um ataque se o número randômico for divisível por 15*/17. if(Math.round(atack*10000) % 15 == 0)18. speed = 10;19. /*persegue o megaman*/20. if(_root.megaman_mc._x > _root.terreno_mc._x+this._x)21. {22. this.gotoAndStop(”direita”);23. this._x +=speed;24. }25. else26. {27. this.gotoAndStop(”esquerda”);28. this._x -=speed;29. }30. if(this._x < 100)31. this._x +=speed;32. else if(this._x > 600)33. this._x -=speed;34. speed = 2;35. if(speed > 100)36. speed = 0;37. }38. }

No código acima fiz com que o inimigo fique fazendo umas aceleradas para frente como se fosse um ataque e o código também faz com o inimigo fique sempre andando atrás 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 adaptações são necessárias no código acima, primeiro eu admiti que não 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 também é diferente eu o coloquei na parte final da fase. E também atualizo a variável direcao para eu saber para onde este inimigo vai atirar. A imagem de como fica no stage depois desse processo de montagem das animações do personagem e o código seguem abaixo:

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

1. onClipEvent(load)2. {3. /*velocidade inicial do inimigo_2_mc*/4. var speed = 2;5. }onClipEvent(enterFrame)6. {7. /*não tem mais barra de life, então morreu*/8. if(this.barra_mc._xscale <=0)9. this.gotoAndStop(”morto”);10. else11. {12. /*pequena simulação de inteligência artificial*/13. atack = Math.random();14. if(this.hitTest(_root.megaman_mc))15. _root.life_mc._xscale -= .5;16. /*realiza um ataque se o número randômico for divisível por 15*/17. if(Math.round(atack*10000) % 15 == 0)18. speed = 10;19. /*persegue o megaman*/20. if(_root.megaman_mc._x > _root.terreno_mc._x+this._x)21. {22. this.gotoAndStop(”direita”);23. direcao = “direita”;24. this._x +=speed;25. }26. else27. {28. this.gotoAndStop(”esquerda”);29. direcao = “esquerda”;30. this._x -=speed;31. }32. if(this._x < 1446)33. this._x +=speed;34. else if(this._x > 2040)35. this._x -=speed;36. speed = 2;

37. if(speed > 100)38. speed = 0;39. }40. }

Vale ressaltar que o código das ações desses inimigos são os que podem mais serem implementados de forma diferente, eu optei para as ações 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 estão 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 código abaixo no frame 25, mas por que no frame 25? Se você observar a animação é nesse frame que a personagem sofre uma espécie de solavanco devido a um tiro que de forma imaginária 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. else12. {13. _root[”tiro”+_root.contTiros].direcao = “esquerda”;14. _root[”tiro”+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58;15. _root[”tiro”+_root.contTiros]._x = x_terreno + x_inimigo+10;16. _root[”tiro”+_root.contTiros]._xscale = - 2*_root[”tiro”+_root.contTiros]._width;17. }

Você conseguiu entender a linha 17 deste código? Sim? Não? O que ela faz? Até agora quando a gente desejava que um personagem ficasse virado para os dois sentidos criávamos 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 inversão via Action Script com uma linha de código, o mais impressionante é que funciona.

Falei muito de uma tal barra de life do megaman mais ainda não fizemos. Então, vá ao stage da cena e cria um retângulo 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 instância 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 -Posição do life e o primeiro inimigo.

Por último só falta fazer as animação do megaman atirando e o código que fará ele disparar os tiros. Para fazer a animação vamos usar o arquivo de imagens que segue logo ao fim desse artigo. Lá tem várias imagens do megaman atirando correndo e tudo mais. Acredito que você já está ficando bom nesse processo de copiar e colar para montar animações. Use a folha de sprite abaixo, OBS: eu não usei toda a sequência de animação para fazer ele atirando, usei apenas os prites que estão abaixo.

Figura 12 - Folha de sprites para atirando parado.

Figura 13 - Folha de sprites para atirando correndo.

Os dois mc’s vazios que você irá criar para fazer as animações vão se chamar respectivamente atirando e atirando_correndo. Agora iremos incorporar esses mc’s 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 animações para os frames atirando_dir e correndo_atirando_dir já estão pronta (atirando e atirando_correndo), ou seja, a direção em que o personagem está olhando já está correta. Para fazer as animações para esquerda será usada a mesma técnica que consistia em usar a ferramenta Free Transform Tool para inverter o sentido da animação que já está pronta, se tiver ainda dúvidas 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 código no último frame do mc atirando para que quando você atirar saiba para que lado deva parar e de tirar :

1. _root.atirando = false;2. if(_root.direcao == “direita”)3. _parent.gotoAndStop(”parado_dir”);4. else5. _parent.gotoAndStop(”parado_esq”);

E para o mc atirando_correndo coloque no último frame:

1. _root.atirando = false;2. É moçada, agora falta apenas o código do coração do nosso game com as novas modificações e com a parte

de tiros, com a possibilidade de correr atirando e pular atirando todas já incorporadas no código, então aí está:

"codigo" title="AS">stop();

3. /* Variáveis globais4. * Aqui estão presentes as variáveis que fazem o5. * controle dos estados6. * em que o jogo se encontra7. */8. var velSaltar:Number = 20;9. var velAndar:Number = 0;10. var pulando:Boolean = false;11. var caindo:Boolean = false;12. var morreu:Boolean = false;13. var atirando:Boolean = false;14. var velMax:Number = 10;15. var direcao:String = “”;16. var entrada:Boolean = true;17. var contTiros:Number = 0; /*Contador de tiros*/18. var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/19. /*adiciona à classe MovieClip um atributo que indica a direção para onde está indo*/20. MovieClip.prototype.direcao = “esquerda”; /*fazemos com que as layers que representam as paredes21. * e a plataforma não apareçam na hora que22. * o jogo for executado23. */24. plataforma_mc._visible = false;25. paredes_mc._visible = false;26. /* Todo o controle do personagem Megaman*/27. megaman_mc.onEnterFrame = function()28. {29. //verifica se ainda não acabou a entrada do Megaman30. if(entrada)31. return;32. if(this._y > 350)33. _root.gotoAndStop(”gameOver”);34. /*verifica colisão com alguma parede do lado direito ou esquerdo35. * Se houve colisão faz uma anulação do passo que ele deu para frente36. */37. if( colisao_paredes(_root.paredes_mc, this, velAndar))38. this._x-=velAndar;39. /* simples simulação de gravidade40. * Se ele não tiver em cima da plataforma então ele vai caindo41. * sem aceleração42. */43. if ( !colisao_plataforma(_root.plataforma_mc, this) && !pulando)44. this._y += 6;45. //se velocidade positiva estou andando para a46. //direita senão estou indo para esquerda47. if (velAndar>0)48. direcao = “direita”;49. else if (velAndar<0)50. direcao = “esquerda”;51. //só pula se não tiver pulando, claro52. if ( Key.isDown(Key.SPACE) && !pulando )53. {54. pulando = true;55. /*mostra a animação pulando para direita se o personagem

56. * está indo para a direita, caso contrário para a esquerda57. */58. if(direcao == “direita”)59. megaman_mc.gotoAndStop(”pulando_dir”);60. else61. megaman_mc.gotoAndStop(”pulando_esq”);62. }63. if( Key.isDown( Key.CONTROL) && (getTimer() - tiroInterval) > 200 )64. {65. _root.contTiros++;66. _root.tiro_mc.duplicateMovieClip(”tiro”+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos

o tiro67. if(direcao == “direita”)68. {69. if(!Key.isDown( Key.RIGHT) )70. this.gotoAndStop(”atirando_dir”);71. _root[”tiro”+_root.contTiros]._y = this._y+35;72. _root[”tiro”+_root.contTiros]._x = this._x+50;73. }74. else75. {76. if(!Key.isDown( Key.LEFT) )77. this.gotoAndStop(”atirando_esq”);78. _root[”tiro”+_root.contTiros]._y = this._y+35;79. _root[”tiro”+_root.contTiros]._x = this._x-10;80. }81. tiroInterval = getTimer();82. /*atribuindo direcao para o tiro*/83. _root[”tiro”+_root.contTiros].direcao = direcao;84. atirando = true;85. }86. if( Key.isDown( Key.RIGHT) && atirando)87. {88. if( velAndar < velMax )89. velAndar++;90. if(!pulando)91. megaman_mc.gotoAndStop(”correndo_atirando_dir”);92. }93. else if( Key.isDown( Key.LEFT) && atirando)94. {95. if ( velAndar > -velMax ) //não deixa o personagem acelerar muito96. velAndar–;97. if(!pulando)98. megaman_mc.gotoAndStop(”correndo_atirando_esq”);99. }100. else if( Key.isDown( Key.RIGHT))101. {102. if( velAndar < velMax )103. velAndar++;104. if(!pulando)105. megaman_mc.gotoAndStop(”correndo_dir”);106. }107. else if( Key.isDown( Key.LEFT) )108. {109. if ( velAndar > -velMax ) //não deixa o personagem acelerar muito110. velAndar–;111. if(!pulando)

112. megaman_mc.gotoAndStop(”correndo_esq”);113. }114. else if(!pulando && !entrada && !atirando)115. {116. //se não tiver acontecendo nada ele fica parado117. if(direcao == “direita”)118. megaman_mc.gotoAndStop(”parado_dir”);119. else120. megaman_mc.gotoAndStop(”parado_esq”);121. velAndar = 0;122. }123. /* nosso personagem não é carro mas tem aceleração, que é .85124. * mude para um valor alto e veja o resultado125. */126. velAndar *= .85;127. /*esta função faz o bendito scrolling*/128. movimento(this, terreno_mc, plataforma_mc, paredes_mc, velAndar);129. if( pulando )130. {131. /* mais física aqui, veja na figura 9 o que acontece aqui*/132. this._y -= velSaltar;133. velSaltar -= 1.8;134. if (velSaltar<0)135. caindo = true;136. if (velSaltar <-15)137. velSaltar = -15;138. }139. /* indica que o personagem emcima da plataforma, logo ele não está140. * caindo e nem pulando é claro! E setamos novamente141. */142. if ( colisao_plataforma( _root.plataforma_mc, this) && caindo)143. {144. velSaltar = 20;145. pulando = false;146. caindo = false;147. }148. };149. function colisao_plataforma(obj1:Object, obj2:Object)150. {151. return obj1.hitTest(obj2._x, obj2._y+60, true);152. }153. function colisao_paredes(obj1:Object, obj2:Object, vel:Number)154. {155. return (obj1.hitTest(obj2._x-5, obj2._y+60, true) or obj1.hitTest(obj2._x+40, obj2._y+60, true))156. }157. function movimento(personagem_obj:Object, terreno_obj:Object,158. limite_obj:Object,paredes_obj:Object, velocidade:Number)159. {160. if(direcao == “direita”)161. {162. /*se obedecer a condição abaixo, quem anda é o cenário*/163. if(personagem_obj._x > 200 and terreno_obj._x >=-1853)164. {165. terreno_obj._x -= velocidade;166. limite_obj._x -= velocidade;167. paredes_obj._x -= velocidade;168. }

169. else170. personagem_obj._x += velocidade;171. }172. if(direcao == “esquerda”)173. {174. if(personagem_obj._x < 100 and terreno_obj._x < 0)175. {176. terreno_obj._x -= velocidade;177. limite_obj._x -= velocidade;178. paredes_obj._x -= velocidade;179. }180. else181. personagem_obj._x += velocidade;182. }183. }

"text-align: justify;">


"text-align: justify;">Bom pessoal, então isso. espero que tenham gostado fiz o máximo par ser claro e objetivo, dificilmente vocês 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 é necessário para se criar um game deste gênero. Agora coloque sua imaginação e criatividade e modfique o quanto quiser e aperfeiçoe para fique ainda melhor, como havia dito antes quero que entendam a técnica e não apenas aprender a fazer o jogo do “Megaman”, o meu intuito é que possam criar qualquer jogo com uma folha de sprites na mão e muita criatividade.

"text-align: justify;">O Frame gameover eu não fiz por que fica a seu cargo decidir o que acontecer depois que o jogo acaba, no meu caso mostrei apenas meu nome e enderço de email com o título do artigo. O barulho que você ouve no início do jogo é apenas um arquivo inicio.wav que coloquei no primeiro frame do megaman_mc só pra dar mais emoção. Pra utilizá-lo basta importá-lo para a biblioteca via menu file->import->to library.

"text-align: justify;">Se encontrarem problemas, vocês terão em mãos o mesmo código que usei para o exemplo funcional que está no início deste artigo. Olhe com cuidado cada etapa pois são muitos detalhes onde a falta de um causará um erro no game. Creio que não seja facil para quem está começando, mas estude bem os artigos anteriores para que se familiarize com a forma de como se programa um game. Fáça várias vezes se possível, a prática estimula a compreensão.

Autor: Márcio Silva - Colunista de Flash & ActionSctipt MXSTUDIO.

ZOOMNeste tutorial aprenderemos como aplicar zoom numa imagem, objeto,etc usando o ActionScript 2.0. Ao passar o mouse sobre o botão 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 botão, 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 retângulo com a cor de sua preferência).

Passo 3

Trave a layer fundo clicando na coluna na direção 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 Símbolo) e a converta em um Movie Clip.

Passo 5

Abra o Properties Panel (Ctrl+F3) e nomeie a instância do MovieClip (chamaremos de MC daqui por diante) como zoom.

Passo 6

Dê um clique duplo na instância do MC (zoom) ou clique com o botão 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 botão.

Passo 11

Clique sobre o frame 1 da layer botão, selecione a Text Tool (T) e escreva Zoom. Com o texto ainda selecionado, pressione a tecla F8 para convertê-lo em um botão.

Passo 12

Com o botão ainda selecionado, abra o Action Script Panel (F9) e digite o seguinte código:

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 código:

_root.zoom.onEnterFrame = function() { // Este zoom é o MC e não o botão!if (mouse_over_zoom) {_root.zoom.nextFrame();} else {_root.zoom.prevFrame();}};

Passo 14

Teste seu filme (Ctrl+Enter).

Flash - Conhecendo o Flash CS3 - Parte 3Olá Comunidade.

Nessa terceira parte da série de arquivos sobre o Flash CS3, irei falar sobre o ActionScript 3.0. Mostrar algumas mudanças em relação ao ActionScript 2.0, mostrar as novidades e algumas outras coisas.

Mais uma vez, para a visualização dos exemplos nesse tutorial é necessário o Plugin do Flash Player 9.

Novo painel de Ações

Finalmente, novos recursos foram adicionados no painel Actions do Flash CS3, recursos que irão facilitar e muito a vidas dos programadores em ActionScript. Agora, é possível ‘esconder’ uma determinada parte de seu código, evitando assim que o programador se perca nas inúmeras linhas de ActionSript criado, agilizando o trabalho e tornando-o mais produtivo.

Para usar esse recurso, basta selecionar o trecho do seu código que deseja esconder e clicar no sinal de menos para esconder o trecho do seu código.

Outra possibilidade é usar o menu:

http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW

1: Esconde o código entre as chaves, {}.

2: Esconde o código selecionado, selecione Alt para esconder o que não estiver selecionado.

3: Mostrar todo o código.

Outro recurso interessante é a possibilidade de adicionar comentários. Para usar esse recurso basta selecionar o trecho do seu código que deseja comentar e clicar no balãozinho “Apply block comment”.

Para comentários simples (em uma linha) basta usar o botão “Apply line comment”.

É possível remover um comentário do seu código, basta selecionar o comentário que você não quer mais usar e clicar no balão “Remove comment”.

Compiler Erros

Talvez, a melhor novidade do Flash é a possibilidade de encontrar aonde está seu erro. Antigamente, sempre que aparecia algum erro tínhamos 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 diferenças entre o ActionScript 3.0 e o ActionScript 2.0 não são tão grandes assim, muita coisa do ActionScript 2.0 continua.

1) Propriedades

O primeiro destaque fica com as Propriedades. No ActionScript 2 quando queríamos mudar alguma propriedade de um MovieClip, como Alpha, Visible, X, Y, etc, utilizáva-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 são passados foi mudado, a propriedade alpha por exemplo no ActionScript 2 aceitava números de 0 a 100, agora no ActionScript 3 aceita números de 0 a 1. Então se precisamos usar 40% de transparencia, o código 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 números de 0 a 1.

2) Propriedades Globais

Outro mudança importante fica por quanta das Propriedades Globais, que também estão sem o underline. As propriedades _global e _level foram removidas, o propriedade _root foi trocada por stage, entre outras mudanças.

3) Eventos de Manipulação (Event Handling)

Talvez, umas das maiores mudanças do ActionScript 3 seja os eventos de manipulação, eventos como onPress, onRelease, onRollOver, onRollOut, etc. No ActionScript 3 esses eventos não existem mais, agora quando precisamos utilizar esses eventos devemos usar o addEventListener.

1. instanciaMC.addEventListener(MouseEvent.CLICK, funcaoPress);2. function funcaoPress(event:MouseEvent) {3. /* Ações do botão */4. }

No exemplo acima, para o MovieClip com instancia de instanciaMC, quando se clicar do Mouse em cima dele vai chamar a função funcaoPress. Além do evento CLICK existem outros eventos como o MOUSE_DOWN, MOUSE_UP, MOUSE_OVER, MOUSE_OUT, etc, todos na Classe MouseEvent.

Outra mudança considerável é com relação a ações em MovieClips, Botões, Componentes, etc. Usando o ActionScript 3 não se pode mais selecionar um MovieClip por exemplo e adicionar uma ação nele.

Agora só se pode colocar ações no frame, evitando assim que alguma ação se perca quando se remove um determidado MovieClip ou Botão e evitando que seu swf trave (muitas ações sobre objetos pode travar seu swf).

4) Importando Símbolos da Biblioteca

No ActionScript 2, quando precisávamos importar um MovieClip da biblioteca por exemplo, utilizávamos o método attachMovie. Agora no ActionScript 3 esse método foi removido e agora usamos o método addChild. Outra mudança fica com o Linkage.

Reparem que agora não preenchemos mais o campo Identifier e sim o campo Class. Esse campo é o nome da Classe que utilizaremos para esse MovieClip. Se você não estiver usando uma Classe para esse MovieClip que você quer importar, utilize um nome para identificar esse símbolo (como fazíamos no campo Identifier). Com isso, o Flash cria um esqueleto da Classe para usar o nome do símbolo. 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 não 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 função que carrega imagens e SWFs, bem melhor para os iniciantes que não vão ficar perdidos entre várias funções que fazer a mesma coisa.

Para carregar uma imagem é bem simples, criaremos um MovieClip em branco com instancia de holder, usamos o seguinte código:

1. var loader:Loader = new Loader();2. loader.load(new URLRequest(“imagemLogo.jpg”));3. holder.addChild(loader);

Outro exemplo:

1. var loader:Loader = new Loader();2. var endereco:URLRequest = new URLRequest(“imagemLogo.jpg”);3. loader.load(endereco);4. holder.addChild(loader);

6) Abrindo páginas

O comando getURL é outro comando removido do ActionScript 3. Agora para abrir uma nova página usaremos o método 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 fácil e prático. No ActionScipt 2 os nós 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 nós são acessados com o nome de cada nó, facilitando e muito aos que estão começando a usar XML no Flash.

Vamos a um exemplo de como usar XML no ActionScript 3. Começaremos criando nosso arquivo XML, de o nome de arquivo.xml.

1. <?xml version=“1.0″ encoding=“utf-8″?>2. <musicas>3. <faixa>4. <artista>The Beatles</artista>5. <nomeMusica>Can’t Buy Me Love</nomeMusica>6. <nomeCd>Beatles 1</nomeCd>7. </faixa>8. <faixa>9. <artista>Red Hot Chili Peppers</artista>10. <nomeMusica>Californication</nomeMusica>11. <nomeCd>Californication</nomeCd>12. </faixa>13. <faixa>14. <artista>Pearl Jam</artista>15. <nomeMusica>Alive</nomeMusica>16. <nomeCd>Ten</nomeCd>17. </faixa>18. </musicas>

Criaremos um MovieClip com o nome de mc, esse MovieClip será importado da biblioteca, portando seguiremos a seguinte configuração:

Dentro desse MovieClip criaremos três campos de texto dinamico, eles irão receber os dados do XML. Os nomes em vermelho são as instancias dos campos.

Por fim, no primeiro frame de nosso arquivo colocaremos a seguinte ação:

1. var total:Number;2. var xml:XML = new XML();3. var xmlArquivo:URLLoader = new URLLoader();4. xmlArquivo.load(new URLRequest(“arquivo.xml”));5. xmlArquivo.addEventListener(Event.COMPLETE, monta);6. function monta(event:Event) {7. xml = new XML(event.target.data);8. total = xml.faixa.length();9. for (var i=0; i<total; i++) {10. var MC:MovieClip = new mc();11. addChild(MC);12. MC.x = MC.width*i+MC.x+i;13. MC.campo1.text = xml.faixa.nomeMusica[i];14. MC.campo2.text = xml.faixa.artista[i];15. MC.campo3.text = xml.faixa.nomeCd[i];16. }17. }

E o resultado será algo parecido com esse:

Classes no ActionScript 3

A estrutura de uma Classe criada com ActionScript 3 não é muito diferente de uma Classe criada com ActionScript 2. Talvez a maior mudança 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 ações aqui */3. }

No ActionScript 3, basta declarar a qual pacote essa Classe pertence.

1. package flash.display {2. public class BitmapData {3. /* Minhas ações aqui */4. }5. }

O mesmo vale para Classes que ficam em pastas, nesse exemplo a Classe que estou criando está na pasta mxstudio:

1. package mxstudio {2. public class minhaClasse {3. /* Minhas ações aqui */4. }5. }


Deu para perceber que houve muitas mudanças no ActionScript, mudanças para melhorar a performance de uma aplicação e tornar o ActionScript uma linguagem de programação 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 mudanças mais básicas do ActionScript, as demais mudanças vocês poderão encontrar no link que passei, no Help do Flash e no próprio painel de Compiler Erros que apresenta o problema e a solução.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Conhecendo o Flash CS3 - Parte 2 Data de publicação: 25-05-2007

Visitas: 3707

Natan D. Alves

http://www.mxstudio.com.br/author/natan/

http://www.natanalves.com/

http://livedocs.adobe.com/flex/201/langref/migration.html



Flash - Conhecendo o Flash CS3 - Parte 2Olá Comunidade.

Nessa segunda parte da série de arquivos sobre o Flash CS3, vou mostrar a você sobre as novidades com interação do Flash com os produtos da Adobe como Photoshop, Ilustrator e Fireworks, vou falar sobre 9-slice scaling, Filtros, sobre a criação de animações MotionTween via ActionScript e sobre os novos componentes do Flash.

Para a visualização dos exemplos desse tutorial é necessário que tenha instalado o Plugin do Flash Player 9.

Importando arquivos do Photoshop e Illustrator

Agora é possível 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 edição no Flash.

No Flash CS3 é diferente, quando se importa um arquivo PSD ou AI no Flash, você verá várias opções de importação. Por exemplo, podemos não importar determinado objeto, importar um determinado símbolo 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.

http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW

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, edição ou não 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 importação é 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 conteúdo em um MovieClip, etc.3: Podemos importar o arquivo em camadas ou frames, importar como símbolo ou uma simples imagem de bitmap.

Importando arquivos do Fireworks

Aos usuários do Fireworks não se preocupem, o Flash CS3 também importa arquivos PNG do Fireworks. O processo de importação é 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 página 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 básico acontecia quando criávamos um MovieClip como um botão. Se tínhamos que aumentar ou diminuir esse MovieClip, não podíamos dimensionar ele usando a ferramenta Scale (Q), porque tudo que estava no MovieClip iria aumentar, estragando nosso botão.

Com o 9-slice scaling, isso já não acontece. Basta arrastar essas ‘barras’ na posicação que desejar. A área que não será modificada é a área do meio.

Para utilizar esse recurso, quando criar seu MovieClip ou Botão, abra a aba Advanced e selecione a opção “enable 9-slice scaling”.

Filtros

Agora é possível copiar e colar Filtros de um Objeto para outro, economizando um tempo precioso de criação 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 botão “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 botão “Paste Filters”.

Criando animações MotionTween via ActionScript

Uma das maiores e mais legais novidades do Flash CS3 é a possibilidade de criar animações MotionTween via ActionScript. Para fazer isso é simples, crie uma animação MotionTween que preferir, selecione o primeiro frame e segure a tecla Shift e clique no último frame (selecionando todos os frames da animação), depois vai em Edit > Timeline > Copy Motion as ActionScript 3, ou clicar com o botão 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 ações no frame que o MovieClip criado está.

Novos Componentes

No Flash CS3 chegamos a terceira geração dos Componentes UI (user interface), inexplicavelmente a Adobe não 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, não existia motivo para a Adobe não ter atualizado eles, resta agora criar o seu próprio componente para substituir os Componentes removidos. Ainda é possível 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 geração 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 botão direito e ir em Edit) para que possa editar o Componente da maneira que achar melhor.


É impossível não 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 fácil. Para os que não 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 criação do Flash CS3. No próximo artigo irei falar um pouco sobre o novo ActionScript 3, mostrar algumas coisas básicas sobre as mudanças do ActionScript 2 para ActionSctipt 3.


Flash - Conhecendo o Flash CS3 - Parte 1.Olá Comunidade.

Nessa primeira parte da série de artigos sobre o Flash CS3, estarei mostrando as novidades visuais, os novos painéis e sobre as novas ferramentas do Flash CS3.

Cara nova

Começaremos pela nova tela de boas vindas:


1: Menu para abrir os arquivos recem utilizados.2: Menu de criação com tipos de arquivos pré-estabelecidos.3: Menu de criação com base em Templates com novas opções para portáteis.4: Área de informações de ajuda assim e links úteis no site da Adobe

Agora vamos analisar as mudanças na interface do Flash. O que mais chama atenção da nova interface são os novos painéis. O Flash passa a receber painéis semelhantes a outros produtos do Creative Suite 3, que visa uma maior organização e maior facilidade de trabalho com multiplos programas.

O painel de Ferramentas foi mudado para uma única coluna. Esse novo painel economiza um bom espaço 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 painéis laterais. Agora podemos mudar a aparecencia dos paineis para que apareça texto, ícones ou texto e ícones.

É possível mudar a aparencia desses painéis 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 criação de formas personalizadas, formas como retangulos e círculos que agora podem ter bordas arredondadas de forma fácil e da maneira que desejar.

O destaque fica para a possibilidade da criação 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 prática na hora de criar algum vetor no Flash.


Espero que todos tenham aproveitado esse artigo, procurei mostrar mais as novidades visuais dos painéis e novas ferramentas. No próximo artigo irei falar sobre as novas possibilidades de integração do Flash com outros produtos da Adobe (como Ilustrator e Photoshop), sobre a criação de animações via ActionScript e sobre os novos Componentes.


Um abraço a todos e até a próxima.

Autor: Natan D. Alves - Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

NIMAÇÃO COM SOMBRA Com recursos muito simples podemos fazer algumas animações interessantes em Flash.


Obs.: devido a um grande número de pessoas que fazem perguntas básicas (como criar um keyframe, como criar um símbolo gráfico, etc), a partir deste tutorial estaremos linkando essas tarefas básicas a exemplos de como desenvolver a respectiva tarefa. Por exemplo, no item 1 deste tutorial, se não souber como definir o frame rate, basta clicar sobre o link respectivo e uma nova janela será aberta mostrando como proceder. Eventualmente novas tarefas serão acrescentadas, de acordo com as necessidades dos tutoriais.

Criando a cidade

1. Crie um novo documento Flash com as dimensões 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 não corramos o risco de selecioná-la e deslocá-la indevidamente.

5. Selecione a Line Tool (N) e defina uma cor contrastante para o traço (por exemplo o vermelho) e trace o contorno dos prédios da cidade.

http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1091#004





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 símbolo graphic nomeando-o como cidade_gr.



Criando o reflexo da cidade

8. Duplique o símbolo gráfico cidade_gr e arraste-o para baixo.


Edite o símbolo cidade_gr e apague o contorno (linha vermelha), pois ele não serve para mais nada.

9. Como as duas instâncias do símbolo estão 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 instância do símbolo gráfico cidade_gr que está na layer sombra e no menu, navegue até Modify > Transform > Flip Vertical para girar verticalmente esta instância. A seguir ajuste a sua posição 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 instância do símbolo gráfico cidade_gr que está na layer sombra e altere o Brightness para 85%.

13. Crie uma nova layer e denomine-a “céu”.


14. Selecione a Rectangle Tool (R) e desenhe um retângulo 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 céu logo abaixo da layer sombra.

15. Transforme o retângulo que acabamos de desenhar num símbolo gráfico denominando-o ceu_gr (o procedimento é análogo ao que fizemos anteriormente com o cidade_gr).

16. Crie uma nova layer, denominando-a mar e posicione-a entre as layers céu e sombra.

17. Clique no frame 1 da layer mar, arraste uma instância 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 animação do balão

19. Crie uma nova layer e denomine-a balão.

20. Crie uma silhueta de balão ou importe para o Flash no frame 1 da layer balão posicionando-a como segue.

21. Transforme o balão num símbolo gráfico e denomine-o balao_gr.

22. Clique no frame 300 da layer balão, 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 balão e tecle F6 para criar um keyframe nele. Agora temos uma cópia do balao_gr neste frame.

24. Reposicione a instância do balao_gr do frame 300 como segue:

25. Crie um motion tween entre os frames 1 e 300 da layer balão.

Criando a animação da sombra do balão

26. Crie uma nova layer e denomine-a sombra do balão posicionando-a entre as layers mar e sombra.

27. No primeiro frame desta layer, insira uma instância do balao_gr, posicionando-o no reflexo do céu em posição análoga ao balão:

28. Altere seu Brightness para 85% e faça um Flip Vertical.

29. Faça um procedimento análogo ao que fez para criar a animação do balão para criar a animação da sombra.

30. Delete a layer “cidade”, pois não é mais necessária.

31. Teste seu filme teclando Ctrl+Enter.

Intro Data de publicação: 05-04-2007

Visitas: 3995

Francisco



INTROAprenderemos 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 dimensões 625 x 415 px (criei o meu com fundo preto):

http://www.mxstudio.com.br/Conteudos/Flash/Intro(fla).zip

http://www.mxstudio.com.br/author/francisco/

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 código:

stop();

O objetivo é que a animação pare nesse ponto (ao chegar ao seu final).

4. No menu, navegue até Insert > New Symbol… (Ctrl + F8), nomeie o novo símbolo como “Academia de Xadrez (Vertical)”.

5. Clique sobre a Text Tool (T) e digite “www.academiadexadrez.com”, com as seguintes configurações:

Para conseguir esse efeito, no painel Properties, após o texto ter sido digitado, clique em “Change orientatin of text” opte por “Vertical, Left to Right” e a seguir, clique no botão Rotation.

6. Volte para a cena principal, clique no frame 60 da layer Título Vertical e insira um keyframe nele.

7. Arraste uma instância do “Academia de Xadrez (Vertical)” para esse keyframe configurando como segue:

8. Tecle no frame 70, tecle F6 para criar um keyframe idêntico ao que acabamos de criar.

9. Clique com o botão 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 título permaneça na animação até o final dela.

12. Vamos agora colocar um link para a repetição da animação quando ela chegar ao final, caso o usuário 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 botão invisível (só com o Hit) com as configurações a seguir:

15. Clique no frame 570 da layer “AS”, abra o painel Actions (F9) e acrescente o código do botão. Após inseri-lo, deve obter um código como a seguir:

stop();

repetir_bt.onRelease=function(){gotoAndPlay(1);}

Ao clicar neste botão a animação reiniciará.

Preparando as animações

16. Crie um novo MovieClip (Insert > New Symbol, escolha MovieClip) e denomine-o como “Animação 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 código:

stop();

Afinal, não queremos que a animação 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 “Animação de Traço Inferior” desenhe um traço com o Line Tool (N) e configure como segue no painel Properties:

21. Transforme-o em um símbolo gráfico 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 traço (no painel Properties) como segue:

24. Clique com o botão direito do mouse entre qualquer frame entre o 1 e o 20 e opte por “Create Motion Tween”. Com isso, o traço crescerá na tela.

25. No frame 21 da layer Título, digite “Academia de Xadrez” depois de clicar na Text Tool (T) e transforme-o num símbolo gráfico 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). Faça isso mudando o parâmetro 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 símbolo gráfico (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 análogo para animar o slogan. O texto que usaremos é “Onde os Reis se encontram”. As duas instâncias deste símbolo gráfico que criamos (chamamos de Slogan) estarão nos frames 31 e 40 assim como o anterior e haverá um Motion Tween entre eles. Para facilitar, eis a posição inicial e final dos mesmos, respectivamente:

Pronto! Nossa primeira animação está pronta para ser inserida na cena principal.

33. Volte à cena principal, clique no frame 1 da layer “00″ que está sob a pasta “Animações” e insira uma instância do MovieClip “Animação 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 necessário, exclua todos os frames desta layer a

partir do 80, assim só teremos frames do 1 ao 79.

Criando objetos que serão usados nas animações

- Fade In/Out

35. Crie um novo símbolo Gráfico e denomine-o como Quadrado que consiste em um quadrado preto de 100×100 pixels, posicionando-o em X:0 e Y:0.

Não o coloque no Stage ainda.

36. Crie um novo símbolo 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 instância do símbolo gráfico “Quadrado” posicionando-o em X:-50 e Y:-50.]

39. Clique no frame 6 da mesma layer e tecle F6 para criar uma cópia do keyframe 1.

Criando as animações com as imagens

35. Crie um novo MovieClip (Insert > New Symbol, escolha MovieClip) e denomine-o como “Animação 01″.


Obs.: para criar a camada de máscara, clique com o botão 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 instância 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 instância 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 também no Photoshop ou similares), você pode obter uma cópia desta imagem no fonte deste tutorial. Basicamente é um retângulo onde recortei retangulos menores com bordas arredondadas.

41. Agora vamos criar a máscara para a animação da imagem miniatura. Crie um keyframe no frame 22 da layer “Máscara”, arraste uma instância do símbolo gráfico “Grade Duplo Hor gr”* para a mesma e posicione-o em X: 107.5 e Y: -207.5.

(*)No Fireworks eu criei previamente um retângulo com o tamanho de dois quadrados de nossa grade, importei-o para o Flash, transformei-o em símbolo gráfico denominando-o “Grade Duplo Hor gr”.

42. Clique no frame 53 e crie frames até ele teclando F5. Nossa máscara está pronta.

43. Crie um keyframe no frame 22 da layer “Miniatura 01″ e arraste uma istância 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 posição inicial da animação.

44. Crie uma cópia do keyframe no frame 31 teclando F6, mas reposicione-o com as mesmas coordenadas da Máscara.

45. Crie um Motion Tween entre qualquer um destes frames, mas desta vez, altere o Ease para 100.

46. Crie uma cópia 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 necessário, exclua os frames 54 a 60 das duas layers que acabamos de trabalhar.

Agora precisamos colocar na layer Fade In/Out o respectivo efeito. Então vamos fazer uma “pausa” para preparálo como um símbolo de MovieClip, pois ele será usado nas outras animações, assim diminuímos o tamanho do arquivo.

- Criando o Fade In/Out

48. Crie um novo símbolo de Movie Clip (Insert > New Symbol; Ctrl + F8) e denomine-o como “Fade In-Out”.


Para ficar mais fácil a localização, chameia as colunas da esquerda para a direita com nome de letras e as linhas de baixo para cima com números de 1 a 4.

50. Crie um novo símbolo 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 símbolo Gráfico 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 cópia do símbolo Gráfico 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 instância do “Quadrado Pto-Am” para a posição X:-312 e Y:-207.5

57. Use o mesmo procedimento anterior que utilizamos para criar o “Quadrado Pto-Am” para criar o

símbolo 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 instância do “Quadrado Am-Transp” para ele na mesma posição do anterior. Com isso faremos o quadrado sumir.

59. Faremos agora procedimentos análogos alterando os posicionamentos como segue:

Layer a3Quadrado Pto-Am {Frame 2; X:-312.5; Y:-10.5}Quadrado Am-Transp {Frame 14; X:-312.5; Y:-102.5}

Layer b4Quadrado Pto-Am {Frame 2; X:-207.5; Y:-207.5}Quadrado Am-Transp {Frame 14; X:-207.5; Y:-207.5}

Layer a2Quadrado Pto-Am {Frame 3; X:-312.5; Y:2.5}Quadrado Am-Transp {Frame 15; X:-312.5; Y:2.5}

Layer b3Quadrado Pto-Am {Frame 3; X:-207.5; Y:-102.5}Quadrado Am-Transp {Frame 15; X:-207.5; Y:-102.5}

Layer c4Quadrado Pto-Am {Frame 3; X:-102.5; Y:-207.5}Quadrado Am-Transp {Frame 15; X:-102.5; Y:-207.5}

Layer a1Quadrado Pto-Am {Frame 4; X:-312.5; Y:107.5}Quadrado Am-Transp {Frame 15; X:-312.5; Y:107.5}

Layer b2Quadrado Pto-Am {Frame 4; X:-207.5; Y:2.5}Quadrado Am-Transp {Frame 15; X:-207.5; Y:2.5}

Layer c3Quadrado Pto-Am {Frame 4; X:-102.5; Y:-102.5}Quadrado Am-Transp {Frame 15; X:-102.5; Y:-102.5}

Layer d4Quadrado Pto-Am {Frame 4; X:2.5; Y:-207.5}Quadrado Am-Transp {Frame 15; X:2.5; Y:-207.5}

Layer b1Quadrado Pto-Am {Frame 8; X:-207.5; Y:107.5}Quadrado Am-Transp {Frame 16; X:-207.5; Y:107.5}

Layer c2Quadrado Pto-Am {Frame 8; X:-102.5; Y:2.5}Quadrado Am-Transp {Frame 16; X:-102.5; Y:2.5}

Layer d3Quadrado Pto-Am {Frame 8; X:2.5; Y:-102.5}

Quadrado Am-Transp {Frame 16; X:2.5; Y:-102.5}

Layer e4Quadrado Pto-Am {Frame 8; X:107.5; Y:-207.5}Quadrado Am-Transp {Frame 16; X:107.5; Y:-207.5}

Layer c1Quadrado Pto-Am {Frame 9; X:-102.5; Y:107.5}Quadrado Am-Transp {Frame 17; X:-102.5; Y:107.5}

Layer d2Quadrado Pto-Am {Frame 9; X:2.5; Y:2.5}Quadrado Am-Transp {Frame 17; X:2.5; Y:2.5}

Layer e3Quadrado Pto-Am {Frame 9; X:107.5; Y:-102.5}Quadrado Am-Transp {Frame 17; X:107.5; Y:-102.5}

Layer f4Quadrado Pto-Am {Frame 9; X:212.5; Y:-207.5}Quadrado Am-Transp {Frame 17; X:212.5; Y:-207.5}

Layer d1Quadrado Pto-Am {Frame 10; X:2.5; Y:107.5}Quadrado Am-Transp {Frame 18; X:2.5; Y:107.5}

Layer e2Quadrado Pto-Am {Frame 10; X:107.5; Y:2.5}Quadrado Am-Transp {Frame 18; X:107.5; Y:2.5}

Layer f3Quadrado Pto-Am {Frame 10; X:212.5; Y:-102.5}Quadrado Am-Transp {Frame 18; X:212.5; Y:-102.5}

Layer e1Quadrado Pto-Am {Frame 11; X:107.5; Y:107.5}Quadrado Am-Transp {Frame 18; X:107.5; Y:107.5}

Layer f2Quadrado Pto-Am {Frame 11; X:212.5; Y:2.5}Quadrado Am-Transp {Frame 18; X:212.5; Y:2.5}

Layer f1Quadrado 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 instância do MC “Fade In-Out” que acabamos de criar para a posição X: -312.5 Y:-207.5

Se necessário, 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 análoga você preparará os MCs Animação 02, Animação 03, …, Animação 10.

63. Volte para a cena principal e crie um keyframe no frame 80 da layer 01 (dentro da pasta Animações).

Obs.: se houver algum frame a partir do 80 na layer 00 exclua-os!

64. Arraste uma instância do MC “Animação 01″ para a posição 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.

















82. Arraste uma instância do MC “Animação 10 ” para a posição X:0 Y:0

83. Dê um Ctrl+Enter para testar a animação e pronto.

Para incrementar você pode colocar uma música de fundo, mas se fizer isso, não esqueça de fazer também um Preload, ok?

menu tsunami com XML

Pré-RequisitosMacromedia Flash 8, conhecimento avançado de actionscript, conhecimento da sintaxe XML.

Conteúdo

Menus Tsunami são 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 são muito antigos e não funcionam no Flash 8 porque agora o actionscript está case sensitive. Então esse tutorial é o resultado de uma pesquisa que eu fiz com os menus tsunamis disponíveis na internet. Eu baixei vários, editei e montei meu próprio efeito. Aviso aos navegantes, ele não 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 atenção ao tutorial e um pouco de conhecimento de actionscript, principalmente ter fresquinho na cabeça conceitos de _x, _y, _xscale e _yscale. Vamos lá. Crie um filme 215 x 400 com 30 FPS e insira um retângulo 180 x 340 nas posições 17 x 40 (a parte de cima, vc deixa em branco para colocar o cabeçalho 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 posições 20 x 50 e instancie-o como tsunamiMenu. Nele crie um campo de texto dinâmico com instância 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 (?) necessários. Converta esse texto para um MC chamado itens, intancie com o mesmo nome e deixe-o nas posições 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 posições 0×0, 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:

http://www.rafaelrinaldi.com/

http://www.flashmasters.net/forum/index.php?showtopic=18519&hl=caracteres&st=20

Então. Basicamente isso é tudo que tem pra se fazer no Flash. Agora vamos ao actionscript. Vamos começar 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 ações no MC e não no frame. Esse código calcula os limites do menu e avisa através da variável noLimite se os limites _x e _width do menu estão corretos. Eu usei “sim” e “nao” para deixar o código mais auto-explicativo. Feito isso, vamos para o MC itens, nele nós 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 + 30eval(”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 ações no frame. Como vocês 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 conteúdo dos atributos do XML (no caso text e url). Depois nós duplicamos o MC item e mudamos os seu _y para ficarem um debaixo do outro. Pra finalizar colocamos um efeito rollOver e rollOut nos botões. 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” />

http://www.flashmasters.com.br/forum/index.php?showtopic=15930

http://www.flashmasters.com.br/forum/index.php?showtopic=16436

<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 ações 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);}

Começamos definindo algumas variáveis iniciais como o primeiro Y, ou Y base para todos, o nivel inicial de cores (perceba no swf que há uma mudança de cores). No enterFrame nós criamos uma distancia do Y baseado na diferença entre _ymouse e o _y desse mc. Perceba que existem duas distancias. Isso foi feito para termos uma diferença entre as distâncias, então é aí que entra nosso easing. Depois verificamos se o menu está dentro dos limites (lembra daquelas ações lá em cima). Se estiver, nós colorimos com uma nova cor baseada na distancia de Y. Caso contrário, é porque nós estamos no topo, então voltamos para as configuraçÕes iniciais setadas lá em cima. Além disso, nós aumentamos a _xscale e _yscale do item usando a variável alvoAdd que é a diferença entre o Y atual e o _xscale multiplicado pelo easing. Por fim, colorimos o item com o nível de cor correspondente ao _y. Dessa forma, os itens ficam sempre no mesmo nível de cor, diferenciando apenas a saturação.

É isso aí. Está desvendado um dos grandes mistérios do mundo do flash, de forma simplificada e rápida pra você. Esse tutorial pode ser meio dificil de se entender de primeira, mas repita os passos várias vezes até conseguir, afinal é assim que se aprende.

No próximo artigo: como fazer planos de fundo redimensionáveis no flash? , até lá…

Autor: João Guilherme Ribeiro - Colunista Flash do Portal MXSTUDIO

EFEITO DE TRANSIÇÃO PARA SITES Data de publicação: 10-12-2006

Visitas: 3243

Francisco



EFEITO DE TRANSIÇÃO PARA SITES

Clique no botão para ver a animação

Download do arquivo fonte (inicial)

Obs.: o download do arquivo fonte final pode ser feito através do link ao final desta matéria.

O efeito apresentado acima pode ser utilizado como transição entre seções de seu site.

A maior parte do trabalho para obter um efeito como este não localiza-se no Flash, mas no Photoshop ou outro software de tratamento de imagem, pois a animação é praticamente feita quadro a quadro.

1.Abra o arquivo transicao_inicial.fla que você baixou na sua máquina através do link acima.

Para nos concentrarmos no foco de nossa matéria, a arte e os elementos que serão utilizados neste tutorial já se encontram na Library. Observe também que já estão criadas as layers e seus respectivos nomes.

FUNDO DA PÁGINA

2.Na layer Fundo de Página, clique no frame 70 e tecle F5 para criarmos os frames até esse ponto. A seguir, clique no frame 1 e arraste uma instância do símbolo graphic “fundo da página” para o Stage. Posicione-o em x = 0 e y = 0 no painel Properties.

BOTÕES

3.Na layer “Botão Voltar”, clique no frame 70, tecle F7 para criar um keyframe branco.

4.No menu, navegue até Window > Common Libraries > Buttons e arraste uma instância 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 código:

stop();repetir_btn.onRelease = function () {gotoAndPlay(2);};

6.Na layer “Botão Iniciar “, clique no frame 1, tecle F7 para criar um keyframe branco.

7.No menu, navegue até Window > Common Libraries > Buttons e arraste uma instância 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 código:

stop();iniciar_btn.onRelease = function () {play();};

9.Na layer Logotipo, crie um keyframe no frame 70 e arraste uma instância do LOGO_06 para ele.

10.

Crie um keyframe no frame 70 da layer Conteúdo e com a ferramenta Text Tool (T) digite o seguinte texto:

www.academiadexadrez.com

Mergulhe nessa você também

11.Na layer Volta da página de conteúdo, crie um keyframe no frame 53.

12.Arraste uma instância 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 botão 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 instância 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:




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:




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 instância 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 também entre o 31 e o 53.

29.Crie um keyframe no frame 26 da layer “Splash”, arraste uma instância 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 instância do “som 2″ (configure Repeat como 0).

35.Crie um keyframe no frame 11 da layer “Som do Lançamento da Folha” e arraste para o Stage uma instância 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 instância do “folha01″, configurando como segue:

37.Clique no frame 8 e tecle F7 para criar um keyframe em branco. Arraste uma instância 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 código 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”, “Terça”, “Quarta”, “Quinta”, “Sexta”, “Sábado”);meses = new Array(”Janeiro”, “Fevereiro”, “Março”, “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 Data de publicação: 01-12-2006

Visitas: 2896

Natan D. Alves


http://www.mxstudio.com.br/author/natan/


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 Interação com XML

Criando o XML

Vamos ao XML que conterá nossas as imagens maiores, as menores e seus títulos. Salve como imagens.xml.

<?xml version="1.0" encoding="utf-8"?>

<imagens>

<foto>

<imagemG>imagem.jpg</imagemG>

<imagemP>imagemp.jpg</imagemP>

<texto>Moto Ayrton Senna</texto>

</foto>

<foto>

<imagemG>imagem1.jpg</imagemG>

<imagemP>imagemp1.jpg</imagemP>

<texto>Mclaren do Senna</texto>

</foto>

<foto>



<texto>Capacete Senna</texto>

</foto>

<foto>



<texto>Ferrari Shumacher</texto>

</foto>

<foto>



<texto>Loro</texto>

</foto>

<foto>




<texto>Trator do Sítio</texto>

</foto>

<foto>



<texto>Carroça antiga</texto>

</foto>

</imagens>

Criando nossa Galeria

Vamos criar nossa galeria. Crie o Layout que achar melhor. Comecei com um palco com dimenções de 550×550. A disposição das camadas será essa:

Os nomes em vermelho são as instancias dos objetos:

holder: MovieClip em branco, posicione na camada Conteúdopreloader: MovieClip, posicione na Camada Conteúdoporcento: Campo de texto dinâmico, posicione na Camada Conteúdoborda: MovieClip, posicione na Camada Conteúdorecebe: MovieClip em branco, posicione na Camada Recebemascara: MovieClip, posicione na Camada MáscarascrollBar: Componente criado, posicione na Camada ScrollBartexto: Campo de texto dinâmico, posicione na Camada Conteúdo

Uma coisa muito importante. O MovieClip borda, precisa ter seu ponto de registro no meio. Como na imagem:

Vocês devem estar se perguntando. Que ScrollBar é esse. Esse ScrollBar foi criado por um de nossos Colunistas, Hugo Ferreira da Silva. Nós vamos seguir as mesmas regras de criação dos MovieClips. Para os que não conhecem ou não 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 código para que o Scroll funcione na horizontal. Substitua os códigos dele por esse:

import mx.transitions.Tween;

import mx.transitions.easing.*;

/* Coloca no tamanho normal */

_xscale = _yscale=100;

/* Pode ser um movieclip ou um textfield */

var alvo = _parent[alvo];

/* Posição inicial do movieclip em y */

var sy:Number = alvo._x;

/* Altera o tamanho da barra */

track._width = track_width;

/* Tira a maozinha dos botões */

pan.useHandCursor = track.useHandCursor=false;

/* Mínimo em _y q o pan pode ir */

var miny:Number = Math.round(track._x);

/* Máximo em _y q o pan pode ir */

var maxy:Number = Math.round(track._x+track._width-pan._width);

/* Quando pressionar o pan */

pan.onPress = function() {

/* Inicia o arrastamento */

startDrag(this, false, miny, this._y, maxy, this._y);

};

/* Quando soltar o mouse */

pan.onRelease = pan.onReleaseOutside=function () {

/* para o arrastamento */

stopDrag();

};

/* Quando precionar o track */

track.onPress = function() {

/* Move o pan */

pan._x = _xmouse-pan._width/2;

/* Se o pan passar do valor máximo volta para o máximo */

if (pan._x>=maxy) {

pan._x = maxy;

}

/* Se o pan passar do valor mínimo volta para o mínimo */

if (pan._x<=miny) {

pan._x = miny;

}

};


/* Quando precionar o btn_esq */

bt_esq.onPress = function() {

esquerda = true;

direita = false;

};

/* Quando soltar o btn_esq */

bt_esq.onRelease = bt_esqu.onReleaseOutside=function () {

esquerda = false;

direita = false;

};

/* Quando precionar o bt_dir */

bt_dir.onPress = function() {

esquerda = false;

direita = true;

};

/* Quando soltar o btn_dir */

bt_dir.onRelease = bt_dir.onReleaseOutside=function () {

esquerda = false;

direita = false;

};

/* Cria o onEnterFrame */

this.onEnterFrame = function() {

if (esquerda) {

/* Se não estiver a ponto de ir além do que pode */

if (pan._x-1>miny) {

pan._x -= 10;

} else {

pan._x = miny;

}

}

/* Se estiver descendo */

if (direita) {

/* Se não estiver a ponto de ir além do que pode */

if (pan._x+1<maxy) {

pan._x += 10;

} else {

pan._x = maxy;

}

}

var s:Number = ((pan._x-miny)/(maxy-miny))*100;

var p:Number = (alvo._width-mascara)/100;

/* Move o objeto */

var twScrool:Tween = new Tween(alvo, "_x", Back.easeOut, alvo._x, sy-(p*s), 0.8,

true);

};

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, então devo deixar o campo Altura da Mascara com o tamanho do ScrollBar. O campo Alvo preenchemos com o MovieClip que queremos que faça o scroll, e Altura da Barra, pode até deixar em branco que não vai influenciar em nada para nós. Falta criarmos um MovieClip que vai receber as imagens pequenas:

alvo: MovieClip em branco, posicione na camada alvobarra: MovieClip, posicione na camada barra

Com nossos MovieClips e ScrollBar criados e instanciados vamos ao ActionScript. Coloquem isso no

primeiro frame na camada Actions:

/* Importamos a Classe Tween */

import mx.transitions.Tween;

import mx.transitions.easing.*;

/* Variável para saber se carregou */

var carregado:Boolean = false;

/* Criamos uma variável para o MovieClipLoader para as fotos maiores */

var meuMCL:MovieClipLoader = new MovieClipLoader();

/* Outra variável para o MovieClipLoader esse é para as fotos menores */

var pequenoMCL:MovieClipLoader = new MovieClipLoader();

/* Criamos um Listener para o MovieClipLoader */

var meuListener:Object = new Object();

/* Outro Listener */

var pequenoListener:Object = new Object();

/* Criamos uma variável para o XML */

var dadosXML:XML = new XML();

/* Ignoramos os espaços em branco */

dadosXML.ignoreWhite = true;

/* Carregamos o XML */

dadosXML.load("imagens.xml");

/* Quando o XML for carregado */

dadosXML.onLoad = function(ok) {

/* Se não teve erro */

if (ok) {

/* Dizemos qual é o primeiro Nó */

xmlNode = this.firstChild;

/* Criamos uma variável para o total de itens no XML */

total = xmlNode.childNodes.length;

/* Chamamos a função montaPequeno() */

montaPequeno();

/* Chamamos a função carregaImagem chamando a primeira imagem */

carregaImagem(0, 0);

} else {

/* Exibimos uma mensagem de erro caso não carregue o XML */

mensagem.text = "Erro ao Carregar o arquivo XML";

}

};

/* Função monta pequeno */

function montaPequeno() {

/* Variável para posicionar o MovieClip */

var inicio = 0;

/* Criamos um for para cada item do XML */

for (var i = 0; i<total; i++) {

/* Chamamos o MovieClip pequeno */

var mc:MovieClip = recebe.attachMovie("pequeno", "pequeno"+i,

recebe.getNextHighestDepth());

/* Pocisionamos ele */

mc._x = inicio*mc._width+inicio*10;

/* Incrementamos inicio */

inicio++;

/* Carregamos a imagem pequena */

pequenoMCL.loadClip(xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue,

mc.alvo);

/* Deixamos o MovieClip barra com _yscale igual a 0 */

mc.barra._yscale = 0;

/* Pegamos a imagem */

mc.bt.imagem = i;

/* Pegamos a legenda */

mc.bt.legenda = i;

/* Ao pressionar do da Imagem Pequena */

mc.bt.onPress = function() {

/* Se a variável carregado for igual a true */

if (carregado == true) {

/* Carregamos a Imagem selecionada */

carregaImagem(this.imagem, this.legenda);

/* Carregado igual a falso */

carregado = false;

/* Apagamos o texto */

texto.text = "";

}

};

}

/* Verificamos se o ScrollBar é menor que o MovieClip recebe */

if (recebe._width<=scrollBar._width) {

scrollBar.unloadMovie();

}

}

/* Usamos o Listener para saber o progresso do Carregamento */

pequenoListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {

/* Criamos uma variável para saber o quanto carregou */

var carregados:Number = Math.round(loadedBytes/totalBytes*100);

/* Deixamos o MovieClip barra com _yscale igual a variável carregado */

target_mc._parent.barra._yscale = carregados;

};

/* Função para carregar a Imagem grande */

function carregaImagem(arquivo, txt) {

/* Deixamos o MovieClip preloader com _xscale igual a zero */

preloader._xscale = 0;

/* Deixamos o MovieClip preloader visível */

preloader._visible = true;

/* Descarregamos qualquer conteúdo que esteja no MovieClip holder */

holder.unloadMovie();

/* Deixamos o MovieClip holder com alpha igual a zero */

holder._alpha = 0;

/* Carregamos a imagem maior selecionada */

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

holder);

/* Usamos o Listener para saber o progresso do carregamento */

meuListener.onLoadProgress = function(alvo:Object, bLoad:Number, bTotal:Number) {

/* Criamos uma variável para saber quanto carregou */

var porcentagem:Number = Math.round(bLoad/bTotal*100);

/* Mostramos o quanto carregou */

porcento.text = porcentagem+"%";

/* Deixamos o MovieClip preloader com o mesmo _xscale do carregameto */

preloader._xscale = porcentagem;

};

/* Quando terminar de carregar */

meuListener.onLoadInit = function() {

/* Para usar a Classe Tween temos que criar variáveis */

/* Aqui iremos aumentar o MovieClip borda para o mesmo tamanho do MovieClip holder

mais 16

para poder fazer uma borda */

var tww:Tween = new Tween(borda, "_width", Back.easeOut, borda._width,

holder._width+16, 1, true);

/* Aqui iremos aumentar o MovieClip borda para o mesmo tamanho do MovieClip holder

mais 16

para poder fazer uma borda */

var twh:Tween = new Tween(borda, "_height", Back.easeOut, borda._height,

holder._height+16, 1, true);

/* Aqui movemos o MovieClip holder */

var twhx:Tween = new Tween(holder, "_x", Back.easeOut, holder._x, borda._x-

holder._width/2, 1, true);

/* Aqui movemos o MovieClip holder */

var twhx:Tween = new Tween(holder, "_y", Back.easeOut, holder._y, borda._y-

holder._height/2, 1, true);

/* Movemos o MovieClip mascara */

var twma:Tween = new Tween(mascara, "_y", Back.easeOut, mascara._y,

(borda._y+holder._height/2)+16, 1, true);

/* Movemos o MovieClip recebe */

var twr:Tween = new Tween(recebe, "_y", Back.easeOut, recebe._y,

(borda._y+holder._height/2)+16, 1, true);

/* Movemos o ScrollBar */

var twsP:Tween = new Tween(scrollBar, "_y", Back.easeOut, scrollBar._y,

(borda._y+holder._height/2)+recebe._height+22, 1, true);

/* Movemos o campo de texto */

var twtxt:Tween = new Tween(texto, "_y", Back.easeOut, texto._y,

(borda._y+holder._height/2)+recebe._height+47, 1, true);

/* Mostramos o texto */

texto.text = xmlNode.childNodes[txt].childNodes[2].firstChild.nodeValue;

/* Quando a variavel twhx acabar de se mover */

twhx.onMotionFinished = function() {

/* Deixamos o MovieClip preloader invisivel */

preloader._visible = false;

/* Apagamos o texto do campo de texto porcento */

porcento.text = "";

/* Aqui deixamos o MovieClip holder ficar com alpha igual a 100 */

var twha:Tween = new Tween(holder, "_alpha", Regular.easeOut, 0, 100, 0.6, true);

/* Quando a variavel twha acabar */

twha.onMotionFinished = function() {

/* Deixamos a variável carregado igual a true */

carregado = true;

};

};

};

}

/* Adicionamos um Listener ao MovieClipLoader */

meuMCL.addListener(meuListener);

/* Adicionamos um Listener ao MovieClipLoader */

pequenoMCL.addListener(pequenoListener);

Aqui um exemplo da Galeria funcionando


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 rápida e mais bonitas.


Um abraço a todos e até a próxima

ROLAGEM DE IMAGENS Data de publicação: 01-07-2006

Visitas: 3098


http://www.natanalves.com/mx/imagens2.html

Francisco



ROLAGEM DE IMAGENSAprenderemos a construir um slider de imagens que faz com que as mesmas rolem para esquerda ou direita de acordo com a posição do mouse.

O tutorial está dividido em tarefas para que a compreensão fique mais fácil.

Criando um botão invisível

1. Crie um novo documento Flash com as dimensões 350px x 180px.

2. Preparemos os botões invisíveis que utilizaremos sobre as imagens. No menu, navegue até Insert > New Symbol (Ctrl + F8) para criarmos um novo símbolo Button. Configure como segue e clique no boão OK:

Name: Botão InvisívelType: Button

3. Crie um Keyframe no Hit (tecle F7 após clcar sobre o frame do Hit).

http://www.mxstudio.com.br/author/francisco/

4. Desenhe um quadrado de 90 x 90 e centralize-o (só com preenchimento, sem contorno).

5. Clique no link Scene 1 para voltar à edição do documento principal.

.: Criando o efeito MouseOver (contorno)

6. Crie um novo símbolo de MovieClip (MC) e nomeie-o como MouseOver contorno.Obs.: não esqueça de que agora o Type é Movie clip!

7. Com a Rectangle Tool (R), desenhe um quadrado de 90×90, 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 símbolo de MovieClip (MC) e nomeie-o como MouseOver preenchimento .Obs.: não esqueça de que o Type é Movie clip!

9. Com a Rectangle Tool (R), desenhe um quadrado de 90×90, 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 símbolo de MovieClip (MC) e nomeie-o como MouseOver01Obs.: não esqueça de que o Type é Movie clip!

11. Crie mais três layers para que fique com quatro no total e nomeie-as como: AS, Botão Invisível, MouseOver (contorno) e MouseOver (preenchimento).

12. Clique no primeiro frame da layer Botão Invisível e arraste uma instância do Botão Invisível 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 instância 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 idêntico 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 botão direito do mouse e escolha, no menu de contexto, a opção 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 instância 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 idêntico 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 botão direito do mouse e escolha, no menu de contexto, a opção 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 código:

stop();

26. Crie um keyframe no frame 30 da layer AS e digite o código:

gotoAndStop(1);

27. Na layer Botão Invisível, clique no frame 15 e insira um keyframe (tecle F6).

28. Clique novamente no frame 1 da mesma layer e a seguir sobre a instância Botão Invisível no Stage.

29. Abra o painel Actions (F9) e digite o seguinte código:

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 instância Botão Invisível no Stage.

31. Abra o painel Actions (F9) e digite o seguinte código:

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 botão 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 são 13 as imagens que vamos trabalhar neste projeto).

Obs.: não esqueça de mudar os códigos nos Botões Invisíveis (frame 1 e frame 15)alterando os valores de _root.nomeImagem para os rótulos correspondentes (Imagem 2, Imagem 3, etc.)

.: Montagem do “Menu de Imagens”

30. Importe as 13 imagens que serão usadas para a Library (File > Import > Import to Library…)

Dica: procure trabalhar com imagens com as mesmas dimensões (largura e altura). As imagens usadas neste tutorial já estão preparadas para que você economize tempo, faça o download dos arquivos da matéria.

31. No menu, navegue até Insert > New Symbol (Ctrl + F8) para criarmos um novo símbolo de Movie Clip. Configure como segue e clique no boão OK:

Name: MenuFotosType: Movie clip

32. Posicione as 13 imagens uma ao lado da outra (sugestão: coloque a primeira na posição 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 botão direito do mouse sobre uma delas e no menu de contexto, opte por Distribute to layers para que cada uma fique em sua própria layer. Exclua a layer excedente (sem conteúdo).

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 instância do MC MouseOver01 da Library para o Stage.

36. No painel properties configure as seguintes propriedades:

W: 128H: 85X: 0.0Y: -43

Com essas configurações posicionamos e redimensionamos o MouseOver01 de maneira que se sobrepõe totalmente sobre a primeira imagem.

37. Siga o procedimento análogo 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 Dinâmico e Título.

39. Clique no primeiro frame da layer Menu de Fotos, arraste uma instância do MC MenuFotos da Library para o Stage e configure as propriedades como segue no painel properties:

nome da instância: mcMenuFotosX: 0.2Y: 12.6

40. Clique no primeiro frame da layer Texto Dinâmico e a seguir na Text Tool (T) e insira um Dynamic Text com as seguintes propriedades:

W: 242.0H: 35.0X: 55.0Y: 105.0

Var: nomeImagem

41. Clique no primeiro frame da layer Título e a seguir na Text Tool (T) e insira um Static Text tomando o cuidado de usar números 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 código:

// Evita o redimensionamentofscommand (”allowscale”, “false”);// Evita o menu de contexto, exceto os itens Settings e About Flash Playerfscommand (”showmenu”, “false”);// Força o tamanho original, sem tela cheiafscommand (”fullscreen”, “false”);xMenu = 0;//constantes usada para velocidadevel1 = 350;vel2 = 10;//use como largura o tamanho total do Menu Fotos somado com 4largura = 1668;nomeImagem = ‘Onde os Reis se encontram’;

// Flag, 1 significa menu em movimento; 0 significa menu paradorolaMenu = 1;

43. Crie um keyframe no frame 2 da mesma layer e insira o código:

//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;}}


if (xMenu > 0) {xMenu = 0;}if (xMenu < -(largura - vel1)) {xMenu = -(largura - vel1);}

setProperty (”mcMenuFotos”, _x, xMenu);


gotoAndPlay(2);

46. Clique no frame 5 da layer Menu de Fotos, segure a tecla Shift e clique no frame 5 da layer Título. Com isso selecionamos um conjunto de frames. Tecle F5 para criar frames simples em todas as layers selecionadas

Flash Vídeo - Media Components

Coluna Flash - Flash Vídeo - Media Components

Flash Platform - Developing a Simple Rich Media PlayerDesenvolvendo um Simples Tocador de Vídeo em Flash 8

Introdução

Estaremos definindo neste artigo algo mais concreto sobre Flash 8 e vídeo, mídia rica que nenhum outro pode propor, tanto em facilidade de desenvolvimento como retorno em menor prazo.

Pré-Requisitos

Este artigo pede um conhecimento básico de ActionScript, mas é necessário ter uma familiaridade com o Flash.

Objetivo

Definir o uso de Flash Vídeo com e sem servidor, utilizando novos componentes providos junto ao Flash 8.

Conceitos

O Flash 8 trabalha diferentemente dos seus antecessores com vídeo, nesta versão qualquer um pode trabalhar com download progressivo de maneira profissional. No momento da importação o Flash já nos traz a opção desse tipo de uso com vídeo, mas não entrarei em detalhes sobre isso aqui.

Estaremos utilizando o formato .flv nos vídeos que é o único formato real de vídeo no Flash.A vantagem de se utilizar esse formato, é que a Frame Rate do vídeo pode ser diferente a do seu filme principal, além da distribuição externa de arquivos, é claro. Mas a principal vantagem que considero é a possibilidade de streaming real, que na versão MX só era possível com o Macromedia Flash Communication Server, como as actions netConnection e netStream. Não vamos esquecer que o Flash 8 suporta vídeo com canal Alpha e filtros aplicados dentro do próprio Flash!

Mas, o que e Streaming? Streaming e a distribuição em tempo real de vídeo 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 vídeo Streaming Service). A buferização é usada para armazenar dados, antes que o streaming comece a tocar ou continue tocando.Vídeos digitais são codificados e decodificados usando um CODEC (CODEC=COmpression (compressão) / DECompression (descompressão)). V ídeos e áudios utilizam diferentes CODECs, mas são compilados dentro de um único arquivo, o player precisa do mesmo CODEC para que possa ser assistido.

Então a vantagem do Flash 8. A nova versão já traz consigo o Macromedia Flash 8 vídeo Encoder que converte AVI, MOV, WMV, DV, MPEG em FLV, neste caso o cliente necessita apenas do mesmo Flash Player para visualizar esse conteúdo rico.Algumas das vantagens que a Macromedia traz com o Flash:

Nenhum JavaScript complexo e requerido; Não necessita de checagem de plataforma; Não necessita de pop up; Rápida buferização e play 100% de controle sobre o player ; O player é facilmente controlado com ActionScript; Player 100% customizável; Captura de vídeo (fire-wire cameras, USB cameras, microfones);

Agora que conhecemos uma leve camada superficial sobre vídeo e alguns conceitos, vamos desenvolver um mini player

Conteúdo

No Macromedia Flash 8, num novo Flash Document:

Já iremos criar as layers que iremos trabalhar, algumas boas convenções a serem seguidas:

A layer do topo deve ser a de ActionScript, uso o nome as; Layers nunca são chamadas por actions, logo o nome descritivo deve sempre ser alterado de forma

que fique fácil de entender, não importando espaços e acentuações; Layers que não são usadas em tempo de execução 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).Também criaremos mais três 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 métodos dos componentes mais facilmente.Através das actions abaixo vamos dizer ao Flash qual filme chamar:

1. _playback.contentPath = “sampleFLV/video.flv”;

Note que no contentPath, coloquei o vídeo em uma pasta separada, de nome sampleFLV. Isso adota uma prática importante de organização 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 terão os nomes de instâncias _filmes e _capitulos.Dentro do componente _filmes vamos editar seus labels e datas, que nada mais são que respectivamente rótulos e dados que serão armazenados, onde no caso de filmes, labels guardará os nomes descritivos dos filmes e data o endereço dos filmes.Para o componente _capitulos, iremos armazenar nomes descritivos para os capítulos do filme correspondente e em data armazenaremos o tempo que corresponde a entrada do capítulo, por exemplo 5 (5 segundos).

As configurações para _filmes são:

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 navegação, podemos editar formas e cores personalizadas, como acontecia com os componentes UI na versão 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 execução:

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 dimensionável a partir da esquerda*/4. texto.autoSize = “left”;5. /*O texto não será selecionável*/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 = 0×990000;17. /*Sublinhado*/18. estilo.underline = true;

Agora que já temos nosso texto precisamos adicionar eventos e conforme a ocorrência 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 genérico que fica prestando atenção 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 filme3. texto.text = “Tempo total: “+_playback.totalTime;4. //Aplica o estilo ao texto5. texto.setTextFormat(estilo);6. };7. ouvidor.stateChange = function():Void {8. //Exibe o estado do filme, como por exemplo tocando, pausado, etc9. texto.text = _playback.state;10. //Aplica o estilo ao texto11. texto.setTextFormat(estilo);12. };

Aplicando agora o objeto ouvidor ao componente utilizado:

1. _playback.addEventListener(”ready”, ouvidor);2. _playback.addEventListener(”stateChange”, ouvidor);

Nosso código 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 texto11. var texto:TextField = _root.createTextField(”info”, _root.getNextHighestDepth(), 11, 340, 0, 0);12. //O texto será auto dimensionável a partir da esquerda13. texto.autoSize = “left”;14. //O texto não será selecionável15. texto.selectable = false;16. //Estamos criando o estilo para o campo de texto17. var estilo:TextFormat = new TextFormat();18. //Fonte19. estilo.font = “Verdana”;20. //Tamanho21. estilo.size = 12;22. //Negrito23. estilo.bold = true;24. //Cor do texto25. estilo.color = 0×990000;26. //Sublinhado27. estilo.underline = true;

28. var ouvidor:Object = new Object();29. ouvidor.ready = function():Void {30. //Exibe o tempo total do filme31. texto.text = “Tempo total: “+_playback.totalTime;32. //Aplica o estilo ao texto33. texto.setTextFormat(estilo);34. };35. ouvidor.stateChange = function():Void {36. //Exibe o estado do filme, como por exemplo tocando, pausado, etc37. texto.text = _playback.state;38. //Aplica o estilo ao texto39. texto.setTextFormat(estilo);40. };41. _playback.addEventListener(”ready”, ouvidor);42. _playback.addEventListener(”stateChange”, ouvidor);


O uso direto de filtros no vídeo não é permitido, para isso transforme o vídeo em MovieClip e aplique filtros e Blend Modes como desejar, só não esqueça de mudar na ActionScript a referência ao objeto.

FLASH - Banner expansível

Montando a estrutura do BannerPrimeiro 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 posição _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 animação, a suas camadas devem ficar dessa forma:

No primeiro frame da camada “Base Azul”, você tem o MovieClip na posição atual de _X = 0.0 e _Y = -231.4, no frame “20″ você deve colocar a posição 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 posição de _X 44.0 e _Y = 137.9e depois clique no frame 35 e coloque na posição _X = 44.0 e _Y = 387.9, agora crie a animação, feito isso clique novamente no frame 20 da camada “Texto” e configure da seguinte forma:

Agora na camada Action você coloca a ação de stop().

vamos voltar a tela principal do nosso banner e vamos criar um botão 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 animação no primeiro Frame2. stop();3. // declarando o MovieClip ativa4. var ativa:MovieClip;5. // Quando passar o Mouse sobre6. ativa.onRollOver = function() {7. // Criar uma instancia de OnEnterFrame sobre o MovieClip tela8. _root.tela.onEnterFrame = function() {9. // Avançar um Frame10. _root.tela.nextFrame();11. // se o frame atual for igual ao Frame total12. if (this._currentframe == this._totalframes) {13. // deletar a instancia de onEnterFrame14. delete this.onEnterFrame;15. }16. };17. };18. // Quando retirar o Mouse19. ativa.onRollOut = function() {20. // Criar uma instancia de OnEnterFrame sobre o MovieClip tela21. _root.tela.onEnterFrame = function() {22. // Retrocede um Frame23. _root.tela.prevFrame();24. // se o frame atual for igual a 125. if (this._currentframe == 1) {26. // deleta a instancia de onEnterFrame27. delete this.onEnterFrame;28. }29. };

30. };

Conhecendo o Flash 8 - Parte 1Nessa primeira parte da série de artigos sobre o Flash 8, estarei mostrando quais foram as novidades visuais da nova ferramenta. Veremos a nova disposição de alguns painéis, as mudanças com ferramentas e a nova opção de publicação Device voltada para emular dispositivos móveis.

Vamos começar exatamente pelo começo. Como assim pelo começo? Pela tela de boas vindas:

1 - Menu para abrir arquivos recentemente utilizados.2 - Menu de criação com tipos de arquivos pré-estabelecidos.3 - Menu de criação com base em Templates com novas opções para portáteis.4 - Área de informações de ajuda assim e links úteis no site da Macromedia.

Vamos agora analisar as mudanças na interface do Flash:

1 - Alteração na posição das ferramentas Free Transform e Fill Transform.2 - Botão específico para mostrar/ocultar a Timeline.3 - Abas para painéis com mais de uma opção, Properties e Align, por exemplo.4 - Nova opção de publicação específica para Portáteis.

Vamos dar uma olhada agora nas novidades das ferramentas, nesse caso da ferramenta Line:

1 - Novas opções 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 opção de gradiente em linhas:

No Flash 8 nós temos uma nova opção para as ferramentas de desenho (Line, Pen, Oval, Rectangle, Pencil e Brush), seu nome é Object Drawing:

1 - Com a opção 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 também vem com suas novidades:

1 - Agora temos “pontos de edição” que nos possibilitam modificar o tamanho do campo de texto sem redimensionar o texto ao mesmo tempo, de forma semelhante a que usávamos 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 opção de publicação, o menu Device.Esse menu é voltado especificamente a publicação de conteúdo para portéteis, para isso temos como premissa básica a versão Lite do Flash Player

Nesse menu temos opções para escolher o tipo de conteúdo (Standalone Player, Browser…) e o aparelho com o qual o iremos fazer a emulação.

Aqui temos a emulação de um Nokia N-Gage rodando conteúdo para Standalone Player.

Talvez a primeira certeza que temos quando analisamos o Flash 8 é que as principais novidades são referentes a parte visual, seja em ferramentas seja em efeitos. Outra constatação é ver o empenho da Macromedia em possibilitar um desenvolvimento para portáteis muito mais completo.

Sem sombra de dúvidas essa versão do Flash será de longe a melhor ferramenta de desenvolvimento interativo para Web, proporcionado riqueza tanto na experiência do usuário quanto na diversidades de dispositivos a que se tem suporte no processo de criação.

Espero que todos tenham aproveitado esse artigo, visei mostrar os principais novidades do Flash 8 fora os tão esperados Filtros, assunto do nosso próximo artigo.

Um abraço a todos e eventuais dúvidas postem no fórum.

Danilo SantanaAdministrador do Portal MXSTUDIOModerador de Flash & ActionScript

Conhecendo o Flash 8 - Parte 2 (Filtros) Nessa segunda parte da série de artigos sobre o Flash 8, vou mostrar para vocês a novidade mais esperada pela maioria dos desginers, a utilização de Filtros.

Como esse artigo destina-se a explicar de forma sucinta os apectos gerais, não vou fazer um how to nem me aprofundar no que cada filtro faz.

De início temos de saber onde e como podemos usar os filtros. O painel Filtros foi criado como “filho” do painel Properties e tem como opções principais: Drop Shadow, Blur, Glow e Bevel.

Nós só podemos inserir filtros em objetos que possam ser referenciados por programação, ou seja, Movie Clips e Buttons.

Não existe limitação quanto a se aplicar os filtros separadamente, na figura abaixo vocês podem ver que foram aplicados dois filtros ao mesmo tempo:

1 - Objeto do tipo Movie Clip selecionado.2 - Aba Filtros e a relação dos filtros aplicados. No caso Drop Shadow e Blur.3 - Com um filtro selecionado, abre-se as Opções de Manipulação desse filtro.

Durante a elaboração desse artigo pensei na melhor forma de mostrar o que realmente se pode fazer usando de forma sensata alguns filtros.

Cheguei a conclusão que a solução era criar uma aplicação usando filtros, mas como iria se tratar puramente de elementos visuais, preferi utilizar um arquivo de exemplo do próprio 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 colisões de bolas.

Abaixo capturei uma imagem que mostra a aplicação de filtros em uma das bolas durante a animação:

1 - Movie Clip bola selecionado.2 - Aplicação e manipulação de Filtros.

Vocês 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 favoráveis para a utilização de filtros está na liberdade na forma de criá-lo e manipulá-lo.

Nós podemos fazer isso de duas formas:

1ª Utilizando a aba Filters no painel Properties como ilustrado anteriormente.

2ª Fazendo-se uso de programação.

No caso da segunda opção, 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 várias alterações como a inserção dos controles de Glow e retirada do carregamento de imagens:

Nesse exemplo manipulamos dinamicamente a aplicação dos filtros, basta marcar o filtro desejado e alterar os parâmetros 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 mínimo 2 diriam que os filtros são a novidade mais empolgante.

Agora podem estar certos de que esses novos recursos serão usados a exaustão, e isso fatidicamente nos levará a trabalhos que irão abusar de filtros e efeitos, cabe a nós termos o bom senso para uma criação sensata e equilibrada.

Para aqueles que ainda não usam o Flash 8 eu deixo o recado: Baixem o Trial, façam seus testes e criem cada vez mais experiências agradáveis para o usuário.

Espero que todos tenham aproveitado as informações e até o próximo artigo que irá tratar das incríveis melhorias de vídeo no Flash 8.

Peço que eventuais dúvidas sejam postadas no fórum.


Conhecendo o Flash 8 - Parte 3 (Video)Olá pessoal!

Finalizando essa série sobre os novos aspectos do Flash 8 eu vou falar sobre as melhorias que firmam a

Plataforma Flash como a melhor solução para video na Web.

A melhor forma de compreender as melhorias é fazer um exemplo, pensando nisso procurei um video que facilitasse a exemplificação desses novos recursos.

Um filme não muito grande mas com video e audio. Optei por um filme com 4.818 KB mostrando as peripércias de um jogador comum de futebol.

Antes de começarmos a trabalhar, vou dar um panorâma sobre o uso de video no Flash e suas novidades para a versão 8.

Para aqueles que nunca trabalharam com video no Flash aqui vai uma pequena explicação sobre as formas de se dispor vídeo para a Web através dele:

SWF - Importação do vídeo dentro do seu documento e publicação em SWF.>>>> Além de ser fácil, não requer softwares adicionais.

FLV - Carregamento do arquivo FLV durante a exibição do seu conteúdo (Download Progressivo).>>>> Além de servir como “falso streaming”, nos possibilita o uso de cue points e de vídeos maiores.

FCS - Carregamento no servidor de streaming (Flash Communication Server).>>>> Possibilita controle do streaming assim como detecção de banda e conexões simultâneas.

Nesse artigo vamos ver a segunda opção, o uso de arquivos FLVs carregados do servidor e exibidos em um player no nosso SWF.

Agora que vocês já sabem quais são as formas de se trabalhar com vídeo no Flash, vou lhes contar as novidades que a nova versão trouxe.

Primeiramente nós temos o Flash 8 Video Encoder, uma ferramenta que nos possibilita gerar nossos FLVs de forma rápida e fácil. Ele vem junto com o Flash e pode ou não 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 vídeo, o On2 VP6 que é o núcleo dessa revolução de vídeo no Flash 8.

Com o VP6 conseguimos compactações incríveis, mas vou mostrar isso mais adiante.

Agora chega de explicações e vamos botar a mão na massa.

Nosso primeiro passo será coverter o vídeo WMV em FLV utilizando o Flash 8 Video Encoder.

Com o Flash 8 e seu Encoder instalados, vocês podem abrí-lo na pasta Macromedia do menu Iniciar.

1 - Botão Add para selecionar com quais arquivos iremos trabalhar.2 - Descrição do arquivo adicionado como caminho absoluto, configuração de compactação e status.3 - Botão Settings para as configurações de compactação.

Depois de adicionar o vídeo ao Encoder, selecionem Settings para fazer as configurações necessárias.

1 - Escolha da configuração de codificação.2 - Botão Show/Hide Advanced Settings nos mostra mais opções para a codificação.3 - Opções de vídeo como qualidade e codec a ser utilizado.

Selecionando a aba Cue Points, podemos definir esses pontos que servem como capítulos em nosso vídeo:

1 - Aba Cue Points.2 - Botões para adição e remoção de cue points.3 - Linha do tempo do vídeo para delimitação dos cue points.4 - Cue Point sendo adicionado e configurado.

Clicando em OK, resta agora iniciar a compactação:

1 - Botão Start/Stop Queue.2 - Informações referentes ao arquivo de entrada, o de saída e dados sobre a compactação.3 - Demonstrativo de progressão e tempo estimado de término.

Com a conclusão da compactação resta-nos saber qual foi a diferença de tamanho do WMV para o FLV. No caso como eu configurei para que o vídeo ficasse um pouco mais “modesto”, chegamos ao incrível valor de 2.330 KB no nosso FLV.

A redução foi de mais de 50% e vale dizer que eu poderia ter sido ainda mais rigoroso nas configurações de compactação.

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, específico para reproduções de FLV na versão 8.2 - Arraste o componente para o palco.3 - Abra o painel Component Inspector na aba Parameters. 4 - No parâmetro contentPath referencie o arquivo FLV a ser carregado (recomendo que ele esteja na mesma pasta).

Se vocês publicarem o vídeo já será exibido mas sem nenhum controle dos quais estamos acostumados, logo, vamos inserir controles de vídeo como volume, play e stop além de botões para navegação dos capítulos:

1 - Selecione o parâmetro 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 aplicação 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 exibição para aplicar os elementos visuais que você escolheu.

Pronto tendo um FLV já gerado, em menos de 5 minutos você cria uma aplicação para reproduzí-lo através de download progressivo.

Difícil?! Creio que nem um pouco e com os devidos testes e exemplos tenho certeza que todos os interessados estarão aptos a criar esse tipo de conteúdo de forma rápida, fácil e sem maiores dores de cabeça.

Abaixo vocês podem visualizar o arquivo que criei para esse artigo, lembrem-se esse vídeo 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 não é nada hoje em dia. E pensar que eu li há alguns dias que um provedor já fornece 100 mbps no Japão…

A propósito, o vídeo tem 1:54 min e mais uma vez eu afirmo: 2.330 KB!!

Espero que ter desmistificado possíveis dificuldades na criação e visualização de arquivos FLVs pelo Flash além de ter apresentado nosso poderoso Video Encoder e seus FLVs.

Façam seus testes e espero em breve ver várias aplicações utilizando esses recursos tão valiosos.

Em caso de dúvidas utilizem nossos fóruns.


Danilo SantanaAdministrador do Portal MXSTUDIOModerador de Flash & ActionScript

Seqüencial Preloader - Porcentagem Data de publicação: 02-09-2005

Visitas: 2872

Renan Fretta



Neste artigo explicarei como criar um preloader com porcentagem.

Vamos direto a prática1) 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 dinâmico no primeiro quadro da camada Preloader, associe a váriavel pct, como mostra a imagem abaixo.

6) Com o campo de texto selecionado, tecle F8. Selecione a opção Movie Clip e o Registration do Centro. Clique no botão OK.

7) Com o Movie Clip selecionado, instancie de preloader.

Agora crie o arquivo preloader.as e coloque-o no mesmo diretório 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 simulação de download, clique no menu View >>> Download Settings e escolha a velocidade de download.

Seqüencial Preloader - Barra de Progresso Neste artigo explicarei como criar um preloader com a barra de progresso, para isso é necessário que você tenha em mãos os arquivos do artigo anterior: Seqüencial Preloader - Porcentagem.

Vamos direto a prática

1) Abra o arquivo Principal.fla.

2) Abra o Movie Clip Preloader. Crie a camada Contorno e Barra. Na camada barra desenhe um retângulo 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 MovieClipvar numero:Number = new Number(0);// Variável numero iniciada com o valor 0function Init() {// Função Init_root.stop();// Para o filmeonEnterFrame = function () {// Ao entrar no quadro executar a funçãovar bl:Number = _root.getBytesLoaded();// bl recebe os bytes carregadosvar bt:Number = _root.getBytesTotal();// bt recebe os bytes totaisif (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 totaisdelete onEnterFrame;// Destrói o evento EnterFrame_root.nextFrame();// Vá para o próximo quadropreloader.unloadMovie();// Destrói o MovieClip preloader da memória} else {// Senãonumero = Math.floor(bl/bt*100);// A variável numero vai receber o arredondamento dos bytes carregados divididos pelos bytes total multiplicados por 100preloader.pct = numero+’%';// O campo dinâmico vai receber a variável numero mais o caracter %preloader.barra._width = numero;// O tamanho da barra será o valor da variável número}};}Init();// Chamamos a função Init

Usando Movieclips como Mascaras Efeitos interessantes usando Máscaras,

Todos nós sabemos da maravilha que é a máscara no Flash, hoje vamos explorar um pouco a idéia de se usar esse recurso usando movieclips como máscaras.

Para fazer esse tutorial é fácil, precisaremos apenas de 3 imagens com o mesmo tamanho.

Preparando o trabalho:

Começando 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.

Começando:

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 animação 1, marcar a opção “movie clip” e clicar em “OK”, então 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 posições 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 opção 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 navegação 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 várias cópias desse retangulo até que ele cubra toda a imagem, muito cuidado para não ficar nenhum espaço entre eles:

Certo:

Errado:

Notem que na figura acima os movieclips dos retangulos não cobriram direito a imagem pois há alguns espaços entre eles, então deixem bem encostados para não dar problemas com a máscara.

Após 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 botão direito do mouse sobre eles e clicar em “Distribute to Layers” , fazendo isso o Flash vai distribuir cada retangulo num layer diferente, então agora vamos fazer uma animação simples com esses retangulos, vamos clicar no mais alto e achar o layer correspondente a ele, que deverá ser o primeiro debaixo para cima:

Então a ordem será essa, vamos deixar esse primeiro layer onde está e os decima vamos deixar 2 frames de distância entre um e outro:

Depois de feito isso, vamos apertar a tecla F5 embaixo do ultimo frame criado, vamos repetir essa operação em todos os layer, por ultimo, no layer vazio que sobrará encima, vamos dar o nome dele de “ações” e criar um frame vazio (F7) encima do último frame, e colocar a ação:

stop();

Vejam o resultado de como ficará esse movieclip:

Se apertar a tecla Enter, perceberão que os retangulos começarão a cobrir a imagem decima para baixo, agora vamos voltar para o movieclip animação 1, e vamos criar mais um layer acima do layer nomeado como “mascara”, depois disso

clique com o botão direito do mouse no primeiro frame no layer máscara e clique em Copy Frames, logo em seguida clique com o botão direito do mouse sobre o novo layer criado e clique em paste frames, então terá dois layers duplicados no movieclip:

Vamos renomear o Layer criado acima para “Luz” e com o do meio vamos clicar com o botão 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 posições 0 em x e y:

Vou tirar apenas a ação stop(); no meu arquivo, para mostrar o resultado até agora, mas não tire no seu arquivo, se você testar ele deve ficar assim, só não ficará continuo como o desse exemplo:

Então ele carrega a máscara 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, então veremos o triangulo no palco, vamos clicar no frame 5 desse movieclip, e vamos apertar a tecla F6 para fazer uma cópia do frame 1 para o frame 6, agora cliquem no frame 1, e nas propriedades coloque a opção 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 sólida branca, só que ao invés de 50% agora vamos deixar com 0%, totalmente transparente:

Se o retangulo sumir, não 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 ação:

stop();

Voltem a timeline principal e testem a animação 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 Animação 2.

Com a Biblioteca aberta, arraste a segunda imagem para o movieclip que está vazio, colocando-a na posição 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 posição 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 posições, 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, começando debaixo para cima, vamos fazer aquela escadinha, dando espaço 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 “Ações” 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 ação

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 cópia 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 não fez nada, mas se testar a timeline verá que ele andou 90 graus sentido ante horário, agora com a ferramenta Free Transform Tool, vamos comprimir esse quadrado, mantenha a tecla Shift pressionada para ele diminuir em direção 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 ações, crie um novo frame no frame 6, e coloque a ação:

stop();

Volte para a timeline do movieclip Mascara 2, e depois para o movieclip Animação 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 fácil 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 não tem problema.

Cliquem com o botão 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 “Animação 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 posição 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 cópias dele no palco e cobrir a imagem com eles:

Depois de selecionar todos os movieclips no palco, clique com o botão 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 espaço de dois frames até a metade dos retangulos, depois a mesma voltando, então até a metade ela vai, e da metade pra lá ela volta:

Depois disso deixe todos os frames estáticos até o ultimo usando no movieclip, e no primeiro frame lá encima vamos criar um frame em branco no ultimo frame e colocar a ação:

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 >> Animação 3 >> Mascara 3 >> Barra 3, clique no frame 6 e aperte a tecla F6 pra fazer uma cópia 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 Ações e no ultimo frame coloque a ação:

stop();

Agora volte para a timeline do Movieclip Mascara 3, nele criamos aquelas duas escadinhas de frames, então vamos inverter os movieclips que estarão desse ponto pra cima:

Então 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, então esses movieclips ficarão de ponta cabeça, como nesse exemplo:

Repita a operação até o ultimo frame decima, assim ficarão metade normal e metade de ponta cabeça:

Volte para a timeline do movieclip Animação 3, faça 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 botão direito do mouse encima do layer “Mascara” e no menu que se abrirá, clique em Mask, e assim estão 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 posição 0 em x e y, mas preste atenção pois será só a imagem e não 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 estático até o frame 3, depois disso vamos pro segundo Layer onde daremos a ele o nome de “Animação 1″, vamos criar um frame em branco no segundo frame desse layer e vamos arrastar uma cópia do movieclip Animação 1 da biblioteca para o palco, deixando na posição 0 em x e y, ele deverá ficar exatamente encima da imagem que ficou por baixo, caso não fique, pode ser a mascara no movieclip que não está na posião 0, se a posição 0 em x e y não 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 estáticos.

Depois disso vamos para o terceiro Layer, o nome dele será “Animação 2″, vamos fazer um novo frame no terceiro frame desse layer, e vamos fazer o mesmo procedimento, arrastar o movieclip “Animação 2″ e coloca-lo no palco na posição 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 animação estática nos frames 3 e 4.

Vamos para o quarto Layer, com o nome de “Animação 3″, vamos criar um frame em branco no frame 4, e arrastar o movieclip “Animação 3″ da biblioteca para o palco, depois de ajustar ele nas posições tambem vamos deixar o frame 5 estático, apertando a tecla F5:

No ultimo Layer, vamos dar o nome de Ações, e vamos colocar essa ação no primeiro frame:

_root.numero = 1;

Em seguida crie um novo frame no frame 2, que vai receber a seguinte ação:

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 = 2gotoAndStop(2);}else {nextFrame();}}

Detalhando o código:

Acima criamos uma função que fará com que a cada 3 segundos a timeline ande 1 Frame, mostrando assim uma animação a cada 3 segundos.A ação _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 animação pra parecer que é continuação do final da animação.Então criamos a ação: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, então a imagem de fundo que criamos ficará visível, 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 = 2gotoAndStop(2);}else {nextFrame();}}Acima se declarou o intervalo da função avançar para 3000, então se cada 1000 corresponde a 1 segundo, isso fará com que a cada 3 segundos a função seja executada.Então ela faz uma condição 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 recomeçar a função pra ela não dobrar, senão ela começa a pular 2 frames por vez, depois 3, até ficar maluca a função, então é só um “anti-bug”.E por fim, se for verdadeiro de o frame atual ser o 4, ele vai mandar pro frame 2, onde recomaça a função.No else vemos que até chegar no frame 4 ele só vai caminahndo para o próximo frame com a ação 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 máscaras e movieclips.

Documents

Flash