O documento fornece dicas para reduzir o peso de arquivos Flash, incluindo otimizar imagens vetoriais e bitmaps, usar formatos e taxas de compressão apropriados para áudio e vídeo, e evitar excesso de elementos e animações complexas na tela. O documento também explica como medir o peso e desempenho de arquivos Flash.

1. ADEUS
GORDURINHAS!
WORKSHOP BÁSICO DE EMAGRECIMENTO DIGITAL
para DESIGNERS INSTRUCIONAIS, DESENVOLVEDORES e DESIGNERS com PROBLEMAS DE
PESO

2. Como funcionam as imagens
criadas em Flash
Fatores que aumentam o peso
dos arquivos, e o que fazer
para reduzi-los
Práticas para otimização de
Imagens Bitmap
Otimizando 3D, audio e video
Processamento: quando o
problema não é o peso
Dicas finais para ter sempre em
mente

3. o
Tamanho
do Problema
Como funcionam as imagens
criadas em Flash

4. COMO FUNCIONA O FLASH
As ilustrações criadas em FLASH são imagens vetoriais.
Outros programas vetoriais: CorelDraw, Illustrator.
Ilustrações vetoriais são criadas a partir de pontos e curvas.
Ponto 3
Ponto 2
Ponto 1

5. IMAGENS VETORIAIS
Por exemplo, para criar um círculo, Flash define um EIXO
CENTRAL e um RAIO.
O cálculo é o mesmo se o RAIO for maior ou menor.
R R

6. IMAGENS VETORIAIS
Quanto maior a
quantidade de pontos
e de informação
em uma ilustração vetorial,
mais complexo é o cálculo e
MAIOR O SEU PESO.
CONTORNO.SWF – 1Kb COMPLETO.SWF – 8Kb

7. IMAGENS VETORIAIS
O peso independe do tamanho na tela.
PEQUENO.SWF – 8Kb GRANDE.SWF – 8Kb

8. IMAGENS VETORIAIS
Desenho mais ‘duro’,
com bordas bem definidas.
Menos recursos de
sombreado e difusão.
Não perdem qualidade ao ampliar.

9. IMAGENS BITMAP
Imagens bitmap são construidas
com matrizes de pixels.
Melhor para sombras e
transições de cor.
Programas de edição bitmap:
Photoshop, ImageReady.
Flash não edita bitmaps
mas pode importá-los.

10. IMAGENS BITMAP
Cada pixel (célula da imagem) acrescenta informação à
imagem.
Quanto maior a quantidade de píxels, maior a resolução e
qualidade da imagem.
A resolução máxima para monitor é 72 ppi (pixels por polegada).

11. IMAGENS BITMAP
Quanto maiores as dimensões
em pixels de uma imagem bitmap,
MAIOR O SEU PESO.
IPOD_PEQ.PNG – 30Kb IPOD_GRANDE.PNG – 64Kb

12. REDIMENSIONANDO BITMAPS
Ao redimensionar ou fazer zoom
na imagem, ela perde qualidade.
Redimensionar bitmaps
no Photoshop e
importar com o tamanho certo.

13. VETOR vs. BITMAP
Vetores costumam ser mais leves e maleáveis que bitmaps.
Usamos imagens vetoriais, sempre que possível.
TENIS.SWF – 11Kb TENIS.PNG – 40Kb

14. SÍMBOLOS
Os símbolos são grupos de objetos que podem ser reutilizados
sem precisar ser carregados novamente.
Tudo que for utilizado mais de uma vez deve ser símbolo.

15. SÍMBOLOS
Símbolos podem ser aplicados com diferentes efeitos de cor.

16. SÍMBOLOS
Símbolos podem ser compartilhados entre arquivos SWF.

17. Botando na
Balança
Fatores que aumentam o peso
dos arquivos, e o que fazer
para reduzi-los.

18. MEDINDO O PESO
Utilize Size Report
Para ativar Size Report,
marque ‘Create Size Report’
nas Publish Settings
e publique o SWF
com CTRL + ENTER.

19. MEDINDO O PESO
O Size Report é um arquivo de texto que Flash cria junto ao
SWF, com informações sobre a animação, incluindo o peso
de cada frame.
Através do Size Report
é possível descobrir
qual frame contém
algum elemento com
peso excessivo.

20. MEDINDO O PESO
Outra ferramenta útil para avaliar visualmente o peso de cada
frame é o Bandwidth Profiler.

21. POR QUE EU ESTOU GORDA #1
Excesso de
elementos na tela.

