Hoje em dia, cada vez mais existem sites totalmente criados em flash, com a integração a PHP, Asp ou outras línguas de programação. Como é óbvio os webmasters usam ficheiros externos do flash, para poderem actualizar de forma fácil. Uma dessas maneiras é carregar dados de um ficheiro .txt, pois é fácil de actualizar e muito fácil integração no flash. Por isso hoje o que vos trago é um tutorial que ensina a importar dados de um ficheiro .txt.

Data: 08/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programas necessários: Adobe Flash e Bloco de Notas

Tempo: 5 minutos

Nível: Básico

Resultado Final: Ver

1- Abrir o Flash.

2- Cria um novo documento, com as dimensões que desejares.

3- Agora cria duas novas layers e renomeia-as para Campo e Actions.

4- Após ter criado as 2 layers, na layer Campo, crie um campo de texto dinâmico (Dynamic Text) e no campo nome da instância (Instance Name), coloca carrega_txt.

5- Agora seleccione a layer Actions pressione F9 para abrir o painel das Actions. Cole o seguinte código:

System.useCodepage= true;//Para habilitar o uso de outros caracteres.

var leitor = new LoadVars();//Criando a variável leitor

leitor.onData = function(txt){// Abrindo função com o leitor usando a função criada txt

carrega_txt.text = txt;

}

leitor.load(“dados.txt”);//Carregando o .txt para dentro do dynamic text

6- Na parte do flash é tudo, agora vamos abrir o bloco de notas e vamos guardar o ficheiro com o nome de “dados.txt”. Dentro desse ficheiro, coloque o texto que irá aparecer no flash.

7- Nosso projecto está pronto. Basta pressionar Ctrl+Enter para testar.

Hoje em dia cada vez mais, existem sites criados em flash. Uma “característica” que os webmasters usam no site, são as preloaders. As preloaders serve para mostrar que o site está a ser carregado e normalmente a percentagem que vai. Existem preloaders mais complexas, em que essas mostram: o tempo restante, a velocidade de download, o tamanho total, tamanho transferido, entre outras opções. Eu neste tutorial, apenas vou ensinar a criar uma simples preloader, apenas mostrando a percentagem carregada. Brevemente postarei, outras formas de fazer preloaders (mais complexas).

Data: 06/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Flash.

2- Criar um novo documento.

3- Depois de criado o novo documento, na primeira frame vamos criar um campo de texto dinâmico (dynamic text) e com o nome de instância (Instance Name) “percentagem”. (Ver imagem )

4- Vamos agora seleccionar a frame 2 e vamos pressionar F7 para criarmos uma Blank keyframe. Agora nesta frame coloquem todo o contéudo que o site/animação irá conter. (No meu caso vou colocar uma imagem com um tamanho grande, para poderem ver o efeito)

5- Depois de terem adicionado o conteúdo, vamos voltar à frame 1, e pressionamos F9 para abrir o painel das Actions. Depois nas actions, colem o seguinte código:

ActionScript 2:

onEnterFrame = function () {

//pegamos o tamanho total e o tamanho carregado do arquivo
atualsize = _root.getBytesLoaded();
totalsize = _root.getBytesTotal();

//exibimos a percentagem carregada
percentagem.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != undefined && totalsize == atualsize) {
play();
delete this.onEnterFrame;
}

};

stop();

ActionScript 3:

this.addEventListener(“enterFrame”,onEnterFrame);
function onEnterFrame(e:Event) {

//pegamos o tamanho total e o tamanho carregado do arquivo
var atualsize = this.loaderInfo.bytesLoaded;
var totalsize = this.loaderInfo.bytesTotal;

//exibimos a porcentagem carregada
textload.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != null && totalsize == atualsize) {
this.removeEventListener(“enterFrame”, onEnterFrame);
play();
}

}
stop();

6- Depois basta pressionar Ctrl+Enter para testar e verem o resultado final.

