Wechsel von Flash zu HTML, CSS und JavaScript

In den 2000er Jahren war es üblich, Websites zu sehen, die mit Flash erstellt wurden. Wenn Sie den Quellcode einer Website anzeigen, sehen Sie oft sehr wenig HTML und eine eingebettete SWF-Datei. Das bedeutete einiges. Erstens unterstützte der Browser Flash nicht nativ, also mussten Sie das Flash-Plugin herunterladen. Browser fanden es schwierig, in die SWF-Datei zu gehen, um Inhalte zu lesen. Dies wirkte sich unter anderem negativ auf SEO und Barrierefreiheit aus.

2007 wurde das iPhone veröffentlicht. Flash wurde nicht unterstützt. Im Jahr 2015 hat Google alle seine YouTube-Videos auf HTML5 umgestellt. Im Juli 2017 kündigte Adobe offiziell an, die Arbeit an Flash bis 2020 einzustellen. Die Leute verwendeten Flash, weil es Dinge tun konnte, die HTML, CSS und JavaScript damals nicht konnten. Es ist unglaublich zu sehen, wie weit Webstandards gekommen sind (und was kommt).

Wir können heute vieles, was früher nur mit Flash möglich war. Nicht nur das, wir können es auch auf eine Weise tun, die viel zugänglicher und leistungsfähiger ist. Ich werde einige der bahnbrechenden Dinge durchgehen, die Flash leisten könnte, und wie wir sie heute umsetzen können.

Haftungsausschluss : Ich liebe Flash und es wird immer einen Platz in meinem Herzen haben, aber zumindest für mich ist seine Zeit vorbei. Nur für den Fall, dass Sie sich fragen: Es gibt immer noch so viele Schnittstellen und Engines, die in Flash laufen, insbesondere für Spiele, und dieser Artikel behandelt einige der Probleme, die dort sehr relevant sind.

Video

Eines der großartigen Dinge, die Flash ankündigte, war Video, das bereits 2002 grundlegende Unterstützung bot. Erst 2009 wurde das <video> -Tag in Chrome, Safari und Firefox eingeführt. Außerdem unterstützte Internet Explorer (IE) 8 das <video> -Tag nicht, und erst 2011, als IE 9 veröffentlicht wurde, wurde es unterstützt.

Flash würde das <object> -Tag wie folgt verwenden:

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

Nicht der schönste Code, aber es hat funktioniert.

Jetzt können wir einfach <video src="filename.mp4" /> schreiben, obwohl es wichtig ist, sich der unterschiedlichen Videoformate in den Browsern bewusst zu sein, wobei die beliebtesten MP4, Ogg und WebM sind. Um noch einen Schritt weiter zu gehen, ist es möglich, nicht nur das <video> -Tag zu unterstützen, sondern auch Fallbacks und hilfreiche Alternativen anzubieten:

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

Videohintergrund

Da YouTube das <video> -Tag verwendet und über eine API verfügt, ist es möglich, ein Hintergrundvideo im Vollbildmodus zu erstellen. Nehmen Sie zum Beispiel den folgenden YouTube-Video-Link-Code:

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

Mit den verschiedenen Parametern ist es möglich, das Verhalten des Videos zu ändern.

 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.

Eine vollständige Liste finden Sie in der IFrame-Player-API.

Mit CSS können wir das Video so einstellen, dass es in der Position fixiert ist und den Bildschirm ausfüllt.

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

Und mit der Verwendung von Medienabfragen können wir das Video so einstellen, dass es zentriert wird, und dabei helfen, das richtige Seitenverhältnis beizubehalten.

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

Hier ist das zusammengestellte Beispiel, in dem Mr. Smashing Magazine selbst einen Vortrag hält:

Interaktion und Gaming

Eine andere Sache, in der sich Flash auszeichnete, waren Interaktion und Spiele. Die beliebte Website Miniclip wurde 2001 gegründet und beherbergte eine große Auswahl an Flash-Spielen. Im Jahr 2008 wurde es auf über 900 Millionen Pfund geschätzt und läuft noch heute.

NUR EIN REFLEKTOR

JUST A REFLEKTOR ist ein interaktives Musikvideo, das mit den Möglichkeiten von Flash mithalten und diese sogar übertreffen kann. Durch die Verwendung verschiedener Webtechnologien ist es jetzt möglich, mit einem mobilen Gerät mit dem Video zu interagieren, sowie an einem Punkt mit Ihrer Webcam, so dass Sie tatsächlich selbst im Musikvideo auftauchen!

Würfel-Slam

Es gibt heute einige fantastische webbasierte Chrome-Experimente online, wie zum Beispiel Cube Slam. Cube Slam ist ein Spiel, das WebRTC (eine offene Webtechnologie) verwendet, mit dem Sie im Browser per Video-Chat chatten und ein Spiel spielen können. Obwohl Flash stark für Video-Chats verwendet wurde, hatte es im Vergleich zu WebRTC eine Reihe von Nachteilen: Es war auf das Flash-Plug-in angewiesen, es erforderte einen Medienserver und es hatte verschiedene Auswirkungen auf die Sicherheit und eine schlechte Leistung.

HTML5-Game-Engines

Es gibt eine Reihe von HTML5- und JavaScript-Game-Engines. Dieses nächste Beispiel verwendet canvas und WebGL . WebGL (Web Graphics Library) ist eine in JavaScript erstellte API, die interaktive 2D- und 3D-Grafiken innerhalb des <canvas> -Tags ermöglicht.

Wie in Good Boy Digitals eigenem Beitrag zum Projekt erwähnt (die Ersteller des Beispiels):

„Star Wars Arcade verschiebt wirklich die Grenzen dessen, was mit HTML5- und WebGL-Technologien möglich ist. Dies ermöglicht die Erstellung eines einzigen Builds, das sowohl auf Desktop- als auch auf mobilen Browsern nahtlos funktioniert, ohne dass eine App heruntergeladen werden muss; der Vorteil, den dies bieten kann ein „App-ähnliches“ Erlebnis auf allen Geräten, damit jeder es sofort genießen kann. Keine Passwörter, keine App Stores, einfach die URL drücken und spielen!“

— goodboy digital, Star Wars Arcade-Fallstudie

Ich liebe diesen Teil besonders: „Einfach die URL drücken und spielen!“ Eine meiner frühesten „Wow“-Erinnerungen an das Internet war, dass ich 1999 meine eigene Website hatte und diese URL in jeden mit dem Internet verbundenen Computer eingeben und anzeigen konnte. Es erschien mir absolut unglaublich, dass dies tatsächlich möglich war (und verblüfft mich bis heute!).

Browser-Unterstützung

Einer der Vorteile, etwas – insbesondere ein Spiel aufgrund der zusätzlichen Komplexität – in Flash zu erstellen, das auch heute noch relevant ist, ist die Browserunterstützung. Die Browserunterstützung ist heutzutage im Allgemeinen ziemlich gut, und Can I Use kann uns helfen, schnell den Stand der Browserunterstützung für eine bestimmte Spezifikation herauszufinden. Es gibt jedoch immer noch Abweichungen, die Probleme verursachen können. Wenn Sie also damit einverstanden sind, nur Browser zu unterstützen, die mit dem Flash-Plug-in installiert sind, mit dem Sie arbeiten, werden Sie wahrscheinlich keine Cross-Browser-Probleme haben.

Typografie

Flash wurde ursprünglich als Animationstool entwickelt. Als solches hatte es verschiedene Einschränkungen bei der Typografie.

Flash hatte ein Pixel-Grid-System. Wenn Typografie bei X:100.3 :100.7 auf das Raster gelegt würde und somit nicht zum Pixelraster ausgerichtet wäre, würde sie verschwommen aussehen.

Als Ergebnis fand ich, dass Pixelschriftarten nützlich waren, weil sie auf dem Raster saßen und scharf blieben. Eine weitere Einschränkung hier wäre, wenn Sie eine 8-Pixel-Schriftart verwenden, diese aber auf 10 Pixel einstellen, würde sie nicht mehr mit dem Raster ausgerichtet und wieder verschwommen sein.

Zum Glück haben wir heute in HTML und CSS eine Vielzahl von Tools, die uns helfen. Wir können Schriftarten als absolute Einheit in px (Pixel) festlegen oder, was heutzutage häufiger vorkommt, ems und rems verwenden, um das responsive Webdesign zu unterstützen (dazu komme ich später).

Ein weiteres Problem mit Flash und Typografie waren Schriftarten. Wenn eine Schriftart auf dem Gerät nicht verfügbar war, wurde eine Fallback-Schriftart bereitgestellt. Um dies in Flash zu umgehen, könnten Sie die Schriftart in die .swf -Datei einbetten. Dadurch haben Sie jedoch die Dateigröße und damit die Zeit, die das Herunterladen und Anzeigen der SWF-Datei benötigen würde, erhöht.

Was mit Flash jedoch möglich war, war Scalable Inman Flash Replacement (sIFR). sIFR ermöglichte das Ersetzen von HTML-Text durch Flash. Zuvor haben wir Bilder verwendet, um benutzerdefinierte Schriftarten zu verwenden. Die Verwendung von Bildern erlaubte jedoch keinen auswählbaren Text, und es bedeutete, dass Sie Bilder manuell erstellen mussten. Ausgehend von sIFR entwickelten die Entwickler Cufon. Cufon vermied die Verwendung von Flash, indem es eine SVG- und VML-Version einer Schriftart verwendete. Es war schneller als sIFR und benötigte kein Flash-Plugin; aber auch mit dieser Technik war es nicht möglich, Text auszuwählen.

Heute haben wir die CSS @font-face-Regel und eine Vielzahl von Standard-Webfonts zur Verfügung:

• Google-Schriftarten
• Typekit
• Schriftart Eichhörnchen

In Chrome und Firefox (und hoffentlich bald Safari) haben wir die font-display in CSS. Wenn Sie eine benutzerdefinierte Schriftart verwenden, wartet der Browser standardmäßig darauf, die benutzerdefinierte Schriftart abzurufen. Wenn die benutzerdefinierte Schriftart nicht abgerufen werden kann, wird eine Backup-Schriftart verwendet (die Geschwindigkeit variiert je nach Browser, beträgt jedoch normalerweise 3 Sekunden). Dies wird als Flash of Invisible Text (oder FOIT) bezeichnet. Um dieses Szenario zu verbessern, können wir Folgendes verwenden:

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

Durch die Verwendung von swap sehen wir den Text sofort mit der Backup-Schriftart. Wenn die benutzerdefinierte Schriftart geladen wird, tauscht der Browser die Sicherung dafür aus. Auf diese Weise kann der Benutzer den Inhalt lesen, sobald er verfügbar ist.

Animation

Eines der Dinge, die Flash sehr gut gemacht hat, war Tweening. Tweening wird verwendet, um Elemente zu animieren. In Flash könnten Sie ein Element in einem Schlüsselbild erstellen, dieses Schlüsselbild entlang der Zeitachse duplizieren und dann ein Tween hinzufügen.

Mit HTML und CSS können wir dieselbe Animation mit @keyframes , transform und animation anwenden.

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

Mit den Chrome Developer Tools können wir die Animation überprüfen und anpassen, indem wir zu Chrome Dev Tools → Cmd + Shift + P → Animation gehen.

Es ist auch möglich, potenzielle Leistungsprobleme zu debuggen, die beim Umgang mit Animationen auftreten können. In den Chrome Developer Tools gibt es eine Registerkarte „Leistung“. Wenn Sie darauf und dann auf das Kreissymbol „Aufzeichnen“ klicken, können wir eine Reihe nützlicher Informationen sehen. Diese Technik hat mir sehr geholfen, als ich den Jahresbericht 2012-13 von Mind erstellt habe, insbesondere den Abschnitt der Website, der eine Karte mit animierten Kreisen enthält, die die Standorte der Mind-Shops zeigen. Anfangs wurde der Kartenausschnitt beim Start geladen, was Repaint-Probleme verursachte. Mithilfe der Registerkarte „Leistung“ konnte ich dies identifizieren und aktualisieren, sodass die Animation der Karte erst gestartet wurde, wenn sie sichtbar war.

Vektorgrafiken

Das Web profitierte und profitiert immer noch enorm von der sorgfältigen Berücksichtigung der Dateigröße. In den frühen 2000er Jahren wurde das Internet hauptsächlich auf Desktop-Computern mit langsamen DFÜ-Modems betrachtet. Das Laden eines einfachen Bildes kann Sekunden oder sogar Minuten dauern. Um dies zu unterstützen, machte Flash starken Gebrauch von Vektorgrafiken. Die Verwendung von Vektorgrafiken anstelle von JPEG- oder GIF-Bildern reduziert die Dateigröße erheblich und lädt daher schneller über das Internet.

In den letzten Jahren und insbesondere dank Sara Soueidan haben sich skalierbare Vektorgrafiken (SVGs) im Web immer weiter verbreitet. SVG ist ein XML-basiertes Markup, mit dem wir Vektorgrafiken für das Web erstellen können. Es funktioniert sehr gut mit Animationen, und ich hatte das Vergnügen, einige Websites zu erstellen, die davon Gebrauch machen: die Mind-Report-Website (oben erwähnt) und How Clean Is England? die Sara auf Twitter erwähnt hat! Danke Sarah!

Sich anpassendes Webdesign

Eine der größten Fallstricke beim Erstellen einer Website in Flash ist heute das Fehlen von Medienabfragen. Heutzutage hat die Nutzung von Mobilgeräten und Tablets die von Desktops übertroffen. Um die beste Erfahrung zu schaffen, müssen wir eine Website erstellen, die auf all diesen Geräten zugänglich ist. Auf vielen Geräten wird Flash einfach überhaupt nicht geladen, und selbst wenn dies der Fall wäre, würde es höchstwahrscheinlich die Breite des Ansichtsfensters überschreiten oder skalieren und unbrauchbar werden.

Mithilfe von Medienabfragen können wir ein Layout erstellen, das auf den Inhalt reagiert. Hier ist ein Beispiel:

 <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 vs. JavaScript

ActionScript wird in Flash verwendet und hat daher den gleichen Fallstrick wie die zuvor erwähnten SWF-Dateien, da es das Flash-Plug-in erfordert. JavaScript hingegen ist in allen modernen Browsern ohne weiteres verfügbar.

Sehen wir uns ein Beispiel für das Setzen einer Variablen in beiden und ihre Unterschiede an:

 var x:Number = 42;

 var x = 42;

Mit ActionScript deklarieren wir, dass die Variable eine Zahl ist. Wenn der Variablen etwas anderes zugewiesen wird, erhält sie einen Fehler. JavaScript ist lose typisiert, was bedeutet, dass wir der Variablen etwas anderes zuweisen könnten, z. B. einen String:

 var x = '42';

Wenn wir in JavaScript überprüfen möchten, ob es sich um eine Zahl handelt, könnten wir typeof(x); , und dies würde "Nummer" ausgeben. Eine andere Möglichkeit wäre, eine function zu erstellen und mit isNaN zu erkennen, ob es „keine Zahl“ ist:

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

Zusammenarbeit

Mit HTML, CSS und JavaScript (und vielen anderen Programmiersprachen) machen Git und GitHub die Zusammenarbeit extrem einfach. Wenn ich beispielsweise den HTML-Code des „Author Template“ des Smashing Magazine über GitHub bearbeiten wollte, konnte ich auf die Schaltfläche „Fork“ klicken. Dadurch würde eine Version der Dateien (auch bekannt als Repository) unter meinem eigenen Namen erstellt. Ich könnte dann beliebige Änderungen vornehmen und einen Pull-Request einreichen. Dies würde dem Eigentümer des Smashing Magazine die Möglichkeit geben, meine Pull-Anforderung zu überprüfen und sie anzunehmen oder abzulehnen. Nach der Annahme würde der Code in das Haupt-Repository gehen.

Es gibt eine Reihe guter Gründe, auf diese Weise zu arbeiten: Sie haben immer eine Sicherungskopie Ihrer Arbeit; Sie können zu früheren Versionen Ihrer Arbeit zurückkehren, und die Zusammenarbeit wird sehr einfach. Jemand könnte an einem Abschnitt der Website oder am CSS oder JavaScript arbeiten, und wenn jedes Teammitglied fertig ist, könnten Sie die Änderungen überprüfen und bei Bedarf übernehmen.

Wenn wir dasselbe mit Flash versuchen würden, wäre es viel schwieriger, jedes Mal eine .fla -Datei speichern und senden zu müssen. Wenn mehrere Personen an derselben .fla arbeiten würden, könnten die Dinge sehr verwirrend werden. Mit HTML, CSS und JavaScript ist es möglich, einen „Vergleich“ am Code vorzunehmen, wodurch wir den Code vergleichen und überprüfen können. Wir können sogar bestimmte Code-Chunks auswählen, sie einbringen oder sie zur weiteren Überprüfung und Bearbeitung kommentieren.

Fazit

Flash war einer der Gründe, warum ich mit dem Erstellen von Websites begonnen habe. Es war in vielen Bereichen bahnbrechend, und dies führte dazu, dass Menschen erstaunliche Dinge damit schufen. Im Laufe der Jahre hat es das Web enorm vorangebracht. Die offizielle Ankündigung von Adobe, die Unterstützung von Flash einzustellen, gibt jedoch Anlass zur Sorge. Es wäre eine große Schande, wenn Millionen von Websites, die Flash verwenden, verloren gingen. Es gibt eine Petition für Open Source Flash und Shockwave. Ich hoffe, wir verlieren es nicht für immer. Wir hatten einige großartige – und seltsame – Zeiten. Ich überlasse Ihnen dieses klassische Beispiel für das „Seltsame“, auf das ich mich beziehe:

Hier sind die Texte, wenn Sie mitsingen möchten.