Pessoal, to de semi-férias, o que explica a baixa produtividade do blog nesta semana, mas essa eu tenho que compartilhar. Ontem, no site do Terra, estava sendo veiculado esta propaganda das Lojas Americanas:

Veja bem as configurações… e cuidem ao criar seus banners!!!!

Abraço a todos.

Com apenas dois comandos teremos uma máscara arrástavel no Flash, vamos aos passos:

1- Crie um novo documento Flash Action Script 3.
2- Insira no palco do Flash ima imagem que você queira que permaneça mascarada, ao fundo. Transforme a imagem em um símbolo Movie Clip com o nome de instância de “foto”.
3- Renomeie esta camada para mascarada.
4- Em seguida insira uma nova camada renomeando-a para mascara e desenhe uma elipse;
5- Transforme esta forma em Movie Clip com o ponto de registro no meio.

6- Dê o nome de instância para este Movie Clip de bolinha.
7- Crie outra camada chamada Acoes e em seu primeiro frame coloque uma ação que fará a máscara:

this.foto.mask = bolinha;

Com isso já criamos o efeito de máscara.
8- Para fazer o efeito de arrastar a forma (a máscara) numa nova linha, ainda, no painel Actions digite:

this.bolinha.startDrag (true);

O método startDrag() que faz com que a forma seja arrástavel.
Feito! Só testar

Pessoal, uma necessidade para quem faz um site todo em flash é que o formulário de contato funcione corretamente.

Neste tutorial, pretendo passar uma maneira simples de como construir este formulário, em action Script 2.0

Lembro: existem muuuitas maneiras de se fazer. Estou usando Action Script 2.0 e irá ter os campos nome, telefone, email e mensagem.

Vamos ao que interessa:

No arquivo FLA que terás o formulário, crie duas camadas, como na imagem:

Na camada Textos, insira espaçadamente os textos: NOME, TELEFONE, E-MAIL, MENSAGEM, e na camada Text Input iremos inserir caixas de textos com a Ferramenta Text , mas configurando as Propriedades para:

E após gerar o retangulo na tela, selecione-o e ainda nas propriedades coloque no campo variável o nome da variável, neste caso: nome

Marcando este botão (nas propriedades também) circulado na imagem abaixo, você fará com que a caixa de texto tenha bordas, o que ajuda o usuário a enxergá-la:

Feito isto, repita para os campos: telefone, email e mensagem (estes serão os nomes de variáveis de cada um deles. Você terá esta tela:

Vamos criar uma mensagem para o usuário saber que a mensagem foi enviada:

Vá ao menu Inserir – New Symbol – chame-o de mc_aviso, do tipo: Movie Clip

Agora, deixe em branco o primeiro frame e crie um frame em branco (F7) no frame 2, e digite a mensagem para seu usuário: “Mensagem enviada”:

Agora, faça com que esta mensagem permaneça até o frame 50, teclando F5 no frame 50 você irá expandir a mensagem até lá!

E para finalizar a construção deste MovieClip, no frame 1, entre no painel action (F9) e escreva:

stop();

Pronto, volte para a Scene 1

Traga da Library (CTRL + L) para uma nova camada acima de todas, chamada Mensagem, o símbolo movie clip mc_aviso. Quando você arrastar, aparecerá apenas uma cruz bem pequena na tela. Isto acontece porque o primeiro frame deste movie clip é vazio:

Selecione este símbolo, e coloque o seu nome de instância como aviso.

Agora, crie o botão de Enviar, posicione onde for melhor para seu formulário, transforme-o em Símbolo (F8) Botão.

Clique UMA VEZ nele, e aperte F9 para entrar no painel Actions, e cole o seguinte código:

on (release) {
loadVariablesNum("enviaemail.php", 0, "POST");
// para apagar os dados que foram posteriormente digitados
nome = "";
telefone = "";
email = "";
mensagem = "";
aviso.play();
}

Arquivo PHP:

Crie um arquivo PHP, salvando-o com o nome enviaemail.php, e cole o código abaixo:

<?php
@extract($_POST);
$recipient = "seuemail@provedor.com.br";
$subject = "Formulário de Contato";
$msg = "Nome: $nome\nTelefone: $telefone\nE-mail: $email\nMensagem: $mensagem";
$mailheaders = "MIME-Version: 1.0\r\n From: $Email";
mail("$recipient", "$subject", "$msg", "$mailheaders");
?>

Pronto! Agora hospede em um servidor PHP (quem sabe a Parque Internet né?) e teste!

Se ficou com preguiça de fazer passo a passo, baixe aqui uma versão feinha.

Muuuita gente quer saber, e traduzindo do site do projeto explico como usar o famoso Lightbox ja na versão 2.04, para que quando clicarmos na imagem deixar o fundo escuro e dar o devido destaque a imagem ampliada.

1 – Baixar o pacote:

Você precisa baixar o pacote com arquivos que farão o efeito.
CLIQUE AQUI para baixar.

Baixado, descompacte os arquivos para a pasta que está o seu site, e vamos aprender como usar:

2 – Como Usar:

Primeiro, você precisa incluir os arquivos JS  baixados no site, Inclua estas linhas dentro do Cabeçalho <head> do seu HTML:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Cuide o caminho… a pasta js neste caso está na raiz da pasta do site.

Inclua também o arquivo CSS:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Verifique a CSS e certifique-se o prev.gif referenciado e arquivos next.gif estão no local certo. Além disso, certifique-se o loading.gif e close.gif,  arquivos referenciados no topo do arquivo lightbox.js estão no local certo.

Agora ativamos o script:

Adicionar um rel=”lightbox” a qualquer link para ativar a tag lightbox. Por exemplo:

 <a href="images/image-1.jpg" rel="lightbox" title="titulo aqui">image #1</a>

Se você tem um grupo de imagens relacionadas e quer que apareça em grupo,siga este código abaixo (note que tem parâmetro a mais entre colchetes):

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Não tem limites para o número de conjuntos de imagens por página ou quantas imagens são permitidos em cada conjunto.

Pessoal, as vezes precisamos ter em um banner ou um topo de site, um botão, mas que não se encaixa em nenhum objeto do palco.

Para isto, podemos criar um botão invisível, posicioná-lo onde queremos, e fazer o link para onde for.

No exemplo a seguir, vou usar nesta imagem no flash, e criar em uma camada acima do logo da Parque Internet :

Crie uma camada acima do desenho, chame-a de botaoinvisivel, e nesta desenhe um retângulo sem bordas (qualquer cor) do tamanho que você deseja ter o botão.

Após, selecione-o e tecle F8 para transformar em um símbolo de botão:

Agora, dê um duplo clique no botão recém criado, e no frame Hit pressione F6 para copiar o frame UP:

Agora que tens uma cópia do mesmo retângulo no Frame HIT, clique no Frame UP e delete (DEL no Teclado) ficando com frame preenchido apenas no hit:

Volte para Scene 1, e você verá um retangulo azul claro, que na verdade é apenas para mostrar que alí tens um botão invisível.

Agora, depende de qual Action Script você está usando, o 2 ou o 3:

Vamos separar agora o tutorial, siga pelo seu Action Script

SE USANDO AC2:

1 – Clique uma vez no botão invisível, e após aperte F9 para entrar no painel action

2 – Cole o código abaixo, alterando apenas o link que desejas dar:

on(release){
getURL("http://www.parque.net.br");
}

ou se preferir abrir em uma nova janela, use este código:

on(release){
getURL("http://www.parque.net.br", "_blank");
}

SE USANDO AC3:

1 – Clique no botão invisível, e de um nome de instância para ele, por exemplo:

2 – Crie uma camada nova chamada Acao

3 – Clique nesta camada, aperte F9 para abrir o painel action e cole o código abaixo:

botao1.addEventListener(MouseEvent.CLICK, destino);
function destino(event:MouseEvent):void{
navigateURL(new URLRequest("http://www.parque.net.br"), "_blank");
}

4 – Se você não quer que abra em uma nova janela ao clicar, apenas retire o que está em vermelho no código, do contrário não mude nada.

PRONTO!!! PODE PUBLICAR que é pra funcionar!

Para transformar sua fotografia num desenho “feito a lápis”, no Photoshop, bastam dois comandos para fazer isso. Com a foto aberta, aplique o filtro Find Edges, acionado por meio do menu Filters > Stylize > Find Edges. A borda de todos os elementos da imagem será demarcada. Para converter o resultado em tons de cinza, acione Image > Adjustments > Desaturate. Pronto, sua foto agora parece que foi desenhada a lápis.

Ao lançar novas versões do pacote CS muitos nem pensam nas suas máquinas e saem logo instalando versões atualizadas, mas se deparam com programas pesados e que constantemente travam.

Conversando com meu amigo e colega Cristiano Ribeiro, professor certificado do pacote Adobe, veio uma dica que vale muito colocar aqui no blog e compartilhar com vocês:

Aqueles que tem menos que 2GB de memória RAM e querem usar o Photoshop CS4, mas estão tendo problemas com travamento constante ou lentidão no software, segue o passo a passo para tentar solucionar este problema:

Entre no menu: EDIT - depois em PREFERENCES – depois em PERFORMANCE…

Aparecerá a seguinte tela:

Nesta tela, faça as seguintes alterações:

1 - Reduza a quantidade de memória que o Photoshop irá usar:

2 - Na caixa History & Cache, altera o quantidade máxima de estados do histórico e de cache que o Photoshop deve guardar.

3 – E na caixa Scratch Disks, indica os partições que queres usar como se fossem uma memória temporária.

Pronto, assim terás um Photoshop mais… comportado eu diria!

Até a próxima.

Depois do post sobre como centralizar na horizontal o site, alguma pessoas me perguntaram como centralizar tanto na vertical quanto na horizontal. então, lá vai:

É possível centralizar todo um site através de posicionamento absoluto. Para tanto, vamos utilizar a div de id “geral” como exemplo, ou seja: A div id=geral receberá todas as divs, e servirá como base para centralizar.

Vamos então para um tutorial beeem útil para os webdesigners que não são assim, muito ligados em programação, mas também não querem deixar de fazer um formulário de contatos no seu site.

CRIANDO FORMULÁRIO DE E-MAILS E ENVIADO VIA PHP

Primeiramente teremos que criar o formulario em <html>

São dois arquivos envolvidos

contato.html (ou outro nome com extensão html) – Arquivo do formulário
contato.php – arquivo de envio

Repare: extensão PHP no segundo arquivo.
Você pode manter o layout que já criou para o seu formulário, e inserir dentro da DIV que tem o conteudo os dados.
ISTO VAI NO ARQUIVO HTML QUE TERÁ O FORMULÁRIO DE CONTATO:

<form name="contato" id="contato" action="contato.php" method="post">
<table border="0" align="center">
<tr>
   <td>Nome*</td>
   <td><input type="text" name="nome" id="nome" size="45"></td>
</tr>
<tr>
  <td>E-mail</td>
  <td><input type="text" name="email" id="email" size="30"></td>
</tr>
<tr>
  <td>Mensagem</td>
  <td><textarea name="mensagem" id="mensagem" cols="45" rows="5"></textarea></td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="submit" value="Enviar"></td>
</tr>
</table>
</form>

ISTO VAI EM UM NOVO ARQUIVO (contato.php), COM A MESMA ESTRUTURA DE LAYOUT, E SERÁ O ARQUIVO RESPONSÁVEL PELO ENVIO DO E-MAIL E POR AVISAR O USUÁRIO QUE A MENSAGEM FOI ENVIADA.

Insira na div de conteúdo:

<?php
$cabecalho_email="Mensagem via site:\n\n";
$cabecalho_email.="Nome: " . $_POST["nome"] . "\n"; /* reparem que $_POST -> está assim, pois o metodo do formulario para envio de dados está post!! relembrando.. <form method="post"> */
$cabecalho_email.="email: " . $_POST["email"] . "\n"; /* igual para o nome, lembrando que dentro do [""] vai o nome do campo , em html!*/
$cabecalho_email.="Mensagem: " . $_POST["mensagem"] . "\n";
$de = $email;
$return = "emailquereceberaresposta@provedor.com.br";
$headers = "MIME-Version: 1.0\r\n";
$headers.= "From: " . $de . " \n"; /* esta variavel esta recebendo o seu e-mail la em cima, só renomear */
$headers.= "Return-path: <" . $return . "> \r\n"; /* variavel que será armazenado o e-mail para resposta do e-mail */
 mail("andreopc@gmail.com","mensagem via site",$cabecalho_email,"$headers","-f andreopc@gmail.com")
 or die("Erro ao Enviar Email!");
    echo "E-mail Enviado com Sucesso!";
/* lembrando que . MAIL("email que sera enviado o formulario","Assunto do e-mail","Conteudo do e-mail, que é seu formulario em PHP que nós criamos, podendo ser adicionados quantos campos quiser desde que seja adicionado na variavel $cabecalho_email.= campo novo " . $_POST["campo_novo"] .", $headers -> parametros adicionais, para mostrar de quem está sendo enviado o e-mail, e o ultimo -f é para se der erro no envio do e-mail, retornar para este e-mail que está escrito ali.*/
   ?>

Esta é uma dúvida que se vê muuuito pelos fóruns…

Ao clicar com o botão direito do mouse sobre o Flash, queremos sempre retirar aquilo tudo  que está neste menu.

Segue o código – Action Script 2:

function changemenu (){
getURL(‘http://eternia.com.br’);
}
var troca_menu:ContextMenu = new ContextMenu();
troca_menu.hideBuiltInItems();
var new_menu:ContextMenuItem = new ContextMenuItem(‘http://eternia.com.br’, rightclick);
troca_menu.customItems.push(new_menu);
_root.menu = troca_menu;

E é só basta copiar e colar no primeiro frame do seu flash, de preferência na camada “Ação” (para ficar organizado) e ta resolvido o problema!