Pindah Dari Flash Ke HTML, CSS, Dan JavaScript

Kembali di tahun 2000-an, sudah biasa melihat situs web yang dibangun menggunakan Flash. Dengan melihat sumber situs web, Anda akan sering melihat sangat sedikit HTML dan file SWF yang disematkan. Ini berarti beberapa hal. Pertama, browser tidak mendukung Flash secara asli, jadi Anda harus mengunduh plugin Flash. Browser merasa sulit untuk masuk ke SWF untuk membaca konten. Antara lain, ini memiliki pengaruh yang merugikan pada SEO dan aksesibilitas.

Pada tahun 2007, iPhone dirilis. Itu tidak mendukung Flash. Pada tahun 2015, Google memindahkan semua video YouTube-nya ke HTML5. Pada Juli 2017, Adobe secara resmi mengumumkan akan berhenti bekerja pada Flash pada tahun 2020. Orang-orang menggunakan Flash karena dapat melakukan hal-hal yang tidak dapat dilakukan HTML, CSS, dan JavaScript pada saat itu. Sungguh luar biasa melihat seberapa jauh standar web telah datang (dan apa yang akan datang).

Kita dapat melakukan banyak hal hari ini yang sebelumnya hanya dapat dilakukan dengan Flash. Tidak hanya itu, tetapi kita dapat melakukannya dengan cara yang jauh lebih mudah diakses dan berkinerja. Saya akan membahas beberapa hal inovatif yang dapat dilakukan Flash dan bagaimana kita dapat melakukannya hari ini.

Penafian : Saya suka Flash, dan itu akan selalu memiliki tempat di hati saya, tetapi setidaknya bagi saya, waktu telah berlalu. Untuk berjaga-jaga jika Anda bertanya-tanya: masih ada begitu banyak antarmuka dan mesin yang berjalan di Flash, terutama untuk game, dan artikel ini membahas beberapa masalah yang sangat relevan di sana.

Video

Salah satu hal hebat yang digembar-gemborkan Flash adalah video, yang menawarkan dukungan dasar sejak tahun 2002. Baru pada tahun 2009 tag <video> diperkenalkan di Chrome, Safari, dan Firefox. Selain itu, Internet Explorer (IE) 8 tidak mendukung tag <video> , dan baru pada tahun 2011, ketika IE 9 dirilis, ia mendapat dukungan.

Flash akan menggunakan tag <object> , seperti:

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

Bukan kode terbaik, tetapi berhasil.

Sekarang, kita cukup menulis <video src="filename.mp4" /> , meskipun penting untuk mengetahui format video yang berbeda di seluruh browser, yang paling populer adalah MP4, Ogg, dan WebM. Mengambil langkah lebih jauh, dimungkinkan tidak hanya untuk mendukung tag <video> , tetapi juga menawarkan penggantian dan alternatif yang bermanfaat:

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

Latar Belakang Video

Karena YouTube menggunakan tag <video> dan memiliki API, video latar belakang layar penuh dapat dibuat. Ambil kode tautan video YouTube berikut, misalnya:

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

Dengan menggunakan parameter yang berbeda, Anda dapat mengubah perilaku video.

 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.

Untuk daftar lengkap, periksa IFrame Player API.

Dengan menggunakan CSS, kita dapat mengatur video agar tetap pada posisinya dan mengisi layar.

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

Dan dengan menggunakan kueri media, kita dapat mengatur video agar berada di tengah dan dapat membantu menjaga rasio aspek yang benar.

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

Berikut contoh yang disatukan, dengan Mr. Smashing Magazine sendiri menyajikan ceramah:

Interaksi dan Permainan

Hal lain yang menjadi keunggulan Flash adalah interaksi dan permainan. Situs web populer Miniclip didirikan pada tahun 2001 dan menyelenggarakan berbagai macam permainan Flash. Pada tahun 2008, itu bernilai lebih dari £ 900 juta dan masih berlangsung sampai sekarang.

HANYA REFLEKTOR

JUST A REFLEKTOR adalah video musik interaktif yang menyaingi dan bahkan melampaui kemampuan Flash. Dengan penggunaan berbagai teknologi web, sekarang mungkin untuk berinteraksi dengan video menggunakan perangkat seluler, serta pada satu titik menggunakan webcam Anda sehingga Anda benar-benar muncul di video musik itu sendiri!

