Cara membuat animasi dengan motion tweening menggunakan flash

Posted by: asianwoman on: Januari 13, 2009

• In: Tutorial
• Comment!

Sebenernya aku nggak terlalu ngerti tentang flash. tapi, aku cuma ngerti dikit aja. kalo gitu langsung aja ya. Cara membuat animasi flash dengan motion tweening

1. Kamu harus buat gambar. Contoh yang paling mudah adalah buat gambar lingkaran dengan menggunakan oval tool

2. Jaring gambar itu dengan menggunakan selection tool (panah hitam pojok kiri)

3. Tekan F8 sehingga muncul kotak yang bertuliskan Convert To Symbol

4. Klik pada bulatan movie clip. Registration digunakan untuk memindahkan poros atau pusat gambar. Setelah selesai klik OK

5. Klik pada frame yang diinginkan.Misal pada frame ke 20

6. Klik kanan pada frame 20 tersebut, kemudian klik insert key frame atau tekan F6

7. Pindahkan gambar sesuai keinginan, misal ke kanan, kiri atau bawah.

Jika ingin gambar berpindah lurus maka, tekan shift saat memindahkan gambar.

8. Klik frame yang ada di tengah-tengah antara frame 1 dan frame 20

9. Klik kanan pada frame tersebut dan klik create motion tweening.

Sehingga muncul tanda panah antara frame 1 dan frame 20. Atau pada Properties di bawah stage pilih Tween Motion.

10. Tekan enter atau ctrl+ enter untuk menjalankan animasi tersebut. Selamat mencoba!!!!!!

Membuat Dynamic Text Scroll Dengan Flash 8

Dynamic text scroll biasanya dipakai untuk website yang dibuat dengan Flash atau atau bahasa kerennya web flash template, selain itu juga dynamic text scroll ini sering juga dipakai untuk menampilkan portfolio pada sebuah CV (Curriculum Vitae), layout presentasi dll.

Nah.. pada kesempatan kali ini saya akan mencoba berbagi bagaimana cara membuat dynamic text scroll dengan flash 8 tetapi khusus Dynamic text scroll untuk portfolio/CV dan presentasi. Seperti biasa untuk mempraktekannya silahkan anda download mentahannya disini. Sudah?, ok kalau sudah sekarang kita mulai saja yah..

Langkah pertama buka file .fla yang sudah di download tadi.

Setelah terbuka, kemudian klik frame 2 pada layer Actions seperti terlihat pada gambar.

Sudah?, kalau sudah sekarang tekan F9 pada keyboard kemudian akan muncul jendela Action- Frame. Ok sekarang saya akan sedikit menjelaskan script yang ada pada jendela Action-Frame. Seperti terlihat pada gambar, bahwa untuk script ini:

myXML.load("dynamicTextScroll.xml")

Script yang berwana merah adalah nama file .xml dimana file ini berisikan text-text yang akan di load ke dalam Dynamic text scroll tadi jadi jika anda ingin mengubahnya pastikan script ini dan nama file .xml anda sudah sama (sebaiknya untuk script ini jangan diubah).

OK, sekarang kita akan meng-edit file .xml.
Buka file .xml tadi menggunakan notpad. sebagai contoh, maka codenya akan terlihat seperti ini:

untuk warna merah adalah untuk judul, ganti kata judul dengan judul anda.
untuk warna Biru adalah untuk nama anda/nama penulis.
untuk warna hijau adalah untuk content/tulisan, silakan anda ganti dengan tulisan anda.

Setelah code-code tadi anda edit kemudian anda save, maka sebagai contoh hasilnya akan seperti pada gambar berikut ini:


jangan lupa, kedua file (.swf dan .xml) anda letakan saling berdampingan, jangan di pisah.

>> Download .fla

Cara Membuat Curriculum Vitae (CV) dengan Flash

Pusing ngelamar kerja ngga ke terima-terima? :D jangan putus asa gitu dong..!! harus tetap semangat nyari kerjanya hehehe.. *so, jadi motivator* Ngomong-ngomong masalah nyari pekerjaan , taktiku jadi teringat dengan salah satu persyaratan yang harus dipenuhi pada saat melamar pekerjaan salah satunya adalah Daftar Riwayat Hidup atau bahasa kerennya Curriculum Vitae disingkat menjadi CV. Lalu penting kah Tampilan suatu CV?? Kalau menurut taktiku penting ngga penting sih.. yang penting kan isinya.. tapi, ada sebagian orang yang menganggap penting juga sih, kenapa? karena tampilan CV yang bagus akan menunjukan bahwa si pelamar adalah seorang yang mempunyai kreatifitas tinggi, apalagi jika perusahaan yang anda lamar adalah perusahaan yang bergerak di bidang desain.

CV seperti ini juga pernah taktiku pake untuk melamar freelance (kerja paruh waktu) ke salah satu perusahaan yang bergerak dalam bidang desain, perusahaannya di Jakarta taktiku melamarnya lewat internet dan alhamdulillah keterima, kerjanya online gitu deh.. :D kok jadi curhat ya…

Ok kita langsung saja praktekan tutorialnya. Seperti biasa sebelumnya anda download dulu open source filenya disini.