22. A DIETA PRA MIM #1
Reduzir elementos e ilustrações ao mínimo necessário.
Separar conteúdo em várias telas.
Reutilizar elementos
usando símbolos.

23. POR QUE EU ESTOU GORDA #2
Imagens com pontos em excesso.
MAPA1.SWF – 59Kb

24. A DIETA PRA MIM #2
Otimizar vetores utilizando
MODIFY > SHAPE >
OPTIMIZE...

25. A DIETA PRA MIM #2
Se selecionamos 0% e marcamos a opção ‘Use multiple
passes’, o número de pontos é reduzido sem deformar a
imagem.

26. POR QUE EU ESTOU GORDA #3
Bordas complexas aumentam o peso.
BORDA1.SWF – 2Kb

27. A DIETA PRA MIM #3
Substituir por linhas sólidas.
BORDA1.SWF – 170b

28. POR QUE EU ESTOU GORDA #4
Gradientes e transparências tornam o arquivo mais pesado.
COM_GRADIENTE.SWF – 12kb

29. A DIETA PRA MIM #4
Reduzir quantidade de preenchimentos com gradiente e
transparência.
SEM_GRADIENTE.SWF – 5kb

30. POR QUE EU ESTOU GORDA #5
Traços modulados pesam mais,
pois têm mais de uma borda.
PERSONA.SWF – 4Kb

31. A DIETA PRA MIM #5
Reduzir utilização de pincel e tablet.
Utilizar traços criados com
caneta ou linha.
PERSONA.SWF – 2kb

32. POR QUE EU ESTOU GORDA #6
Partes da ilustração
não são utilizadas.

33. A DIETA PRA MIM #6
Cortar partes
não visíveis.

34. NÃO SE
SIRVA
SE NÃO
FOR
COMER!
Práticas para
otimização de
imagens bitmap

35. QUANDO UTILIZAR BITMAPS
Quando o equivalente vetorial
for mais pesado.
Em fotos.
Em capturas de tela.

36. DIMENSÕES DO BITMAP
Exportar bitmaps no tamanho máximo utilizado no Flash.
Utilizar o comando
IMAGE > TRIM...
do Photoshop.

37. IMPORTAÇÃO DE BITMAPS
Nas propriedades do bitmap,
marcar a opção
ALLOW SMOOTHING
para ter ganho de qualidade.

38. FORMATOS BITMAP: JPG
O formato JPG é usado preferentemente para
fotos e imagens com muitas cores.
Pode-se controlar seu nível de qualidade, de 0 a 100%
Sua compactação
é destrutiva
(com perda).

39. FORMATOS BITMAP: GIF
O formato GIF é usado preferentemente para
logomarcas e imagens com poucas cores.
Pode-se controlar seu peso pela quantidade de cores, de 0 a
256.
Permite definir uma ou mais cores transparentes, com borda
pixelizada.

40. FORMATOS BITMAP: PNG
O formato PNG é usado indistintamente para todo tipo de
imagem.
Permite a criação de imagens transparentes com canal Alpha.
Costuma criar imagens
mais pesadas que
JPG e GIF.

41. TENTAÇÕES
OCASIONAIS
Oimizando 3D,
audio e video.

42. 3D ESTÁTICO
Imagens 3D são produzidas usando 3DStudio ou Swift3D.
Os programas renderizam a imagem em vetor, bitmap ou
vídeo.

43. 3D ANIMADO
Imagens animadas são uma seqüência de imagens estáticas
em vetor ou bitmap.
O peso total da animação é a soma das imagens em
seqüência.

44. AUDIO
Peso depende de vários fatores:
Freqüência:
- para música, usar 44.000 KHz
- para locução, usar 22.000 KHz
Bit:
- para som de qualidade média a alta, usar 16bit
- para ruídos, usar 8bit

45. IMPORTANDO AUDIO
Editar arquivo para eliminar regiões não utilizadas
Importar com a melhor qualidade possível e comprimir no
próprio Flash
Usar compactação MP3 e definir taxa apropriada:
Kbps:
- para qualidade média (locuções), usar de 16 a 92 Kbps
- para qualidade alta (música), usar de 92 a 256 Kbps*
Utilizar arquivos em MONO, pois possuem metade do peso do
STEREO.

46. VIDEO
Arquivos MUITO pesados.
Utilizar o mínimo necessário.

47. OPÇÕES DE IMPORTAÇÃO DE VIDEO
Existem duas formas de inserir vídeo em um SWF:
505Kb
- Embutido (Embed)
. PRO: permite sincronizar animação e vídeo
. CONTRA: insere o peso do vídeo no SWF
500Kb 500Kb - FLV externo
. PRO: não aumenta o peso do SWF
. CONTRA: não permite sincronizar
com animação
5Kb

48. IMPORTANDO VIDEO
Importar com tamanho final em pixels, no máximo de
qualidade.
Transformar em FLV
no Video Encoder.
Cortar segundos
desnecessários
usando TRIM.
Cortar pixels
desnecessários
usando CROP.

49. CAPTIVATE
Colocar todas as imagens
qualidade Standard.

50. CAPTIVATE
Ações: tirar todos
os links de Quiz.

51. CAPTIVATE
Na hora de fechar o projeto,
desmarcar utilização
de ‘mouse’ e ‘audio’.

52. PROCESSAMENTO
Quando o problema
não é o peso
mas a lentidão

53. ENTENDENDO O PROCESSAMENTO
Independe do peso do arquivo.
Problemas de processamento são gerados por alguma tarefa
que exige demais do computador do usuário.

54. MEDINDO O PROCESSAMENTO
Utilizar o Gerenciador de Tarefas do Windows, painel
Processos:
CTRL + SHIFT + ESC
Verificar o valor
da coluna CPU

55. FPS (Frames Por Segundo)
Valor constante que define a quantidade de quadros exibidos
por segundo.
Se define no início no projeto e não deve ser alterado.
FPS maior (24, 30): Maior qualidade, maior processamento.
FPS menor (12, 15, 18): Menor qualidade, menor
processamento.
12 FPS 24 FPS

56. FATORES QUE AUMENTAM O
PROCESSAMENTO #1
Animações em tela inteira.
Evitar uso de Zoom, Fade In e movimentos de câmera.

57. FATORES QUE AUMENTAM O
PROCESSAMENTO #2
Animação de efeitos de Flash 8
Reduzir animação
de Glow, Blur,
Shadow, etc.
Ou substituir
por vetores
ou bitmaps.

58. FATORES QUE AUMENTAM O
PROCESSAMENTO #3
Máscara cobrindo todos Substituir por index vazado
os conteúdos do index. em layer superior,
sobreposto a conteúdos.
MÁSCARA

59. FATORES QUE AUMENTAM O
PROCESSAMENTO #4
Muitas animações simultâneas.
Shape tween e animações
quadro-a-quadro.
Bitmaps animados.

60. QUASE LÁ,
GAROTA!
Dicas finais para ter
sempre em mente

61. DICAS FINAIS #1
Planejar projeto como um todo e definir limites claros de peso
e processamento.

62. DICAS FINAIS #2
Reunir Design Instrucional, Desenvolvimento e Ilustração
antes de enviar roteiro inicial para cliente, sempre que possível.
DES
Roteiro Roteiro para
Briefing
Inicial DI ILU aprovação

63. DICAS FINAIS #3
...bom senso!

64. * TABELA DE CALORIAS
TIPO ARQUIVO MEDIDAS QUALIDADE PESO APROXIMADO
ILUSTRAÇÃO
PERSONAGEM SIMPLES 3 – 8 Kb
PERSONAGEM COMPLEXO 12 – 24 Kb
CENÁRIO SIMPLES 12 – 15 Kb
CENÁRIO COMPLEXO 30 – 50 Kb
BITMAP
IMAGEM JPG 100 x 100 px 100% 12 Kb
IMAGEM JPG 100 x 100 px 60% 4 Kb
IMAGEM JPG 500 x 500 px 100% 200 Kb
IMAGEM JPG 500 x 500 px 60% 54 Kb
AUDIO
LOCUÇÃO 15” 22KHz, 16 bit Mono MP3 16 Kbps 37 Kb
LOCUÇÃO 30” 22KHz, 16 bit Mono MP3 16 Kbps 57 Kb
LOOP 15” 44KHz, 16 bit Mono MP3 32 Kbps 57 Kb
LOOP 30” 44KHz, 16 bit Mono MP3 32 Kbps 116 Kb
VIDEO
FLV 15” 640 x 480 px 400 Kbps 1 Mb
FLV 15” 640 x 480 px 900 Kbps 2 Mb
FLV 15” 320 x 240 px 400 Kbps 1,5 Mb
FLV 15” 320 x 240 px 900 Kbps 2,5 Mb
* (Valores médios aproximados.)

65. PERGUNTE-ME COMO!
Se você tiver alguma dica,
crítica ou sugestão para
reduzir o peso, envie para
nicolasmonasterio@gmail.com