Design e programação criativa na web.

Archive for the ‘tutoriais’ Category

Subpixel Rendering e Subpixel Hinting

Subpixel rendering

Anti-Aliasing and Sub-Pixel Hinting

A tipografia na web começa a dar agora os primeiros passos com as chamadas web fonts. Tanto utilizando flash, javascript ou plataformas como Google Font Directory, Cufón ou TypeKit. De repente abriu-se um novo mundo para os utilizadores e criadores web no que diz respeito à liberdade tipográfica.

Mas apesar de termos agora á nossa disposição uma vasta colecção de webfonts criadas a pensar na web e nos monitores de hoje em dia, ainda encontramos vários problemas que não existem, por exemplo, em off-line.

A tipografia impressa desfruta de altas resoluções (DPI) com o qual consegue mostrar todos os detalhes de uma tipografia. Ao contrario, nos ecrãs de hoje em dia sofremos com os pixeis “fora-de-sitio” e curvas quebradas e pixeladas. Em grande parte devido a baixa resolução da maioria dos ecrãs de hoje em dia (PPI).

A adobe tem algumas ferramentas para tentar resolver este assunto. Por exemplo, o Photoshop. O Photoshop usa uma técnica para suavizar o texto que consiste em vários pixeis acrescentados em diversos tons de cinzento mas não fusionando diferentes canais. Aqui entra em acção uma técnica chamada Subpixel Rendering.

O que é o Subpixel Rendering

Cada pixel apresentado no monitor consiste em 3 cores diferentes: o vermelho, o verde e o azul (RGB). A luminosidade destes subpixels controlada independentemente dá-nos a ilusão de um só pixel colorido e sólido.

O Subpixel Rendering explora a individualidade de cada componente de uma só cor para a aumentar a percepção de resolução do monitor. Consiste no alinhamento perfeito de uma grelha de pixeis e dos seus valores de luminosidade e cor independentes.

Subpixel-hinting no Photoshop

Apesar de o photoshop ter uma forma para isto, esta não utiliza os diferentes canais para criar um anti-alias perfeito, mas sim diferentes tons de cinzentos.

Thomas Maier utiliza uma técnica que facilita a utilização do Subpixel-hinting no Photoshop. Basicamente é uma acção que junta todos os passos necessários para recriar esta “ilusão” de uma maior definição do monitor.

–> Podem descarregar aqui
a sua acção para o photoshop, ou bem, visitar o seu site.

Se querem saber mais sobre este assunto, a Smashing Magazine tem um artigo muito completo sobre o Subpixel Rendering.

Drag and Drop – AS3

Exemplo de como fazer um “drag and Drop” em actionscript 3.

Código

//

mc1.addEventListener(MouseEvent.MOUSE_OVER,traceName);
mc1.addEventListener(MouseEvent.MOUSE_DOWN,arrastar);
mc1.addEventListener(MouseEvent.MOUSE_UP,parar);
mc1.addEventListener(MouseEvent.MOUSE_UP, colisao);

function traceName(event:MouseEvent):void {
trace(event.target.name);
useHandCursor = true;
buttonMode = true
}

function arrastar(evt:MouseEvent):void{
mc1.startDrag();
}
function parar(evt:MouseEvent):void{
mc1.stopDrag();
}

function colisao(evt:MouseEvent):void{
if(mc1.dropTarget){
texto.text = “Dentro”;
}else{
texto.text = “Fora”;
}
}
//

Ficheiro .fla
-> Download

Tutorial Flash, XML com HTML e CSS

Um maneira simples de importar um ficheiro xml para dentro do flash. Desta maneira pode-se importar um textos com as “tags” HTML e criar um ficheiro CSS para que estilizar os diversos elementos. Tenham em conta que o suporte de css no flash limita-se ao standard CSS1.

Código actionscript:

var ficheiro_xml = new XML();

caixa_de_texto.html = true;
ficheiro_xml.ignoreWhite = true;

// –> criar o objecto CSS
var folha_css = new TextField.StyleSheet();
// — carregar CSS
folha_css.load(“nome_da_folha de estilos.css”);
caixa_de_texto.styleSheet = folha_css;

//–>Carregar o XML<–//
ficheiro_xml.onLoad = function(sucesso) {
if (sucesso) {
trace(“sucesso”);
} else {
trace(“ERRO ao carregar o XML!!!”);

}
nome_caixa_texto.htmlText=ficheiro.firstChild.childNodes[0].firstChild.nodeValue;
};
ficheiro_xml.load(“endereço_do_ficheiro.xml”);

/////\\\\

Código XML:

<?xml version=”1.0″ encoding=”utf-8″ ?>

<textos>
<texto1><![CDATA[<html><body><p class=”titulo”>¿Lorem ipsum dolor sit amet, consectetuer<p>
<p class=”texto”>Lorem ipsum dolor sit amet, consectetuer <span class=”span”> Lorem ipsum dolor sit amet, consectetuer.</span> Lorem ipsum dolor sit amet, consectetuer!</p></body></html>]]>

</texto1>
<texto2>2 -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nisl risus, tristique id, ultrices et, varius vitae, magna. Suspendisse nunc. Phasellus sit amet massa. Phasellus mauris. Pellentesque placerat nunc ac ante. Sed luctus venenatis arcu. Nam turpis purus, dictum non, lobortis a, tristique eget, pede.

</texto2>
</textos>

Código CSS:

.titulo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC6600;
font-weight: bold;
}
.texto {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
font-weight: normal;
}

.span {
font-weight: bold;
}

////

Aqui está o zip com todos os ficheiros.
-> Download

Actionscript 3 – Tips

Alguns bons exemplos e tutoriais. Muito úteis.

http://www.kirupa.com/forum/showthread.php?t=223798

Redimensionamento proporcional de uma imagem – AS2

Algo que poderá será util. É simples mas nunca tinha pensado nisso até ser necessário. Por isso pensei um bocado e aqui está. 🙂

Quando se redimensiona o stage a imagem redimensiona mas porporcionalmente. Para isso só foi necessario calcular a proporçao (ratio).

///AS2.0 – Redimensionamento proporcional///

Stage.align=”TL”;

onLoad = function () {
ratio = imagem._width/imagem._height;
trace(ratio);
imagem._width = Stage.width;
imagem._height = imagem._width / ratio;
};
var myListener:Object = new Object();
myListener.onResize = function() {
imagem._width = Stage.width;
imagem._height = imagem._width / ratio;

};
Stage.addListener(myListener);

///AS2.0 – Redimensionamento proporcional///

Eliot Jay Stocks

Um site muito interessante, tanto do ponto de vista do seu portfolio como do seu magnífico blog cheio de artigos de novidades e conselhos bastante úteis. Vale a pena o click.

Actionscript 3 – Tutoriais Video

Tutoriais video de algumas técnicas em as3.

Metah
GotoAndPlay
Adobe Design Center
GotoAndLearn
Movie Library – Lynda.com

Criar um jogo com Actionscript 3

Nuvem de etiquetas