tutorial flash

animasi teks efek seperti film the matrix

Membuat Efek The MATRIX

1. Disini anda tidak perlu menggunakan Tool apapun untuk membuat animasi teks efek matriks ini. Cukup membuka panel action, bermain logika dan beberapa baris listing program actionscript. (oia, disini saya pake actionscript 3.0).

Buat dokumen baru di Program Flash

Buka panel properties, ubah warna background stage menjadi hitam.

Buka panel action, ketikan script di bawah ini:

var matrix:Array=new Array(); addEventListener(Event.ENTER_FRAME, onframe); for (var j:int=51; j>=1; j--) {                 //membuat objek teks dan menentukan jenis,ukuran,warna huruf                 var t:TextField=new TextField();                 var format:TextFormat = new TextFormat("Bookshelf Symbol 7",14,"0x00FF33");                 t.defaultTextFormat = format;                 //mengacak posisi huruf                 t.y = Math.random()*300;                 t.x=Math.random()*550;                 addChild(t);                 matrix.push(t); } function onframe(event:Event) {                 for (var i:int=1; i<=50; i++)                 {                                 //mengacak huruf yang tampil                                 var char:String = String.fromCharCode(Math.floor(Math.random() * 26) + 64);                                 matrix[i].text = String(char);                                 //mengatur transparansi dan efek jatuh                                 matrix[i].alpha = i / 50;                                 matrix[i].y +=5;                                 //jika objek keluar dari stage, maka kembali ke atas                                 if(matrix[i].y>400)                                 {                                                 matrix[i].y=0;                                 }                 }}

2. Selesai, jalankan program

Animas The Matrix

Membuat Flash Button.

Langkah 1 : Silahkan buka Adobe Flash anda.
Di sini saya menggunakan Adobe Flash CS5 , bila anda menggunakan versi lama sebetulnya caranya sama saja. Jadi tidak perlu khawatir.

Gambar : Adobe flash cs5

Langkah 2 : Bukalah button yang telah anda buat, atau kita bisa mengambil sample button dari ‘Common Libraries’.
Di sini saya menggunakan sample button yang telah tersedia di ‘Common Libraries’ Adobe Flash CS5. Klik window -> Common Libraries -> Button -> Pilih salah satu button yang menarik untuk anda.
Lihat gambar:

Gambar : Common Libraries
“koleksi button yang terdapat di Common Libraries merupakan koleksi button yang sudah jadi, anda dapat mempreviewnya melalui control -> test movie-> test “

Langkah 3 : Imporlah file sound ke library.
File sound di sini dapat berupa mp3, wav, atau file yang lainnya yang disupport oleh Adobe Flash CS5. Karena sound ini nantinya untuk button, jadi saya sarankan sebaiknya file soundnya pendek saja misalnya 1 detik agar button kita lebih terlihat professional.
Klik file -> import ->Import to library -> pilih sound pendek anda
Lihat gambar :

Gambar : Pilih Sound “pada gambar diatas, saya memilih file sound yang durasinya 1 detik , kemudian click import dan secara otomatis file anda akan terimport ke flash library“
Lihat gambar:

Gambar : Imported

Langkah 4 : Mari kita fokus kembali ke button kita , double click button agar kita masuk ke symbol button tersebut.
Setelah masuk maka kita akan bisa melihat frame ‘up’, frame ‘over’ , frame ‘down’, frame ‘hit’. Nah, di frame ‘down’ lah kita nanti akan menyisipkan sound kita. Sebetulnya anda juga dapat menyisipkan di frame ‘over’  atau frame ‘hit’, tapi supaya lebih terlihat profesional saya sarankan sebaiknya kita sisipkan di frame ‘over’ saja.
Double click button ->lihat timeline->  insert new layer ( di new layer inilah sound kita letakkan )
Lihat gambar:

Gambar : insert newlayer

Langkah 5 : di new layer yang baru saja kita buat, klik kanan frame ‘down’ -> insert keyframe
Key frame ini nanti akan kita sisipi sound.
Lihat gambar:

Gambar : Insert Keyframe

Langkah 6 : Drag lah sound yang telah kita import di library, ke stage ( lembar kerja ) , ingat pastikan posisi anda di frame ‘over’ ( frame yang baru saja kita buat melalui insert keyframe tadi ).
Nah, ini adalah langkah terakhir kita , setelah didrag ke stage ( lembar kerja ), maka button dengan sound bisa kita gunakan, silahkan anda preview melalui control -> test movie -> test.
Cobalah untuk mengclick maka sound yang telah kita sisipkan tadi akan dimainkan.
Lihat gambar:

Gambar : Drag to Stage
Oke, akhirnya selesai juga tutorial tentang button yang kedua ini. Silahkan test movie, click buttonnya, dan dengarkan sound beep nya

dasar pembuatan Games

ontoh Game Flash:

Sambil menyelam minum aer, enaknya belajar sambil nyoba game :)

