Arquivo para a categoria 'Design'

Como enxugar ao máximo seu SWF

Adobe Flash CS3

A maior habilidade de quem trabalha com Flash é desenvolver um filme bem produzido, com um SWF muito enxuto. Existem várias estratégias que, em conjunto, deixam o seu SWF o mais enxuto possível. Veremos algumas dicas para otimizar seu filme:

  • Não use formas simples (primitivas), procure sempre agrupar as formas. Transforme tudo que for usar mais de uma vez no filme, em símbolos (gráficos, MC e Buttons). Assim é possível uma grande redução. Não faça dois botões que apenas mudem a posição (sobe e desce). Simplesmente use o mesmo símbolo para representar os sentidos com rotação para cada instância. Quando você cria um MovieClip, ele fica na biblioteca de seu filme e o Flash incorpora todos os cálculos vetoriais no SWF final, e cada vez que você usa uma instância desse MovieClip, o Flash apenas “linka” para o item da biblioteca, deixando seu filme mais leve.
  • Importe com o tamanho já finalizado todas as imagens que usar em seu filme. Nunca reescale uma imagem dentro do Flash pois o tamanho em Kbytes continuará o mesmo. Procure sempre deixar as imagens com compactação, mesmo que seja leve. Faça o tratamento de sua imagem fora do Flash, e deixe a resolução até 72 dpi. Acima disso é desperdício, pois não é percebido nos monitores.
  • Sempre que puder, substitua uma imagem por uma forma em vetor. Bitmaps contém muitos Kbytes de informação e aumentam bastante o tamanho do SWF.
  • Nunca “quebre” (converter em curvas) um texto, com raras exceções. Principalmente fontes com muitos detalhes. O vetor final ficará muito complexo e pesado. Na maioria dos casos, o ideal é incluir a fonte em seu SWF. Porém use com cautela. Sempre que usar fontes simples como Arial, Courier ou Times New Roman, procure sempre usar as fontes de dispositivos (_sans, _serif e _typewriter) pois não são incorporadas ao filme.
  • Sempre que tiver um vetor muito complexo, com muitos detalhes, curvas e nós, faça uma limpeza suavizando bordas e eliminando detalhes desnecessários. Quanto mais nós em uma forma, mais pesado fica seu SWF.
  • Reduza ao máximo o uso de sons. Quando necessário, use o formato MP3 e altere o modo de exportação na biblioteca, para o menor tamanho possível, desde que também não comprometa a qualidade mínima aceitável.
  • Sempre que possível, utilize o carregamento dinâmico de imagens, sons e vídeo, carregando-os externamente. Assim é possível reduzir consideravelmente o tamanho de um filme, pois os elementos serão carregados durante a navegação do usuário, evitando um preload demorado.
  • Evite, sempre que possível, o uso de gradientes (degradé). Sendo inevitável, use o menor número de cores que puder.
  • Evite usar Twenning Motion e Shape (principalmente) no filme. Desde que seja possível, troque esses recursos por Action Script, que além de mais flexível e rápido, possibilita uma redução considerável no tamanho do SWF, pois a animação é executada durante a execução do SWF (run-time). Você poderá, inclusive, criar efeitos que interajam com o internauta e não simples animações pré-definidas.
  • Procure usar a ferramenta Ímã (Snap to Objects) para unir todos os pontos de um objeto, pois se estes ficarem separados (abertos), o Flash tem mais trabalho na execução, tendo que fazer vários cálculos desnecessários.
  • Reduza o número de frames desnecessários no filme. Em vários filmes são esquecidos frames inúteis. Além de aumentar o tamanho do arquivo FLA, pode comprometer o processamento do filme e tamanho do SWF também.
  • Analise seu código Action Script e, se houver duplicações, crie funções para executá-las, principalmente quando houver grande quantidade de comandos. Lembre-se sempre que, quanto mais elementos existirem no seu filme, tão maior seu tamanho será.
  • Evite usar “Break apart” em imagens ou use com muito cuidado, pois em muitos casos o tamanho do arquivo acaba ficando maior que a imagem original, mesmo que se elimine as partes desnecessárias da imagem. Isto em função principalmente do número de pixels selecionado. Ao invés disso, faça os devidos cortes em um programa de imagem e importe a imagem já finalizada.
  • Faça filmes objetivos que tenham ligação direta com o site. Muitos desenvolvedores esquecem que o internauta, geralmente, busca informações e não quer perder tempo carregando coisas inúteis, por mais “legais” que possam parecer.
  • Evite animar tudo que existe no filme. Movimentos só devem ser usados, nos itens realmente úteis e que precisam chamar a atenção ou sejam parte fundamental do contexto de seu site.
  • Faça uma limpeza na biblioteca do Fla, eliminando tudo o que não foi usado no filme. Para facilitar, o Flash tem uma função na biblioteca que seleciona automaticamente os itens que não estão sendo utilizados em seu filme. Use a função para destacar os itens e exclua. As versões mais recentes do Flash ignoram automaticamente os itens não utilizados.
  • Divida seu filme principal (SWF) em filmes menores (vários SWF) e chame-os somente quando necessário. Isto agiliza o carregamento, diminui o tamanho da animação e só exibe o que o visitante desejar. Isto possibilita uma perfeita manutenção, agilização e redução no tamanho dos seus filmes.
  • Cuidado com o uso de variáveis. É muito comum para os iniciantes, usar variável para tudo e incluir diversas variáveis para fazer coisas semelhantes que seriam possíveis com a utilização de uma única. Isto é possível com um maior conhecimento de programação. Sempre que não necessitar usar novamente uma variável, delete-a para reduzir o “consumo” de memória RAM do micro. Um número elevado de variáveis pode travar o micro. Isto dependerá, é claro, da configuração de cada equipamento, recursos disponíveis, consumo da memória por programas rodando simultaneamente na máquina e complexidade de seu filme.
  • O Flash possui uma ferramenta poderosa chamada Shared Libraries. Você pode ter uma única biblioteca com elementos que você vá utilizar repetidamente em vários filmes. Cada filme fará um link do objeto para essa biblioteca compartilhada. Esse método é extremamente eficiente ao se trabalhar com fontes, botões, etc, e caso você precise alterar algum elemento, fará apenas uma vez, na biblioteca principal. Leia a documentação do Flash para saber como usar melhor essa ferramenta.
  • Textos escritos como comentários no FLA, não são incluídos no arquivo final SWF, isso porque ele tem por finalidade auxiliar a documentação do código e facilitar sua compreensão posterior. Não se preocupe com isso.
  • Aproveite sempre os efeitos das versões mais recentes. Sempre que precisar usar sombras, efeitos de blur, glow ou blending mode, ao invés de usar bitmaps para isso. Ainda há a vantagem de animar estes efeitos.

