Vá chutar bem assim na...
Vou postar aqui só pra não me esquecer do sujeito... nunca tinha ouvido falar dele até ver esse vídeo
postado por Anônimo às
12:33 AM
5 Comentários
21 de dezembro de 2009
Vou postar aqui só pra não me esquecer do sujeito... nunca tinha ouvido falar dele até ver esse vídeo
18 de dezembro de 2009
Como fazer botões play e stop no Flash
Tirei umas fotos da formatura do 3º ano de 2009 do CEN, quem quiser ver, aqui está o link:
http://anjosarda.com/photos/formaturacen2009/
O Natal se aproxima, e eu ainda não tire Noite Feliz no violino.
E como prometido, quando o blog está parado, ai vai mais um tutorial.
A algum tempo fiz um vídeo mostrando como fazer botões de play e stop no Flash, algumas pessoas disseram que foi útil, então acho que vale a pena fazer uma versão escrita do tutorial. Quem preferir ver o vídeo ao invés do tutorial escrito, ele se encontra disponível aqui. Não usei um método avançado, então qualquer iniciante conseguirá seguir o tutorial.
Abra o Flash, pode ser qualquer versão (garanto que funciona pelo menos do MX 6.0 em diante) e crie uma animação simples (ou abra uma já pronta), pode ser uma bola andando de um lado para o outro.
Para isto, no primeiro frame da timeline desenhe uma bola com a ferramenta Oval Tool, selecione-a completamente, aperte F8 para convertê-la em símbolo, escolha Movie Clip e dê OK. Criado o símbolo com a bola, selecione um frame mais adiante na timeline e aperte F6 para inserir um quadro-chave, arraste a bola para outra posição no palco, depois clique com o botão direito do mouse em algum lugar na timeline entre os dois frames e escolha a opção Create Motion Tween (Criar Interpolação de Movimento). [1]
Feito isto teremos uma animação bem simples de uma bola andando de um lado para o outro. [2]
Crie uma nova camada e faça nela uma imagem retangular (para usarmos como botão) em seu primeiro frame. Selecione a imagem criada e dê F8, escolha desta vez Button (Botão) ao invés da primeira opção (e dê ok :P). Dê um duplo clique no botão criado e aperte F6 três vezes para preencher os estatos do botão. Selecione os estado Over e mude as cores da borda e de preenchimento, depois repita a operação no estado Down. [3]
Mudadas as cores dos estados do botão dê um duplo clique no palco em algum lugar que não seja o objeto para sair do modo de edição do símbolo.
Abra a Library de botões prontos do Flash, no MX 2004 o caminho para abri-la é
Window > Other Panels > Common Libraries > Buttons [4], se a sua versão do Flash for outra talvez seja diferente, mas não deve ser difícil de achar. Arraste um botão à escolha para o palco (em uma camada nova ou na camada do botão anterior). Selecione um dos botões e aperte F9 para abrir a painel Actions, escreva então o seguinte código:
Tome cuidado ao escrever os códigos, ActionScript é case sensitive.
Selecione o outro botão e insira o código:
Temos agora uma animação com um botão que a faz pausar,
e outro que a faz continuar. [5]
Vamos agora um último recurso para o controle básico de play e stop. Cria uma nova camada na timeline (é sempre bom usar uma camada separada para as ações), selecione o primeiro frame da mesma e no painel Actions escreva:
Isto fará com que o filme comece pausado e seja necessário que se clique no botão de play para que a animação comece. Para fazer com que ela pause ao chegar ao fim, basta fazer a mesma coisa só que colocando o stop(); em um frame ao final da timeline (na camada criada para as ações).
Baixe os arquivos usados neste tutorial aqui.
Espero que tenha ajudado, até o próximo tutorial.
http://anjosarda.com/photos/formaturacen2009/
O Natal se aproxima, e eu ainda não tire Noite Feliz no violino.
E como prometido, quando o blog está parado, ai vai mais um tutorial.
A algum tempo fiz um vídeo mostrando como fazer botões de play e stop no Flash, algumas pessoas disseram que foi útil, então acho que vale a pena fazer uma versão escrita do tutorial. Quem preferir ver o vídeo ao invés do tutorial escrito, ele se encontra disponível aqui. Não usei um método avançado, então qualquer iniciante conseguirá seguir o tutorial.
Abra o Flash, pode ser qualquer versão (garanto que funciona pelo menos do MX 6.0 em diante) e crie uma animação simples (ou abra uma já pronta), pode ser uma bola andando de um lado para o outro.
Para isto, no primeiro frame da timeline desenhe uma bola com a ferramenta Oval Tool, selecione-a completamente, aperte F8 para convertê-la em símbolo, escolha Movie Clip e dê OK. Criado o símbolo com a bola, selecione um frame mais adiante na timeline e aperte F6 para inserir um quadro-chave, arraste a bola para outra posição no palco, depois clique com o botão direito do mouse em algum lugar na timeline entre os dois frames e escolha a opção Create Motion Tween (Criar Interpolação de Movimento). [1]
Feito isto teremos uma animação bem simples de uma bola andando de um lado para o outro. [2]
Crie uma nova camada e faça nela uma imagem retangular (para usarmos como botão) em seu primeiro frame. Selecione a imagem criada e dê F8, escolha desta vez Button (Botão) ao invés da primeira opção (e dê ok :P). Dê um duplo clique no botão criado e aperte F6 três vezes para preencher os estatos do botão. Selecione os estado Over e mude as cores da borda e de preenchimento, depois repita a operação no estado Down. [3]
Mudadas as cores dos estados do botão dê um duplo clique no palco em algum lugar que não seja o objeto para sair do modo de edição do símbolo.
Abra a Library de botões prontos do Flash, no MX 2004 o caminho para abri-la é
Window > Other Panels > Common Libraries > Buttons [4], se a sua versão do Flash for outra talvez seja diferente, mas não deve ser difícil de achar. Arraste um botão à escolha para o palco (em uma camada nova ou na camada do botão anterior). Selecione um dos botões e aperte F9 para abrir a painel Actions, escreva então o seguinte código:
on (release) {
stop();
}
stop();
}
Tome cuidado ao escrever os códigos, ActionScript é case sensitive.
Selecione o outro botão e insira o código:
on (release) {
play();
}
play();
}
Temos agora uma animação com um botão que a faz pausar,
e outro que a faz continuar. [5]
Vamos agora um último recurso para o controle básico de play e stop. Cria uma nova camada na timeline (é sempre bom usar uma camada separada para as ações), selecione o primeiro frame da mesma e no painel Actions escreva:
stop();
Isto fará com que o filme comece pausado e seja necessário que se clique no botão de play para que a animação comece. Para fazer com que ela pause ao chegar ao fim, basta fazer a mesma coisa só que colocando o stop(); em um frame ao final da timeline (na camada criada para as ações).
Baixe os arquivos usados neste tutorial aqui.
Espero que tenha ajudado, até o próximo tutorial.
postado por Gabriel Sardinha às
2:21 PM
0 Comentários
8 de dezembro de 2009
HTML em e-mails
Como havida dito, quando isto aqui estiver muito parado vou postar um tutorial. Entenderei se nenhum dos habituais leitores comentar esta postagem.
Me perguntaram outro dia (na verdade já faz algum tempo) como formatar e-mails usando HTML para fazer aqueles e-mails informativos com uma aparência bem profissional. Eu tinha apenas uma noção de como era feito, achei interessante pesquisar e venho aqui apresentar os resultados.
Precisaremos de basicamente duas coisas para isto: um programa de edição e envio de e-mails, e algum conhecimento em HTML. Mostrarei também como usar o Dreamweaver e o Photoshop para formatar o conteúdo do e-mail.
Bem, primeiramente temos que ter o programa de edição e envio de e-mails. Usarei nos exemplos o Thunderbird, porque ele é mais fácil de configurar e usar que o Outlook. O e-mail que usarei será um do Gmail. Caso você não tenha estes dois ítens, crie um e-mail do gmail e baixe o Thunderbird clicando nos links abaixo:
http://mail.google.com/
http://br.mozdev.org/thunderbird/
Depois de instalado o Thunderbird, abra-o e vá em
Arquivo > Novo > Conta... [1]
Selecione Gmail, Avançar, escreva o nome/nick que você quer que apareça nas mensagens, e logo abaixo escreva o seu e-mail do Gmail. Clique novamente em Avançar, depois em Concluir.
Feito isso dê um Ctrl+N, ou vá em
Arquivo > Novo > Mensagem
Preencha os campos com um outro endereço de e-mail seu em "para", um assunto qualquer , uma mensagem qualquer, e clique em "Enviar agora". Depois de um tempo carregando ele irá pedir a senha do seu e-mail, escreva sua senha, deixe a opção de memorizar a senha marcada e dê ok. Você pode também configurar seu e-mail do Gmail no Thunderbird seguindo as instruções dadas pelo Google no seguinte endereço: [link]
Novamente dê um Ctrl+N. Aberta a caixa onde redigi-se a mensagem, clique na caixa de texto e vá no menu Inserir > Código-fonte HTML... [2]
Este é o campo onde coloca-se o código HTML do e-mail, que será editado apenas antes de ser inserido no e-mail através desta opção.
A seguir mostrarei como de fazer o design do e-mail em si, como resolver alguns problemas como o não tão bom desempenho do CSS em e-mails, como usar o Photoshop para construir um layout clicável, etc.
Segundo o resultado de minhas pesquisas em diversos serviços de e-mail, o melhor tamanho para se formatar o design do e-mail é 500 pixels de largura. A altura pode ser de acordo com a preferência de cada um e a quantidade de conteúdo (só não faça uma altura enorme), mas creio ser esta a melhor largura pois nem todos os e-mails são abertos em um pedaço grande da páginas, e uma largura muito grande pode vir a gerar barra de rolagem lateral no navegador do usuário (ou na caixa de leitura do programa de e-mail).
Agora vem uma notícia bombástica para aqueles preferem respeitar os padrões do WC3... Usar CSS para posicionar os elementos no e-mail pode não ser a melhor opção. Em muitos casos os parâmetros de posicionamento não são respeitados e o design sai todo desconfigurado. Como resolver tal problema?! Que profiram ofensas contra minha pessoa os xiitas de web standards, mas o que sugiro é que vocês usem tabelas para posicionar. Os testes que fiz com tabelas até então funcionaram bem, esta é uma das soluções mais viáveis para resolver o problema do CSS nos e-mails. Dêem uma olhada neste exemplo tosco que eu fiz de um posicionamento com tabelas, insiram o código da página em um e-mail depois mandem para algum de seus endereços. Ah, escolham a opção de enviar apenas o formato original para não correr o risco do serviço de e-mails de quem recebe a mensagem optar por abrir a mensagem de texto comum. Aliais, é bom lembrar quem nem todos os e-mails lêem e-mails com HTML, então dê uma pesquisada se os e-mails das pessoas para quem você quer mandar mensagens suportam HTML nos e-mails. Enfim, continuando... Vejam o resultado do e-mail formatado com uma tabela (exemplo acima), depois acessem esta página aqui, copiem o seu código fonte e repitam o teste. Fica claro que CSS não é a melhor opção se você tiver à sua disposição um bom editor WYSIWYG[3].
Com o Dreamweaver, você pode fazer uma tabela com a ferramenta indicada na figura.
Depois as células com a ferramenta do lado (direito).
Enfim, existem várias apostilas e tutoriais por ai explicando como construir layout no Dreamweaver com tabelas, este não é o objetivo desta postagem, até porque para fazer páginas eu não aconselho de forma alguma o uso de tabelas para posicionar, apenas neste caso específico tabelas vem a ter utilidade no posicionamento, no entanto existe uma série de razões porque elas não são mais recomendáveis para isto.
Outro jeito possível, é criar o design no Photoshop, depois salvar a imagem inteira e usar o mapeamento de área clicável no Dreamweaver. Basta importar a imagem, selecioná-la, marcar as áreas clicáveis com as ferramentas indicadas nesta imagem depois selecionar as marcações e preencher os campos dos links.
Lembrando que em todos os casos a largura recomendada é de 500 pixels.
Eu iria descrever também como fatiar a imagem no Photoshop para fazer o design, mas acho que vou deixar isto para o tutorial de como se fazer o design do site no Photoshop depois passá-lo para HTML e CSS, depois que tal tutorial estiver pronto postarei seu link no lugar deste parágrafo.
Espero que tenha sido útil...
Me perguntaram outro dia (na verdade já faz algum tempo) como formatar e-mails usando HTML para fazer aqueles e-mails informativos com uma aparência bem profissional. Eu tinha apenas uma noção de como era feito, achei interessante pesquisar e venho aqui apresentar os resultados.
Precisaremos de basicamente duas coisas para isto: um programa de edição e envio de e-mails, e algum conhecimento em HTML. Mostrarei também como usar o Dreamweaver e o Photoshop para formatar o conteúdo do e-mail.
Bem, primeiramente temos que ter o programa de edição e envio de e-mails. Usarei nos exemplos o Thunderbird, porque ele é mais fácil de configurar e usar que o Outlook. O e-mail que usarei será um do Gmail. Caso você não tenha estes dois ítens, crie um e-mail do gmail e baixe o Thunderbird clicando nos links abaixo:
http://mail.google.com/
http://br.mozdev.org/thunderbird/
Depois de instalado o Thunderbird, abra-o e vá em
Arquivo > Novo > Conta... [1]
Selecione Gmail, Avançar, escreva o nome/nick que você quer que apareça nas mensagens, e logo abaixo escreva o seu e-mail do Gmail. Clique novamente em Avançar, depois em Concluir.
Feito isso dê um Ctrl+N, ou vá em
Arquivo > Novo > Mensagem
Preencha os campos com um outro endereço de e-mail seu em "para", um assunto qualquer , uma mensagem qualquer, e clique em "Enviar agora". Depois de um tempo carregando ele irá pedir a senha do seu e-mail, escreva sua senha, deixe a opção de memorizar a senha marcada e dê ok. Você pode também configurar seu e-mail do Gmail no Thunderbird seguindo as instruções dadas pelo Google no seguinte endereço: [link]
Novamente dê um Ctrl+N. Aberta a caixa onde redigi-se a mensagem, clique na caixa de texto e vá no menu Inserir > Código-fonte HTML... [2]
Este é o campo onde coloca-se o código HTML do e-mail, que será editado apenas antes de ser inserido no e-mail através desta opção.
A seguir mostrarei como de fazer o design do e-mail em si, como resolver alguns problemas como o não tão bom desempenho do CSS em e-mails, como usar o Photoshop para construir um layout clicável, etc.
Segundo o resultado de minhas pesquisas em diversos serviços de e-mail, o melhor tamanho para se formatar o design do e-mail é 500 pixels de largura. A altura pode ser de acordo com a preferência de cada um e a quantidade de conteúdo (só não faça uma altura enorme), mas creio ser esta a melhor largura pois nem todos os e-mails são abertos em um pedaço grande da páginas, e uma largura muito grande pode vir a gerar barra de rolagem lateral no navegador do usuário (ou na caixa de leitura do programa de e-mail).
Agora vem uma notícia bombástica para aqueles preferem respeitar os padrões do WC3... Usar CSS para posicionar os elementos no e-mail pode não ser a melhor opção. Em muitos casos os parâmetros de posicionamento não são respeitados e o design sai todo desconfigurado. Como resolver tal problema?! Que profiram ofensas contra minha pessoa os xiitas de web standards, mas o que sugiro é que vocês usem tabelas para posicionar. Os testes que fiz com tabelas até então funcionaram bem, esta é uma das soluções mais viáveis para resolver o problema do CSS nos e-mails. Dêem uma olhada neste exemplo tosco que eu fiz de um posicionamento com tabelas, insiram o código da página em um e-mail depois mandem para algum de seus endereços. Ah, escolham a opção de enviar apenas o formato original para não correr o risco do serviço de e-mails de quem recebe a mensagem optar por abrir a mensagem de texto comum. Aliais, é bom lembrar quem nem todos os e-mails lêem e-mails com HTML, então dê uma pesquisada se os e-mails das pessoas para quem você quer mandar mensagens suportam HTML nos e-mails. Enfim, continuando... Vejam o resultado do e-mail formatado com uma tabela (exemplo acima), depois acessem esta página aqui, copiem o seu código fonte e repitam o teste. Fica claro que CSS não é a melhor opção se você tiver à sua disposição um bom editor WYSIWYG[3].
Com o Dreamweaver, você pode fazer uma tabela com a ferramenta indicada na figura.
Depois as células com a ferramenta do lado (direito).
Enfim, existem várias apostilas e tutoriais por ai explicando como construir layout no Dreamweaver com tabelas, este não é o objetivo desta postagem, até porque para fazer páginas eu não aconselho de forma alguma o uso de tabelas para posicionar, apenas neste caso específico tabelas vem a ter utilidade no posicionamento, no entanto existe uma série de razões porque elas não são mais recomendáveis para isto.
Outro jeito possível, é criar o design no Photoshop, depois salvar a imagem inteira e usar o mapeamento de área clicável no Dreamweaver. Basta importar a imagem, selecioná-la, marcar as áreas clicáveis com as ferramentas indicadas nesta imagem depois selecionar as marcações e preencher os campos dos links.
Lembrando que em todos os casos a largura recomendada é de 500 pixels.
Eu iria descrever também como fatiar a imagem no Photoshop para fazer o design, mas acho que vou deixar isto para o tutorial de como se fazer o design do site no Photoshop depois passá-lo para HTML e CSS, depois que tal tutorial estiver pronto postarei seu link no lugar deste parágrafo.
Espero que tenha sido útil...
postado por Gabriel Sardinha às
3:03 PM
2 Comentários
