Mudando de Flash para HTML, CSS e JavaScript

Nos anos 2000, era comum ver sites construídos usando Flash. Ao visualizar a origem de um site, você geralmente vê muito pouco HTML e um arquivo SWF incorporado. Isso significava algumas coisas. Primeiro, o navegador não suportava Flash nativamente, então você tinha que baixar o plug-in do Flash. Os navegadores acharam difícil entrar no SWF para ler o conteúdo. Entre outras coisas, isso teve um efeito prejudicial no SEO e na acessibilidade.

Em 2007, o iPhone foi lançado. Não suportava Flash. Em 2015, o Google mudou todos os seus vídeos do YouTube para HTML5. Em julho de 2017, a Adobe anunciou oficialmente que deixaria de trabalhar no Flash até 2020. As pessoas usavam o Flash porque ele podia fazer coisas que HTML, CSS e JavaScript não podiam fazer na época. É incrível ver até onde os padrões da web chegaram (e o que está por vir).

Podemos fazer muito hoje que antes só era possível com o Flash. Não apenas isso, mas podemos fazê-lo de uma maneira muito mais acessível e performática. Vou falar sobre algumas das coisas inovadoras que o Flash poderia fazer e como podemos fazê-las hoje.

Disclaimer : Eu amo Flash, e sempre terá um lugar no meu coração, mas para mim, pelo menos, seu tempo passou. Apenas no caso de você estar se perguntando: ainda existem tantas interfaces e mecanismos rodando em Flash, especialmente para jogos, e este artigo aborda alguns dos problemas que são muito relevantes lá.

Vídeo

Uma das grandes coisas que o Flash anunciou foi o vídeo, oferecendo suporte básico já em 2002. Não foi até 2009 que a tag <video> foi introduzida no Chrome, Safari e Firefox. Além disso, o Internet Explorer (IE) 8 não suportava a tag <video> , e não foi até 2011, quando o IE 9 foi lançado, que recebeu suporte.

O Flash usaria a tag <object> , assim:

 <object class codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" width="320" height="400"> <param name="movie" value="filename.swf"> <param name="quality" value="high"> <param name="play" value="true"> <param name="LOOP" value="false"> <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object>

Não é o melhor código, mas funcionou.

Agora, podemos simplesmente escrever <video src="filename.mp4" /> , embora seja importante estar ciente dos diferentes formatos de vídeo nos navegadores, sendo os mais populares MP4, Ogg e WebM. Levando as coisas um passo adiante, é possível não apenas oferecer suporte à tag <video> , mas também oferecer substitutos e alternativas úteis:

 <video width="320" height="400"> <source src="filename.mp4" type="video/mp4" /> <source src="filename.webm" type="video/webm" /> <source src="filename.ogv" type="video/ogg" /> <!-- Flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=filename.mp4" width="320" height="400"> <param name="movie" value="flash-player.swf?videoUrl=filename.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=placeholder.jpg&file=flash-player.swf?videoUrl=filename.mp4" /> </object> <!-- Text Fallback --> <p>No video support found. Please download the video below, or upgrade your browser: https://browsehappy.com/</p> </video> <ul> <li><a href="linktomovie.mp4">MP4 format</a></li> <li><a href="linktomovie.ogv">Ogg format</a></li> <li><a href="linktomovie.webm">WebM format</a></li> </ul>

Plano de fundo do vídeo

Como o YouTube usa a tag <video> e possui uma API, é possível criar um vídeo de fundo em tela cheia. Veja o seguinte código de link de vídeo do YouTube, por exemplo:

 https://www.youtube.com/embed/iMhq63PX8cA?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1

Usando os diferentes parâmetros é possível alterar a forma como o vídeo se comporta.

 controls=0 Hides the controls. showinfo=0 Hides extra information. rel=0 Hides related content. autoplay=1 Auto plays the video when the site is loaded. loop=1 Loops the video. mute=1 Mutes the sound.

Para obter uma lista completa, verifique a API do IFrame Player.

