Proposta de criação de site para a Morena Veículos

Proposta para criação do site da Morena Veículos.

Criação de sites - Pratigi Alimentos

Proposta de layout para a Pratigi Alimentos.

Website EPD Home TErapia

Criação do site EPD Home Terapia. O conceito do site transmite conforme e cuidado. Em menos de 15 dias de lançamento o Website ja figurou em 4° lugar no Google para a palavra-chave que define o serviço da empresa: home care.

Acesse: http://www.epdterapia.com.br
Lançamento em 25/09/2009

Para entendermos a mecânica de envio de e-mail, precisamos entender o formato cliente-servidor da comunicação na Internet.

Quando acessamos uma página na Internet, tudo que vemos é o resultado do processamento de um arquivo que está hospedado no servidor da página. Para tanto, existem tecnologias cujo objetivo é possibilitar ao desenvolvedor da página definir como o conteúdo a ser enviado paro visitante será gerado.

Dessa forma, temos duas perspectivas na aplicação: a perspectiva do desenvolvedor, que, por exemplo, ao acessar o código fonte da página verá as diversas regras e algorítmos que definem como o conteúdo será gerado, e a persperctiva do cliente, que ao acessar o código-fonte da página verá apenas o conteúdo gerado, e desconhece as regras.

Para definir as regras para geração dinâmica de conteúdo existem linguagens como PHP, ASP ou JSP. Essas linguagem são chamadas “server-side”, pois são executadas no lado servidor. Para definir o formato, layout e mecânicas de interação da página existem linguagens como HTML, Javascript e CSS. São linguagens “client-side” pois são executadas no lado cliente (no navegador do visitante).

Para enviarmos um e-mail precisamos utilizar um servidor de e-mail. Os servidores de hospedagem de sites frequentemente possuem um servidor de e-mail integrado. Quando, por exemplo, configuramos nossa conta de e-mail no outlook (informando smtp, pop3, etc), estamos configurando a conexão entre o outlook e o servidor de e-mail, para que ele possa realizar os envios.

Da mesma forma, para enviarmos um e-mail através de uma aplicação Actionscript precisamos utilizar um servidor de e-mail. A forma mais fácil de fazer essa conexão entre nossa aplicação e o servidor de e-mail é utilizar uma página em linguagem “server-side”.

Nosso projeto em Actionscript envia os dados que desejamos enviar para a página e essa página conecta com o servidor de e-mail, enviando o e-mail. Nesse exemplo utilizarei uma página em linguagem PHP, mas isso se aplica a outras linguagens. Vamos ao exemplo!

Crie um formulário no seu projeto em Flash. Para isso crie campos de texto do tipo InpuText (nome, email e mensagem). Nomeie eles de nome_txt, email_txt e mensagem_txt. Crie também um campo de texto chamado resultado_txt (para exibirmos o resultado do envio) e um botão enviar_btn. Veja a figura (o exemplo estará disponível para download ao fim do tutorial):

Exemplo do tutorial.

O código para que nosso formulário funcione é apresentado a seguir:

// Associamos o click no botão enviar à função de envio de e-mail.
enviar_btn.addEventListener(MouseEvent.CLICK, EnviarEmail);

function EnviarEmail(evt)
{
	resultado_txt.text = "Enviando mensagem... aguarde!";

	// Cria o objeto que realizará o envio dos dados para a página
	// envio_email.php.
	var loader:URLLoader = new URLLoader();

	// Criamos o listener que será chamado ao fim da execução do script
	// de envio de e-mail.
	loader.addEventListener(Event.COMPLETE					, FimLoad);

	// Criamos os listener que serão chamados em caso de erro ao tentar abrir
	// o script (arquivo não encontrado ou em outro domínio por exemplo).
	loader.addEventListener(IOErrorEvent.IO_ERROR				, ErroLoad);
	loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR	, ErroLoad);	

	// Definimos qual script enviará o e-mail e como serão enviados os
	// parâmetros para esse script.
	var request:URLRequest = new URLRequest("envio_email.php");
	request.method = "POST";

	// Definimos os parâmetros a serem passados para o script
	// envio_email.php.
	var variables:URLVariables = new URLVariables();
	variables.nome	 	= nome_txt.text;
	variables.email		= email_txt.text;
	variables.mensagem	= mensagem_txt.text;
	request.data 		= variables;

	// Solicitamos a execução do Script.
	loader.load(request);
}

