Showing posts with label Desain Flash CS. Show all posts
Showing posts with label Desain Flash CS. Show all posts

Tutorial Membuat Efek Masking dengan Adobe Flash CS6

Pada tutorial kali ini, saya mencoba membuat video tutorial tentang animasi dengan menggunakan Adobe Flash CS6. Tutorial ini bisa juga dibuat menggunakan Adobe versi dibawahnya, seperti Adobe Flash CS5, Adobe Flash CS4, Adobe Flash CS3, Adobe Flash CS2, maupun menggunakan Macromedia.

Tutorial membuat animasi efek masking pada teks ini, sebenarnya sudah pernah dibuat juga versi teksnya yang berjudul Efek Text Masking. Jadi selain dibuatkan video tutorialnya, teman-teman blogger juga bisa lihat video nya...
Langsung saja lihat disini..



Tutorial Adobe Flash Company Profile (part 1)

Video tutorial cara membuat company profile dengan Adobe Flash CS6 ini, dibuat pada saat memberikan materi tentang desain grafis 2 (dasar-dasar animasi flash). Tutorial membuat company profile dengan Adobe Flash CS6 ini, merupakan penggabungan materi sebelumnya. Mudah-mudahan dengan materi yang diberikan ini bisa bermanfaat bagi teman-teman semua.
Untuk lebih jelasnya silahkan langsung saja lihat dan download video tutorialnya...


Animasi Button (Bagian 2)

Tutorial kali ini saya akan membagikan bagaimana cara membuat animasi button dengan efek rotation. Video tutorial berikut saya buat pada saat memberikan materi tentang membuat animasi dasar. Mudah-mudahan apa yang saya bagikan bisa bermanfaat bagi temen-temen semua, khususnya bagi saya sendiri. Video tutorial animasi ini saya buat menggunakan Adobe Flash, semoga bermanfaat.... :D


Video Tutorial Adobe Flash "Membuat Button Animasi"

Assalammualaikum sahabat blogger, kali ini saya akan mencoba berbagi video tutorial Adobe Flash. Video tutorial Adobe Flash ini berkaitan dengan pembuatan tombol atau button saat disentuh mouse, maka tombol atau button tersebut terdapat animasi berupa munculnya teks.
Langsung saja lihat video tutorianya..


Cara Penulisan Action Script pada Frame

Selamat datang kembali teman-teman blogger pecinta desain grafis. Pada tutorial desain grafis ini khususnya pada kategori tutorial adobe flash, tutorial ini bisa juga dijalankan semua versi adobe flash, dari Adobe Flash Cs3, Cs4, Cs5, Cs6 maupun yang masih menggunakan macromedia flash.

Pada tutorial sebelumnya yaitu penulisan script di dalam button dan di dalam movieclip, dapat ditulis dalam bentuk lain yang mana penulisan scriptnya diletakan didalam sebuah frame. Hal utama yang harus diingat dalam penulisan action pada frame adalah instance name. Instance name merupakan salah satu identitas yang terpenting dalam flash yang membedakan antara obyek satu dengan obyek yang lain.


 Aturan pemberian nama instance name antara lain adalah :

1. Nama intansi boleh sama dengan nama symbol.
2. Tidak boleh menggunakan spasi, titik, dan tanda baca yang lain.
3. Tidak boleh menggunakan nama yang sama dengan suatu perintah dalam flash misalnya : obyek, level, break dan sebagainya.
4. Tidak boleh menggunakan angka saja untuk nama akan tetapi sebuah nama instansi boleh diikuti dengan angka. Contoh yang salah :12, 13, dan sebagainya, contoh yang benar : bola1, bola_2 dan sebagainya.
5. Tidak boleh ada nama instansi yang sama.
6. Untuk mempermudah proses penulisan script, dapat ditambahkan “_mc” untuk symbol bertipe movieclip dan “_btn” untuk symbol bertipe button. Contoh : “bola1_mc”, “tombol1_btn” dan sebagainya.
7. Dua atau lebih symbol yang sama boleh dipakai, tetapi harus memiliki nama instansi yang berbeda.

Berikut cara penulisan action pada movieclip:
1. Pilih oval  tool pada tool box, buatlah sebuah obyek lingkaran.  Seleksi  obyek lingkaran tersebut kemudian convert menjadi symbol dengan menekan tombol F8 (pilih menu insert>convert to symbol). Pilih movieclip pada option behaviour dan ketikan bola pada name.

2. Klik symbol pada objek bola tersebut, kemudian buka panel instance dan ketikan nama “bola”
pada instance name.

3. Buatlah sebuah layer baru dan ubah namanya menjadi layer action. Penambahan layer action akan mempermudah kita dalam penulisan action pada frame, sehingga tidak akan mengganggu obyek yang lain.

4. Klik frame 1 layer action, dan dalam kondisi frame 1 terseleksi buka panel action (tekan f9 atau klik menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8).




5. Jalankan Movie dengan menekan tombol Ctrl+Enter, maka kita akan melihat hasil yang sama dengan dengan cara penulisan action pada movieclip.


Penjelasan pola penulisan action script pada frame adalah sebagai berikut :
1. Sebuah penulisan script di frame memiliki 3 tipe penulisan yaitu penulisan di dalam suatu blok movie event atau mouse event, contoh onEnterframe = function(){} dan penulisan tanpa movie event atau mouse event, tipe penulisan yang ke tiga adalah kombinasi dari keduanya.

2. Pada dasarnya penulisan action pada frame sama dengan penulisan pada movieclip maupun pada button. Hanya saja pada frame terdapat script function() dan penggunaan nama instansi.

3. Perhatikan perbedaan antara penulisan pada frame dan penulisan pada moviclip berikut:

4. Apabila ingin menuliskan action button pada frame, maka yang harus di ubah adalah movie event diubah menjadi mouse event. contoh : tombol.onRelease =function(){}

Keuntungan penulisan script pada frame :
1. Dibandingkan  dengan  menulis  action  di  movieclip,  penulisan  script  di  dalam movieclip  cenderung  lebih  rumit,  akan  tetapi  bagi  programmer  yang  familiar dengan bahasa pemrograman seperti C++,  Java,  Delphi atau V basic,  penulisan pada frame akan menjadi lebih mudah.
2. Lebih mudah dalam menuliskan function tertentu atau perintah berulang yang sering dipakai.
3. Karena  seluruh  script  biasanya dituliskan pada  frame,  maka  mengecek  action
seluruh obyek yang ada akan lebih mudah, tanpa harus ke masing-masing obyek.



Pola Penulisan Action Script pada Button

Cara penulisan action script pada tombol adalah sebagai berikut :

1. Pilih  rectangle  tool pada toolbox kemudian buatlah sebuah kotal. Anda juga bisa membuat rounded rectangle dengan memilih option rounded rectangle radius atau bisa juga membuat dengan gaya button bulat dan elips (sesuai selera masing-masing).
2. Aturlah static text “tombol” tepat diatas kotak yang sebelumnya telah kita buat, caranya klik text tool, kemudian buka properties dan atur jenis huruf, ukuran dan warna. Buka panel properties (apabila belum terbuka pilih menu window>properties). Pastikan option static text pada text type.

3. Seleksi tombol tersebut, kemudian konvert menjadi symbol dengan dengan menekan tombol F8 (pilih menu insert>convert  to symbol). Pilih button pada option behaviour dan ketikan tombol pada name.

4. Double klik tombol tersebut sehingga masuk dalam pengaturan tombol. Perhatikan dalam symbol bertipe button terdapat 4 frame yaitu up, over, down dan hit. Up menunjukan kondisi normal suatu tombol. Over menunjukan kondisi tombol saat mouse berada tepat di atasnya. Down menunjukan kondisi tombol saat ditekan dan Hit merupakan area penekanan (sensor) tombol tersebut.

5. Klik frame over kemudian masukan keyframe dengan menekan tombol F6 (pilih menu insert>keyframe). Ubah warna dan ukuran tombol pada frame over tersebut Untuk frame Down dan Hit biasanya bisa kita abaikan.
Perbedaan warna antara frame up dan frame over

6. Tekan tombol  Ctrl-E untuk kembali  ke  Stage utama.  Klik tombol dan dalam kondisi  tombol  terpilih  buka  panel  action (  tekan  F9  atau  klik  menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8). Kemudian ketikan script sebagai berikut :

7. Tekan Ctrl+Enter untuk menjalankan movie. Tekan tombol Ctrl+W untuk kembali ke stage.

 




Psikologi dan Arti Warna

Warna Merah Arti : Kuat, berani, percaya diri, gairah Merah adalah warna yang punya banyak arti, mulai dari cinta yang menggairahkan hingga kekerasan perang. Warna ini tak cuma memengaruhi psikologi tapi juga fisik. Penelitian menunjukkan menatap warna merah bisa meningkatkan detak jantung dan membuat kita bernapas lebih cepat. Dapat membangkitkan energi, hangat, komunikatif, optimis, antusias, dan bersemangat. Memberi kesan sensual dan mewah, meningkatkan aliran darah dalam tubuh, dan berkaitan dengan ambisi. Terlalu banyak warna merah bisa merangsang kemarahan dan agresivitas. Gradasi yang lebih muda yaitu warna merah jambu (pink) merupakan warna yang hangat dan emosionalnamun juga lebut dab menenangkan. Melambangkan kasih sayang dan perasaan cinta namun juga bisa bearti kekanak-kanakan.  

