depois de milhões de anos decidi atualizar meu portfólio, mostrando alguns trabalhos que acabaram de sair do forno e outros que foram realizados ano passado você confere clicando na imagem:

Nesse ano de 2009 meus ultimos trabalhos pela mooz a sua maioria foram blogs, a plataforma utilizada foi WordPress, ele é fantástico completo e tem sua estrutura totalmente editável, atualmente é a estrutura de blog mais popular no mundo, tem uma extensa gama de plugins que podem ser baixados no site do wordpress.org,   nesse site você também pode baixar a plataforma wordpress, existem várias traduções incluindo português, a comudade brasileira é wordpress.br ela organiza encontro nacionais e disponibiliza matérias sobre o assunto e forum para ajudar a galera. Agora vou listar alguns trabalhos desenvolvidos:

Garotas estupidas

http://www.garotas estupidas.com/

O blog de Camila Coutinho relacionado a moda, trata o assunto com uma liguagem bem divertida, o blog é sucesso na internet.

Blog da Familia Ovo

http://www.familiaovo.com/blog/

Blog da grife infantil Familia Ovo, trada de assuntos relacionados as crianças , mães e futuras mães.

A prancheta

http://www.aprancheta.com/

A Prancheta é um espaço onde 8 amigos falam sobre design, cinema, fotografia, literatura, moda, música, ilustração, toy art, vídeo e o que mais der na telha.

Coquetel Molotov 2009

http://www.coquetelmolotov.com.br/blog/

O festival No Ar Coquetel Molotov teve início em 2004, quando foi realizado no Recife. Nesse ano de 2009 Coquetel Molotov terá nomes como Beirut, Sebastien Tellier, Those Dancing days e Milton Nascimento.

Mais um trabalho da mooz no ar.

A classe Graphics contém métodos específicos para  trabalhar com vetores. a Classes Graphics da suporte a classes Sprite e Shape que possuem a propriedade graphics que auxiliam na criação de imagens vetoriais.

A classe Shape é usada para criar objetos leves, o Shape é mais leve que o Sprite por não possuir eventos de clique e lista de DisplayObject como o Sprite. Nos posts anteriores eu já tinha utilizado a propriedade graphics em um Sprite e nesse post vamos trabalhar alguns métodos da classe Shape.
No desenvolvimento vou utilizar o Flash Develop mas, também pode ser feito no Flash.

Nesse post anterior mostra como utilizar o flash Develop com flex SDK

Vamos programar :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

package classes {
 
	import flash.display.Shape;
	import flash.display.Sprite;
 
	/**
	* ...
	* @author Fellyph Cintra
	*/
	public class Formas extends Sprite {
		// vou criar tres shapes
		public var bola		:Shape;
		public var rect 	:Shape;
		public var rect2 	:Shape;
 
		public function Formas() {
			//vou utilizar 3 metodos , um para cada shape
			// 1º - para criar um quadrado
			// 2º - cria um losango
			// 3º - cria um circulo, como sugere o nome
 
			criaQuadrado();
			criaLosango();
			criaBola();
 
		}
 
		// essa função é responsável por criar um retangulo
		public function criaQuadrado():void {
			// inicializamos o shape
			rect = new Shape();
			// beginFill serve para iniciar o preenchimento do shape
			// passamos como parâmetro a cor do preenchimento
			rect.graphics.beginFill(0x008300);
			// lineStyle define o estilo da linha
			//o primeiro parâmetro é a espessura da linha o segundo é a cor
			rect.graphics.lineStyle(1, 0x008300);
			// drawRect serve para desenhar formas retangulares
			// os parâmentros passados sao a posição x , y , largura e altura
			rect.graphics.drawRect(0,0,330,240);
			addChild(rect);
		}
 
		// essa função é específica para criar um losango
		// nesse caso vamos utilizar uma função diferente
		public function criaLosango():void {
 
			rect2 = new Shape();
			rect2.graphics.beginFill(0xFCFF00);
			rect2.graphics.lineStyle(1, 0xFCFF00);
			// as linhas anteriores já foram comentadas
			// moveTo é utilizada para mover o ponto que eu vou iniciar minha forma
			// os parâmentro passados são os pontos x e y;
			rect2.graphics.moveTo( 165, 10);
			rect2.graphics.lineTo( 310, 120);
			// lineTo desenha uma linha do ponto atual até o ponto passado como parâmetro
			// e isso se repete nas linhas seguintes
			rect2.graphics.lineTo( 165, 230);
			rect2.graphics.lineTo( 20, 120);
			rect2.graphics.lineTo( 165, 10);
			rect2.graphics.endFill();
			addChild(rect2);
 
		}
 
		// essa função é responsável por criar um circulo
		public function criaBola():void {
 
			bola = new Shape();
			bola.graphics.beginFill(0x00027F);
			bola.graphics.lineStyle(1, 0x00027F);
			// em drawCircle passamos como parâmetro
			bola.graphics.drawCircle(165, 120, 70);
			bola.graphics.endFill();
			addChild(bola);
		}
 
	}
 
}
 
}

o resultado é o seguinte :

Meio atrasado, mas semana passada foi ao ar o site AAC Artists Against Corruption um site leve e simples, onde fazendo parte da equipe mooz fui responsável pelo desenvolvimento.

As classes de animações são uma mão na roda para os desenvolvedores flash , um conjunto de classes que permitem com apenas um linha de código, fazer ótimas animações modificando varias propriedades, passei um bom tempo utilizando as classes do caurina Tweener, melhoraram muito minha produtividade, mas a adição dessas classes aumentavam 12kb no swf final. Para um site em flash isso não é muito significativo, mas para um banner para web pode complicar.

Alguns portais tem um limite para o tamanho do swf por exemplo a globo e suas filiadas tem um limite de 20kb por banner, ou seja com a adição do caurina já é usado mais de 50% dos kbytes permitido.

Um dia fazendo uma pesquisa sobre Papervision3D vi uma recomendação de um pacote de classes para animação TweenMax e TweenLite. Fiz meus testes e gostei, depois perguntei a alguns amigos que também fizeram boas recomendações.

No site Greensock grupo responsável pelo desenvolvimento das classes TweenLite e TweenMax. Têm alguns testes de desempenho, documentação completa e exemplos, a seguir vou mostra um simples exemplo utilizando TweenMax.

Seu uso é bastante simples vamos lá :

1 – Primeiro baixe o pacote das classes, se ainda não baixou clique aqui .

2 – Descompacte o zip na mesma pasta que está o seu arquivo .fla como na figura abaixo.

3 – Abra o arquivo .fla que no meu caso é tweenLite.fla , crie um movieClip no palco com o nome de instância bola_mc.

4 – Crie uma nova layer com um nome ações , selecione o primeiro frame e pressione  F9 para inserir o nosso código AS.

Na janela de ações jogamos o seguinte código:

1
2

import gs.TweenMax;
TweenMax.to(bola_mc, 1, {x:400, y:100 });

Na linha 1 importamos a Classe TweenMax.

Na linha 2 usamos a classe de animação que funciona da seguinte forma:

TweenMax.to( [ alvo ], [ tempo ], {[propriedades do movie clipe]}); no exemplo a cima as propriedades x e y do movieClip;

Se você quiser adicionar as propriedades de ease fica assim:

1
2
3

 import gs.TweenMax;
 import gs.easing.*
 TweenMax.to(mc, 1, {x:400, y:100, ease:Back.easeOut});

A diferença para o primeiro código foi o import do easing na linha dois e a inclusão de mais uma propriedade a de ease na linha 3 neste caso eu estou utilizando o Back e easeOut diz que o efeito vai ser aplicado no fim da animação.

Alguns tipos de easing são:

• Back
• Bounce
• Cubic
• Elastic
• Expo

E suas variações : easeIn para aplicar o efeito no início da animação , easeOut no final e easeInOut em ambos.

Por enquanto é só depois vou complementar esse exercício .

Mais um trabalho by mooz que entrou no ar o site da fotógrafa  Carolina Pires especialista em fotos de casamento, muito legal o trabalho um site clean onde as fotos são um verdadeiro show. Muito legal trabalhar em um site com imagens tão bonitas que são um estimulo a mais para desenvolver o site. Em conjunto foi lançado o blog seguindo a mesma identidade. Parabéns aos designers que trabalharam nesse projeto que são pessoas fantásticas.

De nova casa, vida nova, primeiro trabalho feito pela mooz a entrar no ar o hotsite da academia perfformance.

Hotsite academia perfformance