cezinha.com.br/blog

Desde que começou a correria por infográficos aqui no iG não tive mais tempo para atualizar o blog.

Consegui arrumar uma horinha pra fazer isso agora. Olhando o que foi feito nos últimos 6 meses, acho que foi uma boa produção. Segue a lista dos trabalhos, mais detalhes em http://especiais.ig.com.br/infograficos/ ou clicando no link do infográfico.

Importante ressaltar que o meu trabalho foi a programação em ActionScript 3. O design e ilustrações foram feitas por outras pessoas.

20/08/10
Lula reinaugura Palácio do Planalto nesta 4ª [ver infográfico]

17/08/10
Bancos vão abrir duas agências por dia até 2014 [ver infográfico]

13/08/10
Saiba como escolher os modelos certos de óculos para você [ver infográfico]

04/08/10
Alfa ou Beta: Qual o seu tipo de homem? [ver infográfico]

05/08/10
Avalie o trabalho de sua equipe de vendas [ver infográfico]

As plantas de cada década [ver infográfico]

28/07/10
Distribuição da população hispânica dos EUA [ver infográfico]

Idosos: Adaptações em casa ajudam a garantir velhice saudável [ver infográfico]

04/08/10
O tabuleiro da Carmen Miranda [ver infográfico]

Termômetro Erótico [ver infográfico]

20/07/10
Impostos levam até 40% do preço de um eletroeletrônico [ver infográfico]

Cinco maneiras de evitar dor nas costas durante a gravidez [ver infográfico]

13/07/10
Poço de 7,5 mil metros amplia fronteira do pré-sal [ver infográfico]

16/07/10
Terroristas são fascinados por aviões, diz especialista [ver infográfico]

08/07/10
Você é um jogador compulsivo? [ver infográfico]

29/06/10
Cores sóbrias predominam entre os carros brasileiros [ver infográfico]

26/06/10
Infográfico: O mapa dos genes [ver infográfico]

26/06/10
A inflação também está no cinema [ver infográfico]

15/06/10
Torça na Copa do Mundo com a vuvuzela digital [ver infográfico]

Conheça a história da E3, o maior evento de games do mundo [ver infográfico]

Teste: Será que ele é o cara certo pra você? [ver infográfico]

Clint Eastwood: de A a Z [ver infográfico]

Eleja o melhor ambiente da Casa Cor 2010 [ver infográfico]

Teste: Qual tipo de perfume combina com você? [ver infográfico]

Empresa Familiar, sim. Problemática, não! [ver infográfico]

O peso das pequenas empresas [ver infográfico]

Teste: Descubra quem é a noiva [ver infográfico]

Guia da Fertilidade [ver infográfico]

Teste: você está preparada para ser mãe? [ver infográfico]

Teste: que tipo de mãe você vai ser? [ver infográfico]

Teste: Você está pronta para casar? [ver infográfico]

Teste: Você administra bem seu dinheiro? [ver infográfico]

Conheça a Casa da Moeda do Brasil [ver infográfico]

Teste: Com qual atriz você se parece? [ver infográfico]


Teste: Seu estilo de sedução é eficiente? [ver infográfico]

Teste: Você é uma compradora compulsiva? [ver infográfico]

Teste: seu filho sabe lidar com dinheiro? [ver infográfico]

Agora vou começar a produzir novamente as peças em flash. Confira no ar.

Este é o meu primeiro case usando o PaperVision 3D, criei para agência Fess’Kobbi. A idéia era fazer o logo da empresa girar em 360º. Confira o resultado no site: www.mac.com.br

Eu precisava desenvolver uma forma intuitiva para mostrar a lista de consultores de vendas da empresa. E levando em consideração que cada consultor tem sua àrea de atuação. Além disso, a lista é muito dinâmica, alterada várias vezes ao mês e por isso, precisava pensar em alguma solução que permitisse ter sua alteração feita de forma muito rápida. O resultado você pode na seção Onde Comprar, ou clicando aqui. 