Para quem já sabe mexer no flash, certamente que já sabe como funciona os estados dos botões. Mas nem toda a gente hoje em dia sabe mexer em flash, por isso eu neste tutorial vou dar uma explicação sobre os estados dos botões no flash. Vou mostrar também o exemplo final, para ver qual o resultado dos estados dos botões. No fim do tutorial encontra-se os ficheiros em anexo caso queira fazer download dos mesmos.

Data: 03/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final: (para ver o efeito passe o rato por cima do ficheiro e carregue no botão)

1- Abrir o Flash.
2- Criar um botão, ou então caso tenham uma imagem para o botão importam-na para o flash (Ctrl+R). (Eu no meu caso criei uma imagem para ser o botão no photoshop)
3- Feito isto vamos criar o nosso objecto ou imagem, depende da forma como cada um optou, e vamos seleccionar o objecto/imagem, e pressionamos F8, para criar-mos um botão. No nome coloquem o nome que vocês quiserem e escolham o tipo botão. (Ver imagem abaixo)

4- Agora vamos fazer duplo clique no botão para entrar-mos dentro dele.

Agora vou dar uma pequena explicação sobre os estados que um botão pode ter. Como podem ver a linha de tempo do botão é diferente da linha de tempo de um filme ou de uma cena. Ela apresenta quatro tipo de “estados”.

Os estados são:

Up – estado normal. Identifica a forma como o botão aparece quando o mouse não estiver sobre ele.
Over - indica a aparência do botão quando o utilizador passa o rato sobre ele.
Down – corresponde à aparência adquirida pelo botão durante o clique do rato.
Hit - este quadro define a área de toque do botão.

5- Agora vamos seleccionar o quadrado do Over e Down e em cada um deles vamos pressionar F6 para criar uma keyframe. Eu no meu caso vou aplicar imagens diferentes que é para ver realmente para que servem estas opções anteriores mencionadas. No quadrado do hit pressionem F6 e não façam, mais nada, pois ele vai deixar a imagem que estava no quadrado do Over, e assim assumir que a área para o botão é o tamanho da imagem em si.

6- Pressionem Ctrl+Enter para testar e ver os efeitos!

Download: Estado dos botões.rar

Todos os sites, têm uma secção para entrar em contacto com o dono do site, ou outras pessoas em questão. Pois por isso eu trago aqui um tutorial que ensina a criar um formulário de contacto com Flash e PHP. Trata-se de um tutorial simples e muito útil para quem se está a iniciar no flash e no php.
No fim do tutorial, disponibilizo os ficheiros para download (.fla e o ficheiro php).

Data: 03/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programas necessários: Adobe Flash e Bloco de Notas

Tempo: 15 minutos

Nível: Intermédio

Resultado Final:

1- Comece por criar um novo documento com a dimensão de 300px x 300px no Flash.
2- Seleccione a ferramenta Text Tool (T).
3- Nas propriedades certifica-te que o tipo de texto está como estático (Static Text).
4- Clicar perto do topo do lado esquerdo da cena e colocar no nome campo texto “Nome:“.
5- Em baixo desse texto clicar e inserir um novo campo de texto que será o e-mail “E-mail:“.
6- Em baixo, por último colocar um outro campo com o nome de comentário “Comentário:“.
7- Terás algo do género, se tudo estiver bem até agora.

8- Selecciona de novo a ferramenta Text Tool (T) e nas propriedades do texto muda o tipo de texto para texto de entrada (Input Text).
9- Agora à direita do “Nome:” desenha uma caixa de texto do tipo de texto de entrada, estica a caixa de texto até à ponta do documento.
10- Nas propriedades clica na opção “Show border around text” e põe “tNome” para o nome da instância “Instance name“.

Como podes ver na imagem abaixo, no campo “Instance name” aparece o nome “tNome“.

11- À direita do “E-mail:” desenha outra caixa de texto “input text” e estica-a até à ponta, como fizestes para o campo acima.Nas propriedades do texto selecciona a opção “Show border around text” caso não esteja seleccionada, e para o nome e instância coloca “tEmail” (É igual à imagem de cima, mas apenas se substitui o tName por tEmail).
12- Por fim faz o mesmo para o campo Mensagem, no nome da instância coloca “tMensagem” e selecciona também a opção “Show border around text”. Nas propriedades do texto muda o tipo de linha para “Multiline“, em vez de “Single Line“.

13- Deverás ter o seguinte:

14- Selecciona a ferramenta Rectangle Tool (R).
15- Desenha um rectângulo no canto direito inferior do documento.

Propriedades do rectângulo: (não é necessário aplicar como aqui está, apenas é para verem para que servem os campos)

16- Selecciona a ferramenta Text Tool (T).
17- No cimo do rectângulo que desenhas-tes, clica e escreve a palavra “Enviar“.
18- Aqui fica o resultado até agora:

19- Selecciona a ferramenta Selection Tool (V).
20- Desenha uma caixa à volta do rectângulo e do texto “Enviar” para seleccionar ambos.
21- Pressiona F8 para converter a tua selecção num símbolo.
22- Coloca o nome “Enviar_bt” e o tipo selecciona opção botão e pressiona ok.
23- Clica no botão que acabastes de criar e nas propriedades coloca o nome “bEnviar” para o nome de instância “Instance Name“.
24- Clica na primeira frame da timeline e pressiona F9 para abrir as actions “Actions Panel“.
25- Coloca o seguinte código nas actions “Actions Panel“. (Apenas mudem o e-mail para o vosso, de resto não mexam em nada caso não saibam).

bEnviar.onRelease = function()
{
email();
}
function email()
{
var sMensagem = “Nome: ” + tNome.text + “\nE-mail: ” + tEmail.text + “\nMensagem: ” + tMensagem.text;
lvSend = new LoadVars();
lvReply = new LoadVars();
lvSend.msg = sMensagem;
lvSend.address = “teuemail@email.com”; //Colocar o teu e-mail aqui.
tNome.text = “A enviar mensagem…”;
tEmail.text = “”;
tMensagem.text = “”;
lvReply.onLoad()
{
tName.text = “Mensagem Enviada”;
}
lvSend.sendAndLoad(‘mail.php’, lvReply, ‘POST’);
}

26- Agora abre o Bloco de notas e cola o seguinte código. (Aqui apenas podem mudar onde diz E-mail Recebido, este vai ser o título do e-mail que irão receber)

<?php
$mensagem = $_POST["msg"];
$address = $_POST["address"];
mail($address,”E-mail Recebido”,$mensagem);
?>

27- Vai a Ficheiro » Guardar como…. e salva o ficheiro com o nome “mail.php” na mesma pasta onde vai ficar o teu swf.
28- Faz o upload dos ficheiros para o teu servidor e é só testar.

Download: Formulario_contacto.rar

Neste simples tutorial, vou explicar como mudarem o menu direito do rato no flash. Estes são pequenas coisas que por vezes podem dar jeito, pois é melhor ter o menu criado por nós, do que o que vem por definição pelo flash. Este tutorial é óptimo para quem se está a iniciar no flash e em actionscript.
No fim disponibilizarei o ficheiro .fla, para quem quiser fazer o download do mesmo.

Data: 02/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final: (clicar com o menu direito do rato, para ver o efeito)

1- Abrir o Flash.
2- Criar um novo documento, o tamanho depende do tipo de animação que vocês vão criar. (No meu caso criei 536px x 200px)
3- Criado o documento vamos seleccionar a primeira frame, e vamos às Actions (F9), e vamos colocar lá o seguinte código.

function rightclick (){}
MENU = new ContextMenu();
MENU.hideBuiltInItems();
Functioned = new ContextMenuItem(“TEU TEXTO AQUI”, rightclick);
MENU.customItems.push(Functioned);
_root.menu = MENU;

4- Feito isto, basta pressionar a combinação de teclas Ctrl+Enter para testar. Depois basta clicarem com o botão direito do rato no vosso projecto para verem o efeito. (Aqui fica o meu exemplo)

Download .FLA – mudar_menu_direito_rato.fla

Bem desta vez, o ”Criatividade Visual” criou um tutorial de nível básico baseado na tecnologia flash. Este tutorial simples explica facilmente como utilizar a ferramenta Shape Tween que pode depois ser explorada de diversas maneiras para criar animações diferentes e mais complexas. Siga atentamente o tutorial e no final explore o uso do Shape Tween de outras maneiras, qualquer dúvida basta deixar um comentário.

Data: 27/02/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Flash.
2- Criar um novo documento, o tamanho depende do tipo de animação que vocês vão criar.

Dica: Se a timeline não está visível, cliquem Ctrl+Alt+T, para o painel ficar visível.

3- Criar uma nova forma, por exemplo, um quadrado, um rectângulo, ou outra forma à vossa escolha. No meu caso eu vou criar um quadrado. Aqui fica o meu exemplo.

4- Agora vamos à timeline (linha de tempo), e seleccionamos a frame 50 (podem colocar noutra frame, isso depende de vocês), e pressionem a tecla F6 para criar um keyframe.

5- Seleccionamos o frame 50, e aqui vamos criar outra forma. Desta vez vou criar uma esfera, no vosso caso fica ao vosso critério.

6- Feito isto, vamos à timeline (linha de tempo), e seleccionamos uma frame qualquer entre a frame 1 e 50 e no painel das propriedades no campo Tween seleccionamos a opção Shape. (Ver imagem abaixo)

7- Bem e para acabar basta, testar o nosso projecto, para isso cliquem Ctrl+Enter para ver o nosso resultado final.

Criar Animação Simples (Motion Tween)

Para primeiro tutorial, o ”Criatividade Visual” criou um tutorial de nível básico baseado na tecnologia flash. Este tutorial simples explica facilmente como utilizar a ferramenta Motion Tween que pode depois ser explorada de diversas maneiras para criar animações diferentes e mais complexas. Siga atentamente o tutorial e no final explore o uso do Motion Tween de outras maneiras, qualquer dúvida basta deixar um comentário.

Data: 26/02/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Flash.
2- Criar um novo documento, o tamanho depende do tipo de animação que vocês vão criar.

Dica: Se a timeline não está visível, cliquem Ctrl+Alt+T, para o painel ficar visível.

3- Importar o objecto para o flash. (eu no meu caso vou usar o logo do site, vocês podem usar o que vocês quiserem.) Para exportarem o ficheiro cliquem Ctrl+R, e escolham o ficheiro que pretendem importar para o palco.

4- Depois, de importado o ficheiro vamos coloca-lo fora do palco do lado esquerdo, como mostra a imagem seguinte.

5- Agora vamos na timeline (linha de tempo), e seleccionamos a frame 50 (podem colocar noutra frame, isso depende de vocês), e pressionem a tecla F6 para criar um keyframe.

6- Vamos agora colocar o a imagem ( do logo no meu caso), no lado direito fora do palco, como fizemos no passo 4, mas só que desta vez no lado direito. Aqui fica uma imagem, para verem como deverá ficar.

7- Feito isto, vamos à timeline (linha de tempo), e seleccionamos uma frame qualquer entre a frame 1 e 50 e no painel das propriedades no campo Tween seleccionamos a opção Motion. (Ver imagem abaixo)

8- Bem e para acabar basta, testar o nosso projecto, para isso cliquem Ctrl+Enter para ver o nosso resultado final.

]]> http://www.criatividadevisual.com/criar-animacao-simples-motion-tween/feed/ 3