Blog Fellyph Cintra » Tutoriais

Criando páginas single para cada categoria (Single templates)

Fellyph — Thu, 17 Nov 2011 19:10:02 +0000

Trabalhando com wordpress você tem um arquivo para cada página específica, por exemplo, o arquivo responsável pela página de categoria é o arquivo category.php, o arquivo resposável pela exibição do post em forma isolada é o arquivo single.php. Mas além dessas opções também podemos criar uma arquivo para a single de cada categoria, mas isso só é possível com trabalhando com três métodos diferentes: trabalhando com filtros , trabalhando com plugin ou trabalhando com condicional tags.

A primeira forma é adicionando um filtro(comando) dentro do functions.php que eu vou mostrar o trecho de código que trabalhamos logo abaixo :

add_filter('single_template', create_function('$t', 'foreach( (array) get_the_category() as $cat ) { if ( file_exists(TEMPLATEPATH . "/single-{$cat->term_id}.php") ) return TEMPLATEPATH . "/single-{$cat->term_id}.php"; } return $t;' ));

Explicando rapidamente esse bloco de código aplica um filtro, ele usar um for para acessar cada categoria ele pega o id e criar um template de uma página single, da seguinte forma single-[id-da-categoria].php, mas claro isso só será aplicado se o arquivo existir na pasta do tema.

A segunda forma é utilizando plugin que funciona da seguinte forma ele habilita a possibilidade de criar templates igual o esquema de page templates. Você baixa e instala o plugin aquela tradicional instalação ou pelo painel ou via ftp. Plugin instalado e ativado você irá criar um arquivo “qualquer_nome.php” no inicio do arquivo adicionamos a seguinte bloco de código :


/*
Single Post Template: [Nome que identifica o template no painel de posts]
Description: Descrição para ajudar na escolha do template
*/
?>

Esse esquema diferente do primeiro não cria uma single pra cada categoria e sim um template de forma livre para qualquer tipo de post. O plugin de single post template você encontra aqui: http://wordpress.org/extend/plugins/single-post-template/

Outro plugin que tem um funcionamento similar é o Custom post template : http://wordpress.org/extend/plugins/custom-post-template/

A terceira forma é trabalhando com conditional tags(tags condicionais), são funções que funcionam como perguntas lógicas que retornam true ou false essas funções utilizamos juntos com um “if” para fazer o tratamento de uma determinada situação. Então visualizando esse panorama vamos fazer o tratamento da seguinte forma dentro do arquivo single.php adicionamos somente as conditional tags e para cada caso fazemos um include php para importar o php que desejamos. Vamos a um exemplo :


   $post = $wp_query->post;
   if ( in_category('3') ) {
     include(TEMPLATEPATH . '/single_para_categoria_3.php');
   } else {
     include(TEMPLATEPATH . '/single_para_outras_categorias.php');
   }
?>

O código acima é dessa forma sem mais, a historia vai ser resolvida nos arquivos single_para_categoria_3.php e single_para_outras_categorias.php é lá onde estarão o loop e toda a estrutura da página. A desvantagem de trabalhar dessa forma é que para cada categoria temos que fazer um tratamento, se caso for criada uma categoria nova tem que entrar no single.php e adicionar mais uma condicional.

Mais infos sobre conditional tags : http://codex.wordpress.org/Conditional_Tags

Introdução a canvas(HTML5) – parte 2

Fellyph — Fri, 11 Nov 2011 19:54:55 +0000

Com um delay de um ano estou dando continuidade a um post sobre canvas Introdução a canvas. Isso porque eu escutei de um amigo no face “oh fellyph achei um post seu sobre canvas, não tem nada lá”. Realmente tem pouca coisa no post foi um post bem básicão, só utilizar a tag canvas e criar um box. Os demos desse post vou adicionar no “JSdo.it”.

Neste Post vou tratar um pouco mais sobre a questão de cores, linhas e animação.

Revisando um pouco sobre cores função que define a cor de um context é a função fillStyle() com ela podemos passar os valores da seguinte forma:

ctx.fillStyle = "black";  
ctx.fillStyle = "#000000";  
ctx.fillStyle = "rgb(0,0,0)";  
ctx.fillStyle = "rgba(0,0,0,1)";

No exemplo abaixo vou fazer um loop com quadrados randomizando duas posição x , y e sua transparência :


	
             <script language="javascript"> 
var posx = 0;
var posy = 0;
var alphaRandom = 0;
 
