[Files.indowebster.com] Modul Animasi

download [Files.indowebster.com] Modul Animasi

of 14

Transcript of [Files.indowebster.com] Modul Animasi

  • DAFTAR ISI

    Daftar Isi i

    A. Interface Flash 1

    B. Animasi Frame by Frame 4

    C. Animasi Shape 5

    D. Animasi Motion 6

    E. Animasi Motion Guide 7

    F. Animasi Masking 8

    G. Symbol Grafik 9

    H. Symbol Movie Clip 11

    I. Symbol Button 12

    J. Animasi Orang Jalan 13

    K. Save As 15

    L. Publising 15

    M. Action Script 17

    A. Interface Flash

    Macromedia Flash merupakan salah satu program animasi 2D vector yang sangat handal. Disini kita bisa membuat animasi kartun, animasi interaktif gambar, presentasi, video clip, movie, web animasi dan aplikasi animasi lainnya sesuai kebutuhan kita.

    1. Flash Stage

    Flash Stage dalam kenyataan seperti layar bioskop. Pada flash stage berupa kotak putih besar. Semua obyek seperti gambar, tulisan, dan foto ditempat pada stage. Di luar area kotak putih, tersebut merupakan daerah berwarna abu-abu. Di area ini penonton tidak dapat melihat objek apapun saat film sedang dimainkan. Perhatikan gambar dibawah. layar Flash dibawah ini :

    Ukuran default dari stage adalah 550 picxel dan tinggi 400 picxel (picture elment).Picxel merupakan titik terkecil pada layar monitor Anda. Untuk mengubah ukuran sesuai kebutuhan : Klik menu Modify > Document, muncul dialog box Document Properties seperti pada gambar di bawah, Anda tinggal mengubah sesuai kebutuhannya.

    i | F l a s h 8 1| F l a s h 8

    Penulis

    Joko Susanto, S.Pd

    PANEL

    T

    O

    O

    L

    B

    O

    X

    STAGE

  • 2. Toolbox Toolbox berisi alat kerja berupa berbagai simbol gambar atau icon

    yang masing-masing mempunyai fungsi tertentu dan paling sering digunakan. Adapun komponen-komponen toolbox adalah sebagai berikut :

    1) Selection Tool, digunakan untuk memilih objek. Dengan 1 kali klik berarti sebuah objek telah dipilih, dengan klik ganda (dua kali) berarti Anda memilih objek dan seluruh komponen yang dimilikinya. Dengan mendrag Arrow tool Anda dapat membuat sebuah area persegi yang akan mengaktifkan pemilihan atas semua yang ada di dalamnya.

    2) Line Tool, merupakan alat untuk membuat garis. Bila Anda membuat garis sambiil menekan tombol Shift, maka akan terbentuk garis yang horisontal, vertikal atau miring 450.

    3) Pen Tool, digunakan untuk membuat objek elips (oval). Untuk membuat lingkaran gunakan tool ini sambil menekan Shift.

    4) Pencil Tool, Adalah alat untuk menggambar garis atau titik secara bebas.

    5) Free Transform Tool, digunakan untuk memodifikasi bentuk dari suatu objek.

    6) Ink Bottle Tool, digunakan untuk mewarnai suatu garis. 7) Eyedropper Tool, digunakan untuk mengambil warna yang berasal

    dari suatu objek di stagge sehingga Anda bisa menyamakan warna ketika menggambar.

    8) Hand Tool, digunakan untuk menggeser stage secara bebas, sanggat berguna bila Anda memperbesar (zoom) stage sehinga tidak seluruh stage terlihat dilayar.

    9) Stroke Color Tool, digunakan untuk memiliih warna ketika mengambar garis.

    10) Fill Color Tool, digunakan untuk mengisi warna dari bagian dalam objek yang sedang digambar. Disini juga tersedia efek pengisian tergradasi.

    11) Default Color Tool, Klik ikon ini untuk mengembalikan stroke color menjadi hitam dan fill coor menjadi putih.

    12) No Color Tool, digunakan untuk menghilangkan warna dari garis atau warna dari isi objek tergantung penggunaannya.

    13) Option Pane, menampilkan berbagai pilihan untuk memodifikasi efek dari suatu tool yang kita pilih, berbeda untuk setiap tool.

    14) Subselect Tool, digunakan untuk memodifikasi suatu ggaris yang dibuat dengan Pen tool.

    15) Lasso Tool, digunakan untuk memilih suatu area secara tidak teratur. Semua yang masuk areanya akan terpilih.

    16) Text Tool, digunakan untuk membuat text box yang dapat diisi dengan berbagai tulisan.

    17) Rectangle Tool, digunakan untuk membuat bentuk persegi. Bila ingin membuat bujur sangkar secara sempurna gunakan tool ini sambil menekan tombol shift.

    Option Pane

    Selection Tool

    Line Tool

    Default Color Tool

    Hand Tool

    Eye Dropper Tool

    Ink Bottle Tool

    Pencil Tool

    Oval Tool

    Pen Tool

    Free Transform Tool

    Subselect Tool

    Lasso Tool

    Teks Tool

    Paint Bucket Tool

    Eraser Tool

    Rectangle Tool

    Brush Tool

    Gradient Transform Tool

    Zoom Tool

    Stroke Color Tool

    Fill Color Tool

    Swap Color Tool

    No Color

    2| F l a s h 8 3| F l a s h 8

  • 18) Brush Tool, digunakan untuk menggambar dengan kuas secara bebas.

    19) Fill Transform Tool, digunakan untuk memodifikasi bentuk dan posisi dari Gradient Fill.

    20) Paint Bucket Tool, digunakan untuk memodifikasi warna dan gradasi warna di dalam suatu objek.

    21) Eraser Tool, digunakan untuk menghapus suatu gambar. 22) Zoom Tool, merupakan kaca pembesar untuk memperbesar gambar,

    tetapi juga dapat berfungsi sebaliknya, yaitu untuk memperkecil gambar.

    23) Swap Color Tool, digunakan untuk membalik warna garis atau isi suatu objek.

    B. Frame By Frame

    1. Buat objek lingkaran dengan menggunakan Oval tool 2. Posisikan objek di pojok kiri

    3. Insert keyframe di frame 2 lalu geser ke kanan objek lingkaran tersebut 4. Beri keyframe di frame selajutnya sampai frame 5

    5. Setiap frame digeser sampai objek pada posisi paling kanan

    6. Test Movie (Ctrl + enter) C. Animasi Shape

    1. Buat objek kotak dengan menggunakan Rectangle tool 2. Posisikan objek di pojok kiri

    3. Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut 4. Pada frame lima, objek kotak dihapus dan diganti objek oval

    5. Klik diantara frame 1 dan 5 6. Lihat properties dibawah lalu piih Tween Shape

    7. Pada frame akan muncul panah hijau

    8. Test Movie (Ctrl + enter)

    4 | F l a s h 8 5| F l a s h 8

  • D. Animasi Motion

    1. Buat objek lingkaran dengan menggunakan Oval tool . Lalu hapus ditengah-tengahnya dengan cara diblok terus klik delete. Ingat!! dalam menjalankan motion, objek harus dalam posisi di kunci. Dapat menggunakan group (Ctril+ G)

    2. Posisikan objek di pojok kiri

    3. Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut

    4. Klik diantara frame 1 dan 5 5. Lihat properties dibawah lalu pilih Tween Motion

    6. Pada frame akan muncul panah warna biru

    7. Klik diantara frame 1 dan 5 8. Lihat propertis dibawah lau pilih rotasi CW

    9. Test Movie (Ctrl + enter)

    E. Animasi Motion Guide

    1. Klik file Import gambar kupu-kupu 2. Rotasi dengan posisi agak miring dengan menggunakan Free

    Tansform Tool

    3. Insert Keyframe pada frame 30 lalu geser objek ke kanan

    4. Klik kanan di frame 1 dan 30 lalu pilih Create Motion Tween

    5. Klik Add Motion Guide 6. Pada layer guide, klik di frame 1

    6 | F l a s h 8 7| F l a s h 8

  • 7. Buat jalur kupu-kupu sesuai keinginan dengan menggunakan pencil

    tool 8. Atur posisi akhir kupu-kupu tepat pada garis

    9. Centang Orient to Path pada propertis dibawah agar pergerakan kupu-

    kupu menyesuaikan jalur. Untuk menampilkan propertis tersebut, terlebih dulu klik diantara frame 1 dan 30

    10. Test Movie (Ctrl + enter)

    F. Animasi Masking

    1. Buat teks dengan menggunakan Teks tool

    2. Insert layer lalu buat objek kotak yang nantinya sebagai tutup (mask). Objek kotak di group untuk menggunakan tween motion

    3. Insert keyframe di frame 25 pada layer 2 (kotak). Pindahkan objek kotak ke sebelah kanan

    4. Klik kanan diantara frame 1 dan 25. Pilih Create Motion Tween

    5. Klik kanan pada layer 2 lalu pulih Mask

    6. Tes Movie (Ctrl + enter)

    G. Symbol Grafik 1. Import gambar motor ke stage

    8 | F l a s h 8 9| F l a s h 8

  • 2. Seleksi gambar lalu klik Modify Convert to Symbol Graphic. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK

    3. Klik double pada objek gambar motor. Muncul symbol grapik moge didalam scene 1

    4. Insert keyframe pada frame 25 lalu geser objek motor kesebelah kiri 5. Klik kanan diantara frame 1 dan 25 lalu pilih Create Motion Tween

    6. Kembalikan ke scene 1 7. Insert frame di frame 20 (symbol grafik membutuhkan framelebeih dari satu

    untuk menjalankan animasi)

    8. Tes Movie (Ctrl + enter)

    H. Symbol Movie Clip 1. Import gambar kupu-kupu ke dalam stage

    2. Seleksi gambar lalu klik Modify Convert to Symbol Movie Clip.

    Beri nama dan tempatkan registration pada posisi tengah lalu klik OK

    3. Klik double pada objek gambar kupu-kupu. Muncul symbol grapik kupu

    didalam scene 1

    4. Buat animasi pergerakan kupu-kupu mengepakkan sayap. Dari frame 5, 10, 15 diberi keyframe buat menjadi pendek

    5. Kemudian diantara keyframe tersebut diberi tween motion (berada pada propertis dibawah)

    6. Kembalikan ke scene 1 7. Tes Movie (Ctrl + enter). Animasi dapat berjalan karena Symbol Movie Clip

    bisa berfungsi walaupun hanya mempunyai 1 frame

    10| F l a s h 8 11| F l a s h 8

  • I. Symbol Button 1. Buat objek lingkaran dengan warna colour radial

    2. Seleksi gambar lalu klik Modify Convert to Symbol Button. Beri nama dan tempatkan registration pada posisi tengah lalu klik OK

    3. Klik double pada objek lingkaran. Muncul symbol grapik tombol didalam scene 1

    4. Beri keyframe di frame over, down, dan hit. Pada frame over ganti warna lingkaran menjadi merah radial. Di frame down warna biru radial dan di frame

    hit silver radial.

    Catatan:

    Up : tampilan awal

    Over : tampilan waktu disentuh

    Down : tampilan waktu ditekan atau di klik

    Hit : Area sentuh tombol

    5. Kembalikan ke scene 1 6. Tes Movie (Ctrl + enter)

    J. Animasi Orang Jalan 1. Rangkai gambar potongan-potongan tubuh menjadi utuh ke dalam stage dalam

    layer 1

    2. Di blok semua rangkaian gambar tersebut lalu Convert to Symbol kedalam Movie Clip

    12 | F l a s h 8 13| F l a s h 8

  • 3. Klik double objek orang lalu langsung klik kanan pada objek. Pilih Distribute to Layers

    4. Buat animasi pergerakannya

    5. Kembalikan ke scene 1 6. Insert layer rumah. Ambil gambar rumah masukkan kedalam layer rumah 7. Beri keyframe kedua layer pada frame 100 8. Klik kanan diantara frame 1 dan 100, pilih Create Motion Tween

    9. Tes Movie (Ctrl + enter)

    K. Save As 1. Klik file Save As bila file yang belum disimpan masih berupa untitled dan ada

    tanda bintang diatasnya (*). Simpan ditempat sesuai dengan keinginan,

    diusahakan dalam satu folder sendiri

    2. Bila sudah tersimpan, pada untitled akan berubaha sesuai dengan nama

    filenya. Dalam hal ini jalan.fla

    3. Untuk selanjutnya bila ada tanda bintang (*) maka file itu belum disimpan. Kalau sudah menggunakan Save As untuk selanjutnya tinggal Save (Ctrl + S)

    L. Publishing

    1. Klik File Publish Setting

    14 | F l a s h 8 15| F l a s h 8

  • a. .swf

    b. .html

    c. .gif

    d. .jpg

    e. .png

    f. .exe

    g. .hqx

    h. .mov

    2. OK

    M. Action Script 1. Tampilan action

    16 | F l a s h 8 17| F l a s h 8

  • 2. Objek

    a. Buat objek bintang pada stage. Klik tahan Rectangle Tool . Lalu pilih Polystar Tool

    b. Lihat properties dibawah, klik option,

    c. Insert keyframe pada frame 2, lalu buat ganti warna objek bintang. Selanjutnya insert keyframe lagi sampai frame 5.dan tiap keyframe diberi

    perubahan warna

    d. Insert layer untuk tombol, beri nama tombol pada layer yang akan diisi button dan beri nama bintang pada layer yang terdapat objek bintang.

    e. Ambil objek tombol pada menu Window Common Libraries Button

    f. Pilih tombol sesuai yang diinginkan

    3. Script Stop pada frame

    a. Dengan menngunakan objek bintang diatas, Insert layer baru lalu beri keyframe pada frame 5

    b. Klik kanan pada frame ke 5. Beri action stop

    18 | F l a s h 8 19| F l a s h 8

  • c. Tampilan frame

    d. Test Movie (Ctrl + Enter)

    Stop pada button

    a. Klik kanan pada button lalu beri action stop

    b. Test Movie (Ctrl + Enter)

    Nexframe

    a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto

    d. Tampilan script

    e. Test Movie (Ctrl + Enter)

    Previous Frame

    a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto

    d. Tampilan script

    e. Test Movie (Ctrl + Enter)

    GotoAndPlay

    a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto d. Tampilan script

    20 | F l a s h 8 21| F l a s h 8

  • e. Test Movie (Ctrl + Enter)

    GotoAndStop

    a. Klik kanan pada button lalu beri action b. Klik dulu Script Assist untuk memudahkan pembuatan script c. Pilih Global Fuction Timeline Control goto d. Tampilan script

    e. Test Movie (Ctrl + Enter)

    Fscommand fullscreeen (tampilan full)

    a. Insert layer baru, lalu klik kanan pada frame 1. Pilih Action

    b. Pilih Global Fuction Browser/Network fscommand fullscreen

    c. Tampilan script

    d. Test Movie (Ctrl + Enter)

    Fscommand quit (tampilan full)

    a. Insert layer baru, lalu klik kanan pada frame 1. Pilih Action

    b. Pilih Global Fuction Browser/Network fscommand quit

    c. Tampilan script

    d. Test Movie (Ctrl + Enter)

    Load Movie Num

    a. Siapkan 2 file fla, yang satu namanya jalan.fla sedangkan yang satu lagi terbang.fla

    22| F l a s h 8 23| F l a s h 8

  • b. Linkkan file jalan ke terbang dengan memberi script pada tombol yang ada pada file jalan.fla. Klik kanan pada tombol, pilih action

    c. Plih GlobalFuction Browser/Network loadmovie

    d. Klik dulu Script Assist untuk memudahkan pembuatan script e. Ketik URL terbang.swf dengan level 0

    f. Test Movie (Ctrl + Enter)

    24 | F l a s h 8

  • Jurusan Kurikulum dan Teknologi Pendidikan Fakultas Ilmu Pendidikan Universitas Negeri Semarang

    DAFTAR ISIStop pada frameStop pada buttonNexframePrevious FrameGotoAndPlayGotoAndStop