MAKALAH PROJECT MULTIMEDIA E-LEARNING MATCH FOR HIGH SCHOOL

ANGGOTA: BOYBOY (1231044) BILLY JUNAIDI () WILLIEM (1231042)

BAB I KATA PENGANTAR

Puji sukur kita panjatkan kepada Tuhan Yang Maha Esa atas selesaiannya makalah ini dengan tepat waktu dan terima kasih kepada orang-orang yang mendukung dan membantu dalam pembuatan makalah ini. Berikut ini penulis mempersembahkan sebuah makalah berjudul Project Multimedia ELearning Match for High School , yang menurut penulis dapat memberikan manfaat bagi para murid setingkat SMA untuk mempelajari pelajaran Matematika dengan mudah, dimanapun, dan kapanpun diinginkan. Melalui kata pengantar ini penulis akan memperkenalkan anggota dalam pembuatan Project Multimedia E-Learning Match for High School ini dan juga orang lain yang membantu sebagai tester, yaitu: Anggota: 1.Williem sebagai Project Manager & Developer 2.Boyboy sebagai Designer & Developer 3.Billy Junaidi sebagai Developer

Tester: 1.Irwin 2.Betselin

BAB II TOOLS

HARDWARES: LAPTOP PC MODEM

MAIN SOFTWARES: Macromedia Flash 8

SUPPORTING SOFTWARES: Adobe Photoshop CS6 (For Designing & editing some images) Corel Draw (Was used only to design the title) Microsoft Office 2010 (For WordArt) Microsoft Office 2003 (For WordArt) Google Chrome (For material gathering and research purpose) Video Games (Stress Relievers)

BAB III PROSES PEMBUATAN PROGRAM

Pertama kali ketika pembuatan proposal mengenai apa yang ingin kita buat dengan dead-line 2 minggu kita berdiskusi apa yang ingin kita bikin. Setelah berpikir untuk 4 hari kita semua setuju dengan membuat E-Learning dengan Flash. Tetapi karena keterbatasan pengetahuan (kita bertiga belum pernah sentuh Flash) maka kita tunggu hingga kita diajari dikelas. Setelah kita bisa menggunakan flash, kita menghabiskan minggu pertama untuk memikirkan bagaimana kita akan membuat Flash kita. Dan di hari minggunya kita mencari design untuk Background, Title Logo, Button, dan bingkai, setelah itu kita mencari bahan-bahan ajaran yang kita perlukan. Dan minggu kedua program manager membuat Story boardnya.Setelah itu semua maka Proses pembuatan program dimulai. Untuk proses pembuatan program kita membuatnya dengan cara single frame, single keyframe, dan single layer, sisanya dilakukan dengan button dan movie clip.Canvas kita memiliki ukuran 800x970 pixels, flash secara default memiliki canvas dengan ukuran 550x400 pixels, untuk mengubahnya klik canvas lalu lihatlah ke window di bagian bawah canvas disana actions dan dibawah actions ada properties|Filters|Parameter, klik properties lalu klik angka size tersebut (bukan sizenya itu hanya label aja ga bias ditekan) maka akan muncul document properties. Disana ubah dimension sesuai kesukaan (untuk kita 800x970) abaikan yang lain lalu ok, dan jadilah canvas dengan ukuran sesuai dengan keinginan kita Sekarang untuk Frame kita, Dalam satu frame tersebut terdapat 7 button, 8 movie clip, dan 1 gambar untuk background. 6 movie clip digunakan untuk membahas bahan kami 1 movie clip untuk memunculkan credit, dan 1 lagi digunakan untuk membuat animasi gerak untuk logo title kami. Button digunakan untuk menjalankan 7 movie clip yaitu bahan dan credit,untuk movie clip logo dia bergerak secara terus menerus sehingga tidak perlu button. Pertama mari kita bikin semua movie clip dan Button tersebut, kita cukup membuatnya tidak perlu diisi dahulu. Untuk membuatnya cukup pertama dimenubar pilih insert lalu new symbol, atau lebih gampang cukup CTRL+f8. Maka akan muncul sebuah pop-up, di pop-up itu masukan nama symbol lalu pilih tipe symbol yang diinginkan, in this case, kita butuh 7 button dan 2 movie clip. Agak repot sih karena harus bikin satu per satu jadi jangan nyerah dulu ya karena setelah ini ada yang lebih repititif lagi, setelah selesai membuat buttons dan movies tersebut maka sekarang kita harus meng-editnya agar terlihat bagus. Sebelum memasuki bagian edit, kita harus tahu dimana button-button dan movie clip itu tersimpan, nah, untuk menjawab itu gampang, benda-benda tersebut tersimpan dalam library kita dimana library tersebut? Library tersebut ada di bagian sudut kanan atas flash, cukup meng-kliknya maka akan turun list benda-benda yang kita insert tadi.

Nah sekarang untuk mengeditnya, kita mulai dari button saja, karena lebih mudah, pada library pilih button yang ingin kita edit terlebih dahulu, lalu klik kanan dan klik edit. Nah sekarang lihatlah kebagian atas canvas yaitu bagian timeline. Untuk Button ada 4 frame Up, Over, Down, &Hit. Up adalah animasi ketika button dalam keadaan netral atau tidak terjadi apa-apa. Over adalah animasi ketika pointer mouse ada diatas button tetapi tidak menekannya. Down adalah animasi ketika button diaktivkan. Hit animasi ketika button ditekan. Nah kita perlu membuat gambar untuk setiap frame tersebut. Button biasanya terdiri dari gambar button, dan text, tetapi text bukanlah sebuah keharusan. Untuk setiap framenya disarankan gambarnya terjadi perubahan agar terlihat menarik. Nah sekarang mari kita membuatnya. Pertama letaklah gambar button, kita anggap gambar tersebut adalah sebuah persegi panjang, nah pada persegi panjang tersebut kita ingin ada sebuah tulisan diatasnya, maka kita pilih text-tool dan ketiklah benda yang kita inginkan misalnya START, nah setelah itu, untuk meloncat ke frame selanjutnya pada timeline dibawah klik kanan pada frame selanjutnya, dan pilihlah insert keyframe ini digunakan agar akan terjadi perbuahan pada frame tersebut.nah klik insert keyframe lalu aturlah perubahan yang di-inginkan pada button tersebut, terus sampai keempat frame tersebut dipenuhi oleh keyframe tersendiri. Lakukan hal yang sama pada seluruh button yang anda bikin tadi. Nah setelah itu semua selesai, mari kita lanjutkan ke movie clip. Kita memiliki 2 macam movie clip yang pertama movie clip yang kita gunakan untuk membuat title-ku berwarna pelangi dan bergerak, dan satu lagi movie clip yang digunakan untuk menampilkan bahan materi. Nah beda kedua movie tersebut adalah untuk movie clip title itu dia bergerak secara terus menerus tanpa perintah, sedangkan untuk movie clip bahan movie clip ini hanya akan mulai jika aku menekan button yang tadi kita bikin. Ok, sekarang mari kita edit movie-movie clip tersebut pertama kita mulai dari title terlebih dahulu, untuk title kita akan menggunakan sebuah teknik bernama masking. Teknik ini digunakan untuk memunculkan effect warna pelangi bergerak tersebut. Untuk membuatnya kita cukup butuh dua layer, tapi untuk membuat yang punyaku dibutuhkan 5 layer, 2 layer untuk membuat masking yang bergerak, 2 layer untuk masking yang tidak gerak, dan 1 layer lagi hanya untuk gambar tambahan. Nah pertama mari kita bikin masking untuk gambar yang tidak bergerak. Di Layer pertamaketiklah hal yang ingin dimasking dengan menggunakan text tool, in this case, MATH. Lalu bikinlah layer baru, pastikan bahwa layer tersebut berada dibawah layer pertama, ini karena yang akan kita mask adalah huruf tersebut bukanlah warnanya. Nah pada layer tersebut bikinlah satu persegi panjang dengan menggunakan rectangle tool ubah warnanya klik persegi panjang tersebut lalu dibagian propertiesnya(dibagian bawah canvas) ada satu kotak yang memiliki warna yang sama dengan persegi panjang anda, klik kotak tersebut dan muncullah banyak pilihan warna, pilihlah warna pelangi. Lalu aturlah agar posisi persegi panjang tersebut sejajar dengan huruf kita. Sekarang pada klik-kanan pada layer pertama lalu pilih mask, ok sekarang kita mendapat huruf MATH yang berwarna pelangi.

