Passer de Flash à HTML, CSS et JavaScript

Dans les années 2000, il était courant de voir des sites Web créés à l'aide de Flash. En affichant la source d'un site Web, vous voyez souvent très peu de code HTML et un fichier SWF intégré. Cela signifiait plusieurs choses. Premièrement, le navigateur ne supportait pas nativement Flash, vous deviez donc télécharger le plugin Flash. Les navigateurs ont eu du mal à accéder au SWF pour lire le contenu. Entre autres choses, cela a eu un effet néfaste sur le référencement et l'accessibilité.

En 2007, l'iPhone est sorti. Il ne supportait pas Flash. En 2015, Google a déplacé toutes ses vidéos YouTube vers HTML5. En juillet 2017, Adobe a officiellement annoncé qu'il cesserait de fonctionner sur Flash d'ici 2020. Les gens utilisaient Flash car il pouvait faire des choses que HTML, CSS et JavaScript ne pouvaient pas faire à l'époque. C'est incroyable de voir à quel point les normes du Web sont arrivées (et ce qui s'en vient).

Aujourd'hui, nous pouvons faire beaucoup de choses qui n'étaient auparavant possibles qu'avec Flash. Non seulement cela, mais nous pouvons le faire d'une manière beaucoup plus accessible et performante. Je vais passer en revue certaines des choses révolutionnaires que Flash pourrait faire et comment nous pouvons les faire aujourd'hui.

Disclaimer : J'adore Flash, et il aura toujours une place dans mon cœur, mais pour moi du moins, son temps est révolu. Juste au cas où vous vous poseriez la question : il y a encore tellement d'interfaces et de moteurs fonctionnant dans Flash, en particulier pour les jeux, et cet article aborde certains des problèmes qui y sont très pertinents.

Vidéo

L'une des grandes choses annoncées par Flash était la vidéo, offrant un support de base dès 2002. Ce n'est qu'en 2009 que la <video> a été introduite dans Chrome, Safari et Firefox. De plus, Internet Explorer (IE) 8 ne prenait pas en charge la <video> , et ce n'est qu'en 2011, lors de la sortie d'IE 9, qu'elle a été prise en charge.

Flash utiliserait la <object> , comme ceci :

 <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>

Ce n'est pas le meilleur code, mais cela a fonctionné.

Maintenant, nous pouvons simplement écrire <video src="filename.mp4" /> , bien qu'il soit important de connaître les différents formats vidéo selon les navigateurs, les plus populaires étant MP4, Ogg et WebM. Pour aller plus loin, il est possible non seulement de prendre en charge la <video> , mais également d'offrir des solutions de repli et des alternatives utiles :

 <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>

Arrière-plan vidéo

Étant donné que YouTube utilise la <video> et dispose d'une API, il est possible de créer une vidéo d'arrière-plan en plein écran. Prenez le code de lien vidéo YouTube suivant, par exemple :

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

En utilisant les différents paramètres, il est possible de modifier le comportement de la vidéo.

 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.

Pour une liste complète, consultez l'API IFrame Player.

En utilisant CSS, nous pouvons régler la vidéo pour qu'elle soit fixe en position et qu'elle remplisse l'écran.

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

Et avec l'utilisation de requêtes multimédias, nous pouvons régler la vidéo pour qu'elle soit centrée et aider à conserver le bon rapport d'aspect.

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

Voici l'exemple mis en place, avec M. Smashing Magazine lui-même présentant une conférence :

Interaction et jeu

Une autre chose dans laquelle Flash excellait était l'interaction et les jeux. Le site Web populaire Miniclip a été fondé en 2001 et hébergeait une large gamme de jeux Flash. En 2008, il était évalué à plus de 900 millions de livres sterling et est toujours en cours aujourd'hui.

JUSTE UN REFLEKTEUR

JUST A REFLEKTOR est une vidéo musicale interactive qui rivalise et même surpasse les capacités de Flash. Grâce à l'utilisation de diverses technologies Web, il est désormais possible d'interagir avec la vidéo à l'aide d'un appareil mobile, ainsi qu'à un moment donné à l'aide de votre webcam afin que vous apparaissiez vous-même dans la vidéo musicale !