function init(){
	var ctx = document.getElementById('meucanvas').getContext('2d');
 
 	for(i= 0; i < 250; i++){
	    	posx = Math.random()*340;
	    	posy = Math.random()*340;
	    	alphaRandom = Math.random();
 
  		ctx.fillStyle = 'rgba(230,0,0,' + alphaRandom +')' ;
	    	ctx.fillRect(posx, posy, 15, 15);
    	}
 
}
             script>

O resultado é o seguinte :

Quadrados randomicos – jsdo.it – share JavaScript, HTML5 and CSS

O demo desse exemplo completo vocês conferem aqui : http://jsdo.it/Fellyph.Cintra/3ujk

Além das função “fillRect” podemos trabalhar com, “strokeRect”, “clearRect”, “arc” e “lineTo”.
strokeRect cria uma forma retangular com apenas seu contorno(linhas), clearRect limpa a área especificada e a função arc serve para criar arcos e circulos junto com a lineTo ela entra no grupo dos path, gosto de traduzir um path como um elemnto complexo. Para trabalhar com o grupo dos “paths” precisamos de um número maior de passos que vamos ver depois desse primeiro exemplo.

Vamos a um exemplo usando as 3 funções(fillRect, strokeRect, clearRect) abaixo vou mostrar apenas a parte do js:

function init(){
   	var ctx = document.getElementById('meucanvas').getContext('2d');
 
    	for(i = 0 ; i < 4; i++ ){ 
	    for(j = 0; j < 4; j++ ){
		var posx = j * 100
		var posy = i * 100    
	    	ctx.fillStyle = 'rgb(230,0,0)' ;
    		ctx.fillRect(posx,posy,100,100);
		ctx.clearRect(posx  + 10, posy + 10,80,80);
		ctx.strokeRect(posx + 25,posy + 25,50,50);
	    }
	} 
 
}

o resultado é o seguinte :

padrão – jsdo.it – share JavaScript, HTML5 and CSS

Como podemos ver o fillStyle interfere apenas no fillRect o desenho gerado pela strokeRect não, isso por que função strokeRect trabalha com linhas para modicar as cores das linhas trabalhamos com a função strokeStyle que trabalha com os mesmos parâmetros utilizados pela função fillStyle.

Para trabalhar com elementos complexos precisamos de um número maior de passos em relação ao exemplo anterior. trabalhamos com quatro funções : beginPath(), closePath(), stroke(), fill(). No próximo exemplo vou usar um exercício que tinha usado em um post trabalhando com gráficos com Flash. Vou converter esse exercício em canvas.

function init(){
 
   	var ctx = document.getElementById('meucanvas').getContext('2d');
	// separei em três funções cada elemento do meu desenho
    	// uma para criar o quadrado, outra para o lozango e o circulo
    	criaQuadrado(ctx);
	criaLosango(ctx);
	criaBola(ctx);
 
}
 
function criaQuadrado(_ctx){
			_ctx.fillStyle = "#008300";
			_ctx.fillRect(0,0,330,240);
		}
 
//essa função é resposável por criar o losango
function criaLosango(_ctx){
 
 		_ctx.fillStyle = "#FCFF00";
   	  	_ctx.beginPath();
   		_ctx.moveTo(165, 10);
		_ctx.moveTo(310,120);
		_ctx.lineTo(165,230);
		_ctx.lineTo(20 , 120);
		_ctx.lineTo(165,10);
    		_ctx.fill();
		_ctx.closePath(); 	
}
 
// essa função é responsável por criar um circulo
function criaBola(_ctx){
   	 _ctx.beginPath();
	_ctx.fillStyle = "#00027F";
	_ctx.arc(165,120,70,0,Math.PI*2,true);
   	_ctx.fill();
   	 _ctx.closePath(); 
 
}

Como no exemplo anterior deixei só a parte do js o exemplo completo você confere aqui : http://jsdo.it/Fellyph.Cintra/c5qu e o resultado é o seguinte :

Exemplo gráficos – jsdo.it – share JavaScript, HTML5 and CSS

Nos primeiros testes vi que a coisa funciona bem manual definir cada elemento dentro do contexto. Também tentei adicionar eventos de click, mas essa questão tem que ser tratado de uma forma especial porque o evento é aplicado em todo o canvas e não no contexto. Então se eu crio um quadrado dentro do canvas eu preciso tratar o over dele utilizando x e y mas claro que alguma alma iluminada já fez uma biblioteca para essa questão. Quando eu fiz o primeiro post sobre canvas achei essa biblioca jCotton quando estava pesquisando para o segundo post achei a biblioteca Kinetic JS. Deixo esses dois links para vocês pesquisarem serão base para meu próximo post sobre canvas.

