Docstoc

Macromedia Flash MX - PDF

Document Sample
Macromedia Flash MX - PDF Powered By Docstoc
					                                 Macromedia Flash MX
         Belajar membuat animasi dengan menggunakan Macromedia Flash MX
         Menggunakan berbagai macam efek animasi
         Memahami penggunaan Actionscript
         Membuat presentasi multimedia




Macromedia Flash MX                                                       Page 1 of 41
                                                Bagian 1
             Perkenalan lingkungan kerja dan tools-tools
       Macromedia Flash adalah sebuah tool yang dapat digunakan untuk membuat
berbagai macam animasi, presentasi, game bahkan perangkat ajar. Selain itu Flash MX
ini dapat digunakan sebagai tool untuk mendesain web, dan berbagai aplikasi
multimedia lainnya.


Start Page




Ada beberapa menu di halaman awal macromedia Flash MX professional 2004, yaitu:


       Open a Recent Item
       Merupakan kategori yang menampilkan semua file / dokumen flash yang sudah
       dibuat dalam ekstension .fla


       Open
       Merupakan perintah untuk membuka dokumen yang sudah pernah dibuat
       namun tidak tercakup di Open Recent Item karena keterbatasan tempat.


Macromedia Flash MX                                                    Page 2 of 41
       Create New
       Merupakan perintah untuk membuat dokumen/ file flash baru.

       Create from Template
       Merupakan template yang disediakan oleh Macromedia dalam bentuk user
       Interface

       Extend
       Perintah ini akan memanggil situs web macromedia untuk sesion Exchange.

       Learn
       Merupakan perintah untuk menuju ke halaman bantuan Flash (Help).


Pertama-tama kita harus mengenal terlebih dahulu lingkungan kerja Macromedia
Flash. Pada bagian kiri terdapat Tools, di bagian atas tengah Timeline, yang
digunakan untuk mengatur timeline animasinya, dan pada bagian tengah-tengah
terdapat Stage yaitu bagian yang visible secara visual saat di-publish atau di preview
di browser.




                               TimeLine


         T
         o
         o                                               W
         l                                               o
         s            Stage                              r
         B                                               k
         o
         x                                               A
                                                         r
                                                         e
                                                         a




Macromedia Flash MX                                                       Page 3 of 41
Status Bar
                  Gambar di samping adalah menu status bar yang digunakan untuk
                  merubah zooming/ukuran stage secara keseluruhan, Option Fit in
                      Window akan menampilkan stage saja, Option Show Frame akan
                  Menampilkan Stage beserta Work Area, dan bila Show All akan ber
                  -fokus pada objek yang ada.



Hal-hal penting untuk diketahui :
Untuk merubah warna background dan ukuran stage dapat dilakukan dengan :
       Klik kanan pada stage, lalu pilih Document Properties sehingga akan
       mengeluarkan dialog box seperti gambar di bawah.
       Atau dengan cara memilih menu Modify>Document (Ctrl+J).




Ukuran stage dapat diubah pada option Dimensions dimana width untuk lebar stage
dan height untuk tinggi stage, lebar dan tinggi minimum adalah 1 px, lebar dan tinggi
maximum adalah 2880 px.
Pada option Match :

       Printer
       Untuk merubah stage ke ukuran maximum available print area (ukuran stage
       akan mengikuti besarnya kertas yang dipakai).


       Contents
       Untuk menyesuaikan lebar dan tinggi Stage dengan objek yang ada, bila objek
       ditempatkan tepat di kiri atas Stage maka lebar stage akan sama besar dengan
       objek, bila tidak maka jarak dari kiri dan atas stage ke objek akan sama
       dengan jarak kanan bawah stage.


       Default
       Untuk merubah stage ke ukuran standard yaitu 550 x 400 pixel.




Macromedia Flash MX                                                           Page 4 of 41
Tools Box

                  Tools digunakan untuk menggambar dan memanipulasi gambar /objek.


                  Tools terbagi menjadi 4 bagian besar yaitu :

                  Tools pada bagian ini digunakan untuk mengedit dan memanipulasi
                  objek.

                  View pada bagian ini digunakan untuk memperbesar maupun
                  memperkecil layar monitor.

                  Colors pada bagian ini terdapat pallet untuk mengganti warna outline
dan fill.
                  Option bagian ini merupakan modifiers dari setiap tool yang dipilih,
                        Setiap tool mempunyai modifiers yang berbeda-beda.




Menggambar dengan Macromedia Flash

Selection tools

Tools ini biasanya digunakan untuk menseleksi object secara spesifik, dimana objek
dalam flash yang divisualisasikan di stage dapat dibagi menjadi beberapa bagian yaitu
shape dan symbol. Perbedaan mendasar pada shape dan symbol adalah bila kita
membuat shape maka shape tersebut tidak akan tersimpan dalam library, objek ini
akan tersimpan dalam keyframe dan frame dalam timeline bersangkutan.


      Selection tool(V)
