Membuat Animasi "Menjengkelkan" dengan Adobe Flash

Dalam tutorial kali ini kita akan membuat sebuah animasi "menjengkelkan" dengan menggunakan Adobe Flash (disini saya menggunakan Adobe Flash CS4), apa itu animasi “menjengkelkan”?, untuk lebih jelasnya silakan simak langkah-langkah dibawah ini...

1. Pertama tentunya anda harus membuka aplikasi Adobe Flash (CS4) untuk versi yang lain juga tak masalah, cukup menyesuaikan saja, lalu ilih Action Script 2.0 :

2. Lalu akan muncul tampilan seperti dibawah ini :

3. Selanjutnya buatlah gambar kotak bertuliskan "Klik Disini Untuk Mulai" dan gambar sebuah Kursor pada stage seperti berikut atau anda bisa menggambar bentuk lain sesuai selera anda, silakan anda berimprovisasi :

4. Setelah anda selesai menggambar, selanjutnya anda pilih/seleksi gambar kotak lalu tekan F8 pada keyboard, lalu pilih Button kemudian registrasi diposisi tengah, dan untuk nama bebas, terserah anda, untuk lebih jelasnya lihat gambar dibawah ini :

5. Kini gambar kotak tersebut sudah menjadi simbol Button, lalu pada panel Properties, isikan Intance Name-nya dengan nama "mulai" :

6. Lalu gambar kursornya juga kita seleksi kemudian kita jadikan Movie Clip, caranya yakni dengan menekan tombol F8 dan pilih Movie Clip, registrasinya tetap ditengah, untuk lebih jelasnya lihat gambar dibawah ini :

7. Setelah gambar kursor tersebut sudah menjadi simbol Movie Clip, lalu pada panel Properties, isikan Intance Name-nya dengan nama "kursor" :

8. Setelah semua proses diatas selesai, kini kita tinggal menambahkan Script pada frame ke-1, caranya anda tinggal klik/pilih frame ke-1 lalu tekan tombol F9, dan masukkan Script dibawah ini :

kursor.onEnterFrame = function() {

Mouse.hide();

this.startDrag(true, 20, 20, 550, 400);

if (kursor.hitTest(mulai)) {

mulai._x = 550-random(550);

mulai._y = 400-random(400);

if (mulai._y>400) {

mulai._x = 200;

mulai._y = 200;

}

if (mulai._x>550) {

mulai._x = 200;

mulai._y = 200;

}

}

};

Hasilnya seperti berikut :

Lalu tutup panel Action Frame tersebut dan Animasi pun telah selesai dibuat, untuk melihat hasilnya silahkan tekan Ctrl+Enter dan coba anda klik kotak tersebut, hehe.... Jika anda sudah lebih paham dengan Adobe Flash dan sudah lebih mengerti akan action script, anda bisa memodifikasi atau mengkreasikannya dengan kreasi dan selera anda sendiri.

Hasilnya :

Selengkapnya

Membuat Slideshow Postingan di Blog

Pada tutorial kali ini, kita akan menjelaskan bagaimana cara membuat sebuah slideshow postingan slayaknya slideshow sebuah berita.

Oke langsung saja, berikut ini langah-langkahnya :

1. Login/Masuk ke blog kamu.

2. Pilih bagian Tata Letak, kemudian Tambah Gadget dan pilih HTML/Javascript dan masukkan script berikut ini :

<style type="text/css">
#rp_plus_img{height:380px;overflow:hidden;border:0;padding:2px 3px 3px 2px;background: transparant;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #2fe415; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:85px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:regular !important;margin-bottom:4px;font-size:12px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #2fe415;width:65px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ricky-site-slide-show.googlecode.com/svn/branches/Slideshow%20Postingan.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 20;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Simpan Template. Selesai.

Keterangan :

height:380px : Tinggi Widget
var speed = 1500 : Kecepatan Slideshow
var numposts = 20 : Jumlah Postingan yang akan ditampilkan
var numchars = 20 : Jumlah karakter teks yang akan ditampilkan

Selengkapnya

Cara Membuat Gambar Posting Membesar Ketika di Sentuh Oleh Mouse

Dalam memposting artikel, berita atau tutorial di blog, mungkin kebanyakan para blogger akan menggunakan gambar, baik itu sebagai variasi atau juga sebagai bagian yang penting dalam tulisan di blog tersebut. Tekadang gambar yang di upload ke postingan blog, memiliki ukurang yang relatif kecil, baik itu merupakan ukuran aslinya atau juga karena memang gambar tersebut dikecilkan ukurannya ketika di posting, karena untuk menyesuaikan dengan tulisan di blog tersebut.

Nah terkadang para pembaca yang ingin melihat gambar tersebut harus membukanya di tab baru atau mengklik gambar tersebut, terkadang hal ini juga membutuhkan waktu, terlebih jika gambar tersebut memiliki ukuran yang cukup besar. Untuk mempermudah melihat gambar, maka dalam tutorial kali ini akan diterangkan mengenai bagaimana membuat gambar di postingan blog menjadi membesar ketika di sentuh oleh mouse, berikut ini langkah-langkahnya :

1. Login ke blogger. Dari halaman dasbor, pilih Template.

2. Selanjutnya, Klik/pilih Edit HTML, dan cari kode ]]></b:skin> (Guakan Ctrl+F untuk mempermudah pencarian).

3. Setelah itu, copy kode dibawah ini, dan pastekan tepat diatas kode ]]></b:skin>

.post img{
vertical-align:bottom;max-width:90%;max-height:90%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease}
.post img:hover{
-o-transform:scale(1.4) translate(0px);
-moz-transform:scale(1.4) translate(0px);
-webkit-transform:scale(1.4) translate(0px);
-o-transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}

4. Terakhir Simpan Template. Selesai.

Keterangan kode langkah 3:
scale(1.4) untuk mengatur berapa besar gambar pada saat di sentuh mouse. Jika kurang besar silakan diganti dengan angka yang lebih besar. Contoh:scale(1.9)
5s waktu yang dibutuhkan, saat memperbesar gambar.

Selengkapnya

Cara Membuat Recent Post di Blog

Recent Post atau Artikel Terkini memang sangat berguna bagi sebuah situs blog. Recent Post memberikan kemudahan bagi para pengunjung blog untuk menemukan apa saja postingan yang baru dari blog atau situs web.

Sebenarnya sudah banyak tutorial mengenai cara membuat recent post di berbagai blog atau situs web diluar sana. Tetapi kebanyakan dalam membuat recent post memerlukan terlalu banyak resource atau kode-kode dari pihak ketiga. Dan hal itu bisa membuat blog kita menjadi terasa berat dan memerlukan waktu muat (loading) yang lebih lama. Tentunya anda tidak ingin kehilangan pembaca setia blog anda hanya karena gadget yang terlalu berat. Selain itu mungkin beberapa cara yang lain dirasa terlalu rumit dan sulit dipahami, terlebih bagi para blogger pemula.

Nah, untuk tutorial recent post ini kita tidak memerlukan banyak kode, dan juga tidak terlalu memberatkan blog, karena gadget recent post kali ini kita menggunakan feed blog. Berikut ini merupakan langkah-langkah pembuatan recent post (artikel terkini) menggunakan feed :

1. Login/Masuk ke blogger Anda

2. Klik menu Layout/Tata Letak

3. Tambahkan gadget dengan cara klik tombol Add a Gadget/Tambahkan Gadget

4.  Pada jendala halaman yang muncul, Cari gadget Feed

5. Masukkan alamat Feed blog anda pada bagian feed url. 

Misalnya : http://www.rickysetiawan96.blogspot.com/feeds/posts/default.

Ganti www.rickysetiawan96.blogspot.com dengan alamat blog anda. Atau bagi yang menggunakan feedburner anda dapat menuliskan alamat feed anda. Misalnya: http://feeds.feedburner.com/Ricky/pdkFE. kemudian klik tombol Continue/Lanjutkan.

6. Maka akan muncul jendela pengaturan feed. Pada bagian Title Anda dapat mengisinya dengan Recent Post atau bisa juga Artikel Terkini atau Posting Terbaru sesuai keinginan anda. Pada bagian show pilih 5 items. Jumlah maksimal yang dapat ditampilkan sampai saat ini hanya 5 item, dan paling sedikit 1 item. Anda dapat mencentang opsi-opsi yang tersedia seperti item dates untuk menampilkan tanggal artikel, kemudian item sources untuk menampilkan pembuat artikel, dan open Links in new window berguna agar ketika link di klik akan terbuka jendela baru pada browser.

7. Jika Sudah klik Save/Simpan. Anda dapat melihat hasil pekerjaan membuat artikel terkini pada browser. Selesai.

Selengkapnya

Cara Menambah Elemen Widget di Blogger

Widget menjadi suatu hal yang tidak bisa dilepaskan dari blog, untuk itu disetiap blog hampir selalu tersedia tempat untuk menambahkan atau memasang widget sebagai aksesoris untuk blog atau juga untuk memasang iklan, namun terkadang penempatan widget dirasa kurang pas dengan desain blog maupun selera para blogger.

Nah.. di bawah ini adalah cara untuk menambahkan elemen widget di blog :

1. Pilih menu Template, lalu klik Edit HTML.

2. Cari kode dibawah ini.

<b:section class='main' id='main' showaddelement='no'>

3. Ganti no menjadi yes, lalu klik Simpan Template.

Nah, lalu anda buka menu Tata Letak, anda akan melihat penambahan elemen diatas postingan. Silahkan tambahkan widget sesuka anda.

Untuk memindahkan ke bawah postingan, klik dan drag widget ke bawah postingan.

Selengkapnya

Cara Menghilangkan Tanda Kunci dan Obeng ketika mengedit Blog

Terkadang setelah mengedit template blog kita tiba-tiba muncul ikon/tanda kunci dan obeng. Bagi yang belum mengetahui mungkin itu dianggap sebuah masalah pada template, tetapi pada dasarnya tanda tersebut bukanlah merupakan suatu masalah, karena tanda tersebut hanya muncul jika pemilik blog sedang masuk di akun blognya dan hanya muncul di komputer orang tersebut. Jadi orang lain tidak bisa melihatnya. Dan jika pemilik blog tersebut sudah keluar maka tanda tersebut tidak muncul lagi. Namun terkadang tanda tersebut juga membuat pemamdangan sedikit terganggu, meskipun kita sedang masuk ke akun blog dan akan mengedit/memperbaharui blog. Sebenarnya tanda tersebut berfungsi seperti hyperlink yang mengarahkan kita untuk menuju halaman pengeditan dari widget bersangkutan ketika di klik.

Namun terkadang, yang terjadi pada beberapa kasus, hal tersebut kadang muncul benar-benar sebagai masalah, ketika kita sudah keluar dan berpindah komputer, tanda tersebut masih tetap saja muncul, orang lain pun juga dapat melihat tanda tersebut, seakan menyatu pada template blog. Karena terlalu banyak tanda tersebut, maka dianggap mengganggu pandangan dan membuat pengunjung merasa terganggu. Oleh sebab itu disini saya ingin berbagi tips bagaimana cara menghilangkan tanda tersebut pada template blog.

Ikuti langkah-langkahnya dibawah ini :

1. Masuk ke akun blogger kamu.
2. Masuk ke rancangan Template -- Edit HTML
3. Cari kode ini ]]></b:skin>. (gunakan CTRL+F untuk memudahkan pencarian)
4. Salin dan tempel kode di bawah ini tepat di atas kode ]]></b:skin> tersebut.

.quickedit{

display:none;

}

Hasilnya :

5. Klik tombol Simpan Template dan lihat hasilnya.
6. Selesai.

Selengkapnya

Cara Membuat Scroll pada Arsip Blog

Dengan menambahkan scroll, maka tampilan akan menjadi lebih dinamis, jika kalian juga ingin memasang scroll, khususnya pada Arsip Blog kalian, dan kalian belum tahu caranya, maka silahkan simak caranya dibawah ini :

Cara Memasang Scoll pada Archive Blog :

• Login ke Blogger
• Di halaman Dasbor, pilih Template
• Kemudian pilih Edit HTML
• Cari kode ini : <div id='ArchiveList'> lebih cepatnya gunakan CTRL+F
• Setelah ketemu taruh kode <div style='overflow:auto; width:ancho; height:200px;'> ini tepat diatasnya kode <div id='ArchiveList'>
• Kemudian beri kode tambahan </div> sebelum kode <b:include name='quickedit'/>
• Selesai!
• Catatan : Sebelum kalian menggunakan tutorial ini sebelumnya kalian harus tambahkan HTML/Java Script - Blog Archive pada Tata Letak kalian !

Jika masih bingung kalian bisa melihat tata letak yang benar seperti dibawah ini :

<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>

Sekian, semoga bermanfaat, khususnya bagi anda yang masih bingung untuk Membuat Scroll pada Arsip Blog !!

Selengkapnya

Cara Membuat Daftar Isi Otomatis di Blogspot Berdasarkan Label

Daftar isi otomatis yang berarti setiap artikel yang baru saja dipublish akan secara otomatis masuk pada daftar atau list artikel yang akan dikelompokkan dengan artikel sebelumnya yang menggunakan tag atau label yang sama. Hingga pengunjung akan dengan mudah menemukan informasi yang mereka cari.

Bagi sebagian blogger, menambahkan daftar isi pada blog dirasa penting, utamanya untuk memudahkan pembaca yang ingin menelusuri artikel-artikel atau postingan yang dimuat pada blog tersebut, namun mungkin masih ada yang belum tahu cara menambahkan daftar isi secara otomatis pada blog, meski sudah banyak tutorial di berbagai halaman web/blog, tapi terkadang masih ada yang kebingungan dan kurang mengerti, maka pada postingan kali ini saya akan memberi tutorialnya sejelas mungkin agar para blogger pemula pun bisa membuatnya.

Oke langsung saja, pertama masuk terlebih dahulu ke halaman blog/dashbor blog, setelah masuk anda pilih LAMAN atau PAGE jika anda menggunakan bahasa Inggris, dan selanjutnya pilih Laman baru :

Setelah itu akan muncul tampilan seperti ketika akan menullis postingan, lalu pilih HTML bukan Compose :

Lalu tuliskan script berikut :

<script src="https://ricky-blog.googlecode.com/svn/ricky.js"></script><script src="http://rickysetiawan96.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

*Ganti teks warna merah dengan alamat blog anda, kemudian PUBLIKASIKAN.

Sekarang blog anda sudah memiliki Daftar Isi dan postingan yang akan anda buat/sudah dibuat akan secara otomatis dikelompokkan berdasarkan label/kategorinya.

Selengkapnya

Membuat Animasi Ikan Bergerak Mengikuti Kursor di Adobe Flash

Pada kesempatan kali ini, saya akan berbagi tutorial Adobe Flash, cara membuat animasi Ikan bergerak mengikuti kursor di Adobe Flash. Langsung saja...........


1. Pertama buka aplikasi Adobe Flash (disini saya menggunakan Adobe Flash CS4) :

2. Pilih ActionScript 2.0 :

3. Lalu akan muncul tampilan seperti ini :

4. Selanjutnya buat gambar ikan pada layer pertama seperti berikut atau bisa disesuaikan dengan yang anda inginkan :

5. Lalu blok gambar ikan tersebut dan tekan tombol F8 pada keyboard, kemudian ganti namanya apa saja, misalkan "Ikan" dan pilih Movie Clip, dan  juga pilih registrasinya ditengah, (lihat yang ditandai dengan warna merah) lalu klik OK ! :

6. Setelah itu gambar sudah menjadi Movie Clip, seperti berikut :

7. Pilih atau klik gambar ikan tersebut, lalu tekan tombol F9 pada keyboard, kemudian masukkan script berikut :

onClipEvent (load) {
            Mouse.hide();
            skalaX = _xscale;
            perlambatan = 15;
}
onClipEvent (enterFrame) {
            if (_xmouse--) {
                        this.gotoAndPlay(1);
            } else if (_xmouse++) {
                        this.gotoAndPlay(2);
            }
            if (_root._xmouse>_x) {
                        _xscale = -skalaX;
            } else {
                        _xscale = skalaX;
            }
            _x = _x+(_root._xmouse-_x)/perlambatan;
            _y = _y+(_root._ymouse-_y)/perlambatan;
}

8. Sekarang warnai background dengan warna biru (warna air laut) atau dengan gambar lain sesuai selera anda, namun jika background ingin berupa gambar, maka letakkan pada layer kedua, dengan membuat layer baru :

9. Animasi pun telah selesai dibuat, untuk melihat hasilnya silahkan tekan Ctrl+Enter dan gerakkan kursornya, ikan pun akan mengikuti arah gerak kursor tersebut. Jika anda sudah lebih paham dengan Adobe Flash dan sudah lebih mengerti akan action script, anda bisa memodifikasi atau mengkreasikannya dengan kreasi dan selera anda sendiri.

Hasilnya :

Selengkapnya

Cara Membuat Animasi Pohon Tumbuh Sederhana Dengan Adobe Flash

Membuat animasi memang menyenangkan, bisa dikatakan gampang-gampang-susah, salah-satu software untuk membuat animasi adalah Adobe Flash, software untuk membuat animasi 2 Dimensi (2D), selain untuk membuat animasi, software ini juga bisa untuk membuat sebuah game sederhana.

Pada kesempatan kali ini, saya akan berbagi tutorial Adobe Flash, cara membuat animasi sederhana “pohon tumbuh” menggunakan script. Langsung saja.........

Pertama buka aplikasi Adobe Flash (disini saya menggunakan Adobe Flash CS4) :

Pilih ActionScript 2.0 :

Lalu akan muncul tampilan seperti ini :

Selanjutnya buat gambar background seperti berikut atau bisa disesuaikan dengan yang anda inginkan :

Kemudian pada Timeline layer pertama anda tekan tombol F9 dan tuliskan Script berikut :

function counter( ) {

  if (branchCounter == undefined) {

    branchCounter = 0;

  }

  return (branchCounter++);

}

function grow( ) {

  // Menumbuhkan cabang

  this.lineStyle(trunkThickness, 0x0, 100);

  this.moveTo(0, 0);

  this.lineTo(0, trunkLength);

  // Jika bukan batang pohon, ubah sudut dan ukurannya

  if (this._name != "trunk") {

    this._rotation = (Math.random( )*angle) - angle/2;

    this._xscale *= branchSize;

    this._yscale *= branchSize;

  }

  // Menumbuhkan pucuk rancing

  var seed = Math.ceil(Math.random( )*branch);

  for (var i = 0; i < seed; i++) {

    if (counter( ) < 3000) {

    var segment = this.createEmptyMovieClip("segment" + i, i);

    segment.onEnterFrame = grow;

    segment._y = trunkLength;    }

  }

  delete (this.onEnterFrame);

}

// Mendefinisikan posisi batang pohon dan

// mengisi even onEnterFramedengan fungsi grow()

this.createEmptyMovieClip("trunk", 0);

trunk._x = 200;

trunk._y = 400;

trunk.onEnterFrame = grow;

// Parameter Pohon

var angle = 100;

var branch = 5;

var trunkThickness = 8;

var trunkLength = -100;

var branchSize = 0.7;

Setelah itu tutup Action Frame tersebut lalu jalankan animasinya dengan menekan tombol Ctrl + Enter, dan Animasi “Pohon Tumbuh” sederhana pun telah selesai dibuat, animasi ini dapat berubah-ubah setiap kita mengulangi menjalankannya (menekan tombol Ctrl + Enter).

Download file swf-nya disini

Selamat mencoba dan semoga bermanfaat !!

Selengkapnya