Minha fonte para o post foi MDN Mozilla developer network

Vou parando por aqui e até o próximo post

Personalizando o resumo(the_excerpt) do WordPress

Fellyph — Thu, 18 Aug 2011 01:14:11 +0000

Um dos recursos que o WordPress oferece na leitura do conteúdo do post é a função de resumo(the_excerpt()), No painel editar post existe um campo chamado resumo. Mas nas versões 3.1 ou superiores do wordpress esta função ficou oculta. Para exibir esta opção vá em opções de tela no canto superior direito dentro do painel de posts, como na imagem abaixo:

Fazendo isso um campo de resumo aparecerá em sua página de edição de post:

Cadastrando essa informação, se você quer exibi-lá é só utilizar a função the_excerpt() dentro de seu loop.

Se o campo resumo não for definido, o WordPress criará um resumo automaticamente através do que foi postado no conteúdo principal de seu post. Por padrão esse resumo automático possui 55 caracteres, para alterar essa quantidade de caracteres temos que adicionar um função no arquivo functions.php em seu tema. O functions.php resumindo em meias palavras é o arquivo que define algumas funções extras do seu tema, além de criar menus, shortcodes e adicionar filtros para conteúdo como vamos fazer agora. Então, utilizando a função add_filter ela ajuda a modificar a saída de algumas informações no WordPress.

Para editar o tamanho do resumo adicionamos o seguinte código no functions.php :

function novo_tamanho_do_resumo($length) {
	return 30;
}
add_filter('excerpt_length', 'novo_tamanho_do_resumo');

No código acima modificamos o tamanho do resumo de 55(valor padrão) para 30 caracteres.

Quando não cadastramos nada no campo resumo, o WordPress resgata parte do conteúdo do post e adiciona no final do resumo [...] para sinalizar que o possui mais texto naquele conteúdo. Para modificar essa sinalização também dentro do functions.php adicionamos o seguinte filtro:

//Para versões 2.9 ou superiores
 
function new_excerpt_more($more) {
	return '...';
}
 
add_filter('excerpt_more', 'new_excerpt_more');

 
//para versão 2.8.x  e anteriores 
 
function new_excerpt_more($excerpt) {
	return str_replace('[...]', '...', $excerpt);
}
add_filter('wp_trim_excerpt', 'new_excerpt_more');

Nesse caso temos uma mudança de código entre versões antes e depois da 2.9,mas nos dois momentos trocamos o ‘[...]‘ por ‘…’.

Além dessa possibilidade também temos uma segunda opção adicionar um link ao final so resumo, trocar o ‘[...]‘ por um link leia mais o código ficaria da seguinte forma:

function add_resumo_com_link($more) {
       global $post;
	return '. get_permalink($post->ID) . '">Leia mais +';
}
add_filter('excerpt_more', 'add_resumo_com_link');

Como fazer uma exibição Full Screen em AS3

Fellyph — Wed, 23 Feb 2011 17:39:41 +0000

Antes com velho as2 para habilitar o full screen você utilizava o comando fscommand. No AS3 a história mudou, para trabalhar com full screen você tem que acessar o stage e modificar a propriedade “displayState” ela específica o estado de exibição a ser usado. Essa propriedade trabalha com a classe StateDisplayState.

A classe StageDisplayState é simplesmente responsável por definir os valores válidos pela propriedade “displayState”. StateDisplay guarda dois valores

StageDisplayState.FULL_SCREEN : Define o modo de exibição tela cheia full screen

StageDisplayState.NORMAL : Define o modo de exibição padrão do Flash

Lembrado que qualquer entrada de teclado é desabilitada quando o Stage está no modo fullScreen.

O código para habilitar o modo fullScreen em as3 é da seguinte forma :

import flash.display.StageDisplayState;
 
// em meu arquivo Flash eu adicionei um movieClip com o nome de instância "cliqueTela"
 
 
// adicionando um listener para quando clicar no botão verificar 
cliqueTela.addEventListener(MouseEvent.CLICK, onClick)
 
cliqueTela.buttonMode = true;
cliqueTela.alpha = 0.5; 
 
//função para verificar se o stage está em fullScreen se estiver 
function goFullScreen():void{
	//verifica e que estado o Flash está "se estiver no estado normal habilita o modo fullScreen"
	if (stage.displayState == StageDisplayState.NORMAL) {
		cliqueTela.alpha = 1;
        stage.displayState = StageDisplayState.FULL_SCREEN;
    } else {
		cliqueTela.alpha = 0.5
        stage.displayState = StageDisplayState.NORMAL;
    }
}
 
 
function onClick(event:MouseEvent):void
{
    goFullScreen();
}

