Você os vê em todos os lugares. Figuras animadas piscando, saltando ou girando na tela. Os web designers não tropeçaram apenas nesses truques. Eles criaram um kit de ferramentas para fazer o conteúdo aparecer sem quebrar o seu navegador. Os principais jogadores? GIFs animados, HTML dinâmico, Java, Shockwave e Flash. Cada um tem pontos fortes. Cada um tem falhas. Vamos detalhar como eles funcionam. Também veremos o que vem a seguir.
A guerra da largura de banda
A história da internet é curta. Sua evolução é rápida. Duas forças se empurram uma contra a outra. Os autores querem conteúdo elaborado. Os leitores precisam de carregamentos rápidos.
No início, “rápido” significava modems telefônicos. Os tamanhos dos arquivos tinham que ser minúsculos. Gráficos complexos eram um luxo que poucos podiam pagar. Esta contradição forçou a inovação. Os desenvolvedores tiveram que ser espertos. Eles precisavam de truques para fornecer mídia rica em canais estreitos.
Considere uma animação em Flash de um artigo sobre radiação nuclear. É uma figura complicada. Mas cabe em menos de 7.000 bytes. Isso é eficiência. Veja como cada tecnologia enfrenta esse desafio.
GIFs animados
Os primeiros dias dos gráficos e animação da Web
A web não seria o que é sem o casamento de texto e imagens. Essa integração dependia muito de arquivos bitmap, um formato que mapeia a cor de cada pixel em uma imagem. É um conceito simples. O problema? Esses arquivos podem aumentar de tamanho rapidamente. Para manter o carregamento das páginas sem forçar os usuários a olhar para telas em branco, os desenvolvedores recorreram a técnicas de compressão. É por isso que você vê JPEGs e GIFs dominando o cenário inicial da web.
Mas as imagens estáticas contavam apenas metade da história.
Se a animação é apenas uma sequência rápida de imagens estáticas, o próximo passo lógico seria encadear esses arquivos bitmap. O navegador passaria por eles. Isso criou uma animação GIF, também conhecida como GIF89. Foi a primeira verdadeira explosão de movimento na web. Pegou rapidamente. Continua popular hoje, para melhor ou para pior.
Por que os GIFs venceram (e por que são limitados)
O apelo era inegável. Animação GIF foi incrivelmente simples de construir. A maioria dos navegadores o reconheceu imediatamente. Você não precisava de plug-ins complexos ou software proprietário. Se você estivesse no Windows, poderia ter usado o GIF Construction Set. Os usuários de Mac gravitaram em torno do GifBuilder. O fluxo de trabalho era linear.
- Reúna seus quadros de bitmap individuais.
- Empilhe-os no software.
- Carregue o arquivo final.
É isso. Você codifica a tag exatamente como faria para uma imagem estática.
No entanto, esta simplicidade vem com um teto rígido. A principal desvantagem é o tamanho do arquivo. Como cada quadro é uma imagem bitmap completa, adicionar mais quadros aumenta o peso. Você pode se safar com quatro quadros simples. Eles transmitem facilmente. Mas acertar vinte frames? O tamanho do arquivo muitas vezes se torna incontrolável para as conexões comuns de Internet da época.
E também há um problema de conteúdo. Vinte quadros não são suficientes para um movimento suave. Os filmes dependem de pelo menos 24 imagens por segundo. GIFs animados forçam você a dar grandes saltos entre estados. O resultado é instável. Empolado. Falta a fluidez do vídeo verdadeiro. Você pode ver essa limitação em quase todas as primeiras animações da web. É funcional. É atraente. Mas está longe de ser cinematográfico.
GIFs são adequados para loops simples ou enfeites visuais rápidos. Eles não são, no entanto, capazes de transmitir narrativas complexas. Pior, eles estão em silêncio. Os web designers rapidamente se depararam com uma parede. Os usuários queriam movimento. Eles queriam som. Os GIFs não puderam ser entregues.
O principal problema da animação GIF é o inchaço dos arquivos. Cada quadro de um “filme” adiciona um peso significativo ao download. É ineficiente. É lento.
HTML dinâmico
A solução? Pare de enviar frames. Basta enviar uma imagem. Em seguida, diga ao computador para movê-lo.
Pense no cursor do mouse. Você não baixa uma nova imagem para cada milímetro que o ponteiro percorre. O navegador lida com esse movimento localmente. O HTML dinâmico (dHTML) tenta replicar essa eficiência na web.
As páginas da web originais eram estáticas. Linguagem de marcação de hipertexto (HTML) define estrutura, não comportamento. Depois de carregada, a página ficou lá. Morto. Ainda.
Os designers odiaram isso. Eles queriam conteúdo dinâmico. Conteúdo que mudou após o carregamento da página. Insira dHTML.
Não é uma tecnologia única. É uma combinação de linguagens de script como JavaScript acessando o modelo de objeto de documento (DOM). O DOM é o mapa interno da página do navegador. Ele controla todos os elementos.
A maioria dos navegadores modernos expõe o DOM a scripts. Um script pode capturar um elemento. Mude sua cor. Mova sua posição.
O DHTML não foi criado pensando na animação. Foi construído para manipular elementos da página. A animação é um subproduto feliz.
Um script pode instruir um navegador a atualizar constantemente as coordenadas de uma imagem. A imagem desliza pela tela. Faça isso com várias imagens e você terá um filme grosseiro.
Funciona na maioria dos navegadores sem downloads extras. Mas é meticuloso. O código que funciona no Netscape pode falhar no Internet Explorer. Criar animação dHTML manualmente é doloroso. Você precisa de ferramentas. O Dreamweaver da Macromedia (e aplicativos semelhantes) geram o código de script correto para você.
Mesmo com ferramentas, o dHTML é limitado. Ele move imagens estáticas. É mais suave que um GIF, mas menos eficaz para cenas complexas. Representa o limite máximo do que um navegador pode fazer nativamente.
Para ir além, os desenvolvedores precisavam de algo mais pesado. Algo externo.
Miniaplicativos Java
Entre em Java.
Java é uma linguagem universal orientada para redes. Ele permite que os programadores criem aplicativos para download. Mas estes não são programas independentes. Eles são miniaplicativos.
Os miniaplicativos são executados dentro do navegador. Eles exigem uma máquina virtual (VM). A VM atua como um tradutor. Ele pega o código Java e o converte em instruções que seu sistema operacional específico (Windows, MacOS, Unix) entende.
A VM é essencialmente um plug-in. Se você não tiver, a animação falhará.
Os miniaplicativos Java oferecem flexibilidade. Você não está preso a quadros de bitmap. Você pode desenhar formas vetoriais instantaneamente. Isso mantém os tamanhos dos arquivos gerenciáveis. Permite interatividade. Um usuário pode clicar, arrastar ou passar o mouse, e a animação responde em tempo real.
É poderoso. É multiplataforma. Também é uma dependência. Se o navegador do usuário não tiver o Java VM, ele não verá nada.
Para web designers do final dos anos 90 e início dos anos 2000, esta era a fronteira. Você trocou facilidade de uso por capacidade. GIFs eram fáceis, mas idiotas. dHTML era nativo, mas limitado. Java era complexo, mas capaz.
A escolha dependeu do seu público. Eles tinham os plugins instalados? Eles se importaram com os tempos de carregamento? Ou eles apenas queriam que o site tivesse uma aparência impressionante?
A compensação entre desempenho e riqueza definiu a web durante anos. Ainda estamos acertando o equilíbrio hoje.
O início dos anos noventa mudou tudo. De repente, todo mundo estava fazendo sites. Não eram mais apenas geeks de tecnologia. Eles queriam colocar multimídia em suas páginas. Som. Vídeo. Gráficos extravagantes.
Os navegadores não conseguiam lidar com tudo imediatamente. Então os desenvolvedores foram criativos. Eles criaram plug-ins de navegador.
Pense em um plug-in como um aplicativo auxiliar. Ele funciona junto com o seu navegador para ler tipos de arquivos específicos. Esses programas são pequenos. Você os baixa rapidamente. Eles fazem coisas que os navegadores básicos simplesmente não conseguem.
Como o streaming de vídeo realmente funciona
Os primeiros vídeos da web dependiam muito desse modelo de plug-in. Você não estava apenas assistindo a um arquivo. Você estava interagindo com um jogador especializado.
Os designers usaram scripts DHTML para verificar sua configuração. Você tem o plugin certo? Caso contrário, seu navegador exibiu uma mensagem. Ele disse exatamente onde fazer o download.
Este processo foi tedioso. Demorou. Foi um grande ponto de atrito para os usuários.
Mas se você tivesse o plugin? A mágica aconteceu. O navegador começou a reproduzir o filme antes do download do arquivo ser concluído.
Como? Compressão e streaming.
A compactação simplifica os dados da imagem. Ele reduz o tamanho dos arquivos. O streaming inicia a reprodução durante o processo de download. Players como QuickTime e Media Player usaram isso. Eles mostraram uma sequência de imagens estáticas. Muito parecido com um GIF animado, mas mais rápido. E com som.
O problema? Conexões lentas arruinaram a experiência. Os arquivos demoraram uma eternidade para carregar. Ou a qualidade parecia terrível.
O domínio da animação vetorial
Quando se trata das primeiras animações para a web, dois nomes dominam. Flash e Onda de Choque. Ambos vieram da Macromedia.
Estes eram visualizadores de animação 2D baseados em vetores.
Ao contrário das imagens raster, os vetores usam equações matemáticas. Isso os tornou escalonáveis. Eles permaneceram crocantes em qualquer tamanho. Eles carregaram incrivelmente rápido em conexões dial-up.
Essa tecnologia alimentou a maior parte da web interativa. A animação do bumerangue do nosso artigo anterior? Esse foi o Flash. Não era apenas um arquivo de vídeo. Era um código. Foi leve. Estava em todo lugar.
A Macromedia construiu um império em dois formatos que eram essencialmente irmãos: Flash e Shockwave. Um se tornou o padrão para animação na web; o outro cuidou do trabalho pesado para obter conteúdo mais complexo e interativo. Ao contrário dos arquivos desajeitados do RealPlayer ou QuickTime que apareciam em janelas separadas, esses formatos ficavam dentro da página. Eles eram interativos. Você não apenas assistiu; você clicou. O player Shockwave não reproduziu apenas um filme. Ele lia a entrada do usuário e informava ao navegador como responder.
A anatomia da velocidade
Por que esses arquivos carregaram tão rápido? Não foi mágica. Foi matemática.
A maioria das animações GIF são baseadas em bitmap. Cada pixel é salvo individualmente. Se você tiver um céu azul, são milhares de entradas de pixels individuais. Os arquivos Flash e Shockwave são em grande parte baseados em vetores. Em vez de armazenar valores de pixel, o software armazena instruções. Uma linha reta não é uma série de pontos. É uma descrição: ângulo, coordenada, comprimento.
Descrever imagens dessa maneira permite que o programa salve seções amplas de uma imagem – seções que podem consistir em centenas de pixels em um arquivo bitmap – como algumas figuras.
Essa abordagem reduz o tamanho do arquivo. Mesmo quando imagens bitmap eram usadas, os webmasters podiam condensá-las. Eles se moviam pela tela por meio de caminhos, semelhantes à animação dHTML, mantendo o peso total dos dados baixo. A maioria dos arquivos Flash, entretanto, eram puros vetores. Isso os tornou excepcionalmente rápidos para carregar.
Há outro truque na manga: tween frames.
Os animadores não precisam desenhar cada quadro. O software calcula as alterações geométricas entre quadros-chave. Ele preenche no meio. Isso utiliza muito menos espaço do que armazenar cada quadro como uma imagem bitmap exclusiva. A matemática faz o trabalho pesado.
Streaming: comece antes de terminar
A verdadeira inovação não foi apenas a forma como os arquivos foram estruturados. Foi assim que eles viajaram pela internet. Arquivos Flash e Shockwave são transmitidos.
Você não espera que todo o download comece. O navegador começa a reproduzir o “filme” enquanto o resto ainda está chegando. Pense nisso como uma página da web: o servidor envia primeiro o texto e depois as imagens. Um site em Flash pode enviar um filme de introdução enquanto a maior parte do conteúdo é carregada em segundo plano.
Os webmasters podem codificar o arquivo para iniciar a reprodução assim que uma porcentagem específica do arquivo for baixada. A transmissão é cronometrada para que cada segmento chegue antes que o jogador precise dele. É o mesmo mecanismo por trás do streaming de vídeo.
O Monopólio da Conveniência
O Flash não venceu apenas porque era bom. Ganhou porque a Macromedia o tornou onipresente.
Os plug-ins vieram junto com os principais navegadores e sistemas operacionais. Se você não o tinha, a instalação ocorreu em segundo plano. Você não precisou fechar seu navegador. Você não teve que passar por um processo demorado. O software autoral para criar esses arquivos era caro. Mas o jogador? Livre.
As atualizações foram indolores. A Macromedia projetou os players para se adaptarem a modificações futuras. Os usuários não precisavam fazer nada além de baixar um pequeno arquivo. Se um site detectasse que você tinha uma versão antiga, seu navegador avisaria e direcionaria para a página de download. Os arquivos eram pequenos o suficiente para que o processo de atualização fosse quase instantâneo.
O efeito de rede
Todo formato de animação tem pontos fortes. Todo formato tem pontos fracos.
Mesmo assim, muitos webmasters escolheram o Flash mesmo quando outro formato poderia ser tecnicamente superior. Por que? Porque eles sabiam que a maioria dos usuários já tinha esse recurso. E se não o fizessem, seria trivial conseguir.
A universalidade do Flash e do Shockwave criou um ciclo de feedback. Mais webmasters incluíram o conteúdo. Mais usuários encontraram isso. A aceitação cresceu. Não se tratava mais apenas de tecnologia. Tratava-se do caminho de menor resistência.
Eles vêm da mesma casa. A Macromedia fez ambos. Eles cobrem terreno semelhante. No entanto, a diferença entre o Flash e o Shockwave não é apenas de marca. É arquitetura. É história. Você precisa saber a diferença se se preocupa com a forma como seu conteúdo é carregado ou com o que você pode realmente construir com ele.
A causa raiz? Histórias de origem.
Director, o motor por trás do Shockwave, é anterior à web moderna. Foi construído para CD-ROMs. Coisas pesadas. Alta fidelidade. Conforme a web evoluiu, o Director foi atualizado. Aprendeu a respirar online. Mas Flash? O Flash nasceu para o navegador. Ele evoluiu do Future Splash Animator. A Macromedia ajustou-o para linhas telefônicas. A conexão discada era rei naquela época. A velocidade era tudo.
Essa história cria uma personalidade dividida na tecnologia.
Velocidade priorizada pelo Flash. Shockwave priorizou a energia.
Qual formato ganha em velocidade e compatibilidade?
Se você está perguntando qual formato tem melhor compatibilidade com a web, o Flash segura a coroa com uma vitória esmagadora.
Pense nos plug-ins. Clarão? Instalado em mais de 90% dos usuários da web. Onda de choque? Pouco menos de 60 por cento. Essa é uma grande parte do seu público deixada no escuro, a menos que instalem o player Shockwave.
Os tempos de carregamento seguem a mesma lógica.
Arquivos Flash são enxutos. Eles carregam rápido. Os arquivos Shockwave são mais pesados. Eles demoram mais para chegar. Nos primeiros dias da web, era comum esperar dez segundos para que um clipe carregasse. Hoje, é inaceitável. Flash entendeu isso instintivamente.
Mas a velocidade não é tudo.
Onde o Shockwave vence o Flash
Não descarte o Shockwave ainda. É o levantador mais pesado.
É mais versátil. Você quer jogos complexos? Onda de choque. Você precisa de interatividade profunda? Onda de choque. Animação elaborada que não se preocupa com o tempo de carregamento? Onda de choque.
Há também um problema de hierarquia. Você pode importar um arquivo Flash para um filme Shockwave. Funciona bem. Tente o inverso? Isso não acontece. Shockwave é o formato pai aqui em termos de capacidade.
Depois, há o custo.
O software de criação de Flash custa cerca de US$ 400. Diretor, para Shockwave, custa perto de US$ 1.000. Para uma startup ou um pequeno estúdio, essa é uma barreira significativa. O Flash estava acessível. Diretor era para os profissionais.
O segredo aberto: acessibilidade do código-fonte
Aqui está um detalhe que a maioria dos tutoriais ignora.
Flash é um formato de código aberto. Você pode ver como funciona. Você pode adaptá-lo. Você pode mexer com a coragem. Shockwave usa um formato de arquivo compilado. Está bloqueado. Modificá-lo é extremamente difícil. Se você precisar fazer engenharia reversa ou personalizar profundamente, o Flash lhe dará as chaves. Shockwave os mantém em um cofre.
Como fazer filmes em ambos os ambientes
Ambas as ferramentas foram projetadas para serem surpreendentemente fáceis. Eles automatizam o trabalho pesado. Você não precisa de um diploma em ciência da computação para fazer um globo em movimento.
O fluxo de trabalho é semelhante, mesmo que os nomes sejam diferentes. Você está fazendo três coisas:
- Criar e editar imagens. As matérias-primas.
- Organize as imagens em quadros. A sequência.
- Ordene quadros em um filme. O produto final.
Mas as interfaces? Linguagens totalmente diferentes.
No Flash, você armazena ativos na biblioteca. Em Shockwave, eles entram no elenco. Mesmo trabalho. Rótulo diferente.
Você coloca esses recursos no palco. Isto é o que o usuário realmente vê. A saída final.
Para controlar o movimento, você usa quadros-chave. Você define o ponto inicial. Você define o ponto final. Você diz ao software para preencher os espaços em branco. O Flash chama a área de arranjo de linha do tempo. Shockwave chama isso de a pontuação.
“Se você deseja que um globo role de um lado a outro da tela, não é necessário animar cada quadro. Basta dizer ao Flash onde o globo começa e onde termina.”
Esta é a magia. O software interpola o movimento. Ele lida com a matemática. Você apenas fornece a intenção.
Eles algum dia se fundirão?
Eles estão se aproximando.
Cada atualização adiciona recursos da web ao Shockwave. Cada atualização adiciona versatilidade ao Flash. As lacunas estão diminuindo.
Eventualmente, eles provavelmente se fundirão em um formato abrangente. Seria necessário o melhor dos dois mundos. Velocidade e potência. Acessibilidade e complexidade.
Até então, você escolhe com base em suas restrições.
Você tem uma conexão dial-up? Clarão.
Você tem um orçamento de $ 400? Clarão.
Você precisa ocultar seu código-fonte? Onda de choque.
Você precisa construir um jogo web de nível AAA? Provavelmente onda de choque.
Não se trata apenas de preferência. É sobre o meio. E o meio ainda está evoluindo.
Um filme em Flash do nosso artigo sobre células de combustível.
Uma animação em Flash do nosso artigo sobre o mecanismo.
A mudança para gráficos interativos da Web em 3D
A animação bidimensional na web sempre foi uma experiência direcionada. O designer decide exatamente o que você vê, quadro a quadro. Ele reflete os desenhos animados tradicionais da televisão, onde o público é passivo. Os gráficos tridimensionais da web mudam totalmente essa dinâmica. Você ganha controle. Você pode girar um modelo. Você pode acionar funções específicas. Em alguns casos, você pode até alterar suas dimensões físicas. Esse nível de interação transforma o conteúdo de algo que você assiste em algo que você explora.
Plugins de navegador e padrões da indústria
Assim como as ferramentas 2D anteriores, como Flash e Shockwave, a visualização de gráficos 3D da Web requer um plug-in de navegador. Várias empresas já entraram neste espaço. Viewpoint teve algum sucesso. NxView oferece um plug-in diretamente de seu site.
A indústria também está passando por uma grande consolidação. Em julho, a Macromedia e a Intel anunciaram um desenvolvimento conjunto de recursos 3D para o Shockwave. Esta parceria aproveita os recursos de hardware da Intel e a infraestrutura de reprodutor multimídia estabelecida da Macromedia. O objetivo é claro: tornar o formato Shockwave 3-D o padrão de fato para gráficos da web. Os usuários não precisarão de novo software. Eles simplesmente baixarão uma atualização para seus players Shockwave existentes.
Dimensionamento adaptativo e gerenciamento de polígonos
O desempenho é o maior obstáculo para o 3D na web. A tecnologia Shockwave resolve isso por meio de escalonamento. Adapta-se à velocidade de conexão do usuário em tempo real. Se você tiver uma conexão mais lenta, o player fará download de um modelo com menos polígonos. Polígonos são formas geométricas que se combinam para formar um modelo 3D.
Isto não é apenas um compromisso; é um recurso. Você perde alguns detalhes. Você não perde a clareza da imagem. O movimento permanece fluido. Isso garante que os usuários com conexões discadas ou de banda larga não fiquem excluídos da experiência.
Comércio eletrônico e testes virtuais
Esta tecnologia abre novas possibilidades para compras online. Atualmente, os compradores dependem de imagens estáticas. Eles adivinham o ajuste e a textura. Os gráficos 3D permitem examinar um produto de todos os ângulos. Ele imita a experiência na loja.
Alguns sites estão levando isso adiante com “camarins virtuais”. Os usuários podem criar um modelo 3D de seu próprio formato corporal. Eles podem então ver como roupas diferentes combinam com aquele avatar específico. Isso reduz a incerteza nas compras online.
Aplicações Educacionais e Aprofundamentos
As plataformas educacionais beneficiam significativamente desta mudança. Sites como How Stuff Works já publicaram artigos usando gráficos 3D gerados pelo NxView. O plano é desenvolver mais conteúdo.
Esses gráficos fornecem clareza. Os usuários podem observar um motor de qualquer ângulo. É como se um motor real estivesse parado na frente deles. Essa compreensão espacial ajuda na retenção e compreensão.
O futuro da interação na Web
Esta tecnologia provavelmente revolucionará a aparência da Internet. Segue a mesma trajetória das imagens estáticas e da animação em Flash. A Internet continuará a evoluir em um ritmo alucinante.
Conexões de alta largura de banda estão se tornando mais comuns. Isso impulsiona a próxima onda de ideias de animação. Um conceito é tornar a web menos parecida com um livro e mais parecida com um videogame. Os usuários acessariam informações em um mundo 3D interativo. Outra ideia é torná-lo mais parecido com a televisão. Animação e vídeo de alta qualidade dominariam.
Em última análise, isso depende do que os web designers escolhem construir. Também depende do que os usuários exigem. A internet não é estática. Está se movendo em direção a algo mais envolvente. O próximo passo é entender exatamente como esses motores funcionam nos bastidores.
