Mengoptimalkan Flash Movie

flash movie

Jika anda menggunakan flash movie pada website anda, maka agar bisa menjangkau semua pengunjung website, maka sebaiknya anda mengatur agar flash movie anda dipublikasikan untuk flash player versi rendah. Anda tidak bisa berasumsi bahwa semua pengunjung website anda sudah memiliki flash player terbaru yang terinstall pada komputer mereka.

Pengunjung website anda pasti ingin dimudahkan dalam mengakses website anda. Mereka biasanya malas jika harus men-download plug-in flash player terbaru untuk dapat melihat flash movie yang ada pada website anda. Jika tidak ada kepentingan yang mendesak mereka tidak akan mendownload player tersebut.

Maka sangat bijaksana bila flash movie yang anda buat dipublikasikan untuk flash player versi lama yang saat ini sudah didukung oleh sebagian besar browser terkenal seperti Internet explorer, Netscape, Firefox, Opera, dll.

Perlu diingat, ada sekian banyak website di internet yang mungkin serupa dengan website anda. Maka jadikanlah website anda User Friendly, agar membuat pengunjung website anda betah berada di website anda, tidak peduli apakah website anda berbasis flash atau html biasa.

Berikut ini cara mempublikasikan flash movie agar berformat flash versi lama (versi rendah):

** Masuk ke File --> Publish Settings atau tekan tombol CTRL+SHIFT+F12 maka dialog publish setting akan muncul. Pilih tab flash dan pada menu drop-down Version, pilih flash player 6 (atau lebih rendah lagi jika ada pilihan itu). Pada menu drop-down versi ActionScript. Pilih ActionScript 1.0.
Tekan OK.

Perhatikan, anda boleh menyimpan dokumen animasi flash dalam format flash versi apapun (tergantung dari versi apa yang terpasang di komputer anda). File .swf lah yang akan dipublikasikan ke dalam versi flash player version seperti sudah ditetapkan pada dialog Publish Settings sebelumnya.

08.44 | 0 komentar | Read More

Gallery Foto Dinamis dengan Flash

Pada teknik ini ditunjukkan bagaimana menggunakan komponen loader untuk menampilkan gallery foto secara dinamis. Hal ini berguna saat anda perlu meng-update image pada flash movie secara terus menerus tanpa harus mengedit file .fla anda.

Caranya adalah:

1. Buat folder baru yang akan digunakan untuk menyimpan semua file project photo gallery anda. (Misalnya folder "photo gallery").

2. Di dalam folder photo gallery anda buat folder baru untuk menyimpan gambar-gambar yang akan anda tampilkan pada gallery foto flash anda. (misal folder "images")

*** Anda harus membedakan huruf-huruf antara huruf kapital dan huruf biasa karena nanti akan berpengaruh pada script (ActionScript bersifat case sensitif).

3. Siapkan beberapa gambar yang akan ditampilkan dengan ukuran 400x300 pixel dan simpan dalam folder "images" yang telah anda buat sebelumnya.

4. Buat document flash baru dengan ukuran 400x300 pixel (tergantung selera anda). Simpan ke dalam folder "photo gallery" yang telah anda buat sebelumnya.

5. Buat komponen loader dengan menekan tombol "Ctrl + F7", lalu drag komponen loader ke stage

6. Dalam keadaan loader masih terpilih lalu edit properti nya menjadi :

• width = 400
• height = 300
• x = 0
• y = 0
• instance name = albumphoto

 

7. Pilih tab parameter kemudian masukkan "contentPath"  untuk file gambar anda yang ada di folder "images" masukkan value = "images/1.jpg".

8. Uji coba animasi flash anda dengan menekan tombol "Ctrl + enter".

9. Buat tombol yang akan mengatur tampilnya gambar anda dengan cara buat kotak lalu convert menjadi symbol button. Lalu ketikkan script berikut pada button/tombol yang telah anda buat :

on (press) {albumphoto.contentPath=("images/1.jpg");
}

10. Buat tombol-tombol berikutnya dengan merubah contentPath menjadi  nama gambar yang ingin ditampilkan.

Silahkan modifikasi sendiri jumlah tombol sesuai kebutuhan anda. Jumlah tombol sama dengan jumlah gambar. Sekarang anda hanya perlu mengganti-ganti gambar yang ada di folder images jika suatu saat ingin mengganti kumpulan foto yang ditampilkan. Nama-nama untuk foto/gambar yang baru disesuaikan dengan nama yang sudah digunakan pada script untuk tombol, agar mengefisienkan pekerjaan anda.

04.16 | 0 komentar | Read More

Membuat Preloader Animasi Flash

Animasi Flash

Saat ini sudah banyak desain website yang menggunakan animasi flash. Pada website-website tertentu, animasi flash yang digunakan berukuran cukup besar. Agar dapat berjalan dengan baik, animasi flash tersebut harus di-download terlebih dahulu secara lengkap.

Bagi pengguna yang menggunakan koneksi dial-up, proses download file dengan ukuran relatif besar tentu membutuhkan waktu yang relatif lama. Jika animasi flash yang di-download tidak segera diputar karena proses download yang lama, maka pengunjung website anda bisa jenuh dan akan segera meninggalkan website anda. Tentu anda tidak menginginkan hal tersebut menimpa website anda.

Nah, agar pengunjung website anda tidak jenuh, sebaiknya dibuatkan animasi flash ringan yang menunjukkan proses download animasi flash. Animasi flash yang menunjukkan proses download tersebut disebut dengan preloader. Syarat sebuah preloader haruslah berupa animasi flash yang sederhana agar ukurannya kecil sehingga preloader dapat di-download dengan cepat. Dengan demikian preloader akan segera muncul untuk menunjukkan proses download animasi flash.

Pembuatan preloader dilakukan dengan memanfaatkan metode :

• getBytesTotal() : Akan memberikan hasil berupa total animasi flash yang di download

• getBytesLoaded() : Akan memberikan hasil berupa ukuran file animasi flash yang telah ter-download.

Tambahkan sebuah keyframe baru di awal animasi flash tersebut. Pada frame awal tersebut tambahkan dua buah movie clip seperti gambar di bawah.

animasi flash

Movie clip berbentuk seperti kipas diberi nama simbol kipas dan nama instance kipas_mc sehingga nampak berputar.

Movie clip berbentuk balok diberi nama simbol balok dan nama instance balok_mc. Letakkan titik registrasi di kiri tengah. Pisahkan isi balok dengan bingkainya (bingkai balok tidak ikut di konversi menjadi simbol).

Anda dapat menambahkan animasi tween pada balok_mc agar nampak seperti berkedip.

Pada frame pertama tambahkan script berikut:

stop();

Pada movie clip balok_mc tambahkan script berikut:

onClipEvent(enterFrame) {

var persen=

(_root.getBytesLoaded()/_root.getBytesTotal())*100;

this._xscale=persen;

if (persen >=100){

_root.gotoAndStop(2);

}

}

Script tersebut digunakan untuk menentukan persentase ukuran file animasi flash yang telah di download dengan ukuran file total. Nilai persentase kemudian digunakan untuk menentukan skala panjang movie clip balok_mc. Setelah persentase mencapai 100, animasi flash akan menuju ke frame kedua. Di frame kedua inilah terletak animasi flash utama anda.

Sekarang lakukan test movie dengan menekan tombol Ctrl + Enter. karena animasi flash yang di load terletak pada komputer yang sama, preloader tidak akan terlihat. Wajar karena kecepatan baca harddisk sangat tinggi, jadi proses download animasi flash tidak akan terlihat. Animasi preloader dapat dilihat dengan melakukan simulasi download.

Untuk melakukan simulasi download, setelah melakukan test movie aktifkan menu View > Download Setting dan pilihlah kecepatan download yang diinginkan. Makin kecil kecepatan download makin lama animasi preloader terlihat. Anda dapat memilih kecepatan 56K.

animasi flash

Kemudian aktifkan menu View > Bandwidth Profiler untuk melihat profile bandwidt selama simulasi download  dan terakhir aktifkan menu View > Simulate Download untuk melakukan simulasi download. Sekarang animasi preloader akan terlihat.

animasi flash

Animasi Flash untuk Preloader

13.25 | 0 komentar | Read More

Animasi Flash Membuat Masking dengan ActionScript

Berikut ini adalah animasi flash dengan membuat masking pada gambar. Teknik masking biasanya dilakukan dengan cara klik kanan pada sebuah layer dan pada dropdown menu yang muncul dipilih Mask.

Teknik masking juga dapat dilakukan dengan menggunakan ActionScript. Caranya yaitu dengan menggunakan metode setMask() yang dimiliki oleh setiap movie clip. Sintaks penggunaan metode tersebut adalah:

movieclip.setMask(namaMask)

movieclip adalah movie clip yang akan diberi masking, sedangkan namaMask adalah movie clip yang akan dijadikan masking.

Baiklah langsung saja ke TKP :

Pertama, tambahkan sebuah gambar pada stage. Aturlah agar ukuran gambar sama dengan ukuran stage dan terletak tepat di tengah. Konversikan gambar tersebut menjadi sebuah movie clip dengan menekan tombol F8 pada keyboard, beri nama simbol dengan "gambar" dan nama instance dengan "gambar_mc".

Nama Simbol

Nama Instance

Setelah itu tambahkan layer baru dan gambarlah sebuah kurva, disini saya gunakan lingkaran. Konversikan gambar tersebut  menjadi sebuah movie clip seperti cara di atas, dengan nama simbol "lingkaran" dan nama instance "lingkaran_mc". Jangan lupa untuk menempatkan titik registrasi tepat di tengah.

Pada frame pertama tambahkan script berikut:

_root["lingkaran_mc"].startDrag(true);

_root["gambar_mc"].setMask(_root["lingkaran_mc"]);

Sebagai alternatif, script juga bisa ditambahkan pada movie clip "gambar_mc" dengan isi script sebagai berikut:

onClipEvent(load){

       _root["lingkaran_mc"].startDrag(true);

       this.setMask(_root["lingkaran_mc"]);

}

Lakukan test movie dan perhatikan hasilnya. Hasil yang diberikan kedua script tersebut sama.

File .swf dapat anda download di sini

Dapat anda lihat script di atas, masking dikombinasikan dengan dragging. Dragging adalah gerakan objek animasi yang mengikuti gerakan pointer mouse. Dragging dilakukan dengan memanfaatkan metode startDrag() yang dimiliki oleh Movie clip. Sintaksnya adalah :

movieclip.startDrag([lock[kiri,atas,kanan,bawah]])

Argumen lock berupa nilai boolean yang digunakan untuk menentukan letak movie clip relatif terhadap pointer mouse. Jika bernilai true maka letak movie clip akan berada di tengah posisi pointer mouse, Jika false maka posisi movie clip akan "terkunci" pada posisi saat mouse di klik di dalam movie.

Argumen kiri, atas, kanan, bawah digunakan untuk menentukan batas area yang dapat dilalui movie clip selama di drag.

03.14 | 0 komentar | Read More

Membuat CD Autorun pada flash Movie

Seperti halnya cd software pada umumnya yang bisa secara otomatis run sewaktu dimasukkan ke CD/DVD ROM, anda juga bisa membuat movie animasi flash menjadi autorun.


Jika anda ingin menampilkan animasi flash pada komputer namun anda tidak yakin apakah flash player terinstall pada komputer tersebut, maka publikasikanlah file project flash sebagai file .EXE. Teknik sangat berguna, khususnya untuk komputer-komputer di sekolah atau di Universitas yang kadang tidak memiliki flash player. File .EXE menjalankan proses animasi yang sama dengan file .SWF, hanya saja ukuran file .EXE yang lebih besar daripada file .SWF.


Setelah anda menyimpan movie flash anda, masuk ke menu File > Publish setting.

Beri tanda centang pada Windows Projector (exe) dan buang tanda centang pada HTML dan flash. Klik Publish.

Maka movie flash anda sekarang dipublikasikan sebagai file .EXE

Setelah membuat file .EXE, anda perlu membuat satu file kecil baru sebagai trigger (pemicu) autorun pada CD. Gunakan notepad untuk membuat file tersebut.

Tulis perintah berikut pada notepad :

[autorun]

open=fileFlash.exe

fileFlash.exe merupakan nama file yang telah anda buat sebelumnya. Jangan ada spasi pada file tersebut.

Setelah itu, simpanlah dengan nama autorun.ini.

Pada saat menyimpan, pastikan save as type adalah All Files. Hal ini dimaksudkan agar anda bisa memberi extension .INI di belakang nama file tersebut. Sekarang anda memiliki 2 file, yaitu file flash.exe dan file autorun.ini. Bakar kedua file tersebut, pastikan kedua file diletakkan pada root direktori CD (bukan di dalam folder).

Selamat mencoba

Membuat CD Autorun pada Flash Movie

04.56 | 0 komentar | Read More

Membuat Hyperlink pada Flash

Berikut ini dalah cara membuat hyperlink dengan memanfaatkan actionscript pada flash. Pilih tombol/ button yang akan dijadikan hyperlink kemudian masuk ke dalam action panel untuk memberikan code script pada tombol/ button tersebut.

Pada panel actionscript masukkan code berikut:

on (release) { getURL("http://www.prodesign.web.id", "_blank"); }

Sewaktu menuliskan kata pertama untuk on dan diikuti tanda kurung buka, maka flash akan menampilkan pop-up menu yang menunjukkan beragam event untuk statement on.

Menu-menu pada statement on

Pilihlah release. Selanjutnya akan dijelaskan arti dari bagian-bagian kode di atas.
Baris pertama :on(release){ :
artinya sewaktu user mengklik tombol dengan mouse dan melepaskannya, maka akan dieksekusi kode yang terdapat diantara kurung kurawal.
Baris kedua: getURL("http://www.prodesign.web.id", "_blank");
maksudnya : Penggunaan  getURL yang memungkinkan penyisipan hyperlink yang diikuti dua parameter, yaitu URL yang menjadi tujuan hyperlink dan dimana link itu akan terbuka (_blank : akan dibuka pada window baru dari browser).


Tekan CTRL+ENTER untuk menguji hasil pekerjaan anda. Klik tombol tersebut dan anda akan dibawa menuju ke URLnya http://www.prodesign.web.id.
selesai sudah membuat hyperlink pada flash.


Selamat mencoba dan berhasil.

05.16 | 0 komentar | Read More

Cara menampilkan animasi flash di blog /website

Bila anda menggunakan engine blog gratisan seperti Blogger atau wordpress biasanya anda hanya diijinkan untuk mengupload file dengan format jpg, bmp, gif, atau png dengan maximum ukuran file 8 mb saja. Sedangkan file animasi  seperti swf, avi, mov tidak diijinkan untuk di upload. Untuk mengakalinya anda bisa mengupload file animasi anda ke tempat lain seperti YouTube.com (tidak mendukung format flash/swf) atau ke salah satu penyedia space swf di bawah ini:
http://www.4shared.com, 
http://www.swfcabin.com, 
http://www.swfupload.org, 
http://megaswf.com.
Selanjutnya anda tinggal mengcopy embed code nya saja ke dalam blog atau website kita.

Berikut ini beberapa metode embedding animasi flash pada blog atau website kita. Yaitu dengan memasukkan kode berikut ini ke blog atau website anda.

Kode pertama:

<object width=”400” height=”300”>

<param name=”movie” value="URL FILE FLASH.SWF”></param>

<param name=”wmode” value=”transparent”></param>

<embed src=”URL FILE FLASH.SWF” type=”application/x-shockwafe-flash” wmode=”transparent” width=”400” height=”300”></embed>

</object>

Ganti "URL FILE FLASH.SWF” dengan kode yang anda dapat dari 4shared.com(atau yang lain).

Selesai cara yang pertama.

Atau anda bisa menggunakan metode yang kedua dengan mengkopy kode berikut:

<object type="application/x-shockwave-flash" data="images/flash.swf" width="525" height="320">

<param name="movie" value="images/flash.swf" />

<img src="images/noflash.jpg" width="525" height="320" alt="banner" />

</object>

Ganti nilai - nilai :

• data="images/flash.swf
• value="images/flash.swf"
• img src="images/noflash.jpg"
• beserta ukuran width dan height

Script diatas mampu menggantikan flash dengan sebuah image jika browser terdeteksi tidak support flash, yaitu dengan menampilkan gambar noflash.jpg 

Selesai cara yang kedua.

Anda bisa mencoba salah satu dari dua metode di atas, semoga bermanfaat…

08.39 | 2 komentar | Read More

Konversi Power point ke flash

Power point merupakan aplikasi yang handal dan paling merakyat dalam membuat presentasi  di kalangan akademisi di tanah air kita ini. Sedang Flash merupakan aplikasi yang sedang populer dan lebih fleksibel untuk di kustomisasi. Jadi saya pikir tidak ada salahnya jika saya menulis tentang bagaimana caranya mengkonversi file presentasi power point ke dalam file berformat flash.






Baiklah langsung saja ke TKP:


1. Pertama siapkan file Power point yang akan kita konversi. Pastikan tidak ada gradien atau animasi kompleks pada presentasi tersebut, karena akan diinterpretasikan kurang sesuai pada flash. Juga pastikan tidak ada obyek yang berada di luar areaslide, untuk menjaga agar batas-batas slide tetap pada tempatnya sewaktu diimpor ke flash. Simpan copy an  dari presentasi tanpa menggunakan gambar latar atau gunakan warna latar yang kontras agar mudah melihat konten dari masing-masing slide. Gambar background bisa diimport ke flash setelah tahap-tahap akhir.


2.Select File > Save As dari power point dan disimpan sebagai Windows Metafile (*.wmf). Hal ini akan menyimpan keseluruhan presentasi sebagai file-file sekuensial dan wmf juga menyimpan semua teks yang ada di dalam presentasi tersebut.


3.Buat dokumen flash baru dengan ukuran stage 720 x 540 pixel. Ganti warna background dengan hitam. Select File > Import > Import to Stage… lalu import lah file .wmf presentasi anda. Sewaktu ditanya apakah akan mengimport semua image pada sekuensial jawablah Yes. Hal ini akan menempatkan masing-masing slide dari presentasi anda ke dalam sekuensial frame.


4.Buatlah layer baru di bawah layer slide dan import image yang akan anda gunakan sebagai background. Anda bisa menggunakan dua gambar, satu untuk slide awal/judul dan satu lagi untuk background pada konten slide.


5.Masuk ke setiap frame movie tersebut dan menghapus shape background dari layer slide anda. Setelah selesai anda akan bisa membaca konten dari masing-masing slide dengan background yang telah anda import tadi.


6.Tambah sebuah frame di bagian akhir movie. Tempatkan teks statis pada frame tersebut yang berisi tulisan penutup, misalnya “Akhir Presentasi, silahkan klik untuk keluar”.


7.Buat layer baru yang berisi action script. Ada beberapa statement yang perlu anda masukkan. Pertama, jika anda ingin agar movie dimainkan (play) secara full screen, maka tambahkan fscommand.


Fscommand(“fullscreen”,”true”)-;


Untuk memastikan apakah stage otomatis menyesuaikan ukurannya dengan layar, maka tetapkan nilai scaleMode.


Stage.scaleMode = “exactFit”;


Jika anda tidak ingin agar movie terus dimainkan tanpa ada pemberhentian di setiap slide, maka sisipkan fungsi  stop.


stop();


Anda perlu juga menyisipkan beberapa fungsi yang sering digunakan untuk navigasi presentasi.


Function gotoNextSlide() : Void {
If (_currentframe  <  _totalframes) {
  gotoAndStop(_currentframe + 1);
} else {
Quit();
}
}
Function gotoPreviousSlide() : Void {
gotoAndStop(_currentframe – 1);
}
Function gotoHome() : void {
gotoAndStop(1);
}
Function gotoEnd() : Void {
If (_currentframe < _totalframes) {
gotoAndStop(_totalframes) – 1 ) ;
}


}


Function quit() : Void {
Fscommand (“quit”);
}


Berikutnya kendalikan semua event keyboard dan mouse agar user bias bernavigasi  ke semua slide. Anda bias melakukan dengan cara membuat listener  object baru.


Var myListener : Object = new Object();
myListener.onKeyDown = myOnKeyDown;
myListener.onKeyUp=myOnKeyUp;
Key.addListener (myListener);
myListener.onMouseUp = myOnMouseUp;
Mouse.addListener (myListener) ;


Function myOnKeyDown() : Void {
If (Key.isDown (Key.DOWN) || Key.isDown (Key.PGDN)) {
gotoNextSlide ();
} else if (Key.isDown (Key.UP) ||
Key.isDown (Key.PGUP)) {
gotoPreviousSlide ();
} else if (Key.isDown (Key.END)) {
gotoEnd();
} else if (Key.isDown (Key.HOME)) {
gotoHome();
}
}


Function myOnKeyUp () : Void {
If (Key.getCode () == 27 {
Quit ();
}
}


Function myOnMouseUp () : Void {
gotoNextSlide();
}


Selesai sudah proses konversinya.  Test dengan menekan tombol Ctrl +enter. Bila  masih terlalu ribet menggunakan metode di atas anda bisa menggunakan aplikasi converter powerpoint (PPT) to flash(SWF) antara lain SameShow PPT to SWF Converter, Melody PPT, Arbicate dan lain-lain, bisa dicari sendiri di google.


Semoga bermanfaat

06.25 | 2 komentar | Read More

Membuat Konten dinamis pada Flash

Kali ini saya akan sharing sedikit tentang bagaimana menampilkan content yang berasal dari file text external secara dinamis ke dalam flash movie. Saya berharap setelah membaca dan mempraktikkannya, anda bisa bereksperimen sendiri untuk menciptakan movie yang lebih kompleks, setelah memahami konsep dasar ini.
Baiklah, dalam membuat flash movie ini kita akan membutuhkan tiga buah file yang berada dalam satu folder, yaitu :
1. file.fla
2. file.swf sebagai output
3. file external content.txt sebagai content
Nama file.fla bebas, tidak terikat dengan proses load
Nama file.txt harus disamakan dengan proses load, disini akan saya beri nama "content".


1. PERSIAPKAN FILE TEKS
Buatlah sebuah file.txt, bisa dengan menggunakan notepad atau MS word, lalu di awal sekali sebelum teks pertama, harus kita tambah dengan identifier untuk variable yang akan kita pakai pada flash movie. Disini saya menggunakan "variableKu" sebagai identifier.(lihat gambar)

2. PERSIAPKAN FILE FLA
Buat dokumen flash baru. Pilih Text Tool (A). Pada properties Inspector (Window > Properties > Properties) ganti jenis teks dari "Static Text" menjadi "Dinamyc Text". Opsi lebih banyak akan tampil setelah mengaktifkan opsi Dinamic Text. Ganti Line Type menjadi "multiline", maka tampilannya akan seperti gambar di bawah ini.

Biarkan fields text tetap terpilih, lalu masuk lagi ke Properties Inspector dan berilah nama "content" pada instance name.

Sekarang field text sudah siap, kemudian tambahkan scroll bar dengan menggunakan komponen yang telah tersedia di dalam library flash. Caranya bukalah panel Component melalui Window > Component lalu carilah component UIScroll Bar pada kategori User Interface. Tarik (drag) komponen ini ke atas field text pada stage dan harus diposisikan vertikal di sebelah kanan field text. Komponen ini bisa langsung digunakan tanpa perlu melakukan setting apapun terhadap komponen ini.

3. BUAT ACTION SCRIPT
Semua script akan diterapkan pada timeline. Pilih field teks menggunakan Selection Tool, lalu klik kanan frame pada timeline. Kemudian klik "Actions" pada pop up menu. Lalu ketik script di bawah ini untuk me-load teks external ke dalam flash movie yang anda buat.




dataKu=new LoadVars();
dataKu.onLoad = function(){
content.text=this.variableKu;
};
dataKu.load("content.txt");

Setelah selesai, coba hasil kerja anda dengan menekan tombol (Ctrl + Enter).

04.45 | 0 komentar | Read More

Apakah era Flash Telah Mati?

Baru-baru ini saya baca bawa google tidak menghawatirkan tentang tidak disertakannya dukungan terhadap flash pada keluaran terbaru OS Android Mobile yang berjuluk  "Ice Cream Sandwich". Padahal diketahui bahwa dukungan terhadap flash menjadi kunci kemenangan atas saingan terberatnya  iphone besutan apple. Tetapi setelah Adobe secara resmi mematikan dukungan flash terhadap aplikasi mobile seperti dilansir pada pengumuman dari  ZDNET. Yang menjadi pertanyaan saya adalah, Apakah yang bakal digunakan untuk membuat konten-konten mobile yang penuh dengan animasi? Mungkin itu pula yang menjadi pertanyaan sebagian orang bila mendengar kabar ini.

Selama ini yang saya tahu bahwa flash merupakan aplikasi animasi yang luar biasa, karena  saya sendiri termasuk salah satu pemakai aplikasi ini. Setiap iklan-iklan beranimasi pada website, game-game ringan, bahkan presentasi juga menggunakan flash. Reaksi dari keputusan adobe untuk menghentikan pengembangan aplikasi flash untuk perangkat mobile dengan beralih ke pemanfaatan fungsi-fungsi dari HTML 5 bisa bermacam-macam. Karena banyak yang belum siap untuk sepenuhnya beralih dari flash, kalau bagi google sendiri hal ini bukan lah menjadi masalah yang perlu dirisaukan karena mereka memiliki  SDM yang telah siap, tapi bagaimana dengan pengembang-pengembang kecil  yang belum memiliki resource yang memadahi? Tidak sedikit Jumlah pengembang maupun agen-agen yang telah mempekerjakan dan menggunakan jagoan-jagoan flash. Komunitas flash yang sudah berkembang, telah banyak pula resource-resource pendukung pembuatan animasi flash dengan cepat.

Dengan menggunakan teknologi HTML 5 memang cukup menjanjikan dan terbukti menambah efisiensi untuk menampilkan animasi. Namun saya masih menyangsikan kalau penggunaan HTML 5 akan langsung menggeser keberadaan flash, pertama-tama dari sisi sumber daya yang belum siap kemudian  investasi yang dikeluarkan selama ini untuk teknologi flash tidak dapat dengan mudah langsung membuat mereka pindah ke teknologi baru yang belum diketahui hasilnya.

Saya tidak menyangkal perubahan, dan kita semua telah menyaksikan bagaimana WEB telah berevolusi dari situs statis, hingga yang dinamis, penggunaan versi Flash, dan sekarang sampai pada versi mobile. Perusahaan akan selalu berinvestasi dalam cara-cara inovatif untuk mempromosikan produk dan layanan mereka. Karena konsumen saat ini lebih banyak mengunakan layanan-layanan mobile, maka perusahaan akan mengembangkan situs yang bekerja terbaik di mobile dan menghindari menggunakan Flash,  jika hal tersebut dipakai dasar bagi Adobe untuk memonopoli pasar Web.

Namun, ini tidak berarti Flash Mati!. Satu miliar dolar industri game dibuat dengan Flash, jutaan kursus online interaktif dan materi pelatihan yang dibuat dengan Flash dan masih dapat diakses pada laptop dan komputer, seperti yang  dikonfirmasi oleh Adobe. Apakah ini berarti bahwa kita hanya perlu untuk terus menjadi inovatif. Kita perlu untuk terus mengembangkan situs yang memanfaatkan teknologi terbaik…

19.21 | 0 komentar | Read More

Membuat efek flash light pada tulisan

Disini saya akan menjelaskan bagaimana membuat efek cahaya yang berjalan pada tulisan, efek ini bisa juga dikembangkan agar bisa dipakai pada gambar ataupun banner-banner yang menarik, coba dikembangkan sendiri, semoga bermanfaat bagi teman-teman sesama flasher. Baiklah saya mulai saja tutorial ini.


  1. Buatlah dokumen flash baru, kemudian beri warna background hitam. Caranya dengan mengubah property warna pada property inspector .

Gambar 1

Gambar 2

Gambar 3

Setelah itu gunakan Text Tool (A ), lalu tulis pada stage “BUM1.INFO” dengan property pada text adalah, jenis font : impact, ukuran font : 68 dan warna huruf abu-abu (#CCCCCC). Untuk selanjutnya kamu bisa bereksperimen sendiri untuk bermain-main property yang kamu suka.

Gambar 4

2.  Buat layer baru melalui ikon Insert Layer yang ada di sebelah kiri bawah Timeline seperti  ditunjukkan pada gambar.

Gambar 5

Setelah itu akan terbentuk layer baru yang bernama Layer 2. Ganti nama layer 1 menjadi “Text” dan layer 2 menjadi “efek” dengan cara klik kanan pada nama layer dan pilih properties pada pop up window. Bisa juga dilakukan dengan double klik pada nama layer.

Gambar 6

Klik layer efek untuk mulai membuat efek flash light. Gunakan Rectangle tool untuk membuat persegi empat dan pastikan persegi empat ini dua kali lebih panjang daripada teksnya, jika tidak efek tidak akan terlihat bagus. Selain itu pastikan persegi panjang ini lebih tinggi daripada tinggi teks. Sewaktu anda menggambar persegi panjang tersebut, akan terlihat overlapping namun tidak apa-apa karena memang dimaksudkan seperti itu.

Gambar 7

Lalu pilih persegi panjang tersebut denganmengklik Selection tool (), kemudian klik ikon fill color dan pilih Selection tool pada gambar dilingkari.

Gambar 8

Berikut adalah bagian triknya. Pilihlah Linier dari drop down list pada sisi kanan dari area kerja di bagian Color Mixer. Geser-geserlah tiga buah slider warna dengan aturan kombinasi warna sebagai berikut: abu-abu – putih – abu-abu, berturut-turut untuk slider satu, slider dua, dan slider tiga. Jika hanya terdapat dua slider , kliklah area diantara slider satu dengan slider lainnya untuk menghasilkan slider baru. Setelah selesai pengaturannya maka akan terlihat seperti di bawah ini.

Gambar 9

Gambar 10

Kemudian kamu perlu memilih Gradient Transform Tool. Tool ini berada di sisi area kerja. Gerakkan mouse ke atasikon-ikon tool tersebut sampai anda menemukannya.

Gambar 11

Kemudian klik bagian putih pada desain linier dan putarlah melalui handlenya. Arahkan handle tersebut sampai terlihat seperti gambar berikut.

3.  Tukar posisi layer Efek dan Teks dengan susunan layer teks berada di atas layer efek dengan cara menarik layer efek (pada timeline) ke bawah sejajar dengan layer teks. Lalu klik kanan layer teks dan pilih mask seperti ditunjukkan pada gambar 10 A

Gmbar 12

Sekarang teks akan terlihat memiliki efek miring di belakangnya dan kelihatan cukup serasi. Tahap berikutnya adalah memberi sentuhan animasi padanya.

4. Pada tahap ini, pertama-tama kamu perlu meng unlock kedua layer dengan mengklik padlock kecil pada timeline, kemudian klik kanan frame pertama pada layer efek. Pilih "Create Motion Tween" dari menu.

Gambar 13

Gambar 14

Kemudian pindahkan ke frame 30 dengan masih tetap pada layer efek, klik kanan dan pilih insert key frame. Sebenarnya kamu kamu juga bisa melakukannya pada frame 15. Namun pada frame 30 akan tercapai kecepatan animasi yang stabil. Kamu bisa mencoba sendiri berimprofisasi dengan beragam angka frame.

Setelah menyisipkan keyframe pada frame 30, pilihlah frame 30 pada layer Teks yang ada di atas layer efek, Klik kanan dan pilih insert frame. Jika anda tidak melakukan ini pada layer teks, maka teks akan menghilang.

5. Berikut adalah bagian lanjut dari animasinya. Animasi adalah bembuat agar tulisan teks terlihat bercahaya berjalan dari satu sisi ke sisi lain. Klik frame 1 (yang merupakan keyframe) pada layer efek. Pilihlah selection tool lalu tariklah persegi empatnya sehingga bagian putihnya berada di sebelah kiri teks. Perhatikan gambar berikut:

Pastikan agar bagian belakang persegi empat (sisi kanannya) tidak melewati sisi kanan teks agar efeknya terlihat jelas dan bagus. Setelah itu klik keyframe ke dua (masih pada layer efek) yaitu pada frame 30 dantariklah persegi empat sehingga ia berada di sisi lain dari teks.Perhatikan gambar:

Kemudian kamu perlu mengunci kembali kedua layer dengan cara mengklik titik hitam tempat padlock. Hal ini akan membuat efek mask kelihatan.Untuk melihat hasilnya tekan tombol Ctrl + Enter.


Hasilnya bisa kamu download di sini.

03.43 | 3 komentar | Read More