Para o modo full screen funcionar é preciso fazer uma alteração em nosso arquivo HTML habilitar a exibição full screen do contém Flash. Por exemplo mostrar um trecho do código HTML:

Se estiver utilizando swfobject o código fica assim :

Como criar um crossdomain.xml para FLASH

Fellyph — Sat, 29 Jan 2011 22:30:11 +0000

Alguma vez você já tentou acessar os dados e o flash retornou um erro de sandbox, esse erro é disparado por motivo de segurança, o flash player bloqueia o acesso a dados entre domínios diferentes, isso para garantir que seu conteúdo não seja acessado por terceiros sem permissão.

Esse erro pode ser até disparado dentro do seu próprio site,por exemplo, você tentar carregar uma imagem dentro do seu site pelo seu caminho completo http://www.meusite.com.br/minhaImagem.jpg e ao carregar o site no endereço http://meusite.com.br/ sem o www. ele considera que o conteúdo está sendo acessado de dominios diferentes. Uma solução para isso seria usar caminho relativo do arquivo e o problema será resolvido( “minhaImagem.jpg”).

Mas se for o caso realmente de carregar conteúdo de um outro domínio. Então será necessário informar ao flash player que é previsto esse acesso ao conteúdo de outro domínio. Esses dados nos podemos passar por um arquivo xml que fica na raiz de nosso site, o crossdomain.xml.

O arquivo crossdomain funciona da seguinte forma:

 version="1.0"?> 
> 
     domain="*.meusite.com" /> 
     domain="www.siteparceiro.com" /> 
     domain="192.0.34.122" /> 
>

Como podemos ver um arquivo xml simples que tem o nó principal e dentro dele podemos adicionar um ou mais domínios em nossa lista de exceções, isso dentro do nó , no exemplo tem 3 tipos de dados que podemos passar o domínio curinga sinalizado pelo “*”, um domínio simples ou endereço ip do site que queremos carregar.

O Flash player por padrão antes de fazer qualquer requisição ele procura o arquivo crossdomain.xml, fazendo isso nós estamos garantido a comunicação entre domínios diferentes.

Primeiro post de 2011 demorou mais saiu.

Tutorial HypeFramework – Joshua Davis

Fellyph — Fri, 03 Dec 2010 16:52:28 +0000

Um dos palestrantes do FlashCamp Rio é o Joshua Davis Designer conhecido mundialmente por elaborar trabalhos gráficos que utilizam códigos. Alguns trabalhos realizados pelo Joshua Davis Abaixo:

A base de técnica o Joshua Davis disponibilizou em seu framework o Hypeframework : http://www.hypeframework.org/, um framework com uma série de funcionalidades que ajudam no desenvolvimento de gráficos e animações complexas.

Então nesse post vamos fazer um pequeno tutorial para utilizar algumas classes legais do Hype framework. Inicialmente vamos baixar o zip com o pacote de classes :

http://github.com/downloads/hype/hype/HYPE_1_1_8.zip

Dentro do zip do link acima em uma série de exemplos utilizando as principais classes do Hype, tanto em AS puro como utilizando o Flash IDE. Para esse tutorial vou utilizar as3 puro com o Flash Develop + Flex SDK se você não sabe usar essa parceria open source da uma olhada nesse post:

http://www.fellyph.com.br/blog/tutoriais/flash-develop-flex-sdk/

As versões mais recentes do Flash Develop já vem uma opção de intergrar o FLEX SDK na instalação. Se tudo estiver pronto vamos ao Primeiro exemplo vou utilizar o gridLayout classe utilizada para montar layouts em grid, seu funcionamento é bastante simples. Quando inicializamos uma classe passamos os seguintes paramêtros:

new GridLayout(posição inicial x, posção inicial y, espaçamento x, espaçamento y, número de colunas )

Agora vamos para um exemplo prático criei duas classes com o nome Bola e outra Grid :

package
{
	import flash.display.Sprite;
 
	public class Bola extends Sprite
	{
		public function Bola()
		{
			graphics.beginFill(0xFFFFFF*Math.random());
			graphics.drawCircle(0,0,15);
			graphics.endFill();
		}
	}
}

A classe Bola é uma classe simples que como o nome sugere cria uma circulo de 15px. Abaixo vou mostrar o código da classe Grid que para aplicar os elementos no palco usando a classe GridLayout. Já vou postar o código comentado:

package
{
	import flash.display.Sprite;
 
	import hype.extended.layout.GridLayout;
 
	public class Grid extends Sprite
	{
		// criei uma variável para controlar linhas e colunas
		public var linhas 	:Number = 8;
		public var colunas 	:Number = 12;
		//criei meu GridLayout
		public var layout	:GridLayout;
		public var total	:Number;
 
		public function Grid()
		{
			init()
		}
 
		public function init():void{
			//defini o número total de elementos de acordo com
			//o número de linhas e colunas
 
			total = linhas * colunas;
			//inicializando o gridLayout
			//passamos como parâmetro :
			//(a posição inicial x, a posição inicial y, espaçamento x , espaçamento y , número de colunas)
			layout = new GridLayout(50,50,40,40,colunas);
 
			//vou executar o for de acordo com o total de elementos
			for(var i:int; i &lt; total;i++){
				var item:Bola = new Bola();
				//aplicando o gridLayout nos elementos inicializados
				layout.applyLayout(item);
				addChild(item);
			}
		}
 
	}
}

O Funcionamento é básico:

1 – Criar uma GridLayout
2 – Definir os parâmetros do Grid
3 – Aplicar o GridLayou a cada elemento para fazer o posicionamento;

E o resultado que temos é o seguinte:

(Please open the article to see the flash file or player.)

Outra classe interessante do HypeFramework é o SimpleProximity ela faz uma interação com uma propriedade de elemento de acordo com a proximidade ao seu raio, que propriedade vai ter interação e a largura do definido na classe. Para entender melhor a classe vamos a um exemplo prático: Vou criar uma classe Proximidade vou usar a base da classe Grid vai mudar apenas poucas linhas em relação a classe anterior.

Segue o código abaixo :

package
{
	import flash.display.Sprite;
 
	import hype.extended.behavior.SimpleProximity;
	import hype.extended.layout.GridLayout;
 
	public class Proximidade extends Sprite
	{
		// criei uma variável para controlar linhas e colunas
		public var linhas 	:Number = 8;
		public var colunas 	:Number = 12;
		//criei meu GridLayout
		public var layout	:GridLayout;
		public var total	:Number;
 
 
		public function Proximidade()
		{
			init()	
		}
 
		public function init():void{
			//defini o número total de elementos de acordo com
			//o número de linhas e colunas
 
			total = linhas * colunas;
			//inicializando o gridLayout 
			//passamos como parâmetro :
			//(a posição inicial x, a posição inicial y, espaçamento x , espaçamento y , número de colunas) 
			layout = new GridLayout(50,50,40,40,colunas);
 
			//vou executar o for de acordo com o total de elementos 
			for(var i:int; i < total;i++){
				var item:Bola = new Bola();
				//aplicando o gridLayout nos elementos inicializados
				layout.applyLayout(item);
 
				//utilizando a Classe SimpleProximity
				var prox:SimpleProximity = new SimpleProximity(item, "scale", 0.8,0.4,1,1.8,150);
				// defini que ele vai trabalhar com a propriedade scale 
				//ela serve tanto para o scaleX como para o scaleY
				// defini em seguida que ele vai ter uma elasticidade 0.8 e um ease 0.4
				// depois definir os valor minimo e o maximo 
				//e por fim o raio para interação
 
				//dando o start no prox para ficar acompanhando a posição d
				//do mouse em relação ao item				
				prox.start();
 
				addChild(item);
			}	
		}
 
	}
}

O código acima já foi comentado e o resultado é o seguinte :

(Please open the article to see the flash file or player.)

Podemos usar essas duas classes para fazer uma menu parecido com o menu inferior do Mac, agora dessa vez vamos montar apenas uma linha, vamos criar agora uma classe com o nome Menu e Fazer algumas modificações na classe Bola como podemos conferir abaixo:

package
{
	import flash.display.Sprite;
 
	public class Bola extends Sprite
	{
		public function Bola()
		{
			graphics.beginFill(0xFFFFFF*Math.random());
			//muda o ponto y para o "registration" ficar no canto inferior
			// ao centro
			graphics.drawCircle(0,-10,12);
			graphics.endFill();
		}
	}
}

Agora a classe Menu:

package
{
	import flash.display.MovieClip;
 
	import hype.extended.behavior.SimpleProximity;
	import hype.extended.layout.GridLayout;
 
	public class Menu extends MovieClip
	{
		public var colunas 	:Number = 10;
		public var layout	:GridLayout;
 
		public function Menu()
		{
			init()
		}
 
		public function init():void{
			// vou usar o espaçamento x 50 
			//e o espaçamento y vou aplicar no meio do stage
			layout = new GridLayout(50,stage.stageHeight/2,50,40,colunas);
 
			//vamos usar o número de colunas para limitar o for
			//assim  ter apenas uma linha
			for(var i:int; i < colunas; i++){
				var item:Bola = new Bola();
				layout.applyLayout(item);
				var prox:SimpleProximity = new SimpleProximity(item, "scale", 0.6,0.4,1,1.9,100);
				prox.start();
				addChild(item);
			}
		}
	}
}

E o resultado é o seguinte :
(Please open the article to see the flash file or player.)

Como podemos ver algumas classes se olharmos com cuidados podemos encontrar soluções simples para o nosso dia-a-dia. Mostrei essas duas classes que fazem parte de um conjunto de 18 classes, tem muita coisa legal a ser explorada no Hype posso dizer que o Joshua Davis é um cara muito foda. Vou tentar escrever mais posts sobre o Hype. Mas hoje vou encerrando esse tutorial por aqui.

Introdução a Canvas (HTML5)

Fellyph — Sun, 01 Aug 2010 05:08:06 +0000

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

Evento Change TextField – Como contar o número de caracteres

Fellyph — Fri, 30 Jul 2010 01:32:37 +0000

A Classe TextField tem 4 eventos: change, link, scroll e input. Nesse tutorial vou trabalhar com o evento “change” para fazer um pequeno contador de caracteres. O evento change como o nome sugere é chamado quando o inputText é alterado. Então vamos começar o tutorial:

package
{
	//importando as classes necessárias
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldType;
 
	/**
	 * ...
	 * @author Fellyph Cintra
	 */
	public class ContaTexto extends MovieClip
	{
		//
		public var campoInput	:TextField;
		public var campoConta	:TextField;
		public var titulo		:TextField;
 
		public var contador		:Number = 0;
		public var maximo		:Number = 140;
 
		public function ContaTexto()
		{
			// instanciando os campos
			campoConta 	= new TextField();
			campoInput 	= new TextField();
			titulo 		= new TextField();
 
			//definindo nosso campo input
			campoInput.type = TextFieldType.INPUT;
 
			//definindo a quantidade maxima de caracteres que é 140
			campoInput.maxChars = maximo;
 
			//adicionando os campos ao palco
			addChild(campoInput);
			addChild(campoConta);
			addChild(titulo);
 
			titulo.text = "digite seu texto";
			titulo.x = 50
			titulo.y = 30
 
			//definindo algumas caracteristicas do textIpunt
			campoInput.width		= 200;
			campoInput.height 		= 80;
			campoInput.border		= true;
 
			// definir como multline
			campoInput.multiline	= true;
 
			// definir a quebra de linha quando chegar no final
			campoInput.wordWrap		= true;
			campoInput.x 			= 50;
			campoInput.y 			= 50;
 
			campoConta.width 		= 50;
			campoConta.height 		= 20;
			campoConta.border		= true;
			campoConta.y 			= 135;
			campoConta.x 			= 200;
 
			campoConta.text 		= "140";
 
			//adicionando o evento change ao campo de texto
			//notem que change não um TextEvent e sim um Event
			campoInput.addEventListener(Event.CHANGE, onChange);
		}
 
		private function onChange(e:Event):void
		{
			// subitraindo o numero maximo pela quantidade de caracteres
			campoConta.text = maximo - campoInput.text.length  + "";
		}
 
	}
 
}

O código já está comentado para facilitar o entendimento, mas o princípio básico é:

Definir a quantidade máxima de caracteres
Adicionar o evento de listener
E fazer o tratamento na função que o listener chama

o resultado vai ser o seguinte:

(Please open the article to see the flash file or player.)

Restringindo a entrada caracteres em um inputText com ActionScript 3.0

Fellyph — Wed, 30 Jun 2010 23:23:08 +0000

InputText faz parte da classe TextField que é responsável pela exibição de entrada de texto no conteúdo Flash. Então vamos para o nosso tutorial express, criei uma class com o nome de TextExample esse primeiro passo vamos adicionar um campo de texto ao palco vou comentar todo o código.

package
{

	//importando as classes necessárias

	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldType;

	public class TextExample extends Sprite
	{
		// criando um campo de texto
		public var tf:TextField;

		public function TextExample()
		{
			//instanciando um campo de texto novo
			tf = new TextField();

			// propriedades
			tf.height = 20;
			tf.width = 200;
			tf.x = 10;
			tf.y = 40;

			//definindo o tipo do campo de texto para input
			tf.type = TextFieldType.INPUT;
			//criando uma barra para visualizar melhor o campo de texto
			tf.border = true;

			//adicionando o campo de texto no palco
			addChild(tf);
		}

	}

}

A propriedade que restringe a entrada de dados é “.restrict” ela recebe uma String. Quando ele não é definido ele aceita qualquer tipo de entrada, para permitir uma sequência de caracteres usamos o hífen “-”, por exemplo, se que quiser permitir apenas números em meu campo de texto vou usar “0-9″, se quiser umas apenas letras minúsculas “a-z”.
Para negar a permissão de um caracter específico usamos o acento circunflexo “^”, por exemplo, “^1-3″ exclui a entrada dos números de 1 a 3. Vamos agora para a prática:

package
{

	//importando as classes necessárias

	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldType;

	public class TextExample extends Sprite
	{
		// criando um campo de texto
		public var soNumeros:TextField;
		public var soLetras:TextField;

		public function TextExample()
		{
			//instanciando um campo de texto novo
			soNumeros 	= new TextField();
			soLetras 	= new TextField();

			// propriedades de soNumeros
			soNumeros.height = 20;
			soNumeros.width = 200;
			soNumeros.x = 10;
			soNumeros.y = 40;

			//permitindo apenas numeros
			soNumeros.restrict = "0-9";

			//defininindo o tipo do campo de texto para input
			soNumeros.type = TextFieldType.INPUT;
			//criando uma barra para visualizar melhor o campo de texto
			soNumeros.border = true;

			// propriedades soLetras
			soLetras.height = 20;
			soLetras.width = 200;
			soLetras.x = 230;
			soLetras.y = 40;

			//permitindo apenas letras maiúsculas e minúsculas
			soLetras.restrict = "a-z A-Z";

			//defininindo o tipo do campo de texto para input
			soLetras.type = TextFieldType.INPUT;
			//criando uma barra para visualizar melhor o campo de texto
			soLetras.border = true;

			//adicionando o campo de texto no palco
			addChild(soNumeros);
			addChild(soLetras);
		}

	}

}

E o resultado seria o seguinte :

(Please open the article to see the flash file or player.)

Se no exemplo acima quiséssemos excluir a entrada de algum caracter funcionaria da forma abaixo:

// seria permitido apenas números menos e número 5
soNumeros.restrict = "0-9 ^5";

Esse exemplo também seria aplicável em qualquer tipo de caracter, fechamos por aqui esse tutorial.

Tutorial Pixel bender + Flash

Fellyph — Fri, 05 Mar 2010 06:00:54 +0000

No post passado falei um pouco do pixel bender se não viu tem o link abaixo :

Introdução a Pixel Bender ToolKit

Então vamos lá vou utilizar o código do tutorial passado, mas antes temos que exportar o nosso script para o formato que o Flash suporta. então com o código anterior aberto.

kernel NewFilter
&lt;   namespace : "Your Namespace";     vendor : "Your Vendor";     version : 1;     description : "your description"; &gt;
{
    input image4 src;
    output pixel4 dst;
 
    void
    evaluatePixel()
    {
        dst = sampleNearest(src,outCoord());
        dst.r += 0.4;
        dst.b -= 0.4;
 
    }
}

Vamos exportar esse filtro para o Flash da seguinte forma: menu superior > file > Export Kernel Filter for Flash.

O pixel bender irá exportar uma extensão “.pbj” escolha o mesmo local onde será salvo seu Flash. Agora vamos para o Flash crie um novo documento. E importar a imagem “YellowFlowers.png” essa imagem você encontra no seguinte endereço:

* Windows: C:\Program Files (x86)\Adobe\Adobe Utilities\Pixel Bender Toolkit\sample images
* Mac OS: Mac HD/Applications/Utilities/Adobe Utilities/Pixel Bender Toolkit/sample images

Jogue a imagem no palco e converta em movieclip:

Coloque o nome de instância do movieclip “flor”:

Agora vamos ao código :

//criamos uma requisição com o endereço do nosso filtro
var urlRequest:URLRequest = new URLRequest("pixelbender.pbj");
 
//instaciamos um novo URLLoader para carregar nossa requisição
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
 
//adicionamos um evento para quando
urlLoader.addEventListener( Event.COMPLETE, aplicarFiltro);
urlLoader.load(urlRequest);
 