Setelah file yang tadi di download di buka kemudian klik Window > Library, stelah jendela Library muncul kemudian double klik Movie Clip data yang terdapat pada folder Edit. (lihat gambar).


Sudah?. Langkah selanjutnya klik Layer 1. Baik, sekarang taktiku akan menjelaskan nomer frame untuk penempatan isi CV anda:

Frame 1 adalah untuk judul CV, Frame 2 untuk Bio Data, Frame 3 untuk Pendidikan Formal, Frame 4 untuk keahlian, dan Frame 5 untuk Pengalaman. Yang nantinya akan di munculkan sesuai dengan label button.


Sebelum anda memasukan daftar riwayat hidup anda kedalam flash sebaiknya anda tuliskan didalam Microsoft office word seperti Bio Data, Pendidikan Formal, Keahlian, dan Pengalaman, agar terlihat lebih rapih/teratur. Setelah itu kemudian copy dan paste kedalam Flash, sesuaikan dengan urutan nomer Framenya.


Sudah?. Kalau sudah sekarang klik File > Publish Settings, setelah muncul jendela Publish Settings, (lihat gambar) beri tanda centang pada kotak Flash (.swf) dan Windows Projector (.exe). kemudian klik Publish

Keterangan:

Windows Projector (.exe) adalah file hasil publish yang bisa di buka meskipun komputer anda tidak terinstal software Flash, jadi file ini yang nantinya akan dikirimkan ke perusahaan yang anda tuju. Sampai disini proses pembuatan CV selesai.



Setelah langkah-langkah diatas anda ikuti dengan benar maka hasilnya akan seperti ini:



Selamat Mencoba!!

Cara Memasang Header Flash .swf pada Blog

dengan flash?? baiklah, kalau begitu silahkan anda ikuti langkah-langkahnya.

1. Login ke acount blog anda
2. kemudian klik Tata Letak
3. klik Edit HTML
4. Cari kode dibawah

/* Header */
#headerimg {
position: relative;
padding: 50px 15px 10px 28px;
margin-bottom: 0px;
background:url(http://4.bp.blogspot.com/
_0FbXVm7r-Wc/R6VREzbxX5I/AAAAAAAAALw/Gp64u9xI_pQ/
s400/header.jpg) fixed ;
height:90px;

ganti code yang berwarna merah dengan code seperti ini:

http://www.tempat menyimpan file.com/nama file.swf"
quality="high" bgcolor="white" width="lebar" height="tinggi"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash">

Ganti code yang berwarna hijau, sesuaikan dengan parameter-parameter blog anda.

5. Simpan

Cara Membuat Layout Presentasi Dengan Flash 8

Setelah pada postingan sebelumnya yaitu Beberapa Tips Membawakan Presentasi dan sekarang yang akan kita bahas adalah Tutorial Cara Membuat Layout Presentasi Dengan Flash 8. Kenapa tidak memakai powerpoint ? karena untuk layout presentasi dengan flash yang di tonjolkan yaitu pada tampilannya yang menarik, mungkin itu lah salah satu kelebihan layout yang dibuat dengan flash dibandingkan powerpoint. Namun untuk tutorial membuat presentasi kali ini saya akan membuat layout yang simpel dulu saja, baru setelah ini nanti kita akan membuat layout presentasi yang agak rumit lagi seperi menambahkan animasi dan memasukan video pada layout presentasi.

Ok, kita mulai saja tutorialnya, tapi sebelumnya silakan anda download dulu mentahannya (.fla) disini.

Sudah?. Ok kalau sudah sekarang anda buka file yang sudah anda download tadi, sehingga akan terlihat seperti pada gambar diatas. Nah, bagian yang akan kita edit adalah pada bagian yang di tandai dengan kotak warna merah. silakan lihat gambar.

Begitu juga dengan Layer pada frame, yang akan di edit adalah layer name "slides". (lihat gambar)

Sudah cukup jelas bagian-bagian yang akan di edit?. Ok sekarang kita akan memunculkan jedela Library, caranya Klik Window > Library, kemudian setelah jendela Library muncul silakan cari movie dengan nama "Content Slides" setelah ketemu kemudian double klik, sehingga scene akan berpindah pada scene "Content Slides" dimana pada frame diatas akan terlihat Layer: Title, Paragraph, Layer 5. Nah, sekarang klik pada Layer Title dimana untuk layer Title ini adalah untuk judul setiap halaman layout presentasi. Silakan anda ganti, caranya double klik pada tulisan "Judul Presentasi disini (slide 1)". (lihat gambar)

Sudah?. Ok sekarang kita akan edit paragraf. Caranya klik Layer "paragraph" kemudian double klik paragrap yang ada di layout tadi, caranya sama seperti pada saat mengedit judul presentasi/title. (lihat gambar).

Sudah?. Ok, tadi kita sudah meng-edit judul dan paragrap, nah itu adalah untuk halaman 1. Disini saya membuat 5 halaman untuk anda edit, cara peng-editan-nya sama seperti pada langkah sebelumnya diatas. Namun apabila anda ingin menambahkan beberapa halaman lagi, silakan tambahkan framenya (lihat gambar) dengan menekan F6 pada keyboard pada frame "Title" dan "Paragraph". F5 pada frame "Layer 5". Sampai disini pengeditan selesai.

Dibawah adalah hasil akhir pada tutorial membuat layout presentasi kali ini.

Taktiku

Tutorial Flash: Membuat Animasi Efek "Air Bening"

Baik, kemarin kita sudah mebuat Tutorial Flash: Membuat Gambar Dengan Line Tool nah, pada kesempatan kali ini saya akan coba menjelaskan tutorial Flash 8 judulnya yaitu bagaimana cara membuat animasi efek "air bening". Sebenarnya tutorial ini masih sambungan dari artikel yang kemarin, seperti yang sudah saya sebutkan di atas. Namun bedanya untuk tutorial flash kali ini yaitu terletak pada pembuatan animasinya.

Baiklah, kita langsung saja mmulai tutorialnya ya.

Langkah pertama, silahkan Anda buka file flash yang sudah Anda buat pada tutorial kemarin yaitu Tutorial Flash: Membuat Gambar Dengan Line Tool.

Setelah berhasil dibuka, kemudian convert gambar yang sudah Anda buat kemarin, caranya klik kanan pada gambar, lalu pilih Conver to Symbol. Setelah itu akan muncul jendela Conver to Symbol, silahkan Anda isi kotak name dengan tulisan "gambar1" lalu klik OK.

Kemudian buat Layer baru dengan cara mengklik icon Insert Layer. Lalu Copy gambar yang sudah dibuat kemarin, carannya klik kanan pada gambar tersebut, kemudian pilih Copy.

Langkah berikutnya setelah gambar tadi di Copy, kemudian paste gambar tersebut di Layer 1. Caranya klik terlebih dahulu layer 1, kemudian Paste. (lihat gambar).

Nah, gambar di atas adalah contoh dari hasil paste yang sudah kita lakukan pada langkah sebelumnya tadi.

Selanjutnya, karena gambar tadi bertumpuk tidak karuan, silahkan Anda rapikan gambar hasil paste tadi dengan menggunakan tanda panah pada keyboard, sehingga hasilnya benar-benar bertumpuk rapi dengan gambar yang ada di bawahnya. Tapi sedikit agak di beri jarak dengan gambar di bawahnya (sedikit tidak singkron) untuk mebuat efek "air bening". Sehinggga efek air bening benar-benar kelihatan.

Langkah berikutnya, silahkan Anda buat Layer baru lagi. Caranya klik icon Insert Layer.

Kemudian di Layer baru tersebut, buat kotak yang panjang kebawah (gambar yang berwarna hitam) yang nantinya akan dibuat sebagai mask.

Nah, seperti yang saya sebutkan tadi bahwa kotak tersebut akan dibuat mask. Caranya klik kanan pada Layer (kalau disini Layer 3) kemudian pilih Mask.

Terlihat di gambar diatas bahwa Layer 3 terkunci. Silahkan Anda buka klik icon kunci tersebut supaya gambar kotak tadi bisa terlihat lagi.

Nah, sekarang kita akan bermain-main di frame animasi. Silahkan buat ketiga frame tersebut dengan panjang 50. Caranya klik di frame 50 kemudian tekan tombol F6 pada keyboard. LAkukan hal yang sama pada Layer berikutnya (lihat gambar).

Kemudian (lihat Layer 3) buat Motion Tween. Caranya klik kanan di frame Layer 3 kemudian pilih Create Motion Tween.

Setelah membuat Motion Tween, langkah selanjutnya adalah membuat Key Frame. Caranya klik di frame 25, kemudian tekan tombol F6 pada keyboard. Setelah itu geser kotak yang berwarna hitam ke arah kanan (lihat Gambar).

Selanjutnya buat lagi Key Frame di frame 50, caranya sama dengan cara dia atas yaitu dengan menekan tombol F6. kemudian geser lagi kotak yang berwarna hitam tersebut ke sebelah kiri (lihat gambar).

Kemudian untuk melihat animasi yang sudah kita buat tadi, Klik Control > Test Movie untuk melihat apakah animasi yang sudah kita buat tadi benar-benar terlihat. Jika animasi yang kita buat tadi tidak kelihatan, Anda bisa mengedit gambar Pesta Blogger yang di atas (hasil Co-pas) dengan cara menggeser-geserkan gambar tersebut dengan menggunakan tanda panah pada keyboard.



Nah, ini adalah hasil dari tutorial yang sudah kita buat tadi. So, selamat mencoba ya, semoga bermanfaat.

Membuat Animasi Tulisan Efek Mask

Daripada capek-capek berantem di postingan, kritik sana-kritik sini, mendingan bikin tutorial flash aja kali ya... heuheu

Sebelumnya saya mohon maaf kepada rekan-rekan pengunjung setia taktiku yang telah bertanya melalui kontak blog ini, tetapi belum sempat saya balas karena ada beberapa rutinitas penting yang tidak bisa saya tinggalkan.

Ok, langsung saja. Pada tutorial flash kali ini kita akan coba mempraktekkan cara belajar membuat tulisan dengan efek mask. Untuk yang belum tahu apa itu efek mask silakan Anda lihat contoh animasi di bawah, nanti Anda akan mengerti dengan sendirinya. heuheu..

Langkah pertama silakan Anda jalankan software flash Anda.

Buatlah tulisan "welcom to my site" dengan menggunakan Tex tool (lihat gambar).

Buat layer baru dengan mengklik ikon ini kemudian buatlah sebuah kotak dengan menggunakan Rectangle Tool, yang nantinya akan dijadikan mask (lihat gambar).

Kemudian di layer2 klikanan pada mouse lalu pilih Mask (lihat gambar).

Sudah? kalau sudah, sekarang klik tanda kunci untuk melihat tulisan "welcom to my site" (lihat gambar).

Langkah selanjutnya pada layer2 dan text tekan F5 pada frame 50. (lihat gambar)

Kemudian pada klik kanan pada frame layer2 pilih Create Motion Tween (lihat gambar). Fungsi dari Motion Tween ini adalah supaya gerakan dari animasi tulisan tadi menjadi lebih halus.

Sudah?. Ok, sekarang kembali lagi ke kotak yang berwarna biru. Seperti terlihat pada gambar, geser jarum yang berwarna merah pada frame 1 (lihat gambar). Kemudian klik kotak yang berwarna biru tadi, dilanjutkan dengan mengklik Free Transform Tool. kemudian geser lingkaran kecil yang berwarna putih ke sebelah kiri (lihat gambar).

Sudah?. Sekarang kita kembali lagi ke frame. Klik pada frame no 30, di layer2 (lihat gambar)

Masih di frame no 30 layer2. Pada kotak yang akan di jadikan mask, geser kotak kecil berwarna hitam sampai ke ujung tulisan (lihat gambar).

seperti ini.

Sampai disini tutorial membuat tulisan dengan efek mask selesai. Untuk melihat hasil tutorial Anda,silakan klik Control > Test Movie

Hasil akhir tutorial membuat tulisan dengan efek mask:

Taktiku

L A N J U T A N 2

L A N J U T A N

Klik lagi menu SHAPE ubah nilai LINES = 1 dengan warna putih, rubah juga FILL COLOR dengan SOLID warna orange, Klik tombol RECTANGLE yang ada pada menu sebelah kiri pilih RECTANGLE buat kotak untuk tombol berukuran WIDTH = 64 HEIGTH = 20. Buatlah sebanyak 3 buah dan atur posisi ketiga kotak tadi agar terlihat cantik, lihat contoh diatas kalau Anda tidak punya ide untuk menempatkan ketiga tombol itu, walaupun itu bisa Anda taruh sesuka hati Anda, asal jangan di luar canvas aja. Catat posisi ketiga tombol yang Anda taruh ( lihat tab TRANSFORM nilai untuk X dan Y, ingat catat di kertas jangan sampai lupa posisi tombol yang Anda taruh ). Klik tombol pertama lalu klik kanan mouse dan pilih CONVERT TO SYMBOL setelah itu akan keluar menu pop-up untuk memilih jenis dari symbol. Pilih BUTTON dan rubah namanya jadi TOMBOL1, maka pada LIBRARY akan terlihat tombol hasil convert yang Anda buat tadi. Lakukan hal yang sama dengan dua buah kotak yang lain dengan nama TOMBOL2 dan TOMBOL3. Sekarang Anda lihat pada menu library, disitu ada tiga buah tombol hasil convert yang Anda lakukan tadi. Klik dua kali TOMBOL1 yang ada pada library, maka Anda akan masuk pada MODE EDITING untuk TOMBOL1. Pada Mode ini hanya ditampilkan khusus untuk meng-edit bagian-bagian yang Anda inginkan. Setelah masuk pada mode editing disitu Anda melihat pada bagian atas ada layer1 dan frame-frame dengan kata UP, OVER, DOWN dan HIT. Klik frame UP kemudian klik tombol TEKS ( berlambang huruf T disebelah kiri ), Rubah properties dari teks, pilih jenis huruf ARIAL typenya STATIC dengan ukuran huruf 10 dpi warna putih terus klik tombol BOLD, drop mouse di canvas dan ketik " PERTAMA ". Terus klik tanda panah berwarna biru, atur posisi teks tadi tepat ditengah kotak yang dibuat oleh Anda sebelumnya. Sekarang klik frame OVER, klik kanan mouse pilih INSERT KEYFRAME. Lakukan hal yang sama pada frame DOWN dan HIT. Sampai disini Anda sudah berhasil membuat sebuah tombol untuk digunakan nanti dalam animasi flash yang sedang Anda buat. Sekarang Anda klik kata SCENE 1 yang ada pada bagian atas, maka Anda akan kembali lagi pada mode GLOBAL seperti semula, dan Anda lihat pada canvas, sekarang kotak yang Anda buat tadi sudah ada tulisan " PERTAMA '. Lakukan seperti diatas untuk TOMBOL2 dan TOMBOL3. dengan teks " KEDUA " dan " KETIGA " Sekarang simpan pekerjaan Anda dengan meng klik icon berbentuk DISKET.

