NOMOR KODE/SKS : VCD0029 / 3 SKS / Semester III - Agustus 2010 / 13 Week DOSEN PEMBINA : Andre Oentoro : Rudi Margono TUTOR : Agus Susanto : David Junaedi.

Presentasi berjudul: "NOMOR KODE/SKS : VCD0029 / 3 SKS / Semester III - Agustus 2010 / 13 Week DOSEN PEMBINA : Andre Oentoro : Rudi Margono TUTOR : Agus Susanto : David Junaedi."— Transcript presentasi:

1 NOMOR KODE/SKS : VCD0029 / 3 SKS / Semester III - Agustus 2010 / 13 Week DOSEN PEMBINA : Andre Oentoro : Rudi Margono TUTOR : Agus Susanto : David Junaedi

2 TUJUAN INSTRUKSIONAL UMUM Mahasiswa mampu membuat Animasi, produk Multimedia, dan portfolio website dengan software Adobe Flash CS3 TUJUAN INSTRUKSIONAL KHUSUS Mahasiswa mengenal Adobe Flash CS3 Mahasiswa mampu mengenal bagaimana cara mengoperasikannya

3 PROSES PENGAJARAN Untuk mata kuliah VCD0029, yang diutamakan adalah praktek, dimana cara pembelajaran yang terbaik adalah mencoba. –Melihat contoh, dan mencoba –Membaca buku, dan mencoba –Sketsa ide, dan mencoba –Browsing, dan mencoba Semakin sering praktek dan mencoba, proses pembelajaran akan semakin berhasil, sedangkan dalam mata kuliah ini mahasiswa akan dibimbing pada saat pertemuan. Minat untuk mencoba, memiliki peranan penting dalam keberhasilan proses pengajaran.

4 MENGAPA MENCOBA? Mengapa? Sebab, mahasiswa hanya memiliki waktu untuk bertanya dan berdiskusi dengan dosen hanya pada saat kuliah. Sedangkan dalam waktu satu minggu, 97% waktu dihabiskan untuk mengerjakan sesuatu yang lain. Keberhasilan mahasiswa dalam mata kuliah ini ditentukan atas kemauan meluangkan waktu untuk MENCOBA.

5 PROSES EVALUASI DAN PENILAIAN Project 115% Project 215% UTS15% Project 335% UAS20% Untuk penilaian project, didasarkan pada: - Keaktifan masing-masing individu dalam proses perkuliahan - Desain dari project (IDE) - Hasil dari project (PROBLEM SOLVING) Absensi maksimum adalah tiga kali, melebihi absensi maksimum akan dinyatakan tidak lulus.

6 MENGENAI PROJECT DI VCD0029 Project yang dikerjakan adalah bagian-bagian dari suatu kesatuan project besar, yang akan dikembangkan bersama pada saat belajar dalam mata kuliah VCD0029. Mahasiswa harus memikirkan tema secara keseluruhan dalam membuat project, penilaian akan dilakukan secara terpisah per project kecil PROJECT 1: Animasi Intro PROJECT 2: Sistem navigasi dan galeri multimedia PROJECT 3: Website Sebelum UAS, maka kedua project akan digabungkan menjadi satu. Tema yang digunakan harus sama, agar dapat dihasilkan karya yang bagus dan bisa dipublikasikan sebagai portfolio mahasiswa di kemudian hari. WEBSITE

7 PROSES Setiap pertemuan akan diawali dengan perkuliahan untuk memberikan materi. Waktu perkuliahan + 60 menit, setelah perkuliahan selesai, mahasiswa bisa mencoba. Mahasiswa boleh break 30 menit sekitar pukul 10.00 Pada saat praktek, mahasiswa wajib mencoba, juga bertanya pada pembimbing masing- masing Pada saat perkuliahan, DILARANG MEMBUKA PROGRAM LAIN !!