Tools ini digunakan untuk menyeleksi gambar secara langsung.




Cara penggunaan :
   1. Pilih select area (dengan mengklik kanan mouse lalu ditahan sambil di drag
       mousenya).
   2. Select area terpilih.
   3. Lakukan perubahan pada daerah yg terpilih (misal delete, memindahkan
       tempat,dll).




Macromedia Flash MX                                                            Page 5 of 41
Modifier yang ada pada tool ini adalah :


              Snap to          Snap to object, bila option ini aktif maka pada saat
              object           membuat atau memindahkan objek maka akan di-
                               snaping antara satu objek ke objek lainnya.
              Straighten

              Smooth           Smooth, option ini digunakan untuk menghaluskan
                               outline yang telah dibuat, caranya seleksi outline yang
                               akan di modify lalu click option ini.
Straighten, option ini digunakan untuk meluruskan garis-garis outline yang telah
dibuat, cara pakai sama seperti smooth.


      Subselection Tool (A)


Tool ini digunakan untuk menyeleksi dan mengedit vertex-vertex yang terdapat dalam
suatu objek.




1.   Memilih objek.
2.   Objek terpilih dengan vertex-vertexnya.
3.   Kita bisa mengadakan manipulasi terhadap vertex(contoh ditarik melebar).
4.   Objek telah termanipulasi dangan bantuan Subselection Tool.


Tidak terdapat modifier untuk tool ini.


       Lasso tool

Tool ini digunakan untuk memilih objek sesuai dengan pergerakan mouse, lain halnya
dengan selection tool diatas yang memilih objek dengan bentuk persegi panjang.




                           1                  2                 3


1. Pilih objek yang akan dimanipulasi dengan menggerakan mouse melewati objek
   membentuk pola yang diinginkan.
2. Batasan objek telah terpilih sesuai pola yang diinginkan(daerah yang terasir).
3. Lalu kita gunakan selection tool untuk mendrag daerah terasir tersebut ke arah
   yang diinginkan.

Macromedia Flash MX                                                          Page 6 of 41
Modifier yang terdapat pada Lasso tool



             Magic Wand        Magic Wand, Jika pilihan Magic Wand diaktifkan maka
                               daerah yang di select akan sesuai dengan aturan pada
             Magic Wand        magic wand propertiesnya.
             Properties

                               Magic Wand Properties, Mengatur setingan dari magic
             Poligon Mode      Wand seperti apakah edge yang di select akan smooth,
                               Normal, dan sebagainya.

                               Poligon Mode, Jika pilihan Poligon ini diaktifkan maka
                               Daerah diselect dengan menggunakan batas-batas edge
                               Yang lurus.


Drawing tools

Dengan tools yang ada pada drawing tools kita dapat membuat ilustrasi sendiri, semua
object yang kita buat berupa shape.



     Line Tool(N)
Tool ini digunakan untuk membuat garis.

       gunakan tombol shift bila ingin mendapatkan garis lurus.




      Oval Tool(O)
Tool ini digunakan untuk membuat bentuk oval.

       gunakan tombol shift untuk membuat lingkaran penuh.




Rectangle Tool(R)
Tool ini digunakan untuk membuat persegi panjang
       gunakan tombol shift untuk membuat bujur sangkar.
       pilih custom pada menu properties untuk membuat rectangle lebih unik.



PolyStar Tool
Tool ini digunakan untuk membuat poligon misal segi-4, segi-5,dsb.
Untuk memilih segi poligon tersebut dpt dilihat di menu plg properties yg ada paling
bawah lalu pilih options. Lalu diisi saja Number of Sides yg dikehendaki.


Macromedia Flash MX                                                         Page 7 of 41
     Pen Tool(P)
Tool ini berfungsi untuk menggambar path yang presisi dengan garis lurus atau
lengkung.




Untuk menggambar garis lurus, caranya klik pada titik pertama dan klik pada titik
kedua sehingga terbentuk satu segmen garis.
         Gunakan shift untuk mendapatkan garis dengan arah kelipatan 45 derajat.
Untuk menggambar garis lengkung, caranya klik pada titik pertama lalu drag pada titik
kedua.




Macromedia Flash MX                                                       Page 8 of 41
     Pencil Tool(Y)
Tool ini digunakan untuk menggambar garis, kurva dan bentuk lain seperti halnya kita
menggambar dengan pensil.


Modifier untuk tool ini adalah

                          Straighten, semua garis yang digambar akan bersifat kaku.
                          Smooth, semua garis yang digambar akan bersifat lengkung.
                          Ink, semua garis yang digambar akan sesuai dengan
                          pergerakan mouse.




     Brush Tool(B)
Tool ini digunakan untuk melukis, dimana warna yang diwakili adalah warna fill.
Sehingga tipe dari object yang anda buat dengan Brush Tool adalah fill bukan outline.