É isso aí pessoal. Com esse “pacote” de dicas é possível construir bases de sites completos em Flash com até míseros 60Kb, aproveitando ao máximo a otimização do SWF.

Espero que tenham gostado. Até a próxima!

por Arthur Paredes

2º Seminário de Criação Publicitária

Salve, salve fiéis leitores, tudo bem com vocês?

Enfim, aconteceu nesta última segunda (07/04) e terça-feira (08/04) o 2º Seminário de Criação Publicitária na cidade de Natal/RN, que por sinal - pra quem não sabe - é minha cidade natal. Entenderam o trocadilho? hehehe :P

Baboseiras a parte, foi muito bom. Parabéns para a Staff de Comunicação pela iniciativa, que venham mais eventos como esse, palmas também para o Sinapro/RN, na pessoa de Arturo Arruda Câmara que apoiou o projeto, a todos os patrocinadores e também a todos que apoiaram e acreditaram no evento. Saibam que o seminário foi de um proveito imenso para todos que participaram do seminário. Vocês não tem idéia de como o horizonte de cada abriu, com o mundo de informação e referências que vocês no propocionaram. Mais uma vez parabéns, fazia tempo que eu não participava de um evento desse porte.

Palestrando para nós tivemos nada mais, nada menos do que Carlos Henrique Equi (Staff/RJ), Flávio Medeiros (Presidente do CCRJ), Álvaro Rodrigues (Agência3/RJ) e por último - mas não menos importante - Pedro Porto (Santa Clara/SP).

Sentiu o gostinho? Pois é, em setembro tem mais! =)

por André Santana

A abordagem da simplicidade

Post muito legal, vale a pena ver. Via Stuff That Happens

Ouch!

simplicity

Clique na imagem para ampliar

=)

Comentem…

A hierarquia das necessidades no design

Para o design ter sucesso, ele deve primeiro atender as necessidades básicas das pessoas - antes de tentar satisfazer necessidades de níveis mais altos.

E quais seriam estas necessidades? Para chegar aos cinco elementos chave na hierarquia das necessidades no design, vamos seguir o padrão de Maslow:

maslow

Necessidades humanas segundo Maslow

1. Fisiológicas
2. Segurança
3. Relacionamento
4. Estima/Status
5. Realização pessoal

Necessidades do Design

1. Funcionalidade
2. Confiabilidade
3. Usabilidade
4. Proficiência
5. Criatividade

Funcionalidade

Fisiologia: significa atender os requisitos mais básicos do design. Exemplo: um aparelho de DVD deve, pelo menos, ser capaz de gravar e reproduzir vídeos.

Valor agregado pelo design é muito baixo.

Estabilidade

Segurança: significa estabelecer uma performance estável e consistente. Exemplo: um aparelho de DVD deve reproduzir vídeos com qualidade e o mecanismo (software/hardware) não deve apresentar defeitos.

Valor agregado pelo design é baixo.

Usabilidade

Relacionamento: significa disponibilizar uma interface simples, fácil de ser usada e que perdoe erros do usuário. Exemplo: programar um aparelho de DVD para começar a gravar um filme a uma determinada hora deve ser fácil e o sistema deve ser tolerante em relação a erros cometidos pelo usuário.

Valor agregado pelo design é moderado.

Proficiência

Estima: significa disponibilizar recursos para melhorar o modo como os usuários fazem as coisas. Exemplo: um aparelho de DVD que consiga pesquisar e gravar programas baseado em palavras chave escolhidas pelo usuário.

Valor agregado pelo design é alto.

Criatividade

Realização pessoal: é o nível na hierarquia onde todas as necessidades foram atendidas e onde as pessoas começam a interagir com o design de formas inovadoras. O design passa a ser usado para criar e explorar áreas que estendam a experiência do usuário.

Valor agregado pelo design é muito alto.

De acordo com a teoria de Maslow, as necessidades fisiológicas, as necessidades de segurança e algumas das necessidades sociais (funcionalidade, confiabilidade e usabilidade se aplicado ao design) são fatores de desmotivação. A teoria diz que a satisfação destas necessidades é básica; já a ausência da satisfação destas necessidades não motiva ninguém, pelo contrário, desmotiva.

Já as necessidades sociais, as necessidades de “status” e de estima e as necessidades de auto-realização são fortes fatores motivacionais. Ou seja, se não forem atendidas, as pessoas procuram fazer com que sejam satisfeitas; as pessoas são motivadas a alcançar a satisfação destas necessidades.

Quando se fala em design agregando valor a algum produto, serviço ou interface é preciso ter a clareza que ele terá o efeito desejado quando passar a atender os níveis mais altos da pirâmide (proficiência e criatividade).

Mas até chegar a estes níveis, os primeiros devem necessariamente ser atendidos.

por Marcos Nähr

Próxima Página »


Seja Bem-Vindo!

del.icio.us

 

Maio 2008
S T Q Q S S D
« Abr    
 1234
567891011
12131415161718
19202122232425
262728293031  

Flickr!

Vendinha

Vassouras

quem-quer-suco-vai-a-feira

Graos-da-feira4

Pimenta-Malagueta

More Photos

Blog Stats

  • 79,348 hits