Teknik Pembuatan animasi 2D dalam Macromedia Flash

Animasi dibuat dengan mengubah dan memindahkan suatu objek pada setiap frame. Pembuatan animasi bila dilakukan terhadap suatu objek atau banyak secara bersamaan.
Pada dasarnya ada tiga teknik pembuatan animasi dalam flash:
a. Animasi frame, – yaitu animasi yang dibuat dengan mengubah objek pada setiap frame. Pada animasi frame, kitra harus secara manual membuat objek pada setiap frame. Ini merupakan cara yang digunakan dalam pembuatan animasi tradisional

b. Animasi bentuk – Motion Shape , – yaitu animasi yang dibuat dengan mengubah bentuk suatu objek.
Yang dimaksud dengan animasi bentuk dalam flash adalah Anda membuat suatu bentuk pada awal frame dan kemudian mengubah bentuknya di akhir frame, flash yang mengerjakannya perubahan bentuk tersebut untuk anda sehingga menjadi suatu animasi.
Selain membuat perubahan bentuk, dalam waktu yang bersamaan Anda juga bisa memberikan efek perubahan warna, ukuran dan lokasi.
Flash tidak dapat mengubah bentuk gambar bitmap, teks, objek gabungan, dan symbol, untuk membuat animasi bentuk terhadap objek-objek tersebut Anda harus mematahkannya terlebih dahulu dengan menggunakan Break Apart.

c. Animasi gerakan – Motion Tween, – yaitu animasi yang dibuat dengan memindahkan posisi suatu objek. Pada animasi gerak di Flash bisa didefinisikan perubahan posisi, ukuran, warna, dan rotasi suatu objek pada awal keyframe dan akhir keyframe. Animasi gerak hanya dapat digunakan untuk objek gabungan dan smbol. Objek yang kita buat di stage akan berubah langsung menjadi symbol sewaktu kita membuat animasi gerak. Ini perbedaan utama dengan animasi bentuk yang justru tidak dapat bekerja pada objek gabungan dan harus menggunakan objek yang dapat dibentuk ulang agar dapat dibuat menjadi animasi.

Untuk pembuatan animasi yang komplek, ketiga teknik ini dapat digunakan secara bersamaan.

Animasi Sederhana dengan Motion Tweening

Halo semua !! Apa kabar bertemu lagi dengan saya miko ^ ^. Nah pada kesempatan kali ini di tutorial flash ini kita akan membahas membuat animasi sederhana menggunakan motion tweening. Langsung saja ya.. Kita buka program Flash dulu

Langkah pertama, yaitu buat 3 layer. Karna kita di sini hanya menggunakan sedikit layer untuk membuat animasi. Agar proses lebih mudah membuat layer lihat gambar di bawah, di sana ada menu di lingkari dengan warna merah .. Nah klik sebanyak 2 kali maka dengan mengeklik 1 kali kita membuat 1 layer klo 2 otomatis 2 layer
tutorial flash

Nah selanjutnya, beri nama masing-masing layer seperti yang sudah dicontohkan gambar dibawah ini. Agar memudahkan proses pembuatannya
tutorial flash

Kemudian ubah warna backgoundnya menjadi hitam, biasanya di awal-awal kita membuka flash bacgroundnya berwarne putih klo belum di rubah setingannya
tutorial flash

Setelah itu klik layer teks dan buat tulisan seperti yang saya contohkan atau sesuka hati kalian .. Pakek punyaku juga boleh…
tutorial flash

Setelah itu klik layer bola , dan buat bentuk bola denga warna putih
tutorial flash
Pembuatan objeknya sudah selesai kini kita menginjak ke animasinya, buatlah frame sepanjang 90 -> kemudian klik kanan lalu pilih insert frame
tutorial flash

Jika sudah semua hasilnya kurang lebih seperti ini
tutorial flash

Setelah itu kita buat animasi motion tweening , sebagai objeknya layer bola
tutorial flash

Buatlah keyframe , seperti yang saya contohkan >> kemudian klik kanan>>pilih insert keyframe
tutorial flash

Setelah langkah di atas selesai, drag layer bola / drag objek bolanya dengan menekan tombol “ v “ di keyboard >>kemudian klik gambar bolanya
tutorial flash

Setelah geser bolanya ( jangan menggeser menggunakan mouse pakai saja tanda panah kanan di keyboard agar posisinya tidak berubah )
tutorial flash

tutorial flash

Klo sudah selesai hasilnya seperti gambar yang di atas

Lanjut ke langkah berikutnya, kita menuju ke layer bola>>klik kanan di dalam frame / seperti gambar di bawah ini>>kemudian pilih create motion tween
tutorial flash

Setelah selesai klik juga frame ke 90 caranya>>klik kanan frame yg sudah kita buat>>pilih create motion tween
tutorial flash

Semua juga sama buat semua layer di rubah menjadi motion tweening
tutorial flash

Cara Membuat Menu Flash Menggunakan Dreamweaver (2) - untuk Blogspot

Kemarin kita telah membahas mengenai cara membuat menu flash menggunakan Dreamweaver. Bagi pembaca yang mungkin baru pertama kali berkunjung ke blog saya yang tidak seberapa ini, sangat saya sarankan untuk membaca terlebih dahulu tutorial tersebut karena postingan ini merupakan lanjutannya. Silahkan klik di sini untuk membukanya. Sesuai janji saya, pada postingan ini yang merupakan postingan kedua dari pembuatan flash menu, kita akan membahas bagaimana memasukkan flash menu yang telah kita buat memakai Dreamweaver tersebut ke dalam blog pembaca, khususnya blogspot. Sudah dibaca tutorial membuat menu flash menggunakan Dreamweaver bagian pertama tersebut? Jika sudah, kita lanjutkan langkah-langkah memasukkan flash menu tersebut pada blogspot.

1. Buka kembali file "menu_flash.html" dengan menggunakan program Dreamweaver pada komputer Anda.
   
   
2. Jika Anda masih berada pada layar Design, silahkan berpindah ke layar Code untuk melihat code HTML dari flash menu yang telah kita buat.
3. Perhatikan gambar di bawah ini. Struktur yang yang dimulai dari tag merupakan stuktur HTML untuk 1 buah tombol menu flash yang telah kita buat (menu Home). Agar lebih jelas, kode untuk 1 buah tombol menu flash tersebut adalah yang diberi pembatas garis warna merah tua pada gambar di bawah (baris 22-26). Selanjutnya, struktur yang serupa yang berada di bawahnya yang dimulai dari tag merupakan kode HTML untuk tombol menu flash yang kedua menu (Tutorial Website). Kode-kode tersebutlah yang nantinya akan kita masukkan ke dalam template blogspot.
   
   
4. Karena kita mendesain tombol menu flash tersebut pada komputer pribadi kita, maka kita perlu memasukkan terlebih dahulu file flash tombol menu yang telah kita buat tersebut ke internet agar bisa digunakan secara online. Pada folder "Menu" yang kita jadikan untuk dokumen Dreamweaver bisa kita lihat 2 buah file flash tombol menu, yaitu home.swf dan tutorial_website.swf. File flash tersebutlah yang harus kita upload ke internet. Anda boleh meng-upload ke server hosting mana saja.
   
   
5. Sekarang perhatikan kode HTML untuk salah satu menu flash di bawah ini.
   
   Kode yang diberi warna merah merupakan lokasi file flash tombol menu (menu Home) tersimpan pada komputer kita. Karena kita ingin menggunakan file flash yang telah kita simpan secara online, gantilah kode merah tersebut dengan URL file flash tombol menu yang telah kita hosting-kan.
6. Lakukan langkah 5 tersebut untuk menu lainnya, yaitu menu Tutorial Website sehingga kode keseluruhan untuk kedua menu flash tersebut adalah:
   


   

   Ingat, ganti kode yang diberi warna merah dengan URL dari file flash tombol menu yang telah Anda hosting-kan

7. Sekarang buka blogger.com, kemudian login untuk masuk ke dalam akun blogspot Anda.
8. Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
9. Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik link Download Template Lengkap pada bagian Backup/Restore Template.
10. Beri centang pada kotak kecil disamping tulisan Expand Template Widget.
11. Carilah kode berikut pada template pembaca tersebut:
    
    
    
    

    
    
    
    
    
    
    

Copy paste stuktur HTML dari menu flash yang ada pada langkah 6 tepat di bawah kode yang Anda temukan pada langkah 11 di atas.

Klik tombol SIMPAN TEMPLATE

Silahkan klik di sini untuk melihat contoh hasilnya. Jika masih ada langkah yang belum dipahami, silahkan bertanya melalui kolom komentar ya..Saya tunggu loh.. :D
http://tutorial-website.blogspot.com/2009/05/cara-membuat-menu-flash-menggunakan_08.html

Cara Membuat Menu Flash Menggunakan Dreamweaver (1)

Saya akan membagikan kembali sebuah tutorial mengenai pembuatan menu untuk website. Kali ini yang akan saya paparkan adalah bagaimana cara membuat menu flash menggunakan Dreamweaver. Tutorial tersebut akan saya kupas pada bagian pertama yaitu postingan yang sedang Anda buka sekarang. Pada bagian kedua, saya juga akan menjelaskan langkah-langkah memasukkan flash menu tersebut ke dalam blog Anda yang di blogspot. Bagi pembaca yang mungkin baru mendengar tentang Dremaweaver, saya sarankan untuk membaca postingan mengenai Dreamweaver disini.
Berikut langkah-langkah yang akan kita lakukan untuk membuat menu flash dengan Dreamweaver:

1. Buka program Macromedia Dreamweaver dari komputer Anda.
2. Buatlah sebuah dokumen baru dengan jenis misalnya HTML. Pilih menu File -> New, kemudian pilih kategori Basic Page dan gunakan tipe HTML.
3. Simpan terlebih dahulu dokumen tersebut. Beri nama misalnya "menu_flash.html". Saran saya, simpanlah di dalam sebuah folder baru, beri nama folder misalnya "menu".
   
4. Masuklah ke dalam layar design.
5. Pilih menu Insert -> Media -> Flash Button, maka akan muncul sebuah kotak dialog pembuatan tombol flash yang akan digunakan sebagai menu pada website.
   
   
   • Sample. Menunjukkan preview dari tombol flash yang kita pilih.
   • Style. Bentuk dari tombol yang kita bisa kita pilih. Sebagai contoh kita pilih "Slider".
     
   • Button Text. Tulisan yang terlihat pada tombol. Sebagai contoh kita tulis "Home".
   • Font. Jenis huruf dari button text.
   • Size. Ukuran huruf dari button text.
   • Link. Alamat URL yang akan dituju bila tombol menu flash tersebut diklik. Anda bisa memilih halaman/dokumen dari website yang sedang Anda desain pada komputer Anda dengan mengklik tombol Browse. Pada contoh ini kita akan me-link kan ke halaman luar misalnya: "http://www.banditbatak.com". Tuliaslah URL tersebut pada isian Link.
   • Target.Untuk memilih target halaman ketika menu tersebut diklik.
   • Bg color. Memilih warna background dari tombol flash yang sedang kita buat. Pilihlah transparent dengan mengklik tombol kecil yang berdiagonal warna merah.
   • Save as. Nama file flash yang sedang kita buat. Simpanlah dengan nama misalnya "home.swf"
6. Setelah semua dirasakan cukup dan benar, klik tombol Save.
7. Pada dukumen kerja Dreamweaver akan muncul tombol flash menu yang telah kita buat tadi.
   
   
8. Kita bisa menambah menu flash baru disamping menu Home yang telah kita buat tersebut. Misalkan kita ingin membuat menu lain yang letaknya sejajar dengan menu Home tersebut sehingga tampil secara horizontal. Terlebih dahulu letakkan pointer di sebelah kanan tombol flash menu Home, kemudian lakukan hal yang sama seperti membuat menu flash dengan nama Home tersebut dari langkah 5 -6. Sebagai contoh saya membuat menu flash baru bernama "Tutorial Website" dengan link : "http://tutorial-website.blogspot.com" dan saya simpan dengan nama "tutorial_website.swf". Hasilnya akan tampak seperti gambar di bawah ini.
   
   
9. Di dalam folder "menu" yang Anda jadikan sebagai tempat menyimpan dokumen "menu_flash.html" tadi telah bertambah 2 buah file flash yang bernama home.swf dan tutorial_website.swf
   
   

http://tutorial-website.blogspot.com/2009/05/cara-membuat-menu-flash-menggunakan.html

Flash menu can be Search Engine Friendly

Flash menu itself cannot be indexed by search engines, it is well-known fact and main drawback of flash menus. Good news is that we know how to make a best menu system. We have developed a way to combine HTML links with flash menu. Now you can be confident that all menu links and captions will be read, and therefore all pages of your web site will be indexed by the search engines. As you may know, navigation menu have a crucial role in indexing of web sites by search spiders.
Our flash menus have navigation settings in a form of ordinary HTML links, which search engines like, but your visitors will see only impressive flash menu system. A menu file reads the HTML navigation by means of a special technology and on the fly creates a great-looking flash navigation you see.

Menu system is one of the key components of a Web site. Hesitating between design and functionality? Have a good look at our offer.
Our flash menu is ideal combination of flash design effectiveness, web usability and accessibility to search engines. Even a beginner in web site authoring can make full featured web menus using our extensions. Only minimal knowledge of Dreamweaver and no knowledge whatsoever of Flash is required.

Forget about tangled menu builders. We offer only ready-to-use menus with perfect design with each pixel in exactly the right place. Choose one of the flash menu extensions. Edit in user friendly GUI and you will get impressive flash menu after few mouse clicks. Download free version before you decide to buy.

http://f-source.com/

web template web dengan dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
   

2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
   

3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
   
   

4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
   

5. Ketikkan images/index_26.gif pada kolom Bg.
   

6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

---

2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

1. Letakkan kursor pada tempat yang akan ditambahkan teks.
   

2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
   

3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
   

4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
   

5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
   

6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
   

7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.
   

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

1. Pertama kali, klik menu PC.
   

2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
   

3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
   

4. Selanjutnya pilih Show Pop up Menu.
   

5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
   

6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
   

7. Kemudian masukkan alamat URL pada kolom Link.
   

8. Selanjutnya pada kolom Target, pilih _parent.
   

9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
   

10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
    

11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    

12. Klik Tab Position untuk menentukan posisi pop up menu.
    

13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    

14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1. Buatlah duplikasi gambar tombol yang telah ada.
   

2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
   

3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
   

4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
   

5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
   

6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
   

7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
   

8. Untuk melihat hasilnya, tekan tombol F12

http://slametriyanto.net/membuat-web-dengan-dreamweaver/

web dengan flash pemula

Flash adalah suatu sotware yang digunakan untuk membuat sebuah animasi. Dengan flash kita dapat membuat tampilan website atau komputer kita menjadi hidup. Tidak mudah untuk mempelajari flash, selain diperlukan imajinasi juga diperlukan pemahaman mengenai SCRIPT. Bisa saja kita membuat sebuah animasi tanpa menggunakan script tapi file yang dihasilkan menjadi besar, hal itu mempengaruhi loading atau pemuatan data di workstation atau client. Selain flash kita juga bisa membuat sebuah animasi dengan Compuserver file, biasanya file ini berakhiran GIF, Untuk pengguna windows, microsoft menggunakan mesin animasi tersendri yang disebut Active X. Selain itu ada juga bahasa pemrogaman yang khusus untuk membuat sebuah animasi misalnya JAVA APPLET. bahkan jika anda mahir dalam sebuah pemrogaman seperti C, Pascal, Visual basic dan masih banyak lainnya, dapat membuat sebuah animasi. Pada tutorial kali ini SSC menginginkan Anda sebagai pengguna Situs ini, agar mengetahui teknik membuat flash animation dengan cara yang sederhana dan mudah. Untuk itu saya membuat tutorial ini untuk Anda. Ok mari kita mulai tutorial ini, tapi sebelumnya Anda harus menyiapkan bahan-bahan untuk tutorial ini. Apa saja bahan-bahan nya, simak yang baik jangan sampai terlewatkan satu bahanpun.

Software Utama untuk membuat animasi flash yaitu Sothink SWF Quicker yang bisa Anda download secara gratis di http://www.sothink.com, Klik Link yang ada di Pilar Kanan untuk men downloadnya. Software untuk edit gambar atau photo seperti Adobe photoshop CS, kalau tidak ada pakai Program Paint yang ada di windows juga bisa. Flash player 7.0 yang bisa didownload di http://www.macromedia.com, Klik Link yang ada di Pilar Kanan untuk men downloadnya. Microsoft Internet Explorer 6.0, FireFox 1,5 atau Opera 8.0 untuk melihat hasil publish dari file *.swf di Browser. Alat tulis antara lain kertas dan pulpen. Kopi satu gelas kalau anda suka kopi, kalau nggak suka, susu juga boleh, atau teh manis bagaimana.?,. Pokoknya terserah Anda sajalah hehehe

Bagaimana., sudah siap bahannya.? Kalau belum tunda aja tutorial ini untuk besok, kalau sudah mari kita lanjutkan. Oo ada yang tanya, kenapa pakai sothink swf quicker, kenapa nggak pakai macromedia flash mx atau program-program yang disebutkan diatas seperti bahasa C atau visual basic gitu ?. Wew.., Tutorial untuk program itu belum diizinkan oleh SPC untuk dipublikasikan jadi yah nrimo aja deh, kan baru belajar nanti kalau sudah mahir mungkin SPC akan menurunkan tutorial mengenai program-program tersebut. Setelah anda download program dari sothink, sekarang Anda membutuhkan program untuk mengekstrak file hasil download tersebut dengan WINZIP atau WINRAR, tempatkan hasil exstrak file tersebut pada sebuah direktory lain setelah itu instalasi program sothink pada komputer Anda, caranya gampang tinggal klik dua kali file SETUP.EXE hasil download dan klik YES aja terus kalau nggak mau pusing pada proses instalasi. Tapi perlu Anda perhatikan dan camkan baik-baik bahwa software tersebut cuma gratis untuk ujicoba saja selama 30 hari, setelah 30 hari pakai software itu tidak bisa dipakai lagi, kalau Anda menginginkan dipakai terus Anda harus membeli licence software nya. Sudah di install.., Ok sekarang anda klik dua kali icon sothink swf quicker yang ada didesktop setelah itu akan ditampilkan licence software dan peringatan masa uji coba software tersebut klik aja tombol CONTINUE bila masa uji coba software yang Anda Install masih Aktif (30 hari). Setelah masuk ke program maka akan ditampilkan pilihan untuk membuat animasi dari template antara lain : Blank Document, Album, Banner, Navigation button dan Presentasi. Dengan menggunakan template Anda tidak perlu pusing-pusing untuk membuat animasi yang ada, tapi bila Anda orang yang kreatif dan menginginkan animasi tersebut adalah hasil buatan Anda sendiri maka Anda pilih saja Blank Document. Setelah Anda pilih Blank Document pada menu template maka akan ditampilkan program utamanya seperti gambar dibawah ini. Tampilan Program Sothink swf quicker

P R O Y E K P E R T A M A

Saya tidak akan menerangkan mengenai fungsi tombol-tombol yang ada pada program tersebut satu persatu ( terlalu lama dan tidak mendidik kreativitas ) , karena nanti juga Anda akan terbiasa dengan tombol-tombol tersebut disamping itu, nanti akan disinggung juga pada latihan-latihan kita. Mari kita mulai pada proyek pertama. Klik File -- Save -- ketik " latihan 1 " -- save. maka dibagian atas program yang tadinya ada kata untitled jadi latihan 1. Setelah di save Anda klik tombol anak panah berwarna biru lalu Anda klik tombol LINE ( gambar pincil disebelah kanan atas yang ada pada menu shape ) ganti nilainya jadi 2 dengan warna hitam, lalu klik tombol FILL dibawahnya rubah jadi solid dengan warna Orange. Setelah itu klik tombol lingkaran yang ada pada menu sebelah kiri. Tempatkan kursor bertanda + di KANVAS lalu drop kursor itu terserah Anda, tapi jangan besar-besar sedang aja. maka akan terlihat sebuah lingkaran berwarna Orange dengan garis pinggir (Out Line) berwarna hitam. Ini dapat Anda rubah sesuai selera Anda mau merah, putih, hijau atau apapun itu tergantung selera Anda saja, kenapa saya suruh berwarna Orange yah karena saya suka warna orange, kenapa nggak yang lain yah karena saya tidak suka warna yang lain itu saja. Setelah membuat ligkaran, sekarang Anda coba coba sendiri fungsi dari RECTANGEL dan sebagainya. coba-coba saja tidak akan terjadi apa-apa. kalau anda tidak suka dengan setingan pertama, Anda dapat menekan tombol back yang berada pada bagian atas menu, maka setingan yang sebelumnya anda buat akan kembali lagi. Gampang kan. Kita kembali lagi, nah lingkaran yang Anda buat tadi sekarang sudah disimpan pada Library. Bila pertama kali Anda menjalankan program ini maka akan ada keterangan berwarna kuning yang menerangkan bahwa hasil kerja Anda tadi telah masuk di library ( Panel sebelah kanan bawah ). Lingkaran itu sekarang bisa Anda Hapus dengan cara mengklik lingkaran tersebut lalu menekan tombol DEL pada keyboard, bisa juga dengan klik kanan mouse dan pilih DELETE. Anda tidak usah khawatir dengan hilangnya lingkaran yang dengan susah payah Anda buat tadi, karena setelah disimpan pada library lingkaran tersebut dapat Anda panggil kembali caranya, klik shape yang ada pada library maka dibagian atas library akan ditampilkan bentuk lingkaran yang Anda buat tadi. Sekarang Anda klik dan tahan dengan tombol kiri mouse, lalu bawa lingkaran tadi ke CANVAS. Maka Lingkaran yang baru saja Anda Buat lalu dihapus akan kembali lagi, ini penting untuk Anda ingat karena nantinya kita akan banyak memanfaatkan fungsi library ini, agar dapat mudah Anda kenali jenis dari library yang dibuat, Anda dapat mengganti namanya dengan cara mengklik kanan tombol mouse pada file yang ada dilibrary lalu pilih RENAME gantilah dengan nama sesuai selera Anda, contoh : ganti namanya dengan lingkaran1. Sampai disini saya rasa Anda sudah mengerti mengenai pembuatan bentuk lingkaran, kotak atau persegi lima dan sebagainya, kalau belum Anda coba-coba sendiri saja, sengaja tidak saya beritahukan kepada Anda biar Anda jadi kreatif dan tidak menelan mentah-mentah apa yang saya paparkan disini. Langkah berikutnya yaitu bagaimana caranya membuat lingkaran yang baru saja Anda buat itu dapat bergerak seperti contoh dibawah ini. Contoh Animasi yang dibuat oleh sothink SWF Quicker

Contoh diatas dibuat dengan sothink swf quicker termasuk banner yang ada dibagian atas halaman ini juga dibuat dengan software yang sama bahkan bila Anda ingin contoh yang lebih rumit Anda bisa klik tombol presentasi yang ada pada Menu, bagaimana kreatif kan..!, saya tunjukan itu agar Anda bersemangat dalam mengikuti tutorial ini dan tidak ragu-ragu lagi berlatih flash dengan software ini, sebab bila Anda sudah menguasai sothink swfquicker maka Anda juga akan mudah mempelajari Software Flash apapun seperti Flash MX, Swish, dan Antechinus. OK !.

Membuat Drop Down Menu Flash Menggunakan Flash Menu Factory

Ada banyak cara membuat tombol menu flash untuk website kita. Kita bisa menggunakan Macromedia Flash atau memanfaatkan tombol yang sudah disediakan oleh Macromedia Dreamweaver. Mengenai pembuatan menu flash menggunakan Dreamweaver telah kita bahas di sini. Sedangkan cara memasukkan menu flash pada blog juga sudah kita pelajari di sini. Cara lain untuk mendapatkan desain menu flash yang sangat unik dan bagus selain cara di atas adalah dengan memanfaatkan sebuah software pendesain khusus flash menu untuk website.

Software tersebut bernama Flash Menu Factory. Sesuai namanya, software ini berisi directory tombol-tombol menu flash yang siap kita gunakan. Kita cukup mengatur menu-menu yang akan kita buat seperti mengatur tulisan menu baik jenis font, ukuran font, warna dan sebagainya, mengatur link menu, mengatur jenis tombol flash yang kita gunakan, dan lain-lain. Artinya, dengan beberapa klik saja, kita sudah bisa mendapatkan desain tombol menu flash yang siap pakai untuk digunakan pada website kita. Software Flash Menu Factory ini juga menyediakan tipe menu horizontal dan vertikal. Yang lebih menarik lagi adalah kita bisa mendapatkan menu dropdown dari software ini.

Menurut saya software Flash Menu Factory ini menjawab kebutuhan kita akan menu yang animatif, unik dan cantik namun mungkin tidak diimbangi kemampuan kita dalam mendesain flash menu menggunakan Macromedia Flash dan juga desain tombol menu flash yang masih sangat sedikit pada Dreamweaver.

Untuk mendapatkan software Flash Menu Factory ini, pembaca bisa men-download-nya dari situs resminya di www.flashmenufactory.com. Meskipun software ini tidak disediakan secara gratis, kita masih bisa mendownload versi Demo-nya.

• Bagian 1 : tools menu pada Flash Menu Factory
• Bagian 2 : pembuatan struktur menu flash
• Bagian 3 : pengaturan properties item menu flash seperti teks menu dan link
• Bagian 4 : pengaturan font tombol menu flash
• Bagian 5 : pengaturan general menu flash seperti ukuran file flash
• Bagian 6 : pilihan jenis desain menu flash
• Bagian 7 : preview menu flash yang kita buat
  

Untuk mendapatkan file flash dari software ini, klik tombol menu Export yang ada di bagian 1 seperti pada gambar di atas, kemudian export dalam bentuk .swf. (misalnya: menu.swf)

Membuat web flash

Kalo pengen bikin web dengan tampilan Flash silahkan kunjungi http://www.flashbuilder.net ...caranya gampang kok!! Tinggal ikuti langkah-langkah yang tersedia padanya. Oke selamat mencoba ...tapi awas web yang telah anda buat dihek orang. so,,,harus hati-hati ya

Website menggunakan Flash dengan potensi pengunjung

Muncul pendapat bahwa penggunaan flash dalam suatu website dianggap tidak efisien dan mengurangi pengunjung. Tentunya argumen ini bisa dibenarkan bila disesuaikan dengan kondisi website tertentu. Terhitung jangka 4 tahun yang lalu, flash merupakan media yang sangat populer. Hampir setiap website saling berlomba untuk membuat animasi serta desain yang memukau para pengunjungnya. Seakan-akan animasi merupakan senjata ampuh menunjukkan kecanggihan suatu website. Tapi kenapa sekarang flash justru terkesan dihindari dan mengurangi pengunjung bila dilihat dari sisi browser yang digunakan user? berikut analisnya...

Flash merupakan media yang mengusung animasi sebagai salah satu keunggulannya. Disamping kemudahan dalam membuat animasi, keindahan bentuk, flash juga bisa memancing interaksi dengan user. Inilah yang mendasari kepopuleran flash pada jangka 4 tahun lalu. Umumnya flash digunakan pada bagian tombol, welcome screen, menu, bahkan keseluruhan dari website itu sendiri. Memberikan efek menawan pada bagian-bagian suatu tampilan website tentu membius pengunjung untuk browsing lebih lama. Merasa dimanjakan dalam navigasi yang dilengkapi animasi akan memberikan nilai unik tersendiri tentang suatu website di mata pengunjung dan membuat untuk datang kembali.

Itulah sekelumit keunggulan website yang menggunakan flash. Tapi sekarang, mari kita bahas apa yang terjadi di sudut pandang user. Ketika user mengakses suatu website yang menggunakan flash dalam page-nya, yang didapat user adalah muncul peringatan "Plug-in Flash not found in this browser, please download here!". Nah, syukur bila usernya memang membutuhkan dan rela mendownload plug-in tersebut. Namun yang paling sering terjadi, user tentu malas untuk mendownload plug-in flash tersebut dan akhirnya mereka browsing ke situs yang lain. Dukungan terhadap flash tidak berlaku universal pada browser seluruh dunia! ( IE, Mozzila, Netscape, yang memiliki versi tua sangat tidak mendukung! ) Ini yang membuat para developer situs berpikir ulang untuk menggunakan flash dalam websitenya. Beranikah kehilangan user yang browsernya tidak mempunyai dukungan flash? Bagaimana bila ternyata 50% user yang mengakses situs tersebut ternyata menggunakan browser yang tidak memenuhi dukungan flash?

Dari sisi marketing, penggunaan flash yang kurang tepat tentu akan sangat merugikan sekali! Bila salah dalam penempatannya, bisa jadi traffik pengunjung berkurang dan angka penambahan user bisa berkurang secara terus-menerus. Bila sekalipun website tersebut dapat di akses dengan browser biasa dan ada error di bagian flash-nya saja, hal ini tetap akan membuat user tidak nyaman. Ada beberapa resiko yang terjadi bila dikaitkan dengan potensi pengunjung yang berkurang. Situs A menggunakan flash dalam webpage-nya. Pengunjung pertama merupakan pengunjung yang pertama kali datang di situs A. Dikarenakan muncul peringatan plug-in flash tidak di-support browser. Respon pengunjung tersebut adalah langsung pergi menuju situs lain. Pengunjung kedua sama dengan pengunjung pertama namun responnya sedikit berbeda. Yang dilakukan adalah mendownload plug-in flash tersebut. Karena koneksi lelet atau terputus akhirnya pengunjung tersebut membatalkan download plug-in dan langsung pergi. Pengunjung ketiga, memiliki dukungan flash dan koneksi lelet. Ketika mengakses, yang didapatkan adalah waktu load website yang lama. Akhirnya pengunjung tersebut beralih menuju situs lain. Pengunjung keempat, memiliki koneksi cepat dan dukungan flash dalam browsernya. Setelah mengakses website tersebut, didapatkan efek-efek yang standar dan terkesan membosankan karena animasi yang sudah sering dipakai oleh website lain. Akhirnya pengunjung tersebut menghakimi website tersebut adalah website standar dan tidak unik. Itu adalah resiko-resiko terburuk tentang potensi pengunjung.

Bila anda berniat untuk membuat website yang memiliki potensi pengunjung yang banyak, tidak ada salahnya melihat sudut pandang penggunaan flash terhadap potensi pengunjung. Tentu ini sedikit membantu dalam sisi marketing situs anda,bukan?

Tutorial Macromedia Flash “Pembuatan Web Interaktif dengan Flash MX”

Buka Program Flash MX, kemudian pada panel Properties ubah size = 770 x 600 pixel, dan ubah background menjadi warna hitam, lalu ubah frame rate menjadi 30.

2. Pada layer 1, buat object “rectangle” dengan ukuran W = 188, H = 418, X = 21.4, Y = 139.3.

3. Kemudian buat layer baru dan beri nama “mask”, pada frame 1, buat obyek “rectangle” dengan ukuran W=251, H=28, X= -10, Y=104.

4. Klik pada frame 30, kemudian tekan F6 pada keyboard, lalu ubah ukuran rectangle menjadi W=251, H=471, X=-10, Y=104.

5. Diantara frame 1 – 30 pada layer “mask”, Anda beri motion shape dengan cara mengubah tween pada panel Properties dengan shape.

6. Pada layer mask Anda klik kanan kemudian pilih “mask”.

7. Buat Layer baru dan beri nama “header”.

8. pada frame 30 Anda tekan F7 pada keyboard, kemudian buat obyek dengan bentuk rectangle dengan ukuran W=10, H=10, X= 21, Y=138.

1. pada frame 60 Anda tekan F6 pada keyboard, kemudian ubah ukuran garis menjadi W=10, H=10, X= 21, Y=138.

2. Buat symbol button, dengan cara klik menu Insert à New Symbol à Button dan ubah nama simbol menjadi “Homepage”.

3. Setelah masuk simbol button, pada frame “UP”, buat rectangle dengan W= 427.9, H=91.5, X=-182, Y=-43, lalu ubah warnanya menjadi warna linear, caranya klik paint bucket tool (K) lalu ubah fill color menjadi linier, untuk menerapkan warna linear klik dalam obyek linear dan drag secara vertical atau horizontal.

4. Buat Text “homepage” tepat ditengah kotak.

5. Pada frame “Over” tekan F6 dan ubah warna linear menjadi “orange dan putih”

6. Pada frame “down” tekan F6 dan ubah warna linear menjadi “merah dan putih”, lakukan langkah ke 14 pada frame “hit”

7. Buat tombol button satu lagi dengan nama “gallery”, seperti langkah 11 – 14.

8. Buat layer baru dan beri nama “button”

9. Drag symbol “homepage” ke stage, kemudian ubah ukuran & posisi sebagai berikut : W=148, H=31, X=38, Y=164,6. Kemudian drag juga Simbol “Gallery” ke stage kemudian ubah ukuran & posisi sebagai berikut : W=148, H=31, X=38, Y=206,6.

10. Buat layer baru dengan nama “Picture”. Pada frame 61 tekan F6, kemudian buat obyek rectangle dengan ukuran w : 523.1, h : 393, x : 224.6, y : 160.3, ubah warna menjadi gray (abu-abu).

11. Import file gambar, dengan cara klik menu File à Import à Import to Stage lalu pilih file “riyani.jpg” kemudian klik Open. Setelah itu ubah ukuran menjadi w : 492.8 h : 269.6, x : 240.2, y : 171.8

12. Kemudian pada frame 90 tekan F6 pada layer “picture”.

13. Buat layer baru tepat diatas layer “picture”, ubah namanya menjadi “mask picture”

14. Pada mask picture klik pada frame 61 dan tekan F7, lalu buat rectangle dengan ukuran w : 19.9, h : 19.9, x : 476.9, y : 346.9.

15. Pada frame 90, tekan F6 dan ubah ukuran “oval” menjadi w : 691, h : 691, x : 158.3, y : – 8.

16. Pada layer “picture” klik frame 91 dan tekan F7, lalu buat rectangle dengan ukuran w : 523.1, h : 393, x : 224.6, y : 160.3.

17. Import gambar dengan cara klik menu file à import à import to stage à pilih “irma.jpg” klik “Open”

18. Ubah ukuran gambar menjadi w : 492.8, h : 369.6, x : 240.2, y : 171.8, setelah itu Anda klik pada frame 115 dan tekan F6 pada keyboard.

19. Pada layer “mask picture” klik frame 91 dan buat obyek “rectangle” dengan ukuran w : 575, h : 7.6, x : 191.7, y : 350.6.

20. Klik pada frame 115, lalu tekan F6, kemudian ubah ukuran rectangle dengan ukuran w : 575.1, h : 419.5, x : 191.7, y : 145.3.

21. Klik pada frame antara 91 – 115 pada layer mask picture, lalu diberi “motion shape” pada panel Properties.

22. Klik pada layer “mask picture” kemudian klik kanan dan pilih “mask”

23. Buat layer baru dan ubah nama menjadi “text”

24. Klik pada frame 35 pada layer text, kemudian tekan F7 pada keyboard.

25. Pada frame 35 buat obyek text “HOMEPAGE” dengan text “arial black” size : 43, kemudian klik kanan text dan pilih “convert to symbol”, pilih graphic dan klik Ok.

26. Kemudian klik frame 60 dan tekan F6,

27. Klik pada frame 30 pilih obyek teks, kemudian pada panel properties ubah color menjadi “Alpha” dan ubah prosentase menjadi 0%, kemudian antara 30 – 60 dan Anda beri “motion tween.”

28. Klik frame 90 pada layer “text” kemudian tekan F6 pada keyboard.

29. Klik frame 91 pada layer “text” kemudian tekan F7 pada keyboard.

30. Buat obyek text “gallery” (type Arial black, 43), ubah positionnya menjadi x : 31739, y : 48.8, kemudian klik kanan text “gallery” dan pilih “convert to symbol”, pilih graphic dan klik Ok.

31. Kemudian klik frame 60 dan tekan F6

32. Klik pada frame 30 pilih obyek teks, kemudian pada panel properties ubah color menjadi “Alpha” dan ubah prosentase menjadi 0%, kemudian antara 30 – 60 dan Anda beri “motion tween.”

33. Buat layer satu lagi kemudian beri nama “action”

34. Klik pada frame 90 kemudian pilih “panel action” kemudian klik tanda ( + ) kemudian akan muncul pilihan, pilih Global Function à Movie Controller à Stop

35. Klik pada frame 115, kemudian beri juga action “stop”

36. Klik pada symbol button “homepage”, kemudian pada panel Action tuliskan action sebagai berikut :

On (release) {gotoAndPlay (1);}

37. Klik pada symbol button kedua yaitu “Gallery”, kemudian pada panel Action tuliskan action sebagai berikut :

On (release) {gotoAndPlay (91);}

38. Setelah semua langkah-langkah selesai maka lakukan “Test Movie” atau dengan cara tekan “Ctrl + Enter”, jika terdapat Comment Dialog, berarti masih terdapat kesalahan pada actionscript yang telah Anda buat.