Multimedia

1,830 views

Published on

Published in: Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,830
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Multimedia

  1. 1. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Daftar isiDaftar isi ...................................................................................... iA. Konsep Dasar Grafik dan Pencitraan ................................... 1 1. Grafik Komputer ............................................................ 1 2. Pengolahan Citra ........................................................... 3 3. Operasi Pengolahan Citra .............................................. 4B. Dasar-dasar Multimedia ...................................................... 6 1. Pendahuluan ................................................................. 7 2. Aplikasi Pendukung Multimedia .................................. 10C. Pengenalan Adobe Photoshop .......................................... 12 1. Konsep ........................................................................ 12 2. Area Kerja.................................................................... 13 3. Kakas atau Tools Adobe Photoshop ............................. 15D. Pengenalan dan Penggunaan Adobe Flash ........................ 34 1. Konsep ........................................................................ 34 2. Area Kerja.................................................................... 35 a. Stage .................................................................. 35 b. Tools .................................................................. 36 c. Panel .................................................................. 36 d. Property inspector.............................................. 36 Page i
  2. 2. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 e. Timeline ............................................................. 36 f. Tools Adobe Flash .............................................. 37 g. Contoh Implementasi ......................................... 39E. Mengenal Script dalam Flash ............................................ 47F. Pengenalan Story Board .................................................... 50G. Daftar Pusataka ................................................................. 54H. Penulis ..................................... Error! Bookmark not defined. Page ii
  3. 3. Mulok Multimedia – SMK Prakarya Internasional 1952 2011A. Konsep Dasar Grafik dan Pencitraan 1. Grafik Komputer Grafik memiliki pemahaman yaitu proses untukmenciptakan suatu gambar berdasarkan deskripsi obyekmaupun latar belakang yang terkandung pada gambar tersebutatau arti lain adalah teknik untuk membuat gambar obyek sesuaidengan obyek tersebut di alam nyata (realism). Grafik Komputer adalah suatu proses pembuatan,penyimpanan dan manipulasi model dan citra. Model berasal daribeberapa bidang seperti fisik, matematik, artistik dan bahkanstruktur abstrak. Istilah ”Grafik Komputer” ditemukan tahun 1960oleh William Fetter dengan karya pembentukan desain modelcockpit (Boeing) dengan menggunakan pen plotter dan referensimodel tubuh manusia 3 Dimensi.Komponen Dasar Sistem Grafik Interaktif meliputi : – Masukan : mouse, tablet dan stylus, scanner, live video stream, dll – Proses dan Penyimpanan – Keluaran : layar, printer berbasis kertas, perekam, video, dll. Konteks grafik memiliki pemahaman yang luas,perkembangakan yang relatif cepat menuntut kita untuk selalu Page 1
  4. 4. Mulok Multimedia – SMK Prakarya Internasional 1952 2011update dalam mengkitu setiap langkah dan perjalanan setiaprevolusi dari komputasi, dalam hal ini Grafik Multimediainteraktif. Grafik sebagai kunci kemampuan teknologi dalamevolusi lingkungan komputasi mulai dikenal dengan istilahberagam, diataranya : – Graphical User Interfaces (GUI) – Komputasi Visual, contoh desktop publishing, visualisasi scientific, visualisasi informasi, dsbKegiatan yang Terkait dengan Grafik Komputer diantaranya : – Pemodelan geometris : menciptakan model matematika dari objek-objek 2D dan 3D. – Rendering : memproduksi citra yang lebih solid dari model yang telah dibentuk. – Animasi : Menetapkan / menampilkan kembali tingkah laku / behavior objek bergantung waktu. Page 2
  5. 5. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 2. Pengolahan Citra Sedangkan, pengolahan citra memiliki maknamemperbaiki kualitas gambar, dilihat dari aspek radiometrik(peningkatan kontras, transformasi warna, restorasi citra) dan dariaspek geometrik (rotasi, translasi, skala, transformasi geometrik).Citra merupakan hasil akhir dari sintesa, disain, manufaktur,visualisasi yang menghasilkan seuah karya atau image sebagaimedia baru. Pemrosesan Citra untuk Ditampilkan di Layar Vectormemiliki tampilan sebagai berikut : Sehingga, definisi lain dan tujuan pengolahan citra atauImage Processing merupakan proses memperbaiki kualitas citraagar mudah di interpretasi oleh manusia atau komputer, sertasuatu teknik pengolahan citra dengan mentrasformasikan citra Page 3
  6. 6. Mulok Multimedia – SMK Prakarya Internasional 1952 2011menjadi citra lain, sebagai contoh : pemampatan citra (imagecompression). Pengenalan pola adalah tahapan selanjutnya atauanalisis dari pengolahan citra, yang memiliki tujuanmengelompokkan data numerik dan simbolik (termasuk citra)secara otomatis oleh komputer agar suatu objek dalam citra dapatdikenali dan diinterpreasi. 3. Operasi Pengolahan Citra a. Perbaikan kualitas citra(image enhacement) Bertujuan untuk memperbaiki kualitas citra dengan memanipulasi parameter-parameter citra. Perbaikan ini meliputi :  Perbaikan kontras gelap/terang  Perbaikan tepian objek (edge enhancement)  Penajaman (sharpening)  Pemberian warna semu(pseudocoloring)  Penapisan derau (noise filtering) b. Pemugaran citra(image restoration) Bertujuan untuk menghilangkan cacat pada citra. Perbedaannya dengan perbaikan citra : penyebab degradasi citra diketahui. Perbaikan ini meliputi :  Penghilangan kesamaran (deblurring)  Penghilangan derau (noise) Page 4
  7. 7. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 c. Pemampatan citra (image compression) Bertujuan untuk mengolah citra direpresentasikan dalam bentuk lebih kompak, sehingga keperluan memori lebih sedikit namun dengan tetap mempertahankan kualitas gambar (misal dari .BMP menjadi .JPG) d. Segmentasi citra (image segmentation) Bertujuan untuk memecah suatu citra ke dalam beberapa segmen dengan suatu kriteria tertentu. Berkaitan erat dengan pengenalan pola. e. Pengorakan citra (image analysis) Bertujuan untuk menghitung besaran kuantitatif dari citra untuk menghasilkan deskripsinya. Diperlukan untuk melokalisasi objek yang diinginkan dari sekelilingnya, Operasi ini meliputi :  Pendeteksian tepi objek (edge detection)  Ekstraksi batas (boundary)  Represenasi daerah (region) f. Rekonstruksi citra (Image recontruction) Bertujuan untuk membentuk ulang objek dari beberapa citra hasil proyeksi. Page 5
  8. 8. Mulok Multimedia – SMK Prakarya Internasional 1952 2011B. Dasar-dasar Multimedia Berangkat dari sebuah pendapat yang dikemukakan olehUmar Hamalik (1986), Djamarah (2002) dan Sadiman, dkk(1986), mengelompokkan media menjadi beberapa kategoriberdasarkan jenisnya, yaitu : a. Media auditif, yaitu media yang hanya mengandalkan kemampuan suara saja, seperti tape recorder. b. Media visual, yaitu media yang hanya mengandalkan indra penglihatan dalam wujud visual. c. Media audiovisual, yaitu media yang mempunyai unsur suara dan unsur gambar. Jenis media ini mempunyai kemampuan yang lebih baik, dan media ini dibagi ke dalam dua jenis, yaitu : 1. Audiovisual diam, yang menampilkan suara dan visual diam, seperti film sound slide. 2. Audiovisual gerak, yaitu media yang dapat menampilkan unsur suara dan gambar yang bergerak, seperti film, video cassete dan VCD. Page 6
  9. 9. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 1. Pendahuluan Multimedia berasal dari bahasa latin (multi & media).Multi artinya banyak, dan Media (medium) artinya sesuatu yangdigunakan untuk menyampaikan atau menginformasikan.Sehingga Multimedia dapat diartikan sebagai pengguna beberapamedia yang berbeda untuk menggabungkan dan menyampaikaninformasi dalam bentuk teks, audio, grafik, animasi, dan video. Kata multimedia memiliki runtutan yang luas,perkembangan dari kata multimedia mengalami penambahanmakna yang digabungkan dengan suatu sistem. Sistemmengandung arti kumpulan-kumpulan yang memiliki unsurketerkaitan antara satu dan yang lainnya. Sehingga penggabungantiga kata Sistem, Multi dan Media memiliki makna lain yang bisadiartikan sebagai suatu teknologi yang menggabungkan berbagaisumber informasi seperti teks, grafik, bunyi, animasi, video danlain sebagainya, dimana informasi disampaikan oleh sistemkomputer secara interaktif.”. Multimedia dalam konteks komputer menurut Hofstetter2001 adalah : pemanfaatan komputer untuk membuat danmenggabungkan teks, grafik, audio, video, dengan menggunakantools yang memungkinkan pemakai berinteraksi, berkreasi, danberkomunikasi. Page 7
  10. 10. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Pada saat kita bekerja pada dunia komputer grafis danmultimedia, salah satu topic yang cukup membingungkan adalahmengenai perbedaan atara grafik bitmap / raster dan grafikvector. Terkadang pemikiran kita ada diposisi yang sama. Jadiapa perbadaannya? Dibawah ini akan dijelaskan mengenaiperbedaan antara keduanya.  Bitmap Image Sebuah image bitmap (atau dikenal juga dengan image“raster”), pada dasarnya mirip dengan sebuah papan catur yangsangat besar, apabila kita memberi warna yang berbeda padasetiap petaknya, pada akhirnya kita dapat membuat sebuahgambar berdasarkan warna yang sudah kita tentukan tersebut. Bisa dilihat pada kedua gambar diatas bahwa pada image1, apabila kita mengambil sebagian kecil detail pada imagetersebut, sebenarnya yang ada di dalamnya adalah petak-petakkecil seperti yang terdapat pada image 2. Satuan dari bitmap Page 8
  11. 11. Mulok Multimedia – SMK Prakarya Internasional 1952 2011image ini ada lah DPI (Dot Per Inch). Format dari bitmap imageini biasanya : TIFF (.tif), BMP (.bmp), PICT (.pct), GIF (.gif),JPEG (.jpg).  Vector Image Vector image adalah, sebuah image / grafik dimana setiapbentuk dan letak dari sebuah garisnya didefinisikan melaluibesaran matematis. Vector image pada dasarnya adalahsekumpulan titik yang terhubung oleh garis-garis dari berbagaimacam bentuk, yang diisi oleh warna yang solid maupun gradasi. Jadi, jika sebuah titik A terhubung dengan titik B olehgaris yang membentuk sebuah bidang, dimana bentuk dari bidangtersebut didefinisikan dengan besaran matematis. Maka, semakinbanyak titik yang terhubung, maka vektor tersebut menjadisemakin rumit. Format dari bitmap image ini biasanya : EPS(Encapsulation Post Script -.eps), Adobe Illustrator (.ai), CorelDraw (.cdr), Adobe (dulu Macromedia) Freehand (.FHx), Adobe(dulu Macromedia) Flash (.fla). Page 9
  12. 12. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Sebuah kasus mengenai hubungan resolusi, dimisalkanbegini, apabila ada suatu image dalam satu satuan luas (1inch2)dengan jumlah dit atau pixel 70 x 70 (artinya memiliki resolusi4900 dpi) jika diperbesar menjadi 10 inch, maka jumlah pixelnyatetap 4900 dpi. Tetapi resolusinya berubah menjadi 4900 : 10 =490 dpi. Maka hal ini akan mengakibatkan gambar menjadi kaburdan pecah. Bit depth (kedalaman warna) sering disebut juga denganpixel depth atau color depth. Dimana bit depth menentukan berapabanyak informasi warna yang tersedia untuk ditampilkan ataudicetak dalam setiap pixel. Semakin besar nilainya maka akansemakin bagus kualitas image yang dihasilkan. Namun tentunyaukuran filenya akan semakin besar. 2. Aplikasi Pendukung Multimedia Perkembangan teknologi pada jaman sekarang ini sudahtidak dapat di cegah atau dihalangi lagi. Etika kedisplinan ilmuberbasis ITC sudah berlaku bebas dan tak bisa terhalangi denganapapun. Animasi global, pembajakan liar dan pengendapanprosedur serta gradasi etika sebuah konten dalam ranahkompetensi berbasis IT sudah dimungkinkan adanya. Sehinggawajar apabila saat ini masyarakat tradisional dan masyarakat Page 10
  13. 13. Mulok Multimedia – SMK Prakarya Internasional 1952 2011modern mulai berpindah dan beralih menjadi masyarakatInformasi.Paradigma baru mulai muncul pada ranah teknologi komputerberbasis multimedia. Banyak orang yang memanfaatkan aplikasiguna memanipulasi berbagai hal sehingga terlihat menjadimenarik, Contoh yang sering di temui adalah ketika seseorangmengedit sebuah foto atau membuat presentasi interaktif berbasisanimasi.Banyak aplikasi yang bermunculan dipasar multimedia, bahkanvendor yang terdahulu sekarang mulai merapat dengan vendorsejenis. Katakanlah Macromedia yang saat ini sudah merapat danmenggunakan nama Adobe.Adapun aplikasi pendukung multimedia adalah Adobe, Pinacle,Macromedia, Corel, Microsoft, Aple dan sebagainya. Masihbanyak lagi yang sekarang beredar di pasaran IT, baik untukpenggunaan pada mobile phone atau pun Komputer.Dalam pembelajaran multimedia ini ada beberapa aplikasi yangakan dikenalkan dan dipelajari selama dua semester, diantaranya :  Adobe Photoshop  Adobe Flash  Pinacle  StoryboardPRO Page 11
  14. 14. Mulok Multimedia – SMK Prakarya Internasional 1952 2011  CMS Joomla, dan  HTML DasarC. Pengenalan Adobe PhotoshopImage Editing merupakan sebuah istilah dalam multimedia yangdifokuskan pada manipulasi dan editing gambar, objek foto danview pemandangan serta yang lainnya. Selain itu, image editingjuga dapat diklasifikasikan sebagai suatu cara dalam membuatsuatu produk berbasis gambar, baik itu yang berunsur text, objekgambar dan lain sebagainya.Pada bagian ini, akan dibahas mengenai teknik croping, cutting,dan editing serta bagaimana menggunakan blending option danfitur yang ada pada aplikasi Adobe Photoshop. 1. Konsep Adobe Photoshop adalah sebuah program pengolah image(image processor) untuk image bitmap dari Adobe SystemIncorporated ( http://www.adobe.com). Adobe Photoshop, atau biasa disebut Photoshop, adalahperangkat lunak editor citra buatan Adobe System yangdikhususkan untuk pengeditan foto/gambar dan pembuatan efek.Perangkat lunak ini banyak digunakan oleh fotografer digital danperusahaan iklan sehingga dianggap sebagai pemimpin pasar(market leader) untuk perangkat lunak pengolah gambar, dan,bersama Adobe Acrobat, dianggap sebagai produk terbaik yang Page 12
  15. 15. Mulok Multimedia – SMK Prakarya Internasional 1952 2011pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasiini disebut dengan nama Photoshop CS, versi sembilan disebutPhotoshop CS2 dan demikian seterusnya Adobe photoshopsebagai salah satu tools yang sangat baik dan telah banyakdigunakan oleh banyak orang mulai dari pemula sampai tingkatprofessional. Photoshop sangat baik untuk membantu dalambidang percetakan, internet maupaun elektronik. Photoshop juga memiliki hubungan erat dengan beberapaperangkat lunak penyunting media, animasi, dan authoringbuatan-Adobe lainnya. File format asli Photoshop, .PSD, dapatdiekspor ke dan dari Adobe ImageReady. Adobe Illustrator,Adobe Premiere Pro dan After Effects. 2. Area Kerja Page 13
  16. 16. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Area kerja photoshop terbagi menjadi beberapa bagianmenu yaitu: Menu Bar, Option Bar, Toolbox, Pallet Well, danPallete. a. Menu bar: berisi menu-menu yang dapat membantu memudahkan dalam bekerja dan terorganisir sesuai dengan topik yang saat itu digunakan. Sebagai contoh, menu Layers berisi menu-menu yang berhubungan dengan Pallete Layers. b. Option bar: berisi informasi tentang tool yang saat itu digunakan. c. Toolbox: perangkat utama yang digunakan untuk membuat, mengedit gambar dan teks. d. Pallete well: membantu dalam menata beberapa palet yang digunakan. e. Pallete: membantu memonitor dan mengedit gambar (image). Page 14
  17. 17. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 3. Kakas atau Tools Adobe Photoshop Seperti yang dijelaskan pada bagian atas bahwa tools atauyang dikenal dengan toolsbox merupakan bagian utama padaperangkat photoshop. Toolsbox memiliki peran penting dalamproses editing, toolsbox dibagi menjadi beberapa bagian,diantaranya : Page 15
  18. 18. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanMarquee Merupakan toolTool seleksi. Dibagi menjadi beberapa sub tools diantaranya ; Rectangle Marquee Tool: untuk membuat seleksi berbentuk persegi. Elliptical Marquee Tool: untuk membuat seleksi berbentuk lingkaran. Single Row Marquee Tool: untuk membuat seleksi berbentuk garis horisontal. Single Column Marquee Tool: untuk membuat seleksi berbentuk garis vertikal. Page 16
  19. 19. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanMove Tool Untuk memindahkan objek (teks maupun grafik).Lasso Tool Tool seleksi secara bebas. Dibagi menjadi beberapa sub tools, diantaranya : Lasso Tool: untuk membuat seleksi secara bebas (handsfree) Polygon Lasso Tool: untuk membuat seleksi Magnetic Lasso Tool: untuk membuat seleksi bebas berdasarkan tingkat kesamaan warna. Page 17
  20. 20. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanMagic Untuk membuatWand Tool seleksi berdasarkan kesamaan warna.Crop Tool Untuk membuang bagian dari image canvas yang tidak digunakan.Slice Tool Untuk membuat irisan pada image menjadi beberapa bagaian secara otomatis.Slice Select Untuk memilih salahTool satu bagian yang telah dibuat menggunakan Slice Tool. Page 18
  21. 21. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanHealing Untuk memperbaikiBrush Tool bagian image yang cacat, kotor, maupun tergores dengan warna lain dengan cara menduplikasi dari warna atau pola pada bagian lain.Pacth Tool Untuk memperbaiki bagian image yang cacat, kotor, maupun tergores dengan warna lain dengan cara memilih sumber arna/pola pada bagian lain.Spot Tool ini dapatHealing memindahkanBrush Tool noda/cacat secara cepat dan ketidaksempurnaan lain pada gambar. Page 19
  22. 22. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanRed Eye Seperti namanya,Tool tool in dapat menghilangkan efek Red eye pada foto Anda.Brush Tool Untuk membuat goresan kuas ketika mewarnai objek.Pencil Tool Untuk membuat garis secara bebas dengan goresan yang menyerupai sebuah pensil.Clone Untuk menggambarStamp Tool dari sampel pada sebuah image.Pattern Untuk menggambarStamp Tool dari bagian atau pola yang telah diambil.History Untuk mengembalikanBrush Tool objek pada posisi history tertentu. Page 20
  23. 23. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanArt History Untuk mewarnaiBrush Tool objek berdasarkan history tertentu.Eraser Tool Untuk menghapus objek dan dapat mengembalikan objek yang sudah terhapus ke posisi semula.Background Untuk menghapusEraser Tool latar belakang (background) agar menjadi trasparan.Magic Untuk menghapusEraser Tool warna yang solid dengan cara mengklik sekali pada bagian tertentu.Gradient Untuk mewarnai objekTool dengan warna gradasi dengan tipe linier, angle, reflected, dan diamond. Page 21
  24. 24. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanPaint Untuk mengisi objekBucket Tool dengan warna foreground yang telah dipilih.Blur Tool Untuk memperhalus bagian tepi sebuah image. Teknik ini juga sering digunakan untuk memperhalus bagian-bagian tertentu, misalnya memperhalus bagian wajah atau memper- halus pixel yang terlalu besar.Sharpen Untuk mempertajamTool bagian tepi sebuah image.Smudge Untuk membuat efekTool sentuhan jari pada cat basah. Page 22
  25. 25. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanDodge Tool Untuk memberikan warna terang pada daerah tertentu.Burn Tool Untuk memberikan warna yang gelap pada daerah tertentu dengan goresan brush.Sponge Untuk meningkatkanTool saturation pada objek.Path Untuk memilih danSeletion mengedit path yangTool dinginkan.Type Tool Untuk mengetik teks pada sebuah image secara vertikal maupun horizontal.Type Mask Untuk membuatTool seleksi berbentuk huruf. Page 23
  26. 26. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Nama Tools Gambar/Ikon PenjelasanPen Tool Untuk membuat path yang dapat digunakan sebagai seleksi maupun alat gambar.Custom Untuk membuatShape Tool, bentuk shape tertentu dari daftar yang ditampilkan.Annotation Untuk membuattool catatan dan suara yang dapat disertakan dalam image.Eyedropper Untuk mengambilTool sampel warna dalam sebuah image.Hand Tool Untuk memindahkan sebuah gambar bersama-sama dengan windows.Zoom Tool Untuk mengatur tampilan (perbesar atau perkecil) image. Page 24
  27. 27. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Nama Tools Gambar/Ikon Penjelasan Foreground ntuk menentukan & warna foreground Background dan background. Color Sebuah pepatah mengatakan “Desain adalah Raja, Ideadalah Ratu dan alat hanyalah pelayan”. Jadi bayangkan danfikirkan sebuah ide untuk melatih diri kita dalam berkreasi.Contoh mengganti Background. Dengan hasil akhir sbb : Langkah 1 : Proses Opening dan Pemotongan Objek.  Buka aplikasi Adobe Photoshop.  Kemudian Buka Foto yang akan di Edit dan Background yang akan ditambahkan. Page 25
  28. 28. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Proses opening objek.  Lalu langkah berikutnya adalah Buat Kanvas Baru dengan ukuran yang sesuai. Sehingga pada jendela adobe photoshop akan tampil tiga sub jendela. Page 26
  29. 29. Mulok Multimedia – SMK Prakarya Internasional 1952 2011  Copy Background yang akan di Edit, pada Kanvas Baru.  Copy juga Foto yang akan di Edit pada kanvas baru. Sehingga akan tampak pada gambar berikut.  Potong latar foto dengan menggunakan tool Magnetic Lasso Tool. Page 27
  30. 30. Mulok Multimedia – SMK Prakarya Internasional 1952 2011  Kemudian Delete area yang telah ditandai. Sehingga hasilnya seperti berikut. Page 28
  31. 31. Mulok Multimedia – SMK Prakarya Internasional 1952 2011  Kemudian untuk area tertentu cutting dengan menggunakan tppl Magic Wand Tool+tekan key Shift pada key board. Lihat gambar berikut.  Sehingga hasil akhir yang akan diperoleh dari proses cutting adalah seperti gambar berikut. Page 29
  32. 32. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Langkah 2 : Menambahkan Teks dan Merapihkan Objek.  Rapihkan Foto dengan tool Erase Tool .  Kemudian atur sedemikian rupa sehingga seolah-oleh terlihat nyata.  Buat semenarik dan secantik mengkin dengan imajinasi yang anda kumpulkan pada diri dan fikiran anda.  Tambahkan Teks untuk menguatkan tema mengenai gambar tersebut. Dengan menggunakan Horizontal Type Tool. Atur ukuran huruf, Warna dan jenis hurup pada bar diatas sub windows. Serta posisikan penempatan teks sesuai dengan wilayah atau area yang kosong. Page 30
  33. 33. Mulok Multimedia – SMK Prakarya Internasional 1952 2011  Buat efek yang menarik sesuai kepribadian kita atau sesuai dengan tema dari gambar tersebut.  Pilih menu Layer  Layer Style lalu pilih Blending Options  Kemudian atur efek teks dengan baik dan berkarakter sesuai dengan imajinasi yang difikirkan. Page 31
  34. 34. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Langkah 3 : Finishing  Setelah semua tahapan selesai dikerjakan, maka selanjutnya kita ke proses akhir dari pengerjaan manipulasi objek.  Atur backbackground dengan menggesernya sedikit lebih atas.  Ganti tipe Blending Mode Background dengan difference .  Simpan pekerjaan kita dengan 2 tahap penyimpanan.  Penyimpanan pertama berformat .psd dan penyimpanan yang kedua berformat .jpg atau gambar jadi. Page 32
  35. 35. Mulok Multimedia – SMK Prakarya Internasional 1952 2011  Sehingga hasil akhir dari Gambar tersebut adalah sebuah objek yang utuh, dengan view yang menarik. Seperti terlihat pada gambar berikut : Catatan : Buat foto anda Lebih Menarik dan Lebih indah dari contoh yang sederhana diatas. Sesuatu yang sederhana akan lebih bermanfaat jika dibandingkan dengan hal yang berlebihan jika hal tersebut sia-sia. (A. Hendra) Page 33
  36. 36. Mulok Multimedia – SMK Prakarya Internasional 1952 2011D. Pengenalan dan Penggunaan Adobe Flash Teknik multimedia dengan konsep Animasi saat inimemang sangat dibutuhkan. Dunia broad casting atau periklanan,televisi dan advertasing kini mulai beralih kepada animasi, karenadianggap lebih interaktif dan menarik serta efek yang lebih hidupmenimbulkan daya tarik tersendiri. Kartun salah satu contoh yangmerepresentasikan animasi terhadap dunia film atau film-filmanak yang berbasis pada grafik. Terdapat dua istilah penting dalam animasi, yaitu frame byframe dan tweened animation. Pada frame by frame membuatgambar yang berbeda pada frame, sedangkan tweened animationmenentukan posisi frame awal dan akhir. 1. KonsepFlash dimulai sebagai salah satu software untuk membuat animasicel (Kartun) yang bernama Future Splash. Dengan perangkat ini,dimungkinkan untuk membuat animasi dengan ukuran yang kecilyang dapat dipublish di atau ke internet. Kemudian Macromediamelihat kemampuan Splash sebagai sarana imaginatif yangmemiliki kemampuan luar biasa di bidang multimedia, sehinggaSplash dikembangkan menjadi perangkat multimedia interaktifdengan sebutan Macromedia Flash. Tetapi pada bulan Desember2005, Adobe telah membeli Macromedia yang sampai saat inimacromedia flash berganti nama menjadi Adobe Flash sejak Page 34
  37. 37. Mulok Multimedia – SMK Prakarya Internasional 1952 2011versi 9 atau CS3. Kelebihan dan Kemampuan Flash antara lain :mampu menyajikan animasi web yang paling populer saat inisehingga banyak didukung oleh berbagai pihak; ukuran file keciltetapi kualitas tinggi; kebutuhan Hardware yang tidak tinggi;banyak media yang mendukung fasilitas flash seperti Web,Televisi, Handphone dan PDA. Dalam buku ini akan mencobamenyajikan dasar - dasar bagian dari flash, mulai dari userinterface, sampai dengan implementasi membuat animasi denganflash.Flash menggunakan format vektor sebagai dasarnya sehinggaukuran filenya relatif kecil. Format file yang dihasilkan dari Flashadalah Shockwave (.swf) sebagai standar distribusinya. Adobeflash atau merupakan software multifungsi. Terlepas dari fungsiawalnya, yaitu mempermudah pembuatan animasi web, ternyataflash berkembang pesat hingga dapat kita manfaatkan sebagaisoftware multimedia yang luar biasa. Bahkan Flash dengan actionscript-nya dapat dimanfaatkan menjadiprogram pembuat gameyang mudah dan efektif. 2. Area Kerja User interface di Flash terbagi atas 5 bagian, yaitu: a. Stage Stage merupakan daerah yang bewarna putih, dimana areakerja utama jika anda ingin membuat animasi maupun aplikasi Page 35
  38. 38. Mulok Multimedia – SMK Prakarya Internasional 1952 2011flash lainnya. Seluruh objek/gambar/animasi yang ada di stagenantinya akan tampil di flash movie, dan sebaliknya apabilaobjek/gambar tersebut berada di daerah abu-abu di pinggiranStage tidak akan terlihat di flash movie. b. Tools Tools merupakan kumpulan alat gambar dan mewarnaisesuatu yang ada di stage. c. Panel Merupakan kumpulan kotak-kotak yang berfungsi untukmengubah, mengatur dan mempercantik objek yang ada di stage.Misalkan memberi warna gradasi, meletakan objek persis ditengah stage, dan merotasi objek dengan sudut yang tepat. d. Property inspector Merupakan bagian informasi objek yang ada di stage.sebagai contoh, klik saja salah satu objek di stage, makainformasinya akan terlihat disini. atau klik saja di daerah kosongyang ada di stage, maka informasi mengenai stage akan terlihat. e. Timeline Terdiri dari baris dan kolom. Dimana kolom berhubungandengan waktu, baris berhubungan dengan objek. Setiap software Page 36
  39. 39. Mulok Multimedia – SMK Prakarya Internasional 1952 2011animasi pasti memliki timeline untuk mencatat aktivitas objekkapan harus tampil di stage dan kapan harus menghilang. f. Tools Adobe Flash Tools merupakan perangkat kerja atau alat kerja dalam Adobe Flash. Tools terdiri dari 16 peralatan dalam area kerja Adobe Flash. Adapun peralatan tersebut adalah sebagai berikut : 1. Selection tool (V), Merupakan tool utama yang berfungsi untuk menseleksi benda, baik berupa shape, line, titik maupun symbol. 2. Subselection tool (A), Merupakan tool utama yang berfungsi untuk menseleksi dan memodifikasi titik maupun garis (stroke). Page 37
  40. 40. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 3. Free Transform Tool (Q), Merupakan tool yang berfungsi untuk memodifikasi scale (skala), skew(kemiringan), rotation(rotasi), distorsi, dan envelop. 4. Gradien transform tool(F), Merupakan tool yang berfungsi untuk memodifikasi warna warna gradasi. 5. Line tool (N), Tool yang berfungsi untuk membentuk garis. 6. Laso Tool (L), Tool yang berfungsi untuk menyeleksi benda. 7. Pen Tool (P), Tool yang berfungsi untuk membuat sebuah bentuk path, dapat digunakan juga untuk tracing. 8. Text Tool (T), Tool yang berfungsi untuk membuat tulisan. 9. Oval Tool (O), Tool yang berfungsi untuk membuat bentuk lingkaran. 10. Rectangle Tool (R), Tool yang berfungsi untuk membuat bentuk kotak. Rectangle Tool juga memiliki sub tool, yakni polystar Tool yang berfungsi membuat bermacam bentuk segi. 11. Pencil Tool (Y), Pencil Tool berfungsi untuk membuat goresan yang seperti pensil. setiap goresan akan menjadi tipe stroke. Page 38
  41. 41. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 12. Brush Tool (B), Berfungsi untuk membuat goresan seperti brush(kuas) yang merupakan tipe fill. 13. Ink bottle Tool (S), berfungsi untuk membuat stroke. 14. Paint bucket (K), Berfungsi untuk membuat fill. 15. Eye dropper (I), berfungsi untuk mengambil sampel warna. 16. Eraser (E), Penghapus. g. Contoh Implementasi Berikut implementasinya dengan menampilkan sebuah mobil yang dapat mengkilap. Adapun langkah- langkahnya adalah sebagai berikut : Page 39
  42. 42. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 1. Masukkan (import) gambar ke dalam stage, 2. Setelah gambar berada pada stage, atur besarnya stage sesuai dengan ukuran gambar yang telah di import tadi misalnya 500 px (width) dan 315 px (height), 3. Ganti nama layer1 menjadi mobil, 4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek, Catatan : Misal Gambar Mobil. Page 40
  43. 43. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang melebihi gambar mobil, seperti gambar di bawah ini, 6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang seperti gambar di bawah ini, Page 41
  44. 44. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi panjang seperti gambar di bawah ini, Page 42
  45. 45. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi, kemudian ganti nama layer tersebut dengan animasi, 9. Masih di layer animasi kill icon Pen tool, 10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di bawah ini, Page 43
  46. 46. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu klik kanan pada layer animasi pilih menu mask, 12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert keyframe, Page 44
  47. 47. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 13. Klik kanan antara frame 1 – 30 pada layer efek, kemudian pilih menu create motion tween, 14. Klik frame 30 pada layer efek, kemudian pindahkan gambar persegi panjang ke sebelah kanan dari gambar mobil, seperti gambar di bawah ini, 15. Tekan ctrl + enter untuk melihat hasilnya… Preview in image mode, Page 45
  48. 48. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Ingat setiap perbuatan atau Kreasi kita, Tidak ada yang sia-sia. Maka berbuatlah dan berkreativitaslah. (A. Hendra) Page 46
  49. 49. Mulok Multimedia – SMK Prakarya Internasional 1952 2011E. Mengenal Script dalam Flash Coding atau Script adalah sederet sitax yang digunakanuntuk membantu desain lebih hidup. Penggunaan script dalamflash biasa digunakan untuk alur animasi yang komplek, dimanatujuannya adalah untuk mempermudah gerak dari satu titik ke titikyang lain. Penggunaan script tidak hanya ada pada flash, banyakaplikasi animasi yang menggunakan script, contoh sajaSwisMax3D dan software sejenis yang ada di pasaran. Sript, tidak sulit untuk dipelajari dan sangat mudahdiingat. Sript tidak untuk dihapal melainkan dilatih, sehinggasemakin sering script itu diimplementasikan maka semakin ingatdan semakin bertambah kosa kata hapalan script yang kita kuasai. Contoh Script yang biasa digunakan dalam coding animasiadalah GotoAndPlay(), Stop(), Play() dan sebagainya.Penggunaan Penggunaan animasi saat ini marak digunakan baik didalam bidang akademisi maupun yang memang didalambroadcasting yang memang menjadi media dalam pengembanganperangkat multi. Media menjadi salah satu bagian terpentingdalam mepublikasikan acara atau kegiatan yang bersifat pentingatau sekedar hiburan semata. Page 47
  50. 50. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Animasi, banyak digunakan di pertelevisian saat ini,contoh kongkrit yang menjadi bahan tontonan adalah film kartundan film animasi. Sebagai contoh Upin dan Ipin, Krisna, dansebagainya. Selain itu, penggunaan multimedia animasi juga sudahdigunakan oleh profesional dengan menggunakan sebagai mediapresentasi atau sejenisnya. Serta, banyak lagi penggunaanpenggunaan animasi pada berbagai disiplin ilmu di dunia.Implementasi pada Flash Pada implementasi kali ini kita akan mencoba membuatmedia aplikasi ajar untuk mata pelajaran Matematika SMU/SMA,contohnya sebagai berikut : Page 48
  51. 51. Mulok Multimedia – SMK Prakarya Internasional 1952 2011 Pada setiap animasi dan Button yang tersedia, akanmengandung script, baik sebagai penghubung atau pun sebagaipenyudah dan bahkan sebagai script untuk melanjutkan. Sebagaicontoh, script yang digunakan pada program animasi diatas adalahsebagai berikut :No Media Perintah Keterangan1 Button on (release) { ‘118’ menunjukan “HOME” gotoAndPlay(118); bahwa ketika } button di klik maka, perintah tersebut akan menuju ke Frame 118.2 Frame play(); Memulai animasi.3 Frame stop(); Menyudahi animasi. Latihan-latihan Explorasi adalah bagian yang tak terpisahkan dari Pembelajaran sebuah kasus. Page 49
  52. 52. Mulok Multimedia – SMK Prakarya Internasional 1952 2011F. Pengenalan Story Board Storyboard adalah bagian terpenting dalam pembuatananimasi dan film, dimana ini merupakan analisi awal dalamMultimedia Development. Tugas seorang storyboard capturadalah Melakukan proses interview/wawancara dengan SubjectMatter Expert (SME) dan review dokumen dan catatan tulis sertareview berbagai source (video, audio dan lainnya) sebagai ouputyang dihasilkan nantinya adalah interview notes, document ,workplace, observation, survey. Selain storyboard captur, takkalah penting dalam membuat animasi film adalah seorangstoryboard maker dimana memiliki tugas sebagai pembuat detailalur cerita Pembelajaran dan menganalisa komponen-komponen yangakan muncul seperti text, gambar, animasi, tokoh yang akandigunakan serta menghasilkan ouput adalah tabel breakdownkomponen storyboard, kumpulan gambar cerita. Serta, yangterakhir adalah pembuatan storyboardnya sendiri dilakukan olehkartunis atau animator untuk dijadikan sebuah animasinyata/gerak. Page 50
  53. 53. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Penggunaan Story Board ProSeperti telah dijelaskan pada pembahasan diatas, bahwasannyapenggunaan storyboard adalah untuk prototype sebuah animasiatau film. Sebagai contoh sebagai berikut :Dalam pembuatan animasi perlu seorang animator yang dapatmendesain karakter sedemikian rupa sehingga menghasilkanproduk nyata.Setelah itu, animator akan melanjutkan desain tersebut denganmebuat latar/landscape yang nyata. Sehingga animasi tersebutberada dalam sebuah keadaan yang pasti. Page 51
  54. 54. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Langkah selanjutnya adalah memodelkan karakter tadi, denganmemberikan sedikit mimik yang memang menjadi kejelasan padaanimasi. Page 52
  55. 55. Mulok Multimedia – SMK Prakarya Internasional 1952 2011Setelah semua siap berikut dubbing dan alur skenarionya, makalangkah selanjutnya adalah mendistribusikan produk. Latihan-latihan Sekolah adalah secuil dari kretivitas yang dimiliki, ketika kita ingin sukses maka katakanlah “SUKSES”. Page 53
  56. 56. Mulok Multimedia – SMK Prakarya Internasional 1952 2011G. Daftar Pusatakahttp://daniairiyani.blogspot.com/2010/09/keterkaitan-implementasi-grafik.htmlhttp://karmila.staff.gunadarma.ac.id/Downloads/folder/0.2http://babaflash.com/animasi_kongkrithttp://www.ilmukomputer.com/tekhnologymultimedia Page 54
  57. 57. Mulok Multimedia – SMK Prakarya Internasional 1952 2011H. Penyusun Nama : Acep Hendra, ST Motivasi : Belajar bagian dari kehidupan, “bangun” dan motivasi diri kita untuk selalu belajar. Kegiatan : Officer di SDTC, CEO di GSI dan Guru di SMK Prakarya Internasional 1952. Kontak : FB dan e-mail : chendra220@gmail.com YM : shiniruka SMS : 085222749765 Telp. : 02293020331  Page 55

×