Categorias
Tutoriais Web

Introdução a Canvas (HTML5)

Depois de muito tempo longe de javascript, eu voltei a estudar-lo, tudo por conta da do tão temido html5. Comecei a fazer experimentos com ajuda de meu colega Leo(@leonardomarciel) com canvas. Iniciei no basicão, algo inicialmente trabalhoso criar os elementos do zero via código e acabei descobrindo um framework bastante legal depois de algumas pesquisas.

Canvas é uma tag que permite desenhar gráficos bitmap através da linguagem javascript, canvas faz parte das novas especificações do HTML (HTML5) mais informações aqui :

http://www.whatwg.org/specs/web-apps/current-work/

O melhores browser do mercado Chome, Firefox, Opera e Safari dão suporte a canvas.
O pior browser do mercado Internet Explorer NÃO dá suporte, ou seja se está usando ie não verá nada de canvas.

Para utilizar o elemento canvas fazemos da seguinte forma :


Onde passamos o id do canvas para futuramente fazer referência como um elemento html normal e as propriedades largura e altura, se essas propriedades de largura e altura não forem definidas elas assumem os valores 300 px de largura por 150 px de altura. Também podemos definir a largura e altura por CSS mas corremos o risco de distorcer a imagem gerada pelo canvas.

Como a tag canvas é uma novidade do HTML ela não tem suporte nos browser mais antigos como o firefox 1.0 e internet explorer. Para fazer o tratamento nesse caso incluimos dentro da tag canvas o nosso conteúdo alternativo. No momento que o browser não der suporte ele irá ignorar a tag e ler o conteúdo seguinte.


Esse texto dentro da tag vai aparecer se o browser não der suporte, dentro da tag também podemos colocar imagens como conteúdo alternativo ou até um elemento .

Até agora só falei do elemento canvas não fiz nenhuma edição em nossa tag, mas agora vamos começar a editar nosso canvas, o elemento tem dois tipos de renderização 2D e 3D, ou como é chamado contexto de renderização. Nesse tutorial vamos trabalhar com o 2D.

Para acessar o contexto de renderização utilizamos o método getContext(), e passamos como parâmetro o tipo do contexto “2d” ou “3d”. O uso desse método é feito da seguinte forma:

function init(){
	//acessando nosso elemento canvas
	var canvas = document.getElementById("meucanvas");
	//definindo o contexto
	var ctx = canvas.getContext("2d");		
}

Para fazer um tratamento exibindo um alerta para o usuário caso o browser não tenha suporte a canvas fazemos da seguinte forma:

function init(){
	var canvas = document.getElementById("meucanvas");
	if(canvas.getContext){
		var ctx = canvas.getContext('2d');	
	}else{
		window.alert("desculpe seu browser não tem suporte a canvas, por favor instale um navegador descente.");
	}
}

Agora que temos o todo o tratamento para o canvas vamos criar um forma primitiva. Anteriormente só tinha exibido trechos do meu código HTML, dessa vez vou mostrar como o todo o esquema ficaria.


	
	
	
	
	
	

Na linha que passo o preenchimento “fillStyle” posso passar outro mais um parâmetro na chamada da função “rgba(200,0,0,0.5)” onde eu passo as três cores dos padrão rgb e opacidade do elemento(alpha). Outra opção é passar um código hexadecimal como parâmetro na função fillStyle, por exemplo fillStylle(“#00CC00”). Nesse tutorial vamos parando por aqui, deixo aqui o link do demo do tutorial : http://jsdo.it/Fellyph.Cintra/4f12

Categorias
Flash Tutoriais

Preloader em ActionScript 3.0

No post anterior trabalhamos com o carregamento de uma imagem externa, agora vamos fazer um preloader para o carregamento de uma imagem. Se você não fez o exercício anterior, arrume uma foto do tipo JPG , GIF ou PNG e coloque na mesma pasta do seu arquivo swf. no meu caso eu vou utilizar essa imagem :

Primeiro vamos preparar o terreno. crie um movieclip como o nome barra e o seu resgistration no canto esquerdo ao centro como na imagem abaixo.

Coloque o nome de instância da barra “barra_mc”, selecione o frame para inserir o nosso código e vamos programar:

var str:String = "foto.jpg";
var carregador:Loader = new Loader();
var requisicao:URLRequest = new URLRequest(str);
// criei as variáveis necessárias para efetuar o carregamento , o Loader e URLRequest

carregador.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgresso);
carregador.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleto);
// Adicionei os Eventos para o carregamento