Sebelum saya lanjutkan, saya jadi khawatir dengan keadaan Anda saat ini yang mungkin masih bingung atau pusing mengikuti langkah langkah yang separuh jalan itu. OK BABY pada awal tutorial ini saya membuat daftar bahan-bahan yang perlu Anda siapkan untuk mengikuti tutorial ini antara lain minuman seperti kopi, teh susu atau apa saja yang Anda sukai. Minum dulu bahan itu santai saja jangan terlalu tegang karena saya juga melakukan hal yang sama ketika mengetik tutorial sampai disini, malah sempat buang hajat dulu hehehe. jadi malu sama Pak EDISON yang ada di layar nih karena lampu toilet saya kelap-kelip pengen rusak.

OK mari kita lanjutkan lagi langkah-langkahnya. Kita fokuskan lagi pada lingkaran-lingkaran yang telah dibuat. Klik lingkaran kecil berwarna orange bawa lingkaran itu pada awal PEN GUIDLINES disebelah kiri. Klik frame ke 50 kemudian klik kanan mouse pilih INSERT KEYFRAME, pindahkan lingkaran berwarna orange yang tadi berada di awal PEN GUIDLINES ke akhir dari PEN GUIDLINES disebelah kanan. Klik frame ke 1 dan klik kanan terus pilih CREATE MOTION TWEEN. Klik lagi frame ke 50, klik tab ACTION yang ada dibawah canvas. Pada teks editor dari ACTION ketik script ini gotoAndPlay(1); perhatikan, tulisannya harus sama seperti itu jangan dirubah serta perhatikan huruf besar dan huruf kecil yang ada. Perintah itu artinya ulangi animasi pada frame ke 1. Simpan lagi pekerjaan Anda untuk menghindari hal-hal yang tidak diinginkan. Sekarang lihat hasil kerja Anda dengan meng klik tombol PREVIEW ( icon berbentuk kaca pembesar ). Bila sudah terlihat lingkaran berwarna orange seakan-akan mengitari ligkaran besar berwarna abu-abu, berarti hasil kerja Anda selama ini boleh dikatakan cukup lumayan. Tutup jendela PREVIEW. Sekarang klik frame ke 1, klik canvas ( jangan lupa ! ), terus klik tombol PERTAMA, pada TAB ACTION ketik script berikut :

on(release) { gotoAndPlay(1); }

Klik frame ke 50 dan klik tombol PERTAMA, ketik script yang sama seperti diatas pada teks editor ACTION. Script ini mempunyai arti, " Ketika tombol di klik maka lakukan perintah yang ada dalam kurung kurawal ". Klik lagi frame ke 1, dan klik tombol KEDUA kemudian pada tab ACTION ketik script berikut :

on(release) { gotoAndPlay(51); }

Kerjakan perintah diatas untuk frame ke 50 untuk tombol KEDUA. Sekarang klik lagi frame ke 1, pilih tombol KETIGA kemudian klik script berikut :

on(release) { gotoAndPlay(101); }

Hal yang sama Anda lakukan pada frame ke 50 untuk tombol KETIGA. Sampai disini Anda sudah berhasil mengatur jalannya animasi pertama dengan menggunakan script script singkat tapi bermanfaat. Nah sekarang kita mulai membuat animasi kedua dengan cara menambahkan animasi lain pada LAYER yang lain. Klik kanan LAYER 1, pilih INSERT LAYER. Klik frame ke 50 pada LAYER 2 yang baru saja Anda buat, Klik kanan dan pilih INSERT KEYFRAME, klik lagi frame ke 51 LAYER 2 klik kanan dan pilih INSERT KEYFRAME Disini Anda Akan melihat canvas tidak ada apa-apa alias kosong. Sekarang Drop TOMBOL1, TOMBOL2 dan TOMBOL3 dari library ke Canvas. Pada langkah-langkah diatas saya pernah menyuruh Anda untuk mencatat posisi dari tombol-tombol itu. Sekarang Anda susun lagi tombol-tombol itu dengan posisi yang sama. Masih di frame ke 51 LAYER 2, Klik TEKS TOOL dan ketikan kata-kata berikut :

INI ANIMASI TEKS PERTAMA

Rubah formasi huruf sedemikian rupa dengan menarik bagian bawah dari kotak SELEKSI kata-kata tersebut terserah selera Anda mau seberapa besar. Klik Frame ke 100 LAYER 2, klik kanan mouse pilih INSERT KEYFRAME. Sekarang Anda beralih lagi ke frame 51 layer 2, kalau tadi Anda membesarkan ukuran dengan seleksi tool sekarang kebalikannya yaitu mengecilkan ukuran dari kata tersebut sampai tidak terlihat di canvas. Klik frame 51 layer 2, klik kanan mouse pilih CREATE MOTION TWEEN. Masih di frame 51 layer 2, klik TOMBOL1, klik ACTION, pada teks editor ketik script berikut:

on(release) { gotoAndPlay(1); }

Klik TOMBOL2 dan ketik script berikut,

on(release) { gotoAndPlay(51); }

Klik TOMBOL3 dan ketik script berikut,

on(release) { gotoAndPlay(101); }

Sekarang klik frame 100 layer 2, di Tab ACTION ketik, stop(); Sampai disini animasi yang kedua telah Anda buat dengan sukses bila pada PREVIEW Anda melihat animasi yang pertama yaitu lingkaran orange mengitari lingkaran abu-abu dan ketika anda klik tombol KEDUA akan terlihat kata " INI ANIMASI TEKS PERTAMA " dari kecil terus membesar kemudian berhenti disitu. Lalu bila Anda Klik tombol PERTAMA maka animasi dari lingkaran akan diplay lagi. Saya ucapkan selamat kepada Anda bila keterangan diatas benar, tetapi bila tidak Anda harus berusaha mencari kesalahan sendiri, dengan begitu Anda tahu dimana kesalahan Anda Sendiri.

Uahhh sudah ngantuk nih.., untung saja ada segelas kopi dan sebatang rokok serta beberapa potong pisang goreng yang menemani saya mengetik tutorial ini, jadi saya terus berusaha untuk menyelesaikan tutorial ini. bagaimana dengan Anda ?, masih mau terus..?, hmmm saya salut atas kegigihan Anda dalam mempelajari tutorial ini. OK kita lanjutkan.

Klik kanan layer 3, dan pilih INSERT LAYER, sekarang layer ketiga sudah dibuat. klik frame 100 pada layer ketiga yang baru saja Anda buat. Klik kanan mouse dan pilh INSERT KEYFRAME. Lalu klik frame 101 layer 3 klik kanan mouse dan pilih lagi INSERT KEYFRAME. Klik lagi frame 101 layer 3, Drop TOMBOL1, TOMBOL2 dan TOMBOL3 dari library ke Canvas atur posisi tombol tersebut seperti langkah sebelumnya. Klik frame 101 layer 3, lalu ketik kata-kata berikut. INI ANIMASI TEKS KEDUA Atur teks tersebut dan besarkan ukurannya dengan bantuan kotak SELEKSI. Sekarang klik menu MODIFY yang berada diatas, pilih BREAK APPART, kemudian klik menu insert disebelahnya. dan pilih CREATE EFFECT maka akan ditampilkan menu pop-up untuk memilih jenis animasi dari teks yang kita kehendaki. Pada menu pop-up pilihan animasi, klik MOVE dan pilih SLIDING kemudian klik tombol OK. Klik frame 155 layer 3, klik kanan mouse dan pilih INSERT KEYFRAME. Masih di frame 155 layer 3, Pada Tab ACTION ketik stop(); Klik TOMBOL1 masih dalam frame yang sama seperti diatas, ketik script berikut :

on(release) { gotoAndPlay(1); }

Klik TOMBOL2 ketik di tab ACTION script berikut:

on(release) { gotoAndPlay(51); }

Klik TOMBOL3 ketik di tab ACTION script berikut:

on(release) { gotoAndPlay(101); }

Lakukan hal yang sama seperti diatas pada frame 101 layer 3, terhadap TOMBOL1, TOMBOL2 dan TOMBOL3.

Dan akhirnya..., uaaaaaaaaahh sudah ngantuk berat, tapi mata saya tidak bisa terpejam walaupun mulut saya sudah menguap belasan kali. Itu karena kekhawatiran saya kepada Anda sehingga membuat mata saya tidak bisa terpejam sebelum Anda benar-benar mengerti dengan apa yang saya tulis pada tutorial ini. Agar mata saya bisa terpejam dan dapat beristirahat dengan baik berilah tanggapan dan pertanyaan Anda tentang tutorial ini di SSC Forum. Ingat yah Semua pertanyaan hanya saya jawab melalui SSC Forum, jadi bila Anda mengirim pertanyaan lewat Email, tidak akan saya jawab pertanyaan Anda. OK sampai disini dulu tutorial kita mengenai Flash Insya Allah pada Up-Date mendatang akan dilanjutkan lagi dengan tutorial ACTION SCRIPT 1 FOR FLASH PROGRAMING. Salam dari saya. Komarudin Surya Bandung, 13 Desember 2006

L A N J U T A N

Untuk membuat Lingkaran yang Anda buat bisa bergerak seperti contoh dihalaman sebelumnya saya akan menerangkan sedikit mengenai frame dan layer. Frame adalah bagian-bagian dari suatu animasi yang dieksekusi oleh program secara berurutan. jadi bila Anda memasukan huruf A - Z pada frame 1 - 26 maka animasi itu akan menampilkan huruf A sampai Z tersebut secara berurutan mulai dari A, kecepatan eksekusi frame dinyatakan dengan satuan FPS ( frame per second ) artinya berapa banyak frame yang akan dieksekusi oleh program selama hitungan 1 detik. Bila Anda menginginkan tampilan Animasi yang lebih halus dari suatu gerakan yah Anda perbesar satuan FPS nya. Program sothink menggunakan 12 fps sebagai standard kecepatannya. tapi itu dapat Anda rubah sesuai keinginan Anda. Coba lihat pad tab properties dibagian bawah Canvas disitu ada yang namanya FRAME RATE, defaultnya 12 Anda bisa merubahnya sesuai keinginan Anda tapi ingat semakin besar frame rate dari animasi flash, semakin besar ukuran file nya, jadi jangan menset frame rate terlalu besar. Untuk contoh ini pakai saja default dari sothink yaitu 12 fps. Sedangkan Layer adalah kumpulan dari frame-frame yang akan dikerjakan secara bersamaan, misal layer kesatu Anda isi dengan huruf A pada frame kesatu dan layer kedua Anda isi dengan huruf Z pada frame kesatu, maka setelah animasi dijalankan huruf A dan Z akan ditampikan secara bersamaan, jadi bila Anda nanti membuat animasi seperti pada HALAMAN PRESENTASI di situs ini. Anda akan bergelut dengan yang namanya Layer dan Frame. Nah sekarang Anda sudah tahu apa itu frame dan layer, sekarang kita kembali pada proyek pertama kita yaitu membuat lingkaran itu bergerak. Ikuti langkah-langkah berikut :

Bersihkan dulu Canvas dari semua coretan yang mungkin saja tadi Anda mengikuti saya untuk coba-coba membuat bentuk-bentuk yang lain. Cari di library shape berbentuk lingkaran yang telah Anda buat sebelumnya dan taruh di Canvas bagian kiri, jangan sampai keluar dari canvas. Klik frame ke 10, lalu klik kanan mouse. pilih INSERT KEYFRAME Pindah kan lingkaran yang tadi ada disebelah kiri Canvas ke sebelah kanan Canvas. Klik frame ke satu lagi, lalu klik kanan mouse dan pilih CREATE MOTION TWEEN Sekarang Anda bisa tekan tombol PREVIEW dan lihatlah pekerjaan Anda tadi.

Anda akan melihat di PREVIEW lingkaran itu bergerak dari kiri ke kanan terus menerus, lalu bagaimana bila Anda menginginkan animasi itu tidak mengulang lagi, caranya gampang ikuti langkah berikut :

Tutup dulu Jendela PREVIEW kembali ke CANVAS. Klik frame ke 10. Klik Tab ACTION yang ada pada bagian bawah Canvas disebelah properties. Pada TAB ACTION ketik stop(); ( harus huruf kecil dan jangan lupa perhatikan tanda " ( " dan " ) " serta tanda semicolon " ; " tidak ada spasi. Sekarang Anda klik lagi tombol PREVIEW dan Anda lihat hasil pekerjaan Anda.

Nah animasi itu sekarang berhenti setelah berada disebelah kanan. Bagaimana.., mau yang lebih rumit OK ikuti langkah berikut :

Bersihkan dahulu Canvas dari semua atribut, gunakan tombol BACK sampai pada awal latihan diatas. Klik frame 1 Cari di library lingkaran yang Anda buat, dan tempatkan di Canvas sebelah kiri paling bawah tapi jangan keluar dari Canvas. Klik tombol PENCIL GUIDLINES dan pilih PEN GUIDLINES ( Ada pada menu toolbars sebelah kiri icon pencil berwarna kuning merah yang dibawah perhatikan keterangan yang dikeluarkan program ) Klik perlahan-lahan dan sedikit demi sedikit, ikuti gambar kurva berbentuk parabola seperti contoh dihalaman sebelumnya. Klik frame ke 10, lalu klik kanan mouse pilih INSERT KEYFRAME Klik frame ke 1, tempatkan lingkaran yang Anda buat di AWAL PEN GUIDLINES yang telah dibuat sebelumnya. Klik frame ke 10, tempatkan lingkaran yang Anda buat di AKHIR PEN GUIDLINES yang telah dibuat sebelumnya. Klik lagi frame ke 1, lalu klik kanan mouse dan pilih CREATE MOTION TWEEN. Klik Layer 1, lalu klik kanan mouse dan pilih INSERT LAYER Klik layer 2 yang baru saja Anda buat dan pilih frame ke 1 Klik tombol PENCIL bukan PENCIL GUIDLINES tapi yang diatasnya. Gambar Garis lurus kekanan seperti pada contoh dihalaman sebelumnya dan buatlah kurva berbentuk parabola mengikuti PENCIL GUIDLINES. Klik Frame ke 10 Layer ke 2, lalu klik kanan mouse dan pilih INSERT FRAME Klik tombol preview dan Anda lihat hasil kerja ANDA.

Bila Anda benar dalam mengikuti petunjuk diatas, maka animasi yang Anda buat tadi akan terlihat sama seperti contoh pada awal latihan kita dihalaman sebelumnya. OK Selanjutnya mari kita tingkatkan pengetahuan kita mengenai frame, layer dan sedikit mengenai script. Untuk Script atau bahasa pemrograman yang ada pada animasi flash akan disinggung lebih jauh lagi dalam tutorial flash tingkat lanjut ( Action Script 1 -- Tunggu saja yah.. ). Untuk saat ini saya hanya mengenalkan sedikit mengenai script dan fungsinya.

PENGERTIAN SCRIPT PADA FLASH

Mungkin anda bertanya, apa itu script dan apa gunanya.?, Pada latihan diatas saya telah menerapkan salah satu fungsi script dalam flash, coba Anda simak lagi tulisan diatas., yah benar. Masih ingatkan perintah " stop(); " pada latihan diatas..!, itu salah satu dari perintah dalam flash yang berfungsi untuk menghentikan perulangan dalam animasi flash. Bila Anda terbiasa dengan perintah-perintah JAVASCRIPT hal itu bukanlah sesuatu yang aneh. Dan memang bila Anda cukup mahir dalam bahasa Pemrograman JAVASCRIPT tentunya Anda tidak akan kesulitan untuk memahami script-script yang ada pada flash, karena memang dasar pemrograman nya diambil dari sintak-sintak bahasa JAVA dan C. Apalagi bila Anda mahir dengan JAVA APPLET mungkin keterangan saya ini bisa Anda abaikan. Script atau perintah flash pada SOTHINK, SWISH, ANTECHINUS maupun MACROMEDIA FLASH diadobsi dari bahasa yang sama yaitu Bahasa Pemrograman JAVA. Lebih khusus lagi yaitu Bahasa JAVA yang digunakan untuk membuat animasi yaitu JAVA APPLET yang dikenal dengan nama ACTION SCRIPT. Maka seperti yang saya uraikan diatas, bila Anda mahir dalam bahasa JAVA dan JAVA APPLET tentunya tidak akan kesulitan untuk memahi perintah-perintah dalam flash. Sebagai dasar pengenalan script dalam flash, sekarang Anda perhatikan Animasi flash dibawah ini. Contoh animasi flash yang menggunakan script Jangan bengong saja, cobalah Anda klik tombol yang ada pada animasi tersebut, terserah yang mana saja yang Anda sukai untuk di klik terlebih dahulu. Kalau Anda klik tombol Kedua maka akan ditampilkan animasi kedua, bila Anda klik tombol ketiga maka akan ditampilkan animasi ketiga. Itu akan berlaku terus menerus dan tidak akan berubah sampai Anda meng klik tombol yang lain. Nah dari contoh diatas Anda sekarang mengetahui bahwa Flash itu dapat Anda buat untuk berbagai keperluan dan dapat Anda program sesuka hati Anda. Apa ada contoh yang lain..? ada, coba klik Link ini, dan kemudian Anda coba-coba sendiri. Animasi flash itu dibuat oleh orang yang sudah mahir dalam pembuatan flash dengan memanfaatkan script, dan itu bukan buatan saya tapi buatan PUSTEKKOM DEPDIKNAS, tapi prinsip kerjanya hampir mirip dengan animasi diatas serta latihan Anda.

P R O Y E K K E D U A

Saatnya telah tiba bagi Anda untuk mencoba membuat animasi flash dengan bantuan script, agar animasi itu dapat dikontrol oleh kita. Ikuti petunjuk berikut untuk membuat animasi seperti contoh diatas.

Buat file baru dengan mengklik menu FILE -- NEW FILE. Klik tab properties, klik Canvas yang masih kosong lalu rubah nilai FRAME RATE jadi 16, ukuran CANVAS -- WIDTH = 300 -- HEIGHT = 200, BACKGROUND warna hitam. Klik tab SHAPE rubah ukuran LINE = 2 dengan warna putih, rubah FILL COLOR dengan SOLID warna orange. Klik tombol OVAL buat lingkaran pada canvas, klik tab TRANSFORM rubah ukuran width = 20 dan heigth = 20. Taruh lingkaran itu di pojok sebelah kiri canvas.

Menu transform, layout, library dan movie explorer Klik lagi menu SHAPE, rubah nilai LINE = 1 dengan warna hitam, ganti warna FILL dengan SOLID dan warna abu-abu. Klik lagi menu OVAL tekan tombol SHIFT pada keyboard ( dengan cara ini lingkaran akan benar-benar bulat ) buat lingkaran pada canvas. Rubah nilai HEIGTH = 100, WIDTH = 100 pada tab TRANSFORM, taruh lingkaran itu ditengah canvas. Buat lagi lingkaran berbentuk oval, rubah nilai HEIGTH = 270 dan WIDTH = 44 pada tab TRANSFORM, taruh oval tersebut ditengah-tengah lingkaran kedua yang telah dibuat oleh Anda tadi. Bila Anda mengikuti petunjuk ini dengan benar, seharusnya canvas Anda akan terlihat seperti gambar diatas.

Klik menu PENCIL GUIDLINES dan pilih PEN GUIDLINES, klik perlahan-lahan dan ikuti lingkaran berbentuk oval yang berada ditengah mulai dari kiri ke kanan, lihat contoh layout latihan 2 diatas. Klik panah berwarna biru pada menu sebelah kiri paling atas, klik canvas satu kali aja ( biasakan mengklik kanvas terlebih dahulu sebelum melakukan pekerjaan yang lain, ini untuk menghindari terjadinya pilihan ALL bila kita mengklik FRAME atau tab TRANSFORM dan lainnya, perhatikan tanda pilihan seleksi yang ada pada canvas ) Klik lingkaran berbentuk oval yang berada ditengah dan perhatikan tanda seleksi atau pilihan berbentuk segiempat berwarna biru dan ada titik titik transform nya. Tekan tombol DEL atau DELETE pada keyboard untuk menghapus lingkaran berbentuk oval ini. Oval ini digunakan hanya sebagai mall dari PEN GUIDLINE agar Anda mudah membuat GUIDLINES berbentuk oval.