Feature news

Cara Mudah Membuat CD Interaktif

Cara membuat CD Interaktif

Selamat datang di blog Arya Creative Design. Kali ini Admin akan menjelaskan Cara Mudah Membuat CD Interaktif yang simple, mudah, dan interaktif. Pasti sudah banyak yang mengetahui apa itu CD Interaktif, untuk pengertian dan defenisi silahkan googling. :D.

Baik untuk persiapan membuat CD Interaktif yang paling penting itu adalah Adobe Flash, terserah versi berapa yang di gunakan. Dan untuk tampilan tergantung kreasi sendiri, jika ingin menggunakan gambar yang di dapat di internet hanya memerlukan software browser atau mendesainnya di program pengolah grafis memerlukan program tersebut. Dan untuk simplenya sekarang kita cari beberapa gambar komponen yang di perlukan, beberapa gambar icon untuk tombol, home, back, exit, map, user, world. Dan untuk effect suara dapat di download free di http://www.freesfx.co.uk/ di butuhkan akun untuk bisa download dari sana.

Selanjutnya adalah scene atau halaman CD Interaktifnya. Scene tergantung dari untuk apa di buat, dan kali ini kita membuat CD Interaktif untuk Profil company. Dan contohnya seperti berikut :
Scene 1.
Adalah Start untuk memunculkan pembukaan. Akan kita berikan tombol yang terletak di tengah bawah untuk lanjut ke Scene 2.
Scene 2.
Adalah Home, di sini kita masukan tombol menu, terserah menu yang kamu ingin tampilkan, seperti Profil, Map, Website, Contact, dan tombol exit.
Scene 3.
Terserah kreasi sendiri menentukan berapa banyak scene yang kamu inginkan dan kebutuhan. Dan untuk kali ini pada artikel kita perlukan Scene Tentang, Website, Contact.
http://www.iconarchive.com/

Dan sekarang kita mulai untuk tahap membuat CD Interaktif.

Step 1.
Buka Software Adobe Flash CS3 dan buat file baru menggunakan action scrip3.0
Cara membuat CD Interaktif

Step 2.
Setelah file di buat, pada Layer 1, frame pertama sampai frame ke 5 kita klik kanan dan pilih Insert Keyframe (Atau Keyboard Shortcut F6).
Cara membuat CD Interaktif

Step 3.
Beri nama setiap frame sesuai scene yang kita buat sebelumnya dengan cara seleksi frame satu persatu kemudian pada bagian properti kita ketik Name Label nya. Frame 1 : “start” , Frame 2 : “home”, Frame 3 : “tentang”, Frame 4 : “website”, Frame 5 : “contact”. Pemberian nama pada frame memudahkan kita untuk membuat scrip yang nantinya menuju ke masing – masing frame.
Cara membuat CD Interaktif

Setelah kita beri nama setiap frame maka akan muncul icon bendera di setiap framenya.
Cara membuat CD Interaktif

Step 4.
Import gambar yang di perlukan seperti gambar icon home, website, contact, exit. Dengan klik File > Import. Dan pilih Import to Library untuk mengimport gambar pada Library.
Cara membuat CD Interaktif

Akan muncul windows baru dan seleksi beberapa file.
Cara membuat CD Interaktif
Dan setelah klik open maka gambar akan berada di panel library.
Cara membuat CD Interaktif

Step 5.
Selanjautnya pada Layer 1 Frame pertama, kita taruh gambar logo (Klik + Grag dari library) dan Objek Text Menggunakan Text Tool, yang seperti terlihat pada gambar di bawah.
Cara membuat CD Interaktif
Step 6
kedua objek gambar dan text kita jadikan masing – masing symbol. Pertama objek gambar logo kita jadikan Movie Clip, dengan cara pilih menu Modify dan klik Convert to Symbol (F8).
Cara membuat CD Interaktif

