{"id":308,"date":"2009-12-18T00:50:25","date_gmt":"2009-12-17T16:50:25","guid":{"rendered":"http:\/\/www.yusrizamri.com\/blogsite\/?p=308"},"modified":"2009-12-18T00:58:00","modified_gmt":"2009-12-17T16:58:00","slug":"membuat-putaran-bola-pada-objek-teknik-motion-guide","status":"publish","type":"post","link":"https:\/\/www.yusrizamri.com\/blogsite\/?p=308","title":{"rendered":"Membuat Putaran Bola pada Objek (Teknik Motion Guide)"},"content":{"rendered":"<p>Tutorial kali ini kita akan melihat bagaimana menghasilkan\u00a0<strong>PUTARAN BOLA <\/strong>dengan menggunakan\u00a0<strong>MOTION GUIDE<\/strong> sebagai asas dalam\u00a0<strong>ADOBE FLASH CS3.<\/strong><\/p>\n<p>Motion guide adalah satu teknik animasi yang digunakan bagi tujuan mengikut arah alir animasi yang dibentuk oleh flash designer.<\/p>\n<p>Ianya berbeza dari teknik animasi lain kerana penggunaan motion guide ini memberi kita ruang untuk membentuk arah animasi yang kita mahu. Namun animasi ini masih menggunakan motion tween sebagai asas pergerakan imej atau bentuk.<br \/>\nDi bawah adalah contoh yang dihasilkan :<\/p>\n<p><object width=\"500\" height=\"300\" data=\"http:\/\/www.yusrizamri.com\/blogsite\/tutorial\/motionguide.swf\" type=\"application\/x-shockwave-flash\"><param name=\"src\" value=\"http:\/\/www.yusrizamri.com\/blogsite\/tutorial\/motionguide.swf\" \/><\/object><\/p>\n<p>Menarik? AYOH kita mula!!!<\/p>\n<p><strong>Langkah 1 :<\/strong><\/p>\n<ul>\n<li>Sediakan stage dengan saiz 650 x 450 pixel berlatarkan warna gelap<\/li>\n<li>Buatkan satu bulatan di tengahnya (memberi gambaran sebagai bumi)<\/li>\n<li>Namakan layer tersebut dengan nama <strong>OBJEK<\/strong><\/li>\n<li><strong>Right klik frame 60 &gt; insert frame<\/strong><\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/14.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2566\" title=\"14\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/14.jpg\" alt=\"14\" width=\"500\" height=\"326\" \/><\/a><\/p>\n<p><strong>Langkah 2 :<\/strong><\/p>\n<ul>\n<li>Kunci layer objek<\/li>\n<li>Buatkan satu layer baru dan namakannya sebagai bola<\/li>\n<li>Kemudian buatkan satu bentuk bola di atas layer tersebut<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/21.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2567\" title=\"21\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/21.jpg\" alt=\"21\" width=\"364\" height=\"287\" \/><\/a><\/p>\n<ul>\n<li>Convert bola tersebut kepada simbol\u00a0<strong>MOVIE CLIP. Short cut F8<\/strong><\/li>\n<\/ul>\n<p><strong>Langkah 3 :<\/strong><\/p>\n<ul>\n<li>Right klik frame 40 &gt; insert keyframe (F8)<\/li>\n<li>Right klik frame 41 &gt; insert blank keyframe (F7)<\/li>\n<li>Hasilnya seperti di bawah<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/32.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2568\" title=\"32\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/32.jpg\" alt=\"32\" width=\"303\" height=\"234\" \/><\/a><\/p>\n<p><strong>Langkah 4 :<\/strong><\/p>\n<ul>\n<li>Klik pada icon\u00a0<strong>ADD MOTION GUIDE<\/strong><\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/43.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2569\" title=\"43\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/43.jpg\" alt=\"43\" width=\"266\" height=\"175\" \/><\/a><\/p>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/43.jpg\"><\/a>Satu layer bernama\u00a0<strong>Guide<\/strong> akan terhasil di atas\u00a0<strong>layer bola<\/strong><\/p>\n<ul>\n<li>Gunakan\u00a0<strong>OVAL TOOL<\/strong><\/li>\n<li>Pastikan\u00a0<strong>STROKE COLOR<\/strong> di isi dengan warna terang dan pangkahkan ruang<strong> FILL COLOR<\/strong><\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/412.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2570\" title=\"412\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/412.jpg\" alt=\"412\" width=\"142\" height=\"214\" \/><\/a><\/p>\n<ul>\n<li>Kemudian buatkan satu lonjongan di atas layer\u00a0<strong>GUIDE<\/strong> tadi (rujuk hasil di bawah)<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/421.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2571\" title=\"421\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/421.jpg\" alt=\"421\" width=\"359\" height=\"280\" \/><\/a><\/p>\n<p><strong>Langkah 5 :<\/strong><\/p>\n<ul>\n<li>Gunakan\u00a0<strong>erase tool<\/strong> untuk memadam sebahagian dari lonjongan yang telah dibentuk sebentar tadi<\/li>\n<li>Hasilnya mestilah seperti di bawah :<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/53.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2572\" title=\"53\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/53.jpg\" alt=\"53\" width=\"500\" height=\"239\" \/><\/a><\/p>\n<p><strong>Langkah 6 :<\/strong><\/p>\n<ul>\n<li>Kuncikan layer\u00a0<strong>GUIDE<\/strong><\/li>\n<li>Right klik pula pada\u00a0<strong>frame 1 layer bola &gt; create motion tween<\/strong><\/li>\n<li>Hasilnya :<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/62.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2573\" title=\"62\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/62.jpg\" alt=\"62\" width=\"440\" height=\"80\" \/><\/a><\/p>\n<ul>\n<li>Klik pada frame 1 layer bola<\/li>\n<li>Gerakkan bola tersebut betul-betul di permulaan lonjongan yang dibentuk tadi<\/li>\n<li>Pastikan bola itu berada di tepi objek dengan betul. Ini bertujuan agar animasinya kelihatan sempurna selepas ini<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/612.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2574\" title=\"612\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/612.jpg\" alt=\"612\" width=\"254\" height=\"333\" \/><\/a><\/p>\n<ul>\n<li>Kemudian klik pula pada frame 40 layer bola<\/li>\n<li>Gerakkan bola tersebut pula pada penghujung lonjongan tadi. Letakkannya betul-betul di atas garisan GUIDE dan di tepi objek<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/621.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2575\" title=\"621\" src=\"http:\/\/sifoo.com\/v7\/wp-content\/uploads\/2009\/12\/621.jpg\" alt=\"621\" width=\"225\" height=\"310\" \/><\/a><\/p>\n<p><strong>Langkah 7 :<\/strong><br \/>\nOk sekarang sudah sempurna. Untuk melihat hasilnya tekan<strong> CTRL + ENTER\u00a0atau\u00a0CONTROL &gt; TEST MOVIE<\/strong><\/p>\n<p>Mudah bukan? Ya teknik ini boleh diperhalusi lagi dengan membuat beberapa adjustment pada bahagian tertentu. Ini hanyalah asasnya sahaja. Anda boleh cuba dengan lebih lagi untuk mendapatkan hasil yang sempurna.<\/p>\n<p><strong>Di dalam contoh di atas saya membuat 2 layer di bawah layer\u00a0GUIDE\u00a0untuk mendapatkan efek yang lebih.<br \/>\nJika anda GAGAL membuatnya anda :<\/strong><\/p>\n<ul>\n<li><strong>Tidak convert bola kepada MOVIE CLIP<\/strong><\/li>\n<li><strong>Tidak meletakkan bola di atas garisan GUIDE yg dibentuk<\/strong><\/li>\n<li><strong>Tidak membuat keyframe dengan sempurna<\/strong><\/li>\n<\/ul>\n<p><em>Sila download contoh fail FLA saya\u00a0<a href=\"http:\/\/sifoo.com\/v7\/wp-content\/plugins\/download-monitor\/download.php?id=69\" target=\"_blank\"><strong>disini<\/strong><\/a> untuk melihat dan merujuk caranya dengan lebih jelas.<\/em><br \/>\n<strong>SELAMAT MENCUBA!!!<\/strong><\/p>\n<p><strong>Tutorial ini juga boleh didapati di <\/strong><a href=\"http:\/\/www.sifoo.com\" target=\"_blank\">www.sifoo.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial kali ini kita akan melihat bagaimana menghasilkan\u00a0PUTARAN BOLA dengan menggunakan\u00a0MOTION GUIDE sebagai asas dalam\u00a0ADOBE FLASH CS3. Motion guide adalah satu teknik animasi yang digunakan bagi tujuan mengikut arah alir animasi yang dibentuk oleh flash designer. Ianya berbeza dari teknik animasi lain kerana penggunaan motion guide ini memberi kita ruang untuk membentuk arah animasi yang [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[9,13,37,22,23,25,20,42,38,30,19],"_links":{"self":[{"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/posts\/308"}],"collection":[{"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=308"}],"version-history":[{"count":6,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/posts\/308\/revisions"}],"predecessor-version":[{"id":314,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/posts\/308\/revisions\/314"}],"wp:attachment":[{"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}