Kubus Slam

Ada beberapa eksperimen Chrome berbasis web yang fantastis hari ini, seperti Cube Slam. Cube Slam adalah gim yang menggunakan WebRTC (teknologi web terbuka), memungkinkan Anda melakukan obrolan video dan memainkan gim di dalam peramban. Meskipun Flash banyak digunakan untuk obrolan video, Flash memiliki sejumlah kelemahan dibandingkan dengan WebRTC: Flash bergantung pada plugin Flash, memerlukan server media, dan memiliki berbagai implikasi keamanan dan kinerja yang buruk.

Mesin Game HTML5

Ada sejumlah mesin permainan HTML5 dan JavaScript. Contoh berikut ini menggunakan canvas dan WebGL . WebGL (Web Graphics Library) adalah API bawaan JavaScript yang memungkinkan grafik 2D dan 3D interaktif dalam tag <canvas> .

Seperti yang disebutkan dalam posting Good Boy Digital sendiri mengenai proyek (pembuat contoh):

"Star Wars Arcade benar-benar mendorong batas dari apa yang mungkin dilakukan dengan teknologi HTML5 dan WebGL. Hal ini memungkinkan pembuatan satu build yang bekerja dengan mulus di browser desktop dan seluler tanpa harus mengunduh aplikasi; keuntungan dari ini dapat menawarkan pengalaman 'seperti aplikasi' di semua perangkat sehingga siapa pun dapat menikmatinya secara instan. Tanpa kata sandi, tanpa App Store, cukup tekan URL dan mainkan!"

— Goodboy digital, Studi Kasus Star Wars Arcade

Saya sangat menyukai bagian ini: "Tekan saja URL-nya dan mainkan!" Salah satu kenangan "Wow" saya yang paling awal tentang web adalah memiliki situs web sendiri pada tahun 1999 dan dapat mengetik URL itu ke komputer mana pun yang terhubung ke web dan melihatnya. Tampaknya sangat luar biasa bagi saya bahwa ini benar-benar mungkin (dan terus membuat saya takjub hingga hari ini!).

Dukungan Peramban

Salah satu keuntungan membangun sesuatu—terutama game, karena kerumitan ekstra—dalam Flash yang masih relevan hingga saat ini adalah dukungan browser. Dukungan browser pada umumnya cukup baik akhir-akhir ini, dan Can I Use dapat membantu kita mengetahui dengan cepat tentang status dukungan browser untuk spesifikasi tertentu. Namun, masih ada perbedaan yang dapat menyebabkan masalah. Jadi, jika Anda setuju dengan hanya mendukung browser yang diinstal dengan plugin Flash yang Anda gunakan, maka kemungkinan besar Anda tidak akan mengalami masalah lintas browser.

Tipografi

Flash pada awalnya dirancang sebagai alat animasi. Dengan demikian, ia memiliki berbagai keterbatasan dengan tipografi.

Flash memiliki sistem pixel-grid. Jika tipografi diletakkan di grid pada X:100.3 :100.7 dan, dengan demikian, tidak sejajar dengan grid piksel, itu akan terlihat kabur.

Akibatnya, saya menemukan bahwa font piksel berguna karena mereka duduk di grid dan tetap tajam. Batasan lain di sini adalah jika Anda menggunakan font 8-piksel tetapi menyetelnya ke 10 piksel, itu akan menjadi tidak selaras dengan kisi dan, sekali lagi, menjadi kabur.

Untungnya, hari ini di HTML dan CSS, kami memiliki sejumlah alat untuk membantu kami. Kita dapat mengatur font sebagai unit absolut dalam px (piksel) atau, yang lebih umum akhir-akhir ini, menggunakan ems dan rems untuk membantu desain web yang responsif (saya akan membahas lebih lanjut tentang ini nanti).

Masalah lain dengan Flash dan tipografi adalah font. Jika font tidak tersedia di perangkat, font fallback akan disediakan. Untuk menghindari ini di Flash, Anda bisa menyematkan font di file .swf . Namun, dengan melakukan ini, Anda menambahkan ukuran file dan, dengan demikian, waktu yang dibutuhkan SWF untuk mengunduh dan muncul.

Meskipun demikian, yang dimungkinkan dengan Flash adalah Penggantian Flash Inman Scalable (sIFR). sIFR mengizinkan teks HTML untuk diganti dengan Flash. Sebelum ini, untuk menggunakan font khusus, kami menggunakan gambar. Namun, menggunakan gambar tidak memungkinkan teks yang dapat dipilih, dan itu berarti Anda harus membuat gambar secara manual. Beranjak dari sIFR, pengembang datang dengan Cufon. Cufon menghindari penggunaan Flash dengan menggunakan font versi SVG dan VML. Itu lebih cepat dari sIFR dan tidak memerlukan plugin Flash; tetapi, sekali lagi, dengan teknik ini, tidak mungkin untuk memilih teks.

Hari ini, kami memiliki aturan CSS @font-face dan sejumlah font web standar yang tersedia:

• Google Font
• Typekit
• Tupai Font

Di Chrome dan Firefox (dan, semoga segera, Safari), kami memiliki font-display di CSS. Jika Anda menggunakan font kustom, secara default browser akan menunggu untuk mendapatkan font kustom. Jika tidak bisa mendapatkan font kustom, itu akan menggunakan font cadangan (kecepatannya bervariasi antar browser, tetapi biasanya 3 detik). Ini dikenal sebagai kilasan teks tak terlihat (atau FOIT). Untuk meningkatkan skenario ini, kita dapat menggunakan yang berikut ini:

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

Dengan menggunakan swap , kita akan segera melihat teks menggunakan font cadangan. Saat font khusus dimuat, browser akan menukar cadangan untuk itu. Dengan cara ini, pengguna dapat membaca konten segera setelah tersedia.

Animasi

Salah satu hal yang dilakukan Flash dengan sangat baik adalah tweening. Tweening digunakan untuk menganimasikan elemen. Di Flash, Anda bisa membuat elemen dalam bingkai utama, menduplikasi bingkai utama itu di sepanjang garis waktu, lalu menambahkan tween.

Dengan HTML dan CSS, kita dapat menerapkan animasi yang sama menggunakan @keyframes , transform dan 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; } 

Dengan Alat Pengembang Chrome, kita dapat memeriksa dan menyesuaikan animasi dengan membuka Chrome Dev Tools → Cmd + Shift + P → Animation .

Anda juga dapat men-debug potensi masalah kinerja yang mungkin muncul saat menangani animasi. Di Alat Pengembang Chrome, ada tab "Kinerja". Dengan mengklik ini, lalu ikon lingkaran "Rekam", kita dapat melihat berbagai informasi yang berguna. Teknik ini sangat membantu saya ketika saya membuat Laporan Tahunan Mind 2012-13, khususnya bagian situs web yang memiliki peta dengan lingkaran animasi yang menunjukkan lokasi toko Mind. Awalnya, bagian peta dimuat di awal, yang menyebabkan masalah pengecatan ulang. Dengan menggunakan tab “Kinerja”, saya dapat mengidentifikasi dan memperbarui ini, jadi peta hanya mulai bergerak saat ditampilkan.

Grafik Vektor

Web telah diuntungkan dan masih sangat diuntungkan dari pertimbangan ukuran file yang cermat. Kembali di awal 2000-an, web sebagian besar dilihat di komputer desktop, dengan modem dial-up yang lambat. Sebuah gambar sederhana bisa memakan waktu beberapa detik atau bahkan menit untuk memuat. Untuk membantu hal ini, Flash banyak menggunakan grafik vektor. Menggunakan grafik vektor, jika sesuai, alih-alih gambar JPEG atau GIF, secara signifikan mengurangi ukuran file dan dengan demikian memuat lebih cepat melalui web.

Selama beberapa tahun terakhir, dan terutama berkat Sara Soueidan, scalable vector graphics (SVGs) menjadi semakin tersebar luas di web. SVG adalah markup berbasis XML yang memungkinkan kita membuat grafik vektor untuk web. Ini bekerja sangat baik dengan animasi dan saya senang membangun beberapa situs web yang menggunakan ini: situs web laporan Pikiran (disebutkan sebelumnya) dan Seberapa Bersih Inggris? yang disebutkan Sara di Twitter! Terima kasih Sara!

Desain Web Responsif

Salah satu perangkap utama dalam membangun situs web di Flash saat ini adalah kurangnya kueri media. Saat ini, penggunaan seluler dan tablet telah melampaui penggunaan desktop. Untuk menciptakan pengalaman terbaik, kita harus membuat situs web yang dapat diakses di semua perangkat ini. Pada banyak perangkat, Flash tidak akan memuat sama sekali, dan bahkan jika itu terjadi, kemungkinan besar akan melanggar lebar viewport atau akan diskalakan dan tidak dapat digunakan.

Menggunakan kueri media, kita dapat membuat tata letak yang merespons konten. Berikut ini contohnya:

 <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 digunakan di Flash dan, dengan demikian, memiliki perangkap yang sama dengan file SWF yang disebutkan sebelumnya, karena memerlukan plugin Flash. JavaScript, di sisi lain, sudah tersedia di semua browser modern.

Mari kita lihat contoh pengaturan variabel di keduanya dan perbedaannya:

 var x:Number = 42;

 var x = 42;

Dengan ActionScript, kami mendeklarasikan bahwa variabel adalah angka. Jika variabel diberikan hal lain, itu akan mendapatkan kesalahan. JavaScript diketik secara longgar, yang berarti kita dapat menetapkan variabel sebagai sesuatu yang lain, seperti string:

 var x = '42';

Dalam JavaScript, jika kita ingin memeriksa apakah itu sebuah angka, kita bisa menggunakan typeof(x); , dan ini akan menampilkan "nomor". Pilihan lain adalah membuat function dan menggunakan isNaN untuk mendeteksi apakah itu "bukan angka":

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

Kolaborasi

Dengan HTML, CSS, dan JavaScript (dan banyak bahasa pengkodean lainnya), Git dan GitHub membuat kolaborasi menjadi sangat mudah. Misalnya, jika saya ingin mengedit HTML "Template Penulis" Smashing Magazine, melalui GitHub, saya bisa mengklik tombol "Fork". Ini akan membuat versi file (juga dikenal sebagai repositori) dengan nama saya sendiri. Saya kemudian dapat membuat amandemen apa pun yang saya suka dan mengajukan permintaan tarik. Ini akan memberi pemilik di Majalah Smashing kemampuan untuk meninjau permintaan tarik saya dan menerima atau menolaknya. Setelah diterima, kode akan masuk ke repositori utama.

Ada sejumlah alasan bagus untuk bekerja dengan cara ini: Anda selalu memiliki cadangan pekerjaan Anda; Anda dapat kembali ke versi sebelumnya dari pekerjaan Anda, dan kolaborasi menjadi sangat mudah. Seseorang mungkin sedang mengerjakan satu bagian situs web, atau pada CSS atau JavaScript, dan ketika setiap anggota tim telah selesai, Anda dapat meninjau perubahan dan menariknya sesuai kebutuhan.

Jika kita mencoba hal yang sama dengan Flash, akan jauh lebih sulit untuk menyimpan dan mengirim file .fla setiap kali. Jika banyak orang mengerjakan .fla yang sama, semuanya bisa menjadi sangat membingungkan. Dengan HTML, CSS dan JavaScript, dimungkinkan untuk melakukan “diff” pada kode, yang memungkinkan kita untuk membandingkan dan meninjau kode. Kami bahkan dapat memilih potongan kode tertentu, memasukkannya, atau mengomentarinya untuk ditinjau dan dikerjakan lebih lanjut.

Kesimpulan

Flash adalah salah satu alasan saya mulai membangun situs web. Ini mempelopori di banyak bidang, dan ini menyebabkan orang-orang menciptakan hal-hal luar biasa dengannya. Selama bertahun-tahun, ini sangat mendorong kemajuan web. Pengumuman resmi Adobe untuk menghentikan dukungan terhadap Flash, bagaimanapun, menimbulkan kekhawatiran. Akan sangat disayangkan jika jutaan situs web yang menggunakan Flash hilang. Ada petisi untuk membuka sumber Flash dan Shockwave. Saya harap kita tidak kehilangannya selamanya. Kami memiliki waktu yang hebat — dan aneh —. Saya akan meninggalkan Anda dengan contoh klasik dari "aneh" yang saya rujuk:

Ini liriknya, jika Anda ingin ikut bernyanyi.