Cara membuat Animasi pada Button

1. Buka Adobe Flash > Pilih Action Script 2.0 2. Pilih Rectangle Tool > drag sehingga membentuk button persegi panjang
3. Klik objek button (persegi panjang), tekan f8 pada keryboard ( convert to symbol ) sehingga muncul jendela convert to symbol > pilih type button
4. Klik 2 kali pad button sehingga muncul halaman symbol button > tekan f6 pada bagian over > dan jadikan atau convert kembali button dengan menekan f8 kemudian pilih type Movie Clip
5. Klik 2 kali pada objek sehingga muncul halaman symbol 2, kemudian buat layer baru (layer 2) > buat objek misalnya segi lima > kemudian tempatkan layer 2 dibawah layer 1 ( sehingga objek segi lima berada dibawah objek button )
6. Klik objek segi lima > jadikan symbol movie clip ( seperti langkah ke 4 ) > kemudian berikan scrip pada objek segi lima dengan cara klik objek segilima ( harus sudah dijadikan movie clip dahulu ) kemudian tekan f9 (untuk memmunculkan jendela action ) kemudian tuliskan script rotation seperti pada tutorial membuat animasi putar
7. Jalankan animasi dengan menekan Ctrl+Enter, sentuh button sehingga akan muncul animasi putar saat di sentuh.
DOWNLOAD

Cara Membuat Menu Pop Up pada Flash


Pop up menu merupakan tombol menu yang berisikan beberapa sub-menu lain. Flash tidak memiliki tool khusus untuk membuat menu seperti ini. Namun dengan sedikit trik, kita bisa membuatnya, bahkan untuk yang kompleks sekalipun. Untuk menggunakan tutorial ini, saya asumsikan anda telah mengenal konsep menggambar dalam Flash, serta penggunaan Symbol berbentuk Movie Clip dan Button. untuk mendownload tutorialnya langsung saja klik link berikut >> Cara Membuat Menu Pop Up pada Flash

by Anggi Prima Nadvi Lubis, ST

Efek Text Masking


1. Buka Adobe Flash >> pilih ( Action Script 2.0 )
2. Pilih Tex Tool > Tuliskan misalkan nama “Muryan Awaludin” dengan warna orange ( FF9900 )


3. Klik new layer ( buatlah 2 layer ) berarti ada layer 2 dan layer 3 , copy teks “Muryan Awaludin” pada layer 3 dan posisikan sama dengan text pada layer 1.


4. Klik layer 2 >> buat objek kotak dengan Rectangle Tool ( pilih warna gradient )


5. Aturlah pada Layer 1 dan layer 3 ( pilih frame 40 : Insert frame [tekan F5 pada keyboard]) ), pada Layer 2 ( pilih frame 40 : Insert Key Frame [tekan F6 pada keyboard] ). Kemudian pada layer 2 buatkan Motion Tween( jika menggunakan adobe cs3 ) , Classic Tween ( jika menggunakan adobe cs5 ).


6. Pindahkan objek ( pada layer 2 ) ke sebelah kanan


7. Kemudian pada layer 3 jadikan layer mask, caranya klik kanan pada layer 3 >> Pilih Mask >> Jika sudah selesai untuk menjalankan animasinya tekan Ctrl + Enter


DOWNLOAD Efek Text Masking
DEMO ANIMASI SWF
Password rar: www.ilmudesain.web.id

Animasi Teks




Berikut ini adalah contoh animasi teks sederhana menggunakan Macromedia Flash, dimana terdapat 3 buah teks yang akan berjalan secara bersamaan namun dengan arah yang berlainan. Ditunjukkan juga kegunaan dari property change direction of text untuk mengubah arah penulisan teks. Untuk membuat animasi ini langkah-langkahnya adalah sebagai berikut :

1. Pada layer 1 ketiklah teks " Ilmu Desain Grafis " persis diatas batas stage, untuk mengubah arah penulisan teks pada bagian properties pilih change orientation of text pada saat kursor berada di akhir teks.


Agar teks tertulis secara vertikal, pilihlah Vertical, Left to Right seperti ditunjukkan dalam gambar berikut :


2. Tulisan "Ilmu Desain Grafis" pada layer 1 akan nampak seperti dalam gambar berikut ini :

Animasikan teks tersebut jalan dari atas ke bawah sampai frame 30.

3. Tambahkan layer baru, beri nama layer 2, kemudian ketik teks "TUTORIAL DESAIN" Tambahkan layer baru lagi (layer 3) dan ketik teks ketiga "ANIMASI FLASH" dengan arah teks horizontal di batas kiri stage, lalu animasikan jalan dari kiri ke kanan sampai frame 30.




Password PDF : www.ilmudesain.web.id

Entri Populer

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin