Kotak Penelusuran

Selasa, 11 November 2014

Mengaplikasikan desain company profile dalam bentuk media interaktif

Dalam dunia bisnis saat ini sebuah company profile sangat dibutuhkan oleh setiap perusahaan karena company profile berfungsi dalam menyampaikan informasi-informasi penting yang terdapat pada suatu perusahaan. Isi dari company profile sangat beragam bentuknya tergantung apa yang ingin diangkat dalam company profile tersebut. Biasanya company profile sebuah perusahaan berisi mengenai sejarah perusahaan, visi & misi perusahaan, biografi pemilik perusahaan, ruang lingkup perusahaan, produk barang/jasa yang ditawarkan perusahaan serta prestasi yang pernah dimiliki oleh perusahaan.

Dalam perkembangan jaman yang semakin maju, company profile pun dibuat dengan berbagai macam bentuk agar dapat memikat masyarakat untuk mengetahuinya. Ada company profile yang dibuat dalam bentuk media cetak, internet dan ada pula yang melalui bentuk interaktif multimedia.

Pada kesempatan kali ini saya akan menjelaskan mengenai cara membuat sebuah desain company profile dengan media interaktif yang sederhana. Pembuatan desain company profile ini menggunakan program Adobe Flash agar lebih mudah dalam membuat media interaktifnya.

Langsung saja saya akan menjelaskan mengenai cara-cara dalam membuat company profile sebagai berikut:

  • Sebelum mendesain compan profile di program Adobe Flash, lebih baik kita siapkan terlebih dahulu bahan-bahannya, seperti : text, gambar/foto, grafik serta logo perusahaan.
  • Setelah selesai barulah kita mengaktifkan program Adobe Flash. Dalam contoh berikut ini saya menggunakan program Adobe Flash CS5.
  • Setelah kita buka program Adobe Flash, lalu akan muncul tampilan Create New. Kemudian kita memilih ActionScript 2.0
Gambar 1 : Tampilan Create New
  • Setelah itu akan mengatur ukuran tampilan layar kerja Document Settings, kemudian atur juga frame rate menjadi 24.
Gambar 2 : mengatur ukuran layar kerja
  • Setelah selesai kita atur maka akan tampil layar kerja yang telah kita buat tadi.
Gambar 3 : tampilan layar kerja Adobe Flash
  • Kemudian kita masukkan gambar sebagai background pada lembar kerja kita.
Gambar 4 : memasukkan gambar sebagai background
  • Setelah gambar kita masukkan, lalu kemudian klik kanan mouse pada gambar tersebut kemudian pilih Convert to Symbol.
Gambar 5 : pilih convert to symbol
  • Lalu kemudian kita pilih pada bagian Type dan ganti mode typenya menjadi Graphic. Setelah itu klik OK.
Gambar 6 : pilih Graphic
  • Kemudian bila kita ingin menambahkan lagi gambar pada background, kita dapat melakukannya dengan cara yang sama seperti pada gambar no 4,5 & 6.
  • Setelah kita memasukkan gambar-gambar tadi, jangan lupa untuk menentukan durasi waktu gambar dengan pada timeline. Caranya pilih durasi waktu sampai pada detik terakhir, kemudian klik kanan mouse lalu pilih Insert Keyframe.
Gambar 7 : tampilan timeline pada saat memberi keyframe
  • Bila durasi pada gambar ada yang ingin kita kurangi, dapat kita lalukan dengan cara memblok durasi yang kita inginkan sampai pada durasi total layar kerja yang dibuat pada timeline. Setelah diblok langsung saja klik delete pada keyboard komputer kalian.
Gambar 8 : mengurangi durasi waktu
  • Setelah itu bila kita ingin memberikan tambahan text pada background pada dilakukan dengan cara membuat layar baru pada timeline kemudian insert keyframe pada durasi yang diinginkan. Kalau sudah lalu kita ketik text di dalam background.
Gambar 9 : memasukkan text ke dalam background
  • Bila sudah selesai kemudian kita buat lagi layar baru pada timeline untuk membuat fungsi tombol pada company profile tersebut. Caranya adalah kita masukkan gambar-gambar yang akan digunakan sebagai tombol, kemudian atur durasi timeline dari tombol tersebut. Untuk mengatur durasi timelinenya sama seperti pada gambar no 9.
Gambar 10 : membuat tombol interaktif
  • Pilih salah satu gambar yang akan digunakan untuk membuat tombol. Kemudian klik kanan mouse lalu pilih convert to symbol (seperti gambar no.5 & 6). Kemudian pada bagian type pilih button lalu klik OK.
Gambar 11 : convert to symbol pada gambar yang akan dibuat menjadi tombol
  • Setelah gambar tadi sudah menjadi simbol, kemudian double klik gambar tersebut sehingga tampilan pada timeline pun berubah dengan terdapat tulisan Up, Over, Down, Hit.
Gambar 12 : tampilan timeline menjadi berubah
  • Kemudian kita aktifkan tulisan Up pada timeline, sampai berwarna merah lalu klik kanan mouse dan pilih Create Classic Tween.
Gambar 13 : pilih create classic tween

  • Setelah itu lalu kita pilih Over kemudian klik kanan mouse dan pilih Insert Keyframe.
Gambar 14 : Insert Keyframe pada bagian over
  • Setelah memilih insert keyframe, kemudian kita klik kembali gambar yang ingin dijadikan tombol tersebut. Setelah diklik lalu pilih Color Effect disebelah kanan layar. Kemudian atur Style dengan cara memilih Tint.
Gambar 15 : ubah style manjadi Tint
  • Kemudian kita pilih Down, lakukan hal yang sama seperti pada gambar no. 14 & 15. Hanya pada bagian Style kalian ubah menjadi Brightness.
Gambar 16 : ubah style menjadi brightness

  • Setelah itu kita buat lagi layar baru lalu masukkan gambar untuk dijadikan sebagai tombol main menu. Jangan lupa untuk memberi insert keyframe pada bagian akhir timelinenya.
Gambar 17 : membuat layar baru untuk dijadikan tombol main menu
  • Lalu buat lagi layar baru untuk memasukkan gambar buat isi dari tombol sejarah. Gambar dimasukkan pada detik ke-10 kemudian jangan lupa untuk insert keyframe pada akhir timelinenya di detik ke-20.
Gambar 18 : membuat layar baru untuk isi sejarah
  • Setelah itu pada detik ke-10 tadi kita buat text yang bertuliskan "NEXT".
Gambar 19 : membuat text baru
  • Kemudian pada tulisan NEXT tadi kita klik kanan mouse > pilih convert to symbol. Lalu ubah typenya menjadi BUTTON > klik OK.
Gambar 20 : mengubah type menjadi button
  • Lalu kita double klik tulisan NEXT yang telah kita ubah menjadi button tadi tadi, kemudian kita atur UP, OVER dan DOWN caranya sama seperti pada gambar 13, 14, 15 dan 16.
Gambar 21 : mengatur tampilan UP, OVER dan DOWN
  • Pada detik ke-11 kita masukkan gambar lagi untuk halaman kedua sejarah.
Gambar 22 : memasukkan gambar untuk halaman kedua
  • Lalu kita buat lagi text dengan tulisan "PREV". Kemudian jangan lupa untuk mengubah tulisan PREV dengan convert to symbol lalu ganti typenya menjadi button. Caranya sama seperti pada gambar 20.
Gambar 23 : memasukkan text yang bertuliskan PREV
  • Double klik tulisan PREV tadi untuk mengatur UP, OVER dan DOWN. Caranya sama seperti pada gambar 13, 14, 15 dan 16.
Gambar 24 : mengatur tampilan UP, OVER dan DOWN pada tulisan PREV
  • Kita buat lagi layar baru untuk memasukkan gambar baru buat tombol biografi pada detik ke-20. Lalu masukkan juga tulisan NEXT pada gambar tersebut dan jangan lupa convert to symbol. Kemudian atur UP, OVER dan DOWNnya. Caranya sama seperti pada gambar 20 & 21.
Gambar 25 : memasukkan gambar untuk tampilan biografi & tambahan tulisan NEXT
  • Pada detik ke-21 kita masukkan kembali gambar untuk halaman kedua biografi. Kemudian kita beri tulisan PREV pada bagian bawahnya. Jangan lupa tulisan PREV di convert to symbol kemudian atur UP, OVER dan DOWN. Caranya sama seperti pada gambar 23 & 24.
Gambar 26 : memasukkan gambar untuk halaman kedua biografi beserta tulisan PREV
  • Lalukan hal yang sama untuk tampilan tombol HD Indonesia, Jenis Motor HD, HDCI dan Alamat HD. Caranya sama seperti pada gambar 18 sampai gambar 21.
Gambar 27 : lakukan hal yang sama untuk ini halaman pada tombol yang lainnya
  • Buat lagi layar baru kemudian insert keyframe pada akhir timeline. Lalu ganti nama layar baru tersebut dengan nama "ACTION".
Gambar 28 : buat layar baru kemudian beri nama ACTION
  • Lalu pada detik pertama kita klik kanan mouse > pilih ACTIONS.
Gambar 29 : pilh ACTIONS
  • Kemudian akan muncul tampilan ACTIONS - FRAME. Lalu pada Timeline Control kita double klik tulisan "STOP".
Gambar 30 : pilih tulisan STOP
  • Setelah itu akan muncul tulisan "stop ();". Yang berarti tombol stop telah aktif pada layar ACTION. Hal ini bertujuan supaya tampilan dari company profile yang kita buat tidak akan berpindah secara otomatis lagi.
