RodrigoFM : RodrigoFMsantoS

Exibindo v�deo em formato Flash usando o ActionScript 3 - Componente FLVPlayback

2009-07-20T13:38:20Z

Exibindo v�deo em formato Flash usando o ActionScript 3 - Componente FLVPlayback

Este
artigo ir� explicar o processo para preparar os arquivos e aplicar
customiza��es b�sicas para o player. Ao final, daremos uma breve
descri��o dos m�todos mais comuns, propriedades e eventos dispon�veis
para o componente FLVPlayback. Fa�a o download desse v�deo de exemplo e veja tipo de v�deo que podemos mostrar com Flash.

Este tutorial � dividido entre as seguinte se��es:

Preparando os arquivos e codificando o v�deo para o formato FLV.

Aprendizagem b�sica do componente FLVPlayback.

Aplicando uma skin ao componente FLVPlayback.

Selecionando m�todos, propriedades e eventos.

Preparando os arquivos e codificando o v�deo para o formato FLV

Para ter tudo organizado, eu sugiro que voc� crie uma nova pasta em
seu computador onde ter� todos os arquivos relevantes que iremos usar.
Teremos um arquivo FLA, o final SWF, um skin SWF e um arquivo de v�deo
no formato FLV.

Antes de come�armos a fazer algo no Flash, � preciso converter o
v�deo para o formato de v�deo FLV. Isso pode ser feito usando o Flash
Video Encorder, que vem com o pacote Flash. Esta ferramenta ir�
converter para v�rios formatos, como .mov, .mp4, .mpeg, .wmv e alguns
outros, bem como FLV. Se voc� n�o tem um v�deo para usar neste
tutorial, voc� pode fazer o download do simples v�deo usado neste tutorial. Fa�a o downoad do arquivo, descompacte-o e coloque-o na pasta do projeto.

O v�deo que disponibilizamos a voc� foi salvo no formato do
Quicktime. Vamos convert�-lo para FLV.Para fazer isso, abra o Flash
Video Encorder (nomeado como Media Encoder no pacote de aplicativos
CS4) e clique em Add para adicionar o v�deo que voc� baixou.

Voc� pode clicar em Settings para configurar algo como qualidade,
redimensionamento,e tipo de codec. Usar as configura��es padr�o ser�
suficiente. Para come�ar a codificar, simplesmente clique em Start Queue. O novo arquivo .flv deve ser achado no mesma pasta em que estava o v�deo original (neste caso, no nosso projeto).

O nosso v�deo est� pronto. Feche o Flash Video Encoder e abra o
Flash. Crie uma novo arquivo FLA no formato ActionScript 3.
Configura��es como dimens�es, cor de fundo e frame rate, na verdade,
n�o importam para este tutorial. Voc� s� tem que salvar o arquivo no
mesmo diret�rio que o v�deo, a fim de reproduzi-lo facilmente. Fa�a
isso e depois vamos prosseguir.

Aprendizagem b�sica do componente FLVPlayback

Agora, volte para o arquivo FLA. Iremos exibir nosso v�deo usando o Componente FLVPlayback.
Componentes s�o clipes prontos com funcionalidade built-in. O
componente FLVPlayback � para ser usado quando voc� deseja reproduzir
um v�deo. Vamos criar o nosso projeto inteiro usando c�digo
ActionScript, por�m, temos os elementos gr�ficos do componente a ser
armazenados em nossa Biblioteca, a fim de utiliz�-los.

Para importar o componente da Biblioteca, � preciso acessar o Painel de Componentes pelo Window>Component,
veja o Componente FLVPlayback acima da categoria do v�deo e, em
seguida, arraste e solte um exemplo e depois apague-o! Isso deve
armazenar uma inst�ncia do componente na biblioteca, acesse a
Biblioteca (Ctrl + L) para ver que voc� tem a� dentro.

Agora vamos usar o ActionScript para exibir nosso v�deo utilizando
este componente. Clique com o bot�o direito no �nico frame que h� na
cena e selecione Actions para abrir o Actions Panel.

O c�digo que iremos criar ir� seguir as seguintes tarefas:

Importe o pacote v�deo class.

Crie uma inst�ncia do componente FLVPlayback.

Defina o v�deo que queremos exibir em source.

Adicione o v�deo para a lista de exibi��o.

Iremos codificar esses um por um. A fim de ter acesso � classe do
componente ActionScript de nosso playback, precisamos importar o pacote
de v�deo para come�ar nosso c�digo. Digite a seguinte linha para fazer
exatamente isso:


import fl.video.*;

Como a maioria das classes do ActionScript, voc� deve criar um
exemplo de classe usando a palavra reservada "NEW", a fim de us�-lo.
N�s vamos fazer isso e, em seguida, definiremos o Source deste exemplo
como o nosso v�deo.


import fl.video.*;
var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";

A propriedade .source � usada para especificar o v�deo que vai ser
exibido. Se voc� quer exibir outro v�deo, voc� pode simplesmente
configurar essa propriedade para um outro valor e automaticamente
come�ar� a carregar o v�deo.

Mesmo este v�deo tendo sido criado para o fim espec�fico de ser
nosso exemplo, para que possamos v�-lo na tela precisamos adicion�-lo �
Display List utilizando o m�todo addChild ():

Para fazer nosso componente ser vis�vel na tela n�s precisamos somente adicion�-lo na Display List usando o m�todo addChild():


import fl.video.*;
var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
addChild(myVideo);

Agora voc� pode testar seu v�deo (Ctrl+Enter) e v�-lo sendo exibido.

Voc� n�o deve ser capaz de reproduzir qualquer v�deo que queira
utilizando este c�digo, no entanto, se quiser ter alguma funcionalidade
de usu�rio adicionada ao player, pode querer usar uma skin. Isto ser�
explicado na pr�xima se��o.

Aplicando uma skin ao componente FLVPlayback

Skins s�o controladores de visualiza��o que voc� pode parar, pausar,
mudar o volume e fazer outras coisas que dependem de uma skin para
mudar. Usamos uma no v�deo de exemplo. � parecido com este:

Os elementos gr�ficos da skin s�o salvos separadamente em um arquivo
SWF que � carregado junto com o filme SWF. Se voc� tiver a skin do
arquivo SWF dispon�vel, voc� simplesmente define sua URL como o valor
para uma propriedade chamada .skin, como mostra o exemplo abaixo:


import fl.video.*;
var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";
addChild(myVideo);

Estes arquivos skin podem ser gerados por Flash atrav�s de um
processo relativamente longo, o que exigir� que voc� crie um exemplo do
componente FLVPlayback na cena, aplicar-lhe a skin e, em seguida,
testar o filme para gerar o arquivo da skin. Vamos acompanh�-lo atrav�s
deste processo.

Comece abrindo a Library (Ctrl + L) e, em seguida, arraste e copie do Componente FLVPlayback para dentro da cena.

Vamos agora configurar qual skin a ser usada acessando o Component Inspector. Selecione o seu componente e, em seguida, v� em Window>Components Inspector para abrir o painel necess�rio. Olhe para a op��o skin em Parameters
e clique sobre ele. Voc� pode escolher a skin que pretende utilizar a
partir da aqui. Skins diferentes t�m diferentes funcionalidades e
algumas delas aparecem no seu componente, enquanto outras s�o colocadas
logo abaixo dela. Escolha aquela que voc� deseja e clique em OK.

Voc� aplicou a skin para um exemplo do componente FLVPlayback que �
colocado sobre a cena. Este n�o � o que estamos usando atrav�s do
ActionScript. No entanto, para obter o arquivo da skin que temos
necessidade para ger�-lo manualmente, aplicando-a para um exemplo e, em
seguida, testando o filme. Teste o filme agora (Ctrl + Enter) para ver
seu v�deo gerado em ActionScript e um posicionamento sobre esta nova
fase com nenhum conte�do nele.

N�s acabamos de criar o arquivo skin que precisamos para o nosso
outro v�deo. Se verificar a pasta do projeto, vai encontrar um novo
arquivo SWF da skin. Voc� precisa ter o nome desse arquivo para usar
como sua skin.

O nome desse arquivo � o valor que precisamos para a propriedade do
skin. Copie o nome desse arquivo e volte para o FLA. Delete o exemplo
do componente FLVPlayback da cena, n�o precisamos mais dele. Abra o
painel Actions para continuar codificando.

Agora n�s podemos simplesmente definir o nosso componente skin,
utilizando a propriedade .skin como o nome do novo arquivo que temos.
N�o se esque�a de colocar o .swf no final:


import fl.video.*;
var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";
addChild(myVideo);

Teste seu filme agora para ver o seu skin colocado em seu componente!

Voc� pode personalizar ainda mais o n�vel de transpar�ncia e a cor
da skin, utilizando as propriedades .SkinBackgroundColor e
.SkinBackgroundAlpha que s�o bem auto-explicativas:


import fl.video.*;
var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";
myVideo.skinBackgroundColor = 0xAEBEFB; 
myVideo.skinBackgroundAlpha = 0.5;
addChild(myVideo);

Voc� pode testar seu filme novamente para ver as altera��es no componente skin:

Isso deve ser suficiente para esta parte. A fim de tentar uma skin
diferente, voc� ter� de criar um exemplo do seu componente na cena e,
em seguida, testar o filme ap�s aplicar a skin para gerar o arquivo da
skin necess�rio.

Isso acabou com a parte principal do tutorial. A pr�xima se��o ter�
uma breve explica��o de algumas propriedades e m�todos dispon�veis para
esse componente. Vamos terminar com uma breve explica��o sobre como
usar os eventos deste componente.

M�todos e propriedades selecionadas

Al�m dos controles dispon�veis atrav�s do controlador da skin, �
poss�vel passar comandos manualmente para um exemplo do componente
FLVPlayback utilizando os m�todos dispon�veis e suas propriedades.
Estes devem ser chamados diretamente atrav�s do exemplo:

Stop () - p�ra o v�deo e reinicia a reprodu��o a posi��o do come�o.

Pause () - pausar� o v�deo na sua posi��o atual.

Play () - retoma a reprodu��o.

Load () - pode ser usado para carregar um outro v�deo FLV (ao
contr�rio do . source, que ir� fazer o v�deo rodar automaticamente se a
propriedade .autoplay estiver definida para true).

C�digo-exemplo sobre como usar o m�todo .Load ():


myVideo.load("video.flv");

Al�m dos m�todos mencionados acima, abaixo algumas propriedades comumente utilizadas:

source - � usada para definir a fonte de v�deo para o player. Foi utilizado em nosso exemplo de c�digo.

autoplay - determina se o v�deo vai come�ar a tocar automaticamente
ou n�o. � definido como true por padr�o. Se voc� n�o quer exibir o
v�deo automaticamente, defina essa propriedade para false.

state - � uma propriedade de leitura apenas utilizada para obter o
estado atual do v�deo. Os estados poss�veis s�o " buffering ",
"connectionError", " disconnected ", " loading ", " paused ", " playing
", " rewinding ", " seeking ", e " stopped".

PlayheadTime - � usado para recuperar ou definir a reprodu��o atual
da posi��o em segundos. Se quiser ir para o segundo 30 do v�deo
instantaneamente, simplesmente defina esta propriedade para 30.

skin - � usada para definir a skin do reprodutor, como ilustrado no tutorial.

SkinBackgroundColor - define a cor da skin.

SkinBackgroundAlpha - define o n�vel de transpar�ncia da skin.

Estes s�o apenas alguns dos m�todos dispon�veis e as propriedades
dispon�veis para o componente FLVPlayback. Certifique-se de verificar o
ActionScript refer�ncia se voc� gosta de aprender sobre todas as
possibilidades.

O evento VideoEvent.COMPLETE

Eventos nos permitem tomar a��es espec�ficas quando eles s�o
acionados, de modo que, por exemplo, podemos remover um v�deo quando
terminar a reprodu��o ou torn�-la transparente quando ela est� pausada.
O componente FLVPlayback tem in�meros eventos, um muito utilizado � o
COMPLETE, que � acionado quando um v�deo termina a reprodu��o. Para
este evento ser utilizado, deve ser registrado com o exemplo utilizando
o m�todo FLVPlayback .AddEventListener (), tal como todos os outros eventos.

O exemplo a seguir ir� definir a propriedade .Alfa do v�deo para 0,5 quando a reprodu��o completar.


import fl.video.*;
var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";
myVideo.addEventListener(VideoEvent.COMPLETE, completePlay);
function completePlay(e:VideoEvent):void {
myVideo.alpha=0.2;
}
addChild(myVideo);

Artigo originalmente publicado em:� http://www.flashperfection.com/tutorials/Playing-Flash-Video-Using-The-AS3-FLVPlayback-Component-44200.html

Fonte: www.imasters.com.br

Motion Tween no Adobe Flash CS4

2009-07-20T13:31:40Z

Motion Tween no Adobe Flash CS4

Ol�!

No novo Adobe Flash CS4, vamos apresentar a forma de se fazer uma
anima��o pela linha de tempo, pelo Motion Tween. Vamos usar o perfil
Animator, que � um novo recurso que o Flash CS4 tem para configurar o
layout das ferramentas.

Nas vers�es anteriores do Flash era necess�rio selecionar o objeto e
criar quadros-chave em cada ponto em que a anima��o era alterada. No
Flash CS4, vamos especificar o tempo da anima��o e, em seguida,
definimos os pontos de refer�ncia.

No exemplo abaixo, vamos colocar os elementos em cada layer. O Fundo
� est�tico, o "Logo" (que ser� a anima��o) foi transformado em Movie
Clip e, na linha do tempo, habilitamos o Create Motion Tween.

Voc� poder� fazer esses pontos de refer�ncia pressionando a tecla F6
ou simplesmente fazendo qualquer altera��o, como arrastar ou aplicar um
filtro sobre o objeto.

Como queremos que o "Logo" apare�a, vamos marcar na linha de tempo o
tempo para sua exibi��o. Para o exemplo, no primeiro frame deixaremos
Alpha 0% e no d�cimo frame deixaremos Alpha 100%.

Ent�o, o logo ir� surgir!

Agora que voc� habilitou o Motion Tween na linha de tempo, selecione
o objeto ou um frame qualquer da linha de tempo e d� uma olhada na
palheta "MOTION EDITOR". V�rias barras quadriculadas divididas em
grupos aparecer�o e ser� por elas que voc� poder� fazer com precis�o
todas as suas anima��es. � claro que as anima��es ainda podem ser
feitas do modo tradicional, mas n�o com a precis�o que o MOTION EDITOR
oferece!

Vamos come�ar identificando os cinco grupos, que s�o "Basic motion", "Transformation", "Color Effect", "Filters" e "Eases".

Basic motion: Como o pr�prio nome j� diz, esta lista se refere a
recursos b�sicos, como posi��o "x", "y" e girar no eixo "z". N�o se
assuste!!! Girar em "z" nada mais � que o rotation a que j� estamos
acostumados das outras vers�es do Flash.

� chamado assim porque agora podemos girar o eixo em "x", "y" e "z",
ou seja, n�o temos apenas "x" para mover para esquerda e direita e "y"
para cima e para baixo, tamb�m temos "z" para mover para tr�s e para
frente - em outras palavras, agora temos profundidade.

Isso n�o significa que o Flash j� seja 3D. Os elementos continuam
sendo achatados, mas agora podem girar 360� para qualquer dire��o!!!
Por hora, s� temos posi��o em "x", "y" e giro em "z" e mais para frente
iremos habilitar a profundidade em "z" e o giro em "x" e "y".

De qualquer forma, esse grupo n�o muda em momento algum o tamanho ou
a inclina��o do objeto por mais que isso pare�a estar acontecendo no
caso do "quase 3D", mas muda a nossa perspectiva, pois agora podemos
ver o objeto de diversos �ngulos.

Tranformation: Este n�o tem novidade; est�o
reunidos aqui os elementos da palheta Transform, o skew X, skew Y,
scale X e scale Y, com exce��o do rotation, que at� continua na palheta
Transform, mas, no caso do MOTION EDITOR, est� no grupo Basic motion.

Color Effect: Aqui est�o reunidos os efeitos de cor
para um objeto igual � palheta de propriedades, onde temos uma lista de
efeitos de cor. Mas s� podemos usar um efeito para aplicar a cada
objeto em um ponto de refer�ncia da anima��o.

Filters: Aqui temos todos os filtros contidos na
palheta convencional e, assim como ele, podemos aplicar qualquer
filtro, quantas vezes quisermos.

Eases: Antes, no Flash, us�vamos o Eases para
definir a velocidade da anima��o, se iria ser constante, se come�aria
r�pido para terminar devagar ou se come�aria devagar para terminar
r�pido. Al�m disso, pod�amos, no modo avan�ado, atrav�s de um gr�fico,
variar ainda mais esta velocidade.

Agora, ainda podemos fazer com a op��o "custom" e temos tamb�m
diversas op��es j� pr�-configuradas para facilitar ainda mais a nossa
vida. Essas op��es j� existiam, mas pod�amos acess�-las apenas por
programa��o, o que quer dizer que ficou mais f�cil us�-las sem
conhecimento de programa��o!

Voc� pode notar que todos os outros grupos acima t�m caixas de
sele��o e um "combobox", onde podemos aplicar esses recursos em todos
os meios, seja ele de movimento, forma, cor ou filtro.

Por fim, aqueles que j� est�o familiarizados com o modo avan�ado do
Eases v�o se sentir mais � vontade neste ambiente, j� que segue o mesmo
principio para todos os outros recursos de anima��o em que, atrav�s de
pontos de refer�ncias em um gr�fico, podem manipular livremente suas
anima��es.

Agora, vamos dar um movimento para ele! Em Ferramentas (Tools),
usaremos o 3D Rotation Tool para dar a impress�o de movimento em 3D.
Observe o gr�fico no Motion Editor!

Essa � a maneira mais f�cil de aplicar a impress�o de 3D ao objeto,
e note que agora no Motion Editor, no grupo Basic motion, aparecem as
op��es que faltavam para manipular o objeto em 3D. Essa � s� uma das
maneiras de habilitar esses par�metros; voc� pode tamb�m, a qualquer
momento, ir � linha de tempo da anima��o (em que o novo Motion Tween
esteja habilitado) e, com um clique no bot�o direito, poder� habilitar
ou desabilitar o 3D Tween.

A qualquer momento selecione um quadro na anima��o e aplique o
efeito que voc� quiser (pode ser na palheta do Motion Editor tamb�m).
Neste momento o Adobe Flash CS4 ir� criar um ponto de refer�ncia para a
mudan�a que voc� fez na anima��o.

Vamos inserir mais uma layer "Nome". N�o se esque�a de que ela tem de ser um Movie Clip, pois ter� uma anima��o tamb�m!

Enquanto fazemos a anima��o, os pontos de refer�ncia s�o criados e
tudo pode ser acompanhado e alterado (para aqueles que gostam de
precis�o e de gr�ficos) no Motion Editor.

O resultado ficar� muito legal e voc� poder� usar sua imagina��o para as anima��es!!!

Fonte: www.imasters.com.br

Todos s�o Designers?

2009-07-20T13:23:15Z

Todos s�o Designers?

Ultimamente

me deparo na internet com o n�mero absurdo de "designers" que existem

por a�.

Infelizmente nossa profiss�o ainda n�o � devidamente regulamentada,

ent�o qualquer um que se d� ao luxo de ser um bom operador de software

pode se dar o t�tulo de Designer.

Por que eu digo isto?

Existem pessoas excelentes na �rea de cria��o que fazem trabalhos

belos, que nunca estudaram. Mas onde quero chegar? Abrir o bloco de

notas e escrever um c�digo ( PHP, ASP, XHTML e etc.. ), isso � Design?

Photoshop, Corel, Illustrator, Flash, 3D, XHTMl, CSS e cia. n�o se

limitam ao Design. S�o ferramentas que auxiliam um Designer na sua

cria��o. N�o s�o os softwares que v�o tornar uma pessoa em um Designer.

Antes de qualquer software ou cria��o, existe um estudo do assunto a

ser abordado, existe uma pesquisa bem complexa sobre determinado tema,

e a partir dessas pesquisas vamos encontrar os problemas para serem

solucionados.

Existem Designers famosos que nem em um mouse sabem pegar, mas o que

eles fazem? Pagam a algu�m que seja bom em um determinado software para

executar aquilo que ele estudou e planejou.

Que tipo de problema?

V�rios e v�rios, desde uma sinaliza��o mal feita, estudo de cores,

estudo de tipografia, estudo de ergonomia visual, estudo de harmonia

equil�brio, estudo de semi�tica e etc, tudo dentro de um contexto.

Um Designer n�o precisa necessariamente ser bom em um software. Eu n�o

preciso ser Designer e ser obrigado a conhecer determinado software,

existem equipes que v�o pro campo pesquisar, coletar informa��es com o

conhecimento que possuem, pois s�o essas informa��es que v�o ajud�-lo

no processo da solu��o de um determinado problema. E existe a equipe de

cria��o ( que s�o fera nos softwares ) para colocar em pr�tica aquilo

que os outros designers fizeram.

Hoje em dia grandes empresas contratam os Designers para serem

gestores, para fazerem parte de sua diretoria, pois como o Designer tem

uma vis�o diferente de muitas pessoas, como coisas do dia-dia que pra

muitas � normal, para eles n�o, e � justamente nisso que est� a

diferen�a. Pois estudamos como as pessoas enxergam ou interpretam tal

situa��o ou produto ou servi�o e isso faz diferen�a no mercado, numa

empresa. Um simples produto posicionado ou com um layout diferente ou

uma cor, vai fazer muita diferen�a no mercado.

Desvaloriza��o de Mercado:

Os famosos micreiros que n�o possuem forma��o alguma e cobram

servi�os baratos, servi�os sem base alguma, servi�os mal feitos, por

R$50,00 / R$20,00 reais e etc.

E o cara que pesquisou, saiu a campo, gastou sua gasolina, ou

passagem de �nibus, gastou energia e tempo, passou horas e horas

coletando informa��es para chegar a uma solu��o final para seu projeto,

gastou dinheiro com livros e livros, com a faculdade, com

especializa��o para seu conhecimento. Em m�dia uma faculdade que

ministra cursos de Design ( produto / gr�fico / moda e etc ) n�o sai

por menos de R$500,00 em sua mensalidade. Calcule isso em quatro anos,

fora gastos com cursos extra.

Quanto ele vai receber por aquele projeto que desenvolveu?

Queria ser bem breve sobre esse tema que tanto me incomoda.

Poder�amos ficar aqui o dia todo escrevendo, pois � uma �rea

fant�stica, o universo do Design � ilimitado. Cada dia surgem solu��es

que me fascinam.

� justamente isso que queria dizer a voc�s, n�o falo mal das pessoas

que se auto-intitulam, mas que essa profiss�o seja mais valorizada. E

que as pessoas tenham mais embasamento do que realmente � o termo

Design, antes de sair por a� falando que � isso e aquilo.

Fonte: www.imasters.com.br

Etapas produtivas de um website

2009-07-20T13:15:43Z

Etapas produtivas de um website

Este
artigo mostra uma das v�rias maneiras de se dividir o processo produtivo de um
site web. Aqui, num primeiro momento, voc� conhecer� as quatro etapas b�sicas
para depois conhecer, um pouco mais a fundo, o planejamento.

As Etapas

Podemos
dividir a produ��o de um site web em quatro etapas principais, explicadas,
abaixo, resumidamente:

a)Planejamento:

Processo
que engloba todo levantamento das necessidades do cliente, pesquisas de
mercado, linguagens e estrat�gias de comunica��o, objetivos mercadol�gicos,
entre outros.

b)Cria��o:

Transforma��o
das informa��es e defini��es da etapa de planejamento em id�ias visuais claras
e objetivas. Defini��o de estruturas de navega��o, de condu��o do usu�rio da
p�gina

c)Estrutura��o:

Uso das
linguagens XHTML/CSS para efetuar a codifica��o do lay-out do site desenvolvido
pela equipe de cria��o na etapa anterior. Testes de navegabilidade e de UP LOAD
do site.

d)Desenvolvimento:

Aplica��o
das linguagens de servidor para integra��o do site com um banco de dados para
tornar partes do site din�micas, com conte�do atualizado constantemente, muitas
vezes permitindo uma grande participa��o do usu�rio na p�gina, alterando
caracter�sticas diversas.

O Planejamento

Etapa que
pode ser dividida da seguinte forma:

Tema

Sobre o
que ser� o site? Descrever de forma sucinta e objetiva o tema geral do site

Briefing

Levantar,
junto ao cliente, informa��es precisas sobre o que se espera do site. Esta
reuni�o deve ser um bate papo, evitando estruturas formais de perguntas e
respostas, pois, assim, consegue-se muito mais do cliente do que se espera.
Apesar disso, deve-se levantar, minimamente, as seguintes informa��es:

a)P�blico-Alvo:
a quem se
destina o site? Qual a classe social, a faixa et�ria e o perfil geral das
pessoas?

b)Definir
o retorno esperado para o site: um site, como uma pe�a de comunica��o, � uma
ferramenta de marketing como qualquer outra, precisa de objetivos claros e bem
definidos. O retorno deve ser encarado como uma meta a ser cumprida.

Linguagens

As
linguagens de comunica��o, quando bem definidas, resultam num bom retorno para
o cliente definido como p�blico-alvo. Apesar de haver uma grande quantidade de
linguagens que podem ser utilizadas, podemos definir as principais da seguinte
forma:

a)Moderna
(jovem):
possibilita o uso de cores fortes, experimentalismos gr�ficos diferenciados,
linguagem mais cool, solta, livre, informal. O site da MTV � um bom exemplo deste tipo de
linguagem visual.

b)Conservadora
(madura): n�o deve
causar impacto por recursos visuais ou informalidade na linguagem. Estruturas
mais r�gidas de navega��o, de controle. Recomendado para sites de
investimentos, neg�cios, bancos, de uma maneira geral. O site do Citibank � um bom exemplo.

c)Clean
(suave): diz
respeito mais ao aspecto visual do que a uma linguagem propriamente dita. As
cores s�o suaves, fluidas. As imagens comunicam tranq�ilidade, suavidade,
beleza. Tudo � limpo, os espa�os n�o s�o totalmente preenchidos, permitindo que
a p�gina "respire". Sites de beleza e
est�tica seguem
este padr�o.

d)Over (forte):
tamb�m
diz respeito aos aspectos visuais. Aqui, ocorre o inverso do "clean".
As cores s�o fortes, agressivas, pulsantes. Imagens em �ngulos e enquadramentos
inusitados, uso livre de grafismos fortes, experimentais. Os sentidos s�o
agressivamente tocados, n�o h� espa�os para se "respirar", tudo �
muito intenso. Sites de skateshops seguem este padr�o.

Tecnologias e ferramentas utilizadas

Com base
nas informa��es levantadas at� o momento, pode-se definir as ferramentas e
tecnologias que ser�o utilizadas, at� mesmo para se ter uma melhor id�ia
"or�ament�ria" do projeto. Abaixo, as principais necessidades de um
web site e exemplos de tecnologias e ferramentas para execut�-las:

a)
Ilustra��es, logotipos, s�mbolos vetoriais:

Corel

Illustrator

Inkscape

b) Cria��o de lay-outs:

Photoshop

Fireworks

c)
Tratamento de Imagens:

Photoshop

Gimp

d)
Otimiza��o de Imagens:

Fireworks

Gimp

e) Edi��o
Visual do c�digo:

Dreamweaver

Amaya

f)
Linguagens de estrutura��o:

XHTML (estrutura)

CSS (formata��o
visual)

g)
Anima��es vetoriais:

Flash

Ktoon

h)
Linguagens de Scripts:

Javascript

Action
Script(no flash)

i)
Desenvolvimento:

PHP (Linguagem de Servidor Open Source)

ASP (Linguagem de
Servidor Paga)

Observa��o:
existem diversas outras ferramentas e linguagens no mercado que tamb�m efetuam
tais trabalhos.

Pesquisas

Etapa
destinada a levantar todos os dados necess�rios afim de fazer um site adequado
ao perfil do cliente:

a)Pesquisar
concorr�ncia: quem � a
concorr�ncia? Qual o seu perfil? Que sites possuem? Que estrat�gias trabalham
em seu sites? Que coloca��o possuem no mercado? Quais os pontos fortes? E os
fracos? Oferecer, por meio de pesquisa, a informa��o do que ainda n�o se fez,
ter a real no��o do mercado em que se est� entrando, conhecer a fundo todas as
caracter�sticas.

b)Pesquisar
o p�blico-alvo: levantar,
efetivamente, todos os dados sobre o p�blico-alvo que interessam dentro do
contexto do site.

c)Pesquisar
estrat�gias: levantar
dados sobre as estrat�gias que ser�o abordadas, analisar se j� foi utilizada em
outro momento (analisar e pesquisar CASES alheios), n�o "reinventar a
roda", o que j� foi feito no passado e deu certo, torna-se modelo a ser
seguido, o que deu errado, modelo do que deve ser evitado.

Planejamento Estrutural do site

Com todo
o extenuante trabalho acima conclu�do, pode-se come�ar a estruturar o site de
forma b�sica, n�o-visual. As defini��es abaixo, para a surpresa de muitos
estudantes de web design, s�o atribui��es do marketing, de maneira geral:

a)Quantas
p�ginas, links ou se��es o site ter�?

Isto
depender� do perfil do site, dos assuntos abordados. Um site com poucos links
n�o � necessariamente um site de pouco conte�do, da mesma forma, um site
repleto de links e se��es n�o �, exatamente, um manancial de boas informa��es
sobre aquele tema determinado. Prud�ncia, canja de galinha e bom senso n�o
fazem mal a ningu�m.

b)Mapa do
site

Estrutura
b�sica da divis�o de todos os links, com todas as p�ginas relacionadas como
subdivis�es dentro de um contexto maior. Muito mais do que
"quadradinhos" com nomes de p�ginas escritos dentro, um mapa de site
permite uma visualiza��o global e visual do que se pretende, tornando f�cil e
visual os processos de altera��es, aprova��es e defini��es gen�ricas.

c)Arquitetura
da Informa��o:

Este tema
daria um novo artigo por si s�, de t�o amplo e complexo. Definindo
sucintamente, a arquitetura da informa��o passa pelo processo de separa��o do
conte�do, da condu��o do cliente pelo site, dos t�neis de navega��o, estruturas
lineares e n�o-lineares de navega��o, visando a cria��o de um web site
intuitivo, que ajude o visitante a encontrar tudo o que deseja da forma mais
direta e racional poss�vel. O profissional envolvido com este t�pico dedica-se
a utilizar o principal conte�do da web de forma a extrair todo o seu potencial:
o hipertexto.

e)Textos principais:

J� ouviu falar em web
writing? �,
basicamente, o of�cio de escrever para web, respeitando suas caracter�sticas
(textos curtos, r�pidos, sint�ticos, utiliza��o do LEAD Definir e escrever todos os textos num bom editor,
corrigir poss�veis erros (utilizar manuais de estilo e
reda��o )antes
de aplica-los nas p�ginas. Evitar escrever textos diretamente no editor de
c�digos, separar esta etapa da produ��o.

f)Cores:

A
defini��o de cores de um site pode vir de v�rios aspectos, que v�o desde as
tonalidades padronizadas de uma empresa at� o sentido conceitual que cada cor
carrega por si pr�pria. Existem teorias das cores genericamente aceitas, por�m
este � um conceito que muda de povo para povo, at� mesmo de p�blico-alvo para
p�blico-alvo. Conhe�a um �timo artigo de Wellington
Carrion, sobre
teoria das cores . � poss�vel chegar-se a conjuntos de cores por meio de
extenuantes pesquisas de mercado, avaliar como cada cor ser� aceita ou quais
sentimentos provocar�o em determinado perfil de p�blico.

g)Linguagens:

Como
falar com determinada faixa de p�blico? Que termos devem ser empregados e
evitados? O marketing, mais uma vez, deve definir o tipo de linguagem a ser
utilizada e a maneira de se abordar o visitante durante a visita � p�gina. O
p�blico jovem, por exemplo, pode tolerar g�rias, neologismos, termos da moda e
tudo mais. Por�m, para uma faixa de p�blico conservadora, a linguagem deve ser
polida, cuidadosa, sem excessos. De qualquer maneira, os textos devem seguir a
regra da simplicidade, da facilidade de entendimento.

h)Tipos
de imagens:

Defini��o
de que tipos de imagens ser�o utilizados, de acordo com a linguagem utilizada.
As imagens podem possuir enquadramentos ousados, pouco usuais; bem como podem
utilizar �ngulos tradicionais, comportados, "corretos". Esta � uma
defini��o important�ssima para a equipe de cria��o, j� que no design a
utiliza��o de imagens � essencial.

i)"Pr�-Site"
em Programas de apresenta��o:

Quando
necess�rio, pode-se montar a estrutura b�sica de navega��o, de p�ginas, de
links, utilizando-se uma ferramenta t�pica de escrit�rios como o Power Point ou
qualquer outra ferramenta voltada para a cria��o de aplica��es em su�tes de
escrit�rio, ferramentas normalmente de simples utiliza��o, conhecidas por
profissionais de todas as �reas. Esta apresenta��o ser� um guia na elabora��o
do processo criativo, tomando importantes decis�es sobre a estrutura do site.

Conclus�es e Considera��es Finais

Este � um
tema extenso, que pode ser trabalhado e encarado de maneiras diferentes e
distintas pelas empresas e ag�ncias de web ao redor do mundo. Por�m, trata-se
de algo funcional, testado e utilizado em diversas empresas, com resultados
positivos.

N�o h�,
de maneira alguma, a inten��o de propor a estrutura de planejamento definitiva,
acima do bem e do mal, muito pelo contr�rio. Regras e bolachas nasceram para
serem quebradas; sendo assim; a mudan�a � bem vinda e sempre necess�ria. O
"fazer web" e algo muito novo, muito recente: estamos todos
"apanhando", aprendendo e descobrindo as melhores formas de trabalho.

O intuito
� o de auxiliar o estudante e o profissional de web iniciante de uma maneira
geral, dando a oportunidade de ter algo a seguir como uma b�ssola de orienta��o
para todos os que precisarem, de alguma forma.

Fonte: www.imasters.com.br

Livros e E-books Gratuitos

2009-05-18T19:19:34Z

Baixe e-books e livros totalmente gratuitos aqui:

http://www.livrosparatodos.net

APROVEITEM!

Leitura de arquivos externos no ActionScript 3.0

2009-05-16T13:57:38Z

Leitura de arquivos externos no ActionScript 3.0

Chamando URLs externas

No ActionScript 2.0, para chamar uma URL externa, utiliz�vamos o m�todo getURL, que pedia uma String contendo o caminho da URL.

No ActionScript 3.0, todo caminho de URL � do tipo
URLRequest, que pede como par�metro uma String contendo o caminho da
URL. Isso vale para qualquer chamado externo, seja com caminho local ou
global.

Na nova vers�o podemos armazenar em arquivos externos n�o somente
classes e interfaces, mas tamb�m fun��es, como � o caso abaixo com o
navigateToURL que substitui o getURL.


import flash.net.URLRequest;
import flash.net.navigateToURL;
var chama:URLRequest = new URLRequest("http://www.leandroamano.com.br");
navigateToURL(chama);

Lendo arquivos externos (.txt e .xml)

O conte�do do site deve sempre estar bem dividido para que assim
haja uma f�cil manuten��o para o administrador do site, bem como f�cil
acesso dos usu�rios. Neste artigo iremos observar como funciona o
carregamento de dados textuais externos, da maneira mais simples
poss�vel.

Tamb�m podemos utilizar XML ou Flash Remoting (sistema AMF) para envio
e recebimento de dados com o servidor, atrav�s de chamadas ass�ncronas.
Este �ltimo foi estudado no artigo anterior.

Existe uma s�rie de utilidades para usar o servidor como acesso e/ou envio de dados, que incluem:

Enviar valores de um formul�rio para armazenamento num banco de dados.

Enviar valores de um formul�rio para um ou mais e-mails.

Carregar valores de um texto para cria��o de links ou novidades.

Carregar valores a partir de um arquivo de servidor para exibi��o
de uma aplica��o simples como uma galeria de fotos, ou mesmo uma
aplica��o mais complexa como um e-commerce.

Enviar valores e aguardar uma resposta como, por exemplo, um acesso restrito de usu�rio e senha.

A forma de acesso a esses dados � dada em pares de valores, por exemplo, nome=valor.

Quando se tem mais pares de valores, � necess�rio utilizar o s�mbolo &, por exemplo, nome=valor&nome2=valor2

Carregando arquivos de dados externos

O objeto usado ser� o URLLoader que substitui o LoadVars do ActionScript 2.0.

Para carregar dados externos definiremos dois arquivos, o primeiro um
texto simples, e o segundo um arquivo de servidor, em nosso exemplo o
ColdFusion.

O formato de retorno vem em valores em pares, ou seja, vari�vel=valor, determinamos ent�o que o formato �: (flash.net.URLLoaderDataFormat.VARIABLES)


var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.load(new URLRequest("texto.txt"));

� necess�rio saber tamb�m quando os dados est�o dispon�veis. O
evento event.COMPLETE nos avisa e, quando executado, podemos aplicar um
loop no resultado:


function handleComplete(event:Event):void {
trace("O Resultado pode ser apresentado");
for (var i:String in resposta.data) {
trace(i + " = "+ resposta.data[i]);
}
}

Um exemplo completo pode ser observado abaixo:


//Arquivo texto.txt
nome=Leandro+Amano&numero=1234
//Arquivo index.cfm
<cfsetting enablecfoutputonly="yes">
<cfprocessingdirective suppresswhitespace="yes">
<cfset someText = "teste">
<cfoutput>someText=#someText#</cfoutput>
</cfprocessingdirective>
//Arquivo .fla
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLLoaderDataFormat;
import flash.events.IOErrorEvent;
import flash.events.HTTPStatusEvent;
import flash.events.SecurityErrorEvent;
import flash.events.Event;
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(IOErrorEvent.IO_ERROR, handleIOError);
loader.addEventListener(HTTPStatusEvent.HTTP_STATUS, handleHTTPStatus);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, handleSecurityError);
loader.addEventListener(Event.COMPLETE, handleComplete);
//loader.load(new URLRequest("texto.txt"));
loader.load(new URLRequest("http://localhost:8500/as3/index.cfm"));
function handleIOError(event:IOErrorEvent):void {
trace("Loade failed: IO error: "+event.text);
}
function handleHTTPStatus(event:HTTPStatusEvent):void {
trace("Load status: HTTP status: "+event.status);
}
function handleSecurityError(event:SecurityErrorEvent):void {
trace("Load failed: Security Error: "+event.text);
}
function handleComplete(event:Event):void {
trace("The data has successfully loaded");
var resposta:URLLoader = URLLoader(event.target);
trace(resposta.data.nome);
trace(resposta.data.numero);
for (var i:String in resposta.data) {
trace(i + " = "+ resposta.data[i]);
}
}

Objeto XML

Desde o ActionScript 1 (Flash Player 5) o Flash possu�a a capacidade de ler objetos XML externos, baseados no DOM (W3C Document Object Model), o padr�o para intera��o com documentos XML.

Em ActionScript 3.0 a classe XML foi totalmente modificada.
XML � um tipo nativo do Flash, antigos m�todos e propriedades para a
leitura desses dados externos (firstChild, childNodes, etc) se encontram agora na classe XMLDocument, localizada no pacote flash.xml.

A ActionScript 3.0 implementa o padr�o ECMAScript for XML (E4X) que n�o ser� discutido agora.


//Top Level class XML
var xml:XML = <doc>
<curso>ActionScript 3.0</curso>
<curso>Adobe Flex 3</curso>
<curso>Adobe Dreamweaver CS3</curso>
<curso>Adobe ColdFusion 8</curso>
</doc>;

Lendo um XML externo

Para a leitura de um XML externo utilizaremos uma leitura de arquivo
externo comum como vimos acima. Dentro do evento Event.COMPLETE,
trataremos o objeto lido como um XMLDocument.


import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.xml.XMLDocument;
import flash.events.Event;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("xml_externo.xml"));
function onComplete(e:Event):void {
var xml:XML = XML(e.currentTarget.data);
var xmlDoc:XMLDocument = new XMLDocument();
xmlDoc.ignoreWhite = true;
xmlDoc.parseXML(xml);
var tamanho:uint = xmlDoc.firstChild.childNodes.length;
for(var i:uint; i<tamanho; i++){
// ActionScript 3.0
// Adobe Flex 3
// Adobe Dreamweaver CS3
// Adobe ColdFusion 8
trace(xmlDoc.firstChild.childNodes[i].firstChild.nodeValue);
}
}
Fonte: www.imasters.com.br

Criando uma extens�o de um .as para #include

2009-05-16T13:56:46Z

Criando uma extens�o de um .as para #include

Para quem utiliza sempre um .as onde est�o as fun��es importantes
que compartilha em v�rios trabalhos no Flash, este artigo vai facilitar
sua vida. Chega de ficar copiando o .as em todas as pastas, sem falar
na dificuldade de atualizar esses c�digos.

Vers�o de AS: n/a

Compatibilidade: Flash 6

Dificuldade de produ��o: 5

Dificuldade de aplica��o: 2

1� O processo de cria��o de uma extens�o se baseia no seguinte:

Cria��o de um Extension Installation File, um xml com a extens�o .mxi

Compila��o deste xml para criar uma extens�o mxp.

Instala��o da extens�o .mxp via Extension Manager.

2� Criando o .mxi

A estrutura b�sica do xml � essa:


<?xml version="1.0" encoding="UTF-8"?>
<macromedia-extension name="precoDinamico" version="1.0.0" type="actionscript">
<author name="Weverton Naves" />
<products>
<product name="Flash" version="6" primary="true" />
</products>
<description>
<![CDATA[
Pre�o Dinamico Magazine Luiza.<br>
Consulta o pre�o dos produtos na base e exibe-os no Flash.
]]>
</description>
<ui-access>
<![CDATA[
Para incluir:<br>
#include "precoDinamico.as"<br>
var Produtos:Array = new Array("2014359", "2014406", "2014359");<br>
chamaPreco();<br>
*Os preos estaro disponveis em um Array (Precos) no mesmo escopo da chamada.<br>
Valores do Array<br>
Precos[ini][0] //tipo de preo<br>
Precos[ini][1] //preo de<br>
Precos[ini][2] //preo por<br>
Precos[ini][3] //qtd de parcelas<br>
Precos[ini][4] //valor da parcela<br>
Precos[ini][5] //mensagem dos juros
]]>
</ui-access>
<license-agreement>
<![CDATA[
@copyright 2008 - Weverton Naves - C�digo sobre licensa Creative Commons.
]]>
</license-agreement>
<files>
<file source="testePrecoDinamico.as" destination="$flash/Include" />
</files>
</macromedia-extension>

Consiste nas seguintes tags:

<macromedia-extension />: Tag principal, onde as outras se alojam, cont�m os par�metros com informa��es do nome, tipo e vers�o.

<author />: Informa��es sobre o autor da extens�o.

<description />: Descri��o da extens�o, para que serve, etc;

<ui-access />: Texto que aparecer� no extension manager, normalmente s�o Instru��es de como utilizar a extens�o dentro do flash;

<license-agreemente />: Informa��es sobre licensa.

<files />: Tag m�e das tags <file />, onde s�o especificados os arquivos que far�o parte da extens�o;

3� Compliando o c�digo.

Ao salvar seu arquivo, ele se aparentar� com o �cone abaixo:

Ap�s esta etapa, s� abrir o arquivo e ele abrir� automaticamente no
Extension Manager, j� com o nome do arquivo na op��o "Select Extension
to Package".

Ap�s clicar em "OK", ele abre outra janela, com a op��o "Save
Extension Package As...", onde voc� seleciona onde deve salvar sua
extens�o.

4� Instalando a extens�o

Agora sua extens�o ter� o seguinte �cone:

Esta etapa � f�cil, s� voc� clicar para abrir, e ela ser� instalada automaticamente:

A partir de agora, voc� pode incluir esse arquivo sem precisar
jog�-lo na pasta do seu trabalho, s� � necess�rio fazer a chamada
#include "nomedoseuarquivo.as"

NOTAS FINAIS

- O programa MXI File Creator (Muzaak Deezign) configura o arquivo completinho para voc�, mais f�cil que fazer na m�o, basta baix�-lo aqui.

- Este documento da adobe traz
todas as especifica��es e tags poss�veis para cria��o de extens�es,
para qualquer programa adobe que aceita essa funcionalidade.

Fonte: www.imasters.com.br

Flash Remoting (AMF) no ActionScript 3.0

2009-05-16T13:55:33Z

Flash Remoting (AMF) no ActionScript 3.0

Pr�-requisitos

Conhecer o m�todo de trabalho do Flash, comunicando-se com uma base
de dados atrav�s do AMF (Action Message Format) no ActionScript 3.0.

Programa��o Orientada a Objetos no Flash: Artigo de n�vel b�sico.

Objetivos

Executar a��es como ler, gravar, alterar e excluir dados de um Banco de Dados.

Conte�do

Primeiramente necessitamos de um banco de dados para teste (ACCESS,
MySQL, SQLServer...), uma linguagem de servidor que trabalhe com o
sistema AMF (ColdFusion, Java, .Net, PHP...), e claro, do pr�prio Flash
utilizando ActionScript 3.0.

Lembrando que o assunto do artigo est� voltado ao ActionScript 3,
usando o AMF, assuntos como SQL e ColdFusion - os quais usarei neste
artigo - n�o ser�o discutidos, mas o c�digo tamb�m estar� incluso no
documento abaixo.

SQL para a cria��o da Tabela com seus respectivos campos:

CREATE TABLE GUESTBOOK(

ID INT NOT NULL AUTO_INCREMENT,

NOME VARCHAR(200) NOT NULL,

EMAIL VARCHAR(50) NOT NULL,

MENSAGEM TEXT,

PRIMARY KEY(ID)

) ENGINE=MYISAM

ColdFusion para acesso ao Banco de Dados:


<cfcomponent>
<!-- RETORNA TODAS AS MENSAGENS -->
<cffunction name="getMensagens" access="remote" returntype="query">
<cfquery name="results" datasource="amf" dbtype="odbc">
SELECT * FROM GUESTBOOK
ORDER BY ID ASC</cfquery>
<cfreturn results>
</cffunction>
<!-- ADICIONA UMA MENSAGEM -->
<cffunction name="setMensagem" access="remote" returntype="string" hint="Inclu�do com sucesso!">
<cfargument name="nome" type="string" required="true">
<cfargument name="email" type="string" required="true">
<cfargument name="mensagem" type="string" required="true">
<cfquery datasource="amf" dbtype="odbc">
insert into GUESTBOOK(NOME,EMAIL,MENSAGEM)
values('#nome#','#email#','#mensagem#')
</cfquery>
<cfset results="Inclu�do com sucesso!">
<cfreturn results>
</cffunction>
<!-- ALTERA UMA MENSAGEM -->
<cffunction name="updateMensagem" access="remote" returntype="string">
<cfargument name="nome" type="string" required="true">
<cfargument name="email" type="string" required="true">
<cfargument name="mensagem" type="string" required="true">
<cfargument name="id" type="numeric" required="true">
<cfquery datasource="amf" dbtype="odbc">
UPDATE GUESTBOOK
SET NOME='#nome#', EMAIL='#email#', MENSAGEM='#mensagem#'
WHERE ID=#id#
</cfquery>
<cfreturn "Alterada com sucesso">
</cffunction>
<!-- EXCLUI UMA MENSAGEM -->
<cffunction name="deleteMensagem" access="remote" returntype="string">
<cfargument name="id" type="numeric" required="true">
<cfquery datasource="amf" dbtype="odbc">
DELETE
FROM GUESTBOOK
WHERE ID=#id#
</cfquery>
<cfreturn "Exclu�da com sucesso">
</cffunction>
</cfcomponent>

Com os dados acima, basicamente manipularemos uma tabela de nome GUESTBOOK, que cont�m os campos ID, NOME, EMAIL e MENSAGEM.

Um arquivo feito em ASP seguir� em anexo, juntamente ao ColdFusion.

Ambos os arquivos acima est�o na pasta wwwroot do servidor ColdFusion, dentro de uma pasta chamada amf, que eu criei.

O arquivo ColdFusion se chama servi�os.cfc (componente ColdFusion).

Vamos agora ao Flash, nosso target neste artigo.

Primeiramente, o AMF pode retornar duas coisas quando fazemos um
chamado. Um Erro ou um Resultado. Para isso criarei duas classes de
eventos como vimos no artigo (http://imasters.uol.com.br/artigo/8397/actionscript/disparando_um_evento_customizado/),
uma delas ser� respons�vel pela informa��o do erro, caso ocorra, e
outra pelos resultados do ColdFusion, como a query vinda do banco de
dados ou uma informa��o simples, como, por exemplo, se o cadastro de um
item foi feito com sucesso.

Classe respons�vel pelo status (erro, antiga onFault no ActionScript 2):


package {
import flash.events.Event;
public class StatusEvent extends Event {
public static const STATUS = "status";
public var status:Object;
public function StatusEvent(type:String, bubbles = false, cancelable = false, status:Object = null):void {
super(type, bubbles, cancelable);
this.status = status;
}
public override function clone():Event {
return new ResultEvent(type, false, false, status);
}
public override function toString():String {
return formatToString("StatusEvent", "type", "bubbles", "cancelable", "eventPhase", "status");
}
}
}

Classe respons�vel pelo resultado (retorno do arquivo ColdFusion neste exemplo, antigo onResult no ActionScript 2):


package {
import flash.events.Event;
public class ResultEvent extends Event {
public static const RESULT = "result";
public var result:*;
public function ResultEvent(type:String, bubbles = false, cancelable = false, result:* = null):void {
super(type, bubbles, cancelable);
this.result = result;
}
/**
* Creates and returns a copy of the current instance.
* @return A copy of the current instance.
*/
public override function clone():Event {
return new ResultEvent(type, false, false, result);
}
/**
* Returns a String containing all the properties of the current
* instance.
* @return A string representation of the current instance.
*/
public override function toString():String {
return formatToString("ResultEvent", "type", "bubbles", "cancelable", "eventPhase", "result");
}
}
}

Classe Respons�vel pela conex�o:


package {
import flash.net.NetConnection;
import flash.net.ObjectEncoding;
import flash.net.Responder;
import flash.events.EventDispatcher;
import flash.events.Event;
public class RemoteConnector extends EventDispatcher{
//respons�vel pela conex�o com o banco
private var conn:NetConnection;
//respons�vel pelo resultado ou informa��o do erro ocorrido
private var responder:Responder;
//definimos um padr�o de leitura para teste local
public function RemoteConnector(uri:String = "http://localhost:8500/flashservices/gateway"):void {
conn = new NetConnection();
conn.objectEncoding = ObjectEncoding.AMF0;
conn.connect(uri);
}
public function call(command:String, ... args):void {
//chama a fun��o onResult caso ocorra tudo bem ou onStatus caso ocorra um erro, o nome das fun��es � indiferente, desde que as mesmas sejam renomeadas abaixo
responder = new Responder(onResult, onStatus);
//chama um m�todo co ColdFusion, seguindo pasta, arquivo e nome do m�todo, exemplo: call("amf.servicos.getMensagens");
conn.call(command, responder, args);
}
//dispara um ResultEvent para que possa ser reutilizado fora desta classe, j� com a propriedade result com as informa��es do Banco de Dados
private function onResult(result:*):void {
dispatchEvent(new ResultEvent(ResultEvent.RESULT, false, false, result));
}
//dispara um StatucEvent para que possa ser reutilizado fora desta classe, j� com a propriedade statuc com as informa��es do erro
private function onStatus(status:Object):void {
dispatchEvent(new StatusEvent(StatusEvent.STATUS, false, false, status));
}
public function get uri():String {
return conn.uri;
}
}
}

Para testar o arquivo acima, usarei um .fla de teste, que cont�m o seguinte c�digo no frame 1:


import com.leandroamano.remoting.RemoteConnector;
import com.leandroamano.events.ResultEvent;
import com.leandroamano.events.StatusEvent;
//RemoteConnector
var rc:RemoteConnector = new RemoteConnector();
rc.addEventListener(ResultEvent.RESULT, onResult);
rc.addEventListener(com.leandroamano.events.StatusEvent.STATUS, onStatus);
rc.call("amf.servicos.getMensagens");
trace(rc);
function onResult(e:ResultEvent):void {
trace(e.result);
for(var i in e.result.serverInfo){
trace(i, ":", e.result.serverInfo[i]);
}
trace("t", e);
}
function onStatus(e:com.leandroamano.events.StatusEvent):void {
trace(e.status.description);
trace("t", e);
}

Tamb�m criei um .fla com o c�digo no frame 1, sem utilizar as
classes citadas acima (somente as do pr�prio Adobe Flash CS3) com
alguns elementos visuais no palco [object MainTimeline], que podem ser
observados nos arquivos que acompanham este artigo. O c�digo segue
abaixo:


import flash.net.NetConnection;
import flash.net.Responder;
import flash.net.ObjectEncoding;
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFieldAutoSize;
import flash.geom.ColorTransform;
import flash.utils.setInterval;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.EventPhase;
import fl.data.DataProvider;
import fl.controls.DataGrid;
var selecionado:uint;
var intervalID:uint;
var count:uint;
var gridObj:DataGrid = getChildByName("grid") as DataGrid;
var nome_txt:TextField = getChildByName("nome") as TextField;
var email_txt:TextField = getChildByName("email") as TextField;
var mensagem_txt:TextField = getChildByName("mensagem") as TextField;
var resposta_txt:TextField = getChildByName("resposta") as TextField;
var insert_mc:MovieClip = getChildByName("inserir") as MovieClip;
var update_mc:MovieClip = getChildByName("alterar") as MovieClip;
var delete_mc:MovieClip = getChildByName("excluir") as MovieClip;
var conn:NetConnection = new NetConnection();
var responder:Responder = new Responder(onResult, onFault);
var responderUpdates:Responder = new Responder(onResultUpdates, onFault);
gridObj.addEventListener(Event.CHANGE, onChange);
resposta_txt.mouseEnabled = false;
resposta_txt.wordWrap = true;
resposta_txt.autoSize = TextFieldAutoSize.LEFT;
var initTexto:String = "Para alterar os valores, clique duas vezes sobre o campo de texto desejado";
intervalID = setInterval(displayMessage, 40, initTexto.toUpperCase(), resposta_txt);
for(var i:uint, t:TextField; i<numChildren; i++){
if(getChildAt(i) is TextField && getChildAt(i) != resposta_txt){
t = getChildAt(i) as TextField;
t.doubleClickEnabled = true;
t.restrict = "A-Z0-9\@\ \-\?\.";
t.maxChars = 50;
t.autoSize = TextFieldAutoSize.LEFT;
t.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);
}
}
conn.objectEncoding = ObjectEncoding.AMF0;
conn.connect("http://localhost:8500/flashservices/gateway");
conn.call("amf.servicos.getMensagens", responder);
setColor(0x009900, insert_mc);
insert_mc.buttonMode = true;
insert_mc.addEventListener(MouseEvent.CLICK, insertAMF);
setColor(0xFF6600, update_mc);
update_mc.buttonMode = true;
update_mc.addEventListener(MouseEvent.CLICK, updateAMF);
delete_mc.buttonMode = true;
delete_mc.addEventListener(MouseEvent.CLICK, deleteAMF);
stage.addEventListener(MouseEvent.CLICK, deselect);
function onResult(re:Object):void {
var dados:Array = new Array();
for(var l:uint; l<re.serverInfo.initialData.length; l++){
dados.push({id:re.serverInfo.initialData[l][0],
nome:re.serverInfo.initialData[l][1],
email:re.serverInfo.initialData[l][2],
mensagem:re.serverInfo.initialData[l][3]});
}
gridObj.dataProvider = new DataProvider(dados.sortOn("id", Array.DESCENDING));
gridObj.columns = ["id", "nome", "email", "mensagem"];
var colunas:Array = new Array("ID", "Nome", "E-mail", "Mensagem");
for(var i:uint; i<re.serverInfo.columnNames.length; i++){
gridObj.getColumnAt(i).headerText = colunas[i];
}
gridObj.selectedIndex = selecionado;
gridObj.dispatchEvent(new Event(Event.CHANGE));
}
function onFault(fe:Object):void {
intervalID = setInterval(displayMessage, 50, fe.description.toUpperCase(), resposta_txt); � � � 
}
function onResultUpdates(re:String):void {
intervalID = setInterval(displayMessage, 50, re.toUpperCase(), resposta_txt);
conn.call("amf.servicos.getMensagens", responder);
}
function onChange(e:Event):void {
var grid:DataGrid = e.currentTarget as DataGrid;
selecionado = grid.selectedIndex;
nome_txt.text = grid.selectedItem.nome.toUpperCase();
email_txt.text = grid.selectedItem.email.toUpperCase();
mensagem_txt.text = grid.selectedItem.mensagem.toUpperCase();
}
function onDoubleClick(e:MouseEvent):void {
deselect(new MouseEvent(MouseEvent.CLICK));
var texto:TextField = e.currentTarget as TextField;
texto.type = TextFieldType.INPUT;
texto.border = true;
texto.background = true;
texto.backgroundColor = 0x000000;
texto.textColor = 0xFFFFFF;
texto.selectable = true;
}
function deselect(e:MouseEvent):void {

Tratamento de data e hora via Actionscript
2009-05-16T13:54:37Z
Tratamento de data e hora via Actionscript



Saber como tratar data e hora � fundamental para quem quer oferecer
servi�os ao usu�rio. N�o somente com o prop�sito de exibir um rel�gio
no site, mas para saber o tempo em que determinado usu�rio executou uma
opera��o, a hora em que efetuou uma transa��o e armazenagem de dados.


A ActionScript armazena datas e horas internamente como epoch milliseconds, o tempo de milisegundos que passaram desde meia noite, 1 de Janeiro de 1970 no Tempo de Coordenada Universal (UTC - Coordinated Universal Time), e para nossos prop�sitos � equivalente ao GMT (Tempo do Meridiano de Greenwich).


Para exibir a data e a hora, utilizamos o objeto Date. Ele nada mais faz que retornar a data e hora do usu�rio.



var data:Date = new Date();
trace(data);


Retornando dados do objeto Date separadamente


Hora

A propriedade hours retorna um valor entre 0 e 23.

Minuto

A propriedade minutes retorna um valor entre 0 e 59.

Segundo

A propriedade seconds retorna um valor entre 0 e 59.

Dia

A propriedade date retorna um valor entre 0 e 23.

M�s

A propriedade month retorna um valor entre 0 e 11.

Ano

A propriedade fullYear retorna um valor de quatro d�gitos como 2008.

Dia da semana

A propriedade day retorna um valor entre 0 6.


var tempo:Date = new Date();
var horas:uint � � � � �= tempo.hours;
var minutos:uint � � � �= tempo.minutes;
var segundos:uint � � � = tempo.seconds;
var dia:uint � � � � � �= tempo.date;
var mes:uint � � � � � �= tempo.month;
var ano:uint � � � � � �= tempo.fullYear;
var diaSemana:uint �= tempo.day;
trace(horas + ":" + minutos + ":" + segundos);
trace(dia + "/" + mes + "/" + ano);
trace(diaSemana);


Recebendo o nome do m�s e do dia da semana


Para associar valores num�ricos a valores textuais como segunda-feira, criamos um array e trocamos o chamado do �ndice fixo pelo chamado do valor da data atual:



var tempo:Date = new Date();
var horas:uint � � � � �= tempo.hours;
var minutos:uint � � � �= tempo.minutes;
var segundos:uint � � � = tempo.seconds;
var dia:uint � � � � � �= tempo.date;
var mes:uint � � � � � �= tempo.month;
var ano:uint � � � � � �= tempo.fullYear;
var diaSemana:uint �= tempo.day;
var arrDiasSemana:Array = ["Domingo", "Segunda", "Ter�a", "Quarta", "Quinta", "Sexta", "Sabado"];
var arrMeses:Array = ["Janeiro", "Fevereiro", "Mar�o", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
trace(arrDiasSemana[diaSemana] + ", " + dia + " de " + arrMeses[mes] + " de " + ano + ".");
//Quarta, 6 de Fevereiro de 2008.



Um exemplo completo com atualiza��o constante na tela pode ser observado abaixo:



package {
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.Sprite;
public class DataHora extends Sprite{
private var contador:Timer;
private var tempo:Date;
private var data:TextField;
private var hora:TextField;
private var meses:Array;
public function DataHora() {
meses = ["Janeiro", "Fevereiro", "Mar�o", "Abril", "Maio", "Junho",
"Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
data = getChildByName("data_txt") as TextField;
hora = getChildByName("hora_txt") as TextField;
data.autoSize = TextFieldAutoSize.LEFT;
hora.autoSize = TextFieldAutoSize.LEFT;
contador = new Timer(1000);
contador.addEventListener(TimerEvent.TIMER, onTimer);
contador.start();
onTimer();
}
private function onTimer(e:TimerEvent = null):void {
tempo = new Date();
hora.text = zeroFill(tempo.hours) + ":" + zeroFill(tempo.minutes) + ":" + zeroFill(tempo.seconds);
data.text = tempo.date + " de " + meses[tempo.month] + " de " + tempo.fullYear + ".";
}
private function zeroFill(valor:Number):String {
if(valor > 9){
return valor.toString();
} else {
return "0" + valor.toString();
}
}
}
}


Convertendo entre DMYHMSM e Epoch Milliseconds


� importante saber converter o formato date em diferentes
formatos de apresenta��o, pois nem sempre o sistema nos traz de forma
apraz�vel estes valores. No exemplo abaixo, a propriedade time nos
retorna a data em formato DMYHMSM (dia, m�s, ano, hora, minuto,
segundo, milisegundo). E na linha abaixo passamos no construtor um
valor de tempo ao inv�s do ano, pedindo em seguida seu valor, o qual
retornar� a data como formato usual (epoch milliseconds).



var data:Date = new Date(2008, 0, 6);
//1199588400000 (timeValue)
trace(data.time);
var data2:Date = new Date(1199588400000);
//Sun Jan 6 00:00:00 GMT-0300 2008
trace(data2);
Fonte: www.imasters.com.br







Out of Bounds e Vector Mask
2009-05-16T13:53:13Z
Out of Bounds e Vector Mask


Ol� pessoal, tudo certo!?


Nessa mat�ria criaremos um famoso efeito, al�m de muito interessante
e �til, principalmente em campanhas publicit�rias. Teremos uma r�pida
aula sobre Vector Mask. Pe�o uma aten��o especial ao 3� Passo
(sele��o), pois ser� ele que definir� grande parte da qualidade do
efeito. Ok!? "M�os � obra!"


	Artista: Lincoln Soares (designsoares@hotmail.com)

	Descri��o: Out of Bounds e Vector Mask

	Software ultilizado: Photoshop CS em Ingl�s.

	Grau de Dificuldade: 6.0

	Ao som de: Watching Over Me - Iced Earth



Imagens utlizadas:








1� Passo: Crie um novo documento (Ctrl + N),  1024 X 768 pixels, RGB, OK e importe as imagens para o documento criado.






2� Passo: Renomeie as imagens e posicione conforme
a imagem abaixo. Com a layer da imagem do atleta selecionada, v� em
Edit > Transform > Scale (Ctrl + T) e aumente conforme o exemplo
abaixo:.






3� Passo: Esse � o passo que vai definir a
qualidade do seu trabalho . Vamos ter que fazer uma sele��o que vai
fazer o contorno da tela da TV, mas o corpo do atleta tem que ficar
para fora. Veja o exemplo abaixo

DI





4� Passo. Feita a sele��o, inverte-a  Select > Iverse (Ctrl + Shift + I) e clique em Add Vector Mask.






Ok. Aproveitando a situa��o, vamos ter uma pequena aula sobre Vector
Mask. Como a foto do Atleta estava em um fundo colorido, podemos notar
algumas imperfei��es na parte em que o corpo do atleta fica para fora
da TV, o que � totalmente natural pois estamos passando a foto para um
fundo branco. Observe:





Quando clicamos no "Add Vector Mask", vemos que ele adiciona uma
layer de sele��o ao lado da layer da imagem e, nesta imagem, notamos
que tem partes brancas e partes pretas, o que se conclui que:


Branco: A imagem aparece.

Preto: A imagem se oculta.  




Chega de teoria, vamos para pr�tica!


5�Passo: 

Selecione a Layer Mask da layer do atleta (basta dar um clique em cima da layer) 




6� Passo: Pegue a ferramenta Brush Tool (B) e, na configura��o, altere o Hardness para 0%. Assim o brush ficar� esfuma�ado.





7� Passo: Com a cor preta, passe o brush de leve nas bordas pretas aperfei�oando a imagem.





Sua imagem final dever� ficar assim: 





Coloque uma sombra para deixar mais real.





Est� pronto nosso efeito!


Bem pessoal, esse foi um exemplo, e muito utilizado diga-se de
passagem. Agora deixo a responsabilidade para criatividade de voc�s. 


Veja alguns exemplos pelo mundo ai fora:





















 


Fonte: www.imasters.com.br




Aplicando luz artificial em fotos
2009-05-16T13:51:47Z
Aplicando luz artificial em fotos


Siga os passos abaixo para compreender a aplica��o de luz artificial.


01. Pressione Ctrl+O e abra uma
imagem qualquer. Para este artigo usaremos a imagem abaixo, caso queira
usar a mesma imagem clique com o bot�o direito do mouse sobre a foto e
pressione o bot�o direito do mouse, escolha a op��o Save Link As.



[para baixar esta foto clique com o bot�o direito e escolha Save Link As]


02. Pressione Ctrl+J para duplicar a layer, pressione a letra B do teclado para abrir a caixa de Color Balance e defina os valores abaixo.



03. Sua imagem dever� ficar como na foto abaixo.



04. Novamente pressione Ctrl+B para abrir a caixa de Color Balance, clique em Midtones e defina os valores abaixo.



05. Mude o modo de blend da layer para Saturation e defina a opacidade em 70%.



06. Agora clique com o bot�o direito do mous e sobre a textura abaixo e escolha a op��o Save Link As. Com a textura salva, pressione Ctrl+O e abra a textura. Pressione Ctrl+B para abrir a caixa de Color Balance e defina os valores mostrados a seguir. Feito isto pressione Ctrl+A para selecionar o conte�do da textura, Ctrl+C para copiar, volte no documento da foto em que estamos trabalhando e pressione Ctrl+V para colar.





07. Agora v� em Filter> Render> Lighting Effects e defina os valores abaixo.




08. Sua imagem dever� ficar como na foto abaixo.



09. Mude o modo de blend da layer com a textura para Screen.



10. Agora v� em Filter> Blur> Gaussian Blur e defina os valores abaixo.



11. Clique na layer 1 (da foto original) e pressione Ctrl+J
para duplicar a layer. Deixe esta c�pia acima de todas as outras layers
na paleta de layers e mude o modo de blend para Soft Light.



12. (Opcional) Agora clique com o bot�o direito do
mouse sobre a textura abaixo e escolha a op��o Save Link As, com a
textura salva pressione Ctrl+O e abra a textura, pressione Ctrl+A para selecionar o conte�do da textura, Ctrl+C para copiar, volte no documento da foto em que estamos trabalhando e pressione Ctrl+V para colar.



13. Mude o modo de blend da layer da nova textura para Screen, pressione Ctrl+T para abrir a caixa de Free Transform e redimensione, gire ou duplique � vontade a textura.



14. (Opcional) Clique aqui e baixe
o set de brushes usados neste tutorial para criar os pequenos pontos
brilhantes na imagem, instale o set de brushes indo em C:Arquivos de
programasAdobeAdobe Photoshop (vers�o do seu
Photoshop)PresetsBrush, salve o documento em que estamos trabalhando
e reinicie o Photoshop, pressione Ctrl+O e abra novamente o documento em que estamos trabalhando, pressione a letra B do teclado para selecionar a Brush Tool e carregue o Brush que foi instalado, passe o brush pr�ximo ao brilho aplicado.



15. (Opcional) Adicione um texto em sua imagem e ao final ela estar� como na foto abaixo.



Site de origem: http://www.photoshop-garden.com/view_tut.php?id=67


Fonte: www.imasters.com.br




Como melhorar o aspecto de imagens tiradas com celular
2009-05-16T13:50:38Z
Como melhorar o aspecto de imagens tiradas com celular





01. Pressione Ctrl+O e abra a foto que foi tirada

de uma c�mera de celular. Neste artigo iremos usar a imagem abaixo

(caso queira usar a mesma imagem, clique com o bot�o direito do mouse

sobre a imagem e escolha a op��o Save Link As), pressione Ctrl+J para

duplicar a layer.







][para baixar esta foto clique com o bot�o direito e escolha Save Link As]







02. Agora v� em Window > Channels para abrir a

paleta de Channels, cada um dos canais, Red, Green e Blue. Clique no

Channel Red e sua imagem deve ficar como a da foto abaixo.









03. V� em Filter > Noise > Reduce Noise. neste filtro voc� ter� algumas op��es importantes como:







Strength (Intensidade) - Controla a intensidade de redu��o de ru�do de luminesc�ncia aplicada a todos os canais da imagem.







Preserve Details (Preservar Detalhes) - Preserva as

arestas e os detalhes da imagem, como fios de cabelo ou objetos

texturizados. Um valor de 100 preserva a maioria dos detalhes da

imagem, mas reduz muito pouco o ru�do de luminesc�ncia. Equilibre os

controles Intensidade e Preservar Detalhes para ajustar a redu��o de

ru�do.







Reduce Color Noise (Reduzir Ru�do de Cores) - Remove os pixels aleat�rios de cor. Um valor mais alto reduz mais ru�do de cores.







Sharpen Details (Tornar Detalhes N�tidos) - Torna a

imagem mais n�tida. Remover o ru�do reduz a nitidez da imagem. Para

restaurar a nitidez, use o controle de nitidez da caixa de di�logo ou,

posteriormente, um dos outros filtros de nitidez do Photoshop.







Remove JPEG Artifacts (Remover Artefatos JPEG) -

Remove artefatos e halos de imagem em forma de bloco causados pelo

salvamento de uma imagem configurada com baixa qualidade de JPEG.







Neste artigo foi aplicado um valor de 10 pixels para Strength, 0

pixels para Preserve Details e 3 pixels para Sharpen Details com a

op��o Remove JPEG Artifact selecionada. Ap�s aplicar o filtro,

pressione Ctrl+F para aplicar novamente e sua imagem deve ficar

parecida com a imagem abaixo.









04. Agora clique no Channel Green e pressione

Ctrl+F duas vezes para reaplicar o filtro Reduce Noise. Fa�a o mesmo no

Channel Blue e ao final clique no Channel RGB. Sua imagem deve ficar

como a da foto abaixo.









05. Pressione a letra R do teclado para selecionar

a Blur Tool, defina um valor entre 30 a 35% no Strength da ferramenta

(na barra de op��es da ferramenta no alto da tela), escolha um brush de

tamanho grande e pontas suaves e passe nas �reas onde o granulado

permanece na imagem. Sua imagem deve ficar como a da foto abaixo.









06. Agora pressione Ctrl+L para abrir a caixa de

Levels e defina o valor de 1,26 para o Input Level do slider de

Midtones para ajustar o brilho da imagem.









07. Agora pressione a letra I (i) do teclado para

selecionar a Eyedropper Tool, clique em um ponto do rosto onde a cor

pare�a mais natural, pressione a letra B do teclado para selecionar a

Brush Tool e mude o modo de blend do brush na barra de op��es da

ferramenta para Color, defina a opacidade entre 15 a 20% e passe nas

partes da imagem que ainda est�o com as cores esverdeadas.









08. Troque as cores para diferentes partes da

imagem como camisetas, blusas, brincos, cabelos usando o mesmo

processo. Ao final do nosso trabalho, sua imagem estar� como na imagem

abaixo.









Site de origem:




http://www.phototutorial.info/?p=136



Fonte: www.imasters.com.br




Efeito de realismo para fotos
2009-05-16T13:45:45Z
Efeito de realismo para fotos


01. Pressione Ctrl+O e abra a foto escolhida para ser trabalhada, neste tutorial iremos usar a imagem abaixo.


Clique no link abaixo da foto para baix�-la.

Imagem 1

02. Para adicionar as bordas pressione a letra M do teclado para selecionar a Rectangular Marquee Tool,
crie um ret�ngulo na �rea central da foto e pressione Ctrl+J, isto ir�
criar uma nova layer com a parte selecionada, retire a visibilidade da
layer Background e sua imagem ir� ficar como a da foto abaixo.



03. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione agora a letra G do teclado para selecionar a Paint Bucket Tool,
pressione a letra D do teclado para resetar as cores de Foreground e
Background para preto e branco, pressione a letra X para alternar a cor
de Foreground para branco e clique no documento, posicione a layer
pintada de branco abaixo da layer com a c�pia da foto pressionando
Ctrl+[ ou clicando e arrastando a layer para baixo na paleta de layers,
pressione Ctrl+Shift+Alt+N novamente para criar outra layer, pressione
a letra X do teclado para mudar a cor de Foreground para preto e clique
na �rea do seu documento para pintar a nova layer de preto, pressione
Ctrl+[ para posicionar esta nova layer abaixo da layer branca, agora
temos 4 layers, a primeira (de cima para baixo) com a c�pia da foto, a
segunda em branco, a terceira em preto e a �ltima que � a foto
original, sua imagem dever� ficar como a imagem abaixo.



04. Clique na layer que cont�m a c�pia de sua foto
(que deve estar acima da layer em branco) e pressione Ctrl+E para
mesclar as duas layers (c�pia da foto e layer branca), v� em Image> Canvas Size e wm Width e Height aumente em alguns pixels o tamanho total do documento afim de deixar seu documento como o da foto abaixo.



05. Agora v� em Image> Rotate Canvas> 90� CW e logo ap�s em Filter> Distort> Shear e defina os valores abaixo.



06. Agora v� em Image> Rotate Canvas> 90� CCW, clique na layer em preto e v� em Filter> Blur> Gaussian Blur e defina o valor abaixo e logo ap�s deixe a layer com 60% de opacidade.



07. Pressione Ctrl+Shift+Alt+N para criar uma nova
layer, deixe esta layer acima da layer que cont�m a c�pia da foto,
pressione a letra M do teclado para selecionar a Rectangular Marquee Tool,
na barra de op��es da ferramenta que fica no alto da tela defina o
valor aproximado de 25 pixels para o Feather e crie uma sele��o na
parte onde queremos adicionar um brilho, pressione a letra G do teclado
para selecionar a Paint Bucket Tool e pinte de branco a sele��o, defina a opacidade da layer em 50%.



08. Pressione Ctrl+D para retirar a sele��o,
pressione Ctrl+Shift+E para mesclar todas a layers, pressione
Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra G do
teclado para selecionar a Paint Bucket Tool e pinte a
nova layer de branco, pressione Ctrl+[ ou clique e arraste a layer para
baixo da layer que cont�m a foto que estamos trabalhando, feito isto
seu efeito estar� terminado.



Site de origem: http://www.webdesign.org/web/photoshop/special-effects/realistic-photo-effect---oob.10492.html


Fonte: www.imasters.com.br




Como finalizar e colorir desenhos feitos � m�o
2009-05-16T13:44:57Z
Como finalizar e colorir desenhos feitos � m�o


Ap�s digitalizar um determinado desenho, vamos estudar t�cnicas para colori-los e finaliz�-los. Siga os passos.


01. Preparando seu Desenho.


Tente deixar as linhas de sua ilustra��o o mais limpa poss�vel. N�o
use sombreamento, pois isso dificultar� pr�ximos passos para a
defini��o dos tra�os no Photoshop. Caso use l�pis, uma boa op��o � usar
um l�pis 2B que possui uma cor forte.


02. Scanner.


Um passo importante para a qualidade de seu trabalho � o momento de
passar seu desenho pelo scanner. Definir a quantidade de dpi's certa �
essencial para podermos trabalhar o desenho depois. Para termos uma
imagem de tamanho bom, que permita o uso de zoom e que apresente boa
defini��o, usamos na maioria dos casos 400 dpi's, e o modo de cores
fica em Black/White (preto e branco).


03. Ap�s scanear.


Abra o desenho no Photoshop e duplique a layer pressionando Ctrl+J.
D� o nome de "Desenho" e, para a outra layer (original), d� o nome de
"scan original".





Selecione a layer "Desenho" e v� em Image> Adjustments> Levels ou pressione Ctrl+L para abrir a caixa de Levels.


Aqui iremos deixar o background da imagem mais branco (para remover
as marcas do papel) e escurecer as linhas do desenho para criar um
maior contraste.


Com a caixa de Levels aberta (certifique-se que a op��o "preview"
est� selecionada) v� puxando a seta branca at� encontrar o ponto ideal
onde as marcas do papel desaparecem deixando o fundo totalmente branco.
Depois fa�a o mesmo com a seta preta, arrastando lentamente at�
encontrar o ponto ideal onde os tra�os da ilustra��o fiquem definidos e
bem contrastados com o fundo.






04. Ap�s o ajuste de Levels vamos remover o fundo, separando o desenho do background.


Duplique a layer e d� a ela o nome de "Desenho Recortado".


Para remover o fundo branco existem duas maneiras, uma delas � usando este tutorial que j� foi postado aqui no blog, mas caso o resultado n�o seja bom o jeito ser� usar a ferramenta Magnetic Lasso Tool (letra L do teclado).


Caso voc� tenha que usar a Magnetic Lasso Tool
(letra L do teclado), certifique-se de que o Anti-Alias esteja
selecionado. V� tra�ando ao redor das linhas do desenho, a ferramenta
deve grudar �s linhas facilmente.





Ap�s criar sua sele��o, pressione Delete.





05. Agora crie uma nova layer pressionando Ctrl+Shift+N. D� o nome de "Cores".


Selecione a Pencil Tool (letra P do teclado)
e escolha a cor desejada. Para um melhor controle do trabalho, crie uma
layer para cada cor aplicada. Dessa forma, no caso de troca de cores, o
trabalho ficar� bem mais f�cil. Use a Zoom Tool para pintar em �reas mais complicadas.





Ap�s pintar, altere o modo de blend da layer para Darken. As linhas de seu desenho ir�o aparecer fazendo com que a cor perca sua opacidade e revele os detalhes do desenho.





Continue repetindo o processo at� colorir toda a ilustra��o criando para cada cor uma layer diferente.





 


Fonte: www.imasters.com.br




Efeito de destaque para �reas espec�ficas de uma foto
2009-05-16T13:43:45Z
Efeito de destaque para �reas espec�ficas de uma foto


01. Pressione Ctrl+O e abra uma foto qualquer. Para
este tutorial usaremos a foto abaixo, caso queira usar a mesma imagem
clique com o bot�o direito do mouse sobre a foto e escolha a op��o Save
Link As.





02. Pressione Ctrl+J ou v� em Layer> New> Layer Via Copy para duplicar a layer.







03. Pressione a letra M do teclado para selecionar a Rectangular
Marquee Tool e crie uma sele��o ao redor da parte da imagem que voc�
queira criar o efeito.







04. Agora pressione Ctrl+J ou v� em Layer> New> Layer Via Copy
para duplicar apenas a parte selecionada da imagem. V� em Layer>
Hide Layers para retirar a visibilidade da layer.









05. Clique na layer Background Copy e v� em Image>
Adjustments> Desaturate ou pressione Ctrl+Shift+U para retirar a
satura��o da imagem. Pressione Ctrl+J para duplicar a layer.








06. Agora v� em Filter> Blur> Gaussian Blur.





07. Defina os valores abaixo e pressione Ok.





08. Mude o modo de blend da layer para Linear Light, defina a opacidade da layer em 40%.








09. Agora pressione Ctrl+Shift+Alt+N para criar uma nova layer,
escolha uma cor qualquer e pressione Alt+Backspace (a tecla acima do
Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket
Tool e clique no documento para preencher a layer com a cor escolhida.








10. Defina o modo de blend da layer para Soft Light e a opacidade em 65%.








11. Agora pressione Ctrl+E para mesclar as 3 layers que estamos
trabalhando, a layer colorida e as duas layers copiadas da foto
original. Pressione Ctrl+L ou v� em Image> Adjustments> Levels
para abrir a caixa de Levels.





12. Defina os valores abaixo e pressione Ok.








13. Agora Filter> Distort> Diffuse Glow.





14. Defina os valores abaixo e pressione Ok.








15. Agora clique na layer 1 (que criamos a partir da sele��o) e v�
em Layer> Show Layers, pressione Ctrl+L ou v� em Image>
Adjustments> Levels.





16. Defina os valores abaixo e pressione Ok.








17. Agora clique no �cone de Add Layer Style no rodap� da paleta de layers e escolha a op��o Stroke.





18. Defina os valores abaixo.





19. Agora v� em Layer> Layer Style> Outer Glow e defina os valores abaixo.





20. Ao final sua imagem estar� como a da foto abaixo.










site de origem: http://www.psdrockstar.com/photo-effects/tutorial-how-to-emphasize-part-of-an-image/


Fonte: www.imasters.com.br