carregador.load(requisicao);
//Mandei carregar o arquivo

// A função que vai ser chamada quando carregar o aquivo.
function onCompleto(e:Event):void{
    var foto:Bitmap;
    foto = e.target.content;
    //criei uma variável para receber a imagem que vai ser carregada
    addChild(foto);
    //adiciono a imagem no stage
}

// A função que vai chamada no progresso do carregamento
function onProgresso(e:ProgressEvent):void{

        var total:Number = e.bytesTotal;
	// pego o total de bytes que eu vou carregar
        var lidos:Number = e.bytesLoaded;
        // pego a quantidade de bytes que eu já carreguei
	var pc:Number = lidos/total;
        // pego o percentual dividindo lidos por total
        barra_mc.scaleX = pc;
}

Vou comentar a ultima função a onProgress ela é disparada no Evento ProgressEvent.PROGRESS ela é chamada durante o progresso do meu download. No evento que a função recebe ProgressEvent tem as propriedades bytesTotal que possui a quantidade total de bytes que serão carregados pelo swf e bytesLoaded que possui a quantidade que foi carregada até o momento. E para extrairmos o percentual basta dividir a quantidade de bytes lido até o momento pelo total.

Por Fim atribuímos o percentual ao scaleX da barra. O exercício é simples mas qualquer dúvida podem comentar. Também aceito sugestões de tutoriais.

Por enquanto é só pessoal. depois eu coloco o fonte para download.

Até Breve

Categorias
Flash Tutoriais

Botões em ActionScript 3.0

Nesse post vamos trabalhar com botões em AS 3.0 então ao trabalho, no actionScript 2.0(AS 2.0) para fazer ações com botões e movieclips era da seguinte forma:

meubotao.onRollOver = function():Void{

 //faz alguma coisa

}

Em acitonScript 3.0(AS 3.0) houve algumas mudanças, de inicio você tem que adicionar os eventos no movieclip e falar qual a função que vai ser chamada veja o exemplo abaixo.

meubotao.addEventListener(MouseEvent.MOUSE_OVER, minhaFuncao);

function minhaFuncao(e:MouseEvent):void{

//faz alguma coisa

 }

Na linha um adicionamos o evento especificamos o Tipo de evento no exemplo é o evento de mouse o mouse_over igual ao onRollOver do actionScript 2.0.  Na assinatura da função temos de que definir o tipo de parâmetro que a função vai receber, neste caso a variável “e” do tipo MouseEvent, lembrem toda vez que adicionarmos um evento a função que é chamada tem que receber um parâmetro do tipo do evento que foi adicionado.  O “this” que usamos dentro da função para fazer referência a quem chama a função em AS2.0 foi substituído pelo “target” do evento. Obs. Em outros casos o this tem o uso normal. vamos complementar o nosso exemplo:

meubotao.buttonMode = true;

meubotao.addEventListener(MouseEvent.MOUSE_OVER, minhaFuncao);

function minhaFuncao(e:MouseEvent):void{

         e.target.alpha = 0.5
 }

Na linha 1 foi alterado um parâmentro em nosso botão(movieClip) “buttonMode” essa propriedade surgiu em AS3 e por padrão ela é inicializada com false então para o nosso botão ficar com aquela “mãozinha” quando o mouse passar sobre nosso movieclip . Na linha 4 estamos modificando a propriedade alpha do target ou seja de  quem chamou a função nesse caso o meubotao. Notem que diferente de AS2.0 a propriedade alpha escrevesse sem o “_” isso para outras propriedades como x , y e  rotation. Outras propriedades como _xscale e _yscale agora são scaleX e scaleY. Vamos então usar o TweenLite nos eventos dos botôes(movieClips). Lembrando quem não possui as classes do TweenLite clique aqui para baixar.

import gs.TweenLite;
import gs.easing.*;

meubotao.buttonMode = true;
meubotao.addEventListener(MouseEvent.MOUSE_OVER, over);
meubotao.addEventListener(MouseEvent.MOUSE_OUT, out);
meubotao.addEventListener(MouseEvent.CLICK, clicou);

function over(e:MouseEvent):void{

TweenLite.to(e.target, 0.7, {alpha:0.7, ease:Expo.easeOut});

}

function out(e:MouseEvent):void{

TweenLite.to(e.target, 0.7, {alpha:1, ease:Expo.easeOut});

}

function clicou(e:MouseEvent):void{
trace("clicou");
}

No ultimo exemplo implementamos as ações over,  out e clique do movieclip.

Até o próximo post.