function FimLoad(evt)
{
	// Exibimos o resultado do envio.
	resultado_txt.text = evt.target.data;
}

function ErroLoad(evt)
{
	resultado_txt.text = "Ocorreu um erro durante o envio do e-mail.";
}

Na linha 2 associamos o clique no botão enviar à função que realiza o envio de e-mail.

Na linha 10 criamos um objeto do tipo URLLoader. Esse objeto é utilizado para se carregar conteúdos de páginas externas. Ele servirá como ponte entre nossa aplicação em Flash e a página em PHP que realizará o envio do e-mail.

Nas linhas 14 dizemos que quando o objeto URLLoader terminar de carregar os dados da página (que definiremos qual será mais adiante) queremos que a função FimLoad seja executada. Nas linhas 18 e 19 definimos que a função ErroLoad deverá ser chamada caso ocorra algum erro durante o carregamento da página.

Na linha 23 criamos um objeto que define qual página deverá ser carregada. Na linha 24 definimos o formato do envio de dados para a página, não irei entrar em detalhes quanto a isso para não alongar o tutorial.

Na linha 28 criamos um objeto que passará parâmetros para a página que iremos carregar. Assim, poderemos definir o nome de quem está enviado o e-mail, o e-mail desta pessoa e a mensagem. Nas linhas 29 a 31 definimos os parâmetros, e na linha 32 associamos esses parâmetros ao objeto Request.

Por fim, na linha 35 solicitamos o carregamento da página. A partir daí entra em execução a página PHP que realizará o envio da mensagem, cujo código é apresentado a seguir:

// Recuperamos os parâmetros enviados através do formulário.
$nome		= $_POST["nome"];
$email		= $_POST["email"];
$mensagem	= $_POST["mensagem"];

// Definimos o título da mensagem (lembrando que '.' é operador de concatenação em PHP).
$assunto	= "Mensagem de " . $mensagem . " (" . $email . ")";

// Definimos o destinatário da mensagem.
$destino	= "seuemail@seudominio.com.br";

// Enviamos o e-mail.
if (mail($destino, $assunto, $mensagem))
{
	echo "Mensagem enviada com sucesso!";
}
else
{
	echo "Não foi possível enviar sua mensagem!";
}

Nas linhas 1 a 3 recuperamos os parâmetros que enviamos através do Actionscript 3. Observe que o nome dos parâmetros têm que ser idêntico aos digitado nas linhas 29 a 31 do código Actionscript. Na linha 13, utilizamos a função mail() do PHP, para realizar o envio do e-mail. Observe que isso tudo ocorre no lado servidor, e até agora não geramos nenhum conteúdo para o cliente (no caso a aplicação Flash). Na linha 15 utilizamos o comando “echo” para enviar um resultado ao cliente, que será recuperado na linha 41 da aplicação Flash, com o acesso a propriedade target.data do evento de fim de load.

Lembre-se que para que esse exemplo funcione você precisa enviá-lo (tanto o arquivo .swf e o arquivo .php) para um servidor de hospedagem com suporte a PHP.

O uso de linguagens dinâmicas (como o PHP) e seu acesso através do Flash possibilita a criação de sistemas que acessam banco de dados, o que é fundamental em diversos projetos.

Vamos ficando por aqui, até o próximo tutorial. Dúvidas?

Website Prato Assinado

Projeto de reformulação do Website Prato Assinado. O novo layout transmite elegância e sofisticação. Buscamos explorar o uso de imagens de pratos da empresa, cuja decoração é um de seus pontos fortes.

Acesse: http://www.pratoassinado.com.br
Lançamento em 28/08/2009

Virtualize é mencionada no site Dope Awards, com a criação do site 3Ventos.

A Virtualize foi mencionada na categoria “Recognition Gallery” do site Dope Awards, que premia os melhores sites desenvolvidos em Flash, novamente com o projeto 3Ventos.

Premiação em 04/08/2009

Barras de rolagem (principalmente a horizontal) afetam a usabilidade e a estética do site. Para evitar esse tipo de problema em aplicações Flash, podemos estabelecer que o nosso conteúdo SWF ocupará 100% da área disponível no navegador, conforme explicado no tutorial “Fazendo o site ocupar toda a área do navegador”.

Entretanto, quando adotamos essa abordagem, o conteúdo Flash é redimensionado de acordo com a resolução e área disponível no navegador do visitante, o que pode resultar em efeitos indesejados na aparência final (redimensionamentos que não seguem proporção por exemplo).

Para evitar esse tipo de efeito, podemos gerenciar o redimensionamento do conteúdo em Flash, reposicionando e redimensionado o conteúdo conforme desejarmos.

Podemos ter, por exemplo, um website composto de um menu esquerdo, um conteúdo central, e um espaço na lateral direita reservado para banners. Eu desejo que o menu esquerdo fique sempre a 20 pixels da margem esquerda do navegador (centralizado verticalmente), que o conteúdo central fique sempre no centro (vertical e horizontal), e que o espaço de banners fique a 20 pixels da margem direita (centralizado verticalmente). Desejo também que o conteúdo não seja rediomensionado de acordo com o tamanho da área do navegador.

Tendo em vista essas especificações, devemos definir os pontos de registro dos movieclips correspondentes de acordo com os respectivos alinhamentos. Exemplo, se eu quero que o menu esquerdo fique alinhado a esquerda horizontalmente e ao centro verticalmente, o ponto de registro do seu movieclip deverá estar alinhado a esquerda e centralizado verticalmente, conforme a figura a seguir:

Definindo corretamente o ponto de registro

Essa configuração do ponto de registro não é obrigatória, mas facilitará o nosso trabalho ao alinhar o elemento. A mesmo lógica se aplica a outros tipos de alinhamento. Por exemplo, se desejo alinhar um elemento ao centro (horizontalmente e verticalmente), seu ponto de registro deve estar no centro.

Após definirmos corretamente os pontos de registro, precisamos dizer ao flash que não desejamos que ele redimensione o conteúdo de acordo com a área disponível. Precisamos também, definir uma orientação para o stage, quando o arquivo flash estiver em tamanhos superiores ou inferiores ao tamanho original do stage. Para isso, usamos o código a seguir:

// Indica que o conteúdo não dever ser redimensionado.
stage.scaleMode = StageScaleMode.NO_SCALE;

// Indica que caso a área do flash (no navegador por exemplo) seja
// maior ou menor que o stage, o ponto 0,0 do stage deve-se posicionar
// no canto superior (TOP) esquerdo (LEFT) da área.
stage.align		= StageAlign.TOP_LEFT;

Feito isso, podemos tratar o redimensionamento da área de conteúdo com facilidade. Para exemplificar, vou utilizar 3 conteúdos, um que será alinhado a 10 pixels da margem superior esquerda, outro que será alinhado ao centro e outro que será alinhado a 10 pixels da margem inferior direita, conforme a figura a seguir (o código fonte deste tutorial encontra-se no fim do texto):

Estrutura do exemplo apresentado nesse tutorial

Nesse exemplo, nomearei os movieclips dos quadrados como quadEsqTop_mc, quadCent_mc e quadDirBaixo_mc (respectivamente da esquerda para direita).

Para realizar o reposicionamento dos elementos a partir do redimensionamento do stage criamos um ouvinte para o evento “Event.RESIZE”. O evento “Event.RESIZE” sempre que o conteúdo flash é redimensionado. Veja:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align		= StageAlign.TOP_LEFT;

// Criamos um ouvinte para o evento Event.RESIZE (redimensionamento).
stage.addEventListener(Event.RESIZE, Redimensionamento);
function Redimensionamento(evt)
{
	// Alinhamento a 10 pixels da margem superior esquerda.
	quadEsqTop_mc.x = 10;
	quadEsqTop_mc.y = 10;

	// Alinhamento ao centro.
	quadCent_mc.x	= stage.stageWidth 	/ 2;
	quadCent_mc.y	= stage.stageHeight	/ 2;

	// Alinhamento a 10 pixels da margem inferior direita.
	quadDirBaixo_mc.x = stage.stageWidth 	- 10;
	quadDirBaixo_mc.y = stage.stageHeight 	- 10;
}

// Chamamos a função inicialmente para que os quadrados posicionem-se
// nas margens desejadas.
Redimensionamento(null);

Na linha 05, associamos o evento de redimensionamento à função Redimensionamento, que irá tratar esse evento. Nas linhas 09 a 18 posicionamos os quadrados de acordo com o desejado. Utilizamos as propriedades stage.stageWidth e stage.stageHeight para saber a largura e altura atuais do stage.

Na linha 23 realizamos uma chamada à função, para assegurar que assim que o site seja carregado a função seja disparada, e a distribuição dos elementos seja aplicada.

Experimente rodar esse exemplo no flash e redimensionar a janela do .SWF. Veja que as margens se mantêm as mesmas, e quadrado central permanece sempre no centro.

Dúvidas, é só perguntar! Até o próximo artigo!

Tutorial actionscript – Reposicionando elementos após redimensionamento da janela

Assim, é importante conhecer algumas diretrizes para se obter melhor desempenho em projetos em Flash / Actionscript 3. A seguir, enumeramos numa ordem de importância, as diretrizes para se otimizar o desempenho de sua aplicação em flash.

1. Sempre que possível, use bitmaps ao invés de vetores

O flash se diferenciou na Web por ser um programa vetorial. O conteúdo em vetor era extremamente adequado para a Web de alguns anos atrás, por ser leve para ser transferido pela rede. Hoje, o tamanho final do projeto (tamanho em disco) ainda é um fator importante, porém não crucial. É importante encontrar um equilíbrio entre símbolos em formato de vetor e símbolos em formato de imagem.

Vetores são pequenos pois representam imagens através de funções matémáticas. Entretanto, cada vez que um vetor é desenhado na tela, a função que o representa precisa ser executada, para que ele seja convertido em uma representação visual, e posteriormente desenhado. Uma imagem, por sua vez, precisa apenas ser desenhada. Da pra imaginar a diferença de desempenho não é?

Assim a dica é: se você precisa otimizar o desemenho do seu projeto, só utilize vetores onde for indispensável.

2. Evite máscaras.

Máscaras forçam o flash player a calcular o que deve e o que não deve ser renderizado a cada desenho de quadro. Caso a máscara possua um formato complexo a situação se agrava ainda mais. Dessa forma, sempre que possível, utilize um shape simples, ou mesmo uma imagem, sobre o conteúdo que deseja mascarar, ao invés de utilizar uma máscara.

3. Vídeos e imagens (PNGs) com canal de alpha

Assim como para máscaras, os canais de alpha tornam complexo a renderização de um filme ou imagem. Dessa forma, evite utilizá-los sempre que possível.

4. Use cacheAsBitmap (da forma correta)

“cacheAsBitmap” é uma propriedade dos MovieClips que permite-nos informar ao flash que aquele MovieClip deverá ser armazenado em memória como um Bitmap e não como um vetor. Dessa forma, ao renderizar o MovieClip o flash não precisará fazer calcular a função que representa o vetor, pois ele ja terá em memória o vetor em um formato de bitmap.

“cacheAsBitmap” parece então ser a solução para todos os problemas de desempenho do flash, certo? Não é bem assim.Você só deve utilizar “cacheAsBitmap” em MovieClips que não possuem animação e que não serão alterados ao longo da execução do filme (rotação, escalonamento, aplicação de filtros, etc). Caso o filme seja alterado, o flash precisará recalcular a função que representa o vetor, o que tornará o processo ainda mais lento que se ele não estivesse marcado como “cacheAsBitmap”.

5. ENTER_FRAME e setInterval

Crie o mínimio de event listeners para o evento ENTER_FRAME. Em algumas aplicações, como os jogos, o ideal é que você crie apenas um event listener para esse evento, e ele centralizará todos os controles. Lembre-se também de remover os event listeners quando a captura do evento não for mais necessária (utilize “removeEventListener()”).

O mesmo se aplica ao setInterval. Crie o mínimo de intervals possível.Utilize clearInterval para remover o interval criado da memória e parar sua execução.

6. Recorte símbolos grandes

Caso você possua símbolos que, por serem grandes, não estarão completamente visíveis na tela, recorte as partes não visíveis.

7. Complexidade algorítmica

Faça uma análise da complexidade algorítimica dos seus códigos actionscript. Otimize seus códigos!

Essas são as principais dicas para se obter melhores desempenhos nas aplicações. Qualquer dúvida é só perguntar! Até o próximo artigo!

Website TMAR Transportes

Reformulação completa do site da Tmar transportes. Buscou-se nesse projeto alcançar uma identidade visual que transmitisse modernidade, segurança e agilidade, e uma estrutura que tornasse prática a realização de orçamentos online.

Acesse: http://www.tmartransportes.com.br
Lançamento em 17/07/2009.

Para que nosso site ocupe 100% da área disponível, precisamos fazer duas coisas (os arquivos fontes deste tutorial estão disponíveis ao fim do texto):

1. Adicionar um CSS ao HTML da página que inclui o arquivo .SWF, indicando que não desejamos nenhum tipo de borda no site. O CSS é uma linguagem padrão que trabalha junto ao HTML na formatação/estilização de sites. É uma linguagem cujo conhecimento é importantíssimo para Web Designers. Veja o exemplo a seguir.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Virtualize Interatividade Digital - Tutorial Actionscript</title>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.embedSWF("exemplo.swf", "exemplo", "100%", "100%", "9.0.0", "expressInstall.swf");
		</script>
		<style type="text/css">
		body
		{
			height:100%;
			margin:0;
			padding:0;
		}
		</style>
	</head>
	<body bgcolor="#000000">
		<div id="exemplo">
			<h1>Conteúdo alternativo</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
	</body>
</html>

2. Precisamos indicar que o flash deve ocupar 100% da altura e largura da página, o que fazemos utilizando os parâmetros da tag object ou do SWFObject. O SWFObject é uma pequena biblioteca em Javascript, que permite a inclusão de conteúdo Flash em páginas HTML, através de um comando Javascript. Essa bibliteca nos livra da preocupação em identificar se o usuário possui Flash player ou Javascript ativado. Aconselho utilizá-la em seus projetos. Veja o código:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Virtualize Interatividade Digital - Tutorial Actionscript</title>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.embedSWF("exemplo.swf", "exemplo", "100%", "100%", "9.0.0", "expressInstall.swf");
		</script>
		<p><style type="text/css">
		body<
		{
			height:100%;
			margin:0;
			padding:0;
		}
		</style>
	</head>
	<body bgcolor="#000000">
		<div id="exemplo">
			<h1>Conteúdo alternativo</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
	</body>
</html>

Nas linhas 06 a 09, importamos e fazemos uso da biblioteca SWFObject. Na linha 08, está o comando que realiza toda a “mágica” do processo. O 1° parâmetro deste comando é o arquivo .swf a ser exibido. O 2° é o identificador do arquivo, um nome que daremos para nosso conteúdo. O 3° e 4° parâmetros são as dimensões do arquivo, largura e altura, o qual pode ser fornecido em percentagem. O 5° parâmetro é a versão de Flash Player necessária para rodar o arquivo.O 6° parâmetro é um utilitário para instalação automática do Flash Player que já vem com o SWFObject.

Como falei, o SWFObject identifica a versão do Flash do visitante. Caso a versão seja inferior a exigida o conteúdo da div de id correspondente ao 2° parâmetro da chamada “swfobject.embedSWF()”. Caso contrário, o SWF será exibido no lugar da div.

Isso é o suficiente para o seu conteúdo Flash ser executado ocupando toda a área do navegador. Observe que quando definimos tamanho 100% para o conteúdo flash, o conteúdo também cresce, e não apenas o Stage. Isso não é desejado na maioria dos projetos. Nos próximo artigos veremos como evitar isso e também como alinhar os elementos do site de acordo com o redimensioanamento.

Dúvidas, é só perguntar! Até o próximo artigo!

Tutorial actionscript – Fazendo o site ocupar toda a área do navegador