boas festas !!

Oi Pessoal, desejo a todos vocês um feliz natal e que o

ano de 2011 seja um ano de bençãos e muitas 

realizações, a melhor consideração,

Irineu de Sá, Deus te abençoe !! 

animação em flash

Animação dos South Park´s em flash.

Entendendo sobre Animações.

Uma animação é uma forma de dar vida a objetos inanimados utilizando uma seqüência de imagens onde cada imagem os objetos e personagens aparecem em um estado diferente, ou seja, é uma ilusão de óptica que faz proveito do déficit da capacidade do cérebro de perceber certa quantidade de imagens por segundo. Segue exemplo abaixo:

As animações tiveram inicio em 1895, quando dois irmãos chamados Auguste Lumière e Louis Lumière fizeram a primeira exibição de imagem em movimento com um aparelho chamado cinematógrafo que era uma espécie de projetor de imagens em seqüência. Nos dias de hoje as animações ganharam vários para se trabalhar com animações. Os Estúdios Disney foi um dos principais pioneiros na produção de desenhos animados e também criou tendências e doze conceitos para criação de animações. Para entender melhor vejamos quais são eles:

1.       Squash and Stretch ou Achatar e Esticar, aqui desenvolveu a parte onde o objeto tem sua forma modificada por uma determinada ação.  Um exemplo seria o achatar de uma bola pelo impacto gerado ao cair no chão.

2.       Timing & Motion ou Tempo e Movimento, esse principio é onde vemos a diferença de tempo entre os objetos, determinamos o quão rápido será uma ação. Podemos ver esse principio no critério da física nos movimentos que há na animação, por exemplo, o cair de uma bola.

http://www.youtube.com/watch?v=rLXyrfxWw9Y

3.       Antecipação, antes de efetuar uma determinação ação é necessário um preparo, por exemplo, para um personagem iniciar a ação de correr é necessário ele se preparar e pegar um impulso. Outro exemplo é o Lobo Mau na historia dos três porquinhos ao encher seus pulmões de ar antes  sobrar a casa dos porquinhos.

http://www.youtube.com/watch?v=xLM7WRm4SKE

4.       Cenografia, principio onde usamos artifícios de câmera e luz para direcionar a atenção para o personagem ou até mesmo complementar a cena para que se torne algo de impacto. Podemos ver esse principio nas cenas onde o nosso amigo Gato de Botas faz cara de filhote abandonado para ganhar algo.

