Matéria-Aula: Imaging Lingo – Parte 1

Aprenda a usar o Imaging Lingo

O Imaging Lingo é um conjunto de funções e comandos especiais para manipular e processar imagens.  É parte da linguagem Lingo, usada pelo Adobe Director.

A linguagem Lingo é muito poderosa e o Imaging Lingo permite criar efeitos especiais com as imagens e fotografias, recortar as imagens, mudar a cor, girar, distorcer,  etc.

Para criar uma variável para armazenar ou processar uma imagem use um comando como abaixo:

i = image(640,480,32)

Basicamente os 3 parâmetros são largura, altura e número de bits da imagem. No caso acima estamos criando uma váriavel com um espaço para armazenar uma imagem de 640 pixels de largura e 480 pixels de altura e 32 bits de cor.

Esse negócio de bits é o seguinte: são usados 24 bits para definir a cor da seguinte maneira: 8 bits para o Red (vermelho), 8 bits para o Green (verde) e 8 bits para o Blue (azul), assim somando dá 24 bits.

Se uma imagem tem 32 bits significa que além dos 24 bits da cor tem também mais 8 bits reservados para representar o grau de transparência de cada cor.

Esses 8 bits adicionais são chamados de canal alpha. Então uma imagem de 32 bits normalmente tem canal alpha (24 bits de cor + 8 bits de alpha).

Para quem não sabe o que são bits, eles são unidades de informação , são números que representam os dados manipulados pelo computador.  Neste caso os números representam as cores.

Você pode também indicar um quarto parâmetro opcional pra definir a paleta de cores a ser usada.

Veja abaixo :

i = image(100, 100, 8, #grayscale)

Neste caso será criada uma variável com uma imagem de 8 bits em tonalidades de cinza. A paleta é o #grayscale.

imagens também podem ser extraídas de outras fontes : Veja os exemplos abaixo:

i = member(1, 1).image

pega a imagem do membro numero 1 do castlib 1 e guarda na variável “i”.

ou

i = member(“foto”).image 

pega a imagem do membro chamado “foto” e armazena na váriável “i”.

o comando abaixo é quase idêntico ao que foi mostrado acima mas não está sendo mais usado:

i = member(“foto”).picture

Uma opção interessante é pegar a imagem do Stage (tela do computador). Inclusive você também pode fazer o contrário , através do Lingo modificar a imagem do Stage diretamente , isto pode ser muito poderoso para fazer efeitos , sobreposições e muito mais.

Veja abaixo:

i = (the stage).image

Alguns tipos de sprites permitem que vc pegue a sua imagem diretamente. Isto não é muito comum mas se vc usar um sprite com Real Media, vc poderá colocar um sprite escondido na tela e pegar o vídeo que estiver sendo executado no sprite e transferir para um objeto 3d. Com isto vc poderá fazer rodar um vídeo em realtime dentro de um sprite do tipo shockwave 3d.

Veremos isso mais adiante em uma próxima aula.
 
Bem, uma vez que vc tem uma váriavel com uma imagem vamos ver o que vc poderá fazer com ela..

Para isso vamos começar devagar .. Em primeiro lugar vc já deve saber que uma imagem é na verdade uma coleção de pontinhos chamados de pixels , cada pontinho pode ter uma cor diferente. Em uma imagem de 640 por 480 temos um total de 640 x 480 = 307200 pontos ou pixels , cada pixel podendo ter uma cor entre 16 milhoes de cores disponíveis e mais 256 níveis de transparência , caso a imagem seja de 32 bits.

O objeto da cor é simplesmente um objeto que defina a informação da cor a ser usada para extrair, para mudar a cor de texto, e assim por diante. O objeto da cor pode ser definido de diversas formas que incluem valores  RGB, valores hexadecimais, ou mesmo indices  da paleta de cores do Director .

O objeto cor pode ser representado da seguinte  forma :

c = color (#rgb, 255, 255, 255)

O exemplo  acima representa valores de brancos puros do RGB. Você pode igualmente usar a seguinte sintaxe:

c=rgb (255,255,255)

Isto cria um objeto da cor baseado em valores do RGB.

c=rgb (“FFFFFF”)
Isto cria um objeto da cor convertendo valores hexadecimais ao RGB.

c=color (#paletteIndex, 0)
Isto provê a cor  de índice 0 da paleta na paleta atual do diretor.

c=paletteIndex (0)
Este é o mesmo que acima mas refere diretamente ao índice da paleta .

Adicionalmente, você pode usar o próprio Lingo para converter valores numéricos de cores a outros formatos.

Um formato muito usado no mundo de design gráfico é o CMYK.
 

Há um exemplo de conversor RGB para  CMYK por Eliya Selhub,no link :

http://www.mediamacros.com/item/item-958832811/

outro formato é o HSV e conversor HSV to/from RGB de Andrew Morton no link : http://www.mediamacros.com/item/item-1006687249/

Os dados da cor podem igualmente vir de elementos existentes no Director. Estão aqui alguns lugares que você pode encontrar a informação da cor:

member(“text member”).color
Isto refere a cor do texto em um membro do elenco do texto.

sprite (1) .forecolor
Esta é a cor do primeiro plano usada por um sprite.

 Anote que isto retorna um número de índice que da paleta de cor usada pelo sprite (ou seu valor mais próximo).

i.getPixel (10,10)
Isto recupera a cor de um pixel específico de um objeto da imagem no ponto 10, 10.

GetPixel e SetPixel

Permite que você leia dentro um objeto a cor exata  em um ponto específico em uma imagem. Por exemplo:

c = i.getPixel (0,0)

Isto atribui a  variável c , a cor no pixel do canto superior esquerdo de seu objeto da imagem.

 Note que as posições começam em 0,0 não 1,1, assim que o primeiro pixel em toda a linha ou coluna é zero.

Você pode adicionalmente indicar um valor bruto que representa a cor do pixel adicionando o símbolo #integer.

c = i.getPixel (0,0,#integer)

Para o branco puro, isto retornaria -1. Isto é  útil se você está usando o getPixel e então a sua contraparte, setPixel,  para editar rapidamente muitos pixels.

 Usar inteiros em vez dos objetos da cor verdadeira é simplesmente mais rápida e mais eficiente. Veja como o setPixel trabalha:

i.setPixel (0, 0, rgb (0,0,0))

Isto ajusta o pixel no ponto “0,0” ao preto puro (rgb (0,0,0))

Usando o método bruto do inteiro acima, você poderia igualmente usar o valor de inteiro para fazer o seguinte:

i.setPixel (0,0, – 1)

Isto ajusta-o de volta ao branco puro. Anote que se você usa o método do inteiro, você está usando o valor de 32 bits cheio.

Se você tem as canais alpha em suas imagens, você precisa de estar ciente que você sobrescreve a cor e o alpha ao mesmo tempo,

 assim que você pode precisar de usar algum código feito sob medida se você não quer afetar a transparência ao ajustar valores novos da cor.

 Se você quer o valor alpha para um dado pixel , há uma fórmula simples para fazer isto.

Os valores brutos do número são baseados nas combinações possíveis. As  imagens de 24 bits usam  256 valores possíveis para o vermelho, 256 valores possíveis para o azul e  256 valores possíveis para o verde.  Isto dá em  até 16777216 cores possíveis, ou 2 elevado à potencia de 24. As imagens de 32 bits são baseadas no mesmo, mais 256 valores possíveis adicionais para o alpha.

Nós estamos falando agora de  2 elevado a 32, ou os 4294967296 (mais de 4 bilhões de combinações).

O olho humano nem pode diferenciar todas estas cores mas elas estão lá.

Mas como nós podemos pegar o valor alpha?   Simples, você remove outros três valores:

a = i.getPixel(1,1, #integer) / power(2,  8 + 8 + 8 )
Não entendeu a fórmula ? para resumir posso dizer que ela pega o valor bruto da cor na posição “1,1” (por exemplo) e divide por 2 elevado a 24 (8+8+8). no final das contas isto significa pegar apenas o valor do Alpha. Talvez um outro dia eu explique exatamente como funciona esta fórmula.. Mas vamos adiante..

ALPHA

Como podemos usar o Imaging Lingo para trabalhar com o canal Alpha?

 Como mencionado acima, você pode usar o getPixel e o setPixel para alcançar diretamente esta informação, mas às vezes você pode querer extrair ou copiar pedaços  de uma imagem, ou realizar uma edição apenas com o canal Alpha. Para modificar o canal  alpha,  você deve saber  como extrair diretamente e ajustar a camada Alpha de uma imagem.

Você pode extrair a camada alpha de uma imagem como um objeto da imagem. Então você pode usar todos os comandos padrão da imagem para  modificá-lo.

Para extrair o alpha, use o extractAlpha do imaging Lingo. Nome inteligente, não?

a = i.extractAlpha ()

Isto armazena na variável uma imagem grayscale de 256 cores. Após ter feito mudanças, você pode querer colocá-la de volta. Faça isto com setAlpha.

i.setAlpha (a)

Anote que há umas limitações aqui. Se você tenta usar o extractAlpha em uma imagem de 16 bits ou mais baixa retornará zero porque a imagem não  tem nenhum alpha. Adicionalmente, o setAlpha não terá nenhum efeito em objetos de 16 bits e mais baixos da imagem.

Valide sempre seu código para assegurar-se de que um objeto da imagem exista e esteja a uma profundidade correta.

Estão aqui algumas maneiras que você pode fazer isto:

a = i.extractAlpha()

if a = 0 then exit

O método acima tenta extrair o alfa. Se falha, o processo pára de executar. Esta outra teria o mesmo efeito:

a = i.extractAlpha ()
if objectP(a) = 0 then exit

A melhor maneira é verificar antes mesmo de tentar extrair o alpha em primeiro lugar:

If i.depth < 32 then exit

Isto verifica a profundidade de cor atual do objeto da imagem e se é menos do que de 32 bits, você sabe que não há nenhum alpha, assim que você pode parar o código atual.

DRAW (Desenho) e FILL ( Preenchimento)

Você pode agora editar toda a imagem em cada pixel, mas vamos falar sério, que seria muito lento e usaria o processador ao extremo.

Se você quer desenhar uma linha, encher uma imagem inteira com uma única cor, ou adicionar  um círculo no centro de nossa imagem,  você gastaria muito processador à toa, trabalhando com cada pixel um a um.

 O comando DRAW faz  exatamento o que o seu nome indica. Ele desenha uma forma na imagem na posição e na cor que você indicar.

i.draw (rect (10,10,20,20), rgb (0,0,0))

Isto desenha um quadrado preto  da posição 10, 10 ao ponto 20, 20. Simples bastante, mas que se você quer mais controle?

O parâmetro da cor pode realmente ser uma lista de parâmetros que você pode definir, incluindo o shapeType, cor, e lineSize.

Tente assim  desenhar um círculo vermelho  de 2 pixels  de espessura na mesma posição.

i.draw(rect(10,10,20,20), [#color : rgb(255,0,0), #lineSize : 2, #shapeType : #oval])

O parâmetro do shapeType pode ser #line, #oval, #rect, ou #roundRect. A linesizes pode ser 1 ou maior e color pode ser qualquer parametro  válido de cor.

 Note que você pode igualmente usar quatro parâmetros em vez de um rect para definir a área para desenhar:

i.draw(10,10,20,20, [#color : rgb(255,0,0), #lineSize : 2, #shapeType : #oval])

E sobre áreas sólidas? Às vezes você pode querer encher a área inteira com uma cor.

 Para isto você pode usar o comando FILL. O fill funciona exatamente como o DRAW salvo que o resultado é uma forma com preenchimento, não só um contorno.

 Adicionalmente você tem uma propriedade  nova que você pode usar: o #bgColor.

Para áreas enchidas, isto define a cor do contorno, de modo que você possa encher a área com a uma cor sólida e adicionar uma borda  diferente em torno dela. Este exemplo cria um retângulo arredondado de 10 x  10 pixels, enchido com o preto, e uma borda de 2 pixels de cor vermelha:

i.fill(10,10,20,20, [#color : rgb(0,0,0), #bgColor : rgb(255,0,0), #lineSize : 2, #shapeType : #roundRect])

Repare bem  o formato da lista de parâmetro, porque você o verá , outras vezes, em outras funções da Imaging Lingo.

 Com estas listas de parâmetros, você pode adicionar parâmetros para definir elementos específicos do comando da Imaging Lingo,  mas são inteiramente opcionais; você precisa somente de definir o que for realmente necessário.

Volte em breve para segunda parte desta matéria/aula.

Anúncios
Esse post foi publicado em Director, Multimidia, Programação, tutorial e marcado , , . Guardar link permanente.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s