I needed to develop an page to show company’s salesmen list. This page needed to be very intuitive and easy to use. Moreover, the list’s content is very dynamic, always updated, many times in a month. So, I needed to think in a solution that could easy to update.  You can the result see at Inphonix web site > Onde comprar (click here to see it).

Armazenando informações em variáveis e constantes

Como vimos, o computador trabalha manipulando dados que ficam armazenados na memória. Uma variável representa um valor que está armazenado na memória do computador. Como se fosse uma caixa que recebe um nome associado a um valor. 

Assim para manipular dados, substituímos o valor numérico ou em texto por uma variável. 

Por exemplo, para somar duas variáveis chamadas a e b, cada uma contendo um valor numérico, escrevemos a seguinte linha de código:

a + b

O computador ao interpretar esse código, vai olhar na memória e procurar pelos valores que estão armazenados dentro das variáveis e então somar. 

Inicializando variáveis: 

A sintaxe do comando para inicializar uma variável em ActionScript é:

var variável = valor;

Onde variável é o nome e valor, o valor a ser armazenado dentro dela. Perceba que no fim da linha temos um sinal de ponto-e-vírgula (;). Este sinal serve para indicar ao computador que foi finalizada a linha.

A partir da versão do ActionScript 2 passa a ser escrita da seguinte forma:

var variável:Tipo = valor;

Onde Tipo é o nome do tipo de dados que a variável receberá como conteúdo. Por exemplo:

var letraA:String = "a";
var num1:Number = 50;

ActionScript é uma linguagem de programação. Para começar a aprender a programar, é importante entender como os computadores funcionam.

O que um computador faz, basicamente, é a manipulação (processamento) de dados: inserimos uma informação no computador (via teclado ou outro dispositivo como um scanner, por exemplo), esta se torna um dado (que é a informação digitalizada), em seguida, é processada (através de um programa), resultando em algum outro dado que pode ser gravado ou mostrado na tela, ou ainda impresso.

A forma como que será processado o dado, é feito através de um programa. Um programa é produzido com uma linguagem de programação. Ou seja, um programa é uma série de instruções que seguem uma sequência lógica para produzir determinado resultado. A linguagem de programação é a forma como se descreve essa série de instruções. O computador é programado para interpretar as linguagens de programação.

Para entender o computador e poder programar melhor, leia o PDF sobre Lógica de Programação.

Escrevendo o Olá Mundo!

Como em toda linguagem de programação, o primeiro exemplo de código é um Hello World (Olá Mundo). Para começar a entender, veja como criar um Hello World em ActionScript:

1. Crie um novo arquivo FLA.
2. Renomei o ‘Layer 1′ para ‘as’.
3. Abra a janela de Actions (F9).
4. Digite o seguinte código:

trace("Olá mundo");

O código acima mostra a frase “Olá mundo!” na janela Output. Não aparecerá nada se o arquivo SWF for inserido dentro de uma página HTML.

Note que a sintaxe do ActionScript é sensível a letras maiúsculas e minúsculas, logo se você escrever TRACE() ou Trace(), não funcionará. O comando trace() recebe como parâmetro a frase Olá mundo! que deve estar entre aspas (”).

Olá mundo! na janela Output

Vou começar a ensinar a programar em ActionScript aqui no blog. Fiquei pensando em publicar em outros lugares, mas vou postar aqui mesmo. Se tiver alguma dúvida, pode perguntar nos comentários ou então entra lá no Flashmasters.

O que você precisa saber 

Para começar a programar em ActionScript é necessário que você já saiba:

• Conhecer a interface do Flash: como abrir painel, expandir, diminuir, etc
• MovieClip, Graphic, Button: como criar, como aplicar, para que serve cada um.
• Frames, keyframe, playhead, blank keyframe: como adicionar, para que serve cada um.
• Tween Motion, Shape Motion
• Layers, Layer Mask, Guide, Motion Guide
• Saber usar as ferramentas de desenho do Flash
• Painéis: Color, Swatches, Align, Transform, Scenes

Ou seja, que você já saiba usar a parte visual da ferramenta e fazer animações com Flash. Vou tentar ensinar como programar em ActionScript 2 e 3. Não precisa saber programar, vou ensinar isto aqui. 

Introdução

Se você  chegou aqui, provavelmente já ouviu falar ou sabe o que é ActionScript. O ActionScript é uma linguagem de programação desenvolvida inicialmente, para a plataforma do Adobe Flash Player. Foi inicialmente desenvolvida pela Macromedia, que foi comprada pela Adobe em 2005.  No início, a linguagem foi criada para produzir animações e efeitos usando vetores dentro do software Macromedia Flash. Com o tempo foi se agregando outras aplicações como acesso a banco de dados através de XML, carregamento de arquivos externos como JPG, PNG, GIF, MP3, entre outros. Surgindo assim o conceito de RIA (em inglês, Rich Internet Applications), ou em tradução livre, aplicações ricas baseadas em internet. Com isso, tornou-se possível explorar melhor a questão da percepção do usuário e interatividade.  

Atualmente, temos diversas formas de programar em ActionScript, uma delas é através da IDE (interface development environment - interface do ambiente de desenvolvimento) do Adobe Flash, na sua versão mais recente Adobe Flash CS3. Além disso, é possível usar outras IDEs tais como:

• Eclipse - com o plug-in ASDT (ActionScript Development Tools)
• SEPY
• PrimalScript 
• FlashDevelop

Outra tecnologia que utiliza ActionScript é o Adobe Flex. Pode-se usar classes em ActionScript no Flex.

Onde inserir o ActionScript

Antes de começar a aprender a programar, vou explicar onde que se coloca o código ActionScript.Você pode aplicar em Frames, MovieClips, Buttons e Componentes. Pode criar arquivos externos com extensão .as. 

Para aplicar no frame:

1.  Crie um layer chamado “as”.
2. Adicione um keyframe onde será colocado o ActionScript.
3. Clique na janela de Actions. Se a janela de Actions não estiver aberta, abra clicando em Window>Actions ou utilize a tecla de atalho F9.

Para aplicar em um MovieClip / Button:

1. Selecione o MovieClip / Button que receberá o ActionScript.
2. Clique na janela de Actions. Se a janela de Actions não estiver aberta, abra clicando em Window>Actions ou utilize a tecla de atalho F9.

Como funciona a janela de ActionScript:

Clique para aumentar.

1. Lista de classes, propriedades e métodos de acordo com a versão do ActionScript selecionada.

2. Hierarquia dos frames e objetos onde pode ser inserido o ActionScript.

3. Botões: Adicionar item no Script, Busca, Inserir o target path, Checar a sintaxe, Auto formatar, Mostrar code hint, Opções de Debug, Collapse entre chaves, Collapse da seleção, Expandir tudo, Aplicar comentário de bloco, Aplicar comentário de linha, Remover comentário, Mostrar/Ocultar barra de ferramentas

4. Botão de Assistência para o Script

5. Ajuda

6. Numeração de linhas

7. Local onde se insere a programação

8. A aba mostra onde está sendo inserido o ActionScript, pode ser um frame, um botão ou um movieclip. 

9. Solta ou fixa a aba ativa.

10. Linha atual, total de linhas e coluna atual.

Toda vez que for adicionar um Action, confira se a aba (item 8) mostra o local certo: frame, botão ou movieclip.

Além da entrevista que dei para o Frederick van Amstel do site Usabilidoido, em 2004, através do Flashmasters. Saíram mais duas entrevistas/matérias que participei:

Revista CCW ed. 01 do site CCW (Clube de Criação Web): falo um pouco sobre minha experiência de estar morando no Japão e criação para celulares.

Revista Web Design ed. 49 jan. 2008 - Matéria sobre Internet Móvel: “Sites na palma da mão: Os novos desafios do design interativo”.

Products page: all information is easily updated every month. Check here.

Página de produtos: toda informação é facilmente atualizada todo mês. Confira aqui.