Cara membuat play dan stop dalam flash

[1:39 AM | 9 comments ]

 

//
//
Fungsi script gotoAndPlay biasanya digunakan untuk memanggil script yang ada di frame Seperti Frame number, Frame Label, Expression, Next Frame dan Previous Frame. sebagai contoh dari penggunaan script ini saya coba praktekkan pada tutorial membuat slide presentasi. Anggap bahwa pada kotak yang berwarna biru dan kotak berwarna merah yaitu sebagai halaman dari slide tersebut.

Yuk kita mulai saja tutorialnya.

Langkah pertama buka software flash 8 anda. Kemudian buat sebuah kotak dengan menggunakan Rectangle Tool, lalu isi kotak tersebut dengan warna biru Paint Bucket Tool.

Selanjutnya buat sebuah layer baru dengan mengklik ikon kemudian berikan nama pada layer tersebut dengan cara mengkliknya dua kali kemudian ketikkan “tombol”

sudah? OK jika sudah, sekarang masukkan tombol yang sudah jadi yang ada di Common Libraries. Caranya klik Window > Common Libraries > Buttons.
Setelah jendela Common Libraries muncul, kemudian pilih tombol yang akan Anda gunakan. sebagai contoh saya akan menggunakan tombol Playback Rounded > Rounded grey Play. Cara memasukkannya Anda tinggal menggeser tombol tersebut kedalam layout flash anda, kemudian letakan dibawah kotak yang berwarna biru (lihat gambar).

Sudah?. Sekarang Anda buat layer baru lagi, dimana layer baru ini akan digunakan untuk script stop. Fungsi dari script stop ini yaitu untuk menghentikan perpindahan frame supaya tidak bergerak ke frame berikutnya.

Cara membuatnya klik ikon kemudian isikan nama “script” (lihat gambar)


Nah, sekarang pada layer1,layer”tombo”,dan layer”script” di frame 2 buat keyframe baru caranya dengan menekan F6 pada key board. Kemudian warna kotak biru tadi dengan warna merah menggunakan Paint Bucket Tool (lihat gambar).


Selanjutnya sekarang kita akan membuat tombol previous, caranya klik tombol play yang sudah ada kemudian dilanjutkan dengan megklik Modify > Transform > Flip Horisontal. sehingga tombol akan terlihat seperti pada gambar diatas.

Ok, sekarang kita akan memasukan script stop. caranya klik pada frame 1 Layer”script” kemudian tekan F9, setelah jendela Action Script muncul, klik Script Assist. Kemudian klik ikon > Global Functions > Time Line Control > Stop.

Lakukan langkah yang sama juga pada frame 2. sehingga hasilnya akan terlihat seperti pada gambar diatas.

Langkah selanjutnya sekarang kita akan memasukkan script “gotoAndPlay” pada tombol. Caranya klik pada tombol play, kemudian pada jendela Actions Script, klik tanda > Global Functions > Timeline Control > goto

kemudian lakukan setting pada kotak Frame, ubah angka satu menjadi angka 2. Dimana, angka dua ini merupakan nomer frame, jadi ketika tombol di klik maka maka animasi akan bergerak ke frame 2.

Selanjutnya lakukan langkah yang sama juga pada tombol previous. Hanya yang membedakannya adalah settingan pada kotak Frame, angkanya jangan di ubah tetap angka 1. Artinya ketika tombol di klik maka animasi akan bergerak ke frame 1.

Sampai disini, tutorial sudah selesai. Untuk melihat hasilnya, silakan klik Control > Test Movie. Maka hasilnya akan seperti ini:

Taktiku

>> Download .psd

Related Posts by Categories

Tutorial Flash

Tombol Play digunakan untuk memberikan sentuhan pada animasi yang kita buat agar lebih interaktif, artinya terjadi sebuah komunikasi antara animasi dengan pengguna. Animasi tidak akan berjalan sebelum pengguna menekan tombol play. Ada 3 komponen utama yang dibutuhkan dalam membuat kontrol tombol play pada animasi yaitu Movie Clip, Button dan Action Script. Agar komponen Button (tombol) dapat berkomunikasi dengan Movie Clip (animasi) maka sebuah Movie Clip diberi sebuah Instance Name yang digunakan sebagai nama panggil dalam sebuah action script yang mengatur kontrol animasi tersebut. Software yang saya gunakan adalah Macromedia Flash 8.

Berikut langkah-langkah membuat kontrol animasi tombol play:

1. Buat sebuah Movie Clip yang didalamnya terdapat objek yang dianimasikan terdiri dari beberapa frame. Contoh: saya membuat sebuah Movie Clip bernama Bola Pantul yang didalamnya terdapat animasi bola pantul.

Buat animasi Movie Clip

2. Berilah animasi Movie Clip tersebut 2 buah action frame (action script yang diletakkan pada frame. Action script yang pertama diletakkan pada frame paling awal dan action script yang kedua diletakkan pada frame paling akhir / belakang.
Caranya: Tambahkan sebuah layer baru dalam aniamsi Movie Clip yang akan dijadikan sebagai layer action script. Buka panel Action dengan menekan tombol F9 atau klik menu Window > Actions. Insertkan sebuah keyframe pada frame pertama layer action script, dan tulis action script stop(); pada panel Action – Frame. Insertkan sebuah keyframe pada frame paling belakang pada layer action script dan tulis action script gotoAndPlay(2); pada panel Action – Frame:

Frame pertama dan terakhir pada layer ac (action) telah diberi action script

Kita telah selesai membuat sebuah Movie Clip dnegan action scrip untuk mengatur jalannya animasi. Ketika anda menekan tombol CTRL+ENTER maka animasi tidak akan berjalan karena pada frame pertama Movie Clip tadi telah diberi perintah stop (berhenti).

3. Beri sebuah Instance Name pada Movie Clip yang telah dibuat. Klik Scene 1 , seleksi Movie Clip yang ada di kanvas / area kerja kemudian buka panel Properties (CTRL + F3) ketikkan sebuah nama instance name pada kotak Instance Name, misalnya bola. Perhatikan gambar berikut:

Beri nama instance name pada kotak Instance Name

4. Buat sebuah objek button yang akan dijadikan sebagai tombol play (Insert > New Symbol… > Pilih Button > Beri nama tombol play).

Buat sebuah tombol play

Setelah selesai, kita beri objek tombol tersebut sebuah action script yang mengatur Movie Clip yang telah dibuat sebelumnya. Klik objek tombol > buka panel Action (F9), kemudian ketikkan action script berikut pada pada panel Action – Button yang muncul.

on (release) {

bola.gotoAndPlay(2);

}

Selesai. Tekan tombol CTRL+ENTER untuk melihat hasilnya, dan coba anda klik tombol play. Jika langkah-langkah yang anda lakukan benar, maka animasi akan berjalan berulang-ulang.

Selamat mencoba!

Artikel terkait yang mungkin anda sukai

Tutorial

Tutorial Flash

Membuat garis di Macromedia Flash tidak hanya menggunakan line tool saja, dengan menggunakan action script siap pakai berikut anda pun dapat membuat sebuah garis. Garis yang dibuat dengan menggunakan action scrip hanya muncul pada saat animasi dijalankan.

Langkah membuat objek garis dengan menggunakan acrion script:

1. Buka aplikasi Macromedia Flash

2. Buat sebuah dokumen baru

3. Beri action script pada frame pertama. Caranya, buka dulu panel action script. Sebelumnya pastikan frame pertama dalam keadaan terpilih.

4. Pastekan action script berikut di kotak action script.

this.createEmptyMovieClip(“line_mc”, 1);
with(line_mc){
lineStyle(5, 0x000000, 50, true, “normal”, “square”, “miter”, 1);
moveTo(0, 0);
lineTo(150, 0);
_x=100;
_y=150;
}

Silahkan mainkan animasi anda (CTRL + ENTER) untuk melihat hasilnya.

Selamat mencoba.

Enjoy!!

Artikel terkait yang mungkin anda sukai

Tutorial Flash

Memanggil Teks External ke dalam Flash

// <![CDATA[//
// <![CDATA[// Buat teks dengan Notepad, simpan dengan nama Teks1Dalam tutorial ini, anda akan membuat sebuah teks yang bersumber dari file lain. Artinya anda akan memasukkan teks yang tersimpan pada sebuah file dengan ekstensi .txt. Cara ini sangat memudahkan anda apabila anda memerlukan perubahan teks untuk keperluan tertentu. Untuk mengganti teks tersebut, anda tidak perlu membuka dan memodifikasi file FLA dan mempublisnya kembali dalam bentuk SWF.

Langkah 1

Siapkan sebuah folder baru untuk menyimpan file FLA, SWF dan TXT yang akan dibuat.

Langkah 2

Buka aplikasi teks editor Notepad bawaan Windows dengan cara klik Start > All Programs > Accessories > Notepad. Buat teks atau paragaraf yang diawali dengan myVariable= dan Simpan dengan nama Teks1. Penting: anda harus memperhatikan nama file yang anda buat, karena nama file tersebut akan dipanggil dengan menggunakan action script untuk ditampilkan dalam file flash (swf) nanti. Lihat contoh berikut.

Langkah 3

Buka aplikasi Macromedia Flash 8, buat sebuah dokumen baru dan simpan pada folder yang sama dengan file TXT yang baru saja dibuat. Anda bebas menentukan nama file sesuai keinginan anda, hal ini tidak akan berpengaruh pada hasil akhir.

Klik Text Tool, buka Panel Properties, ubah Text type menjadi Dynamic Text, kemudian buat sebuah text area pada stage.

Buat text area Dinamic Text

Langkah 4

Tambahkan scroll bar jika teks yang anda buat terlalu banyak. Hal ini untuk membuat agar teks mudah dibaca pada saat sudah masuk dalam swf. Takan tombol CTRL+7 untuk membuak Panel Componens. Pada pilihan User Interface pilih UIScrollBar dan drag ke stage (posisikan disebelah kana teks area).

Tambahkan scrollbar

Langkah 5

Klik frame 1, buka Panel Actions (Window > Actions atau tekan tombol F9). Masukkan action script berikut:

myData = new LoadVars();
myData.onLoad = function() {
myText_txt.text = this.myVariable;
};
myData.load(“Teks1.txt”);

ACtions PanelSelesai. Tekan tombol CTRL+ENTER untuk melihat hasilnya.

Artikel terkait yang mungkin anda sukai

Tutorial

Membagi Template Minima Menjadi 3 (Tiga) Kolom

// <![CDATA[//
// <![CDATA[// Standar template minima yang ditawarkan blogger amat sederhana hanya memiliki 2 kolom (1 main dan 1 sidebar). Hal ini tidak bagus untuk blog yang punya banyak widget di sidebar seperti blog saya ini, karena sidebar akan terlihat lebih panjang daripada main.

Akhirnya saya menambahkan satu sidebar lagi di sebelah kiri sehinnga template menjadi 3 kolom. Begini nih, cara saya merubah template minima 2 kolom menjadi 3 kolom.

Masuk ke dashboard blogger > Lay out > Edit HTML. Download template lengkap, agar template bisa dikembalikan ke semula jika terjadi kesalahan.

Perhatikan kode CSS berikut:

#header-wrapper {
width:660px; <——– ganti dengan 940px
$bordercolor;
}

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px; <——– ganti dengan 940px
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px; <——- ganti denga 940px
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

#outer-wrapper {
width: 660px; <——- ganti dengan 940px
margin:0 auto; padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <——- ganti dengan 500px
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tambahkan kode CSS berikut diatas #sidebar-wrapper {

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Perhatikan lagi kode CSS berikut:

#footer {
width:660px; <——-ganti dengan 940px
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Pastekan kode berikut tepat diatas <div id=’main-wrapper’>

<div id=’left-sidebar-wrapper’>
<b:section class=’sidebar’ id=’left-sidebar’ preferred=’yes’>
<b:widget id=’Gadget1′ locked=’false’ title=’Geo IP Tool’ type=’Gadget’/>
</b:section>
</div>

Simpan Template. Tralalala…… template udah berubah menjadi 3 kolom.

Artikel terkait yang mungkin anda sukai

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Liked it here?
Why not try sites on the blogroll...

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: