Laporan Project 1

PROJECT I ANIMASI INTERKATIF UNTUK PROFIL PRIBADI dengan MENGGUNAKAN MACROMEDIA FLASH 8 PRAKTIKUM MULTIMEDIA 2

OLEH : RIZKI SYAPUTRA 1001081008 TK 2 B TEKNIK KOMPUTER

POLITEKNIK NEGERI PADANG

1

Rizki _ Syaputra 1001081008

PROJEK I ANIMASI INTERAKTIF UNTUK PROFIL PRIBADI I. Diskripsi Animasi interaktif merupakan sebuah file animasi yang dibuat yang bersifat interaktif, menyenangkan, menarik bagi yang melihat dan membacanya. II. Kebutuhan File 1. File Utama : a. b. c. d. Nama : Index.swf Fungsi : Sebagai file utama untuk memanggil file file lainnya Ukuran 800 x 600 pixel Jumlah layer dan fungsi masing-masingnya Jumlah layer : 5 buah layer Fungsi masing masing layer : Layer Action : Menempatkan script untuk memanggil file logo1 dan logo 2 Layer Button : Menempatkan button / tombol Home, Biodata, Organisasi, pendidikan, photo e. Layer Text : Menempatkan teks Layer bingkai : Untuk menempatkan bingkai Layer Background : untuk menempatkan background

Ukuran dan koordinat masing masing objek pada layer Layer background :

-

Layer bingkai:

-

Layer Teks :

2


-

Layer Button

2. File Logo_1 a. b. c. d. Nama : logo1.swf Fungsi : Menempatkan Logo 1 Ukuran 90 x 90 pixel Jumlah layer dan fungsi masing-masingnya Jumlah layer : 2 buah layer Fungsi : Layer Logo : menempatkan file logo Layer Background : untuk menempatkan background e. Ukuran dan koordinat masing masing objek pada layer Layer Background : Tinggi dan Lebar : 90 x 90 pixel dan Koordinat X dan Y : 0 dan 0 Layer logo : menempatkan file logo

3. File Logo 2 a. b. c. d. Nama : logo2.swf Fungsi : Menempatkan file Logo 2 Ukuran 90 x 90 pixel Jumlah layer dan fungsi masing-masingnya Jumlah layer : 2 buah Fungsi masing masing layer : Layer Logo : menempatkan file logo Layer Background : untuk menempatkan background e. Ukuran dan koordinat masing masing objek pada layer Layer Background : Tinggi dan Lebar : 90 x 90 pixel dan Koordinat X dan Y : 0 dan 0 Layer logo : menempatkan file logo Rizki _ Syaputra 1001081008

3

4. File Organisasi a. b. c. d. Nama : organisasi.swf Fungsi : Menempatkan file yang berisi tentang informasi organisasi penulis Ukuran 800 x 600 pixel Jumlah layer dan fungsi masing-masingnya Jumlah layer : 3 layer Fungsi masing masing layer : Layer Button : Menempatkan tombol close Layer teks : menempatkan teks yang berisi tentang organisasi Layer background : Menempatkan file background

e. Ukuran dan koordinat masing masing objek pada layer : Layer button :

-

Layer Teks :

-

Layer Background :

5. File Pendidikan a. b. c. d. Nama : pendidikan.swf Fungsi : Menempatkan teks yang menerangkan tentang pendidikan penulis Ukuran 800 x 600 pixel Jumlah layer dan fungsi masing-masingnya Jumlah layer : 3 layer Rizki _ Syaputra 1001081008

4

Fungsi masing masing layer : Layer Button : Menempatkan tombol close Layer teks : menempatkan teks yang berisi tentang organisasi Layer background : Menempatkan file background

e. Ukuran dan koordinat masing masing objek pada layer : Layer Button :

-

Layer Teks :

-

Layer Background

6. File Biodata a. b. c. d. Nama : biodata.swf Fungsi : Menempatkan data berupa biodata penulis Ukuran 800 x 600 pixel Jumlah layer dan fungsi masing-masingnya Jumlah layer : 3 layer Fungsi masing masing layer : Layer Button : Menempatkan tombol close Layer teks : menempatkan teks yang berisi tentang organisasi Layer background : Menempatkan file background

e. Ukuran dan koordinat masing masing objek pada layer : Layer Button

5


-

Layer Teks

-

Layer Background :

7. File Photo a. b. c. d. Nama : photo.swf Fungsi : menempatkan file file photo penulis Ukuran 800 x 600 pixel Jumlah layer dan fungsi masing-masingnya Jumlah layer : 5 buah Fungsi masing masing layer : Layer Action : Menempatkan script stop agar pada saat file photo dipanggil file file tersebut tidak langsung bergerak Layer Button : Menempatkan tombol close, stop, back, play, forward Layer teks : Menempatkan judul album photo tersebut Layer Photo : menempatkan file file photo Layer background : menempatkan background e. Ukuran dan kordinat masing masing objek pada layer : Layer Action : tidak ada objek Layer Button :

-

Layer Teks :

-

Layer photo :

6


-

Layer Background :

III.

Langkah Pembuatan masing-masing File f. File Index Berikut ini langkah langkah yang dilakukan untuk membuat File Index :

1. Terlebih dahulu buatlah sebuah file dengan cara : CTRL + N kemudian simpan file tersebut dan beri nama index. 2. Kemudian buatlah beberapa layer dan beri nama layer: Background Action Text Bingkai Button kemudian ubah nama layer

Cara buat layer : Pada stage Macromedia klik tombol tersebut. Berikut ini yang diisi pada masing masing layer: Layer Background

Pada layer Background masukan sebuah gambar atau file lainnya yang dapat dijadikan background.Pada kesempatan ini, penulis membuat background seperti berikut ini :

7


Setelah background dibuat maka kunci tombol tersebut dengan meklik icon gembok didekat layer background tersebut.

-

Layer Bingkai Pada layer bingkai ini buatlah bingkai untuk background semenarik mungkin, misalnya seperti gambar dibawah ini :

Kemudian kunci layer tersebut dengan mengklik icon gembok pada layer bingkai tersebut.

8


-

Layer Teks Pada layer teks, buatlah teks yang akan ditampilkan pada file index tersebut.Misalnya penulis membuat teks : Rizki SangPemimpis Profil.

Kemudian kunci layer tersebut.

-

Layer Button Pada layer button ini penulis membuat teks / kata yang kemudian di konver menjadi sebuah button.Pada button ini penulis membuat 5 buah button diantaranya ; Home, Biodata, Pendidikan, Organisasi dan Foto, seperti gambar dibawah ini :

9


Langkah selanjutnya adalah menjadi setiap kata tersebut menjadi sebuah button, dengan cara : Klik terlebih dahulu kata yang akan dijadikan button.(Misalnya kata Home) kemudian klik kanan convert to symbol

Muncul kotak dialog seperti gambar dibawah ini :

Kemudian beri nama symbol THome dan pilih Button kemudian klik Ok

10


Maka pada library kita akan melihat sebuah symbol tombol dengan nama THome

Begitupun selanjutnya untuk membuat Button Biodata, Pendidikan, Organisasi dan Foto.Sehingga pada Library tampak seperti dibawah ini :

-

Layer Action Pada layer ini , untuk sementara penulis mengosongkannya. g. File Biodata Berikut ini langkah langkah yang dilakukan untuk membuat file biodata :

-

Pada file biodata ini buatlah 3 buah layer, diantaranya : Background, teks, button

Layer Background Pada layer backround buatlah sebuah persegi dengan menggunakan Rectangle Tool dan beri warna hijau rumput, seperti dibawah ini dengan ukuran : W : 753.7 H : 493.8

11


-

Kemudian kunci layer tersebut dengan mengklik icon gembok pada layer background tersebut.

Layer Teks Pada layer Teks buatlah Teks biodata sesuai dengan biodata pribadi kita.(red.Pada kesempatan ini penulis membuat bidodata seperti dibawah ini dan juga ditambahkan import beberapa buah photo kedalam stage untuk lebih menarik).

- Setelah selesai, maka kuncilah layer Teks tersebut Layer Button

12


-

Pada layer buttom buatlah sebuah tanda silang dengan menggunakan line tool atau pencil tool, seperti tampak dibawah ini: Kemudian blok gambar tersebut CTRL + G tekan F8 atau convert to symbol

Kemudian beri nama TClose ganti type dengan Button kemudian pilih OK pada libarary tampak seperti berikut ini :

h. File Logo1 Pada file logo1 ini penulis memasukan sebuah logo dengan mengganti ukuran stage 90x90 dan ukuran logo juga 90x90(Height and Width).Pada File logo ini terdapat 2 buah layer yakni layer background dan layer logo Layer Background Pada layer background ini penulis mengganti ukuran stage menjadi 90x90 pixel dengan cara : tekan CTRL + J

13


Kemudian pilih OK. Layer Logo Pada layer logo ini penulis memasukkan sebuah logo dengan cara : Klik menu file Import Import to stage

Kemudian tampak pada stage seperti dibawah ini :

Kemudian hilangkan warna putih pada logo tersebut dengan cara : klik photo modify bitmap trace bipmap kemudian seleksi warna warna putih pada gambar tersebut. Apabila sudah selesai maka kunci layer tersebut.

14


i. File Logo2 Pada file logo2 ini penulis memasukkan sebuah logo yang lain namun dengan cara yang sama dengan logo1 diatas, dan jumlah layernya pun sama dengan jumlah layer pada logo1.Berikut contoh file logo2 yang penulis buat :

j. File Organisasi Pada file organisasi ini penulis menerangkan tentang pengalaman organisasi penulis mulai semenjak SD (Sekolah Dasar) sampai penulis kuliah di Politeknik Negeri Padang. Pada File organisasi ini penulis membuat 3 buah layer dengan nama : layer background, teks, button. Layer Background Pada layer background penulis membuat sebuah kotak dengan menggunakan rectangle tool dengan ukuran tinggi dan lebar : 753 x 493. Layer Teks Pada layer teks ini penulis menuliskan tentang pengalam organisasi penulis dengan menggunakan Text Tool. Layer Button Pada layer button penulis membuat sebuah tombol close dengan menggunakan line tool yang kemudian dikonvert menjadi sebuah symbol Isi file organisasi dapat dilihat pada gambar dibawah ini : Rizki _ Syaputra 1001081008

15

k. File Pendidikan Pada file pendidikan ini penulis menuliskan tentang riwayat pendidikan penulis mulai dari Sekolah Dasar hingga Universitas. Pada file pendidikan ini penulis membuat tiga buah layer yakni layer background, layer teks, layer button. Pada Layer background penulis membuat sebuah kotak persegi dengan menggunakan rectangle tool, kemudian pada layer Teks penulis menuliskan tentang riwayat pendidikan penulis, kemudian pada layer button penulis membuat sebuah tombol close. Berikut ini contoh tampilan file pendidikan yang penulis buat :

16


l. File Photo Pada file photo ini penulis mengisikan tentang photo photo atau gallery tentang penulis dan beberapa sahabat penulis.Pada file ini penulis membuat 5 buah layer yang terdiri dari layer action, layer button, layer teks, layer photo, layer background Layer Action Pada layer action ini penulis membuat sebuah script : Stop(); Dimana script ini penulis tempatkan pada frame 1 layer action yang berfungsi agar pada saat menjalankan file photo ini, photo nyo berhenti terlebih dahulu,dan mulai berjalan ketika button play telah diklik. Layer Button Pada layer button ini penulis menempatkan 5 buah button yang terdiri dari tombol close, tombol back, tombol forward, tombol stop, tombol play. Tombol ini dapat kita buat sendiri namun juga bisa dengan menggunakan bawaan dari Macromedia Flash 8 ini, dengan cara : Klik menu window common libraries kemudian pilih button yang diinginkan.

17


Layer Teks Pada layer ini penulis membuat sebuah tulisan dengan judul Rizki SangPemimpis Photos dengan menggunakan Text Tool. Layer Photo Pada layer photo ini penulis memasukan beberapa photo pada masing masing frame, dengan cara : Klik frame yang di inginkan kemudian klik menu file import import to stage

Kemudian pilih gambar yang akan di import ke stage atur ukuran dan letak gambar tersebut. Catt : agar photo yang dimasukkan berbeda, gunakan insert keyframe untuk memasukkan photo lainnya dan hapus photo yang ganda

18


Layer Background Pada layer ini penulis membuat sebuah kotak persegi dengan ukuran yang sama dengan background pada layer background pada file organisasi. IV. Pemanggilan / Pengintegrasian masing-masing File Pada file index yang merupakan file utama dari pembuatan animasi interaktif ini terdapat 5 buah button diantaranya : Home, Biodata, pendidikan, organisasi, photo. Pada masing masing button yang ada pada setiap file kita menambahkan action scriptnya, dengan cara : Klik button yang akan diberikan action script klik kanan button tersebut pilih action tambahkan action script nya

19


a. Cara memanggil file Biodata, Pendidikan, organisasi, photo dari file index Caranya: Dengan menambahkan script berikut pada masing masing button pada file index : Button Home Button Bioadata : on (press){loadMovieNum("index.swf",0);} : on (press){loadMovieNum("biodata.swf",1);}

Button Pendidikan : on (press) {loadMovieNum("pendidikan.swf",2); Button Organisasi Button Photo : on (press) {loadMovieNum("organisasi.swf",3); : on (press){loadMovieNum("photo.swf",4);}

b. Cara mengembalikan file yang telah dipanggil Pada masing masing file biodata, organisasi, pendidikan dan photo terdapat sebuah tombol TClose yang berfungsi untuk menutup jendela dari file yang telah dibuka.Berikut ini script yang digunakan untuk menutup file tersebut : Tombol Tclose pada file Biodata : on (press) {unloadMovieNum(1);} Tombol Tclose Pada file Pendidikan : on (press){unloadMovieNum(2);} Tombol Tclose pada file organisasi : on (press){unloadMovieNum(3);} Tombol Tclose pada file photo : on(press){unloadMovieNum(4);} c. Pemanggilan file logo 1 dengan menggunakan frame Berikut ini cara yang digunakan untuk memanggil file logo1 dengan menggunakan frame : Klik frame 1 pada layer action dalam file index kemudian klik kanan action Tambahkan script berikut ini : loadMovieNum("logo1.swf", 5); d. Pemanggilan file logo 2 dengan menggunakan button Langkah langkah yang dilakukan : Pada file index klik menu insert new symbol pilih movie klip

Beri nama : logo2_mc

20


Kemudian drop symbol dari movie klip yang ada di libarary tersebut ke stage hingga tampak pada stage bulat putih seperti dibawah ini :

Kemudian klik 2x pada tanda bulat tersebut hingga muncul kotak properties pada pojok bawah file tersebut, dan tulis logo2_mc seperti tampak pada gambar dibawah ini :

Kesimpulan : Pemanggilan file dengan frame : menempatkan script pemanggilan pada frame Pemanggilan file dengan button : menempatkan script pemanggilan pada button Metode level yang digunakan untuk memanggil sebuah file memiliki sifat : Apabila level yang tertinggi digunakan, maka file tersebut akan berada dibagian paling atas, sedangkan jika levelnya sama pada beberapa file tersebut maka yang akan tampil adalah file terakhir yang dipanggil akan tampilPerbedaan pemanggilan dengn metode level dan target : Kalau level koordinatnya 0 , 0 dan levelnya sesuai dengan yang kita tentukan sedangkan dengan target, koordinatnya dapat ditentukan tetapi levelnya sama dengan level pemanggil.

21


Laporan Project 1

Documents

Transcript of Laporan Project 1