andré.santana [webdesign blog]

Posts Tagged ‘Flash

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

Tags: , , ,

O Flash já foi um alvo de muitas críticas, incluindo do famoso Jakob Nielsen, pai da usabilidade, sobre suas deficiências ao gerar conteúdos acessíveis.

Bom, a Macromedia, atualmente Adobe, contratou o próprio Jakob Nielsen, autor das maiores críticas, como consultor para melhorar o programa. O resultado foi o surgimento de um painel novo, além de novas características em outros painéis.

Vamos ver como utilizar estes painéis da forma correta, aplicando ao documento, menus e campos de texto.

Para este manual básico, estarei utilizando a versão CS3 do Flash, mas as mesmas ferramentas e painéis são encontradas nas versões MX 2004 e 8.

Acessibilizando o documento

Janela Document Properties

Para abrir esta janela, vá até o menu Modify > Document.

Para cada arquivo em Flash que for desenvolver, é importante que defina duas informações sobre o mesmo:

  1. Title – Este campo serve para determinar um título para o arquivo, uma informação breve, sobre o documento, como por exemplo: “Catálogo de Produtos”.
  2. Description – Neste campo faça uma breve descrição sobre o conteúdo do arquivo e seu propósito. Como por exemplo: “Conheça nossas linhas de produtos”.

Com o documento descrito, podemos começar a desenvolver nosso projeto, sabendo que já informará ao usuário que documento está acessando e qual o seu propósito.

Painel Acessibility

Com este painel, podemos gerar conteúdo acessível, fornecendo equivalentes textuais aos elementos utilizados no Flash.

Para abrir este painel, vá até o menu Window > Other Panels > Acessibility.

Acessibilizando Textos

Por padrão, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. Não sendo necessário fazer nenhuma modificação. Mas é importante observar que as opções do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado.

Static Text (Texto Estático)

Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem: “Current selection cannot have accessibility applied to it” ou seja: “A seleção atual não tem acessibilidade aplicada a ela”, o que nos informa que não há opções a serem configuradas para ela, veja a Imagem 3 . Mas é importante deixar ativa a opção “selectable”, que possibilita a seleção do texto, isto permite que usuário selecione o texto e facilita a acessibilidade para alguns leitores de tela.

Static Text não possui configurações no painel Accessibility.

Dynamic Text (Texto Dinâmico)

Os campos de texto do tipo Dynamic Text, quando com a opção “Make object Accessible” ou seja “Torne o objeto acessível”, estiver ativada, permitirá ao leitor de tela ler exatamente o conteúdo escrito no mesmo. Mas se achar necessário poderá contar com mais duas configurações:

  1. Description (Descrição) – Utilize esta opção para definir uma pequena descrição do campo, o qual deve ser feita apenas se o campo necessitar de maiores explicações, o que na maioria das vezes não é necessário.
  2. Tab index (Ordem da Tabulação) – Utilizado para definir a ordem que o objeto será selecionado quando o usuário navegar utilizando as teclas TAB e SHIFT+TAB.

Opções de acessibilidade para Dynamic Text.Input Text (Texto de Entrada)

No campo de texto do tipo Input Text, configuramos o painel Accessibility da mesma forma que fariamos na linguagem (X)HTML, onde é indicado definir um “Name” – um rótulo para o campo de texto, para que o usuário saiba o que está preenchendo, e quando for necessário coloque uma descrição no campo “Description”, como por exemplo: “Campo obrigatório”.

Além destas duas opções ainda temos os campos:

  1. Shortcut – que serve para definir um atalho, um acesso rápido ao campo, o que é feito definindo uma letra ou número, como por exemplo: “A”. O atalho para o usuário será a tela ALT juntamente com a letra ou número definido, no nosso exemplo o atalho é “ALT + A”.
  2. Tab index – No caso de formulários é muito importante definir a ordem da tabulação para que o usuário tenha uma ordem lógica definida ao preencher os campos. Caso contrário ele ficará preso à ordem de criação dos campos.

Acessibilizando Buttons e MovieClips

O termo “etiquetar” é bem conhecido por quem desenvolve conteúdo acessível, que significa identificar textualmente um elemento, o que é feito no HTML com imagens através do atributo “alt” e no Flash é feito através do painel Accessibility.

Tanto os Buttons como os MovieClips tem que ser etiquetados, pois mesmo contendo campos de texto inseridos no seu corpo, é um elemento fechado e pode acarretar em não ser acessado pelo leitor de tela.Para demonstrar como etiquetar um menu de navegação, criei no Flash dois elementos utilizados para este fim, um Button, com a função de voltar e um MovieClip com a função de avançar.

A utilização do Symbol Button é para botões mais simples, sem uma animação maiselaborada, enquanto o Symbol MovieClip deve ser utilizado para botões animados e com aspectos visuais mais elaborados.

Acessibilizando um Button

O Button tem as mesmas opções que foram vistas nos campos de texto, então basta configuralo da mesma forma, mas é importante salientar a importância de determinar o rótulo do botão no campo “Name” do painel Accessibility, para este botão do exemplo o Name seria “Voltar” e nos casos que forem necessários determine a descrição no campo Description, aqui poderíamos utilizar: “Clique para voltar para o slide anterior”.

Para botões com a função de navegação de slides, como “Voltar” e “Avançar” é importante definir corretamente o Tab index e um Shortcut.

Para botões animados desenvolvidos com MovieClips, há apenas uma diferença no painel

Accessibility para os botões definidos pelo Symbol Button: a opção “Make child objects accessible”, ou seja, “Tornar os objetos filhos (ou internos) acessíveis”.

Acessibilizando um MovieClip

Neste caso, como o MovieClip pode, desde ter a simples funcionalidade de um botão até ter a função de recipiente de partes ou de toda uma animação, a opção “Make child objects accessible” permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem também estar com as suas opções de acessibilidade definidas.

por Carlos Tristacci


Seja Bem-Vindo!

@andrehsantana

junho 2017
S T Q Q S S D
« abr    
 1234
567891011
12131415161718
19202122232425
2627282930  

RSS Feeds Deliciosos

  • Ocorreu um erro. É provável que o feed esteja indisponível. Tente mais tarde.

Flickr!

Cell

Dia do Design

Geometric

Logotipo Pé do Palco // 02

Logotipo Pé do Palco // 01

Mais fotos

Blog Stats

  • 239,086 hits