NILTON BICALHO (61 pts)

ILVA RUDEV (90 pts)

SÁVIO PONTE (39 pts)

DENIS CARAVALHO (85 pts)

EDUARDO WALMOTT (226 pts)

JONAS GALVEZ (521 pts)

PANDOGO (82 pts)

GUILHERME SCHEIBE (49 pts)

RICARDO TEIXEIRA (40 pts)

ÉMERSON ROCHA (85 pts)

MARCELO SIQUEIRA (96 pts)

LUIZ HERRERA (117 pts)
Treinamento PontoFlash de Flash e ActionScript

Existe alguma forma de o flash detectar se um load movie já foi carregado e executar uma ação depois disso.

Preciso que um botão só possa ser clicado depois que os outros 3 já tenham sido clicados.

Como justificar um texto e criar uma barra colorida?

É possível modificar uma animação de acordo com a hora do dia?

Como dar um fade (alpha) num movieclip clicando num botão?

Como fazer um botão no flash que instale um setup de programa?

Na prática, qual a vantagem de usar o prototype?

Quero fazer uma animação quando o mouse passa por cima do botão.

Erro no TellTarget.

Como fazer uma imagem de background no HTML não se repetir?

Como transformar uma animação em um movie clip?

Como gerar valores randômicos (aleatórios) que não se repitam?

Como criar membros (*propriedades e métodos) PRIVADOS de classes (OOP)?

Como classificar um array por um de seus itens?
Classe TransitionAnime e Painel TransitionAnimeEffect

Envio de email via formulário utilizando Flash + ASP.

Comunicação Flash-PHp-MySql - introdução

Máscara arrastável no Flash 5.

Como arredondar os cantos de uma foto no Fireworks.

Formulário de e-mail com CGI.

Conversão de Datas e Horas em Servers Estrangeiros (Flash+Asp).

Criando um Editor HTML com o MM Flash

Mouse trail.

Pre-loader simples.

3D Wireframe - segunda parte

Action Script 2.0 (Primeira Parte)
Passagens

Digitação (6kb) - Flash4

Hover buttons

Foto mask

Pêndulo

Cursor customizado relativo

Drag gravity

Televisão

Easing trail

Transportes

Scroll velo over

Parede
HOME | TUTORIAIS
Dicas para otimizar seu SWF (revisado e atualizado).
por Luís Herrera

Após a lançamento do Flash MX e de comentários/sugestões de outros leitores, chegou a hora de revisar este Artigo. Para facilitar a identificação das mudanças/inclusões, irei incluir o novo texto em AZUL.

A otimização de um filme em Flash é um dos principais pontos a serem levados em conta pelos desenvolvedores. Porém para os iniciantes isso é um pouco difícil ou pior, acaba passando despercebido.

Quem nunca visitou um site e teve a paciência testada? Ficou minutos, vários por sinal, e nada de animação ou quando aparecia era deplorável. Ai se arrependimento matasse? O que eu estou fazendo aqui? Etc....

Isto é o que ocorre quando não estamos preocupados com o usuário e com o resultado completo de nosso trabalho. Não adianta nada fazer um filme igual ao Star Wars e ter um SWF com 2 Megas para Web. Com certeza só os "fissurados" em Flash é que talvez fiquem esperando o carregamento do filme.

Como em geral os arquivos na web são destinados ao maior público possível, e com equipamentos variados é de se esperar que nossas animações estejam ao alcance da maioria dos visitantes, se não da totalidade. Desta forma, você deve tomar muito cuidado com o tamanho (Kb) de seu filme. Como esse assunto não é uma "ciência exata", incluí neste artigo diversas dicas que devem ser observadas e implementadas sempre que possível.

Um tamanho aceitável para um SWF e aceito pela maioria dos desenvolvedores, fica em torno de 60Kb a 100kb. Entretanto isso pode variar em função da aplicação.

Alguns exemplos:

Banners - sua função é chamar a atenção do internauta para alguma coisa, seja produto ou serviço. Sendo assim seu tamanho deve ser pequeno para agilizar o carregamento e não comprometer o desenpenho do site. Um tamanho recomendado pela maioria dos desenvolvedores é de 15 Kb no máximo. Vale lembrar que muitos desenvolvedores estão criando técnicas interessantes de interação com o usuário e a própria página de exibição, com a flexibilidade do Flash.

Menus - o mais indicado são arquivos com menos de 15Kb, isto em função da agilidade necessária ao carregamento. O menu deve ser claro, eficiente e se possível presente em toda a navegação. Quanto maior o uso de ActionScript na elaboração e gerenciamento de um site, tanto MENOR será o tamanho deste MENU, pois o uso de efeitos como SHAPE e Twenning Motin elevam o tamanho do SWF final.

Sites Completos - aqui depende do bom senso. Se você quer atrair visitação, é bom atentar para vários dos itens explicados abaixo e manter seu filme dividido em várias partes de tamanho individual reduzido, podendo ficar em torno de uns 60kb cada.

Animações em Geral - (Charges, Estórias em Quadrinhos, Desenhos, etc...) Essas podem ser um pouco maiores, mas não abuse da paciência de seus visitantes e inclua um carregando...(loading) eficiente em cada filme.

Jogos e Aplicativos - aqui o tamanho não é tão importante, pois os benefícios do mesmo irão validar o trabalho/espera do carregamento.

Nota: Estes são apenas alguns parâmetros para utilização na Web, pois em CD-Rom ou Intranet's isso não será tão importante.

Para reduzir o tamanho de um SWF, existem várias formas que dependem de vários fatores, vejamos:

Dicas:

A) Faça um tratamento das imagens para reduzir seu tamanho, dando preferência ao formato PNG com 75 dpi's no máximo. Isto é o suficiente para visualização nos monitores. Na pior das hipóteses, use o jpg ou jpeg, mas nunca um BMP. Nota: A compactação efetuada pelo próprio Flash não é das melhores. Assim se possuir um programa específico para edição, seja de imagens ou sons, use-o para esse fim e somente depois importe para o Flash.
Nota: Com a versão MX, o Flash integrou o recurso de carregamento dinâmico de Imagens, som e vídeo. Assim é possível reduzir consideravelmente o tamanho de um filme, fazendo uso destes novos recursos. Existem alguns tutoriais sobre isto aqui no Portal Ponto Flash, faça uma busca e melhore o resultado de seu trabalho.


B) Se tiver de incluir algumas imagens no filme, procure usar o menor número possível, pois o tamanho está diretamente relacionado ao conteúdo e recursos empregados. Se puder dê preferência as imagens com dimensões pequenas, e se possível do tamanho exato da necessidade e não dimensioná-las manualmente.


C) 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.

D) Evite sempre que possível o uso de gradientes (degradê). Sendo inevitável, use o menor número de cores que puder.

E) Procure sempre usar as fontes de dispositivos (_sans, _serif e _typewriter) pois não são incorporadas ao filme. Existem novos tipos de fontes desenvolvidas especialmente para o Flash. Elas não causam distorções e podem ser usadas com tamanhos bem pequenos (6, 7 e 8 Pixels).

F) Se estiver usando textos muito grandes, retire-os do filme e inclua-os em arquivos TXT. A importação destes textos para caixas de texto dinâmicas, agiliza o carregamento e reduz muito o tamanho do swf. Perceba que na versão 5 do Flash, é possível incluir formatação HTML dentro destas caixas. Veja em Formatando TXT.
Nota: A versão MX acrescentou uma ótima funcionalidade as caixas de texto dinâmicas, com a possíbilidade de criá-las dinamicamente com formatação padronizada. Isto com um pouco de criatividade, permitirá seu uso de forma semelhante ao CCS (Folhas de Estilo) usadas no HTML.

G) Evite usar Twenning Motion e Shape no filme. Desde que seja possível, troque esses recursos por Action Script que além de mais flexíveis, possibilita uma redução considerável no tamanho do SWF. Você poderá inclusive criar efeitos que interajam com o internauta e não simples animações pré-definidas.

H) 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 para a mesma coisa (sobe e desce), simplesmente use o mesmo símbolo para representar os sentidos com rotação para cada instância.

I) 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.

J) Sempre que possível, agrupe os objetos como linhas, preenchimentos, etc...

k) Reduza o número de frames desnecessários no filme.

L) 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, tanto maior seu tamanho será.
Estou montando um curso via e-mail sobre ActionScript para iniciantes. Os interessados em conhecer a metodologia e conteúdo, poderão fazer o download para "Test Driver"
AQUI: Para abrir os arquivos DOC, será necessário o uso da SENHA: AlunoASLH e na próxima tela pressionar o botão SOMENTE LEITURA.

M) 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. Leia a documentação do Flash para saber melhor como usar este recurso.

N) Faça filmes objetivos que tenham ligação direta com o site. Evite usar animações apenas porque tem um efeito "legal". Seja objetivo e use somente o necessário.

O) Evite animar tudo que existe no filme. Movimentos só devem ser usados, nos itens realmente úteis e que precisam chamar muito a atenção ou sejam parte fundamental do contexto de seu site.