5.       Sequência de ações e reações, toda ação tem uma reação, o personagem tropeça (ação) e da uma cambalhota (reação, ou ao comer um monte de pimenta (ação) o personagem cuspir uma labareda (reação) pelo ardume de pimenta. veja o exemplo:

6.       Straight Ahead & Pose-to-pose, Straight Ahead é o principio onde se trabalha quadro a quadro na animação sendo preciso no mínimo dos detalhes. Pose-to-Pose é o ato de reaproveitar informação delimitando detalhes a cada série de quadros.

7.       Aceleração e desaceleração, é quando usamos mais quadros para detalhar um determinado movimento deixando-o mais lento e visivelmente perfeito ou menos quadros para dar uma sensação de velocidade.

8.       Arcos de movimento, para dar mais vida á um determinado movimento se cria a execução desse movimento em um ângulo a formar um arco.  Podemos ver isso nos movimentos do personagem ao movimentar seu pescoço, onde sua cabeça segue um movimento ondulado e não retilíneo.

9.       Exagero nos movimentos, esse principio é onde deixamos as ações dos personagens mais realistas exagerando nas gesticulações de seus movimentos.

10.   Ações secundárias, nesse principio descrevemos a relação de ações provocadas por ações, um exemplo é quando personagem carrega um monte de livros empilhados e ao caminhar os livros ficam saltando a cada passo.

11.   Consistência, todo personagem tem padrões em seus movimentos e isso deve ser respeitado para que os movimentos de um personagem não sobressaiam sobre o de outros.

12.   Particularidades / Peculiaridades, esse principio é muito importante, pois cada personagem tem sua maneira de existir, de encenar, tem seu comportamento diferenciado de outros personagens ou sua maneira única de ser. As particularidades das ações e comportamento são o que vão dar forma ás características do personagem.

http://www.youtube.com/watch?v=cWY3iyZk4t8

http://www.youtube.com/watch?v=jCRiIwmoJ4E&feature=player_embedded#!

Para a criação de animações também se tem o uso de várias técnicas para conseguir o resultado desejado. Existem vários tipos de animação usando tais técnicas que podemos relatar. Segue uma relação das técnicas.

1.  Frame a frame, técnica principal das animações, toda animação possui uma imagem a cada quadro esses quadros são os frames onde em cada um deles possui um estagio diferente das mesmas figuras.

2.  Rotoscopia, técnica onde se usa uma referencia real de vídeo para criar uma animação. veja o exemplo:

3.  Stop Motion, técnica onde se usa foto a foto ou quadro a quadro de uma imagem parada para gerar uma seqüência de movimentos. Um exemplo seria vídeos de bonecos de massa, onde se muda as formas da cena e se tira uma foto a cada mudança para montar a animação. veja alguns exemplos:

4.  Pixilation, essa técnica é a mesma coisa que o stop motion, porém se usam atores e objetos reais.

5.  Recortes, técnica onde se cria uma animação utilizando recortes de fotos.

6.  Key Frames, key frames são os quadros que delimitam o quadro inicial e final da transição de movimento ou interpolação de uma imagem.

7.  Animação limitada, é uma técnica onde se cria uma animação utilizando uma pequena quantidade de frames dando uma sensação de movimento continuo.

8.  Bones, técnica que utiliza articulações programadas para criar movimento em personagens e objetos.

9.  Animação Vetorial,  técnica onde se cria animações utilizando imagens criadas com formas geométricas.

10.Três dimensões, técnica onde se usa malhas compostas por vértices e textura para criar objetos tridimensionais e animá-los.





    No vídeo acima apresentado, foi desenvolvido usando a tecnica 3D "Três Dimensões" ao assistirmos com um olhar perceptivo podemos enxergar os doze conceitos de animação. Veja alguns: tempo e movimento; esticar, na hora do arco e flecha, quando o esquilo fica em cima o galho por ordem do coelho; antecipação de movimento; cenografia; sequência de ações e reações; aceleração e desaceleração; arcos de movimento, principalmente no coelho; exagero nos movimentos, quando os esquilos estão atirando frutas no coelho; ações secundarias, repare nas flores quando o coelho cheira, o rabinho dele se mexendo; consistência; particularidade e peculiaridade dos personagens, perceba cada um tem o seu jeito de ser.

  

Pixel Art!

É um método utilizado para trabalhar uma imagem pixel a pixel. A pixel art é um método muito antigo, utilizado desde a época do vídeo game ATARI, onde as imagens eram pixels coloridos que somados, formavam uma imagem. Hoje em dia, a pixel art ainda é muito utilizada, temos como exemplo ícones que utilizam um tamanho de trinta e dois por trinta e dois pixels e também se usa para criar imagens de jogos, principalmente para celulares. Para trabalhar com pixel art é apenas necessário um editor gráfico como, por exemplo, o Microsoft Paint, Photoshop ou GIMP entre outros. Utilizando uma ferramenta de zoom e editando pixel a pixel até que quando visto com o tamanho original os pixels formam uma imagem ou figura. Vejamos alguns exemplos:

		Podemos ver a pixel art nas imagens de exemplo ao lado. Veja a forma evidente com que cada quadrado ou pixel com uma cor somado a outros formam uma imagem.
		Veja a imagem diminuída como ela fica mais evidente em sua forma e os pixels menos visíveis.

Veja também:


http://www.youtube.com/watch?v=xvCb6sfN1HE

Veja mais um exemplo de pixel art com o jogo Ninja Gaiden para NES.

Outro bom exemplo que podemos citar é um jogo chamado Habbo Hotel, onde todos os gráficos do jogo são feitos em pixel art. Vejamos abaixo:

Imagem disponivel em: http://gameidea.files.wordpress.com/2008/10/habbo-hotel1.png

19/04/2010

A Pixel art é um meio muito divertido de se trabalhar com imagens e com um pouco de paciência o esforço é recompensado com belas imagens que nos lembra nossa infância quando jogávamos Super Mario Bros em nosso Famicon da Nintendo.

Criando Pixel Art.

Vamos utilizar como exemplo a ferramenta GIMP para criar nossa primeira pixel art. Iniciamos o programa e criamos uma imagem de 19x19 pixels.

Arquivo > Novo.

Agora colocamos o zoom em 1600% e também configuraremos a grade para 1x1 para visualizar melhor os pixels.

Visualizar > Zoom > 16:1.

Imagem > Configurar grade...

E então habilitamos a visualização das grades e começamos a desenhar usando a ferramenta Lápis .

Visualizar > Exibir grade.

Tecla N para ferramenta Lápis. 

Espero que tenham gostado, até logo :-).

