{"id":37,"date":"2009-09-11T08:06:51","date_gmt":"2009-09-11T00:06:51","guid":{"rendered":"http:\/\/www.yusrizamri.com\/blogsite\/?p=37"},"modified":"2009-11-20T12:09:47","modified_gmt":"2009-11-20T04:09:47","slug":"tutorial-flash","status":"publish","type":"post","link":"https:\/\/www.yusrizamri.com\/blogsite\/?p=37","title":{"rendered":"Bagaimana membuat animasi Tali berhayun"},"content":{"rendered":"

Assalammualaikum dan Salam Sejahtera semua!<\/span><\/span><\/span><\/strong><\/p>\n

\u00a0<\/span><\/p>\n

Tutorial untuk kali kita akan belajar bagaimana cara membuat animasi tali berhayun dengan hanya menggunakan shape tweening sahaja. Kali ini juga saya menggunakan ADOBE FLASH CS4<\/strong>. Ayoh kita mulakan!<\/span><\/p>\n

\u00a0<\/p>\n

Hasilnya :<\/strong><\/span><\/p>\n

<\/object>\u00a0<\/p>\n

<\/strong><\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

<\/strong><\/p>\n

Langkah 1 :<\/span><\/span><\/strong><\/p>\n

Sediakan satu stage saiz 400 x 400 pixel dan setkan FPS (frame per second) kepada 25<\/strong>.<\/span><\/span><\/p>\n

\u00a0<\/span><\/p>\n

Langkah 2 :<\/span><\/span><\/strong><\/p>\n

Nama kan layer 1 sebagai garisan<\/strong><\/span><\/span><\/p>\n

<\/strong><\/span><\/span>\u00a0<\/p>\n

\u00a0<\/p>\n

\"12\"<\/a>\u00a0
\nKlik imej untuk gambaran lebih jelas<\/em><\/p>\n

\u00a0<\/span><\/p>\n

Langkah 3 :<\/strong><\/span><\/p>\n

Dengan menggunakan line tool (short cut N)<\/strong> buatkan satu garisan melintang diatas stage telah disediakan tadi. Sila pastikan stroke colour<\/strong> anda contras dengan stage yang disediakan.<\/span><\/p>\n

\u00a0<\/p>\n

\"2\"<\/a>\u00a0
\nKlik imej untuk gambaran lebih jelas<\/em><\/span><\/p>\n

\u00a0<\/p>\n

Langkah 4 :<\/span><\/span><\/strong><\/p>\n

Kemudian anda klik kanan (right click) pada frame 20<\/strong> dan pilih menu insert keyframe (short cut F6).<\/strong> Dengan menggunakan selection tool<\/strong>, tolakkan pertengahan garisan tadi keatas<\/span><\/p>\n

\u00a0<\/span><\/p>\n

\"3\"<\/a>
\nKlik imej untuk gambaran lebih jelas<\/em><\/span><\/p>\n

\u00a0<\/p>\n

\u00a0<\/span><\/p>\n

Langkah 5 :<\/span><\/span><\/strong><\/p>\n

Selepas itu, klik kanan pada frame 40<\/strong> dan pilih menu insert keyframe (short cut F6). Klik kanan pada frame 1 dan pilih menu copy frame<\/strong>.<\/span><\/p>\n

\u00a0<\/p>\n

\"4\"\u00a0<\/span><\/p>\n

\u00a0<\/p>\n

\u00a0<\/span><\/p>\n

Kemudian klik kanan pada frame 40 dan pilih menu paste frame<\/strong> pula.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

\u00a0<\/p>\n

Langkah 6 :<\/span><\/span><\/strong><\/p>\n

Klik kanan pula pada frame 60 dan pilih menu insert keyframe (short cut F6). Gunakan selection tool untuk menarik garisan tadi ke bahagian bawah pula.<\/span><\/p>\n

\u00a0<\/p>\n

\"5\"<\/a>\u00a0
\nKlik imej untuk gambaran lebih jelas<\/em><\/span><\/p>\n

\u00a0<\/p>\n

\u00a0<\/span><\/p>\n

Langkah 7 :<\/span><\/span><\/strong><\/p>\n

Ulangi langkah 5. Kali ini klik pada frame 80 > insert keyframe (F6) > copy frame 40 \/ frame 1 > paste frame 80.<\/span><\/span><\/strong><\/p>\n

\u00a0<\/span><\/p>\n

Langkah 8 :<\/span><\/span><\/strong><\/p>\n

Klik kanan pada mana-mana frame dan pilih menu select all<\/strong><\/span><\/span><\/p>\n

\u00a0<\/p>\n

\"6\"\u00a0<\/span><\/p>\n

\u00a0<\/span><\/p>\n

Langkah 9 :<\/span><\/span><\/strong><\/p>\n

Setelah select all klik kanan lagi sekali dan pilih menu Create Shape Tween<\/strong>. Kesemua frame akan bertukar menjadi hijau. Untuk melihat hasilnya tekan CTRL+ENTER<\/strong>.<\/span><\/p>\n

\u00a0<\/p>\n

\"7\"<\/a>\u00a0<\/span><\/p>\n

Klik imej untuk gambaran lebih jelas<\/em><\/span><\/p>\n

\u00a0<\/p>\n

Kelajuan hayunan tali bergantung kepada jarak antara keyframe.<\/span><\/span><\/em><\/p>\n

\u00a0<\/span><\/p>\n

Note : jika anda menggunakan FLASH CS3 kebawah menu untuk shape tween ada pada panel properties.<\/span><\/span><\/em><\/strong><\/p>\n

\u00a0<\/p>\n

\"8\"\u00a0<\/span><\/p>\n

\u00a0<\/span><\/p>\n

\u00a0<\/span><\/p>\n

Teknik ini boleh dipelbagaikan mengikut kreativiti anda dan cara mana anda menggunakannya.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

SELAMAT MENCUBA !<\/span><\/span><\/strong><\/p>\n

<\/strong>\u00a0<\/p>\n

Klik sini<\/a> untuk file *fla<\/span><\/span><\/strong><\/p>\n

<\/strong>\u00a0<\/p>\n

*tutorial ini juga terdapat di <\/em>www.sifoo.com<\/em><\/a><\/span><\/span><\/p>\n

\u00a0<\/span><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Assalammualaikum dan Salam Sejahtera semua! \u00a0 Tutorial untuk kali kita akan belajar bagaimana cara membuat animasi tali berhayun dengan hanya menggunakan shape tweening sahaja. Kali ini juga saya menggunakan ADOBE FLASH CS4. Ayoh kita mulakan! \u00a0 Hasilnya : \u00a0 \u00a0 \u00a0 Langkah 1 : Sediakan satu stage saiz 400 x 400 pixel dan setkan FPS […]<\/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,10],"_links":{"self":[{"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/posts\/37"}],"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=37"}],"version-history":[{"count":19,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yusrizamri.com\/blogsite\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}