P) Faça uma limpeza na biblioteca do Fla, eliminando tudo o que não foi usado no filme e salve o arquivo com outro nome. Depois feche-o, exclua a versão anterior e renomeie o arquivo com o nome anterior. Isto deve ser feito periodicamente e principalmente quando se altera muito um FLA, pois o Flash possui um problema e deixa lixo na biblioteca ocupando espaço inútil no FLA. A conseqüência disto é que em certos casos se reflete no SWF. Eu já constatei esse fato por diversas vezes.

Q) 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 associado ao novo recurso da versão MX (ITEM A), possibilita uma perfeita manutenção, agilização e redução no tamanho dos seus filmes.

R) Procure otimizar o conteúdo dos objetos e comandos. Muitas vezes se faz algo que após uma breve análise, podemos chegar ao mesmo resultado com um código mais enxuto e eficiente. Isto é conseguido com muito estudo e análise de técnicas de programação.

S) O item acima é válido também para desenhos em objetos. Quanto mais detalhes, maior será o tamanho do SWF. Por exemplo nos sites voltados a estórias em quadrinhos, torna-se necessário um grande trabalho de desenho e pintura para se atingir boa qualidade gráfica, porém as técnicas empregadas podem ou não minimizar o tamanho final do filme.

T) Cuidado com o uso de variáveis. É muito comum para os iniciantes, usar variável para tudo e inclusive 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, podem travar o micro. Isto dependerá é claro, da configuração de cada equipamente, recursos disponíveis, consumo da memório por programas rodando simultaneamente na máquina e complexidade de seu filme.

U) O uso de nomes explicativos para variáveis é uma prática "correta", porém devemos tomar cuidado com os excessos. Não use muitas variáveis com nomes grandes (Variável_para_checar_o_numero_de_vezes_que_passamos_aqui). Este exemplo além de totalmente improdutivo é difícil de analisar na janela Action do Flash, além de consumir muito espaço no código aumentando consequentemente o tamanho do filme. Poderíamos fazer assim: npassagens
Nota: Eu já ví coisas assim e várias vezes.

V) Dependendo de cada aplicação, é mais fácil, produtivo, legível e profissional incluir os objetos no filme através de actions do que montar previamente o layout dentro do SWF. Isto também pode reduzir alguns kbs no filme.

W) Quando se faz uso de muitas variáveis (URL, Títulos, Respostas à perguntas, etc...) é mais viável criá-las em arquivos txt e importar para o filme. Isto reduz o tamanho e agiliza o carregamento, como já explicado anteriormente.

X) Se dividir seu filme em vários SWF e precisar usar os mesmos objetos em mais de um swf, faça bibliotecas reutilizáveis que possam ser compartilhadas por todos os swf. Isto também é útil para fontes.

Y) Completando o item (M), o uso de imagens para preechimento de objetos é um recurso útil, mas aumenta consideravelmente o tamanho dos SWF. Uma prática interessante neste caso é reduzir o tamanho da imagens, geralmente usada como textura, antes de importá-la para o FLA. Essa redução deve ser feita de duas formas:

1º) Retirando o peso das imagens (qualidade e resolução) com programas específicos.

2º) Reduzindo as dimensões da mesma, ou seja, se tem 100 x 100 pixels, transforme-a em 50 x 50 pixels. Isto geralmente reduz em 50% o tamanho final do arquivo.

Z) O uso de ActionScript é uma poderosa ferramenta e ainda pouco usada no Flash, principalente pelos designer. A cada nova versão as Actions são incrementadas, permitindo maior e melhor controle sobre o filme, porém como citado em diversos itens acima, não basta conhecer os comandos, propriedades e onde incluí-las, você precisa primeiramente planejar o que seu script fará para depois implementá-lo.

Os mais experientes vão direto escrevendo o código, mas para isto tiveram de treinar e aprender muito e mesmo assim, por vezes tem que refazer, testar e alterar o código até atingir os objetivos.

Z1) A otimização também se aplica aos script do filme, como já relatado acima. Um script mal escrito pode sobrecarregar o processamento da máquina e até aumentar o tamanho do filme.

Z2) Para quem fica em dúvida, os textos escritos como comentários no FLA, não são incluídos no arquivo final SWF, isto porque ele tem por finalidade auxiliar a documentação do código e facilitar sua compreensão posterior.

Chegamos ao fim desta segunda revisão. Espero poder ajudar aos colegas que estejam lendo este texto e fico a disposição para eventuais esclarecimentos.

NOTA FINAL: Caso você tenha alguma nova dica de otimização ou queira complementar as já citadas, favor entrar em contado direto pelo e-mail abaixo.

Acho que você já tem muito trabalho pela frente. O que acha?

Agradecimentos especiais ao TALES, membro da lista PontoFlash que teceu comentários e elogios a este artigo.



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário