hariesdesign Berikut merupakan tutorial dalam membuat menu dengan gaya vertikal.

Langkah 1

Buat Dokumen baru dan set Modify > Document (Ctrl+J) dan set Lebar/Width 450, dan tinggi/Height 250px. Frame rate 33 fps (Frames per Second).

Langkah 2

Klik 2 kali pada layer 1 dan ganti dengan nama background. insert layer baru dan namai dengan menu,setelah itu klik pada Rectangle Tool (R), klik pada Stroke color dan pilih No stroke, dengan warna set #A1958A, dan gambar sebanyak 5 "rectangle" 88,5x250 px dimana akan ditunjukkan sebagai menu. Lihat gambar berikut.

Langkah 3

Ambil Text Tool (T), dan Warnai dengan #FFFFFF, dan pada kotak pertama tulis dengan "home"

Langkah 4

Kemudian pilih Modify>Transform>Rotate 90° CW (Ctrl+Shift+9).

Langkah 5

Pilih kotak pertama  dan teks ("home"),tekan F8 (convert to symbol) dan pilih mode Movie clip symbol,lihat gambar berikut

Langkah 6

Ketika membuat movie klip baru dan masih terseleksi (selected), buka properties Panel ( Ctrl+F3),dan namai dengan button1

Langkah 7

Klik pada Movie clip baru, atau klik kanan trus pilih Edit in place

Langkah 8

Setelah itu pilih text ("home),tekan Ctrl+x (Cut), masukkan layer baru (layer 2) pilih dan tekan Ctrl+Shift+V ( Paste in Place)

Langkah 9

Kembali ke layer1 klik pada frame 20 dan tekan tombol F6, Kemudian, untuk isi warna set ke #E16802. Setelah itu, kembali ke frame 1 menuju ke Properties Panel (Ctrl+F3), untuk tween pilih shape,lihat gambar berikut

Langkah 10

Kunci layer1 dan pilih layer 2 , klik pada frame 10, dan tekan F6 (keyframe),pilih Modify > Transform > Rotate 90° CCW (Ctrl+Shift+7).

Langkah 11

Klik pada frame 20 dan tekan F6. Setelah itu gunakan mouse, pindahkan "home" ke atas dari bagian tombol. Lihat gambar berikut :

Langkah 12

Pilih layer2 dan dalam Properties panel untuk Tween pilih Motion

Langkah 13

Klik pada frame 20 pada layer 2, buka Action Script Panel ( F9), dan paste script berikut :

stop();

Langkah 14

Kembali ke scene1, masukkan layer baru dan namai dengan Invisible Button 1. Kemudian buat Tombol transparannya diatas tombol pertama,seperti terlihat pada gambar

Langkah 15

Pilih/sorot ke Tombol transparan, buka Action Script Panel (F9), kemudian paste script berikut:

on (rollOver) {
_root.mouse_over_button1 = true;
}
on (rollOut) {
_root.mouse_over_button1 = fstartlse;
}

on (release){
getURL("http://www.hariesdesign.com/", "blank");

 }

Langkah 16

Masukkan layer baru dan namai layer tersebut dengan Action Script. Kemudian klik pada frame pertama,dan pada Action Script Panel (F9),pastekan script berikut :

 _root.button1.onEnterFrame = function() {
if (mouse_over_button1) {
_root.button1.nextFrame();
} else {
_root.button1.prevFrame();
}
};

We're done for the first button in menu. Repeat this steps for every other buttons in menu.

Here is the script for another "Invisible Button":

on (rollOver) {
 _root.mouse_over_button2 = true;
}
on (rollOut) {
 _root.mouse_over_button2 = fstartlse;
}

on (release){
 getURL("http://www.hariesdesign.com/", "blank");

}

And the whole Action Script is:

_root.button1.onEnterFrame = function() {
 if (mouse_over_button1) {
  _root.button1.nextFrame();
 } else {
  _root.button1.prevFrame();
 }
};

_root.button2.onEnterFrame = function() {
 if (mouse_over_button2) {
  _root.button2.nextFrame();
 } else {
  _root.button2.prevFrame();
 }
};

_root.button3.onEnterFrame = function() {
 if (mouse_over_button3) {
  _root.button3.nextFrame();
 } else {
  _root.button3.prevFrame();
 }
};

_root.button4.onEnterFrame = function() {
 if (mouse_over_button4) {
  _root.button4.nextFrame();
 } else {
  _root.button4.prevFrame();
 }
};

_root.button5.onEnterFrame = function() {
 if (mouse_over_button5) {
  _root.button5.nextFrame();
 } else {
  _root.button5.prevFrame();
 }
};

 

Langkah 16

Selesai, untuk play lakukan Ctrl+Enter (Test Movie)

Jika ada pertanyaan untuk Tutorial ini  klik Forum Haries Design