Sekarang untuk melakukan masking yang bergerak langkahnya hamper jadi kita cukup mengulangi hal-hal tadi tetapi pada layer persegi panjang kita akan memindahkan persegi panjangnya ke bagian hurufM dan menambah beberapa keyframe. Pertama tentukanlah berapa lama kita ingin persegi panjang tersebut bergerak dari point A ke point B, misalnya kita ingin persegi panjang tersebut bergerak dari A ke B dalam dua detik, maka, jika kecepatan animasinya 12 fps jadi kita membuat keyframe di frame ke 24 untuk layer persegi panjang.di keyframe tersebut pindahkan persegi panjang tersebut ke bagian huruf H, lalu sekarang klik kanan pada salah satu frame diantara kedua keyframe kita, lalu pililah create motion tween. Sekarang persegi panjang akan bergerak dari point A ke B untuk mencobanya tekanlah enter. Jika sudah selesai mengetestnya maka buatlah keyframe lagi pada frame ke 48 dan pindahkan persegi panjang kembali ke M dan buatlah motion tween lagi sekarang jika kita enter maka animasinya akan bergerak bolak balik secara nonstop. Ok, itu adalah untuk membuat movie clip title logo untuk movie clip itu tidak ada coding sama sekali. Nah sekarang untuk movie clip bahasan akan ada 3 buah code yang akan sering kita jumpai yaitu coding Stop(); , gotoAndPlay(); , dan On (release) .Stop(); digunakan untuk menghentikan movie clip, gotoAndPlay();digunakan pada button untuk menjalankan movieclip pada frame tertentu. On (release)digunakan pada button agar perintahnya, misalnya gotoAndPlay();hanya akan dijalankan ketika button yang diclick dilepas. Ok sekarang kita mulai pada movie clip pertama. Dalam movie clip ini kita membutuhkan beberapa button baru, background , dan banyak layer. Jadi button yang akan kusebutkan untuk selanjutnya adalah button baru jadi dibikin ya!. Sekarang untuk layer-layernya, Layer pertama untuk Background baru. Layer kedua untuk button =>, layer ketiga untuk button <=, Layer ke-empat untuk membuat sebuah alas agar huruf lebih kelihatan dari backgroundnya, layer kelima untuk button X. dan sisanya untuk materi yang akan dibahas, jumlah layernya tergantung dari banyaknya materi. Pertama-tama yang akan kita lakukan adalah membuat semua bahan untuk layer pertama ke layer kelima, lalu setelah itu kita mulai dari animasi layer pertama yaitu layer untuk munculnya background masih ingatkah cara membuat persegi panjang pelangi bergerak?, caranya sama, cuman sekarang kita akan membuatnya berubah dalam size. Caranya adalah pertama, masukan background tersebut ke layer pertama dengan mengklik layer satu lalu masukan background tersebut ke canvas, klik kanan background yang anda masukan lalu pilih convert to symbol, pilih graphics lalu masukan namanya, sekarang insert keyframe pada frame ke 5. balik ke frame pertama ubah ukuran background tersebut dan menjadi sangat kecil, lalu pada bagian properties, dibagian colors pada dropdownya pilih alpha dan ubah persennya menjadi 0. dan sekarang creat motion tween seperti sebelumnya. Sekarang backgroundnya barunya akan muncul dari kecil ke besar .nah setelah background muncul, kita akan memunculkan button-button yang lainnya. Satu catatan, untuk setiap item yang akan ditween harus satu item per layer, tidak boleh 2 item dalam satu layer karena ini akan mengganggu animasi item pada frame tersebut alhasil animasi akan menjadi aneh dan bahkan tidak jelas. Sekarang bikin layer baru, lalu masukan item selanjutnya dan susunlah item tersebut menurut keinginan dan masukan item selanjutnya pada frame diatas frame background yang telah muncul, lakukan cara memunculkannya seperti background, tapi kita juga bisa menambah beberapa variasi agar terlihat menarik, misalnya membuatnya berputar, membuatnya bergerak dari kiri ke kanan. Lakukan hal ini pada layer ini sampai layer kelima, dan selanjutnya untuk bahan bahasan sama juga cuman karena kita ingin memunculkannya setelah alasnya muncul, jadi, buatlah keyframe pada frame diatas alas setelah alas itu muncul lalu masukan-lah bahan tersebut jika itu gambar jangan lupa convert to symbol, untuk text juga hati-hatilah dengan bahan yang diketik karena jika sudah di-convert to symbol dan kalian tidak mengcopy-nya ke tempat lain text-nya maka jika ada kesalahan kalian harus ketik ulang, setelah selesai mengconvert, buatlah animasi untuk membuatnya

muncul dan membuatnya menghilang jadi akan ada 3 keyframe, keyframe pertama untuk saat item tidak kelihatan, keyframe kedua untuk saat item muncul dan keyframe ketiga saat item menghilang. Lakukan ini pada bahasan lain juga masukanlah keyframe tersebut pada framenya setelah bahasan tersebut menghilang. Sekarang untuk mengetestnya bikinlah new flash document dan copy lah movie clip tersebut ke library new project itu, ubahlah ukuran canvasnya agar sama dengan ukuran canvas project anda kalau dah lupa caranya ada click canvas dan ke propertiesnya dan cliklah pada ukurannya dan ubahlah ukuran tersebut, masukan movie clipnya ke dalam canvas dan tekanlah ctrl + enter nah sekarang movie clip akan jalan secara otomatis. Dari hasil test itu pasti akan kelihatan kalau animasi bergerak dengan sangat cepat sehingga isinya sulit dibaca. Disinilah kegunaan coding,sekarang kita akan memasukan code Stop();, pada semua frame dmana bahan berada pada keyframe muncul. Untuk melakukannya kliklah frame tersebut, lalu turunlah kebagian properties, diatas properties akan ada action, kliklah itu. Sekarang masukan codingnya dan klik tanda centang yang ada diatas itu. Jika kalian mengikuti step dengan benar maka pasti akan muncul message box yang mengatakan tidak ada error, sekarang lakukan hal yang sama pada semua frame yang dimana ada keyframe yang dimana bahan muncul. Sekarang jika kita test bahan hanya akan muncul pada halaman pertama dan berhenti disana. Untuk menanggulangi itu kita menggunakan button kita. Untuk yang pertama adalah button => Buatlah keyframe pada layernya button tersebut, keyframe itu dibuat pada frame dimana frame tersebut stop, lalu klik buttonnya dan buka lagi action formnya, dan masukan On (release) {gotoAndPlay(frame selanjutnya)}, dan buat lagi keyframe pada frame selanjutnya klik buttonnya dan buka lagi action formnya, sekarang hapus semua codingnya, maka ketika kita jalankan movie clip tersebut dan tekan button tersebut ketika animasi selanjutnya berjalan button tersebut akan langsung tidak dapat berjalan. Nah sekarang ulangi proses pembuatan button selanjutnya sampai semua bahan kecuali bahan yang terakhir. Karena kita tidak ingin animasinya mengulangi dirinya. Sekarang adalah button <= untuk button ini codingnya sama dan letak keyframenya juga sama dengan button => tapi kita tidak membutuhkan 2 keyframe, cukup 1 saja yang dimana letaknya sama dengan keyframe dimana bahan muncul. Sekarang masukan codingnya yang sama yaitu On (release) {gotoAndPlay(frame dimana animasi muncul untuk bahan sebelumnya)} nah sekarang masukan coding ini ke semua bahan kecuali untuk bahan pertama. Sekarang tombol => dan <= akan berguna seperti yang dinginkan (hopefully). Nah sekarang untuk button X tombol ini berguna untuk menutup video clip ini, sebelum masukan codingnya, buatlah satu keyframe baru untuk SEMUA layer non bahan. Letaklah keyframe non bahan tersebut sejauh mungkin dari bahan terakhir. Misalnya bahan terakhir berada pada menghilangnya pada frame ke 125 maka buatlah keyframe pada frame ke 200 ini hanya untuk membuat jarak. Sekarang buatlah animasi dimana semua item yang ada di layer tersebut menghilang dengan menggunakan alpha. Untuk background buatlah seolah dia mengecil. Jika sudah masukanlah coding pada button X yaitu On (release) {gotoAndPlay(200)} sekarang klik frame pertama pada layer 1 dan masuk-kan coding Stop();. Ini agar movie clip tidak langsung jalan, kita sekarang akan membuat agar nanti ketika dia berada pada project kita, bisa kita jalankan melalui button-button kita Sekarang copy kembali movie clip anda ke project anda yang sebenarnya overwrite, dan masukan movie clip itu pada canvas. Pastikan posisinya benar soalnya jika posisinya salah maka background anda akan kelihatan aneh.nah dengan ini movie clip pertama selesai, sekarang kuatkan dirimu dan buatlah step yang sama kecuali bahannya jangan samakan, pada semua video clip. Jika sudah selesai membuat semua movie clip, dan juga sudah selesai memindahkan dan menyesuaikan posisinya sekarang kita akan menjalankannya melalui button-button yang ada pada main frame kita, disini kita akan mempelajari sebuah hal baru yaitu instance name. Ini berfungsi untuk membuat item kita memiliki sebuah nama ketika item tersebut berada di canvas. Nah klik-lah movie clip pertama anda yang ada didalam canvas, perhatikan properties di bagian bawah canvas, dibagian bawah dropdown movie clip ada instance name kan?, nah masukanlah namanya, untuk

namanya ingat bahasa program ini case sensitive jadi, jika ada perbedaan dalam bentuk besar atau pun kecilnya sebuah huruf maka akan terjadi error, terus tidak boleh ada spasi juga. Untuk sementara mari kita namakan movch01, nah lakukan yang sama pada movie clip yang lain jadi namanya menjadi movch02, movch03,dst. Dan sekarang klik button untuk bab pertama kalian pergi ke action scriptnya dan masuk-kan coding ini
on (release) { movch01.gotoAndPlay(2); movch02.gotoAndStop(1); movch03.gotoAndStop(1); movch04.gotoAndStop(1); movch05.gotoAndStop(1); movch06.gotoAndStop(1); mocred.gotoAndStop(1); }

Lakukan yang sama pada semua button yang lain tetapi ganti codenya untuk movie clip yang benar, jadi jika yang dibikin adalah untuk button dua codingnya akan seperti ini:
on (release) { movch01.gotoAndStop(1); movch02.gotoAndPlay(2); movch03.gotoAndStop(1); movch04.gotoAndStop(1); movch05.gotoAndStop(1); movch06.gotoAndStop(1); mocred.gotoAndStop(1); }

Dan seterusnya Jika sudah coba jalankan project kalian dengan CTRL + enter, jika semuanya berjalan dengan lancer maka berarti program kalian berjalan dengan lancar dan berarti program kalian sudah selesai.

BAB IV PENUTUP

Demikian yang dapat kami paparkan mengenai materi yang menjadi pokok bahasan dalam makalah ini. Penulis banyak berharap para pembaca yang budiman dusi memberikan kritik dan saran yang membangun kepada penulis demi sempurnanya makalah ini dan dan penulisan makalah di kesempatan kesempatan berikutnya. Dan kami minta maaf sebesar-besarnya jika ada kesalahan dalam makalah yang kami buat. Semoga makalah ini berguna bagi penulis pada khususnya juga para pembaca yang budiman.