E Book Tutorial Adobe Flash Cs 3 [PDF]

Citation preview

Tutorial Flash Cs 3 untuk Orang Awam



Full Imagination With Adobe Flash Cs 3 1|



tutorial by erik



Kata Pengantar Dalam kehidupan sehari hari kita tidak pernah lepas dari yang namanya gerakan baik itu gerakan tubuh kita , pohon yang yertiup angin dan lain lain nah gerakan itulah yang disebut dengan animasi. Biasanya kita sering melihat contoh animasi animasi kartun yang ada di tv nah kelihatanya animasi itu sulit untuk dibuat tapi anggapan itu salah karna hanya bermodalkan tekat dan keinginan yang kuat kita bisa membuatnya. Adobe flash CS 3 adalah software yang digunakan untuk membuat web interaktif, E-card, menu interaktif dan salah satunya adalah digunakan untuk membuat animasi kartun , karera kelengkapan vitur yang disediakan adobe flash CS 3sehingga pembuatan animasi kartun menjadi mudah. Dalam E-book ini anda akan mempelajari cara cara pembuatan beberapa animasi.



2|



tutorial by erik



Daftar Isi Cover . ................................................................................................... 1 Kata Pengantar.................................................................................. 2 Daftar isi .............................................................................................. 3 1. Pengenalan Sofware .................................................................. 4 1.1 Mengenal Jendela Kerja ................................................... 4-5 1.2 Mengenal Fungsi Tool ....................................................... 5-8 1.3 Mengenal Time Line .......................................................... 8 1.4 Mengenal Panel ................................................................... 9 1.4.1 Mengenal Panel Properties ..................................... 9 1.4.2 Mengenal Panel Liberary ......................................... 9 2. Tutorial ........................................................................................... 10 a. Animasi Alpha ...................................................................... 10 b. Animasi Burung Terabang ............................................... 11 c. Animasi Rotasi ...................................................................... 13 d. Animasi Motion Shape ....................................................... 13 e. Animasi Teks ........................................................................ 14 f. Tombol Animasi.................................................................... 15 g. Efek Gelombang Air ............................................................ 17



3|



tutorial by erik



1. Pengenalan Program adobe flash cs 3 Sebelum kita memulai belajar dan berkreasi dengan adobe flash cs 3 / macromedia flah sebaiknya kita mengenal adobe flash cs 3 / macromedia flash dan untuk apa fungsinya ter lebih dahulu. adobe flash cs 3 / macromedia flash adalah sebuah program yang bisa kita gunakan untuk membuat animasi kartun ( 2D ) , Membangun website, membuat game flash, membuat pembelajaran ilerning, pembelajaran interaktif dan presentasi, serta penducumentasian suatu lembaga / instansi. 1.1Mengenal Jendela Kerja 1. Mengenal Menu Dasar Berikut merupakan tampilan standar jendela kerja Adobe Flash CS3 Professional, saat Anda memulai membuat file baru.



( Gambar area kerja adobe flash cs 3 ) Jendela kerja Adobe Flash CS3 terdiri atas : • Menubar Berisi kumpulan menu atau perintah-perintah yang digunakan dalam Adobe Flash CS3.



4|



tutorial by erik



• Toolbar Toolbar merupakan panel berisi berbagai macam tool. Tool-tool tersebut dikelompokkan menjadi empat kelompok : Tools ; berisi tombol-tombol untuk membuat dan mengedit gambar, View; untuk mengatur tampilan lembar kerja, Colors; menentukan warna yang dipakai saat mengedit, Option; 1.2 Mengenal fungsi tool pada Adobe Fash Cs 3 Gambar yang terlihat di bawah ini adalah gambar dari toolbox adobe flash cs 3 dan saya akan jelaskan fungsi dari masing masing tool nya.



Beriku penjelasannya secara detil.. 1. Arrow tool atau disebut juga selection tool berfungsi untuk memilih atau menyeleksi suatu objek. 2.



5|



tutorial by erik



Subselection toll berfungsi untuk menyeleksi bagian objek lebih detail dari pada selection tool. 3. Free transform tool berfungsi untuk mentransformasikan objek terseleksi 4. Gradien Transform tool berfungsi untuk mentransformasikan warna dari fill objek yang terseleksi. 5. Lasso tool digunakan untuk melakukan seleksi dengan menggambar sebuah garis seleksi. 6. Pen tool digunakan untuk menggambar garis dengan bantuan titiktitik bantu seperti dalam pembuatan garis, kurva atau gambar. 7. A Text tool digunakan untuk membuat objek teks 8. line tool digunakan untuk menggambar garis 6|



tutorial by erik



9. rectangular tool digunakan untuk menggambar bentuk persegi 10. pencil ttol digunakan untuk membuat garis 11. brush tool digunakan untuk menggambar garis-garis dan bentuk bebas 12. digunakan untuk mengubah warna garis, lebar garis dan style garis 13. paint bucket tool digunakan untuk mengisi area-area kosong 14. eyedropper tool digunakan untuk mengambil sampel warna dari gambar atau objek 15. eraser tool digunakan untuk menghapus objek 16. handtool digunakan untuk menggeser tampilan stage tanpa mengubah pembesaran 17.



