Sebenarnya tulisan ini sudah lama sekali saya tulis. Mungkin baru sekarang saya dapat kesempatan untuk mem-publish-nya.

Isu Flash versus HTML5 bukanlah isu baru dalam dunia web. Isu ini sudah muncul sejak 4 atau 5 tahun yang lalu (CMIIW). Permasalahan ini mencuat ketika Apple memutuskan untuk tidak mengizinkan Flash Player terinstall dalam perangkat mobile mereka. Sebagai dampaknya, semua konten berbau swf tidak bisa diakses oleh pengguna iOS.

So what?

Mayoritas video delivery dalam web masih menggunakan Flash Player sebagai video player-nya, termasuk Youtube dan Vimeo. Konsekuensinya, para web developer harus bisa mengakali masalah ini. Para web developer harus membuat fallback bagi para pengguna iOS, sehingga video yang mereka tampilkan dalam situs mereka tetap bisa diakses di iPhone atau iPad.

Biasanya, untuk meng-embed video dalam file HTML Anda, struktur yang digunakan kurang lebih seperti di bawah ini. (Dengan asumsi Anda menggunakan SWFObject)

<!doctype html>
<html>
    <head>
        <title>HTML5 Video Fallback</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            flashvars.src = "link video Anda";
            flashvars.controlBarMode = "floating";

            var params = {};
            params.allowFullScreen = "true";
            params.allowscriptaccess = "always";

            var attributes = {};
            swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", width, height, versiFlashPlayer, "expressInstall.swf", flashvars, params, attributes);
        </script>
    </head>
    <body>
        <div id="videoDiv">
        </div>
    </body>
</html>

Anda membuat sebuah div tag dengan id videoDiv dalam body HTML Anda dan meng-embed swf-nya dengan javascript di bagian head.

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
        <div id="videoDiv">
            <video controls="controls" poster="it is optional, put your thumbnail poster here" width="680" height="382">
                <source src="put your video link here" type="video/mp4"/>
                <source src="put your video link here" type="video/ogg" />
            </video>
        </div>
    </body>
</html>

Di sini Anda menambahkan video tag dalam div videoDiv yang berfungsi sebagai “backup” dalam HTML Anda bila mobile browser client/end-user tidak support (tidak terinstall) Flash Player.

Perlu Anda perhatikan, dalam video tag tersebut terdapat dua source tag. Tag yang pertama memiliki attribute dengan type video/mp4, sedangkan yang kedua adalah video/ogg. Perlu Anda ketahui, bahwa Firefox tidak mendukbng native video dengan format mp4, tapi dia support untuk ogg. Jadi source tag ini semacam fallback untuk tipe browser pada client/end-user.

(Sedikit) Tentang Masa Depan Flash

Posted: December 1, 2011 in Uncategorized
Tags: , ,

Bismillahirrahmaanirrahiim..