8 APA ITU FLASH? Sedikit sejarah tentang program animasi flash: Pertama dipublikasikan oleh perusahaan software skala kecil bernama FutureWave Software, pada tahun 1993 perusahaan ini meluncurkan SmartSketch, yang merupakan program gambar dengan menggunakan PenPoint OS. Tujuan dari program ini adalah mempermudah cara menggambar dengan komputer agar bisa sama mudahnya dengan menggambar dengan kertas dan pensil. Pada tahun 1996, perusahaan yang sama meluncurkan software yang merupakan dasar dari Flash, yaitu FutureSplash Animator -- program ini merupakan program animasi vector-based, yang ditujukan untuk pengguna WorldWideWeb -- atau internet. Pada November 1996, perusahaan ini dibeli oleh Macromedia, dan diluncurkan ulang sebagai FLASH, singkatan dari F uture dan sp LASH Macromedia meluncurkan software Macromedia Flash 1 - 5, kemudian Macromedia Flash MX (versi 6) dan MX 2004 (versi 7), dan Macromedia Flash 8. PERTEMUAN 1

9 ADOBE FLASH? Bagaimana dengan Adobe?: Pada tahun 2007, Adobe pertama kali meluncurkan program ini dengan nama Adobe Flash CS3, yang merupakan bagian dari bundel program Creative Suite 3 yang diluncurkan bersama dengan Adobe Illustrator CS3 dan Adobe Photoshop CS3, dan program lainnya. Adobe Flash CS3 yang pertama menggunakan Actionscript 3.0 Yang terbaru adalah Adobe Flash CS5, pada versi ini sudah ditambahkan inverse kinematics (untuk menganimasikan dengan BONES), dan 3D object tools. PERTEMUAN 1

10 APA YANG BISA DIHASILKAN DENGAN FLASH? Website Multimedia Profile Menyembunyikan link dalam website Animasi Kartun Animasi Teks Gambar vector (terutama dengan tablet akan lebih mudah) Gabungan antara gambar dan suara PERTEMUAN 1

11 BAGAIMANA MENGGUNAKAN ADOBE FLASH CS3? Membuat animasi baru: Pilih animasi Flash yang menggunakan Actionscript 2.0 Actionscript 2.0 dan actionscript 3.0 sangat jauh berbeda, dan untuk belajar Flash, akan lebih mudah apabila mempelajari mulai dari Actionscript 2.0 terlebih dahulu. PERTEMUAN 1

12 BAGAIMANA MENGGUNAKAN ADOBE FLASH CS3? PERHATIKAN!! Setting untuk ukuran dan frame rate juga harus dilakukan terlebih dahulu untuk memastikan kualitas file yang akan dihasilkan. Ukuran selalu dihitung dari pojok kiri atas. Perhatikan posisi dan penempatan setiap obyek yang ada, sehingga apabila setelah animasi selesai, atau hendak merubah layout pada saat terakhir, tidak sampai timbul masalah penempatan akibat dari kurang terencananya posisi dan penempatan. PERTEMUAN 1

13 BAGAIMANA MENGGUNAKAN ADOBE FLASH CS3? Tools dalam Adobe Flash CS3 1. Tools untuk Pilihan Selection Tool (V) Digunakan untuk menyeleksi obyek yang akan diubah -- baik digeser, dihapus, diedit, dsb Subselection Tool (A) Digunakan untuk menyeleksi bagian dari obyek yang akan diubah, terutama bagian dari anchor dan handle Free Transform Tool (Q) Digunakan untuk merubah obyek yang sudah dipilih Gradient Transform Tool (F) Digunakan untuk merubah arah gradient dan bentuk gradient Lasso Tool (L) Digunakan untuk memilih beberapa obyek sekaligus dengan lasso PERTEMUAN 1

14 BAGAIMANA MENGGUNAKAN ADOBE FLASH CS3? 2. Tools untuk menggambar Pen (P, =, -, C) Digunakan untuk menggambar garis secara vector dengan anchor dan handle, sama dengan produk Adobe lainnya. Convert Anchor Point Tool (C) digunakan untuk menambahkan atau merubah handle. Text Tool (T) Digunakan untuk menambahkan teks, bisa berupa Static Text, Dynamic Text, ataupun Input Text Line Tool (N) Digunakan untuk menggambar garis dengan mudah. Dilengkapi dengan fasilitas snap. Rectangle dan Rectangle Primitive Tool (R) Digunakan untuk menggambar bentuk kotak Untuk membuat Rounded Rectangle, tekan cursor atas dan bawah. Oval dan Oval Primitive Tool (O) Digunakan untuk menggambar bentuk oval/ellipse Polystar Tool Digunakan untuk menggambar bintang atau segi banyak Perhatikan miter, cap, join, dan options untuk merubah setting bentuk. PERTEMUAN 1

15 BAGAIMANA MENGGUNAKAN ADOBE FLASH CS3? 3. Tools untuk editing Ink Bottle Tool (S) Digunakan untuk merubah warna line dalam obyek Paint Bucket Tool (K) Digunakan untuk merubah warna fill dalam obyek Eyedropper Tool (I) Digunakan untuk mengambil setting warna dalam obyek Eraser Tool (E) Digunakan untuk menghapus shape PERTEMUAN 1

16 BAGAIMANA MENGGUNAKAN ADOBE FLASH CS3? 4. Tools lainnya Hand Tool (H) atau (SPACE) Digunakan untuk menggeser bidang gambar Magnification Tool (M) Digunakan untuk merubah ukuran zoom bidang gambar 5. Tambahan Tools Untuk setiap tools yang digunakan, akan muncul tools tambahan di bagian bawah kotak tools. Masing - masing tambahan tools ini berguna untuk meningkatkan kemampuan kerja dan kecepatan penggunaan program Flash. PERTEMUAN 1

17 LAYER DAN TIMELINE LAYER menunjukkan lapisan dari masing - masing gambar dan animasi yang ada. TIMELINE menunjukkan garis waktu, dimana setiap animasi dalam flash selalu memiliki TIMELINE yang berdiri sendiri. Untuk menghentikan pergerakan disini, harus menggunakan perintah stop() dalam actionscript atau gotoAndPlay() dan gotoAndStop() dalam actionscript. Ini akan dipelajari lebih lanjut. KEYFRAME adalah titik yang menunjukkan perbedaan antara animasi dalam satu layer. Semakin banyak KEYFRAME yang terdapat dalam suatu layer, maka akan semakin detail animasi tersebut. Selain itu, semakin banyak keyframe juga mengakibatkan semakin besarnya ukuran file. PERTEMUAN 1

18 LAYER DAN TIMELINE SCENE digunakan untuk membedakan satu adegan dengan adegan lainnya dalam animasi, bisa juga digunakan untuk membedakan satu halaman dengan halaman lainnya dalam sebuah website atau presentasi. WORKSPACE digunakan untuk menyimpan masing-masing setting yang sudah ada. Ini untuk mempermudah dan mempercepat pekerjaan, apabila hendak berpindah dari pekerjaan animasi ke website design, atau dari menggambar 2D ke presentasi, dsb. PERTEMUAN 1

19 SYMBOL Untuk merubah obyek menjadi sebuah symbol, digunakan tombol F8 (Convert to Symbol) Ada tiga macam Symbol dalam Flash: –Movie Clip –Button –Graphic PERTEMUAN 1

20 SYMBOL Setiap symbol memiliki tombol registrasi secara terpisah, ini digunakan untuk menentukan koordinat 0,0 dari symbol tersebut. Pengaturan titik 0,0 ini sangat berguna apabila kita hendak meletakkan layout yang presisi. Pengaturan titik registrasi ini, harus dilakukan di awal pembuatan symbol. Semua symbol akan dimasukkan dalam LIBRARY, dan semua symbol dapat digunakan lebih dari satu kali dalam animasi. Symbol bisa dibedakan melalui: –Nama Symbol –Nama Instance PERTEMUAN 1

21 SYMBOL APAKAH PERBEDAAN ANTARA KETIGA SYMBOL TERSEBUT? PERTEMUAN 1

22 TWEEN Tween adalah dasar dari animasi yang digunakan dalam FLASH, yang merupakan singkatan dari in-between. Untuk menggunakan Tween, obyek harus berada pada layer yang terpisah, karena setiap layer hanya bisa memiliki sebuah Tween saja. Apabila obyek yang dianimasikan bukan merupakan Symbol, secara otomatis akan terbentuk Tween dalam LIBRARY, ini untuk memudahkan editing pada waktu lain. PERTEMUAN 1

23 TWEEN Ada dua jenis TWEEN: Motion Tween Dasar dari setiap animasi yang ada, kebanyakan animasi yang digunakan adalah MOTION TWEEN, yang meliputi: pergeseran, rotasi, skala, dan juga pergerakan melalui GUIDING PATH Shape Tween Digunakan untuk merubah satu bentuk ke bentuk lainnya. Perhatikan bahwa menggunakan SHAPE TWEEN harus sangat memperhatikan layer dan obyek yang ada. Untuk mempermudah penggunaan SHAPE TWEEN, gunakan satu obyek saja pada tiap layer dan keyframe. PERTEMUAN 1

24 PERTEMUAN SELESAI PERTEMUAN 1

25 TUGAS KECIL Cari contoh website dengan animasi flash, yang dianggap bagus dan dapat digunakan sebagai referensi untuk pembuatan PROJECT masing-masing. Silahkan cari 5 contoh Cari contoh website dengan animasi flash, yang dianggap kurang berhasil, baik secara desain maupun secara teknis pemrograman atau dalam ide dan interaktivitasnya. Silahkan cari 3 contoh

26 PENJELASAN MENGENAI PROJECT Pada akhir perkuliahan, masing-masing mahasiswa harus dapat menghasilkan sebuah galeri untuk menunjukkan hasil karya yang ada. Galeri ini bisa dibuat dalam CD, file, ataupun upload ke website pribadi. Apabila memungkinkan, dibuat berkelompok dengan masing-masing kelompok beranggotakan tiga orang. Project akan dibagi menjadi tiga bagian: 1. Project sebelum UTS Membuat animasi intro untuk ditunjukkan sebelum galeri. Yang harus diperhatikan dalam animasi adalah: - Konsep - Desain - Timing - Multimedia - Interaktivitas - Kesinambungan antara animasi intro dengan galeri

27 PENJELASAN MENGENAI PROJECT 2. Project setelah UTS Membuat galeri yang akan menampung karya-karya mahasiswa. Yang harus diperhatikan adalah: - Konsep - Isi - Interaktivitas - Ukuran file - Cara menggabungkan antara karya yang sudah ada kedalam galeri

28 PENJELASAN MENGENAI PROJECT 3. Penggabungan kedua project Dikumpulkan setelah UAS Karena project adalah website, harus diupload ke website masing-masing dan silahkan kumpulkan nama domain yang ada, berikut source file (FLA dsb) dalam CD.

29 PENJELASAN MENGENAI PROJECT Kelas dibagi menjadi dua kelas, dimana masing-masing kelas memiliki seorang dosen dan seorang tutor. Masing-masing kelompok akan dibimbing oleh dosen / tutor Jumlah kelompok boleh satu, dua, atau tiga orang. Tidak ada nilai tambahan meskipun tidak sampai tiga orang. Setelah kelompok ditentukan, kelompok mana yang akan mendapat pembimbing akan diacak. Pembimbing masing-masing kelompok akan melakukan evaluasi terhadap hasil project, memberikan bimbingan, dan memberikan asistensi pada masalah yang dihadapi.

30 PENJELASAN MENGENAI PROJECT Untuk pertemuan berikutnya: Masing-masing kelompok wajib untuk membawa hasil kreasi dalam bentuk bitmap dan vector image dalam Adobe Photoshop dan Illustrator untuk diintegrasikan ke dalam Flash. Silahkan baca bacaan untuk minggu ini dan minggu depan, dan silahkan mencari tema dan kelompok untuk memulai tugas.