Usando CSS, podemos definir o vídeo para ser fixado na posição e preencher a tela.

 .video { background: #000; position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }

E com o uso de consultas de mídia, podemos definir o vídeo para ser centralizado e ajudar a manter a proporção correta.

 @media (min-aspect-ratio: 16/9) { .video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video { width: 300%; left: -100%; } }

Aqui está o exemplo reunido, com o próprio Mr. Smashing Magazine apresentando uma palestra:

Interação e jogos

Outra coisa em que o Flash se destacou foi a interação e os jogos. O popular site Miniclip foi fundado em 2001 e hospedava uma grande variedade de jogos em Flash. Em 2008, foi avaliado em mais de £ 900 milhões e ainda está em andamento hoje.

APENAS UM REFLEXO

JUST A REFLEKTOR é um videoclipe interativo que rivaliza e até supera as capacidades do Flash. Com o uso de várias tecnologias da web, agora é possível interagir com o vídeo usando um dispositivo móvel, bem como em um ponto usando sua webcam para que você realmente apareça no videoclipe!

Cubo Slam

Atualmente, existem alguns experimentos fantásticos do Chrome baseados na Web, como o Cube Slam. Cube Slam é um jogo que faz uso de WebRTC (uma tecnologia aberta da web), permitindo que você converse por vídeo e jogue um jogo dentro do navegador. Embora o Flash fosse muito usado para bate-papo por vídeo, ele apresentava várias desvantagens em comparação com o WebRTC: dependia do plug-in do Flash, exigia um servidor de mídia e tinha várias implicações de segurança e baixo desempenho.

Motores de jogo HTML5

Existem vários mecanismos de jogos HTML5 e JavaScript. Este próximo exemplo faz uso de canvas e WebGL . WebGL (Web Graphics Library) é uma API construída em JavaScript que permite gráficos interativos 2D e 3D dentro da tag <canvas> .

Como mencionado no próprio post da Good Boy Digital sobre o projeto (os criadores do exemplo):

"Star Wars Arcade realmente ultrapassa os limites do que é possível com as tecnologias HTML5 e WebGL. Isso permite a criação de uma única compilação que funciona perfeitamente em navegadores de desktop e móveis sem ter que baixar um aplicativo; a vantagem de poder oferecer uma experiência de 'app like' em todos os dispositivos para que qualquer pessoa possa aproveitá-la instantaneamente. Sem senhas, sem App Stores, basta clicar no URL e jogar!"

— goodboy digital, estudo de caso do Star Wars Arcade

Eu amo especialmente esta parte: “Basta clicar no URL e jogar!” Uma das minhas primeiras lembranças “Uau” da web foi ter meu próprio site em 1999 e poder digitar esse URL em qualquer computador conectado à web e visualizá-lo. Parecia absolutamente incrível para mim que isso fosse realmente possível (e continua a me surpreender até hoje!).

Suporte ao navegador

Uma das vantagens de construir algo - especialmente um jogo, devido à complexidade extra - em Flash que ainda é relevante hoje é o suporte ao navegador. O suporte do navegador é geralmente muito bom hoje em dia, e o Can I Use pode nos ajudar a descobrir rapidamente o estado do suporte do navegador para uma especificação específica. No entanto, ainda existem discrepâncias que podem causar problemas. Portanto, se você concordar em oferecer suporte apenas a navegadores instalados com o plug-in do Flash com o qual está trabalhando, provavelmente não encontrará problemas entre navegadores.

Tipografia

O Flash foi originalmente projetado como uma ferramenta de animação. Como tal, tinha várias limitações com a tipografia.

O Flash tinha um sistema de grade de pixels. Se a tipografia fosse colocada na grade em X:100.3 :100.7 e, portanto, fora do alinhamento da grade de pixels, ela ficaria desfocada.

Como resultado, descobri que as fontes de pixel eram úteis porque ficavam na grade e permaneciam nítidas. Outra limitação aqui seria se você usasse uma fonte de 8 pixels, mas a configurasse para 10 pixels, ela sairia do alinhamento com a grade e, novamente, ficaria desfocada.

Felizmente, hoje em HTML e CSS, temos uma série de ferramentas para nos ajudar. Podemos definir fontes como uma unidade absoluta em px (pixels) ou, mais comum hoje em dia, usar ems e rems para ajudar no design responsivo da web (falarei mais sobre isso mais tarde).

Outro problema com Flash e tipografia eram as fontes. Se uma fonte não estivesse disponível no dispositivo, uma fonte substituta seria fornecida. Para contornar isso no Flash, você pode incorporar a fonte no arquivo .swf . Ao fazer isso, porém, você adicionou o tamanho do arquivo e, portanto, o tempo que o SWF levaria para ser baixado e exibido.

Dito isto, o que foi possível com o Flash foi a Substituição do Flash Inman Escalável (sIFR). O sIFR permitiu que o texto HTML fosse substituído por Flash. Antes disso, para usar fontes personalizadas, usávamos imagens. No entanto, o uso de imagens não permitia texto selecionável e significava que você precisava criar imagens manualmente. Passando do sIFR, os desenvolvedores criaram o Cufon. Cufon evitou o uso do Flash usando uma versão SVG e VML de uma fonte. Era mais rápido que o sIFR e não exigia o plugin Flash; mas, novamente, com esta técnica, não foi possível selecionar texto.

Hoje, temos a regra CSS @font-face e uma série de fontes padrão da web disponíveis:

• Fontes do Google
• Typekit
• Esquilo de fonte

No Chrome e Firefox (e, esperamos, em breve, no Safari), temos font-display em CSS. Se você estiver usando uma fonte personalizada, por padrão, o navegador aguardará para obter a fonte personalizada. Se não conseguir a fonte personalizada, usará uma fonte de backup (a velocidade varia entre os navegadores, mas geralmente é de 3 segundos). Isso é conhecido como um flash de texto invisível (ou FOIT). Para melhorar esse cenário, podemos usar o seguinte:

 @font-face { font-display: swap; }

Usando swap , veremos o texto imediatamente usando a fonte de backup. Quando a fonte personalizada for carregada, o navegador trocará o backup por ela. Dessa forma, o usuário consegue ler o conteúdo assim que ele estiver disponível.

Animação

Uma das coisas que o Flash fez muito bem foi a interpolação. A interpolação é usada para animar elementos. No Flash, você pode criar um elemento em um quadro-chave, duplicar esse quadro-chave ao longo da linha do tempo e adicionar uma interpolação.

Com HTML e CSS, podemos aplicar a mesma animação usando @keyframes , transform e animation .

 <div class="box"></div>

 .box { width: 100px; height: 100px; background-color: #333; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } div { animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-direction: alternate; } 

Com o Chrome Developer Tools, podemos inspecionar e ajustar a animação acessando Chrome Dev Tools → Cmd + Shift + P → Animation .

Também é possível depurar possíveis problemas de desempenho que podem surgir ao lidar com animação. Nas Ferramentas do desenvolvedor do Chrome, há uma guia "Desempenho". Ao clicar nele, depois no ícone do círculo “Gravar”, podemos ver uma série de informações úteis. Essa técnica me ajudou muito quando construí o Relatório Anual da Mind 2012-13, principalmente a seção do site que tem um mapa com círculos animados mostrando a localização das lojas da Mind. Inicialmente, a seção do mapa foi carregada no início, o que causou problemas de repintura. Usando a guia “Desempenho”, consegui identificar e atualizar isso, então o mapa só começou a animar quando estava em exibição.

Gráficos vetoriais

A web se beneficiou e ainda se beneficia enormemente da consideração cuidadosa do tamanho do arquivo. No início dos anos 2000, a web era vista principalmente em computadores desktop, com modems dial-up lentos. Uma imagem simples pode levar segundos ou até minutos para carregar. Para ajudar com isso, o Flash fez uso intenso de gráficos vetoriais. O uso de gráficos vetoriais, quando apropriado, em vez de imagens JPEG ou GIF, reduz significativamente o tamanho do arquivo e, portanto, carrega mais rapidamente pela web.

Nos últimos anos, e particularmente graças a Sara Soueidan, os gráficos vetoriais escaláveis ​​(SVGs) tornaram-se cada vez mais difundidos na web. SVG é uma marcação baseada em XML que nos permite criar gráficos vetoriais para a web. Funciona muito bem com animação e tive o prazer de construir alguns sites que fazem uso disso: o site do relatório Mind (mencionado anteriormente) e How Clean Is England? que Sara mencionou no Twitter! Obrigado Sara!

Web design responsivo

Uma das principais armadilhas da construção de um site em Flash hoje é a falta de media queries. Hoje, o uso de celulares e tablets ultrapassou o de desktops. Para criar a melhor experiência, devemos criar um site acessível em todos esses dispositivos. Em muitos dispositivos, o Flash simplesmente não será carregado e, mesmo que carregasse, provavelmente violaria a largura da janela de visualização ou seria dimensionado e inutilizável.

Usando media queries, podemos criar um layout que responda ao conteúdo. Aqui está um exemplo:

 <div class="someContent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est excepturi enim id ratione blanditiis voluptate dolore necessitatibus culpa maxime eius assumenda eveniet dolores odit sunt repellat, rerum amet delectus vel.</p> </div>

 .someContent { color: green; } @media screen and (min-width: 400px) { .someContent { color: yellow; } } @media screen and (min-width: 600px) { .someContent { color: red; } } 

ActionScript x JavaScript

O ActionScript é usado em Flash e, portanto, tem a mesma armadilha dos arquivos SWF mencionados anteriormente, pois requer o plug-in do Flash. O JavaScript, por outro lado, está prontamente disponível em todos os navegadores modernos.

Vejamos um exemplo de configuração de uma variável em ambos e suas diferenças:

 var x:Number = 42;

 var x = 42;

Com o ActionScript, declaramos que a variável é um número. Se a variável for atribuída a qualquer outra coisa, ela receberá um erro. JavaScript é tipado livremente, o que significa que podemos atribuir a variável como outra coisa, como uma string:

 var x = '42';

Em JavaScript, se quiséssemos verificar se é um número, poderíamos usar typeof(x); , e isso produziria "número". Outra opção seria criar uma function e usar isNaN para detectar se “não é um número”:

 function isNumber(value) { if (isNaN(value)) { return value + ' is not a number.'; } return value + ' is a number.'; } console.log(isNumber(42)); // "42 is a number." console.log(isNumber('forty two')); // "forty two is not a number."

Colaboração

Com HTML, CSS e JavaScript (e muitas outras linguagens de codificação), o Git e o GitHub tornam a colaboração extremamente fácil. Por exemplo, se eu quisesse editar o HTML do “Author Template” da Smashing Magazine via GitHub, eu poderia clicar no botão “Fork”. Isso criaria uma versão dos arquivos (também conhecido como repositório) com meu próprio nome. Eu poderia então fazer as alterações que eu gostaria e enviar um pull request. Isso daria ao proprietário da Smashing Magazine a capacidade de revisar minha solicitação de pull e aceitá-la ou rejeitá-la. Uma vez aceito, o código iria para o repositório principal.

Há uma série de grandes razões para trabalhar desta forma: Você sempre tem um backup do seu trabalho; você pode reverter para versões anteriores do seu trabalho e a colaboração se torna muito fácil. Alguém pode estar trabalhando em uma seção do site, ou no CSS ou JavaScript, e quando cada membro da equipe terminar, você pode revisar as alterações e puxá-las conforme necessário.

Se tentássemos o mesmo com o Flash, seria muito mais difícil ter que salvar e enviar um arquivo .fla a cada vez. Se várias pessoas trabalhassem no mesmo .fla , as coisas poderiam ficar muito confusas. Com HTML, CSS e JavaScript, é possível fazer um “diff” no código, o que nos permite comparar e revisar o código. Podemos até selecionar certos pedaços de código, trazê-los ou comentá-los para revisão e trabalho adicionais.

Conclusão

Flash foi uma das razões pelas quais comecei a construir sites. Ele foi pioneiro em muitas áreas, e isso levou as pessoas a criarem coisas incríveis com ele. Ao longo dos anos, ele impulsionou bastante a web. O anúncio oficial da Adobe de abandonar o suporte ao Flash, no entanto, levanta preocupações. Seria uma pena se milhões de sites usando Flash fossem perdidos. Há uma petição para abrir o Flash e o Shockwave de código aberto. Espero que não a percamos para sempre. Tivemos alguns ótimos – e estranhos – momentos. Deixo-vos com este exemplo clássico do “estranho” a que me refiro:

Aqui estão as letras, se você quiser cantar junto.