Gambar 31 : tombol stop telah aktif
  • Pada layar button kita klik lagi tombol sejarah yang telah kita buat tadi. Kemudian klik kanan mouse > pilih actions.
Gambar 32 : pilih action pada tombol sejarah
  • Lalu akan muncul tampilan ACTION - FRAME. Pilih tulisan "go to" pada bagian timeline control.
Gambar 33 : pilih go to pada tampilan ACTION - FRAME
  • Setelah itu kita pilih "Go to and stop". Lalu ubah framenya menjadi 10. Maka akan tampilan tulisan "on (release) go to and stop (10);" berarti tombol sejarah telah aktif dan saat kita klik langsung akan muncul gambar pada detik ke-10 yang telah kita atur sebelumnya. Yang harus diperhatikan adalah jika pada saat kita memilih tulisan go to and stop ternyata tidak terdapat tulisan "on (release)" berarti tombol go to and stop belum aktif, jadi kita harus mengatur ulang lagi sampai muncul tulisan "on (release)".
Gambar 34 : aktifkan tombol go to and stop dan pilih framenya

  • Pilih tombol Main Menu, klik kanan mouse > pilih Actions. Kemudian kita pilih tulisan "go to" pada bagian timeline control. Setelah itu kita klik tulisan "go to and stop" dan kita ubah framenya menjadi 1, maka akan tampil tulisan "on (release) go to and stop (1);" berarti tombol main menu ini telah aktif. Jadi bila kita mengetik tombol main manu maka akan tampil halaman awal di detik pertama. Caranya sama seperti pada gambar 32, 33 & 34.
Gambar 35 : pilih main menu dan aktifkan go to and stop
  • Pilih layer sejarah pada timeline detik ke-10, klik tombol NEXT. Lalu klik kanan mouse > pilih Actions. 
Gambar 36 : pilih actions untuk tombol NEXT
  • Kemudian kita double klik tulisan "go to" pada timeline control. Lalu klik pada bagian tulisan "go to and stop", ubah framenya menjadi 11. Setelah itu akan muncul tulisan "on (release) go to and stop (11);" berarti go to and stop telah aktif. Jadi ketika nanti kita akan klik tombol next maka akan langsung berpindah ke detik ke-11.
Gambar 37 : aktifkan go to and stop pada tombol next
  • Lalu kita klik timeline pada detik ke-11 sebagai halaman kedua isi sejarah. Setelah itu kita pilih tombol PREV. Kemudian klik kanan mouse > pilih Actions.
Gambar 38 : pilih Actions pada tombol PREV
  • Double klik tulisan "go to" pada timeline control. Lalu klik pada bagian tulisan "go to and stop", ubah framenya menjadi 10. Setelah itu akan muncul tulisan "on (release) go to and stop (10);" berarti go to and stop telah aktif. Jadi ketika nanti kita klik tombol prev maka akan tampil kembali ke halaman sebelumnya yaitu halaman pada detik ke-10. Lakukan hal yang sama pada halaman ini tombol yang lainnya dan jangan lupa untuk mengatur frame pada tombol NEXT & PREV seperti pada gambar 36 sampai gambar 39.
Gambar 39 : aktifkan go to and stop pada tombol prev
  • Untuk melihat hasil editan company profile yang telah kita buat tadi dengan cara klik Control > klik Test Movie > klik Test atau bisa langsung menekan tombol CTRL + ENTER pada keyboard.
Gambar 40 : tekan tombol CTRL + ENTER untuk melihat hasil editan
  • Jika perkerjaan telah selesai di edit jangan lupa untuk selalu di save. Setelah di save kemudian hasil editan yang telah dibuat tadi langsung kita publish, maksudnya supaya bagi orang lain yang ingin melihat hasil editan kita tadi tidak perlu repot-repot untuk menginstal Adobe Flash Player terlebih dahulu. Untuk publish langsung saja kita klik File > pilih Publish Settings atau dengan menekan tombol CTRL + SHIFT + F12
Gambar 41 : pilih publish settings setelah hasil editan di save
  • Pada tampilan Publish Settings, lalu kita klik "Flash (.swf)" pada bagian PUBLISH. Kemudian kita pada bagian OTHER FORMATS kita pilih "Win Projector". Untuk yang mengedit menggunakan WINDOWS menggunakan Win Projector, sedangkan bagi yang menggunakan MAC menggunakan Mac Projector. Setelah itu terakhir kita pilih folder untuk menyimpan hasil pubish dengan cara memilih Output File. Jika sudah selesai semua kemudian kita klik PUBLISH > lalu OK.
Gambar 42 ; atur format publish pada bagian publish settings

Gambar 43 : tampilan awal company profile yang diedit tadi setelah kita publish

Demikian langkah - langkah dalam membuat Company Profile Interaktif yang sederhana. Semoga artikel ini dapat membantu kalian yang masih baru dalam menggunakan program Adobe Flash.

Sekian dan terima kasih...