Merasa bersalah juga blog ini terbengkalai dalam waktu yang lama.
Sejak post terakhir (Adobe CS5.5 released) sampai post ini ditulis, ada begitu banyak perkembangan yang terjadi terkait platform Flash. Dimulai dari Stage Video, rilis Flash Player 11 (hardware acceleration 3D graphics), Adobe AIR 3.0, Starling framework, sneak preview Flash Professional CS6 (blitting dan generating HTML5 supports), dan masih banyak berita lainnya yang tidak sempat penulis sampaikan dalam blog ini. Namun, dari sekian banyak hal, ada satu yang sangat mencuri perhatian penulis akhir-akhir ini, yaitu masalah Flash Player pada mobile browser yang tidak akan dikembangkan lagi oleh Adobe.
Sejak diumumkannya hal tersebut, begitu banyak isu tak berdasar yang muncul di dalam maupun di luar komunitas platform Flash. Isu yang paling mengganggu, menurut penulis, adalah pemikiran bahwa Flash sudah menemui ajalnya karena HTML5. Oh LORD…
Jelas, isu seperti ini membuat sekian juta Flash/Flex developers (ActionScript programmers) berkeringat dingin, tak terkecuali ActionScript programmers lokal. Bagaimana tidak, platform ini sudah sangat solid di areanya. Ekspansi pada aplikasi desktop (Adobe AIR) dan aplikasi mobile (Adobe AIR for Android, iOS, dan Blackberry Playbook) membuat pekerjaan sebagai Flash/Flex developers adalah hal yang menjanjikan.
Kembali ke permasalahan. Kita harus melihat hal ini secara keseluruhan, dengan kepala dingin, tidak mudah terpengaruh oleh opini-opini yang ada.
Apakah benar Flash sudah mati? Tunggu dulu, Flash yang mana yang dimaksud ‘mati’ di sini? Perlu diluruskan, istilah Flash itu bisa mengacu ke banyak hal.
1. Flash sebagai platform, payung yang menaungi semua teknologi dengan Flash Player dan Adobe AIR sebagai targetnya,
2. Flash IDE (Flash Profressional, Flash Builder, Flash Catalyst),
3. Flash Player sebagai plug-in pada browser.
Yang sedang ramai diperbincangkan saat ini adalah yang Flash yang terakhir, yaitu Flash Player. Lebih tepatnya Flash Player pada mobile browser.
Apakah Flash Player pada mobile browser benar-benar sudah mati? Untuk pengembangannya iya. Tapi tidak untuk Flash Player-nya itu sendiri. Adobe berhenti melakukan pengembangan Flash Player hanya untuk mobile browser, bukan menghapusnya. Flash sebagai plug-in pada desktop browser masih dan akan tetap didukung oleh Adobe (sampai HTML5 benar-benar mampu menggantikan semua hal yang dapat Flash lakukan, dan itu pun entah kapan).
Walau sudah tidak ada dukungan pengembangan, penulis percaya bahwa mobile browser dengan Flash Player masih relevan untuk digunakan 2 sampai 3 tahun ke depan, mengingat masih ada kemampuan yang dimiliki Flash Player saat ini belum bisa ditutupi sepenuhnya oleh HTML5, seperti complex interactive animation, games, dan video delivery.
Dua fakta saat ini.
1. HTML5 is the future, both for mobile and desktop. HTML adalah pondasi dari dunia web. Kita tidak bisa melawan atau mengabaikan hal ini. Titik.
2. Flash tidak mati. Flash akan tetap ada, baik sebagai platform, piranti animasi dan interaktivitas, juga sebagai alat pengembangan aplikasi web, desktop, dan mobile. Sekarang adalah awal masa transisi platform Flash sebagai alat pengembangan aplikasi dengan fokus desktop dan mobile (Adobe AIR). Bagaimana dengan web? Flash masih tetap mumpuni untuk RIA, walau kedepannya Adobe lebih memfokuskan diri pada fitur-fitur dukungan console-quality gaming dan premium HD video, serta kasus-kasus lain dimana HTML5 belum well supported.

Rekomendasi:
The Future of Flash

Adobe CS5.5? Yup! Adobe Creative Suite 5.5 akan dirilis dalam waktu dekat ini. Tanggal 11 April waktu Amerika, atau 12 April waktu Indonesia, Adobe mengumumkan bahwa mereka akan meluncurkan Adobe Creative Suite 5.5 sebagai upgrade dari CS5. Mungkin sebagian besar pengguna produk Adobe bertanya-tanya, mengapa upgrade dari CS5 ke CS5.5, bukan CS5 ke CS6? Padahal usia CS5 itu sendiri sudah menginjak 1 tahun. (Sebagai catatan, Adobe biasanya mengeluarkan bundle creative suite-nya yang terbaru di bulan-bulan ini, yaitu di akhir kuartal pertama.)
Industry landscape is rapidly changing. Menurut analisis prodesigntools.com, itulah alasan mengapa Adobe mengeluarkan strategi market yang ‘tidak biasa’ ini. Masih menurut prodesigntools, berikut adalah beberapa point penguat alasan tersebut.

  • A year ago (ketika CS5 baru keluar), Android was just starting to gain traction, and the iPad was brand new,
  • Emerging web standards like HTML5 and CSS3 were very early in their adoption,
  • Proliferation of devices and their need to rich design and interactivity, content, and apps,
  • Trend towards ‘video and media everywhere,’ any time, any place, in multiple screens,
  • CS5 is evolving to keep ahead of this fast-changing, cross-platforms marketplace,
  • CS5.5 capitalizes on these key trends with major focus on mobile, media, and video,
  • The next major revision of Creative Suite 6 WILL NOT BE OUT for quite some time.

Tidak seluruh produk yang masuk bundle Adobe Creative Suite 5.5 di-update menjadi versi .5. Photoshop (Standard dan Extended), Illustrator, Fireworks, dan Contribute adalah produk-produk yang tidak mengalami upgrade sampai .5. Photoshop hanya mengalami upgrade dari CS5 ke CS5.1. Sedangkan produk lainnya, yang tidak disebutkan di atas mengalami upgrade .5.
Yang menarik di sini adalah terdapat dua produk yang ditambahkan ke dalam bundle CS5.5, yaitu Audition 5.5 (menggantikan Soundbooth CS5) dan Acrobat X Pro. Selain itu, Flash Builder 4.0 Standard diganti menjadi Flash Builder 4.5 Premium.
Fitur-fitur apa saja yang ditawarkan di CS5,5? Silakan baca di sini.

Anda dapat memanfaatkan kekuatan yang dimiliki bahasa C++, serta librariesnya, dalam Platform Flash. Logic-nya Anda tulis dalam bahasa C/C++, kemudian di-compile menjadi file SWF/SWC sehingga dapat dijalankan di Flash Player 10.
Memang bisa? =)
Untuk itulah Adobe Alchemy dibuat. Adobe Alchemy memberikan keleluasaan bagi C/C++ programmer untuk menjalankan kodenya pada ActionScript Virtual Machine (AVM2).

Di sini, saya tidak akan membahas tentang bagaimana cara bekerja dengan Adobe Alchemy. Saya terlalu malas untuk itu =p. Namun, saya berikan beberapa artikel yang sangat bagus terkait Alchemy ini. Berikut adalah links-nya.
1 |   2 |   3 |   4 |   5 |   6 |   7
(Semuanya ditulis oleh Marco Casario –> Flex developer terkenal lah pokonya mah =p)

Lalu, apa yang akan saya perlihatkan di sini?
Uji banding performa.
Kita akan membandingkan performa yang dimiliki bahasa C++ dan ActionScript 3.0 (sebagai native untuk AVM2), dalam menjalankan sebuah program yang tergolong CPU-intensive. Program yang saya maksud di sini adalah (algoritma) BubbleSort untuk array dengan 20.000 entri integer *). Mengapa algortima BubbleSort yang dipilih? Alasannya sederhana, ketidakefisienan yang dimiliki algoritma ini.

Berikut adalah kode-kodenya (ubah dari doc menjadi txt, atau langsung buka aja pake notepad).

BubbleSort.as

BubbleSort.cpp

TransASC.cpp –> Penerjemahan dari ActionScript ke C (vice versa)

main.mxml –> Program dijalankan sebagai aplikasi Flex

Hasil yang diperoleh dari uji performa ini memperlihatkan bahwa dengan menggunakan Adobe Alchemy (C++) kita bisa mendapatkan perbaikan dalam masalah kecepatan eksekusi program sampai 460% (ActionScript 3.0 = 37.046 detik, C++ = 8.124 detik).

Tentunya, hasil ini dapat mendorong para Flash/Flex developer, yang memiliki sedikit pengetahuan tentang bahasa C, untuk melakukan perbaikan terhadap performa aplikasi Flash/Flex yang mereka buat.

Semoga bermanfaat.

– ruly ardiansyah

Dua hari yang lalu, versi terbaru dari FB dan FC dirilis di labs. Just go grab a copy of these.

Note: Ini bukan prototype untuk CS6! Namun, kemungkinan besar adalah patch atau update untuk FB 4 dan FC CS5.

Setelah melakukan semua hal mendasar. Saatnya bagi kita untuk membuat aplikasinya.

– Buka Adobe Flah Builder 4.
– Klik File > New > Flex Project.
– Ketikkan AIRPlayBook sebagai Project name.
– Application type-nya pilih Desktop (runs in Adobe AIR).
– Pada versi Flex SDK, pilih BlackBerry Tablet OS SDK for Adobe AIR.
– Klik Next dua kali.
– Klik Finish.
– Selanjutnya ketikkan kode actionscript berikut.

package
 {
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 import flash.text.TextFormat;
 import qnx.ui.buttons.Button;
 import qnx.ui.buttons.LabelButton;
[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
 public class AIRHelloWorld extends Sprite
 {
 public function AIRHelloWorld()
 {
 var helloButton:LabelButton = new LabelButton();
 helloButton.label = "Hello World!";
 helloButton.x = (stage.stageWidth - helloButton.width)/2;
 helloButton.y = (stage.stageHeight - helloButton.height)/2;
var myFormat:TextFormat = new TextFormat();
 myFormat.color = 0xAA0000;
 myFormat.size = 24;
 myFormat.italic = true;
 myFormat.align = "center";
 var text:TextField = new TextField();
 text.text = "Close";
 text.setTextFormat(myFormat);
var closeButton:Button = new Button();
 closeButton.addChild(text);
 closeButton.addEventListener(MouseEvent.CLICK, closeWindow);
 closeButton.x = (stage.stageWidth - closeButton.width)/2;
 closeButton.y = helloButton.y - helloButton.height;
addChild(helloButton);
 addChild(closeButton);
stage.nativeWindow.visible = true;
 }
private function closeWindow(event:MouseEvent):void
 {
 stage.nativeWindow.close();
 }
 }
 }

– Siapkan sebuah file .png dengan ukuran 90 x 90 px dengan nama blackberry-tablet-icon.png.
– Simpan projet Anda (Ctrl + S).

Untuk menjalankan atau mendebug aplikasi BlackBerry Tablet OS ini, Anda perlu memasukkan beberapa setting.
– Pilih Run > Debug > Other.
– Pilih BlackBerry Tablet AIR Application.
– Klik New.
– Klik Browse dan pilih AIRPlayBook.
– Pada tab Main, di bagian deployment, ketikkan IP address virtual machine Anda sebagai Target.
– Klik Apply.
– Pindah ke tab Commmon. Tandai Debug sebagai Display in favorites menu.
– Klik Apply.
– Klik Debug.

– That’s It. As simple as that. =) Secara otomatis native installernya pun akan terpublish (AIRPlayBook.bar).

Note: It’s actionscript based, not mxml.
RAM di atas 2GB sangat dianjurkan.

Sebelum Anda memulai, ada beberapa file yang mesti Anda miliki.
1. BlackBerry Tablet OS SDK for Adobe AIR. (http://www.blackberry.com/developers/tabletos)
2. Adobe Flash Builder 4.
3. Adobe AIR 2.5 SDK. (http://www.adobe.com/go/getairsdk)

Untuk simulatornya
4. VMware player. (http://www.vmware.com/download/player)
5. BlackBerry PlayBook virtual machine. (http://www.blackberry.com/developers/tabletos)

Di sini, saya mengasumsikan bahwa dalam mesin Anda sudah terinstall Adobe Flash Builder 4 dan Anda sudah meng-extract file zip Adobe AIR 2.5 SDK ke suatu lokasi dalam hardisk komputer Anda.

Sebagai langkah awal, Anda install BlackBerry Tablet OS SDK terlebih dahulu (pada tulisan ini, saya gunakan BlackBerryTabletSDK-Air-Installer-0.9.0-Win.exe). Pada saat proses instalasi, akan muncul pertanyaan terkait “Integration with Adobe Flash Builder”. Anda bebas menjawab Yes atau No, namun di sini saya pilih Yes.

Selanjutnya, kita configure virtual machine untuk BlackBerry Tablet simulator.
– Klik ganda BlackBerry PlayBook virtual machine (BlackBerryPlayBookSimulator-Installer-Win.exe).
– Buka VMware player.


– Pilih Create new virtual machine.
– Pilih opsi Installer disc image file (iso).


– Browse > Pilih lokasi tempat ekstraksi BlackBerryPlayBookSimulator-Installer-Win.exe > Open.
– Klik Next.
– Untuk Guest operating system, pilih Other.


– Begitu pula untuk Version, pilih Other.
– Klik Next.
– Di bagian Virtual machine name, ketikkan saja PlayBook virtual machine (Di sini saya namai Other).


– Selanjutnya klik next dua kali.
– Kemudian Anda akan menjumpai jendela Customize Hardware. Pada bagian Memory, ketikkan 1024 sebagai Memory for this virtual machine. 1024 MB adalah jumlah memori yang direkomendasikan.


– Lalu pada bagian Display. Pastikan pilihan Accelerate 3D Graphics checked.


– Klik OK dan Finish.

Ketika PlayBook virtual machine pertama kali dijalankan, Anda akan menemui teks untuk overwrite /dev/hd0 dengan QNX. Tekan saja huruf Y lalu Enter.

Langkah terakhir, Anda harus mengaktifkan mode development pada virtual machine ini.
– Di bagian kanan atas simulator, terdapat icon gerigi. Klik icon tersebut.
– Klik pilihan Security. Masukkan password (General Settings > Change) dan klik tombol Enable (Development Settings > Enable).


– Bila langkah sebelumnya sudah dilakukan dengan benar, selanjutnya Anda klik tombol dengan icon palu untuk melihat IP address-nya. Simpan alamat IP ini!

Done! Sekarang Anda siap untuk masuk ke fase application development.