Berikut keunggulan membuat game dengan Flash :
- Didukung oleh Adobe (Perusahaan Software International)
- Ringan : ukuran file tidak besar
- Browser Compatible : bisa dimainkan di browser secara online
- Mendukung Format Vector : (jadi klo di zoom juga tidak mengalami perpecahan resolusi gambar)
- Dapat dipadukan dengan adobe AIR (tehnologi multi touchscreen)

Program yang seringkali digunakan dalam mendukung Game Flash :
- Sothing SWF Decompiler (berfungsi untuk editing script game yang udah jadi SWF),bisa diunduh disini
- ResHacker atau Resource Hacker (berfungsi mengubah icon dan keterangan file EXE saat game sudah jadi exe)
- Cool edit pro / Adobe soundbooth / Audio edit magic (berfungsi untuk editing suara dan musik)

Nah sekarang Apa Saja yang Perlu dipelajari dalam pembuatan Games?
- Action Script
Action Script digunakan untuk membuat kaitan antara data game dengan objek yang menjadi target, serta interaksi user dengan game. Bahasa pemrograman yang dibuat berdasarkan ECMAScript, yang digunakan dalam pengembangan situs web dan perangkat lunak menggunakan platform Adobe Flash Player. ActionScript juga dipakai pada beberapa aplikasi basis data, seperti Alpha Five. Bahasa ini awalnya dikembangkan oleh Macromedia, tapi kini sudah dimiliki dan dilanjutkan perkembangannya oleh Adobe, yang membeli Macromedia pada tahun 2005. Action Script terbaru saat ini adalah Action Script 3.0. Action Script 3.0 adalah bahasa terbaru dari edisi yang sebelumnya dikenal dengan Action Script 2.0. Action Script 3.0 memiliki beberapa kelebihan dibanding pendahulunya, antara lain fitur yang ditawarkan adalah file pada Action Script 3.0 dapat dibuat terpisah saat runtime.
- Symbol Button
Symbol dengan tipe tombol (button) digunakan sebagai media untuk mengolah dan menetukan data warna
- Symbol Movie Clip
Symbol Movie Clip digunakan sebagai penampungan object yang menjadi target

Ok, segitu dulu pengenalan kita tentang Tutorial belajar dasar pembuatan games di Flash. Terima kasih, Selamat belajar Multimedia Flash
Semoga Bermanfaat

membuat animasi sederhana dengan Permainan keyframe

Ok, mari kita coba mulai saja...

Langkah 1
Buka Program Flash MX kamu

Lalu pilih new... Flash Document

Langkah 2
Menentukan besarnya STAGE (coba pelajari dulu layout Flash agar lebih paham)

Caranya:
1. Klik Size pada Properties
2. Akan Muncul Document Properties
Atur dimensions:
disini saya menggunakan 300 x 200 px
3. Tekan OK

Langkah 3

1. Tekan R pada keyboad lalu gambar kotak di Stage
2. Lakukan pewarnaan dengan menekan V pada keyboard dan klik kotak lalu pilih Fill yang ada tanda nomor 2 di gambar
3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai hexadecimal #000066

Langkah 4
Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun disini saya mengeti huruf "F"


Langkah 5
Lihat Kotak Timeline
Di situ kita akan bermain... ;P
Baiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah
hal ini untuk mengatur ritme dari animasi