7|



tutorial by erik



zoom tool digunakan untuk memperbesar atau memperkecil tampilan stage 18. stroke color digunakan untuk memilih atau memberi warna pada suatu garis 19. fill color digunakan untuk memilih atau memberi warna pada suatu objek



1.3 Mengenal Time Line Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasi akan



berjalan. 1.4 Mengenal Panel Beberapa panel penting dalam Adobe Flash CS3 Professional, diantaranya panel: Properties, Filters & Parameters, Actions, Library, Color dan Align & Info & Transform



8|



tutorial by erik



1.4.1 Mengenal Panel Propertis Panel Properties akan berubah tampilan dan fungsinya mengikuti bagian mana yang sedang diaktifkan. Misalnya Anda sedang mengaktifkan Line tool, maka yang muncul pada jendela properties adalah fungsi-fungsi untuk mengatur line/garis seperti besarnya garis, bentuk garis, dan warna



garis. 1.4.2 Mengenal panel Leberarry Panel Library mempunyai fungsi sebagai perpustakaan simbol/media yang digunakan dalam animasi yang sedang dibuat. Simbol merupakan kumpulan gambar baik movie, tombol (button), sound, dan gambar statis (graphic).



9|



tutorial by erik



2. Tutorial a. Membuat Animasi Alpha di bawah ini kita akan membahas bagai mana membuat animasi alpha dengan adobe flash CS3 Professional, dan biasanya animasi ini sering digunakan untuk memberikan efeck transisi antara foto satu dengan yang lainnya. Langkah – langkah nya adalah sebagai berikut 1. Buka Adobe Flash CS 3 kemudian import image di bawah ini pada menu bahan -> alpha yang terdapat pada CD Tutorial.



2. Buat dua layer sebagai tempat untuk memisahkan foto satu



dengan yang lainnya. 3. Letakkann foto satu pada layer 1, pada frame pertama (1) dengan cara mendrag foto dari panel leberary ke area kerja 4. Lakukan insert keyframe pada frame ke 5 dengan cara klik kanan pada frame ke 5 kemudian pilih insert keyframe atau menekan tombol f6 pada keyboard. 5. Lakukan insert keyframe juga pada frame ke 10 dan 15. Kemudian beri animasi motion tween dengan cara klik frame ke 1,5,dan 10 kemudian klik kanan lalu pilih creat motion tween.



10 |



tutorial by erik



Apa bila motion tween sudah aktif maka Gambarnya sebagai berikut



6. Klik objek yang terdapat pada frame ke 1 dan pada frame ke 15, kemudian buka panel properties



Pada option color ganti yang semula none menjadi alpha dan nilai alphanya 0%. 7. Masukan gambar ke dua pada layer ke dua dan pada frame pertama. 8. Geser frame pertama pada layer ke dua ke frame ke 20. Lalau lakukan insert keyframe pada frame ke 25,30,dan 35 serta beri motion tween. Maka hasilnya seperti gambar dibawah ini.



9. Kemudian pada frame ke 20 dan 35 , klik objek yang ada pada frame tersebut lalu type colornya memjadi alpha dan nilai alphanya 0%. 10. Kemudian tekan ctrl + Enter untuk memutar animasi. b. Membuat Animasi burung terbang. Pada kali ini kita akan membahas tentang bagai mana cara membuat aniasi burung terbang. Langkah – langkah nya sebagai berikut.



11 |



tutorial by erik



1. Aktifkan Adobe Flash, kemudian import foto burung yang ada pada Folder bahan -> animasi burung yang terdapat pada CD Tutorial.



2. Buat simbol baru dengan menekan tombol ctrl + f8 pada keyboard



Pada kotak pilihan name ketikan animasi burung dan pada typenya pilih Movie clip kemudian klik OK 3. Buka panel lebrary lalu cari simbol movie clip dengan nama animasi burung yang sudah kita buat tadi kemudian klik kanan lalu pilih edit. 4. Pada frame ke 1 pada layer satu yang ada pada simbol masukan ( drag) foto twiterbirtd 01 kemuadian pada frame kedua masukan tweeter bird 02 terus berurutan hingga pada frame ke lima masukan foto tweeter bird 01 lagi. 5. Aktifkan union sceen untuk mempermudah kita dalam meletakan objek karena dengan union skin ini objek sesudah dan sebelunya akan terlihat transparan. Gambarnya seperti dibawah Tampilan saat union skin aktif



Icon union skin 12 |



tutorial by erik



6. kemudian tekan CTRL + Enter untuk memutar animasi. c. Animasi Rotasi kali ini kita akan membahas tentang cara membuat animasi rotasi dengan adobe Flash CS3 Profesional. Langkah – langkahnya adalah sebagai berikut. 1. Buatlah objek bintang dengan menggunakan PollyStar Tool. 2. Gambarkan objek bintang pada area kerja (stage) 3. Kemudian lakukan insert keyframe pada frame ke 30. Dan kemuadian beri Motion tween. Jika motion tween berhasil maka gambarnya seperti dibawah ini.



4. Kemudian aktifkan panel properties



Pada option Rotate rubah yang semula none memjadi CCW. 5. Tekan CTRL+ Enter untu memulai animasi. d. Animasi Motion Shape kali ini kita akan membahas tentang bagaimana caranya membuat animasi motion shape, animasi motion shape ini adalah animasi yang digunakan untuk membuat sebuah objek berubah kedalam bntuk yang lain misalkan dari bentuk kotak berubah kedalam bentuk bintang. 13 |



tutorial by erik



Langkah – langkahnya adalah sebagai berikut. 1. Aktifkan Flash CS3 , Kemudian 2. Gambarlah obyek kotak pada frame pertama 3. Kemudian klik pada frame ke satu kemudian klik kanan lalu pilih creat motion shape. 4. Pada frame ke 15 lakukanlah insert blankeyframe 5. Kemudian gambarkan obyek lingkaran pada stage. 6. Kemudian pada frame ke 30 lakukan insertblank keyframe 7. Dan gambarkan obyek bintang pada area stage. Dan apabila animasi motion shape sudah aktif maka gambarnya akan seperti di bawah ini



e. Animasi Teks kali ini kita akan mempelajari bagaimana cara membuat animasi teks. Langkah langkahnya sebagai berikut 1. Buaka adobe flash cs3 2. Ketikkan teks “ Animasi Teks” pada area stage 3. Klik teks “ Animasi Teks “ kemudian klik kanan lalu pilih break apart 4. Kemudian sleksi kembali teks yang sudah kita break apart 5. Setelah itu klik kanan kemudian pilih distrube to layer Maka tampilan distrube to layer akan seperti gambar di bawah ini



14 |



tutorial by erik



6. Setelah itu geser frame atu pada hutuf sat frame lebih banyak dari pada layer a begitu juga dengan layer i dan seterusnya sehinggsa berbentuk anak tangga seperti gambar di baah ini.



7. Tekan tobol CTRL + ENTER pada keyboard untuk memjalankan animasi. f. Tombol Animasi Kali ini kita akan mempelajari bagai mana cara membuat tombol animasi. Langkah langkahnya adalah sebagai berikut: 1. Aktifkan Adobe flash cs 3 2. Buka file tombol gelombang yang terdapat pada cd Interaktif 3. Apada panel liberari drag simbol button 2 dan simbol muvie clip kedalam stage 4. Klik gamda pada tombol 2 untuk masuk kedalam tombol 5. Setelah kita masuk kedalan simbol tombol 2 selanjutnya kita akan melakukan insert keyframe pada frame over dan down 6. Kemudian pada frame over klik obyek garis lingkaran yang ada pada frame over kemudian tkan f8 pada keyboard untuk 15 |



tutorial by erik



mengimport obyek tersebut keedalam simbol. Kemudian pada kotak pilihan convert to simbol kita pilih muvie clips dan pada registration kita pilih yang di tengah 7. Kemudian klik ganda pada garis lingkaran yang ada pada frame over untuk masuk kedalam simbol muvie clip 8. Kemudian pada frame ke ke 5 dan 10 kita lakukan insert keyframe. 9. Pada frame ke 1 dan 5 kita beri motion tween 10.



Pada frame ke 5 ubah bentuk garis lingkaran menjadi



oval 11.



Setelah itu kita keluar dari simbol lingkaran dan masih di



simbol tombol 12.



Kita klik obyek anak panah yang ada pada frame over



kemudian covert obyek tersebut kedalam simbol movie clip 13.



Kemudian masuk kedalam simbol movie clip anak panah



tersebut dan pada frame ke 1 kita beri motion tween dan padframe ke 5 dan 10 lakukan insert keframe. 14.



Pada frame ke 5 letakkan obyek anak panah agak ke



depan 15.



Tekan CRTL + ENTER untuk memutar animasi.



g. Efek Gelombang Air pada kali ini kita akan mempelajari bagaimana cara membuat efek gelombang air pada gambar bitmap. Langkah langkanya sebagai berikut 1. Aktifkan flash CS3 2. Buka file efek gelobang yang ada pada cd interaktf



16 |



tutorial by erik



3. Pada panel liberary terdapat 2 obye yaitu image VEDC dan gambar sebuah lingkaran dengan nama simbol 1 4. Kemudian buatlah 3 layer yaitu layer 1,2, dan 3



5. Pada layer ke 1 masukan image VEDC lalu copy image tersebut dan paste pada layer ke 2 6. Kemudian pada layer ke 3 masukan simbol satu 7. Kemudian pada layer ketiga ubah ukuran image seperti di bawah ini



8. Pada layer ke 1 dan 2 dan pada frame ke 50 lakukan insert frame 9. Dan pada layer ke 3 lakukan insert keyframe pada layer ke 50 10.



Pada layer 3 pada frame ke 50 perbesar ukuran



obyeknya dan beri motion tween 11.



17 |



Tekan tobol CTRL + ENTER untuk memutar animasi.



tutorial by erik