Kemudian akan muncul window baru. Pada kolom Name kita tulis nama objeknya. Dan Type pilih Movie Clip dan Klik OK
Cara membuat CD Interaktif
Selanjutnya akan otomatis objek gambar akan menjadi Symbol Movie Clip. Kemudian kita edit objek logo dengan double klik objek tersebut dan hasilnya terlihat pada gambar.
Cara membuat CD Interaktif

Yang di tunjukan likaran merah menandakan sudah memasuki objek Movie Clip yang di beri nama logo. Dan selanjutnya kita akan memberikan efek animasi pada Movie Clip ini.

Step 7
Sekarang kita masih di dalam Movie Clip Logo. Pada layer 1, Frame pertama kita klik kanan dan pilih Create Montion Tween.
Cara membuat CD Interaktif

Kemudian berikan keyframe di frame ke lima.
Cara membuat CD Interaktif
Selanjutnya klik objek yang berada di frame 1, dan ubah opsi Color pada panel property menjadi Alpha dan kolom di sebelahnya 26 (Terserah sesuai keinginan). Ini berfungsi untuk animasi opening logo ketika cd Interaktif di jalankan.
Cara membuat CD Interaktif

Buat layer baru dengan menggunakan icon yang di tunjukan likaran merah pada gambar di bawah. Membuat layer baru untuk memberikan Scrip. Jika tidak di berikan scrip animasi akan berulang-ulang.
Cara membuat CD Interaktif
Dan berikan keyframe pada frame 5 di layer 2, lalu klik kanan dan pilih Action.
Cara membuat CD Interaktif
Dan masukan scrip 

//untuk memberhantikan animasi
stop();

Cara membuat CD Interaktif
Selanjutnya kita kembali ke Scene 1 untuk mengedit menunya. Tinggal klik Scene 1 di sebelah Logo (lihat pada gambar).
Cara membuat CD Interaktif
Selanjutnya Time line akan menjadi seperti terlihat pada gambar dibawah.
Cara membuat CD Interaktif

Step 8
Lihat objek pada frame 1 di layer 1. terdapat objek yang sudah menjadi movie clip logo dan di bawahnya terdapat objek text “Next”. Nah.. Sekarang objek text tersebut kita jadikan objek button untuk menuju ke frame selanjutnya.
Cara membuat CD Interaktif

Sama seperti membuat Movie Clip sebelumnya klikobjeknya > modify > Convert to Symbol (F8). Dan letak perbedaannya hanya kita ubah Type nya menjadi Button. Karena kita menggunakan Action Scrip 3.0 kita button harus di beri nama dan kita berikan scrip nya pada frame. Untuk button Next kita beri nama “next_btn”
Cara membuat CD Interaktif


Step 9
selanjutnya kita masukkan Scrip pada Layer 2 frame1. Klik kanan frame 1 > Action
Cara membuat CD Interaktif

Dan ketik scrip seperti di bawah.

stop();
//untuk memanggil fungsi next_btn
next_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeHome);

//fungsi next_btn menuju ke frame home
function menujuKeHome(event:MouseEvent):void {
gotoAndPlay("home");
}

//scrip untuk display ukuran penuh
stage.displayState = StageDisplayState.FULL_SCREEN;

Cara membuat CD Interaktif

Step 10.
Selanjutnya kita akan mengedit halaman Main menu. Klik Frame 2 pada layer 1, kita klik drag objek gambar dari panel library untuk button. Dan jadikan button setiap objek tersebut. Untuk hal memberikan nama terserah, yang penting adalah pemberian button namenya pada panel Property. Untuk jelasnya lihat pada gambar di bawah. Buat dari kreasi sendiri seperti menambahkan text di button dll.
Cara membuat CD Interaktif

Selanjutnya berikan scrip pada frame 2 di layer 2 sesuai pada gambar di bawah.

stop();

tentang_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeTentang);
website_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeWebsite);
contact_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeContact);
exit_btn.addEventListener(MouseEvent.MOUSE_UP,exitMenu);

function menujuKeTentang(event:MouseEvent):void {
gotoAndPlay("tentang");
}

function menujuKeWebsite(event:MouseEvent):void {
gotoAndPlay("website");
}

function menujuKeContact(event:MouseEvent):void {
gotoAndPlay("contact");
}

function exitMenu(event:MouseEvent):void {
fscommand("quit");
}

Cara membuat CD Interaktif

Step 10.
Selanjutnya kita berikan objek button Home setiap halaman. Klik frame 3 di layer 1 untuk memberikan objek di sana. Klik drag gambar home yang sudah di import pada panel library. Kemudian jadikan button dan meberikan nama button tersebut di panel property.
Cara membuat CD Interaktif
Dan tulis scrip seperti terlihat pada gambar.

stop();

home_btn.addEventListener(MouseEvent.MOUSE_UP,keHome1);
function keHome1(event:MouseEvent):void{
gotoAndPlay("home");
}

Cara membuat CD Interaktif

Selanjutnya Copy > Paste objek button home di frame 4 dan frame 5 di layer 1, karena objeknya yang sama untuk button. Dengan cara klik semua objek, kemudian klik kanan pada objek dan pilih Copy. Selanjutnya klik frame selanjutnya ( frame 4 dan frame 5). lalu klik kanan pada stage yang kosong dan pilih Paste in Place.

Cara membuat CD Interaktif

Step 11.
Kembali ke frame 3 untuk halaman Tentang. Kita tulis beberapa penjelasan mengenai perusahaan. Di mana objek tersebut objek text, dan gambar.

Cara membuat CD Interaktif

Step 12.
selanjutnya ke farme 4 layer 1 untuk halaman Website. Contoh kali ini kita akan memeberikan gambar screen shot website dan kita jadikan button, yang ketika di klik akan membuka halaman website perusahaan. Juga pada halaman ini bisa kita beikan penjelasan website tergantung kreasi sendiri. Dan jangan lupa untuk memberikan nama objek button screen shot pada panel property.
Cara membuat CD Interaktif

Dan berikut Scrip yang kita masukkan. Untuk scrip home bedakan nama functionnya misalnya di frame 3 fungsion namenya home1, di frame 4 function namenya home2, jika ada kesamaan nama function di frame akan menimbulkan error :D.

stop();

home_btn.addEventListener(MouseEvent.MOUSE_UP,keHome2);
function keHome2(event:MouseEvent):void{
gotoAndPlay("home");
}

website.addEventListener(MouseEvent.MOUSE_UP,keweb);
function keweb(event:MouseEvent):void{
 navigateToURL(new URLRequest("http://aryacreativedesign.blogspot.com.au/"), "_blank");
}

Cara membuat CD Interaktif

Step 13.
Lalu kita ke frame 5 di layer 1 untuk halaman Contact. Di halaman tersebut kita masukkan objek gambar email, twitter dan facebook, dan masing – masing kita jadikan objek button. Dan berikan nama objek button di panel property.
Cara membuat CD Interaktif

Berikut scrip untuk halaman Contact.
stop();

home_btn.addEventListener(MouseEvent.MOUSE_UP,keHome3);
function keHome3(event:MouseEvent):void{
gotoAndPlay("home");
}
mail.addEventListener(MouseEvent.MOUSE_UP,sendmail);
function sendmail(event:MouseEvent):void{
navigateToURL(new URLRequest("mailto:aryacreativedsg@gmail.com"), "_blank");
 
}

twitter.addEventListener(MouseEvent.MOUSE_UP,opentw);
function opentw(event:MouseEvent):void{
navigateToURL(new URLRequest("https://twitter.com/aryacreativedsg"), "_blank");
 
}

facebook.addEventListener(MouseEvent.MOUSE_UP,openfb);
function openfb(event:MouseEvent):void{
navigateToURL(new URLRequest("https://www.facebook.com/aryacreativedsg"), "_blank");
 
}

Cara membuat CD Interaktif

Step 14.
Kembali ke halaman main menu di frame 2 layer 1. sekarang kita akan memberikan efek button pada setiap button di main menu. Dengan cara double klik objek button contohnya button Tetang. Tampilan timeline akan terlihat seperti gambar di bawah. Terlihat berbeda time line untuk button di nama frame yang di butuhkan hanya 3, yaitu frame 1 “Up” menampilkan objek ketika belum di klik, frame 2 “Over” untuk menampilkan objek ketika kursor berada di objek button, dan belum di klik, frame 3 “Down” untuk menampilkan objek ketika di klik.
Cara membuat CD Interaktif
Di sini kita buat 2 layer. Layer 1 untuk objek, dan layer 2 untuk sound effect. Cara memasukkan sound effect pada objek button, klik frame yang di nama kita inginkan misalnya di frame 3 ketika button sudah di klik, lalu klik drag sound effect yang berada di library ke stage. Maka akan terlihat seperti pada gambar di bawahj jika sound berhasil di masukkan.
Cara membuat CD Interaktif


Step 15.
kita akan memasukan effect suara pada opening. Pertama siapkan file sound bersama file Flash yang sedang kita kerjakan. Kemudian klik kanan frame 1 layer 2 dan pilih Action untuk menambahkan scrip sound effect. Dan berikut scripnya.

var mySound:Sound = new Sound();
mySound.load(new URLRequest("bgsound.mp3"));
mySound.play();

Cara membuat CD Interaktif
  

Step 16.
untuk sentuhan terakhir kita bisa tambahkan Background. Caranya dengan menambahkan layer baru dan letakkan di bawah layer 1. dan jangan lupa untuk mengunci objek backgroung, dapat di lihat pada gambar di bawah.
Cara membuat CD Interaktif

Cara membuat CD Interaktif


Step 17.
Selajutnya Export file flash menjadi EXE, pastikan mouse tidak menyeleksi objek apapun. Kemudian pada panel property pada kolom Publis klik Settings. Dan akan muncul window baru, pada tab formats pilih hanya option Windows Projector (.exe) lalu klik Ok dan klik lagi Publish.
Cara membuat CD Interaktif

Step 18.
Buat file Autorun mengguunakan Notepad dan ketik seperti gambar di bawah. Pastikan nama file Exe dan file icon yang sudah di persiapkan sesuai, agar dapat berjalan lancar ketika di burn ke CD-R.
Cara membuat CD Interaktif
Kemudian simpan filenya dengan nama AUTORUN.INF
Cara membuat CD Interaktif

Finish, buat seluruh file menjadi satu folder dan burn semua file.
Cara membuat CD Interaktif

Sekian artikel Cara mudah membuat CD Interaktif. Semoga bermanfaat bagi semua, terutama yang baru dalam menggunakan Adobe Flash. Terimakasih sudah berkunjung.

Download CD Interaktif resource

Learn more »

Apa Itu Pengertian Pixel Art


Apa Itu Pengertian Pixel Art

Selamat datang di blog Arya Creative Design. Kali ini kita akan membahas Apa Itu Pengertian Pixel Art. Sudah tidak asing terdengar yang namanya Pixel Art. Dan Hal yang kita pikirkan ketika mendengar kata “Pixel Art” adalah Kotak – Kotak dan game. Nah kali ini kita akan membahas apa itu Pixel Art.

Pixel Art adalah bentuk seni digital/artwork computer, yang diciptakan melalui penggunaan grafis raster software, dimana gambar yang dieit pada pixel level.

Sejarah istilah pixel Art, pertama kali diciptakan oleh Adele Goldberg dan robert Flegal dari Xerox Palo Alto Research Center pada tahun 1982.

Pixel Art umumnya di bagi dalam dua sub kategori. Pertama Isometrik dan Non – Isometrik. Kategori Isometrik menyediakan tampilan dalam tiga dimensi. Secara teknis, sudut isometrik akan menjadi 30 derajat horisontal, tapi ini di hindari karena karena pixel yang dibuat oleh algoritma menggambar garis tidak akan mengikuti pola yang rapi. Untuk mengatasinya, baris dengan rasio 1 : 2 pixel dipetik, yang mengarah ke sudut sekitar 26,57 derajat. Sedangkan Pixel art Non – Isometrik adalah pixel art yang dilihat dari atas, samping, depan, bawah (2D) yang juga disebut tampilan Planometric .


Sekian Artikel tentang Apa Itu Pengertian Pixel Art, terimakasih telah berkujung.
Learn more »

Cara Membuat Teknik Motion Tween Pada Animasi Di Adobe Flash CS3

Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Halo, selamat datang di blog Arya Creative Design. Kali ini kita akan membahas Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3. Untuk dasar – dasar Adobe Flash CS3 tidak akan di bahas di sini, kamu bisa belajar dengan CD Interaktif yang sudah di buat Arya Creative Design. Dapat di Download Gratis di link berikut : Flash Study.

Baik, sekarang kita lanjut ke pembahasan. Untuk mendukung latihan kamu admin sudah menyediakan bahan pendukung yang bisa di download. Dan untuk artikel pada saat ini kita akan membuat animasi awan yang berjalan menggunakan teknik Motion Tween, Dan berikut step – stepnya :

Step 1.

Buka Adobe Flash CS3 yang kamu miliki, baik dari desktop maupun dari start menu. Setelah Software terbuka di kolom Create New, pilih Flash File ( ActionScrip 2.0) untuk membuat file baru.
Step 2
Maka akan muncul lembar kerja baru. Latihan kali ini kita akan membuat 2 layer, layer 1 untuk Background dan layer 2 untuk objek animasi awan. Buat layer baru dengan mengklik icon yang di tunjukan tanda panah.

Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Step 3
Ganti nama layer, dengan double klik pada layer, kemudian ganti nama layer 1 menjadi Background, dan layer2 menjadi Animasi.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Step 4
Letakkan objek background di layer Background frame 1. Begitu juga dengan objek awan di layer Animasi frame 1.

Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3
Step 5
Selanjutnya klik kanan pada objek awan dan pilih Convert to symbol.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Maka akan muncul jendela baru dan beri nama Symbol “Awan” dengan Type “Movie Clip” serta Registration tepat di tengah – tangah.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Step 6
Klik kanan pada layer Animasi frame 1 dan pilih Create Motion  Tween.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Jangan lupa untuk backgroundnya, pada leyer background klik kanan pada frame 40 dan pilih insert frame.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Selanjutnya klik kanan pada layer Animasi frame 40 pilih Insert Keyframe.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3
Pada layer Animasi frame 40 klik objek awan dan geser ke kanan, ini untuk memberikan animasi awan yang berjalan.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3
Step 7
Selanjutnya kita akan memberikan efek transisi pada awan. Klik kanan pada layer Animasi frame 5 dan pilih Insert Keyframe.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Klik objek awan yang berada di layer animasi frame 1 dan lihat pada property panel pada pilihan color pilih Alpha dan atur agar menjadi 4persen. Maka objek awan akan menjadi transparan.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Step 8
Klik kanan pada layer Animasi frame 35 dan pilih Insert Keyframe.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Kemudian klik objek awan yang berada di layer Animasi frame 40. Dan lakukan hal yang sama dengan memberikan efek alpha 4 persen pada objek awan.
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Dan ini adalah hasilnya :
Cara Membuat Teknik Motion  Tween Pada Animasi Di Adobe Flash CS3

Sekian artikel Cara Membuat Teknik Motion Tween Pada Animasi Di Adobe Flash CS3. Tunggu artikel selanjutnya ya..  yang tentu mendukung dan mudah dalam pembelajaran Adobe Flash. Dan terimakasih telah berkunjung ke blog AryaCreative Design.
Learn more »