OK tekan sebanyak 5 X
Hasilnya:



lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan muncul
jika sudah tambahkan huruf pada stage


Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH

tutorial Flash
OK!!!

Untuk melihat hasilnya... berdoa dulu ya... Tekan CTRL + Enter
Hasilnya:

membuat animasi sederhana menggunakan motion tweening

Langkah pertama, yaitu buat 3 layer. Karna kita di sini hanya menggunakan sedikit layer untuk membuat animasi. Agar proses lebih mudah membuat layer lihat gambar di bawah, di sana ada menu di lingkari dengan warna merah .. Nah klik sebanyak 2 kali maka dengan mengeklik 1 kali kita membuat 1 layer klo 2 otomatis 2 layer


Nah selanjutnya, beri nama masing-masing layer seperti yang sudah dicontohkan gambar dibawah ini. Agar memudahkan proses pembuatannya


Kemudian ubah warna backgoundnya menjadi hitam, biasanya di awal-awal kita membuka flash bacgroundnya berwarne putih klo belum di rubah setingannya


Setelah itu klik layer teks dan buat tulisan seperti yang saya contohkan atau sesuka hati kalian .. Pakek punyaku juga boleh…


Setelah itu klik layer bola , dan buat bentuk bola denga warna putih

Pembuatan objeknya sudah selesai kini kita menginjak ke animasinya, buatlah frame sepanjang 90 -> kemudian klik kanan lalu pilih insert frame


Jika sudah semua hasilnya kurang lebih seperti ini


Setelah itu kita buat animasi motion tweening , sebagai objeknya layer bola


Buatlah keyframe , seperti yang saya contohkan >> kemudian klik kanan>>pilih insert keyframe


Setelah langkah di atas selesai, drag layer bola / drag objek bolanya dengan menekan tombol “ v “ di keyboard >>kemudian klik gambar bolanya


Setelah geser bolanya ( jangan menggeser menggunakan mouse pakai saja tanda panah kanan di keyboard agar posisinya tidak berubah )




Klo sudah selesai hasilnya seperti gambar yang di atas

Lanjut ke langkah berikutnya, kita menuju ke layer bola>>klik kanan di dalam  frame / seperti gambar di bawah ini>>kemudian pilih create motion tween


Setelah selesai klik juga frame ke 90 caranya>>klik kanan frame yg sudah kita buat>>pilih create motion tween


Semua juga sama buat semua layer di rubah menjadi motion tweening

Animasi burung terbang

Langkah pertama yaitu buatlah gambar ilustrasi burung sebanyak 3 kali dengan menggunakan Toolbox Brush Tool

Untuk membuatnya perhatikan gambar dibawah ini

Buatlah ilustrasi gambar burung dengan brush tool bisa juga menggunakan Pen Tool
Sebelum menginjak langkah selanjutnya copy gambar yang sudah dibuat tadi, tujuannya yaitu agar kita tidak usah repot-repot membuat badan burung lagi jadi pada akhirnya  kita tinggal paste gambar setelah itu nanti hanya menambah bentuk sayap yang berbeda saja

buatlah sayap pada bagian atas , pada bagian ini kita sedang membuat gambar 1

Masuk ke pembuatan gambar kedua buatlah bentuk sayap di bawah



Untuk gambar yang terakhir buatlah sayap diatas punggung burung tetapi agak rendah sedikit, jika sudah selesai tinggal pewarnaan pada gambar
burung
langkah selanjutnya yaitu pembuatan animasinya pada gambar 1 letakkan dikeyframe pertama , atur posisi gambar sesuai keinginan anda asal semua gambar harus di 1 posisi yang sama semua

buatlah Keyframe dengan cara klik kanan frame kedua >> pilih Insert Keyframe, setelah itu masukan Gambar 2

buatlah Keyframe dan masukan gambar 3 keposisi yang sudah kita tentukan tadi
 
langkah selanjutnya blok semua Frame yang telah kita buat >> klik kanan dan pilih Copy Frame. Kemudian Paste ke frame selanjutnya

Hasilnya bisa dilihat dengan cara pilih Menu Control >> pilih Play atau Ctrl+Enter