function aplicarFiltro( event:Event ):void
{
  	var shader:Shader = new Shader( event.target.data );
	var shaderFilter:ShaderFilter = new ShaderFilter( shader );
	flor.filters = [ shaderFilter ];
}

Quando o filtro for carregado o Evento COMPLETE irá chamar a função “aplicarFiltro” dentro da função criamos uma variável do tipo Shader: é o kernel do pixel bender no Flash ele cuida de aplicar as funções dos filtros em cada pixel da imagem. Gerencia o input e o output de uma ou mais imagens.
Na linha seguinte temos o ShaderFilter ele é o filtro em si que é aplicado nos DisplayObjects, aplicamos diretamente da propriedade filters passando um array [] como podemos ver na última linha. Se tivessemos trabalhando com BitmapData usaríamos o método BitmapData.applyFilter().

Agora vou criar um novo filtro no pixel bender para ser usado no flash :

kernel NewFilter
&lt;   namespace : "Your Namespace";     vendor : "Your Vendor";     version : 1;     description : "your description"; &gt;
{
    input image4 src;
    output pixel4 dst;
    // estou criando um paramento "azul" do tipo float que seu valor minimo é -1;
   // o valor máximo é 1 e o valor default é 0
    parameter float azul
    &lt;         minValue: -1.0;         maxValue: 1.0;         defaultValue: 0.0;     &gt;;
 
    // criei um parametro com o nome vermelho
    parameter float vermelho
    &lt;         minValue: -1.0;         maxValue: 1.0;         defaultValue: 0.0;     &gt;;
    // e um parametro com o nome verde
    parameter float verde
    &lt;         minValue: -1.0;         maxValue: 1.0;         defaultValue: 0.0;     &gt;;
 
    void
    evaluatePixel()
    {
 
        dst = sampleNearest(src,outCoord());
        // no meu output eu mutiplico cada parâmetro em um canal especifico
        // float4 ele trabalha com os 4 canais vermelho, verde, azul e alpha
        dst += float4(0.5*vermelho, 0.5*verde, 0.5 * azul, 0.0);
    }
}

Se você rodar o script no Pixel Bender irá notar que aparecerá 3 slides no canto direito da IDE do Pixel Bender.

Export para o script pra o formato aceito para o flash, e vamos montar o nosso exemplo:

Estou utilizando o fla antigo com o moviecliep “flor” mas agora eu vou criar 3 botões um pra cada canal, azul, verde e vermelho como na figura acima. Vou colocar o nome de instância de cada botão, btAzul, btVerde, btVermelho.

E agora vamos ao código:

var shader:Shader;
var shaderFilter:ShaderFilter;
 
var urlRequest:URLRequest = new URLRequest("pixelbender.pbj");
var urlLoader:URLLoader = new URLLoader();
 
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener( Event.COMPLETE, applyFilter );
urlLoader.load(urlRequest);
 
function applyFilter( event:Event ):void
{
	//aplicando o filtro
  	shader = new Shader( event.target.data );
	shaderFilter = new ShaderFilter( shader );
	flor.filters = [ shaderFilter ];
 
	//adicionando o evento de clique aos botões
	btAzul.addEventListener(MouseEvent.CLICK, setAzul);
	btVerde.addEventListener(MouseEvent.CLICK, setVerde);
	btVermelho.addEventListener(MouseEvent.CLICK, setVermelho);
}
 
function setAzul(e:MouseEvent):void{
	// mexendo com os valores dos parameters que criamos
	// adicionando 1 ao canal azul e zerando os demais
	shader.data.azul.value = [1];
	shader.data.verde.value = [0];
	shader.data.vermelho.value = [0];
	flor.filters = [ shaderFilter ];
}
 
function setVerde(e:MouseEvent):void{
	// adicionando 1 ao canal verde e zerando os demais
	shader.data.verde.value = [1];
	shader.data.azul.value = [0];
	shader.data.vermelho.value = [0];
	flor.filters = [ shaderFilter ];
}
 
function setVermelho(e:MouseEvent):void{
	shader.data.vermelho.value = [1];
	shader.data.azul.value = [0];
	shader.data.verde.value = [0];
	flor.filters = [ shaderFilter ];
}

Quando eu carrego o filtro do pixel bender eu adiciono os eventos de clique que contém as funções que manipulam os valores dos canais.

O resultado vai ser o seguinte:

(Please open the article to see the flash file or player.)

Uma boa referência é o blog pixelero:

http://pixelero.wordpress.com/