Coup de cube

Il existe aujourd'hui de fantastiques expériences Chrome basées sur le Web, telles que Cube Slam. Cube Slam est un jeu qui utilise WebRTC (une technologie Web ouverte), vous permettant de discuter en vidéo et de jouer à un jeu dans le navigateur. Bien que Flash ait été largement utilisé pour le chat vidéo, il comportait un certain nombre d'inconvénients par rapport au WebRTC : il s'appuyait sur le plug-in Flash, il nécessitait un serveur multimédia et il avait diverses implications en matière de sécurité et de mauvaises performances.

Moteurs de jeu HTML5

Il existe un certain nombre de moteurs de jeu HTML5 et JavaScript. Cet exemple suivant utilise canvas et WebGL . WebGL (Web Graphics Library) est une API construite en JavaScript qui permet des graphiques 2D et 3D interactifs dans la <canvas> .

Comme mentionné dans le propre article de Good Boy Digital concernant le projet (les créateurs de l'exemple):

"Star Wars Arcade repousse vraiment les limites de ce qui est possible avec les technologies HTML5 et WebGL. Cela permet la création d'une version unique qui fonctionne de manière transparente sur les navigateurs de bureau et mobiles sans avoir à télécharger une application ; l'avantage de pouvoir offrir une expérience "semblable à une application" sur tous les appareils afin que tout le monde puisse en profiter instantanément. Pas de mot de passe, pas d'App Stores, il suffit d'appuyer sur l'URL et de jouer !"

— goodboy digital, étude de cas Star Wars Arcade

J'aime particulièrement ce morceau : "Appuyez simplement sur l'URL et jouez !" L'un de mes premiers souvenirs "Wow" du Web était d'avoir mon propre site Web en 1999 et de pouvoir taper cette URL sur n'importe quel ordinateur connecté au Web et de le visualiser. Il me semblait absolument incroyable que cela soit réellement possible (et continue de m'étonner à ce jour !).

Prise en charge du navigateur

L'un des avantages de la création de quelque chose - en particulier un jeu, en raison de la complexité supplémentaire - dans Flash qui est toujours d'actualité aujourd'hui est la prise en charge du navigateur. La prise en charge des navigateurs est généralement assez bonne ces jours-ci, et puis-je utiliser peut nous aider à connaître rapidement l'état de la prise en charge des navigateurs pour une spécification particulière. Cependant, il existe encore des écarts qui pourraient causer des problèmes. Donc, si vous êtes d'accord pour ne prendre en charge que les navigateurs installés avec le plug-in Flash avec lequel vous travaillez, vous ne rencontrerez probablement aucun problème entre navigateurs.

Typographie

Flash a été conçu à l'origine comme un outil d'animation. En tant que tel, il avait diverses limitations avec la typographie.

Flash avait un système de grille de pixels. Si la typographie était posée sur la grille à X:100.3 :100.7 et, par conséquent, non alignée sur la grille de pixels, elle semblerait floue.

En conséquence, j'ai trouvé que les polices de pixels étaient utiles car elles reposaient sur la grille et restaient nettes. Une autre limitation ici serait que si vous utilisiez une police de 8 pixels mais que vous la régliez sur 10 pixels, elle ne serait pas alignée avec la grille et, encore une fois, serait floue.

Heureusement, aujourd'hui, en HTML et CSS, nous avons une foule d'outils pour nous aider. Nous pouvons définir les polices comme une unité absolue en px (pixels) ou, plus courant de nos jours, utiliser ems et rems pour faciliter la conception Web réactive (j'en reparlerai plus tard).

Un autre problème avec Flash et la typographie était les polices. Si une police n'était pas disponible sur l'appareil, une police de secours était fournie. Pour contourner cela dans Flash, vous pouvez incorporer la police dans le fichier .swf . En procédant ainsi, cependant, vous avez augmenté la taille du fichier et, par conséquent, le temps nécessaire au téléchargement et à l'apparition du fichier SWF.

Cela étant dit, ce qui était possible avec Flash était le remplacement évolutif du flash Inman (sIFR). sIFR permettait de remplacer le texte HTML par Flash. Avant cela, pour utiliser des polices personnalisées, nous utilisions des images. Cependant, l'utilisation d'images ne permettait pas de texte sélectionnable, et cela signifiait que vous deviez créer des images manuellement. Passant de sIFR, les développeurs ont proposé Cufon. Cufon a évité l'utilisation de Flash en utilisant une version SVG et VML d'une police. Il était plus rapide que sIFR et ne nécessitait pas le plugin Flash ; mais, encore une fois, avec cette technique, il n'était pas possible de sélectionner du texte.

Aujourd'hui, nous avons la règle CSS @font-face et une multitude de polices Web standard disponibles :

• Polices Google
• Typekit
• Écureuil de police

Dans Chrome et Firefox (et, espérons-le bientôt, Safari), nous avons font-display en CSS. Si vous utilisez une police personnalisée, par défaut, le navigateur attendra pour obtenir la police personnalisée. S'il ne peut pas obtenir la police personnalisée, il utilisera une police de secours (la vitesse varie selon les navigateurs, mais elle est généralement de 3 secondes). C'est ce qu'on appelle un flash de texte invisible (ou FOIT). Pour améliorer ce scénario, nous pouvons utiliser les éléments suivants :

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

En utilisant swap , nous verrons immédiatement le texte en utilisant la police de sauvegarde. Lorsque la police personnalisée est chargée, le navigateur permute la sauvegarde pour celle-ci. De cette façon, l'utilisateur peut lire le contenu dès qu'il est disponible.

Animation

L'une des choses que Flash faisait très bien était l'interpolation. L'interpolation est utilisée pour animer des éléments. Dans Flash, vous pouvez créer un élément dans une image clé, dupliquer cette image clé le long de la timeline, puis ajouter une interpolation.

Avec HTML et CSS, nous pouvons appliquer la même animation en utilisant @keyframes , transform et 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; } 

Avec Chrome Developer Tools, nous pouvons inspecter et ajuster l'animation en accédant à Chrome Dev Tools → Cmd + Shift + P → Animation .

Il est également possible de déboguer les problèmes de performances potentiels qui peuvent survenir lors de la gestion de l'animation. Dans Chrome Developer Tools, il y a un onglet "Performances". En cliquant dessus, puis sur l'icône du cercle "Enregistrer", nous pouvons voir une série d'informations utiles. Cette technique m'a beaucoup aidé lorsque j'ai construit le rapport annuel 2012-13 de Mind, en particulier la section du site Web qui contient une carte avec des cercles animés indiquant les emplacements des magasins Mind. Initialement, la section de la carte était chargée au début, ce qui provoquait des problèmes de repeinture. En utilisant l'onglet "Performance", j'ai pu identifier et mettre à jour cela, de sorte que la carte n'a commencé à s'animer que lorsqu'elle était en vue.

Graphiques vectoriels

Le Web a bénéficié et bénéficie toujours énormément d'un examen attentif de la taille des fichiers. Au début des années 2000, le Web était principalement consulté sur des ordinateurs de bureau, avec des modems d'accès à distance lents. Une simple image peut prendre quelques secondes, voire quelques minutes, à se charger. Pour aider à cela, Flash a fait un usage intensif des graphiques vectoriels. L'utilisation de graphiques vectoriels, le cas échéant, au lieu d'images JPEG ou GIF, réduit considérablement la taille du fichier et se charge donc plus rapidement sur le Web.

Depuis quelques années, et notamment grâce à Sara Soueidan, les graphiques vectoriels évolutifs (SVG) se sont de plus en plus répandus sur le web. SVG est un balisage basé sur XML qui nous permet de créer des graphiques vectoriels pour le Web. Cela fonctionne extrêmement bien avec l'animation et j'ai eu le plaisir de créer des sites Web qui l'utilisent : le site Web du rapport Mind (mentionné précédemment) et How Clean Is England ? dont Sara a parlé sur Twitter ! Merci Sara!

Site Web adaptatif

L'un des principaux écueils de la construction d'un site Web en Flash aujourd'hui est le manque de requêtes médiatiques. Aujourd'hui, l'utilisation des mobiles et des tablettes a dépassé celle des ordinateurs de bureau. Afin de créer la meilleure expérience, nous devons créer un site Web accessible sur tous ces appareils. Sur de nombreux appareils, Flash ne se chargera tout simplement pas du tout, et même s'il le faisait, il dépasserait très probablement la largeur de la fenêtre d'affichage ou se mettrait à l'échelle et serait inutilisable.

À l'aide de requêtes multimédias, nous pouvons créer une mise en page qui répond au contenu. Voici un exemple :

 <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 contre JavaScript

ActionScript est utilisé dans Flash et présente donc le même écueil que les fichiers SWF mentionnés précédemment, en ce sens qu'il nécessite le plug-in Flash. JavaScript, en revanche, est facilement disponible dans tous les navigateurs modernes.

Regardons un exemple de définition d'une variable dans les deux et leurs différences :

 var x:Number = 42;

 var x = 42;

Avec ActionScript, nous déclarons que la variable est un nombre. Si la variable est assignée à autre chose, elle obtiendra une erreur. JavaScript est faiblement typé, ce qui signifie que nous pourrions affecter la variable comme autre chose, comme une chaîne :

 var x = '42';

En JavaScript, si nous voulions vérifier qu'il s'agit d'un nombre, nous pourrions utiliser typeof(x); , et cela produirait "nombre". Une autre option serait de créer une function et d'utiliser isNaN pour détecter si ce n'est "pas un nombre":

 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."

Collaboration

Avec HTML, CSS et JavaScript (et de nombreux autres langages de codage), Git et GitHub rendent la collaboration extrêmement facile. Par exemple, si je voulais modifier le code HTML du "Modèle d'auteur" de Smashing Magazine via GitHub, je pourrais cliquer sur le bouton "Fork". Cela créerait une version des fichiers (également connue sous le nom de référentiel) sous mon propre nom. Je pourrais ensuite apporter les modifications que j'aime et soumettre une demande d'extraction. Cela donnerait au propriétaire de Smashing Magazine la possibilité d'examiner ma demande d'extraction et de l'accepter ou de la rejeter. Une fois accepté, le code irait dans le référentiel principal.

Il existe un certain nombre de bonnes raisons de travailler de cette manière : Vous avez toujours une sauvegarde de votre travail ; vous pouvez revenir aux versions précédentes de votre travail et la collaboration devient très facile. Quelqu'un peut travailler sur une section du site Web, ou sur le CSS ou JavaScript, et lorsque chaque membre de l'équipe a terminé, vous pouvez examiner les modifications et les intégrer au besoin.

Si nous essayions la même chose avec Flash, il serait beaucoup plus difficile de devoir enregistrer et envoyer un fichier .fla à chaque fois. Si plusieurs personnes devaient travailler sur le même .fla , les choses pourraient devenir très confuses. Avec HTML, CSS et JavaScript, il est possible de faire un "diff" sur le code, ce qui nous permet de comparer et de revoir le code. Nous pouvons même sélectionner certains morceaux de code, les apporter ou les commenter pour un examen et un travail plus approfondis.

Conclusion

Flash a été l'une des raisons pour lesquelles j'ai commencé à créer des sites Web. Il a été pionnier dans de nombreux domaines, ce qui a conduit les gens à créer des choses incroyables avec lui. Au fil des ans, cela a beaucoup fait avancer le Web. L'annonce officielle d'Adobe de l'abandon du support de Flash soulève cependant des inquiétudes. Ce serait une énorme honte si des millions de sites Web utilisant Flash étaient perdus. Il y a une pétition pour ouvrir Flash et Shockwave. J'espère que nous ne le perdrons pas pour toujours. Nous avons eu des moments formidables et étranges. Je vous laisse avec cet exemple classique du « bizarre » auquel je me réfère :

Voici les paroles, si vous voulez chanter.