Modifier untuk tool ini adalah
             Lock Fill          Lock Fill, dengan aktifnya option ini kita dapat
                                mengikuti pola warna dari object yang di fill sebelumnya.
             Brush type
                                Ini akan sangat efektif pada saat kita memakai gradiasi.
             Brush size
                                Brush Type, pada option ini kita dapat memilih
             Brush shape        beberapa mode dengan fungsi tertentu.(liat gambar).

                                Brush size, menentukan ukuran dari brush yang
                                dipakai.

                                Brush shape, menentukan bentuk dari brush yang
                                dipakai.


                                      Brush Type




Macromedia Flash MX                                                            Page 9 of 41
        Eyedropper Tool
Tool ini untuk mengambil sample warna dari fill dan stroke dimana toolnya akan
berubah sesuai dengan sumber dari warna yang diambil,bila yang diambil dari stroke
maka akan berubah menjadi Ink dan bila fill akan berubah menjadi Paint bucket.



        Eraser tool
Tool ini digunakan untuk menghapus shape baik fill maupun stroke.
Modifier untuk tool ini adalah:


                              Faucet, menghapus semua fill yang berwarna sama.

               Faucet         Eraser mode, sama seperti brush mode.
               Eraser mode
                              Eraser shape, bentuk dari penghapus.
               Eraser shape




           Ink bucket tool & Paint bucket tool

  ink      paint



Ink bucket tool, mengganti warna outline/stroke(garis) dari suatu objek.
Paint bucket tool, mengganti warna fill dari suatu objek.


Fill Color dan Stroke
Untuk mengubah warna baik fill maupun stroke dapat dilakukan di color box tetapi
selain dari sini kita juga dapat merubah kedua warna tersebut dengan menggunakan
panel yaitu color swatch dan color mixer.

Untuk mengaksesnya,pilih menu Window > Design Panel >Color Mixer/Color
Swatches.




Macromedia Flash MX                                                        Page 10 of 41
       Dari window color mixer ini, kita dapat mengisi warna dengan solid atau
gradiasi atau bitmap, gradiasi akan sangat mempengaruhi besarnya file.
Sedangkan dari window swatches adalah tempat kita menyimpan warna atau gradiasi
baru yang ingin dipakai lagi.




Macromedia Flash MX                                                Page 11 of 41
Manipulasi gambar ( Transform )

Size and Rotate
Kita dapat mengaktifkan menu transform dengan memilih Window > Design Panel
> Transform.




                                       Constrain, Mempertahankan rasio
                                       awal antara lebar dan panjangnya




Selain dengan mengisi size and rotate pada window transform, kita juga dpt merubah
size dengan menclik kanan objek kemudian pilih free transform , lalu mendrag edge
pada objek (lihat gambar di bawah).




Sedangkan untuk rotate, kita dapat merubahnya dengan men-klik pada objek
kemudian pilih free transform, lalu mendekatkan mouse ke salah satu ujung edge
sampai lambang rotate muncul, kemudian kita drag sesuai kebutuhan kita(lihat
gambar dibawah).




Macromedia Flash MX                                                  Page 12 of 41
Layer
Layer digunakan untuk memisahkan objek yg satu dengan objek lainnya.




Untuk menambah layer klik pada gambar di kiri bawah(Insert Layer) pada window
TimeLine. Dalam layer mengandung prinsip tumpukan kertas transparan, artinya
objek pada layer di atas akan menimpa / menutupi objek yang dibuat pada layer
sebelum-sebelumnya.




                                                Tulisan boboho ada pada layer 1

                                                Objek elips pada layer 2


                      ???Layer 1 ada di atas layer 2???
                      ???maka objek pada layer 2 akan ditutupi oleh objek layer 1???




Macromedia Flash MX                                                                    Page 13 of 41
                                                                Bagian 2
                                                           Animasi Dasar
Pada bagian ini kita akan mempelajari animasi-animasi dasar yang dikenal dengan
sebut tweening. Ada dua macam Motion dan Shape.



Motion
Kita akan mencoba untuk membuat animasi gerakan sederhana. Sebelumnya kita
akan mencoba menggerakkan suatu objek sederhana. Buatlah sebuah objek pada
stage. Kemudian setelah membuat objeknya, pada bagian frame klik kanan pilih
Create Motion Tween.




Kemudian pada frame 35 misalkan klik kanan pilih Insert Keyframe.
Setelah itu ubah posisi objek pada frame 35, misalkan di sebelah kanan. Maka dengan
menggunakan dua keyframe tersebut objek akan bergerak dari posisi awal perlahan-
lahan ke posisi akhirnya di frame 35. Lihat gambar berikut.




Macromedia Flash MX                                                   Page 14 of 41
Jalankan dengan menggunakan Ctrl + Enter, untuk melihat hasilnya. Pada keyframe
pertama letak objek adalah disebelah kiri, sedangkan pada keyframe kedua di 35
objek diletakkan pada posisi yang berbeda, maka objek tersebut akan dianimasikan
bergerak dari keyframe pertama ke keyframe kedua.

Objek akan bergerak dengan kecepatan yang ditentukan fps ( frame per second ).
Secara default nilai dari fps adalah 12 yang berarti setiap 12 frame lamanya adalah
satu detik. Kita dapat mengubah nilai default ini. Caranya masuk ke menu Modify >
Document.




Ubahlah nilai pada frame ratenya.
Dimension digunakan untuk mengatur ukuran stage yang diinginkan.
Background Color untuk menentukan warna background dari stage.
Dalam membuat animasi dengan menggunakan frame pada Timeline memiliki
Properties sendiri untuk memberikan efek tertentu pada animasinya. Kliklah pada
frame pertama animasi. Kemudian cek di bagian bawah terdapat Properties.



Macromedia Flash MX                                                   Page 15 of 41
Coba ubah nilai dari Ease, click tombol disebelahnya dan drag ke bawah. Maka
animasinya akan mendapat efek berangsur-angsur semakin cepat, nilai percepatannya
ditentukan dari nilai Easenya ( negatif untuk semakin cepat ). Ubah juga nilainya
menjadi Out untuk mendapatkan efek semakin lambat.

Kemudian coba juga ubah bagian Rotate, pilih CW ( Clockwise ) untuk searah jarum
jam atau CCW ( Counter Clockwise ) untuk berlawanan dengan jarum jam. Maka objek
akan berputar secara otomatis sejumlah yang ditentukan n times.



Mengimpor gambar
Kita dapat mengimpor gambar-gambar untuk dimasukkan ke dalam animasi flash kita.
Pada bagian file pilih Import > Import to Library. Kemudian pilihlah file gambar
yang ingin diimpor ke dalam Flash.




Macromedia Flash MX                                                  Page 16 of 41
Pilihlah gambar yang ingin dimasukkan ke library. Kemudian klik Open.
Untuk membuka library, pilih menu Windows > Library.




Untuk memasukkan gambar tersebut ke stage, click and drag gambar pada library ke
stage. Setelah itu gambarnya pun dapat dibuat efek motion, misalkan dibuat bergerak
seperti contoh sebelumnya.




Macromedia Flash MX                                                     Page 17 of 41
Shape
Selain motion kita dapat membuat efek shape. Coba buat sebuah objek dengan
drawing tool, misalkan membuat suatu lingkaran pada frame pertama dan sebuah
kotak pada frame ke-35.

                                             Pada     frame  pertama,  ubahlah
                                             properties tween menjadi Shape.
                                             Kemudian perhatikan warna pada
                                             bagian frame akan berubah menjadi
                                             warna hijau.

                                             Kemudian jalankan untuk melihat
                                             efeknya. Bentuk bola akan secara
                                             perlahan-lahan    berubah    menjadi
                                             bentuk kotak. Perubahan bentuk inilah
                                             yang disebut Shape.




Contoh lain kita coba buat pada frame ke-50, sebuah objek teks. Ingatlah bahwa
bentuk Shape bisa dilakukan hanya untuk vektor, sehingga objek teks yang kita buat
harus kita pecah hingga menjadi vektor . Klik kanan pada objek teks untuk pilih Break
Apart, atau tekan Ctrl + B.




Sebelum Break Apart                         Setelah Break Apart 2 kali.


Setelah ubahlah properties dari frame ke-35 tersebut, untuk bagian Tweennya menjadi
Shape. Lihatlah efeknya, bentuk bulat akan secara bertahap berubah menjadi kotak,
kemudian dilanjutkan secara bertahap menjadi bentuk objek teks.




Macromedia Flash MX                                                       Page 18 of 41
                                                                Bagian 3
                                                         Animasi Dasar 2
TimeLine Effect
Timeline Effect merupakan suatu animasi yang siap pakai (telah disediakan oleh Flash
MX 2004).




Cara pemakaian, select object yg akan diberikan animasi lalu klik pada menu Insert >
Timeline Effects
1.Assistants

a. Copy to Grid
   Jika ingin membuat duplikasi dari objek baik dengan pencerminan pada kolom
   Maupun barisnya (lihat gambar di bawah).




Macromedia Flash MX                                                     Page 19 of 41
b. Distributed Duplicate
   Jika ingin membuat duplikasi dari objek dengan tambahan scaling maupun merubah
   warnanya dan memberinya motion(lihat gambar dibawah).




2. Effect
a. Blur :     Menampilkan animasi seolah-olah objek bertambah buram(blur).
b. Drop Shadow :      Memberikan bayangan pada objek yang dibuat.
c. Expand :     Memberikan animasi pada text, seperti memberikan effect
squeeze(menyempit).




Macromedia Flash MX                                                       Page 20 of 41
d. Explode
   Memberikan animasi seolah-olah objek menjadi terpecah menjadi beberapa bagian.



3. Transform/Transition

a. Transform
   Memberikan animasi kepada objek baik berpindah tempat, scalling, perubahan
   warna, perputaran,dsb.




b. Transition
   Memberikan effect transisi(pemunculan) pada objek.




Macromedia Flash MX                                                   Page 21 of 41
Motion Guide
Kita dapat menggunakan motion guide untuk membuat animasi bergerak sesuai
dengan path yang kita buat. Pertama-tama kita buat dulu motion pathnya.




Dengan menggunakan Motion Guide kita dapat membuat objek animasi bergerak
sesuai dengan path.
Cara penggunaan :
1. Pada layer pertama buatlah objek yang akan diberi animasi dengan guide layer.
2. Kemudian kita buat layer kedua,dan taruh diatas layer pertama,layer ini nantinya
   akan berfungsi sebagai path(arah animasi) dari layer dibawahnya.
3. Lalu buatlah animasi motion biasa untuk objek pada layer pertama tadi. Tapi
   letakan fokus objek tepat pada garis/path yang telah dibuat pada layer 2.
   kemudian pada keyframe akhir dari animasi , letakkan juga fokus objek berpacu
   pada path pada layer 2.
4. Terakhir, clik kanan pada layer atas(path),lalu pilih guide.




Macromedia Flash MX                                                      Page 22 of 41
Export File

Dalam Flash MX ini, animasi yang kita buat dapat ditampilkan(dipublish) dalam format
yang berbeda-beda, baik dalam bentuk exe(executable file),html(untuk dipublish di
web), mov(movie), jpg,gif(gambar), gif(animated image), dll.


Untuk mempublishnya menjadi exe,html,mov,jpg,gif(non-animated image), dapat
dilakukan dengan memilih menu File > Publish Settings.


Sedangkan untuk mempublishnya menjadi avi(movie clip), gif(animated image), dapat
dilakukan dengan memilih menu File > Export > Export Movie > lalu kita pilih tipe
yang kita mau(pada extension type).
Lihat gambar dibawah.




Macromedia Flash MX                                                     Page 23 of 41
                                                    Bagian 4
                                   Masking dan Penerapannya
Masking dan Penerapannya
Dalam bab ini akan mempelajari cara penggunaan masking. Dengan menggunakan
teknik masking kita dapat mengatur bagian mana dari suatu layer yang akan
ditampilkan dan yang tidak ingin ditampilkan.

Buatlah suatu teks dengan warna biru pada suatu layer, dan objek teks yg sama
dengan warna putih pada layer yang berbeda.




Tambahkan layer baru untuk maskingnya, kemudian klik kanan pada layer tersebut
dan pilihlah Mask.




Macromedia Flash MX                                               Page 24 of 41
Pada layer mask kita buat sebuah batang hitam kurang lebih setinggi teks yang kita
buat, kemudian kita animasikan bergerak dari kiri ke kanan.




         Untuk melihat efeknya pastikan layer mask, dan layer putih sudah terkunci.
Kemudian tariklah penunjuk timeline untuk melihat animasi masking yang terjadi dari
waktu ke waktu. Bagian teks putih yang berada di layer putih tidak semuanya
ditampilkan tetapi hanya sebagian. Sedangkan layer biru akan ditampilkan semuanya.
Hal ini menimbulkan efek seperti gambar di atas, karena dengan adanya mask yang
dianimasikan maka bagian dari teks putih yang ditampilkan pun bergerak dari kiri ke
kanan.


Contoh lain misalkan kita membuat efek spotlight. Buatlah warna background stage
menjadi hitam. Kemudian import sebuah gambar dan dimasukkan ke dalam Library.



Macromedia Flash MX                                                    Page 25 of 41
       Buatlah 2 buah layer, yang pertama letakkan gambar objek yang ingin
ditampilkan, yang kedua ubahlah menjadi mask. Sekarang buatlah animasi pada layer
mask, misalkan sebuah lingkaran yang bergerak, maka gambar akan dimunculkan
pada bagian-bagian yang kita masking. Selain itu efek-efek seperti kaca pembesar
juga menggunakan teknik masking yang sama.




Macromedia Flash MX                                                  Page 26 of 41
                                                    Bagian 5
                                 Penggunaan Button dan Scene
Button
Buatlah sebuah objek, kemudian klik kanan, dan konversi menjadi button. Button ini
memiliki beberapa behavior.




Beberapa behaviornya adalah :
   1. Up
      Adalah keadaan di mana mouse tidak berada di dalam area buttonnya.
   2. Over
      Adalah keadaan di mana mouse sedang berada di dalam area buttonnya.
   3. Down
      Adalah keadaan pada saat di mana mouse ditekan pada area buttonnya.
   4. Hit
      Adalah keadaan pada saat di mana mouse ditekan dan dilepas pada area
      buttonnya.

Kita dapat membuat gambar yang berbeda sehingga kita dapat memberikan efek yang
berbeda, misalkan pada saat Over gambarnya berubah.

ActionScript

   1. Pada frame satu tambahkan sintaks berikut.

         stop();



   2. Pada actionscript Button tambahkan sintaks berikut.

         on(release){
             gotoAndPlay(5);
         }

   3. Pada frame 5 tambahkan sebuah teks yang berbeda dan actionscript sebagai
      berikut.

         stop();




Macromedia Flash MX                                                  Page 27 of 41
Fungsi stop() digunakan untuk menghentikan proses timeline. Kemudian on(release)
adalah proses pada saat button diklik dan dilepaskan, gotoAndPlay(5) akan membuat
timeline bergerak ke frame 5.

Selain itu juga dapat menggunakan penamaan pada frame. Kita dapat memberi
penamaan pada frame, pada bagian property dari frame.




Sehingga pada         saat   penggunaan   actionscript   kita   dapat   menggunakan   nama
framenya.

 on(release){
     gotoAndPlay(“startFrame”);
 }


Untuk actionscript lainnya dapat dilihat di Reference.




Macromedia Flash MX                                                           Page 28 of 41
                                                                     Bagian 6
                                                     Menu Interactivity
Buatlah rancangan struktur menu sebagai berikut. Kita akan membuat strukturmenu
di mana pada saat mouse berada di area menu 1 maka akan pop up sebuah menu di
bawahnya.




Untuk isi content dari menu 1 kita gunakan movie clip. Buatlah sebuah move clip pada
layer baru dan letakkan pada bagian bawah menu 1.




Kemudian klik pada objek movie clip tersebut dan berilah nama instancenya, misalkan
menu1_content.




Macromedia Flash MX                                                    Page 29 of 41
Di dalam movie clip tersebut kita dapat membuat beberapa frame animasi. Kliklah dua
kali untuk masuk ke dalam movie clip tersebut.




Pada bagian dalam movie clip buat frame dengan animasi di mana kotak akan secara
bertahap muncul, settinglah nilai alphanya. Beri dua buah nama frame, yang pertama
hide di mana tidak terdapat objek apapun dan show yang menjalankan animasi
munculnya kotak secara perlahan-lahan.

Kemudian untuk masing menu, dari 1-3 konversikanlah ke bentuk movieclip sehingga
kita bisa memberikan actionscript. Tambahkan actionscript berikut pada instance
menu1.




Maka pada saat mouse berada pada area menu1, maka akan memanggil objek
menu1_content untuk menjalankan timelinenya pada frame show, demikian pula pada
saat mouse tidak berada pada area menu1, maka akan menjalankan timeline pada
objek menu1_content ke hide, sehingga kotak tidak ditampilkan.




Macromedia Flash MX                                                    Page 30 of 41
Selanjutnya kita tinggal memasukkan button-button di dalam movie clip tersebut, di
mana akan melakukan suatu action pada saat button tersebut diklik. Untuk masing-
masing menu kita buat satu per satu objek contentnya.

                                               Pada saat mouse menunjuk pada menu 1,
                                               maka kotak akan perlahan-lahan muncul.



                                               Ini dikarenakan actionscript yang kita
                                               tambahkan pada event rollOver dan
                                               rollOut. Efek seperti ini yang disebut
                                               dengan popup menu.




Kita juga dapat menggunakan efek scrolling menu. Di mana kita dapat membuat menu
yang bergerak. Menu-menu dapat dibuat dengan menggunakan Button kemudian
dimasukkan ke dalam movie clip dan kemudian dianimasikan.


Kasus
Membuat Menu Scrolling
Mintalah instruktur anda untuk membantu membuat menu scrolling ini.




Membaca teks dari file
Buatlah sebuah objek teks dan sebuah button.




Pada bagian objek teks, gunakan outline.




Macromedia Flash MX                                                       Page 31 of 41
Kemudian siapkan file teksnya. Simpanlah file teks di tempat satu folder dengan di
mana kamu menyimpan file flash ini. Isi file teksnya adalah sebagai berikut.




varText ini sesuai dengan yang kita masukkan pada bagian Var pada properties dari
teks objek ini. Kemudian tambahkan actionscript pada button “getdata”.




Maka flash akan membaca file dari testing.txt kemudian nilainya akan dimasukkan
pada objek yang memiliki variabel varText.



Scrolling Text

Buatlah sebuah objek teks pada stage dan dua buah movieclip untuk scrollingnya.




Kemudian settinglah propertynya menjadi.




Macromedia Flash MX                                                    Page 32 of 41
Kemudian pada bagian movieclip kita buat actionscriptnya. Untuk tombol atas
tambahkan script sebagai berikut.




Untuk tombol bawah tambahkan script berikut.




Tool Tips

Di sini kita bisa gunakan efek dari Button.




Pada bagian button terdapat empat macam kondisi.
Up – pada saat mouse sedang tidak berada pada area button tersebut.
Over – pada saat mouse sedang berada pada area button tersebut.
Down – pada saat mouse sedang dalam posisi ditekan pada area button tersebut.
Hit – pada saat mouse telah diklik pada area button tersebut.


Untuk membuat efek tooltip kita bisa tambahkan pada saat kondisi Over dengan
menggunakan layer baru. Sehingga pada saat mouse berada di area dari Button
tersebut, maka akan muncul keterangan tooltipnya.




Macromedia Flash MX                                                  Page 33 of 41
                                                    Bagian 7
                             Pembuatan interaksi dalam Flash
Membuat link/URL
Berikut ini akan dipraktekkan pemberian action Get URL di dalam movie Flash :
1. Buatlah dokumen baru dengan menklik menu File > New, dan gunakan default
   properties movie yang diberikan program Macromedia Flash MX.
2. Ketikkan teks www.evopage.com dalam stage. (liat gambar dibawah).

                            www.evopage.com

3. Pada contoh kali ini akan dipraktekkan pembuatan hit button untuk dijadikan
   tombol tersembunyi diatas tombol text. Hit button adalah objek tombol yang hanya
   menggunakan state hit, sehingga objek ini pada saat disipkan ke dalam Stage
   tidak akan terlihat. Untuk membuatnya, klik menu Insert > New Symbol
   sehingga muncul kotak dialog create new symbol.
4. Pada kotak dialog tersebut, ketikkan nama hit kemudian pilihlah button untuk opsi
   behaviour.
5. Pada jendela pengeditan symbol Hit, klik kanan layer Hit kemudian pilihlah
   perintah insert Keyframe (atau F6).
6. Pada layer Hit, buatlah objek persegiempat sesuai keinginan, misalnya seperti
   contoh yang terlihat pada gambar dibawah ini.




Macromedia Flash MX                                                      Page 34 of 41
7. Kembalilah ke menu utama, dengan menklik ikon Scene 1 yang terdapat di bagian
   kiri atau jendela pengeditan symbol Hit.
8. Tampilkan panel Library kemudian seret(drag) symbol Hit ke dalam Stage,
   posisikan instance Hit sehingga berada di atas objek teks. Jika ukuran instance Hit
   lebih kecil dari ukuran teks, perbesarlah ukuran instance Hit. Sehingga menutupi
   keseluruhan teks (liat gambar dibawah).




9. Gunakan tools Arrow kemudian klik instance Hit untuk memilihnya.
10. Pada panel Actions, bukalah daftar Actions > Browsers/Network kemudian klik
   ganda pada action Get URL. Setelah itu ketikkan alamat URL, misalnya
   www.evopage.com pada kotak URL.

     on(release)
     {
           getURL(www.evopage.com);
     }




Macromedia Flash MX                                                       Page 35 of 41
fscommand
Salah satu perintah yang banyak digunakan dalam membuat interaksi dalam movie
flash adalah fscommand.
Dibawah ini adalah daftar perintah di dalam action fscommand beserta argumennya.


 Perintah        Argumen      Fungsi
 Full Screen          TRUE    Membuat tampilan stand     alone player menjadi fullscreen.
                      FALSE   Membuat tampilan stand     alone player menjadi normal.
                              Membuat tampilan stand     alone player dimungkinkan
 Allow Scale          TRUE    untuk
                              diperbesardan diperkecil
                              Membuat tampilan stand     alone player ditampilkan
                      FALSE   menurut
                              ukuran aslinya.
 Show Menu            TRUE    Menampilkan menu di dalam stand alone player
                      FALSE   Menyembunyikan menu di dalam stand alone player.
 Quit                   -     Keluar dari stand alone player.
                              Membuka aplikasi lain di dalam jendela stand alone
 Exec            Path-        player.
                 aplikasi


Untuk perintah Fullscreen, Allowscale, dan Showmenu , biasanya diletakkan pada layer
pertama atau pada awal dari suatu movie flash yang kita buat.
Sedangkan perintah Quit dan Exec , biasanya di attach dalam button.
contoh penggunaan perintah Fscommand di dalam movie Flash
pada frame 1 kita ketik :

 fscommand("fullscreen","true");
 fscommand("showmenu","false");


pada button exit, dapat kita isi action berupa

 fscommand("quit","true");



Load Movie
Action Load Movie dapat digunakan untuk membuka movie flash. Tapi terlebih dahulu
kita harus mempublish movie flash yang akan dibuka menjadi flash player(swf). Jika
movie flash(swf) yang akan dibuka berada dalam folder yang sama, maka kita cukup
mengetikan nama file beserta extensinya. Namun jika movie swf yang akan dibuka
berada di folder yang berbeda, kita harus mengetikan rootnya, sebagai contoh
d:\flash\evo.swf .


Macromedia Flash MX                                                            Page 36 of 41
Contoh penggunaan : (misal kita taruh action pada suatu button)

 on(release)
 {
       loadMovieNum(“evo.swf”,1);
 }


Unload Movie
Action Unload Movie adalah kebalikkan dari action Load Movie. Action Unload Movie
Digunakan untuk menutup movie flash yang sebelumnya dibuka. Untuk menggunakan
action Unload Movie, pilihlah objek tombol(button) atau frame kemudian bukalah
daptar Action > Browser/Network dan pilihlah unloadMovie.
Contoh penggunaan

 on(release)
 {
        unloadloadMovieNum(this);
 }




Macromedia Flash MX                                                     Page 37 of 41
                                                   Bagian 8
                               Membuat presentasi Multimedia
Di sini kita akan mempelajari beberapa script untuk pengaturan Movie Control.




Nah pada layer 1 kita buat beberapa tombol dalam bentuk movieclip. Kemudian pada
layer 2 buat beberapa keyframe dengan nama satu, dua, dan tiga.
Kemudian di frame-frame tersebut buat beberapa gambar yang berbeda.

Untuk masing-masing button pada actionscriptnya kita bisa buat pada saat diklik
movie control pindah ke frame tertentu.




Maka pada saat buttonnya diklik movie control akan pindah langsung ke frame dengan
nama “tiga”.




Macromedia Flash MX                                                     Page 38 of 41
gotoAndStop
movie dipindahkan pada frame tertentu, dan movie control akan stop pada frame
tersebut.
Contoh penggunaan:
gotoAndStop(30); // untuk pergi ke frame 30
gotoAndStop(“Scene 2”,1); // untuk pergi ke Scene 2, frame 1


gotoAndPlay
movie dipindahkan pada frame tertentu, dan movie control akan play, lanjut terus
mulai dari frame tersebut. Penggunaannya sama dengan method gotoAndStop


nextScene
pindah ke Scene berikutnya.
Contoh penggunaan :
nextScene();


prevScene
pindah ke Scene sebelumnya.
Contoh penggunaan :
prevScene();




Macromedia Flash MX                                                 Page 39 of 41
                                                                      Bagian 9
                                                                       Review
Coba dibuat suatu menu dari cd interaktif yang biasa terbundle pada majalah-majalah
komputer sekarang, kira-kira bentuknya sebagai berikut:


1. Intro.
   Berisi pendahuluan / perkenalan dan penjelasan tentang isi secara keseluruhan.
2. Menu awal
   Gunakan menu scrolling untuk menu-menunya.
3. Bagi bagian-bagiannya menjadi sub bab dan link masing-masing menu ke file swf
lain (misalnya
   menggunakan file swf yang sudah pernah dibuat sebelumnya).


Gunakan kreativitas anda untuk membuat cd interaktif.
Selamat mengerjakan.




Macromedia Flash MX                                                     Page 40 of 41
                                                                 Bagian 10
                                                        Buat web Interaktif
Buatlah web interaktif, gunakan fitur-fitur berikut ini :
  1. Tween ( Motion & Shape )
  2. Guide Layer
  3. Masking
  4. ActionScript


Pilihlah salah satu materi berikut ini :
   1. Buatlah home page pribadi, di mana harus memuat informasi-informasi berikut
       ini :
           -   informasi profil diri, nama, tanggal lahir, zodiac, alamat, email, dan
               sebagainya.
           -   Gallery, berisi beberapa foto-foto
   2. Buatlah undangan dalam bentuk multimedia interaktif. Misalkan undangan
       acara ulang tahun, acara seminar, undangan konser dan sebagainya.
           -   jenis acara
           -   kapan dan tempat berlangsungnya acara
           -   acara-acara yang akan diadakan
           -   contact person




Macromedia Flash MX                                                     Page 41 of 41
Filename:            Macromedia Flash MX.doc
Directory:           D:\Evo\RnD\diktat\special\Macromedia Flash
Template:            C:\Documents and Settings\EVO\Application
    Data\Microsoft\Templates\Normal.dot
Title:               Pengenalan Flash MX Professional 2004
Subject:
Author:              Yohanes Budiman Wijaya
Keywords:
Comments:
Creation Date:       9/5/2005 9:24:00 PM
Change Number:       154
Last Saved On:       2/22/2006 4:50:00 PM
Last Saved By:       EVO
Total Editing Time: 732 Minutes
Last Printed On:     4/27/2006 4:00:00 PM
As of Last Complete Printing
    Number of Pages: 41
    Number of Words:         4,202 (approx.)
    Number of Characters: 23,953 (approx.)

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:8129
posted:12/31/2010
language:Indonesian
pages:42