Elementos do design de um site, percebendo o que antes não era visto.

Nos dias de hoje, os web sites estão muito mais sofisticados, com botões interativos, animações, cheios de cores mas paramos agora para pensar do que um site é composto. Teoricamente um site é composto por vários elementos, um que sempre temos em comum em todos os sites é o logotipo do proprietário do site, e um menu também, dificilmente veremos um site sem menu. Podemos olhar para um site e perceber que em todo seu layout é composto de pequenas partes aos quais chamamos de elementos, sejam eles links, vídeos, menu, formulários, etc...

Vamos lembrar de quando os sites eram paginas que continham apenas texto, com menos de oito cores, e algumas imagens. Vamos refrescar a memória com alguns exemplos abaixo:

Yahoo - 1996

Yahoo - 2010

Que diferença não? Paramos para analisar, quais os elementos temos em comum nos sites velhos em relação aos novos. Veja a imagem a seguir:

1. Cabeçalho ou topo, onde ficam os principais elementos de navegação do site.
2. Logotipo, todos os sites terão um, mesmo que seja uma simples frase.
3. Menu de navegação, composto por links onde possamos navegar no site.
4. Formulário, neste caso um campo onde iremos digitar algo para buscar.
5. Corpo do site.
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Agora vamos nos aprofundar mais, podemos reparar que não temos tanto assim em comum com o antigamente. Hoje os sites estão mais interativos e interessantes pela maior quantidade de possíveis elementos que podemos utilizar para construir um site, animações, vídeos, menus suspensos e vários outros. Nunca nos demos conta mas paramos para perceber quais são os elementos de um site e iremos encontrar muita coisa que não tínhamos ideia que estavam ali fazendo parte do layout dando forma e vida ao site. Vejamos toda uma relação de elementos possíveis em um site:
   
   

   Cabeçalho ou topo. Corpo. Rodapé. Ícones, Favicon. Logotipo. Menus, menu de navegação, menu lateral. Links, Botões. Formulários, caixas de listagem, caixas de marcação. Cores. Fundo ou background Imagens, fotos. Vídeos, Animações.

   Tabelas, colunas. Separadores, divisórias. Texto, títulos, parágrafos, citações. Som. Banners, propaganda. Marcação e paginação Mapa do site. Ilustrações e desenhos.

   
   
   Perceptivelmente temos uma gama bem grande de possíveis elementos a se usar em um site e analisando tudo isso, ainda podemos ver que cada elemento tem sua situação, sua necessidade para existir. O logo tipo sempre teremos ele na parte mais alta do site para que seja visualizado por primeiro de tudo. Temos links onde direcionamos o usuário para varias outras paginas do site, ou seja, tudo no seu devido lugar, porem isso não se torna regra, apenas há meios mais sensatos para se usar cada um dos elementos com mais precisão para chegar ao objetivo proposto do site. Pare e comece a reparar nos sites em que navega, você ficará espantado com o que antes não percebia, contar elementos de um site pode – se parecer como contar estrelas no céu. Você vê um menu, nesse menu tem um ícone e um título, tem como fundo uma cor ou imagem, pode possuir um separador que divide o título dos itens do menu e cada um destes itens podemos ter mais ícones com uma palavra rotulando e quando nos deparamos no ultimo item do menu, percebemos que ele esta dentro de uma coluna e esta coluna esta no corpo do site. Perderíamos horas tirando toda uma relação de elementos em um site. Com isso podemos concluir que criar sites não é tão simples quanto parece e que esse processo não é apenas uma atividade e sim uma arte.
   
   
   
   

Como melhorar o design de seu site e obter o Design Perfeito.

Nos dias de hoje um design bem elaborado é vital para um site, pois é por ele que o usuário interage e um design desagradável ou mal feito pode não ser muito atrativo aos internautas reduzindo o número de acessos ao site. Assim, há vários fatores aos quais devemos nos preocupar. Antes de tudo, devemos traçar a trilha de onde o usuário ira visualizar e seguir sua navegação pela pagina. Sendo assim devemos criar um modo hierárquico especificando tamanho e cores e até a posição dependendo do grau de importância do elemento.

  

Outro ponto importante é a coerência da temática do site, um site com cores que não combinam pode não parecer muito atrativo. Evitar misturar uma grande diversidade de cores pode ajudar bastante. Sempre utilizar da melhor forma possível o espaço da pagina. Isso não significa encher a pagina com um monte de conteúdo sem sentido para encher linguiça mas sim alinhar os elementos e deixar um bom espaço de sobra para melhorar a visualização do conteúdo, espaço entre elementos e conteúdo e também espaços entre linhas, isso tudo é muito importante para facilitar a legibilidade.

E como todo bom layout, ele deve ser bem planejado antes de ser feito e não se deve descartar o uso de formatação usando CSS para facilitar a manutenção do layout. Deve-se padronizar a pagina utilizando o HTML em si, usando tag's padrões para que não fique muito complexo a formatação, isso também deixa o CSS menor e menos complexo. Utilizar padronização para fatiar o layout para que os espaços entre os elementos não fiquem desproporcionais.

Para concluir, também não podemos deixar de falar a respeito de elementos multimídia para o site. Criação de menus e botões interativos são muito bem vindos, seja ele feito em flash ou Javascript ou o que for, isso tudo ajuda a melhorar a experiencia do usuário ao navegar no site pois o que precisamos hoje em dia é interação não somente do proprietário do site, mas sim de quem acessa pois são os usuários quem fazem o site crescer com sua participação.

Marketing de guerrilha, guerrilheiros avante!

A ideia de Marketing de Guerrilha vem da guerrilha bélica, podendo ser considerada  uma guerra não convencional, onde não se tem muitos recursos para investir e na maioria das vezes é um ataque surpresa, ou seja, quando ninguém espera lá esta ele, interagindo diretamente com o publico e deixando sua marca no telespectador.

Muito usada por empresas de pequenos e médios portes, o Marketing de Guerrilha é utilizado com o objetivo de combater grandes concorrentes ou simplesmente sobreviverem. E muitas delas conseguem um sucesso extraordinário em sua ação de guerrilha.

É como os guerrilheiros bélicos, que faziam ataques surpresa na base inimiga, eles não tinham quem os protegessem, não tinha como se manter em combate todo o momento, pois não tinha quem investisse neles, então os guerrilheiros surpreendiam seus inimigos com ataques onde eles menos esperavam, nem sempre eram bem sucedidos, mas causava um impacto em seu inimigo.

O Marketing de Guerrilha é aplicado na web através de vídeos, imagens, sons, animações, até mesmo através de palavras “um scrap”. Muitas empresas ainda estão cegas em relação à internet ainda não despertaram para guerrilhar on-line. Podemos aplicar o marketing de guerrilha nas redes sociais como: Orkut, facebook, MySpace, YouTube, Digg, Del.icio.us (que é outra ferramenta de bookmark social), Propeller (O concorrente do Netscape em relação ao Digg), StumbleUpon. Aplicada também através de hotsites divulgando produtos e serviços.

Veja alguns exemplos:

MARKETING DE GUERRILHA DA TVA
 

MARKETING DE GUERRILHA DA OLÉ TELECON